3个UI设计技巧提升用户体验

在做用户界面的时候，我会出现这样的困惑，什么样的界面才是我要设计的呢？有时候要满足商业需求，又要满足审美，还要满足企业需求，我们该如何做取舍呢？什么样的界面才是最合适的选择呢，下面的内容将通过3要素帮助你分析UI设计中所遇到的这些问题。

第一：视觉美观性

视觉的美感，就是需要我们深入了解界面中每个组件的意义与试用的表现形式，其基本原理就是如何避免丑，最具代表的是格式塔心理学的六大原则，就是通过陌生影像与存留记忆的双重感受之下，作出美感得到的判断，我把它称之为关联记忆。

因此遵循格式塔的原理，能让我们设计出美感的界面。下面我们就来了解一下格式塔的六大原则。

1、对齐：其本质是完整的形态是对人体美学的探索。

2、对比：对比能让主要信息一瞬间跳跃在眼前，但是我们需要控制一个页面中的层级在4——6个之中

3、亲密：亲密顾名思义就是接近性原则，在界面设计当中，可以分割成四个层级，（使用间距-最大，分割线其次，分割条，卡片）。在应用的时候我们也会发现，元素与元素形成的面，也可以理解成间距分割。我们需要注意的一个点是，任何信息模块，比如卡片里面又有很多信息的时候，我们可以通过分割线进行二次分割，所以在实际操作的时候都是穿插使用的。

4、相似：在界面中我们需要遵循相似的规律，不仅是为了美观性，还能让开发写文档的时候比较方便。所以我们在设计的时候，就需要这些方面对相似原则的运用（色彩、字体、控件、圆角、图标、投影、分割）设计的时候保持相似。在相似的基础上，我们需要根据流程的不同，在设计上又要做出形式上的区分，防止相同的流程决策影响用户的选择。

案例：比如在设计按钮的时候，会做实心按钮、水晶按钮、幽灵按钮、文字按钮、图标按钮，根据层次的不同来引导用户的操作流程。在同一个页面设计的时候，我们需要对信息进行归类，区别出不同的元素，比如为了让界面更易阅读，文字的色彩形成一定的逻辑，标题文字用333333，内容文字用666666，备注文字用999999，根据产品设计适应的色彩。

5、闭合。闭合的原理是因为忍耐具有联想的作用，因此大脑会将元素联系成一个整体，这样会更便于理解。设计的时候遵循视觉的闭合规律，减少大脑主动联想闭合的时间，直接提升用户的视觉体验。应用就是多进行规则化的设计，通过底色等进行归类，卡片化设计等。

6、思考。我们都知道让用户感觉高级的东西，一定是用户一眼无法看懂的，因此抽象的元素能让用户产生思考，但是要注意阅读性和高级感之间权衡。

这六个美观性原则，足以让我们在面对需求的时候，选择合适的方式，用以达到需求目标，美是一种工具。

怎么样达到美的效果呢？核心就是提高我们产品的品质。我们需要了解到品质感的心理来源，简单来说就两点：细节与简约。这里需要注意的是简约不是简单，而是要扬长避短，所有的这些都是减少大脑的负担，让大脑一眼识别你想表达的内容。就是把细腻的元素放大，让用户一眼能看到好的一面，忽视最差的一面，以此达到简约而不简单的目的。那么细节是怎么做的呢？

案例：对于图表，我们有三个方向的影响可读性与美观性。第一个是造型的提取，轮廓一定明确，其中包视角、圆角大小、断口原则、倾斜角度、线条粗细。第二个是z轴走查，包括主图形、辅助元素、背景层。第三个是质感，包括渐变光影角度、投影数值、纹理。

第二：印象差异

什么是印象差异，即在美的基础上，我们如何设计出有自己风格的界面呢？接下来我们来了解一下什么是印象差异性。我们的第一个目标就是深入了解不同属性间产品的特点及适用设计风格，借助工具挖掘产品独特的DNA和记忆点。

决定产品风格的因素主要有两个，一个是用户群体（年轻化、老龄化）

案例：斗鱼直播，用户：需要在情感上增强用户的粘度，板式松散密度低，色彩丰富，高饱和，图标有丰富的视觉效果，活动植入多，更注重数据的转化。新浪财经，用户：强调操作钱百分之百可预测（防错优先原则），板式最大的利用空间，紧凑，密度高，圆角小，彰显权威与可靠，图标的装饰比较少，信息传达清晰。

二是产品的属性（业务类、内容类、工具类、社交类），补充：如何区分，用坐标轴的方式，社区能力强弱于用户产生内容的强弱。

1、业务类：丰富——连接人与业务流程（电子商务，团购类，旅游类），由于内容复杂，导致色彩和交互等板式上饿的丰富，板块分割都比较严重，很少有大面积的留白，因为首屏重要，列出了很多功能入口。

2、内容类：连接信息与人（耐看），用户以最快的速度获取最有效的信息。

3、工具类；连接人与事件（易理解），打开产品后的目的很强，一般是用完后就关闭，一般内容单调，很多时候采用插画或者质感的风格，凸显精致感。

4、社交类：连接人与人（仪式感），因为很多人用才产生的价值，很难爆红，但是一旦成功就很难被取代，每个用户都希望自己被重视。分为熟人陌生人社区。

色彩使用：色彩越少，越显专业。色彩越多，情感越丰富。色彩越散，产品越不稳重。色彩分布整齐，越专业。饱和度低越专业，饱和度高越娱乐化。

用户记优先排层次：位置、色彩、形状、文字。

通过以上的整理，我们深挖产品的DNA，其步骤共四步：确定情感、提取关键词、生成情绪版、营造氛围。产品孵化出来的模型，包括性格定义、人物模型、产品的DNA，形象ip、细节落地。

第三：科学合理性

在落地的过程中，我们应该怎么样做到科学合理呢，目标就是让界面设计有完善的维度跟方式，具体内容是解读用户浏览目标，合理的布局视觉路线。科学合理的核心是信息传递，包括三个点的传递，一是视觉的基础体验合理性，通过科学实验我们知道浏览热区呈现f行和z行的路线来的，二是用户能能够快速获取信息，落实到界面的时候，需要我们删减内容，合理布局，做到视觉的层次差异，三是在视觉传达中也很重要的点，品牌印象于视觉差异，让品牌瞬间占领用户的心智。

需要确保每个信息存在的必要性，在设计的过程中记得查漏补缺。从流程开始，该页面属于哪些流程的内容（流程交互），该流程需要帮用护解决什么问题（核心表意），用户需求和产品需求分别是什么（需求对照），用尽量少的内容解决问题。我们在对信息作需求的筛选的时候，可以使用kano模型就是之前文章的产品分析内容，根据必要信息、期望需求、亮点需求、无差异需求、反向需求的递减性来删减信息。

其次要确保信息学的布局层次和信息层级的合理性，保证用户在浏览页面的时候能更快的获取有用的信息。划分层次分为两个步骤：

1、功能板块优先：根据用户的意向和频率，结合kol竞品来分析，成功的产品需求需要迭代完善。

2、划分板块中的信息层级：使用艾森豪威尔法则，重要跟紧急信息来排序，第2象限适合初创产品用户核心需求，成熟的产品以第4象限为核心，比如广告，如果判断不了，继续使用kano数据来分析，也可以采用其他因素来进行优先级划分。

对信息进行整理后，接下来就是视觉上的层级划分，我们要知道界面设计其实是解决问题的阶段。最好的一个层级划分方式就是对比突出，一定是有参照系的设计，才能体现出层次。设计界面的时候，需要避免给予用户过多的选择，根据席课-海曼定律选择越多所需时间越长，是不符合用户体验特点的（下一篇会讲用户体验），因为人脑最多同时处理5-9个事情，如果内容过多，使用分步认知的方式来解决信息过多的问题。视觉上影响用户优先级的顺序如下：位置（浏览顺序和用户习惯）-色彩（背景-饱和-多色）-留白（留白越多层次越高）-空间（卡片制造空间）

有效的埋点，根据产品期望反馈数据，引导用户交互。在这个过程中，我们的目标是引导用户做出产品想要进行的决策，确定数据的指标除了核心数据，也包括因变量，确定评判的变量，多维度的方案进行评估，包括内容、视觉、交互、情感。

以上就是UI设计的核心3要素，当面对这么多内容的时候，我们如何使用这些概念呢，我们可以分三次，每次设计的时候把其中一个点拿出来在界面上反复研究，能对这些内容更有效的使用，才能深入理解。

感谢阅读，共同进步，用经验输出内容，倒逼设计。