UI设计规则

UI设计中的8像素规则

    无论是网站设计、杂志排版，还是手机app界面，设计师们都会在网格上安排各个元素的排列。最近看到很多著名的设计博客都在推广“8像素规则”，这是什么，怎么用，以及有什么用呢？
    建立一个以8pt为单位的网格系统，利用8的倍数来规定页面中元素(按钮、输入框、图片等)的尺寸及各自间距的大小。即任何需要自定义的长、宽，marging和padding都应该是8的倍数。
为什么用 8 而不是 5 或 7 呢？因为 8 是一个偶数，在 UI 设计过程中，对于 Android 系统需要导出特殊的 @1.5x 的切图，如果图片尺寸为奇数，则会出现半像素和虚边的问题，而用偶数则可以避免这种情况。

为什么用 8 而不是 6 或 10 呢？因为目前主流的屏幕尺寸大部分都是 8 的整数倍，比如 1920 × 1080、1280 × 1024、1280 × 800、1024 × 768 等。即使某些屏幕边长像素不是 8 的倍数，在设计中仍然可以尽量做到自定义元素的长、宽、margin 以及 padding 都是 8 的整倍数来维持设计的一致性。
字体
最小字号推荐 12px，正文字号推荐 14px，标题字号推荐 18px、20px、24px、28px、32px 等，尽可能使用偶数。而行间距一般为字号的 1.5-1.8 倍。

android界面设计尺寸有哪些?
Android界面尺寸：480800、7201280、10801920。[单位：像素]\rAndroid比iPhone的寸尺多了很多套，建议取用7201280这个尺寸，这个尺寸7201280中显示完美，在10801920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。

web设计
一般网站内容显示的区域为996px；国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。

参考资料
● 网页UI设计原则与规范
● 给开发看的 UI 设计
● B端网页设计规范全方位汇总
● Web UI 网页设计规范
● https://zhuanlan.zhihu.com/p/262534680
● https://zhuanlan.zhihu.com/p/471834953