那些好的APP设计得真是很用心
这篇书评可能有关键情节透露
忽略那些浮夸的介绍，其实是不错的书。以下是读书过程的速记，添加了一些自己想到的例子。值得经常翻看。
“移动互联网的最大特点是变化极快，传统的分析用户，调研市场，制定产品三年规划，在新的时代里已经落伍。人类群落本身也在迁移延边，产品经理更应该依靠直觉和感性，而非图表和分析，把握用户需求。产品经理永远都应该是文艺青年，而非理性青年。”——张小龙。
【移动互联网产品在变化】：
目的：什么是UI视觉设计，产生的原因，现状如何？
1. UI就是用户界面。
2. 层级化与理性思维：扁平化使界面变得杂乱，而将其层级化后条理清晰，逻辑化很强。要将层级化做好，就要首先对产品的各个功能评级，哪些是平级的，哪些是包含关系，都要理清（可以用Mindmanage之类的辅助画结构图）。微信：设置、会话、通讯录是平级的，多人会话与单人会话则是“会话”的子集，设置里面又包括账号安全、消息提醒、隐私、退出等功能。
3. UI设计艺术化是最难的，但可以分解为很多小元素，一个个优化：文字说明和图形符号要简洁，一个词能搞定最好；各组件的布局也要简单，色彩搭配合理。简而言之，至繁归于至简。
【数据时代的用户体验】
1. GUI是用户图形界面设计，ID是交互设计，UE是用户体验
利用4W做用户研究：who?收入、性别、年龄、爱好、教育。Where？学校、公共区、家庭、户外、公司。Why？沟通、办公、娱乐、管理、设计。When？触控、遥控、鼠标、声控、键盘。根据用户研究来构建使用场景、制定产品整体框架、发掘用户的潜在需求。
功能界面的整合是越简单越好，但是不能胡来。栗子：以前收发短信，用户都要去打开收件箱，还只能看到当前消息，看不到历史记录，现在改版成了类似于QQ对话的形式。
这种左右对称构图带来了视觉的均衡感，用色不同得以区分对话人间的关系；时间轴式分布，从上到下有序排列，有较强的逻辑感；楼层式排列，将界面规整的分割。
在这个过程中，其实也存在着对界面构图、对界面中分配元素的色彩以及对界面中元素的排列组合等方面的思考，可以将它们看做是平面设计、色彩搭配、版式设计等一系列与视觉相关的设计。
2. 傻瓜应用的大众化
美图秀秀：“我只是想用更好的照片去描述与记录我的生活，并不是要完美的艺术品，并不是去参加摄影比赛。”我们只需要将功能打包，给用户“一键优化”就可以了。比如，我们不用照“复制图层-表面模糊-添加蒙版-擦除不需模糊的部分-调节饱和度-调节可选颜色”的流程来处理，只要“美一下”就好了。
虽然说要简化操作流程，但适当对操作进行可视化处理也是必要的，能让用户有明显的点击与操控感，否则会感觉不到处理的前后差别。比如说，在对照片进行模糊处理的时候，如果标明哪一片是模糊处理的区域，而不是直接给出模糊后的效果。
【格式塔理论与移动UI视觉设计】
1. 格式塔理论是指我们在心不在焉，没有引入反思的现象学状态时的知觉的最终结果，强调经验和行为的整体性。其中与设计息息相关的格式塔原理有：接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体与背景原理和共同命运原理。
2. 接近性和相似性：人们在视觉上自动将靠的近的或者相似的物体归为一组或一类。
因此如何通过空间布局和元素设置来使“物体靠得近”就是目标。1）添加线条，给同组的物体划分区间。2）使用装饰色块，通过颜色区分组。3）不断进行微调。
书中展示了通话记录的界面，感觉其实做的也不好，更加喜欢以时间为轴的纵向展示方式。是来电还是去电，拨打了几次，联系人分组都不是关键元素，代表通话的那个图标更是累赘！着重显示的是联系人姓名，电话号码，通话时间，如果是未接来电则标红，这样就够了。
3. 连续性：我们的视觉系统会通过解析模糊或者以查漏补缺的方式来感知整体事物的倾向。主要用于动态展示过程，比如360用来表示CPU占用率的那个球，球内液体随着占用率的增加而逐渐填满整个球体，超过90%就变红预警；进度条也是这个原理；调节音量大小也是。要注意添加交互提示：音量调节可以有具体数字显示，如果没有数字提示，也可以采取“在黑色的圆环内填充白色”的方式，参考小米音量调节，这是以实填虚的方法。
4. 封闭性：我们的视觉系统会将原本敞开的图形，自动尝试着封闭起来，从而将这些图形感知为完整的事物，而非是分散的碎片。常用在icon设计中，比如“相册”图标，就是将一张完整的照片加工成具备折纸式风格的设计，这个设计出来的新的整体就能被感知为复数啦，达到了我们“1+0.1=N”的效果。
5. 简化对称性：我们倾向于将复杂的事物分解，将其解析为较为简单的事物后对其进行理解。
6. 主体与背景：当小事物（色块）重叠在大事物之上，我们的视觉会倾向于将小事物（色块）归为主体，大事物为背景。比如我们经常看到弹出的“提示”对话框，需要注意的是：背景画面应与主体色调协调；不要让主体与背景脱节，如果“提示框”出现了，背景却消失了，则提示也没有了意义。
7. 共同命运：视觉系统会给动态和静态的物体进行分组。也就是会把一起运动的事物归为一类，比如在滑动进度条的时候，页面会跟随着变化。
当然了，格式塔理论是要综合应用的。
【视觉优化的过程】
1. 经验与感知。经验影响感知，违背习惯性地操作，可能会导致用户的认知出现盲目性。不要为了标新立异而标新立异，这种别扭只会让用户厌烦。
2. 目标与感知。我们只会看到我们想看到的东西，而忽略了其余的东西，比如我想团购附近的KTV优惠券，我肯定是直接在导航栏的“KTV”的上去搜的，这时就需要系统为我定位，如果地点不对，应该提示我“是否更换地点”（这样的次要信息不能放在主界面，提示操作完成后就该隐藏了）。
3. 结构化与感知。结构化的信息更容易让人理解，抽取关键字，制作表格，图形化等方法美化。结构化最重要的是层级化，当不能层级化时，可以将同级的信息平铺在当前页面，如果还有下级信息，可以加入类似“按钮下拉控件”的方式深入。
4. 阅读障碍。阅读方式有特征驱动阅读和语境驱动阅读两种，前者可以脱离上下文，属于常识，后者要联系上下文，需要具体问题具体分析。最好让用户处于无意识的阅读状态，不要让他们想太多…比如MV就不要改成”Music Video”，尽量别改变他们的阅读习惯。小技巧：使用他们熟悉的词汇；不要缩小需要展示的文字信息；注意文字清晰度注意文字信息的对齐方式。
5. 色觉与视觉。相对于感知亮度本身而言，我们的视觉系统对对比度与反差的感觉更为敏感。有几个要点：色彩的深浅度、色彩间的分隔距离、色彩所占面积的大小都会影响我们对颜色区别的察觉度。用色准则：利用对比在区别中突出重点信息；使用便于用户识别的颜色（蓝-黄、红-绿、黑-白是常用色）；色彩搭配中的深浅度、面积大小与远近关系；不要使用过于刺激的色彩搭配。
【可操控性体验】
1. 通过各种测试（怎么用肌肉不容易酸胀，手机拿得稳）得出了大拇指的操作范围，并确定锁屏按钮的最低点应该距离手机下边缘15mm，现在各布局都有了一定模板，照做即可，不要为了没有科学根据的“创新”自己作死。
2. 替用户记忆。用户不会想要用脑去记忆在产品上做过什么，我们要提供一些措施缓解他们短期记忆的压力。比如在搜索时提供历史记录供选择，登录时提供第三方平台登录，邮件系统里面通过“星标”标注“未读邮件”，进度条设置时刻提醒用户已经完成到第几步（注册的时候），微信的未读信息会有“小红点”标示。用户往往是达成目的就转移注意力的，所以我们应该提醒他们做些扫尾工作，比如买了东西后“待评价”，歌曲下载完成后自动退出。
“移动互联网的最大特点是变化极快，传统的分析用户，调研市场，制定产品三年规划，在新的时代里已经落伍。人类群落本身也在迁移延边，产品经理更应该依靠直觉和感性，而非图表和分析，把握用户需求。产品经理永远都应该是文艺青年，而非理性青年。”——张小龙。
【移动互联网产品在变化】：
目的：什么是UI视觉设计，产生的原因，现状如何？
1. UI就是用户界面。
2. 层级化与理性思维：扁平化使界面变得杂乱，而将其层级化后条理清晰，逻辑化很强。要将层级化做好，就要首先对产品的各个功能评级，哪些是平级的，哪些是包含关系，都要理清（可以用Mindmanage之类的辅助画结构图）。微信：设置、会话、通讯录是平级的，多人会话与单人会话则是“会话”的子集，设置里面又包括账号安全、消息提醒、隐私、退出等功能。
3. UI设计艺术化是最难的，但可以分解为很多小元素，一个个优化：文字说明和图形符号要简洁，一个词能搞定最好；各组件的布局也要简单，色彩搭配合理。简而言之，至繁归于至简。
【数据时代的用户体验】
1. GUI是用户图形界面设计，ID是交互设计，UE是用户体验
利用4W做用户研究：who?收入、性别、年龄、爱好、教育。Where？学校、公共区、家庭、户外、公司。Why？沟通、办公、娱乐、管理、设计。When？触控、遥控、鼠标、声控、键盘。根据用户研究来构建使用场景、制定产品整体框架、发掘用户的潜在需求。
功能界面的整合是越简单越好，但是不能胡来。栗子：以前收发短信，用户都要去打开收件箱，还只能看到当前消息，看不到历史记录，现在改版成了类似于QQ对话的形式。
这种左右对称构图带来了视觉的均衡感，用色不同得以区分对话人间的关系；时间轴式分布，从上到下有序排列，有较强的逻辑感；楼层式排列，将界面规整的分割。
在这个过程中，其实也存在着对界面构图、对界面中分配元素的色彩以及对界面中元素的排列组合等方面的思考，可以将它们看做是平面设计、色彩搭配、版式设计等一系列与视觉相关的设计。
2. 傻瓜应用的大众化
美图秀秀：“我只是想用更好的照片去描述与记录我的生活，并不是要完美的艺术品，并不是去参加摄影比赛。”我们只需要将功能打包，给用户“一键优化”就可以了。比如，我们不用照“复制图层-表面模糊-添加蒙版-擦除不需模糊的部分-调节饱和度-调节可选颜色”的流程来处理，只要“美一下”就好了。
虽然说要简化操作流程，但适当对操作进行可视化处理也是必要的，能让用户有明显的点击与操控感，否则会感觉不到处理的前后差别。比如说，在对照片进行模糊处理的时候，如果标明哪一片是模糊处理的区域，而不是直接给出模糊后的效果。
【格式塔理论与移动UI视觉设计】
1. 格式塔理论是指我们在心不在焉，没有引入反思的现象学状态时的知觉的最终结果，强调经验和行为的整体性。其中与设计息息相关的格式塔原理有：接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体与背景原理和共同命运原理。
2. 接近性和相似性：人们在视觉上自动将靠的近的或者相似的物体归为一组或一类。
因此如何通过空间布局和元素设置来使“物体靠得近”就是目标。1）添加线条，给同组的物体划分区间。2）使用装饰色块，通过颜色区分组。3）不断进行微调。
书中展示了通话记录的界面，感觉其实做的也不好，更加喜欢以时间为轴的纵向展示方式。是来电还是去电，拨打了几次，联系人分组都不是关键元素，代表通话的那个图标更是累赘！着重显示的是联系人姓名，电话号码，通话时间，如果是未接来电则标红，这样就够了。
3. 连续性：我们的视觉系统会通过解析模糊或者以查漏补缺的方式来感知整体事物的倾向。主要用于动态展示过程，比如360用来表示CPU占用率的那个球，球内液体随着占用率的增加而逐渐填满整个球体，超过90%就变红预警；进度条也是这个原理；调节音量大小也是。要注意添加交互提示：音量调节可以有具体数字显示，如果没有数字提示，也可以采取“在黑色的圆环内填充白色”的方式，参考小米音量调节，这是以实填虚的方法。
4. 封闭性：我们的视觉系统会将原本敞开的图形，自动尝试着封闭起来，从而将这些图形感知为完整的事物，而非是分散的碎片。常用在icon设计中，比如“相册”图标，就是将一张完整的照片加工成具备折纸式风格的设计，这个设计出来的新的整体就能被感知为复数啦，达到了我们“1+0.1=N”的效果。
5. 简化对称性：我们倾向于将复杂的事物分解，将其解析为较为简单的事物后对其进行理解。
6. 主体与背景：当小事物（色块）重叠在大事物之上，我们的视觉会倾向于将小事物（色块）归为主体，大事物为背景。比如我们经常看到弹出的“提示”对话框，需要注意的是：背景画面应与主体色调协调；不要让主体与背景脱节，如果“提示框”出现了，背景却消失了，则提示也没有了意义。
7. 共同命运：视觉系统会给动态和静态的物体进行分组。也就是会把一起运动的事物归为一类，比如在滑动进度条的时候，页面会跟随着变化。
当然了，格式塔理论是要综合应用的。
【视觉优化的过程】
1. 经验与感知。经验影响感知，违背习惯性地操作，可能会导致用户的认知出现盲目性。不要为了标新立异而标新立异，这种别扭只会让用户厌烦。
2. 目标与感知。我们只会看到我们想看到的东西，而忽略了其余的东西，比如我想团购附近的KTV优惠券，我肯定是直接在导航栏的“KTV”的上去搜的，这时就需要系统为我定位，如果地点不对，应该提示我“是否更换地点”（这样的次要信息不能放在主界面，提示操作完成后就该隐藏了）。
3. 结构化与感知。结构化的信息更容易让人理解，抽取关键字，制作表格，图形化等方法美化。结构化最重要的是层级化，当不能层级化时，可以将同级的信息平铺在当前页面，如果还有下级信息，可以加入类似“按钮下拉控件”的方式深入。
4. 阅读障碍。阅读方式有特征驱动阅读和语境驱动阅读两种，前者可以脱离上下文，属于常识，后者要联系上下文，需要具体问题具体分析。最好让用户处于无意识的阅读状态，不要让他们想太多…比如MV就不要改成”Music Video”，尽量别改变他们的阅读习惯。小技巧：使用他们熟悉的词汇；不要缩小需要展示的文字信息；注意文字清晰度注意文字信息的对齐方式。
5. 色觉与视觉。相对于感知亮度本身而言，我们的视觉系统对对比度与反差的感觉更为敏感。有几个要点：色彩的深浅度、色彩间的分隔距离、色彩所占面积的大小都会影响我们对颜色区别的察觉度。用色准则：利用对比在区别中突出重点信息；使用便于用户识别的颜色（蓝-黄、红-绿、黑-白是常用色）；色彩搭配中的深浅度、面积大小与远近关系；不要使用过于刺激的色彩搭配。
【可操控性体验】
1. 通过各种测试（怎么用肌肉不容易酸胀，手机拿得稳）得出了大拇指的操作范围，并确定锁屏按钮的最低点应该距离手机下边缘15mm，现在各布局都有了一定模板，照做即可，不要为了没有科学根据的“创新”自己作死。
2. 替用户记忆。用户不会想要用脑去记忆在产品上做过什么，我们要提供一些措施缓解他们短期记忆的压力。比如在搜索时提供历史记录供选择，登录时提供第三方平台登录，邮件系统里面通过“星标”标注“未读邮件”，进度条设置时刻提醒用户已经完成到第几步（注册的时候），微信的未读信息会有“小红点”标示。用户往往是达成目的就转移注意力的，所以我们应该提醒他们做些扫尾工作，比如买了东西后“待评价”，歌曲下载完成后自动退出。
