UI设计的10条基本原则然而，就像无招胜有招，我们理解运用设计规范的同时，也要独立思考，在有更好的想法时抛开规则的束缚，去呈现推陈出新的设计。毕竟，设计没有对错，只有好与不好。

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

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

 

1、设计密度，而不是像素

密度是屏幕或PPI每一英寸的像素数量。“dp”单位是“density-independent pixel”的缩写，有时也缩写为“dip”。

在设计UI时，不要根据像素尺寸来设计，而应根据设备的像素密度设计。这样可以确保UI元素正确缩放以适配不同的设备尺寸。

如果设计一个按钮，尺寸200x50dp，则它在160ppi屏幕上显示为200x50px，在320ppi屏幕上显示为400x100px。

由于某些屏幕每英寸的像素要比其他屏幕多，因此资产不会在像素密度高的屏幕上显示得更小，它们仅以原始大小的2倍，3倍，4倍进行渲染。这样可以确保所有资产在具有不同密度的设备之间保持其视觉大小一致。

例如，iPhone XS Max的屏幕尺寸为414x896。但这不是像素，而是dp数。以像素为单位是1242x2688像素。考虑到这一点，在为iPhone XS Max设计UI时，我会以414x896dp进行设计，然后以3x的倍数导出图片。

 

2、使用8的倍数

我们使用8而不是5的原因是，如果设备的分辨率为1.5倍，则无法正确呈现奇数。此外，绝大多数设备屏幕尺寸都可以被8整除，从而可以轻松地在这些设备上适当地调整UI设计。

通过在网格上以8的倍数进行UI设计，可以保持设计的一致性。所有内容都与我们定义的间距约定完全一致。

 

3、去掉线框

 

通常，用于分隔内容的线框可以用空白代替。我们设计的大多数UI元素都包含在线框中，因此，只需删除那些容器，它可以使页面看起来不那么密集，并提供更多的呼吸空间。

 

4、注意对比

使用对比不仅可以吸引用户的注意力，而且可以提高产品的可访问性。设计产品类似于在图书馆或学校之类的公共建筑中建造建筑-它必须包含所有人。其中包括盲人，色盲和视力障碍的用户。

Web内容可访问性指南（WCAG）[2]规定至少需要4.5：1的对比度。

 

5、使用标准元素

将某些元素视为标准的原因有很多。如果将按钮设计为圆形，则当文本较长时，将占用不必要的垂直空间。

除此之外，用户已经熟悉在整个网络上获得类似的体验。如果你的网站，应用程序或软件的功能与用户习惯不同，那么它就不会很直观，用户可能会感到沮丧。

因此，最好仅在当前设计规范的范围内进行创新。不要重新造轮子。

 

6、使用颜色建立层次结构

每种颜色都有视觉上的分量，可以在内容之间建立层次结构。通过使用不同深浅的颜色，我们可以为元素分配不同的重要性级别。

如果一个元素比另一个元素更重要，则它应具有更高的视觉重量。这使用户易于快速浏览页面并区分重要和次要信息。

更大，更粗体的信息是首先吸引用户眼球的内容，然后他们将继续浏览下方的支持信息。

 

7、避免使用2种以上的字体

通常，两种不同的字体就足够了。这并不意味着不能使用更多，但是除非有充分的理由，否则通常最好不要使用。

解决此问题的方法是使用字体系列。

通过使用字体系列，我们可以在设计中使用具有不同变体的相同字体。同一家族的字体共同工作，因此它们既灵活又一致。

选择字体时，请找到具有不同权重的字体，例如细，常规，中等，粗体，超粗体以及压缩，扩展和斜体等样式。这将提供更多空间来探索不同的样式，而无需添加其他字体。

 

8、认可而不是回忆

为什么要让用户思考？

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

在结帐页面（如果设计得当）上，我不必记住要付款的商品。我显然应该能够识别出我要购买的商品，而不必记忆。

在Gmail收件箱中，我可以一目了然地确定已阅读邮件和没有阅读的邮件。或者，如果登录到Amazon，我可以快速从上次停下来的地方继续，因为它会告诉我最近查看的商品。

 

9、速度要快

作为用户，速度和效率是唯一重要的事情。

对于动画和微交互的一条经验法则是，如果体验增加了不必要的等待时间，那么它就不是在改善体验。

有目的性地使用动画可以改善体验，但是不要增加干扰和等待。

许多研究发现，UI动画的最佳速度在200-500毫秒之间。这些数字基于人脑的特质。任何短于100毫秒的动画都是瞬时的，根本不会被识别。而动画时间超过1秒将产生一种延迟感，从而使用户感到无聊。

 

10、少即是多

每次我们向页面添加其他信息：按钮，文本，图像，动画，插图等，它就会与相关信息竞争。如果页面上的内容过多，则元素的重要性会降低。

著名的Google主页就是一个很好的例子。设计将重点放在了主要用户动作上：搜索。

原文作者：Danny Sapio