UI设计中的6条经验法则

UI设计中的6条经验法则。分享一些我认为在日常工作中能帮到大家的方法，但这些方法也并非一成不变根据设计需求调性进行设计，达到我们的目的。UI设计中的6条经验法则分享给你。

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

ps:dp的概念，像素密度是每一英寸的像素值也叫ppi，单位dp是单词“density-independent pixel”的缩写，有时也缩写为“dip”。
在设计界面时，建议不要针对像素而设计，而是针对设备的像素密度进行设计。这样能确保设计元素能在各个不同设备上很好的适配。

例如，如果我们设计一个按钮元素，大小是200x50dp，那么它在160ppi的屏幕上显示为200x50dp，在320ppi的屏幕上显示为400x100px，即原始资源的2倍。

在某些屏幕每英寸的像素要比其他屏幕多，但设计资源却不会在像素密度高的屏幕上显得更小，这是因为在这些屏幕上会以原始尺寸的2倍，3倍，4倍进行渲染。这样的机制可以确保所有设计资源可以在不同密度和设备之间保持同样大小。
例如，iPhone XS Max的屏幕尺寸是414x896，但这不是像素尺寸而是点的数量，以像素为单位时是1242x2688px。考虑到这一点，在设计iPhone XS Max时，我会将在414x896点下设计，然后交付@3x的设计资源。

2. 去掉线和边框

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

我们以前做设计的时候，喜欢将元素套在盒子里。所以，只需要把这些盒子去掉就能使页面看起来不那么密集，并给元素更多的呼吸空间，整个界面就能提升一个档次。

3. 关注对比度

合适的对比度不仅可以让用户看到页面上的相关信息，还可以提高产品的易用性。
设计一款产品就类似于建造一个公共建筑，比如图书馆或学校，它需要包容所有人：盲人，色盲或视力受损的用户。

网页可用性标准 (WCAG) （https://webaim.org/articles/contrast/ ）规定对比度至少要达到4.5：1。

为了确保你做的设计符合标准，建议下载一个叫“stark （ https://getstark.co/）”的插件，来检查设计是否OK。

4. 遵循用户习惯

某些元素被认为是标准的原因有很多。

例如，如果将按钮设计为圆形，那么当文本需要为“Start Free Trial”时，按钮就会占用不必要的垂直空间。
除此之外，用户已经开始期待类似的产品体验。如果你设计出来的网站，App，软件功能和用户所习惯的不太一样，那么它就是不直观的，用户就可能对这种体验感到失望。因此，最好是在现有的设计规范的范围内进行创新，而不是去重新发明轮子。

5. 避免使用超过两种字体

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

解决这个问题的方法是使用字体族。
使用字体族，我们可以在设计中使用具有不同变体的相同字体，来自同一家族的字体被设计成可以一起使用，是灵活且一致的。
在选择字体时，优先选择具有各种权重的字体，如细体，标准体，中粗体，加粗体，超粗体，宽体，扩展体和斜体。这将给你更多的发挥空间，而不需要添加额外的字体。
6. 用颜色深浅构建层次结构

每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。

这里的经验就是，如果一个元素比另一个元素更重要，那么它就应该具有更高的视觉权重。这能让用户很容易区分重要和不重要的信息，从而快速浏览页面。

更大，更醒目的信息会首先吸引用户的眼球，然后才会看向它下面的次要信息。
UI设计中的6条经验法则让你在设计的路上笔直前行，做设计就是要跳出框框去思考，清楚规则打破规则。在设计的路上横行霸道。