晋升产品UX体验的一些排版设计原则

曲目:晋升产品UX体验的一些排版设计原则
NJ:
时间:2019/06/12
发行:



本期跟 大家聊下 UI 设计中晋升产品UX体验一些排版设计原则,下面进入正题(备注:以下举例图片均根源于网络)。

本期跟 大家聊下 UI 设计中的一些排版的设计原理,作为 UI/UX 设计师,如何更佳有规律的去掌握排版设计才能,这样能保障你在设计中的界面处理才能抵达一个长期波动的水准,而不是时好时坏,下面进入正题(备注:以下图片均根源于网络)。

UI排版设计 4 大原则

视觉焦点

品位结构

视觉重量

视觉方向

视觉焦点

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

上图的界面中作者通过色块来强调重要的日期选项记事,这样能吸引你的注意力,要害重要元素高亮显示。

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

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

品位结构

在多少秒钟内,用户就能明确知道要点跟 页面元素之间的关系,并且顺利完成当前任务。树立视觉品位结构能够通过大小,比较,颜色,肌理,留白,空间,可感知的视觉重要,好的设计它的视觉品位结构明显且合乎用户阅读习惯。

界面中的视觉关系我标注出来了,我们能够思考别人作品是通过什么来表白这种品位关系。其实能够直观看出运用有颜色、大小,明暗比较(列表文字关系)。

顶部视觉焦点第一也是导航关于比重要的一部分,下面先容设计师跟 接洽图标,右边页面顶部视觉重量大,里面文字通过明暗关系区分层级。

视觉重量

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

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

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

第二个例子为何玄色视觉重量关于比大

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

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

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

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

视觉方向

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

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

上图6个功用进口的图标程度排列,内部系统的树立一个平行轴的关系,所以视觉方向关于比清晰

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

总结

点击查看原文:晋升产品UX体验的一些排版设计原则


申博sunbet正网