UI界面设计指南医学知识讲解.pptx

UI界面设计指南医学知识讲解第1页

前期壹熟悉业务需求了解格调定位UI界面设计指南医学知识讲解第2页

用户消费者？业务员？管理者？特征表单多？图片多？基调严厉？活泼？商务？简约？UI界面设计指南医学知识讲解第3页

贰优化信息层级简化交互步骤，使用户以尽可能少步骤完成任务。交互 借鉴 依据产品特征，参考已经有 优异交互方式。UI界面设计指南医学知识讲解第4页

用一个树形结构来了解什么是信息层级：链接层数被称为深度（z轴），最底层页面包含页面总数被称为链接广度（x轴）。纵向（y轴）很多情况下都只有一层，放多都是一些消息提醒和快捷方式。UI界面设计指南医学知识讲解第5页

广度：以淘宝为例，最底层页面就是他首页，包含页面综述非常丰富，能够看到从广度来讲覆盖面是非常大。UI界面设计指南医学知识讲解第6页

深度：从鞋包配饰，到女鞋，到单鞋，到单鞋各种类型。UI界面设计指南医学知识讲解第7页

区分叁PCWeb端VS.移动/手机端信息层级结构操作方式交互方式UI界面设计指南医学知识讲解第8页

信息层级结构PCWeb端：更重视深广度平衡。手机端：因为设备限制，广度减弱，信息深度更为显著。但这将成为过去时，随着垂直滚动在移动端推广，一些APP广度大大提升，深度相对减弱。UI界面设计指南医学知识讲解第9页

PC上我们能够用面包屑路径或者各种导航清楚表现出层级结构，让用户不在复杂层级机构中迷路。UI界面设计指南医学知识讲解第10页

UI界面设计指南医学知识讲解第11页

而在移动设备上显示区域有限，没有足够地方用来放这么路径，更多时候只能用back。UI界面设计指南医学知识讲解第12页

降低结构层级、精简交互步骤方法（移动端）并列快捷方式显示关键信息降低点按UI界面设计指南医学知识讲解第13页

并列将并列信息显示在同一个界面中，降低页面跳转。最经典例子就是Win8，在同一个界面中就能展示出天气／邮件等应用信息。UI界面设计指南医学知识讲解第14页

Nextday：Calendar里面分别为按年，月，周，日展示方式，点击下面时间线，内容直接在当前页面切换，没有转跳。UI界面设计指南医学知识讲解第15页

快捷方式以ios7为例，在任意界面只要向上滑动都能从底部呼出一个快捷菜单。，在任意界面只要向上滑动都能从底部呼出一个快捷菜单，能够设置wifi和手电筒等。UI界面设计指南医学知识讲解第16页

淘宝手机：不论你在哪家店铺在看什么宝贝，只关键点右下角“淘”就能出现和主页导航一样快捷菜单，不用backback一层一层回去。UI界面设计指南医学知识讲解第17页

显示关键信息以豆瓣电影购票流程为例，在“选择影院”这个界面中除了显示出影院名称，还显示出了“最低价”xx元起，以及余下场次，还有是否能够购票这些关键信息。这使用户在选择影院同时也能看到最低价，不用挨个影院点进去看，加紧购置效率。UI界面设计指南医学知识讲解第18页

降低点按ios7关闭后台程序，只需要用手指轻轻往上一滑走就关闭了。UI界面设计指南医学知识讲解第19页

操作方式PCWeb端：靠鼠标指点，可进行精确、复杂操作。手机端：尺寸靠手指触屏，准确度较差手势操作。 善用 区域UI界面设计指南医学知识讲解第20页

若点击目标尺寸过小，要到达准确触控，用户需要从指心操作变为指尖操作。使用指心操作通常会整个覆盖操作目标，让用户难以接收视觉反馈，无法知晓操作是否有效。而不得不用指尖进行操作时，又出现了一个新问题：这种操作方式非常慢，且吃力。尺寸小，内容常挤在一起，用户轻易触碰附近目标，造成误操作。手指太大，目标尺寸太小，一根手指宽度大约能覆盖两个目标宽度。假如不按压到错误位置，就会导致错误操作。食指轻易犯错，惯用拇指就更轻易犯错。小点击目标会造成大问题UI界面设计指南医学知识讲解第21页

所以必须将点击目标尺寸做大一点，利于用户点击。终究需要多“大”才适当呢？——经过UI设计规范来制约。UI界面设计指南医学知识讲解第22页

Hard区：惯用，但不希望太容易触到（误触会带来麻烦）目标普通把编辑按钮放在右上角，即显著，又能防止因为误碰而导致界面突然改变。UI界面设计指南医学知识讲解第23页

交互方式(例：选择日期)PCWeb端：鼠标指点，可在视觉不适情况下，操作仍然相对适当。 手机端： 手指触屏，当视觉不适时，操作 基本也不适了。UI界面设计指南医学知识讲解第24页

（选项少情况）UI界面设计指南医学知识讲解第25页

（选项多情况）UI界面设计指南医学知识讲解第26页

（确认删除）UI界面设计指南医学知识讲解第27页

（勾选）UI界面设计指南医学知识讲解第28页

布局排版肆我们眼睛怎么看，决定了怎样规划屏幕空间UI界面设计指南医学知识讲解第29页

两种最常见网页布局模式F模式：除了顶部展示区外，