app视觉设计艺术（读书笔记）

一、移动互联网产品在变化

　　UI=用户界面

• 用户的界面-从属关系-视觉传达与美化界面设计
• 用户与界面-交互关系-从视觉"看到"->执行交互

层级化与理性思维

　　层级化

　　层级化是一种管理模式，是集权与分权化的一种组织结构方式。层级化使app的功能组织结构简洁有条理，便于用户理解和使用。

　　如何进行层级化的管理，这需要我们使用理性的思维去对功能进行合理的分类与组合，并将它们合理地安排在不同的界面中。否则，不当的层级化管理也会破坏产品的整体设计。

　　理性思维分析四部曲

　　我们需要明确对于一个“功能”而言，它会与什么产生联系（平等关系，包含关系，间接关系，衍伸关系，必然联系）

　　移动联网的UI设计也被艺术化?

　　互联网产品+UI<>视觉（平衡）

　　我们视觉的承受能力是有限的，简化不仅让繁复的信息在显示时，带来了视觉的轻松感，也让不断增加的新功能有了空间可以存放。

　　边界弱化消失，界面显得更加简洁（少用圆角？）

二、数据时代的用户体验

2.1 认识移动UI的用户与界面；

2.1.1移动UI用户研究也有“4W”原则（Who，When，Where，Why)

进行用户研究的目的在与进行结构设计，结构设计也叫概念设计（Conception Design)是界面设计的骨架。

2.2.2 人机交互中的用户体验

把握住用户的需求便会改善用户对于产品的体验（首先要满足用户需求）

微信的对话框（均衡、区分、逻辑感、有序、规整）

2.4视觉简化

从某种程度来说，思考让我们的大脑更累，过多的操作也浪费我们的时间，其实这就是需要改进的用户体验。我们要帮用户做好信息整理分类，减少操作步骤，操作图标，界面能让人望文知意，更轻松的达到操作目的。

三、格式塔中的视觉经验

经验与惯性

格式塔理论是指我们在心不在焉，没有引入反思的现象学状态时的知觉的最终结果，强调经验和行为的整体性。格式塔理论最基础的发现便是：人类视觉是整体的。我们的视觉系统对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到换不相连的边、线、区域。

视觉感知的格式塔理论是心理学家在认知领中的研究成果，格式塔理论中的七个法则也被称为”完型“法则，它们描述了人们通过视觉在认知事物时所形成的某种组织规律。

3.2格式塔理论与移动UI视觉设计

3.2.1 格式塔理论：接近性

接近性原理会让人们在视觉上自动将靠得近的物象归为一组或一类。（控制好元素、组件之间的距离）

1.线条装饰的运用（细线突显精致）2.装饰色块的运用也可以帮助页面分类。

3.2.2格式塔理论:相似性

如果在其他因素相同的条件下，相似的物体看起来总归属于一组。

在而对于UI视觉设计时，由于我们的视觉感知经验会在不经意间产生相似性的现象，有时我们可以利用这种现象对界面进行自然的分布，同时也需要考虑让所设计的界面避免产生不必要的视觉引导错误。

1.利用分界线（断开的分界线，完整分界线有不同的效果） 2.色块 3.线面结合（注意去除多余的元素，保持简洁）

3.2.3格式塔理论：连续性

3.2.4格式塔理论：封闭性

主要应用于图标设计

3.2.5格式塔理论：简化对称性

我们的视觉经验会在第一时间自动组织并将数据信息向着简化的方向解析，并赋予它们对称性。

3.2.6格式塔理论：主题与背景

当小事物重叠在大事物之上，或者小色块叠加在大色块之上时，我们的视觉会倾向于将小事物或小色块归为主体，大事物和大色块则为背景。

1.注意发挥背景的诱导性（背景要与主体相同风格） 2.不要让背景与主体脱节（逻辑关系）

3.2.7格式塔理论：共同命运

一起运动的物体会被感知为属于同一组或是彼此相关。与接近性和相似性原理类似，斗鱼“我们视觉系统会有着给对象进行分组来感知事物的倾向”

1.避免多余色块元素的添加 2.元素之间的联系要得当（滑动条）

3.3综合运用格式塔理论

接近性，相似性，共同命运：与“我们视觉系统会有着给对象进行分组来感知事物的倾向“相关

连续性，封闭性，简化对称性，主题与背景：与”我们的视觉系统会通过解析模糊或者以查漏补缺的方式来感知整体事物的倾向“

对设计的影响：

1.视觉感知的格式塔理论可以避免所设计的界面使用户产生歧义

2.视觉感知的格式塔理论可以避免界面中出现重复与多余的元素

3.视觉感知的格式塔理论有助于简化归纳界面信息，让界面结构规划更加合理

四、视觉优化的过程

4.1感知与视觉结构。

4.1.1经验与感知

你看到什么取决于告诉你看什么，先入为主会让我们形成一种经验，经验影响感知

在设计时应该使用符合用户经验的设计和图标（可以在图标正确的基础上对它进行一些变形，如用线性风格的图标，加框的图标。。）

4.1.2环境与感知

当同样的符号放在不同的环境，人们对于该符号的感知与理解也会不同

在app整体环境设定了的情况下，有些文字可以省略。

对事物感知分两个方向”自上而下“或”自下而上“

主页面中，当主要信息覆盖在主界面时，才更加符合用户对于产品的感知。次要信息放在主界面时，会使用户在自下而上的感知界面时产生疑惑和误解。

对于不能很好地体现产品主要功能，却又与产品相关的版块，我们将其视为次要信息。在设计时，将其”隐藏“是一种不错的表现方式（交互隐藏版块）。

4.1.3 目标与感知

我们在视觉上会形成只关注目标的意识和现象

4.1.4结构化与感知

将信息分类处理，通过一定的形式与结构去表现信息，我们能更快地进行信息的捕捉，并更加容易扫描、浏览和理解信息内容

结构化->精炼了文字信息，避免重复，提高了人们对于信息的浏览与捕捉速度。

结构化+图形化->精炼了文字信息的同事，加入图形或色块的装饰，更一步优化人们对于信息的浏览与捕捉速度。

分析文字信息找到层级关系->通过层级关系将信息进行有效分组->这就是对于信息结构化的分组分层表现方式。

（1）分组分层 （2）分类分点（form），对于层级化不明显的信息组织方式

分类分点

1.通过“按钮控件”暗示信息的延展

2.通过文字信息暗示选项的存在

3.结构化-分隔表现

数字分隔（电话：181 7310 2501）

文字也可以分隔处理，将文字信息分隔进行了分段处理，使用不同的文字颜色突出重点，添加图形表现形式界面更加轻松->用户更愿意阅读界面中的文字

4.2阅读障碍的产生

4.2.1 阅读的方式

特征驱动阅读（自下而上） - 语境驱动阅读（自上而下）

对于熟悉的事物或信息的认知，我们是出于一种无意识的状态，这使我们捕捉和认知信息，二不熟悉的事物或信息则会让我们产生有意识的理解过程，并阅读起来显得费力。UI视觉设计时，我们也需要注意不要破坏无意识的阅读状态，建立将有意识转换为无意识的阅读状态

4.2.2 别让信息设计影响阅读

1.使用熟悉词汇与搭配

2.不要缩小需要展示的文字信息

3.注意文字信息的识别与清晰度

4.不要让必要信息被重复所掩盖（小标题的应用）

5.注意文字对齐方式（靠左对齐）

在阅读文字信息过程中，当读完一行转而阅读下行时，视线会回到与商行文字相同的水平位置。

4.3 视力的局限性

4.3.1 中央凹与边界视线

4.3.2 兼顾视力局限的界面信息传达

1.将信息放在用户能看见的位置

2.利用图形元素增强用户的感知

3.利用“红色”是不错的选择

4.使用提示符号引起用户的主意（错误，正确，警示，必填）

4.4 色觉和视觉

1.利用对比在区别中突出重点信息

2.使用便于用户识别的颜色

“蓝-黄”  “红-绿”  “黑-白”

3.色彩搭配中的深浅度、面积大小与远近关系

4.不要使用过于刺激的色彩装饰

五、可操控性体验

5.1触控式交互体验

相对于键盘，5个有点（直接接触性，流畅性，易认性，体验性，开阔性）

触屏带来布局改变（次级动作，内容区域，主要动作）

单手持机，拇指操作范围，点击控件的区域，手势操作难易度

在允许的情况下，尽量加大点击区域

5.2.1短期记忆与长期记忆

短期记忆：低容量、不稳定  - >  搜索的历史记录（帮助用户记忆），多个页面新功能提示（增强操作感，页面内容少更容易记住）

长期记忆：容易出错不精确 -> 界面交互方式，图标 一致性避免用户出错，使用第三方平台登录（ 避免用户记忆过多的密码）

5.2.2可操控性设计的六事项

1."点石成金"的设计

用户无需思考所用的工具怎么用，外形是什么，只要达到目的

2.设计帮助记录的工具

读书（已读，未读---红色小圆点），待办（已办，未办），

3.让用户更快完成目标

4.越熟悉用户越喜欢

5.思考力的周期性

人类的行为具有一种周期性，目标、执行、评估

6.有头便有尾

注意力是种稀缺资源，当我们把注意力放在重要的事物上时，通常便会忽略一些不重要的事物，这便是导致我们“健忘”的原因。

-》》比如退出表单填写界面时，若用户没保存应提醒用户是否保存，以避免不必要的损失。“用户很有可能会忘记扫尾工作”，在ui设计时，应尽量加入能帮助或提醒用户进行收尾工作的元素。