本书讲了什么
主要对基本UI组件、导航控件、列表及表单等各类界面元素做了分类详解。
作者什么来头
池田拓司，曾任职于Nifty公司和Hatena公司，2012年担任COOKPAD公司设计师。除了负责智能手机站点设计，他还致力于设计模式的抽象化与规范化，并通过Sass构建UI设计框架。
0.1智能手机UI概要
页眉(Header)。
页脚(Footer)。
导航栏(Navigation)。
叠加层（Overlay)。
控件(Control)。
操作(Action)。
硬件按钮。
状态栏。
0.2用户操作方式与使用环境
手势操作
轻触(Tap)。
拨动(Flick)。
滑动(Swipe)。
按压(Press)。
拖动（Drag)。
多点缩放(Pinch in/out)。
使用情景
单手持机，并用同一只手操作。
单手持机，用另一只手操作。
双手持机，双手操作。
平置智能手机并进行操作。
UI设计中的基础术语
UI组件：UI部件被分割为若干具体的对象，这些对象就是UI组件。导航栏、按钮等是一些尺寸及功能各异的UI组件。
隐喻：以原本存在的某一事物为本体，通过比喻的方式来表现某种含义。通过在界面中拟用现实世界中存在的事物，来暗示该界面元素具有相似的功能。
情景/任务：情景指的是用户在服务或应用中所获得的体验的文字描述。情景中出现的用户全都是虚构人物，称之为角色。与情景相比，任务一种更小的单位。
承担特质/语义符号：承担特质指用户对事物进行认知判断得可能性。比如眼前有把椅子，只要它有四条腿，且具备一个和人臀部尺寸相椅面，即使椅子上没写“可以坐在上面”的文字说明，我们也会认为这把椅子具有“人们也能意识到可以坐在上面“的承担特质/*就是心智模型*/诺曼误用了这个词，后来改用了“语义符号”这一词。
Chapter 1界面模式
1.1启动界面
启动界面（Splash），显示图标或slogan，增强品牌认知度，或显示与应用程序类似的街Ian，减少用户的等待。
过场界面(Walkthough)，首次启动时，对功能进行简要说明。
教程界面(CoachMark)，叠加于实际界面之上的临时界面，用于介绍功能。
空数据提示消息，提示用户当前没有可现实的内容，当所需数据不存在或网络故障时使用，该界面不仅需要显示相关提示，还要告诉用户接下来怎么做。
1.2顶层界面
顶层界面用于显示各种各样的信息.并通过导航功能将其他界面关联起来。顶层界面常包含各种不同的UI组件，必须合理布局，确保空间使用效率。常见的有：
门户界面，充分利用页面空间显示各种分类信息。
用户信息界面，显示与用户相关的各种信息。
电商界面，类似门户界面，引导用户消费。
企业界面，企业的门面，好奇怪的分类。
1.3一览界面
一览界面用于连续显示所有相关内容。通常包含列表类UI组件，常见的有：
搜索结果。
时间轴。
图库。
通知/活动。
1.4详细信息界面
详细信息界面，用于显示特定条目的详细信息，在界面层级中的位置较深。常见的有：
阅览器(照片/视频)。该界面的主要作用是全屏显示内容，所以应尽可能避免使用多余的组件。为组件添加自动隐藏功能。
新闻报道。使用合适的文字尺寸与间距，提高内容的可读性，文章较长就应使用分页按钮，根据实际情况添加返回顶部按钮。
地图。减少各类导航栏及操作按钮的使用。
产品。
1.5输入/操作界面
注册/登录.
消息发布。
照片拍摄。
设定/管理。
1.6界面跳转
界面跳转图的基本概念
每个矩形代表一个界面，矩形内写有页面标题及所用的界面模式和组件名称，明确该界面的功能。相连的直线代表页面之间的跳转，直线上写有UI组件名称，标明具体执行该跳转的UI。
使用这种方式考虑应用和服务的整体设计，不必设计各个界面的UI细节，而应通过界面跳转图分析界面间的关系，借助界面模式确定各界面的主要功能。很多界面功能都与上述五种界面模式相对应。
Chapter 2基本UI组件
2.1页眉
页眉主要用于标识当前界面的内容。
模式1导航栏（iOS应用）。中央显示标题，左侧是返回上一界面，右侧显示主要的操作按钮。
模式2操作栏（Android应用）。左侧显示返回上一界面导航控件及标题，并在页眉右侧设置主要操作按钮。
2.2页脚
页脚位于界面底部，用于能够轻松触及，所以通常用于显示重要的导航控件及操作控件。
模式1标签栏（iOS应用）。
模式2工具栏（iOS应用）/底边栏（Android应用）。
模式3导航栏（Android应用）。
2.3模态窗口
模态窗口是一种叠加于界面之上，用于临时显示新界面的一种窗口。这时，用户无法对之前的界面进行操作。模态窗口可用于请求用户操作、显示警告信息或进行界面导航。应避免使用模态窗口执行不重要的任务。
模态窗口中的模态指的是该窗口具有某种状态，且该状态的模式限定了用户的操作范围。设计时应首先考虑使用无模态窗口，使用户可以按自己的意愿执行操作。
模式1操作模式。用于显示与先前界面相关的备选操作，比如点击分享后，选择分享到哪。
模式2消息模式。用于向用户显示注意事项、警告等。
模式3消息发布模式。用于发布新消息，朋友圈。
模式4控制模式。用于用户对系统的设置，或对应用及界面内容进行设置。
模式5导航模式。用于显示导航菜单，如商品分类。
2.4百叶窗式菜单
仅在界面显示组件的标题，并在用户执行轻触或滑动操作后显示隐藏内容，主要用于显示菜单等导航控件。百叶窗式菜单指的是，能像百叶窗一样拉开的菜单。
模式1叠加展开模式。预先在屏幕下方显示部分内容，用户能从下至上展开窗口。
模式2叠加收起模式。预先显示一个已经展开的百叶窗式菜单，在用户将该百叶窗式菜单叠加收起后，界面将显示被窗口覆盖的内容。（用得少，不好理解）
2.5操作面板
模式1条状模式。用于在内容附近直接显示相关的备选操作。如微博下面的按钮。
模式2叠加模式。覆盖原有内容来显示操作面板，缺点是操作面板会遮盖下层内容。如视频播放的按钮。
模式3下拉式菜单模式。隐藏操作面板，点击面板开启按钮才显示。
模式4滑块模式。滑动特定内容后显示备选操作。如左滑删除。
Chapter3导航控件与控制控件
3.1标签式导航控件
iOS设计规范将位于界面下方的标签栏归为基本的导航控件，Android设计规范描述了位于界面上方的顶边栏。
模式1标准模式。在界面上方显示标签式导航控件，标签隔断界面内容，容易获得用户关注。主要用于在不同界面间切换。
模式2底部布局模式（标签栏）。如果应用需要频繁进行页面跳转，推荐此模式。
模式3下划线模式（顶边栏）。通过文本标签下方的下划线来表示当前状态。
模式4滚动模式。左右滑动标签，滚动整个导航控件以显示处于界面之外的条目。
模式5垂直模式。纵向显示标签，利用界面高度显示更多条目。
3.2分段控件
在同一组显示多个不同类别的条目。分段控件用于更改搜索结果的排序方式，或以指定方式显示特定内容。与其说是一种导航控件，不如说是一种用于控制界面状态的UI组件。
模式1标准模式。该模式在页眉、页眉下方或页脚等位置显示分段控件。iOS标准控件。
模式2内联文本模式。不使用按钮，通过竖线来分隔条目。
3.3滑动导航控件
用于对页面主要内容进行切换，左右滑动屏幕就能将当前界面滑动到另一侧。适用于浏览邮件、照片等大面积内容的情景。
模式1标准模式。用于浏览照片或邮件等内容。
模式2页面指示器组模式。在指定内容下方显示内容指示器（分页器）。
模式3标签式导航控件组模式。把标签导航控件作为指示器使用。
3.4下拉式菜单
通常位于界面上方，距离用户手指较远且进行操作时准确度相对较低，解决该问题最简单的方式是确保点击区域足够大。不适合进行频繁操作。
模式1标准模式。Android三连圆点图标或向下箭头。
模式2控制模式。相当于切换当前页面状态，功能接近分段控件。
模式3气泡模式。向下弹出气泡型的窗口
3.5深入式菜单
模式1标准模式。使用垂直列表来显示条目，逐层显示备选条目。随着层级加深，用户要执行的点击次数也会增加，要平衡列表的数量及层级的深度。
3.6折叠式菜单
不产生界面跳转，在当前界面已有的条目之间插入显示新条目。适用于列表条目具有层级关系的情况。可以用不用颜色表示不同层级的关系，并用下拉箭头来标识折叠菜单。
模式1标准模式。在垂直列表中以相同方式显示下一级列表。
模式2气泡模式。气泡型展开。
3.7仪表盘式导航控件（跳板式菜单）
模式1标准模式。以网格式排列图标及文本标签，它以平铺的方式显示条目。
3.8返回/Home
用于返回之前的状态或初始面板。位置流行在左上角，左下其实也不错，毕竟现在屏幕这么大，放上面单手按不到。
模式1返回按钮模式。层及浅显示返回即可，层级深可以表明上个界面的名称。
模式2徽标模式。点击logo返回顶层页面。
3.9向上/向下滚动按钮
用户点击向上/向下滚动按钮后，界面将能向上/向下滚动至任意指定位置。向上滚动按钮用于较长的页面直接返回顶部，向下滚动按钮不常用。
模式1标准模式。使用向上箭头图标，点击返回页面顶部。
模式2向下滚动模式。点击向下箭头图移至页面底部。
模式3叠加模式。点击向下箭头后移至页面底部，同时向下箭头变为向上箭头。
模式4索引模式。按钮以字母顺序或假名顺序的形式显示。如iOS通讯录右边栏。
3.10分页按钮
模式1标准模式。用于移动至上一界面或下一界面，按钮对应以向左/向右的箭头。
3.11无限分页列表
当页面仅能显示部分信息时，可以使用无限分页列表，在不发生页面跳转的情况下，继续读取并显示之后的内容。
模式1标准模式。用户将页面滚动至底部时，无需手动执行读取操作，列表将自动读取之后的条目。
模式2按钮模式。用户需要点击诸如“之后30条”或“查看更多”等功能的按钮，来显示之后的内容。
3.12刷新控件
模式1标准模式。下拉刷新。
3.13侧滑式菜单
模式1标准模式。即抽屉式菜单，用户可通过按钮和滑动操作打开或隐藏菜单。按钮位置可以在屏幕左上或左下。
Chapter4列表
4.1垂直列表
模式1标准模式。简单罗列出条目。
模式2值模式。在条目左侧标明条目名称，在右侧显示与之对应的值。
模式3缩略图模式。与标准模式的区别在于左侧添加了一张缩略图。
模式4半尺寸模式。分为左右两部分，就是一种网格列表。此时的垂直列表内容通常是文本信息，用于界面导航。
4.2网格列表
模式1标准模式。简单的显示图片。如系统相册。
模式2标签叠加模式。在图片上显示相关的文本内容。
模式3块状标签模式。不仅显示图片还显示文本内容，文本标签在图片下方显示，对图片进行补充说明。
4.3轮播面板
模式1标准模式。横向列出列表条目。
模式2控制模式。轮播面板中的条目用于控制界面中的主要元素，此时轮播面板通常位于界面下方。比如给照片加滤镜的界面。
模式3商标展板模式。主要用于显示大型图片，此时轮播面板常位于界面上方。如淘宝首页。
模式4导航模式。轮播面板包含的条目是一些小型的图标或文本标签，用于提供界面导航功能。
4.4时间轴
模式1标准模式。同一条时间轴将显示、更新多个用户的信息。最新的信息将出现在界面上方。如微博的关注界面。
模式2消息模式。最新信息位于界面下方，过往信息则在上方。如聊天界面。
4.5日历（日期列表）（略）
模式1月份模式。
模式2周模式。
模式3日模式。
Chapter5表单
5.1文本框
模式1单行模式。文本框仅能输入一行文字，不会发生换行。
模式2搜索框模式。与模式1基本相同，不过主要用于对信息搜索。
模式3多行模式。文本框中的文字可以换行，用户在文本框中输入的内容能够分行显示。
5.2开关（略）
模式1复选框模式（复数选择）
模式2单选框模式（单项选择）
模式3开关按钮模式
5.3选择器
模式1标准模式。所有选项平铺在列表内，用户只能选择其中一个值。
模式2复数模式。界面同时显示多个选择器，这些选择器全部用于同一个数据的输入从操作。如选择生日。
5.4滑块
模式1标准模式。通过滑块调整值的大小。如音量。
模式2时间轴模式。通过滑块调整与实践相关的值。如视频进度。
模式3环状模式。环形的滑块。
5.5拖放控件
模式1标准模式（垂直列表模式）。通过纵向拖动垂直列表中的条目来改变条目间的顺序。一般以三条短线作为拖放操作的提示标志。
模式2状态更改模式。通过拖动UI元素来改变界面状态。
Chapter6通知与消息
6.1模态消息
它将暂时禁止原有界面中的操作，在界面中央叠加显示一个窗口，强制用户查看详细内容。
模式1标准模式（两个按钮）。应在消息文本中明确说明用户执行的是何种操作，并在按钮上显示相应的操作内容。如是否确认删除，按钮上不显示确认而显示删除。取消按钮一般置于左侧，确认置于右侧。
模式2确认模式（一个按钮）
模式3自动关闭模式（没有按钮）
6.2无模态消息
模式1标准模式。显示指定消息内容后消失。
模式2状态栏模式。消失显示在状态栏中，与模式1相同。
模式3可取消模式。在标准模式的基础上添加了取消操作，用于用户执行了破坏性操作的情况。考虑到用户可能会误操作，所以设置了取消按钮。
6.3块消息
模式1标准模式。消息被嵌在界面中，比如微信无网络连接的提示。
6.4角标
模式1标准模式。显示消息数量的小红点。
模式2通知模式。显示如new，update等服务运营商发给用户的消息。比如视频网站上视频的会员标注。
6.5气泡消息
模式1标准模式。用于表达界面中某一部分内容向用户发出通知，或显示该功能的补充说明。
模式2提示模式。用于操作引导和说明。
Chapter7信息的可视化
7.1无限循环指示器
用于表明服务当前正在执行某些处理。
模式1标准模式（菊花）
模式2原创模式（原创动画）
模式3条状模式（条形动画）
7.2进度条（略）
模式1标准模式
7.3页面指示器
可以告诉用户正在查看的界面仅是整段连续内容中的一部分。
模式1标准模式。页面下方的圆形或矩形图标。
模式2页码模式。页面底部显示页码。
模式3步骤模式。页面顶部显示步骤。
7.4图表（略）
模式1柱状图模式
模式2折线图模式
模式3饼图模式
7.5评分控件（略）
模式1标准模式
模式2表情模式
模式3好评差评模式
模式4等级模式
Chapter 8图标
房屋：首页。
放大镜：搜索、放大、缩小。
齿轮：设置。
星形：评分、收藏。
模拟时钟：历史记录、时间。
大头针：当前位置、热门场所。
人像：单人表示个人、双人表示好友或关系、三人表示群组或活动。
铅笔：编辑、创建新条目。
回收站：删除、
加号：添加元素。
叉号：清除、终止、关闭。
照相机：拍照、浏览相册。
三连圆点：其它。
相连圆点：分享。
分享：转发。
三连短线：菜单、列表。
刷新：更新。
Chapter9动画
9.1向左/向右滑动
模式1同层移动模式。适用于分属不同类别但层级相同的界面之间的切换。
模式2异层移动模式。适用于不同层级之间的界面跨级切换。如一览界面到详细信息界面的切换。
9.2叠加展开/收起
模式1标准模式。新界面将从屏幕下方展开并叠加在原界面之上。
9.3淡入/淡出
模式1标准模式。通过调节界面的透明度，实现渐变的切换效果。常用于添加/删除元素，以及切换整个界面。
9.4翻转
模式1标准模式。以某根线为轴旋转切换界面，让用户认为新界面位于当前显示界面的背后。不适合做多个界面的切换。
9.5放大/缩小
模式1标准模式。表示目标元素正在接近或远离界面，用于图标的一览界面与详细信息界面之间的跳转。
9.6摇动/扭动
此动画将会晃动或震动界面中的元素，它改变的不是显示内容，而是元素的状态。
模式1编辑状态模式。意味着用户可以改变正在震动的元素的位置或删除它们。iOS删除APP。
模式2出错模式。通过震动来表示输入的内容有误。通常会借助模态消息等控件来提示出错信息。
Chapter10视觉风格
10.1默认设计
过时，略。
10.2拟物化设计
拟物化设计是用过特定的素材或隐喻来模拟实物质感的设计。拟物化有助于用户理解界面功能，但界面不够简洁，元素纷繁复杂，会有一种拥挤感，略显幼稚。
模式1纹理模式。通过UI表面或其中的部分纹理来表现原型的质感。
模式2物体模式。使用整个界面来模拟现实中存在的物品，以表现应用的功能。
10.3扁平化设计
界面简洁无多余元素，能减少用户每日接触相同界面产生的厌烦感。由于界面扁平，可点击区域与不可点击区域没明显分界，所以需要根据设计规范配置界面布局，避免用户困惑。