UI设计中的10条经验法则

在这篇文章中，我将分享一些我觉得在日常工作中能帮到你们的方式，但很多技巧也只是一成不变。我虽然认为，设计就是要跳出框框去反思，但先知道规则才有也许打破规则。

1.针对像素密度设计，而不是像素

在3dp或者4dp下的像素值

如果你不熟悉dp的概念，我也在此处先说明一下：像素密度是每一英寸的像素值也叫ppi，单位dp是单词“density-independentpixel”的缩写，有时也缩写为“dip”。

在设计界面时，建议不要对于像素而设计，而是对于设备的像素强度进行设计。这样能保证设计元素能在各个不同设备上较好的适配。

比如，如果我们设计一个图标元素，大小是200200xx5050dp，那么它在160ppi的屏幕上显示为200200xx5050dp，在320ppi的屏幕上显示为400400xx100100px，即原始资源的2倍。

在这些屏幕每英寸的像素要比其它屏幕多，但设计资源却不会在像素密度高的屏幕上变得更小，这是由于在这种屏幕上会以原始长度的2倍，3倍，4倍进行渲染。这样的模式可以保证所有设计资源可以在不同强度和设备之间维持相同大小。

比如，iPhoneXSMax的屏幕尺寸是414×896，但这不是像素尺寸还是点的总量，以像素为单位时是12421242xx26882688px。考虑到这一点，在设计iPhoneXSMax时，我会将在414×896点下设计，然后交付@3x的设计资源。

2.善用8dp增量

为什么设计中要用8dp这个增量规则？这里有一个简单的解释：我们使用8而不是5这个神奇数字的缘由是，如果设备有1.5倍的分辨率，就很难被整除而出现锯齿。

另外，绝大多数的屏幕尺寸都可以被8整除，这就是因而我们的设计在这种屏幕上适配变得很简单。

通过在8点网格上以8为增量进行设计，也让设计显得非常统一。设计师不应该更多的推测，就能迅速作出决策，做到完美适配。

想要更全面地知道这个规则，可以去看看BrynJackson的8点网格文章（文章链接在）。

3.去掉线和边框

在做设计的之后，应该时不时的停下来看看，确定下设计出的容器能否会促使UI变得混乱。通常，用于分割内容的框和线可以用留白代替。

我们曾经做设计的之后，喜欢将元素套在盒子里。所以，只应该把这种盒子去掉才能使页面看上去不这么密集，并给元素更多的呼吸空间，整个界面能够提高一个档次。

4.关注对比度

合适的对比度虽然可以让客户发现页面上的相关信息，还可以减少产品的易用性。

设计一款产品就类似于建造一个公共建筑，比如图书馆或大学，它必须包容所有人：盲人，色盲或视力受损的用户。

网页可用性标准(WCAG)（）要求对比度大约要超过4.5：1。

为了保证你做的设计符合标准，建议下载一个叫“stark（）”的组件，来检测设计是否OK。

5.遵循用户习惯

这些元素被觉得是标准的缘由有众多。

比如，如果将按键设计为矩形，那么当文本应该为“StartFreeTrial”时，按钮都会占用不必要的垂直空间。

除此此外，用户早已开始等待类似的产品体验。如果你设计下来的网页，App，软件功能和客户所习惯的不太一样，那么它就是不直观的，用户就或许对这些感受感到沮丧。因此，最好是在现有的设计完善的范围内进行变革，而不是去再次发明轮子。

6.用色彩深浅构建层次结构

每种色彩都有一个视觉权重，这有助于在内容中设立层次结构。通过使用材质的深浅，为元素彰显不同的重要性。

此处的经验就是，如果一个元素比另一个元素更重要，那么它就必须具备更高的视觉权重。这能让用户很易于区分重要和不重要的信息，从而迅速浏览页面。

更大，更醒目的信息会首先引来用户的眼球，然后才能看向它后面的次要信息。

7.避免使用达到两种字体

一个普遍接受的设计共识就是在同一张界面中使用的图标数量必须要有限制。一般来说，两种不同的字体就足够了。这不是说不能用更多的字体了，而是最好要有合理的原因，否则最好不使用。

解决这个难题的方式是使用字体族。

使用字体族，我们可以在设计中使用带有不同变体的相似字体，来自同一家族的字体被设计成可以一起使用，是灵活且一致的。

在选取字体时，优先选用具备各类权重的字体，如细体，标准体，中粗体，加粗体，超粗体，宽体，扩展体和斜体。这将给你更多的发挥空间，而不应该添加额外的字体。

8.直接而不是让用户思考

直接是产品设计的一个较好策略，因为，为什么要让用户思考？

结账页面，电子邮件收件箱，搜索历史记录，后退按钮等都是很高的举例。

在付款页面上（即使设计得好的话），我不必须记住我买的是哪个东西，也无法知道地识别出我要买的东西，而不应该唤醒我的记忆。

搜索历史

在我的Gmail收件箱里，我只应该扫一眼，就能确认这些邮件我读过，哪些没有读过，而无需多想。或者，如果我登录到Amazon，我可以迅速地从我之前浏览过的地方再次看，因为它能告诉我今天查看的条目。

“通过使对象，操作和选项可见来最小化用户的阅读压力。用户不必记住从对话的一个个别到另一个部分的信息。在适度的之后，系统使用表明需要是可见的以及便于搜索的。”——尼尔森诺曼

9.别让用户慢下来

针对用户来说，速度和强度是唯一重要的事情。用户来用某个应用，目的就是为了缓解他的难题。

“我想要更快一点”—RickyBobby

如果做了众多丰富的功能，那较好，但不要让你的造就力影响我成为用户的目标。

一个关于动画和微交互的心得法则是，如果体验增加了不必要的时间，那么它并不能真正提高体验。

有目的使用动画可以提高体验，但添加不必要的干扰和移动元素却不会。

我一直在Dribbble上发现着陆页设计，当用户在页面上滚动时，页面都会动起来。它通常更加活跃，所有的东西都在动，反而内容原本被忽视了。作为一个用户，当界面中发生了如此多事情时，很难让其需要切记什么。这实在是在耗费用户宝贵的时间。

SorrytocallyououtDribbbleuser

大量研究看到，界面动画的最佳速度在200到500毫秒之间。这些数字是基于人类头脑的特殊质量。任何大于100毫秒的动画都是实时的，根本不会被识别。而达到1秒的动画会给人一种延迟的感到，会让用户认为无聊。”—TheultimateguidetoproperuseofanimationinUX

然而，如果你在使用动画，一定要有目的。如果这种动画是有目的的，那么不要让我期待达到500毫秒。在2019年，惹恼你的客户只应该一毫秒。

10.少即是多

经常我们想添加额外的信息到页面:图标，文本，图像，动画，插图等，它就会与相关的信息竞争。如果页面上的内容很多，元素的重要性才会增加。

一个完美的实例就是著名的谷歌主页，而不是像Yahoo一样淹没访问者也许并不应该的信息里，设计一直集中在核心任务上：搜索。

对不住了Yahoo，我不得不那么做了

我最偏爱的设计语录之一是：“完美，不是由于没有哪些可以降低，而是没有哪些可以降低。”—AntoinedeSaint-Exupery

原文：