医学UI界面设计指南专题课件.ppt

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,*,UI界面设计指南,前期,壹,熟悉,业务,需求,理解,风格,定位,用户,消费者？,业务员？,管理者？,特性,表单多？,图片多？,基调,严肃？活泼？,商务？简约？,贰,优化信息层级,简化交互步骤，使用户以尽量,少的步骤完成任务。,交互,借鉴,根据产品特性，参考已有,的优秀交互方式。,用一个树形结构来理解什,么是信息层级：,链接的层数被称为深度（z,轴），最底层页面包含的,页面总数被称为链接的广,度（x轴）。纵向（y轴）,很多情况下都只有一层，,放的多都是一些消息提醒,和快捷方式。,广度：,以淘宝为例，最,底层页面就是他,的首页，包含的,页面综述非常丰,富，可以看到从,广度来讲覆盖面,是非常大的。,深度：,从鞋包配饰，到,女鞋，到单鞋，,到单鞋的各种类,型。,区别,叁,PC,Web端,VS.,移动/手机端,信息层,级结构,操作,方式,交互,方式,信息层级结构,PC,Web端：,更注重深广度的平衡。,手机端：,由于设备限制，广度减,弱，信息深度更为明显。,但,这将成为过去时，随,着垂直滚动在移动端的,推广，某些APP广度大,大提升，深度相对减弱。,PC上我们可以,用面包屑路径,或者各种导航,清晰的表现出,层级结构，让,用户不在复杂,的层级机构中,迷路。,而在移动设备,上显示区域有,限，没有足够,的地方用来放,这样的路径，,更多时候只能,用back。,减少结构层级、精简交互步骤的方法（移动端）,并列,快捷,方式,显示关,键信息,减少,点按,并列,将并列的信息显示在同,一个界面中，减少页面,的跳转。,最典型的例子就是,Win8，在同一个界面,中就能展示出天气邮,件等应用的信息。,Next,day：,Calendar,里面分别为按年，月，周，日的展示方式，点击下面的时间线，内容直接,在当前页面切换，没有转跳。,快捷方式,以ios7为例，在任意界,面只要向上滑动都能从,底部呼出一个快捷菜,单。，在任意界面只要,向上滑动都能从底部呼,出一个快捷菜单，可以,设置wifi,和手电筒等。,淘宝手机：,不管你在哪家店铺在看,什么宝贝，只要点右下,角的“淘”就能出现和,主页导航一样的快捷菜,单，不用back,back一,层一层的回去。,显示关键信息,以豆瓣电影的购票流程为,例，在“选择影院”这个,界面中除了显示出影院名,称，还显示出了“最低,价”xx元起，以及余下场,次，还有是否可以购票这,些关键信息。这使用户在,选择影院的同时也能看到,最低价，不用挨个影院点,进去看，加快购买效率。,减少点按,ios7关闭后台程序，只,需要用手指轻轻往上一,滑走就关闭了。,操作方式,PC,Web端：,靠鼠标指点，可进行精,确、复杂的操作。,手机端：,尺寸,靠手指触屏，精确度较,差的手势操作。,善用,区域,若点击目标尺寸过小，要达到精确触控，用,户需要从指心操作变为指尖操作。使用指心,操作通常会整个覆盖操作目标，让用户难以,接收视觉反馈，无法知晓操作是否有效。而,不得不用指尖进行操作时，又出现了一个新,问题：这种操作方式非常慢，且吃力。,尺寸小，内容常挤在一起，用户容易触碰附,近目标，导致,误操作,。手指太大，目标尺寸,太小，一根手指的宽度大概能覆盖两个目标,的宽度。如果不按压到错误的位置，就会导,致错误的操作。食指容易出错，常用的拇指,就更容易出错。,小的点击目标会导致大问题,因此必须将点击目标的,尺寸做大一点，利于用,户点击。究竟需要多,“大”才合适呢？,通过,UI设计规范,来制约。,Hard区：,常用，但不希望太容,易触到（误触会带来,麻烦）的目标,一般把编辑按钮放在,右上角，即明显，又,能避免因为误碰而导,致界面突然改变。,交互方式,(例：选择日期),PC,Web端：,鼠标指点，可在视觉不适的情况下，操作仍,然相对合适。,手机端：,手指触屏，当视觉不适时，操作,基本也不适了。,（选项少的情况）,（选项多的情况）,（确认删除）,（勾选）,布局排版,肆,我们的眼睛怎么看，决定了如何规划屏幕空间,两种最常见的网页布局模式,F模式：,除了顶部展示区外，其他的内,容会显得更平淡。如果增加平,淡区的吸引，可以加入一些大,图标、卡片式的内容组件等，,让内容更有趣。,（人眼焦点捕捉）,1,2,3,5,6,7,1/2,-,导航,3,-,LOGO,4,重要内容,（产品、办理）,4,5/6,次重内容,（推广、收藏）,7,登录、,账户操作等,Z模式：,常见于网页内容主要不是文字,的页面。用户首先关注的页头,水平方向上的内容，然后视线,跳到下面，遵循从左到右的浏,览习惯，重复水平扫视页尾的,最底部的内容。,优点：简单,不适合：内容过多的页面,手机布局,垂直节奏,九宫格,放射状,三角形,导航,伍,常见的移动应用导航,选项,卡式,陈列,菜单式,列表式,跳板式,抽屉式,馆式,选项卡式,菜单式,列表式,跳板式,（快速启动板-Launchpad）,抽屉式,陈列馆式,通过在平面上显示,各个内容项来实现,导航，主要用来显,示一些文章、菜谱、,照片、产品等，可,以布局成轮盘、网,格或用幻灯片演示。,视觉,陆,几条实用的,配色原则,聊聊图标,配色原则（一）,你的配色方案永远不,应该比它呈现的内容,的更加“响亮”。,配色原则（二）,尽量选择简单的灰色作,为你网站/APP的基调。,文字最好避免使用墨黑色，深灰色,一般更容易阅读。参考颜色范围：,333333到666666。,对于背景色，全白色（#FFFFFFF）,是可以搭配任何文本的最安全的颜,色。如果你想选用其他的背景颜色，,建议采用#FFFFFF到#CCCCCC,配色原则（三）,只选择一种颜色突出显示。,配色原则（四）,使用安全色降低色彩纯度。,配色原则（五）,如果产品特性需要鲜艳的配色，一定不要出现超过,三种以上的大色块，并保持他们基调一致、和谐。,图标,用于导航的图标有两种状态：,轮廓及填充。使用轮廓的好,处是不分散注意力。如果对,图标进行填充，就会转移人,的注意力。填充图标常表示,为当前页面。,Line,Icons,图标,Solid,Icons,Flat,Icons,图标运用,规范,柒,字体,字色、字号,一致性,配色,主色、辅色,控件使,用状态,尺寸,空间,对其、间距,尺寸,配色&字体,控件使用状态,