撰稿编者按：UI操作介面不能撇开其本质而著重方式，假如没有认知重要信息和文本的自然法则，极难作出科学合理的结构设计。责任撰稿译者从14个结构设计技术细节撷取了被广为利用的操作介面准则，它能加速使你的操作介面更整洁、高效率，一起来看看吧。

Hi，我是杏花。介面是使用者在与任何人产品、APP或网络平台可视化时看到的文本，使用者新体验就是建立在稳固的操作介面基础其内的。所以，假如你想在UI结构设计上提高潜能，应该多去思索操作介面另一面的其原因。

那时会跟大家撷取一些被广为利用的操作介面准则，它能加速使你的操作介面更整洁、高效率。

二、美术设计要更易认知

用更难让使用者认知（说人话）的鼓励美术设计，提高使用新体验。

（杏花注：上面2个事例中，右侧的“科季夫”和“库存量2”太过分名词化，右侧的“仅余2”和“重新加入科季夫”更为切合使用者的日常生活认知。我们平常工作的时候，也很大要特别注意介面中的美术设计，特别是表明文本，命令行文本之类，那个点时常难被忽视。）

二、横向翻转更易往下压

较好的对齐方式，可以进一步增强文本的时效性，让使用者的视野更难扫描器。

（杏花注：右侧的“之”字形视动线比较难写作，且不如专精；右侧的横向翻转进一步增强了时效性，也让结构设计看上去更为标准化，能够加速的提高结构设计技术细节。）

三、给快捷键加图标

使用图标、动画作为标签，有助于更轻松地认知文本，它使介面看上去更为理性和丰富，能瞬间抓住使用者的眼球。

（杏花注：右侧的导航相较于右边，极难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）

四、大段文本要拆分

大段的长句会让文本变得难以写作。为了获得好的新体验和UI，应该特别注意拆分文本，并使用项目符号突出关键点，利用拆分好的文本块让使用者更快抓住重点。特别是在“功能表明和条款条件”或任何声明时，提炼要点有助于提高使用者新体验，这样也不至于让使用者直接忽视。

（杏花注：右侧的大段文本我想应该没多少人会去写作，右边的至少还能在短时间内加速看一看几个关键词。）

五、流程增加进度条

进度条帮助使用者追踪流程，它也能使查看上下步骤更为难。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。

（杏花注：左边的表单UI不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助使用者清楚的知道流程进度。）

六、错误提示要明确

错误提示很大要明确，更易认知，方便使用者进行下一步的操作。假如使用者不认知介面上出现的错误，使用者就会感到很失望，可能会放弃接下来的流程。在UI结构设计时，在正确的地方用通俗的语言表明问题，以避免歧义，这一点非常重要。

（杏花注：我常常遇到各种出错，但出现的提示太过分名词化，也没有提示在正确的地方让我非常苦恼。）

七、按钮要正确科学合理

从菲茨定律（Fitt’s Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将特别注意力集中在转化按钮上，按钮应该准确放置在科学合理位置上。此外，按钮的大小应该更易点击，避免使用者因尝试点击时不方便而流失。

（杏花注：右侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合使用者的心理预期，能够让使用者更快决策并点击。）

八、用好色彩心理学

颜色是UI中不可缺少的部分，它能影响使用者使用应用时的情绪。正确地使用颜色将使UI看上去更为丰富科学合理。

（杏花注：右侧的蓝色按钮颜色并不符合使用者对于删除的心理预期，右侧的红色按钮对使用者的心理预期有危险和警告，用红色代表删除能够让使用者集中特别注意力关注这一特殊的操作。）

九、单列更易保持关注度

用单列展示文本，能更好地帮助使用者扫描器。当你的应用和网站上要展示大量重要信息时，将所有重要信息横向翻转时，能更好的保持使用者关注度。

十、优先社交媒体账号登录

当使用者准备登录或注册你网络平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免使用者填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。

十一、选择状态要清晰

在使用者做选择的时候，需要清晰地告诉使用者选中的到底是哪一个快捷键。模棱两可的颜色会增加使用者的认知负担。更少的颜色和清晰的选中状态能让使用者获得更好的新体验。

（杏花注：右侧的问题在于选中状态不清晰且快捷键的颜色过分丰富，右侧的选中状态清晰且快捷键颜色只有2种，选中和非选中，新体验会更好。）

十二、用留白分组

假如想给重要信息分组，使用留白是最好的方式。加条线作为分组符号会在介面中增加了一个额外元素，空白能让UI看上去更为整洁和优雅。用线分组的情况适用于类似Twitter、Medium之类的重文本网络平台等场景。

十三、命令行样式保持一致

保持结构设计的一致性，能够降低功能复杂度并让使用者更快决策，一致性结构设计让使用者更快熟悉操作而不需要太多思索。（杏花注：右侧的快捷键圆角不一致，会让使用者思索为什么这里会有不同，而右侧的一致性快捷键结构设计，能让使用者忽视文本外的干扰。）

十四、搜索中的占位符要用好

在搜索输入栏添加适当的占位符，提示使用者可以在网络平台上搜索和找到的文本，这样可以提供使用者参考并带来更好的使用者新体验。

十五、总结

以上这些就是在结构设计数字产品新体验时应该遵循的14个基本准则，这些点虽然基础，但却时常被人忽视，我在星球中帮我们看经典作品集时发现上面提到的这些点出现的是最多的，希望我们可以把这些知识利用到自己的结构设计中，提高UI产品体验。

#专栏作家#

杏花sky，腾讯高级视觉结构设计师；公众号：杏花译结构设计。

责任撰稿原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。