你必须知道的UI设计法则

当你在设计过程中有疑问时，不妨看看我们为你准备的，在UI设计中要遵循的标准实践法则列表。当然，这些法则不是一成不变的，只是我们认为可以在日常的UI设计工作中为你提供的一系列方法而已。

请记住，设计需要跳出固有的思维，这意味着你要打破规则。因此，这些经验法则仅仅作为你的参考即可，而非公式。

01、设计基于密度而非像素

请记住，像素密度的定义。它是显示设备每物理英寸的像素数，像素密度的简写是PPI(Pixels per inch)。另一个安卓常用的单位是DP，这个单位的英文全称是“Density-independent pixels”，简称DIP或者DP。请注意，这个单位是相对单位，而对应的iOS设计中的相对单位则是PT(point)。

在设计界面的时候，我们最应该关注的不是手机的分辨率(像素)，而是设备的密度。这样可以保证我们在不同尺寸的设备中有最佳的适配效果。

这样做的原因是，比如我们设计了一个按钮素材资源，它的尺寸是200X50dp，那么在160ppi屏幕的设备上，它就是200x50px，在320ppi的屏幕上，它显示为400x100px，即为原始尺寸的两倍。

由于某些显示设备每英寸的像素数(ppi)要比其它屏幕多，因此图片素材不会在像素密度高的屏幕上显示得更小，它们会以原始大小的2倍，3倍，4倍进行渲染。这样可以保证所有的图片素材在具有不同密度的设备之间保持同样大小(因此如果你不为高密度屏幕提供更大图片，那么图片会被拉大，就虚掉了)。

例如，iPhone XS Max的屏幕尺寸为414X896，请注意单位不是像素，而是PT。以像素为单位计算，那么尺寸为1242X2688px。考虑到这一点，在为iPhone XS Max进行设计时，我们会使用414x896pt来进行设计，然后在输出素材时，简单的将素材乘以3即可(也就是3倍图)。

02、使用8PD增量

为什么在设计间距时要以数字8为增量?在这里有一个简单的解释。例如，我们使用这个神奇的数字8而不是5，是因为如果设备具有1.5倍的分辨率，它将无法正确呈现奇数。( 5X1.5=7.5，很明显，我们不想要小数点)

此外，现在绝大多数的屏幕尺寸都可以被8整除，从而可以轻松的在这些设备上调整我们的设计。

通过在8点网格上以8为增量进行设计，我们可以保持设计的一致性。间距也不再需要猜测，所有内容都与我们定义的间距约定保持一致。

03、去除多余的线框和卡片

在设计的时候，你应该时不时的跳出来看看，感受一下容器是否会让UI界面显得混乱。在大多数情况下，用于分隔内容的框和线可以用留白来替代。

我们设计的大部分元素其实都包含在“框”中，因此，只需删除这些内容即可，它可以让页面显得不是那么的密集和繁杂，并为元素提供更多的呼吸空间。

04、注意元素的对比度

良好的对比不仅可以吸引用户的注意力，而且还能提升产品的可访问性。

设计产品类似于在图书馆或者学校之类的公共建筑中进行设计，你必须关注到所有的人群，包括盲人，色盲人群和视力有障碍的用户。

根据Web内容可访问性指南，元素需要至少有4.5：1的对比度。

要确保你的设计符合这个标准，大家可以下载Stark(下载地址：#/)，它可以帮助你检查你的设计可访问性是否合格。

05、尊重用户已有的使用习惯

将某些元素视为标准的原因有很多。比如你将“开始免费试用”按钮设计为圆形，但是它用在一篇文章的底部时，这就会占用过多不必要的垂直空间。

不仅于此，用户已经习惯了在大多数应用中获得类似的使用体验。如果你的网站或者应用与用户的常规使用习惯差别太大，那么用户就会感到沮丧(毕竟学习成本太高啦)

因此，建议大家在当前设计规范的范畴内进行创新。不要重新发明轮子。

06、使用色彩重量构建视觉层次

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

这个经验法则就是，如果一个元素比另一个元素重要，则它们应该有更“重”的视觉重量。这种方式会让用户易于快速浏览页面并区分重要或者次要的信息。

而更大更粗的字体信息会首先吸引用户的注意，随后用户会将注意力集中在这些重要信息的解释性文字或者内容上。

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

我们普遍接受的设计准则就是限制界面中使用的字体数量。通常，两种不同的字体就够了。但这并不意味着你不能用更多字体，除非你有充分的理由，否则最好还是不要那么用。

如果一定要使用多种字体，一种解决办法就是使用一种字体家族。

通过使用同种字体家族，我们可以在设计中使用具有不同变体的相同字体。同种字体家族让设计变得灵活又一致。

另外，在选择字体时，请找到具有不同字体重量的字体，比如一种字体包含，极细，常规，中，粗体，超粗体，压缩，或者斜体等样式。这种字体会为你提供更多的选择，也无需再去添加其它样式的字体。

原文：#/10-rules-of-thumb-in-ui-design-aa5f91885444作者：Danny Sapio翻译：静电、来源：静Design(JingDesign91)，如侵权请告知删除

点击咨询直接了解更多相关资料，我在惠州北大青鸟新方舟等你。

本文内容转载自网络，版权归原作者所有，如有侵权请联系我们进行删除。

标签：惠州计算机软件培训惠州计算件软件开发惠州计算机软件基础惠州计算机UI设计软件开发惠州UI设计培训学校惠州UI设计培训UI设计基础教程UI设计是什么UI设计教程UI设计入门UI设计培训