如何设计ui(ux设计)

编辑导语:UI界面设计不能抛弃本质，重在形式。如果不了解信息和内容的因果，就很难做出合理的设计。作者从14个设计细节分享了广泛使用的界面设计法则，可以快速让你的界面设计更加干净高效。让我们看一看。

嗨，我是蔡赟。界面是用户在与任何产品、APP或平台交互时看到的东西。用户体验基于坚实的界面设计。所以，如果你想提高自己在UI设计方面的能力，就要多想想界面设计背后的原因。

今天给大家分享一些广泛使用的界面设计规则，可以快速让你的界面设计更加干净高效。

二、文案要易于理解

使用用户更容易理解的指南文本(说人话)来改善用户体验。

(蔡赟注:以下两种情况，左边的“购物车”和“库存2”过于术语化，右边的“只剩2个”和“加入购物车”更接近用户的日常理解。平时工作的时候，也一定要注意界面中的文案，尤其是说明文字、控制文字等。这一点往往容易被忽视。)

二、垂直对齐易于扫视

良好的对齐可以增强内容的可读性，使用户的视线更容易扫描。

(蔡赟注:左边之字形视动线难读，不专业；右侧的垂直对齐增强了可读性，使设计看起来更加统一，并可以快速改善设计细节。)

三、给选项加图标

使用图标和动画作为标签有助于更容易理解内容。它使界面看起来更加理性和丰富，能够瞬间抓住用户的注意力。

(蔡赟注:与右导航相比，很难在第一时间准确识别其含义。添加图标后，不仅看起来更快，视觉上也更美观。)

四、大段内容要拆分

有很长段落的长句子会使内容难以阅读。为了获得良好的体验和UI，要注意对内容进行拆分，用项目符号突出重点，利用拆分后的内容块让用户更快地掌握重点。尤其是在“功能描述和条款条件”或者任何语句中，提炼重点有助于提升用户体验，不至于让用户直接忽略。

(蔡赟注:我不认为很多人会阅读左边的大文本，至少几个关键词可以在右边快速阅读。)

五、流程增加进度条

进度条有助于用户跟踪进程，也使查看向上和向下的步骤变得更加容易。这种格式可以用在网购、填表、申请流程等场景，简化流程。

(蔡赟注:表单左侧的UI不方便跟踪进度和进程，而表单右侧将进度放在顶部，帮助用户清楚地了解进程进度。)

六、错误提示要明确

提示必须清晰易懂，便于用户进行下一步操作。如果用户不理解界面上的错误，他们会感到失望，并可能放弃下一个过程。在UI设计中，用通俗的语言把问题解释在合适的地方，避免歧义，这一点非常重要。

(蔡赟注:我经常会遇到各种各样的错误，但是出现的提示太过术语化，在正确的地方没有提示让我很苦恼。)

七、按钮要正确合理

从菲特定律我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将焦点集中在转换按钮上，应该将按钮准确地放置在合理的位置上。另外，按钮的大小要便于点击，避免用户在尝试点击时因不方便而流失。

(蔡赟注意:左边的按钮没有在正确的决策位置，按钮太小。右边的按钮简洁，符合用户的心理预期，能让用户更快的做决定和点击。)

八、用好色彩心理学

色彩是UI不可或缺的一部分，它会影响用户使用应用程序时的心情。正确使用颜色会让UI看起来更丰富，更合理。

(蔡赟注:左边蓝色按钮的颜色不符合用户删除的心理预期，右边红色按钮对用户的心理预期是危险和警告。使用红色进行删除可以让用户专注于这个特殊的操作。)

九、单列更易保持关注度

在一列中显示内容可以更好地帮助用户浏览。当你想在你的应用程序和网站上显示大量信息时，当你垂直对齐所有信息时，你可以更好地保持用户的注意力。

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

当用户准备好登录或注册你的平台时，尝试将所有可用的社交媒体登录放在第一位。这样可以避免用户填表时额外的认知负担和时间消耗的损失。首先，使用社交媒体账号可以提高点击率。

十一、选择状态要清晰

当用户做出选择时，需要明确告诉用户选择的是哪个选项。模糊的颜色会增加用户的认知负担。较少的颜色和清晰的选中状态可以给用户更好的体验。

(蔡赟注:左边的问题是选择的状态不清晰，选项颜色太丰富。右侧的选中状态是清晰的，只有两种颜色的选项。如果选中或者不选中，体验会更好。)

十二、用留白分组

如果你想对信息进行分组，使用空白是最好的方法。添加一条线作为分组符号会给界面增加额外的元素，而空白色会让UI看起来更干净，更优雅。用线分组的情况适用于像Twitter和Medium这样的重内容平台。

十三、控件样式保持一致

保持设计的一致性可以降低功能的复杂度，让用户更快的做出决策。一致的设计可以让用户不用太多思考就能更快熟悉操作。(蔡赟注:左边选项不一致的圆角会让用户思考为什么这里会有差异，而右边一致的选项设计会让用户忽略内容之外的干扰。)

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

在搜索输入栏中添加适当的占位符，提醒用户在平台上可以搜索和找到的内容，可以为用户提供参考，带来更好的用户体验。

十五、总结

这是设计数字产品体验时应该遵循的14条基本规则。虽然这些都是基本的，但却经常被忽视。当我帮你看你在星球上的投资组合时，我发现上面提到的这几点出现的频率最高。希望你能把这些知识运用到自己的设计中，提升UI产品体验。

#专栏作家#

腾讯高级视觉设计师蔡赟·斯凯；微信官方账号:蔡赟翻译设计。

本文由人人作为产品经理原创发布。未经许可，禁止复制。

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