快递类APP产品UI设计模式及分析课件.ppt

1、快递类APP产品UI设计模式及分析博韩伟业（北京）科技股份有限公司APP产品设计模式设计风格与标识色彩布局导航按钮图标表单表格和列表搜索分类过滤工具图表视觉吸引反馈与功能可见性帮助一、快递类APP产品介绍顺丰速运圆通速递圆通行者申通快递EMS中通快递韵达速递韵达业务员DHL Express Mobile日本郵便e動郵局快递员UPS MobileUSPS MOBILEFedEx智能外勤一、快递类APP产品介绍顺丰速运顺丰速运移动客户端是顺丰速运基于Android操作系统开发的个人快件管理软件，向客户提供自助下单、查件、订单管理、服务点查询、运费查询等一站式掌上便捷快件服务。圆通速递圆通手机客户端

2、Android版是基于Android手机操作系统开发的快件服务性软件，免费为您提供快件跟踪,快速下单,派件范围查询等简单实用功能.一站式服务尽在圆通手机客户端！圆通行者YTO快递员必备工具，装上APP，手机秒变PDA实时签收，一键秒签，收件抢单，收派列表，智能路线规划，问题件处理，键通知收件人，一键拨打收件人电话，收件现场打印电子面申通快递申通快递APP供大家寄件，查运单，及网点查询，让你足不出户可以寄快递，知道快递的动向，申通快递，一如亲至，用心成就你我一、快递类APP产品介绍EMS中国邮政速递物流有限公司开发的EMS手机客户端是基于ANDROID操作的个人快件管理应用，为用户提供快捷下单，

3、查询服务、订单管理等一站式掌上便捷快件服务。手机EMS，简单你的快递生活！中通快递寄件、查询、附近网点、时效报价查询韵达速递主要服务于韵达快递公司的寄件和收件客户。对于日常生活与商务活动中的零散快递寄送需求，用户能以便捷方式向快递客服提交订单，或通过GPS定位和内置地图直接寻找附近服务网点和快递员，并实时跟踪快件整个生命周期的流转派送过程。韵达业务员为韵达业务员打造的办公软件，在这里韵达的业务员可以进行离线揽件，运单签收，抢单等，便捷提高工作效率一、快递类APP产品介绍快递员快递员是一款便捷的使用工具，既可通过短信、云呼、网络电话等方式通知收件人签收，也可通过账号绑定代替巴枪，完成到件、派件、

4、签收等UPS Mobile使用UPSMobile应用程序轻松管理货件运输。追踪货件并设定别名创建运输标签查找UPS服务地点预计货件成本和递送时间USPS MOBILEUSPS美国邮政署（美国EMS），找到一个邮局或经认可的邮政Provider，查找邮政编码，计算出货价格（限制适用），日程安排皮卡，扫描标签，把你的邮件，你去任何地方使用USPS跟踪工具。FedEx通过移动设备可完成包裹状态查询并获取实时状态更新。使用FedEx应用程序扫描托运标签二维码，可轻松查询货件、查找您附近的FedEx服务站、快速查询费率等。一、快递类APP产品介绍DHL Express Mobile世界DHL快递永远伴随

5、着你！世界排名第一快递公司。联系、计算装运成本、送什么、为您服务、通知、新闻日本郵便这是日本邮政公司正式免费的应用程序（日本EMS）。服务于日本邮政公司的网站，提供邮政编码搜索和利率计算的程序。e動郵局中華郵政股份有限公司（台湾EMS），中華郵政-e動郵局提供您一個多元、安全及便利的郵政業務查詢服務，除提供儲匯牌告利率及匯率資訊、集郵、郵務、壽險及生活理財資訊等查詢服務項目，並將陸續推出儲金帳戶查詢、轉帳、繳費稅等多項服務。智能外勤二、界面设计风格与标识顺丰速运企业标识界面整体风格二、界面设计风格与标识圆通速递企业标识界面整体风格二、界面设计风格与标识申通快递企业标识界面整体风格二、界面设计风

6、格与标识EMSEMS企业标识界面整体风格二、界面设计风格与标识中通快递企业标识界面整体风格二、界面设计风格与标识韵达速递企业标识界面整体风格二、界面设计风格与标识UPS Mobile企业标识界面整体风格二、界面设计风格与标识USPS MOBILE企业标识界面整体风格二、界面设计风格与标识FedEx企业标识界面整体风格二、界面设计风格与标识DHL Express Mobile企业标识界面整体风格三、色彩四、布局手机操作中，拇指的可控范围有限，缺乏灵活度。尤其是在如今的大屏手机上，拇指的可控范围还不到整个屏幕的三分之一主要集中在屏幕底部、与拇指相对的另外一边。（当用右手持握手机的时候，红色：拇指点

7、击盲区；橙色：拇指能触及的区域需用史上吃奶的劲；绿色：拇指点击的最佳区域）四、布局一、标签式又名选项卡式，图标加文字1、底部tab式2、顶部tab式四、布局二、抽屉式又名侧边栏式，图标三、宫格式又名桌面式，图标+文字四、布局四、平铺式五、跳板式四、布局六、列表式文字、文字+图标1、竖排列表2、横排列表四、布局七、弹出框八、点聚式又名扇形扩展式，图标五、首页五、首页六、导航主导航模式六、导航次导航模式所有的主要导航模式都可以用作次级导航。跳板式、列表菜单式、选项卡菜单式、陈列馆式、仪表式、隐喻式、超级菜单式。还有一些其他的导航模式也可作为次级导航，但不太适合用作主要导航，包括如下：六、导航一级导

8、航样式0123456顶部Tab底部Tab-5底部Tab-4跳板九宫格布局数量统计布局数量统计底部Tab样式六、导航二级导航样式九宫格跳板列表顶部Tab转盘抽屉式按钮六、导航当前全功能APP二级导航样式七、按钮八、图标九、表单常见表单模式九、表单登录表单登录表单应该只包括少量的信息输入：用户名、密码、操作按钮、密码帮助、注册选项等。有些应用将这些信息输入框设计在一屏内显示，另外一些应用，则首先显示“登录”或“注册”选项，然后根据用户的选择将其导向相应的表单。快递类APP多数都采用第一种方式的登录表单。九、表单注册表单注册表单与登录表单一样，应该只包括少量的信息输入。注册表单九、表单核对表单（寄件

9、页）把多屏信息合并到一个核对表单中。九、表单计算表单（时效运费查询）计算器类的应用，例如体重跟踪、税款预估以及贷款计算器，需要输入信息。虽然这些表单可以采用常见的操作和布局方式，但也不能忽视可读性方面的基本设计原则。最好的计算应用应该把输入数据和视觉化结果紧密关联。九、表单搜索表单（快件查询）某些搜索功能要求用户输入多个约束条件或标准，才能找出搜索结果。与其他表单模式一样，搜索表单也应该只包括必要的输入项，并提供合理的默认值。九、表单搜索表单（搜索框样式）九、表单搜索表单（扫描页）九、表单多步骤表单移动设备的屏幕较小，没有足够的物理空间，无法像网络应用那样显示臃肿的多步骤表单操作向导。多步骤表

10、单九、表单无数据表单十、表格和列表常见表格模式常见表格模式：基本表格（Basic Table）、无表头表格（Headerless Table）、行分组表格（Grouped Row）、固 定 列 表 格（Fixed Column）、级 联 式 列 表（CascadingList）、可编辑表格（Editable Table）、带有视觉指示器的表格（Tables with Visual Indicator）、带有内容总览和数据的表格（Overview plus Data）等。十、表格和列表基本表格表格的基本模式，列数据有固定的表头，表格呈网格式布局。表内的行可以设定不同的颜色，或者在各行之间用细线分

11、割，都能提升表格的可读性。十、表格和列表无表头表格无表头表格的特征是没有列标签，用较宽的行显示某一对象的多项信息。通常的做法是，用较大的字号显示行标记，用较小的字号显示细节内容。这种表格模式非常适合用来显示项目集合（如存货清单、食谱、相册等）和这些项的搜索结果。与列表类似，这种形式能方便用户快速浏览和选择。十、表格和列表固定列表格的表格对于较大的表格，固定某一列或某几列是个可行的做法。十、表格和列表带有内容总览和数据的表格带有内容总览和数据的表格模式指在表格各数据行上方显示表格内容的总览。十、表格和列表行分组表格对表格的行进行分组能让用户更容易地了解表格内的数据。行分组的作用类似于各个部分的标

12、题，比如在 Mint 应用中，交易记录按照日期进行分组。十、表格和列表级联式表格很明显，在手机屏幕上显示树形表格非常麻烦，级联式列表可以提供同样的层级结构。十、表格和列表带有视觉指示器的表格火花谱线（Sparkline）和图标能提升表格的信息显示效果，可以让用户更容易地找到自己所关注的内容。十、表格和列表可编辑表格可编辑表格广泛应用于诸如 QuickOffice 之类的电子表格软件。网络应用中可编辑表格的很多设计原则都可用于移动终端的界面设计。十一、搜索搜索常见模式常见模式：显性搜索（Explicit Search）自动补全搜索（Auto-complete）范围搜索（Scoped Search

13、）保存搜索记录并显示最近搜索内容（Saved&Recent）搜索标准（表单）（Search Criteria(form)）搜索结果（Search Result）屏内分类（Onscreen Sort）分类排序选择器（Sort Order Selector）分类表单（Sort Form）屏内过滤（Onscreen filter）过滤容器（Filter Drawer）过滤对话框（Filter Dialog）过滤表单（Filter Form）十一、搜索显性搜索显性搜索要求用户执行明显的搜索操作并浏览搜索结果。其操作方式可以是点击屏幕上的搜索按钮，如 Walmart 的设计，或是按下键盘上的搜索键，如T

14、arget 的设计。搜索结果通常显示在搜索栏下方。建议为显性搜索搭配自动补全模式。十一、搜索自动补全搜索或许网络应用和移动应用使用最广泛的搜索模式就是自动补全模式。用户输入内容时程序会立刻显示出一系列可能的输入结果，只要通过点击来选择某一项，程序就会执行搜索操作。另外一种情况是，用户持续输入内容，然后点击搜索按钮。十一、搜索自动补全搜索理想状况下，搜索结果将立刻显示出来，但要使用进度指示器（搜索中）作为系统的反馈。如果程序在显示搜索结果时有延迟，就要给出一些反馈。Netflix在搜索输入域内显示了一个指示器，而 Fidelity则在搜索结果显示区域内设计了一个指示器。在搜索结果中突出显示用户输

15、入的搜索内容。十一、搜索动态搜索 这种模式也被称为动态过滤。用户输入搜索内容，程序将动态地过滤屏幕上的数据。用户输入文字，程序会过滤屏幕上列出的内容项。对于有限的数据，如地址薄或个人媒体库，这种搜索模式非常有效，但它不太适合用来搜索海量数据。十一、搜索范围搜索有时，在执行搜索之前，首先确定搜索条件的范围能够更容易、更快速地搜索到想要的结果。根据数据集提供合理的搜索范围选项。3 6 个范围选项足矣，用搜索表单实现高级搜索功能。十一、搜索保存搜索记录并显示最近搜索内容 成功的移动应用界面设计都遵循基本的可用性原则：尊重用户的劳动成果。保存搜索记录并显示最近搜索内容的设计做到了这一点。有了这样的设计

16、，用户就可以很容易地从先前的搜索内容中进行选择，而不需要再次输入相同的关键词或搜索条件。通过保存搜索记录，显示最近搜索内容来提升用户的工作效率。十一、搜索搜索表单这种搜索模式的特征是，在一个独立表单内输入多项搜索条件和一个显性的搜索按钮。十一、搜索搜索结果 只要执行了搜索操作，那么就要在同一屏内显示搜索结果，或在专用的屏幕内显示。搜索结果可以显示为表格或列表，也可以在地图或卫星上显示，或者显示为缩略图。根据搜索结果的类型和用户使用偏好提供多种视图。十二、分类常用分类模式 在显示搜索结果时，选择一种合理的默认分类方式非常重要。一点点常识加上用户调查就足以找出最有效的默认分类模式。根据当前的界面设

17、计模式选择性地实现其他分类功能。屏内分类 分类排序选择器 分类表单十二、分类屏内分类 如果所要分类项很少，可以采用屏内分类模式，用户只需点击一次就可以实现分类排序。根据屏幕内其他界面元素的布局，把分类选项放在屏幕的顶端或底部。十二、分类分类排序选择器 选择器模式是屏内分类的良好补充。很多 UI 控制元素都可用作选择器，但要考虑应用所属操作系统的设计原则（例如，Android 应用通常用菜单作为选择器，iOS 应用则用 picker 控件和操作表作为选择器）。十二、分类分类表单很多应用都把分类和过滤功能整合在一屏内显示，通常称为提炼（Refine）。这是最为有效的分类模式，它要求用户打开表单，选

18、择搜索选项，然后执行选项（点击“确定”或“应用”按钮）。十三、过滤常见过滤模式 搜索大量数据还要求执行过滤操作，这一操作也被称为提炼。过滤操作依赖于用户选择的，用以提炼搜索结果或大量目标的条件。十三、过滤屏内过滤与屏内分类一样，屏内过滤与过滤结果或目标列表在同一屏内显示。用户点击之后，系统执行过滤操作。十三、过滤过滤容器过滤容器也可以用来显示过滤选项，它与屏内过滤一样高效。快速滑动或触摸操作对象都能打开容器。十三、过滤过滤对话框和网络应用中的弹出对话框一样，过滤对话框也是一种自然交互模式。它可以让用户选择过滤选项或取消操作。使用简短的过滤选项列表，避免滚屏。如果列表较长或有多个过滤选项，考虑使

19、用过滤表单。十三、过滤过滤表单更高级的过滤/提炼选项可以让用户方便地访问海量数据。十四、工具常用工具模式 常见模式：工具栏（Toolbar）、重叠菜单（Overlay Menu）、情境工具（Contextual Tool）、内联操作（Inline Action）、调用操作按钮（Call to Action Button）、批量操作（Bulk Action）。十四、工具工具栏 工具栏也称为操作栏（Action Bar），其中包含实现屏幕级操作的工具。十四、工具选项菜单 与工具栏一样，选项菜单也包含屏幕级的操作，但却有很多种不同的访问和显示方法。如果可能，采取直接交互式的设计方案。不要把导航隐藏在

20、选项菜单中。如果某一屏只有一个操作选项，考虑使用调用动作按钮模式。十四、工具调用动作按钮如果某一屏内只有一个主要的操作选项，采用调用动作按钮的模式或许比工具栏或菜单要更好。十四、工具调用动作按钮如果某一屏内只有一个主要的操作选项，采用调用动作按钮的模式或许比工具栏或菜单要更好。十四、工具调用动作按钮对于只有一个主要操作，外加一项辅助操作的屏幕来说，这种模式也能起到不错的效果。但在这种情况下，一定要为主要的操作设计出不同于其他按钮的视觉效果。不要把主要操作隐藏在菜单中，也不能将其设计成无法识别的工具栏图标。一定要让其显而易见（良好的对比效果），不言自明（含义清晰的标签）。十四、工具情境工具情境工

21、具可以作用于屏幕内特定的操作对象。如果只在恰当的情境处显示此类工具，它就能起到非常好的效果（还能有效缓解界面的混乱现象）。十四、工具内联操作内联操作也可作用于屏幕上某个特定的对象，但与前一模式不同的是，其操作总是可见。十四、工具多状态按钮 正常情况下，用户界面的控制项应该只有一个操作目的。但多状态按钮是个例外。在受限的移动设备屏幕内，按钮既是触发器又可以作为一种反馈机制，这样做具有一定的实用价值。多状态按钮非常适合一系列联系紧密、在有限屏幕空间连续执行内的操作。十四、工具批量操作 常见的批量操作包括：选择、添加/删除和重新排序。程序的主屏幕内不应该塞满此类操作选项，而应该采用批量操作模式的设计

22、。诸如删除和重新排序之类的批量操作最好在编辑模式下进行。提供明显的选项，让用户可以退出编辑模式。十五、图表常见图表模式：带过滤器的图表（Chart with Filters）总览加数据式图表（Overview+Data）滚动预览图表（Scrolling with Preview）数据点细节图（DataPointDetails）详 细 信 息 图（Drill Down）缩 放 图（Zoom In）数 据 透 视 表（PivotTable）火花谱线图（Sparklines）十六、视觉吸引常见模式：对话框（Dialog）提示（Tip）使用向导（Tour）视频演示（Demo）幻 灯 片（Transpa

23、rency）首 次 使 用 引 导（1st Time Through）持 续 视 觉 吸 引（Persistent）可发现的视觉吸引（Discoverable）十六、视觉吸引对话框：对话框：对话框的内容一定要言简意赅，确保用户可以通过其他方式访问程序的使用说明。提示：提示：提示可以出现于屏幕的任何位置，它比对话框更能融入使用情境。除了主页面之外，提示也可用于其他屏幕。提示要尽可能地接近它所指向的功能，保持内容的简洁，在交互开始时（也就是当用户触摸屏幕时）关闭提示。十六、视觉吸引使用使用向导：向导：通过提供一屏又一屏的新内容、不断出现的新功能，使用向导能提供无尽的视觉吸引。首次使用向导：首次使用

24、向导：与其他视觉吸引模式不同的是，首次使用引导不会在与其相关的屏幕出现之前显示。它是屏幕设计的一部分，直到被其他内容覆盖、改写之前，或用户执行操作之前，它都一直存在于界面之内。十六、视觉吸引视频演示：视频演示：对于那些依赖于特定动作或交互实现功能的应用来说，视频演示或许是最好的视觉吸引模式，因为视频演示的本来就是处于交互状态的应用。视频演示可以展示应用的关键功能，也可以用来显示应用的标准使用流程。一定要提供常见的视频控制选项（停止、暂停、音量控制等）。幻灯片：幻灯片：其他的视觉吸引模式都在各种网络程序中出现过，而幻灯片则是唯一出现在触摸屏设备上的视觉吸引模式（至少到目前为止是这样的）。它常用于主屏幕的设计，幻灯片通常以透明层的方式显示在实际屏幕内容之上，用图解法说明产品的使用方式。十六、反馈与功能可见性常见反馈模式常见反馈模式：出错（Errors）确认（Confirmation）系统状态（System Status）功能可见性模式功能可见性模式：触摸（Tap）滑动（Flick）拖曳（Drag）十七、帮助常见帮助模式常见帮助模式：使用说明（How To）界面元素说明（Cheat Sheet）使用向导（Tour）APP详细功能可以查看快递类APP产品分析.docx文档。