UI设计的10条经验法则

Sponsor

UI是人们了解产品的重要组成部分，甚至决定用户第一眼对产品的印象。在设计过程中，设计师们总结出许多经验之谈，并且分享出来，互相交流，探讨更好的设计。然而，就像无招胜有招，我们理解运用设计规范的同时，也要独立思考，在有更好的想法时抛开规则的束缚，去呈现推陈出新的设计。毕竟，设计没有对错，只有好与不好。

以下是UI设计中要遵循的标准做法清单。

这些都不是一成不变的 —— 只是我认为在日常UI设计工作中可以帮助您的一系列方法。

请记住，设计是在框架外思考的，这意味着有时候要打破规则 —— 请把这些建议视作思维上的开拓，而不是简单地生搬硬套。

一、为密度而不是像素设计

像素值是dp值的3~4倍

如果你不熟悉，密度就是屏幕或PPI每一英寸的像素数。“dp”单位是“密度无关像素”的缩写，有时候也缩写为“dip”.

在设计界面时，建议不要针对像素进行设计，而是针对设备的像素密度进行设计。这确保界面的元素在不同的设备尺寸上都能正常缩放。

样做的原因是，如果我们设计一个按钮资源，例如200 x 50dp，那么它在160ppi的屏幕上显示为200 x 50px，在320ppi的屏幕上显示为400 x 100px，即相比原来的资源尺寸放大2倍。

由于一些设备的屏幕每英寸的像素比其他设备多，素材的资源不会在像素密度高的屏幕上显示得更小，而是以2倍、3倍或4倍于原来的尺寸进行渲染。这样可以确保所有的资源在不同的像素密度屏幕上保持它们的大小。

例如，iPhone XS Max的屏幕尺寸为414 x 896，但这不是像素，而是点数（DPI），以像素为单位，则为1242 x 2688px。考虑到这一点，在为iPhone XS Max设计的时候，我会以414 x 896dpi进行设计，然后缩放3倍来交付资源。

二、使用8dp增量

为什么设计间距以8为增量？好吧，对此我有一个简单地解释：我们使用魔术数字8而不是5的原因是，如果设备的分辨率是1.5倍，则无法正常显示奇数。

加之现代的大多数屏幕尺寸都可以被8整除，这有利于在其他设备上调整以适配我们的设计。

在8点网格上以8的增量进行设计，这使得我们的设计可以保持一致性。我们不再需要去揣摩间距的比例，并且一切都和我们所定义的间距完全一致。

有关该主题更全面的探讨，请参阅Bryn Jackson的8点网格文章。

三、删除线和边框

在设计时，你应该不时以全局的视角去判断容器是否使UI混乱。通常来说，用于分隔内容的边框和线条可以用空白来替代。

我们设计大多数元素的时候，通常都放置在网格中，只是简单地删除这些容器的痕迹，可以让页面看起来不那么密集，给我们的元素更多的呼吸空间。

四、关注对比

运用对比不仅可以吸引用户的眼球浏览页面上的相关信息，还可以提高产品的无障碍设计。

设计产品好比建造图书馆或学校等公共建筑，它需要包含所有人，包括盲人、色盲和视觉障碍人群。

Web内容无障碍指南（WGAG）要求至少4.5:1的对比度。

为了确保你的设计符合标准，可以安装Starkch插件，该插件可以检查你的设计是否符合无障碍设计规范。

五、熟悉才是好的

将某些元素视作标准的原因有很多。

例如，按钮上的文本是“开始免费试用”，而你将按钮设计为圆形，那么它将占用不必要的垂直空间。

除此之外，用户期望在整个网络中获得相似的体验。如果你的网站、App或者软件和用户所习惯的功能不一样，这就不那么直观，他们会对这种体验感到沮丧。

因此，最好在当前的设计规范中进行创新，而不是“重复发明轮子”（译者注：IT术语，重新创造一个已有的或是早已被优化過的基本方法。可以理解为设计中有很多规范是根据测试和反馈总结出来的，自己没必要再去重新从零开始总结这些已有的理论）。

六、利用颜色的视觉重量建立层次结构

每种颜色都有它的视觉重量，可以帮助我们在内容中建立层次结构。通过使用浅色调的颜色，我们可以根据内容的重要性进行层次划分。

经验法则在这里是，如果一个元素比其他元素更重要，那么它应该有更高的视觉重量。这有利于用户快速浏览页面，区分重要和次要信息。

更大、更粗的信息首先吸引用户眼球，然后他们继续浏览下方的补充信息。

七、避免使用两种以上字体

普遍接受的设计惯例是在界面中限制使用字体的数量。通常，两个不同的字体就足够了。但这不代表你不能使用更多的字体，但除非你有充分的理由，否则不要这样做。

这个问题的解决之道是使用字体系列。

通过使用字体系列，我们能够在设计中使用同一字体的变种。同一系列的字体在视觉上般配，他们更加灵活和一致。

选择字体时，可以找到具有不同重量的字体系列，比如轻、常规、中等、加粗、超粗体以及浓缩、扩展和斜体。这将为你提供更多空间来探索不同的样式，而无需添加其他字体。

八、辨别而不是回忆

熟悉是产品设计中的好习惯，因为，为什么要让用户思考？

结帐页面、email的收信箱、搜索历史、后退按钮等等都是很好的例子。

在结帐页面（如果设计得好的话），我不需要去记住我所购买的商品。我能够辨认出我所购买的商品，而不用费劲去记忆。

我搜索的内容

在我的Gmail收件箱，一眼就能确定哪些是已阅、哪些是未读，不用我思考。或者，当我登录亚马逊，我能马上回到上次我离开时的地方，因为它会告诉我最近浏览的历史记录。

“通过使对象、操作和选项可见，最大程度地减少用户的记忆负担。用户不需要记住对话的这部分信息到那部分信息。需要时，系统的使用说明应该清晰可见或者容易获取” —— 尼尔森·诺曼的群组。

九、不要拖累我的速度

作为用户，速度和效率事关重要。我正在使用应用程序来解决要完成的特定任务。

“我想要更快” —— Ricky Bobby

如果将支票电子化存入我的银行账户的体验令人愉快，那很好，但不要让你的创造力妨碍我作为用户的目标。

动画和微交互的首要经验法则是如果体验增加不必要的时间，那么它就不能提高体验。

有目的地使用动画可以提高体验，但是增加不必要的干扰和动线元素则不利于体验。

我经常看Dribbble上的着陆页设计，用户滚动页面时会伴随着动画效果。通常情况下，动画会随着动画的淡化和移动而变得过于动画化，而对体验本身的关注却很少。作为用户，当屏幕上发生太多事情需要我注意些什么的时候对于我来说是个挑战，这也浪费我宝贵的时间。

抱歉拿你当案例 Dribbble用户 :/

“许多研究表明，界面动画的最佳速度在200-500毫秒之间。这组数据基于人类大脑的特征。任何短于100毫秒的动画都是瞬时的，根本不会被感知到。而动画时间超过1秒会传达出一种延迟感，使用户感到无聊。”

这两个案例想要告诉你的是，如果你正在使用动画，请有目的地去使用。如果你有目的地使用动画，不要让我等待500毫秒以上。在2019年只要超过1毫秒就能激怒你的用户。

十、少即是多

lmk 如果你想要投资这个想法

每次我们增加页面上的信息：按钮、文本、图像、动画和插画等等，信息之间会相互竞争，如果页面上的信息太多，元素的重要性就会被稀释。

最完美的例子是著名的Google主页。设计上没有将用户淹没在可能不需要的信息洪流中，而是将设计重点放在主要行为上：搜索。

抱歉，Yahoo，我不得不这样做

我最喜欢的设计名言：“实现完美，不在于没有其他东西往里加，而在于没有其他东西可删减的时候” —— Antoine de Saint-Exupery

原文作者：Danny Sapio
原文地址：https://uxdesign.cc/@dansapio
翻译作者：小谭 | UI设计师
编辑整理：铅笔头 | 设计达人编辑组

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。