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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,快递类,APP,产品,UI,设计模式及分析,博韩伟业（北京）科技股份有限公司,1,APP,产品设计模式,设计风格与标识,色彩,布局,导航,按钮,图标,表单,表格和列表,搜索,分类,过滤,工具,图表,视觉吸引,反馈与功能可见性,帮助,2,一、快递类,APP,产品介绍,顺丰速运,圆通速递,圆通行者,申通快递,EMS,中通快递,韵达速递,韵达业务员,DHL Express Mobile,日本郵便,e,動郵局,快递员,UPS Mobile,USPS MOBILE,FedEx,智能外勤,3,一、快递类,APP,产品介绍,顺丰速运,顺丰速运移动客户端是顺丰速运基于,Android,操作系统开发的个人快件管理软件，向客户提供自助下单、查件、订单管理、服务点查询、运费查询等一站式掌上便捷快件服务。,圆通速递,圆通手机客户端,Android,版是基于,Android,手机操作系统开发的快件服务性软件，免费为您提供快件跟踪,快速下单,派件范围查询等简单实用功能,.,一站式服务尽在圆通手机客户端！,圆通行者,YTO,快递员必备工具，装上,APP,，手机秒变,PDA,实时签收，一键秒签，收件抢单，收派列表，智能路线规划，问题件处理，键通知收件人，一键拨打收件人电话，收件现场打印电子面,申通快递,申通快递,APP,供大家寄件，查运单，及网点查询，让你足不出户可以寄快递，知道快递的动向，申通快递，一如亲至，用心成就你我,4,一、快递类,APP,产品介绍,EMS,中国邮政速递物流有限公司开发的,EMS,手机客户端是基于,ANDROID,操作的个人快件管理应用，为用户提供快捷下单，查询服务、订单管理等一站式掌上便捷快件服务。手机,EMS,，简单你的快递生活！,中通快递,寄件、查询、附近网点、时效报价查询,韵达速递,主要服务于韵达快递公司的寄件和收件客户。,对于日常生活与商务活动中的零散快递寄送需求，用户能以便捷方式向快递客服提交订单，或通过,GPS,定位和内置地图直接寻找附近服务网点和快递员，并实时跟踪快件整个生命周期的流转派送过程。,韵达业务员,为韵达业务员打造的办公软件，在这里韵达的业务员可以进行离线揽件，运单签收，抢单等，便捷提高工作效率,5,一、快递类,APP,产品介绍,快递员,快递员是一款便捷的使用工具，既可通过短信、云呼、网络电话等方式通知收件人签收，也可通过账号绑定代替巴枪，完成到件、派件、签收等,UPS Mobile,使用,UPS Mobile,应用程序轻松管理货件运输。,追踪货件并设定别名,创建运输标签,查找,UPS,服务地点,预计货件成本和递送时间,USPS MOBILE,USPS,美国邮政署,（美国,EMS,），找到一个邮局或经认可的邮政,Provider,，查找邮政编码，计算出货价格（限制适用），日程安排皮卡，扫描标签，把你的邮件，你去任何地方使用,USPS,跟踪工具。,FedEx,通过移动设备可完成包裹状态查询并获取实时状态更新。使用,FedEx,应用程序扫描托运标签二维码，可轻松查询货件、查找您附近的,FedEx,服务站、快速查询费率等。,6,一、快递类,APP,产品介绍,DHL Express Mobile,世界,DHL,快递永远伴随着你！世界排名第一快递公司。,联系、计算装运成本、送什么、为您服务、通知、新闻,日本郵便,这是日本邮政公司正式免费的应用程序（日本,EMS,）。,服务于日本邮政公司的网站，提供邮政编码搜索和利率计算的程序。,e,動郵局,中華郵政股份有限公司,（台湾,EMS,），,中華郵政,-e,動郵局提供您一個多元、安全及便利的郵政業務查詢服務，除提供儲匯牌告利率及匯率資訊、集郵、郵務、壽險及生活理財資訊等查詢服務項目，並將陸續推出儲金帳戶查詢、轉帳、繳費稅等多項服務。,智能外勤,7,二、界面设计风格与标识,顺丰速运,企业标识,界面整体风格,8,二、界面设计风格与标识,圆通速递,企业标识,界面整体风格,9,二、界面设计风格与标识,申通快递,企业标识,界面整体风格,10,二、界面设计风格与标识,EMS,企业标识,界面整体风格,11,二、界面设计风格与标识,中通快递,企业标识,界面整体风格,12,二、界面设计风格与标识,韵达速递,企业标识,界面整体风格,13,二、界面设计风格与标识,UPS Mobile,企业标识,界面整体风格,14,二、界面设计风格与标识,USPS MOBILE,企业标识,界面整体风格,15,二、界面设计风格与标识,FedEx,企业标识,界面整体风格,16,二、界面设计风格与标识,DHL Express Mobile,企业标识,界面整体风格,17,三、色彩,18,四、布局,手机操作中，拇指的可控范围有限，缺乏灵活度。尤其是在如今的大屏手机上，拇指的可控范围还不到整个屏幕的三分之一,主要集中在屏幕底部、与拇指相对的另外一边。,（当用右手持握手机的时候，红色：拇指点击盲区；橙色：拇指能触及的区域需用史上吃奶的劲；绿色：拇指点击的最佳区域）,19,四、布局,一、标签式 又名选项卡式，图标加文字,1,、底部,tab,式,2,、顶部,tab,式,20,四、布局,二、抽屉式 又名侧边栏式，图标,三、宫格式 又名桌面式，图标,+,文字,21,四、布局,四、平铺式,五、跳板式,22,四、布局,六、列表式 文字、文字,+,图标,1,、竖排列表,2,、横排列表,23,四、布局,七、弹出框,八、点聚式 又名扇形扩展式，图标,24,五、首页,25,五、首页,26,六、导航,主导航模式,27,六、导航,次导航模式,所有的主要导航模式都可以用作次级导航。,跳板式、列表菜单式、选项卡菜单式、陈列馆式、仪表式、隐喻式、超级菜单式。,还有一些其他的导航模式也可作为次级导航，但不太适合用作主要导航，包括如下：,28,六、导航,一级导航样式,底部,Tab,样式,29,六、导航,二级导航样式,九宫格,跳板,列表,顶部,Tab,转盘,抽屉式,按钮,30,六、导航,当前全功能,APP,二级导航样式,31,七、按钮,32,八、图标,33,九、表单,常见表单模式,34,九、表单,登录表单,登录表单应该只包括少量的信息输入：用户名、密码、操作按钮、密码帮助、注册选项等。有些应用将这些信息输入框设计在一屏内显示，另 外 一 些 应 用，则 首 先 显 示“登 录”或“注 册”选 项，然后根据用户的选择将其导向相应的表单。,快递类,APP,多数都采用第一种方式的登录表单。,35,九、表单,注册表单,注册表单与登录表单一样，应该只包括少量的信息输入。,注册表单,36,九、表单,核对表单（寄件页）,把多屏信息合并到一个核对表单中。,37,九、表单,计算表单（时效运费查询）,计算器类的应用，例如体重跟踪、税款预估以及贷款计算器，需要输入信息。虽然这些表单可以采用常见的操作和布局方式，但也不能忽视可读性方面的基本设计原则。,最好的计算应用应该把输入数据和视觉化结果紧密关联。,38,九、表单,搜索表单（快件查询）,某些搜索功能要求用户输入多个约束条件或标准，才能找出搜索结果。与其他表单模式一样，搜索表单也应该只包括必要的输入项，并提供合理的默认值。,39,九、表单,搜索表单（搜索框样式）,40,九、表单,搜索表单（扫描页）,41,九、表单,多步骤表单,移动设备的屏幕较小，没有足够的物理空间，无法像网络应用那样显示臃肿的多步骤表单操作向导。,多步骤表单,42,九、表单,无数据表单,43,十、表格和列表,常见表格模式,：基本表格（,Basic Table,）、无表头表格（,Headerless Table,）、行分组表格（,Grouped Row,）、固 定 列 表 格（,Fixed Column,）、级 联 式 列 表（,CascadingList,）、可编辑表格（,Editable Table,）、带有视觉指示器的表格（,Tables with Visual Indicator,）、带有内容总览和数据的表格（,Overview plus Data,）等。,44,十、表格和列表,基本表格,表格的基本模式，列数据有固定的表头，表格呈网格式布局。表内的行可以设定不同的颜色，或者在各行之间用细线分割，都能提升表格的可读性。,45,十、表格和列表,无表头表格,无表头表格的特征是,没有列标签，用较宽的行显示某一对象的多项信息。通常的做法是，用较大的字号显示行标记，用较小的字号显示细节内容。,这种表格模式非常适合用来显示项目集合（如存货清单、食谱、相册等）和这些项的搜索结果。与列表类似，这种形式能方便用户快速浏览和选择。,46,十、表格和列表,固定列表格的表格,对于较大的表格，固定某一列或某几列是个可行的做法。,47,十、表格和列表,带有内容总览和数据的表格,带有内容总览和数据的表格模式指在表格各数据行上方显示表格内容的总览。,48,十、表格和列表,行分组表格,对表格的行进行分组能让用户更容易地了解表格内的数据。行分组的作用类似于各个部分的标题，比如在,Mint,应用中，交易记录按照日期进行分组。,49,十、表格和列表,级联式表格,很明显，在手机屏幕上显示树形表格非常麻烦，级联式列表可以提供同样的层级结构。,50,十、表格和列表,带有视觉指示器的表格,火花谱线（,Sparkline,）和图标能提升表格的信息显示效果，可以让用户更容易地找到自己所关注的内容。,51,十、表格和列表,可编辑表格,可编辑表格广泛应用于诸如,QuickOffice,之类的电子表格软件。网络应用中可编辑表格的很多设计原则都可用于移动终端的界面设计。,52,十一、搜索,搜索常见模式,常见模式：显性搜索（,Explicit Search,）,自动补全搜索（,Auto-complete,）,范围搜索（,Scoped Search,）,保存搜索记录并显示,最近搜索内容（,Saved&Recent,）,搜索标准（表单）（,Search Criteria(form),）,搜索结果（,Search Result,）,屏内分类（,Onscreen Sort,）,分类排序选择器（,Sort Order Selector,）,分类表单（,Sort Form,）,屏内过滤（,Onscreen filter,）,过滤容器（,Filter Drawer,）,过滤对话框（,Filter Dialog,）,过滤表单（,Filter Form,）,53,十一、搜索,显性搜索,显性搜索要求用户执行明显的搜索操作并浏览搜索结果。其操作方式可以是点击屏幕上的搜索按钮，如,Walmart,的设计，或是按下键盘上的搜索键，如,Target,的设计。搜索结果通常显示在搜索栏下方。建议为显性搜索搭配自动补全模式。,54,十一、搜索,自动补全搜索,或许网络应用和移动应用使用最广泛的搜索模式就是自动补全模式。用户输入内容时程序会立刻显示出一系列可能的输入结果，只要通过点击来选择某一项，程序就会执行搜索操作。另外一种情况是，用户持续输入内容，然后点击搜索按钮。,55,十一、搜索,自动补全搜索,理想状况下，搜索结果将立刻显示出来，但要使用进度指示器（搜索中,）作为系统的反馈。,如果程序在显示搜索结果时有延迟，就要给出一些反馈。,Netflix,在搜索输入域内显示了一个指示器，而,Fidelity,则在搜索结果显示区域内设计了一个指示器。,在搜索结果中突出显示用户输入的搜索内容。,56,十一、搜索,动态搜索,这种模式也被称为动态过滤。用户输入搜索内容，程序将动态地过滤屏幕上的数据。用户输入文字，程序会过滤屏幕上列出的内容项。,对于有限的数据，如地址薄或个人媒体库，这种搜索模式非常有效，但它不太适合用来搜索海量数据。,57,十一、搜索,范围搜索,有时，在执行搜索之前，首先确定搜索条件的范围能够更容易、更快速地搜索到想要的结果。根据数据集提供合理的搜索范围选项。,3,6,个范围选项足矣，用搜索表单实现高级搜索功能。,58,十一、搜索,保存搜索记录并显示最近搜索内容,成功的移动应用界面设计都遵循基本的可用性原则：尊重用户的劳动成果。保存搜索记录并显示最近搜索内容的设计做到了这一点。有了这样的设计，用户就可以很容易地从先前的搜索内容中进行选择，而不需要再次输入相同的关键词或搜索条件。,通过保存搜索记录，显示最近搜索内容来提升用户的工作效率。,59,十一、搜索,搜索表单,这种搜索模式的特征是，在一个独立表单内输入多项搜索条件和一个显性的搜索按钮。,60,十一、搜索,搜索结果,只要执行了搜索操作，那么就要在同一屏内显示搜索结果，或在专用的屏幕内显示。搜索结果可以显示为表格或列表，也可以在地图或卫星上显示，或者显示为缩略图。根据搜索结果的类型和用户使用偏好提供多种视图。,61,十二、分类,常用分类模式,在显示搜索结果时，选择一种合理的默认分类方式非常重要。一点点常识加上用户调查就足以找出最有效的默认分类模式。根据当前的界面设计模式选择性地实现其他分类功能。,屏内分类,分类排序选择器,分类表单,62,十二、分类,屏内分类,如果所要分类项很少，可以采用屏内分类模式，用户只需点击一次就可以实现分类排序。根据屏幕内其他界面元素的布局，把分类选项放在屏幕的顶端或底部。,63,十二、分类,分类排序,选择器,选择器模式是屏内分类的良好补充。很多,UI,控制元素都可用作选择器，但要考虑应用所属操作系统的设计原则（例如，,Android,应用通常用菜单作为选择器，,iOS,应用则用,picker,控件和操作表作为选择器）。,64,十二、分类,分类表单,很多应用都把分类和过滤功能整合在一屏内显示，通常称为提炼（,Refine,）。这是最为有效的分类模式，它要求用户打开表单，选择搜索选项，然后执行选项（点击“确定”或“应用”按钮）。,65,十三、过滤,常见过滤模式,搜索大量数据还要求执行过滤操作，这一操作也被称为提炼。过滤操作依赖于用户选择的，用以提炼搜索结果或大量目标的条件。,66,十三、过滤,屏内过滤,与屏内分类一样，屏内过滤与过滤结果或目标列表在同一屏内显示。用户点击之后，系统执行过滤操作。,67,十三、过滤,过滤容器,过滤容器也可以用来显示过滤选项，它与屏内过滤一样高效。快速滑动或触摸操作对象都能打开容器。,68,十三、过滤,过滤对话框,和网络应用中的弹出对话框一样，过滤对话框也是一种自然交互模式。它可以让用户选择过滤选项或取消操作。,使用简短的过滤选项列表，避免滚屏。如果列表较长或有多个过滤选项，考虑使用过滤表单。,69,十三、过滤,过滤表单,更高级的过滤,/,提炼选项可以让用户方便地访问海量数据。,70,十四、工具,常用工具模式,常见模式：工具栏（,Toolbar,）、重叠菜单（,Overlay Menu,）、情境工具（,Contextual Tool,）、内联操作（,Inline Action,）、调用操作按钮（,Call to Action Button,）、批量操作（,Bulk Action,）。,71,十四、工具,工具栏,工具栏也称为操作栏（,Action Bar,），其中包含实现屏幕级操作的工具。,72,十四、工具,选项菜单,与工具栏一样，选项菜单也包含屏幕级的操作，但却有很多种不同的访问和显示方法。,如果可能，采取直接交互式的设计方案。不要把导航隐藏在选项菜单中。如果某一屏只有一个操作选项，考虑使用调用动作按钮模式。,73,十四、工具,调用动作按钮,如果某一屏内只有一个主要的操作选项，采用调用动作按钮的模式或许比工具栏或菜单要更好。,74,十四、工具,调用动作按钮,如果某一屏内只有一个主要的操作选项，采用调用动作按钮的模式或许比工具栏或菜单要更好。,75,十四、工具,调用动作按钮,对于只有一个主要操作，外加一项辅助操作的屏幕来说，这种模式也能起到不错的效果。但在这种情况下，一定要为主要的操作设计出不同于其他按钮的视觉效果。,不要把主要操作隐藏在菜单中，也不能将其设计成无法识别的工具栏图标。,一定要让其显而易见（良好的对比效果），不言自明（含义清晰的标签）。,76,十四、工具,情境工具,情境工具可以作用于屏幕内特定的操作对象。如果只在恰当的情境处显示此类工具，它就能起到非常好的效果（还能有效缓解界面的混乱现象）。,77,十四、工具,内联操作,内联操作也可作用于屏幕上某个特定的对象，但与前一模式不同的是，其操作总是可见。,78,十四、工具,多状态按钮,正常情况下，用户界面的控制项应该只有一个操作目的。但多状态按钮是个例外。在受限的移动设备屏幕内，按钮既是触发器又可以作为一种反馈机制，这样做具有一定的实用价值。,多状态按钮非常适合一系列联系紧密、在有限屏幕空间连续执行内的操作。,79,十四、工具,批量操作,常见的批量操作包括：选择、添加,/,删除和重新排序。程序的主屏幕内不应该塞满此类操作选项，而应该采用批量操作模式的设计。,诸如删除和重新排序之类的批量操作最好在编辑模式下进行。提供明显的选项，让用户可以退出编辑模式。,80,十五、图表,常见图表模式：,带过滤器的图表（,Chart with Filters,）,总览加数据式图表（,Overview+Data,）,滚动预览图表（,Scrolling with Preview,）,数据点细节图（,DataPointDetails,）,详 细 信 息 图（,Drill Down,）,缩 放 图（,Zoom In,）,数 据 透 视 表（,PivotTable,）,火花谱线图（,Sparklines,）,81,十六、视觉吸引,常见模式：,对话框（,Dialog,）,提示（,Tip,）,使用向导（,Tour,）,视频演示（,Demo,）幻 灯 片（,Transparency,）,首 次 使 用 引 导（,1st Time Through,）,持 续 视 觉 吸 引（,Persistent,）,可发现的视觉吸引（,Discoverable,）,82,十六、视觉吸引,对话框：,对话框的内容一定要言简意赅，确保用户可以通过其他方式访问程序的使用说明。,提示：,提示可以出现于屏幕的任何位置，它比对话框更能融入使用情境。除了主页面之外，提示也可用于其他屏幕。,提示要尽可能地接近它所指向的功能，保持内容的简洁，在交互开始时（也就是当用户触摸屏幕时）关闭提示。,83,十六、视觉吸引,使用向导：,通过提供一屏又一屏的新内容、不断出现的新功能，使用向导能提供无尽的视觉吸引。,首次使用向导：,与其他视觉吸引模式不同的是，首次使用引导不会在与其相关的屏幕出现之前显示。它是屏幕设计的一部分，直到被其他内容覆盖、改写之前，或用户执行操作之前，它都一直存在于界面之内。,84,十六、视觉吸引,视频演示：,对于那些依赖于特定动作或交互实现功能的应用来说，视频演示或许是最好的视觉吸引模式，因为视频演示的本来就是处于交互状态的应用。,视频演示可以展示应用的关键功能，也可以用来显示应用的标准使用流程。一定要提供常见的视频控制选项（停止、暂停、音量控制等）。,幻灯片：,其他的视觉吸引模式都在各种网络程序中出现过，而幻灯片则是唯一出现在触摸屏设备上的视觉吸引模式（至少到目前为止是这样的）。它常用于主屏幕的设计，幻灯片通常以透明层的方式显示在实际屏幕内容之上，用图解法说明产品的使用方式。,85,十六、反馈与功能可见性,常见反馈模式：,出错（,Errors,）,确认（,Confirmation,）,系统状态（,System Status,）,功能可见性模式：,触摸（,Tap,）,滑动（,Flick,）,拖曳（,Drag,）,86,十七、帮助,常见帮助模式：,使用说明（,How To,）,界面元素说明（,Cheat Sheet,）,使用向导（,Tour,）,87,APP,详细功能可以查看,快递类,APP,产品分析,.docx,文档。,Thank you,88,