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

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