快递类APP产品UI设计模式及分析

快递类APP产品UI设计模式及分析博韩伟业（北京）科技股份有限公司APP产品设计模式设计风格与标识色彩布局导航按钮图标表单表格和列表搜索分类过滤工具图表视觉吸引反馈与功能可见性帮助一、快递类APP产品介绍顺丰速运圆通速递圆通行者申通快递EMS中通快递韵达速递韵达业务员DHLExpressMobile日本郵便e動郵局快递员UPSMobileUSPSMOBILEFedEx智能外勤一、快递类APP产品介绍顺丰速运顺丰速运移动客户端是顺丰速运基于Android操作系统开发的个人快件管理软件，向客户提供自助下单、查件、订单管理、服务点查询、运费查询等一站式掌上便捷快件服务。圆通速递圆通手机客户端Android版是基于Android手机操作系统开发的快件服务性软件，免费为您提供快件跟踪,快速下单,派件范围查询等简单实用功能.一站式服务尽在圆通手机客户端！圆通行者YTO快递员必备工具，装上APP，手机秒变PDA实时签收，一键秒签，收件抢单，收派列表，智能路线规划，问题件处理，键通知收件人，一键拨打收件人电话，收件现场打印电子面申通快递申通快递APP供大家寄件，查运单，及网点查询，让你足不出户可以寄快递，知道快递的动向，申通快递，一如亲至，用心成就你我一、快递类APP产品介绍EMS中国邮政速递物流有限公司开发的EMS手机客户端是基于ANDROID操作的个人快件管理应用，为用户提供快捷下单，查询服务、订单管理等一站式掌上便捷快件服务。手机EMS，简单你的快递生活！中通快递寄件、查询、附近网点、时效报价查询韵达速递主要服务于韵达快递公司的寄件和收件客户。对于日常生活与商务活动中的零散快递寄送需求，用户能以便捷方式向快递客服提交订单，或通过GPS定位和内置地图直接寻找附近服务网点和快递员，并实时跟踪快件整个生命周期的流转派送过程。韵达业务员为韵达业务员打造的办公软件，在这里韵达的业务员可以进行离线揽件，运单签收，抢单等，便捷提高工作效率一、快递类APP产品介绍快递员快递员是一款便捷的使用工具，既可通过短信、云呼、网络电话等方式通知收件人签收，也可通过账号绑定代替巴枪，完成到件、派件、签收等UPSMobile使用UPSMobile应用程序轻松管理货件运输。·追踪货件并设定别名·创建运输标签·查找UPS服务地点·预计货件成本和递送时间USPSMOBILEUSPS美国邮政署（美国EMS），找到一个邮局™或经认可的邮政Provider®，查找邮政编码™，计算出货价格（限制适用），日程安排皮卡，扫描标签，把你的邮件，你去任何地方使用USPS跟踪™工具。FedEx通过移动设备可完成包裹状态查询并获取实时状态更新。使用FedEx应用程序扫描托运标签二维码，可轻松查询货件、查找您附近的FedEx服务站、快速查询费率等。一、快递类APP产品介绍DHLExpressMobile世界DHL快递永远伴随着你！世界排名第一快递公司。联系、计算装运成本、送什么、为您服务、通知、新闻日本郵便这是日本邮政公司正式免费的应用程序（日本EMS）。服务于日本邮政公司的网站，提供邮政编码搜索和利率计算的程序。e動郵局中華郵政股份有限公司（台湾EMS），中華郵政-e動郵局提供您一個多元、安全及便利的郵政業務查詢服務，除提供儲匯牌告利率及匯率資訊、集郵、郵務、壽險及生活理財資訊等查詢服務項目，並將陸續推出儲金帳戶查詢、轉帳、繳費稅等多項服務。智能外勤二、界面设计风格与标识顺丰速运企业标识界面整体风格二、界面设计风格与标识圆通速递企业标识界面整体风格二、界面设计风格与标识申通快递企业标识界面整体风格二、界面设计风格与标识EMS企业标识界面整体风格二、界面设计风格与标识中通快递企业标识界面整体风格二、界面设计风格与标识韵达速递企业标识界面整体风格二、界面设计风格与标识UPSMobile企业标识界面整体风格二、界面设计风格与标识USPSMOBILE企业标识界面整体风格二、界面设计风格与标识FedEx企业标识界面整体风格二、界面设计风格与标识DHLExpressMobile企业标识界面整体风格三、色彩四、布局手机操作中，拇指的可控范围有限，缺乏灵活度。尤其是在如今的大屏手机上，拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。（当用右手持握手机的时候，红色：拇指点击盲区；橙色：拇指能触及的区域需用史上吃奶的劲；绿色：拇指点击的最佳区域）四、布局一、标签式又名选项卡式，图标加文字1、底部tab式2、顶部tab式四、布局二、抽屉式又名侧边栏式，图标三、宫格式又名桌面式，图标+文字四、布局四、平铺式五、跳板式四、布局六、列表式文字、文字+图标1、竖排列表2、横排列表四、布局七、弹出框八、点聚式又名扇形扩展式，图标五、首页五、首页六、导航主导航模式六、导航次导航模式所有的主要导航模式都可以用作次级导航。跳板式、列表菜单式、选项卡菜单式、陈列馆式、仪表式、隐喻式、超级菜单式。还有一些其他的导航模式也可作为次级导航，但不太适合用作主要导航，包括如下：六、导航一级导航样式0123456顶部Tab底部Tab-5底部Tab-4跳板九宫格布局数量统计布局数量统计底部Tab样式六、导航二级导航样式九宫格跳板列表顶部Tab转盘抽屉式按钮六、导航当前全功能APP二级导航样式七、按钮八、图标九、表单常见表单模式九、表单——登录表单登录表单应该只包括少量的信息输入：用户名、密码、操作按钮、密码帮助、注册选项等。有些应用将这些信息输入框设计在一屏内显示，另外一些应用，则首先显示“登录”或“注册”选项，然后根据用户的选择将其导向相应的表单。快递类APP多数都采用第一种方式的登录表单。九、表单——注册表单注册表单与登录表单一样，应该只包括少量的信息输入。注册表单九、表单——核对表单（寄件页）把多屏信息合并到一个核对表单中。九、表单——计算表单（时效运费查询）计算器类的应用，例如体重跟踪、税款预估以及贷款计算器，需要输入信息。虽然这些表单可以采用常见的操作和布局方式，但也不能忽视可读性方面的基本设计原则。最好的计算应用应该把输入数据和视觉化结果紧密关联。九、表单——搜索表单（快件查询）某些搜索功能要求用户输入多个约束条件或标准，才能找出搜索结果。与其他表单模式一样，搜索表单也应该只包括必要的输入项，并提供合理的默认值。九、表单——搜索表单（搜索框样式）九、表单——搜索表单（扫描页）九、表单——多步骤表单移动设备的屏幕较小，没有足够的物理空间，无法像网络应用那样显示臃肿的多步骤表单操作向导。多步骤表单九、表单——无数据表单十、表格和列表常见表格模式：基本表格（BasicTable）、无表头表格（HeaderlessTable）、行分组表格（GroupedRow）、固定列表格（FixedColumn）、级联式列表（CascadingList）、可编辑表格（EditableTable）、带有视觉指示器的表格（TableswithVisualIndicator）、带有内容总览和数据的表格（OverviewplusData）等。十、表格和列表基本表格表格的基本模式，列数据有固定的表头，表格呈网格式布局。表内的行可以设定不同的颜色，或者在各行之间用细线分割，都能提升表格的可读性。十、表格和列表无表头表格无表头表格的特征是——没有列标签，用较宽的行显示某一对象的多项信息。通常的做法是，用较大的字号显示行标记，用较小的字号显示细节内容。这种表格模式非常适合用来显示项目集合（如存货清单、食谱、相册等）和这些项的搜索结果。与列表类似，这种形式能方便用户快速浏览和选择。十、表格和列表固定列表格的表格对于较大的表格，固定某一列或某几列是个可行的做法。十、表格和列表带有内容总览和数据的表格带有内容总览和数据的表格模式指在表格各数据行上方显示表格内容的总览。十、表格和列表行分组表格对表格的行进行分组能让用户更容易地了解表格内的数据。行分组的作用类似于各个部分的标题，比如在Mint应用中，交易记录按照日期进行分组。十、表格和列表级联式表格很明显，在手机屏幕上显示树形表格非常麻烦，级联式列表可以提供同样的层级结构。十、表格和列表带有视觉指示器的表格火花谱线（Sparkline）和图标能提升表格的信息显示效果，可以让用户更容易地找到自己所关注的内容。十、表格和列表可编辑表格可编辑表格广泛应用于诸如QuickOffice之类的电子表格软件。网络应用中可编辑表格的很多设计原则都可用于移动终端的界面设计。十一、搜索搜索常见模式常见模式：显性搜索（ExplicitSearch）自动补全搜索（Auto-complete）范围搜索（ScopedSearch）保存搜索记录并显示最近搜索内容（Saved&Recent）搜索标准（表单）（SearchCriteria(form)）搜索结果（SearchResult）屏内分类（OnscreenSort）分类排序选择器（SortOrderSelector）分类表单（SortForm）屏内过滤（Onscreenfilter）过滤容器（FilterDrawer）过滤对话框（FilterDialog）过滤表单（FilterForm）十一、搜索显性搜索显性搜索要求用户执行明显的搜索操作并浏览搜索结果。其操作方式可以是点击屏幕上的搜索按钮，如Walmart的设计，或是按下键盘上的搜索键，如Target的设计。搜索结果通常显示在搜索栏下方。建议为显性搜索搭配自动补全模式。十一、搜索自动补全搜索或许网络应用和移动应用使用最广泛的搜索模式就是自动补全模式。用户输入内容时程序会立刻显示出一系列可能的输入结果，只要通过点击来选择某一项，程序就会执行搜索操作。另外一种情况是，用户持续输入内容，然后点击搜索按钮。十一、搜索自动补全搜索理想状况下，搜索结果将立刻显示出来，但要使用进度指示器（搜索中……）作为系统的反馈。如果程序在显示搜索结果时有延迟，就要给出一些反馈。Netflix在搜索输入域内显示了一个指示器，而Fidelity则在搜索结果显示区域内设计了一个指示器。在搜索结果中突出显示用户输入的搜索内容。十一、搜索动态搜索这种模式也被称为动态过滤。用户输入搜索内容，程序将动态地过滤屏幕上的数据。用户输入文字，程序会过滤屏幕上列出的内容项。对于有限的数据，如地址薄或个人媒体库，这种搜索模式非常有效，但它不太适合用来搜索海量数据。十一、搜索范围搜索有时，在执行搜索之前，首先确定搜索条件的范围能够更容易、更快速地搜索到想要的结果。根据数据集提供合理的搜索范围选项。3～6个范围选项足矣，用搜索表单实现高级搜索功能。十一、搜索保存搜索记录并显示最近搜索内容成功的移动应用界面设计都遵循基本的可用性原则：尊重用户的劳动成果。保存搜索记录并显示最近搜索内容的设计做到了这一点。有了这样的设计，用户就可以很容易地从先前的搜索内容中进行选择，而不需要再次输入相同的关键词或搜索条件。通过保存搜索记录，显示最近搜索内容来提升用户的工作效率。十一、搜索搜索表单这种搜索模式的特征是，在一个独立表单内输入多项搜索条件和一个显性的搜索按钮。十一、搜索搜索结果只要执行了搜索操作，那么就要在同一屏内显示搜索结果，或在专用的屏幕内显示。搜索结果可以显示为表格或列表，也可以在地图或卫星上显示，或者显示为缩略图。根据搜索结果的类型和用户使用偏好提供多种视图。十二、分类常用分类模式在显示搜索结果时，选择一种合理的默认分类方式非常重要。一点点常识加上用户调查就足以找出最有效的默认分类模式。根据当前的界面设计模式选择性地实现其他分类功能。•屏内分类•分类排序选择器•分类表单十二、分类屏内分类如果所要分类项很少，可以采用屏内分类模式，用户只需点击一次就可以实现分类排序。根据屏幕内其他界面元素的布局，把分类选项放在屏幕的顶端或底部。十二、分类分类排序选择器选择器模式是屏内分类的良好补充。很多UI控制元素都可用作选择器，但要考虑应用所属操作系统的设计原则（例如，Android应用通常用菜单作为选择器，iOS应用则用picker控件和操作表作为选择器）。十二、分类分类表