把握这4点，UI排版再无困难

桃花朵朵149

来历：知乎



UI排版4大黄金原则
1，视觉焦点2，条理结构3，视觉重量4，视觉偏向
1.视觉焦点
视觉焦点就是在界面中占主导职位的视觉元素，第一时候进入你眼睛，在全部设想中不能夸大一切设想元素；需要确保关键元素用户的操纵方针是清楚的。


上图左侧界面中,作者经过图形黑色块来夸大重要的Button，这样能吸引你的留意力，关键元素高亮显现，比如增加小图标


这个选座购票中，中心座位元素都是同一个，可是选中后的结果突出，构成视觉焦点，右侧的空状态界面提醒按钮构成焦点



这是背面例子：右鸿沟面一切元素看起来都很重要，没有一个明白的视觉偏向指引，看起来有色彩的都能点击？左侧的实在设想也是有点题目，全部界面比力轻佻，色彩太多。
2.条理结构
确保在几秒钟内,用户就能明白晓得关键要点和页面元素之间的关系，而且顺遂快速的完成当前使命。建立视觉条理结构可以经过巨细，对照，色彩，肌理，留白，空间等可感知的视觉元素；好的设想它的视觉条理结构清楚且符适用户阅读习惯


界面中的视觉关系我标注出来了，我们可以思考他人作品是经过什么来表达这类条理关系；实在可以直旁观出应用有色彩、巨细，明暗对照（列表笔墨关系）。



顶部视觉焦点第一也是导航比力重要的一部分，下面先容设想师和联系图标，右侧页面顶部视觉重量大，里面笔墨经过明暗关系区分层级




上面的案例我经过序号标注层级关系
3.视觉重量
若何去权衡视觉重量，影响视觉重量的身分有巨细、对照、色彩、留白、外形、位置等等，那末在一个界面中若何把握视觉重量的比例，下面看几个例子。


看完有什么感受吗？他们巨细都是120px
第一个例子：为何左侧看起来比右侧大第二个例子：为何黑色视觉重量比力大
第三个例子：为何红紫色比左侧方块更吸引眼球
上面三个场景我们会在界面中和图标设想中会经常碰到。
下图是调剂后的巨细左侧方形巨细是108px  右侧圆形还是120px


再来看个列子：



图左侧为何我会第一时候留意中心logo 而不是大面积的蓝紫色，由于留白，四周没有任何元素。图右侧按钮第一时候吸引我，这就是经过色彩来吸引我的视觉焦点，需要关注的重点的地方。


图左侧采办按钮和评分，采办按钮第一进入眼睛，黑色在白底上视觉重量比力大。图右侧选座购票地区，都是圆形，经过色彩来区分他们之间的层级关系，重要的内容经过色彩夸大，主要的经过明暗关系来表达
4.视觉偏向
前面讲了视觉重量，它能第一时候把你带到特定重要的位置，那末接下来视觉偏向是指导的一个感化，设想师要做的就是经过视觉指导，让用户能快速完成使命和到达预期方针，常用的视觉指导有Fpattern 和 Zpattern,下面来和大师具体说下


左侧图标和右侧列表构成一个竖向轴的概念，那末就会有线，线毗连元素的偏向。右图再看下构成Z字结构 ，就是我们说的Z形式


上图6个功用进口的图标水平排列，在页面内系统的建立一个平行轴的关系，所以视觉偏向比力清楚总的来说要构成视觉偏向就需要有线，这条线是看不见摸不着，他是经过轴来构成。若何构成轴的概念，那经过对齐，不异外形元素
总结
上面一共说了UI排版中常用的四大排版黄金原则，综合利用能给排版设想带来质的提升。视觉焦点、条理结构、视觉重量,三者相互影响，最初视觉偏向是前面三者影响的结构。用户能否顺遂在你的产物完成使命，到达预期方针，全靠视觉偏向指引，那末这些我们经过巨细、对照、色彩、留白、外形、位置等来调和利用他们




原文地址：https://zhuanlan.zhihu.com/p/129747798
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。

击管虽您

应当对项目标排版有用处的[害臊]