留白设计和UI设计准则

留白设计和UI设计准则

其它优秀文章推荐:

视觉设计:15条科学上的设计法则讲解

中文、西文字体基础应用方式讲解

快速避免【视觉无障碍设计】中的雷

非科班设计师的出路:抛弃切尔诺贝利式思维

文字编排、排版中那些实用的小技巧!

设计当中的图形与照片的区别与应用案例

 

一:留白和裁剪

裁掉主体物的一部分。

将主题物的一部分裁掉,让其镜头感更强。可以给用户表达出更多画面蹦出的感觉。主题更突出,用户就会更关注这个部分,从而达到排版者的目的。

留白设计和UI设计准则

上图中打叉的整体感比较强,更像是一幅画面,打勾的画面主体物被放大,营造一种垂涎欲滴的意境。

二:留白和重心

重点功能周边留白,有利于突出页面的重心。

在添加购物车以及立即购买按钮的整行操作里,我们习惯上只放一个可操作按钮且用购买色来突出按钮,目的就是让用户立刻下单,形成购买行为。

留白设计和UI设计准则

上面这个618限时优惠,目的是为了促销,但是放的位置不合适,反而会影响用户的购买行为。

留白设计和UI设计准则

三:留白和视觉流

留白影响视觉流。
在网页和三折页设计中,经常会有版块之间的留白。那么精确的运用版块之间的留白,可以让用户的阅读更有秩序性。也帮助用户理解主题信息内容。这个原则类似于眼动仪。

留白设计和UI设计准则 留白设计和UI设计准则

第一行和第二行之间的留白加大,人的视觉流呈现Z字排列。横向可以延展更多空间,更适合APP页面设计

留白设计和UI设计准则
第一纵行和第二纵行之间的留白加大,人的视觉流呈现从左到右,从上到下的排列。

三:留白和信息分组

利用留白给信息分组可以有效的让用户归纳分类。

对相同的元素进行版面设计时,可以利用留白将要素之间的的间隔进行扩大或者缩小,可以很自然的进行分组,给用户的感觉也是分组认知。

留白设计和UI设计准则

UI设计的排版准则

层级:提升浏览效率

运用不同字号可以建立页面的层次感;运用DNA颜色可以强调重点内容,形成新的层级;运用购买色可以突出价格等强元素。

留白设计和UI设计准则

 

重复:页面更加简洁规律

重复在页面中多以控件形式出现,控件内容包括图片,文字,标签,icon等重复可以增加页面的整体感和统一性。

留白设计和UI设计准则

对齐:页面更加直观有秩序

APP页面中,对齐真的是强有力的一种组织形式了。对齐可以让页面有一个视觉流,引导用户自上而下进行阅读。常用的表现形式有:左对齐,右对齐以及居中对齐。

留白设计和UI设计准则

接近:关联性强的元素整合

将功能和意思接近的元素组织在一起,进行卡片分割,进而整合在一个页面里,这个就是接近原则。接近原则可以让APP页面的层级更加清晰,用户的阅读体验更佳。

留白设计和UI设计准则

 

留白设计和UI设计准则



属性标签: , ,

欢迎留言

页面生成消耗的时间 0.484 秒,此页面一共查询了 113 次数据库!缓存时间:2020-10-20 13:29:43你的IP为:3.238.8.102