UI设计 | UI排版设计原则是提升产品UX体验的基础

发布时间:2017-11-28 编辑发布:迪麦互动

设计是无标准的,但是UI设计的排版规律还是有规可循的。如何更好的提升这个排版设计能力,保证设计的界面更能提升用户体验。遵循UI设计排版四大原则:

一、视觉焦点

视觉焦点就是在界面中占主导地位的视觉元素,第一时间进入你眼睛,在整个设计中你不能强调所有设计元素。

设计通过色块,提高亮点把关键信息提炼出来,通过这种方式来吸引用户的注意力。

这个选座购票中中间座位元素都是同一个,但是选中后的效果突出,形成视觉焦点,右边的异常界面提示按钮形成焦点。

这是反面例子,右边界面所有元素看起来都很重要,没有一个明确的视觉方向指引,看起来有颜色的都能点击?

二、层次结构

在几秒钟内,用户就能明确知道要点和页面元素之间的关系,并且顺利完成当前任务。建立视觉层次结构可以通过大小,对比,颜色,肌理,留白,空间,可感知的视觉重要,好的设计它的视觉层次结构分明且符合用户阅读习惯。

顶部视觉焦点第一也是导航比较重要的一部分,右边页面顶部视觉重量大,里面文字通过明暗关系区分层级。

三、视觉重量

如何去衡量视觉重量,影响视觉重量的因素有大小、对比、颜色、留白、形状、位置等等,那么在一个界面中如何把握视觉重量的比例,下面看几个例子:

大家看完有什么感受吗?他们大小都是120px。

  第一个例子为何左边看起来比右边大

  第二个例子为何黑色视觉重量比较大

  第三个例子为何红紫色比左边方块更吸引眼球

  上面三个场景我们会在界面中,图标设计中会经常遇到,下图是调整后的大小左边方形大小是108px右边圆形还是120px

图左边为何我会第一时间留意中间logo 而不是大面积的蓝紫色,因为留白,周围没有任何元素。图右边按钮第一时间吸引我,这就是通过颜色来吸引我的视觉焦点,需要关注的重点的地方。

图左边购买按钮和评分,购买按钮第一进入眼睛,黑色在白底上视觉重量比较大。图右边选座购票区域,都是圆形,通过颜色来区分他们之间的层级关系,重要的内容通过颜色强调,次要的通过明暗关系来表达。

四、视觉方向

前面讲了视觉重量,它能第一时间把你带到特定重要的位置,那么接下来视觉方向是引导的一个作用,设计师要做的就是通过视觉引导,让用户能快速完成任务和达到预期目标,常用的视觉引导有Fpattern 和 Zpattern,下面来和大家详细说下。

左边图标和右边列表形成一个竖向轴的概念,那么就会有线,线连接元素的方向。右图再看下形成Z字结构 ,就是我们说的Z模式。

上图6个功能入口的图标水平排列,内部系统的建立一个平行轴的关系,所以视觉方向比较清晰

总的来说要形成视觉方向就需要有线,这条线是看不见摸不着,它是通过轴来形成。如何形成轴的概念,那通过对齐,相同形状元素。

上述四大排版规律是常用的原则,在UI设计中设计师们通过大小、对比、颜色、留白、形状、位置等来协调整个页面的元素,合理的运用视觉焦点、层次结构、视觉重量三者之间相互结合相互影响,视觉方向是影响结构的基础,预期目标如何全靠视觉方向来指引,综合使用能让UI设计给产品带来质的用户体验提升。








分享至: