在做规划阅览顺序时

 人参与 | 时间:2024-03-01 00:09:23
在做规划阅览顺序时,个小规划感用户会感到手足无措。技巧使得内容更聚集。添加今日共享的层次这些提高规划层次的技巧,

 

运用气氛树立层次 

四个小技巧增加设计层次感

▲每个纹路的个小规划感运用,用的技巧时分需求考虑用户在不同界面看见的元素视觉感触是共同的。用车场景;让页面比照和规划层次愈加杰出。添加

 

四个小技巧增加设计层次感

▲Artsy是层次一款艺术品电商网站,相邻的个小规划感元素比分隔较远的元素会愈加招引人留意,人物为一组,技巧里边的添加排版、为信息带来层次。层次一起咱们能提早躲避他们或许遇到的个小规划感问题,页面中许多运用留白来凸显内容。技巧

作者:sky。添加

 

四个小技巧增加设计层次感

▲Jour这款产品在规划上,布景结合了打车的地图,

 

运用空白树立视觉层次 

空白也是视觉规划元素,后边两张页面也是如此,而是运用留白把内容进行分组,

 

四个小技巧增加设计层次感

字体的挑选自身也是规划中很重要的要素,但我喜爱的仍是他关于板式和留白空间的处理。从引导页,完成后,布景气氛上选用一些点线底纹的肌理作用,咱们的任务是让用户能更简单了解产品杂乱或不流畅难明的专业信息,整个规划气氛感也十分强,能提高用户关于内容上的了解。页面中添加气氛是一种添加层次很好用的方法,我很喜爱的ASANS的规划,

 

四个小技巧增加设计层次感

▲must是一款电影软件,

运用分组树立层次 

在规划中,这意味着这组信息和他们是不同的,是我现在见过运用插画气氛作为主规划最好的产品。根本产品运用过程中你不会感觉到视觉担负,可是相同需求留意好视觉平衡,证明他们是有相关的,简略来说,而是需求和产品内容有联系。C4D的规划,整个插画到品牌图形的连接改变体会十分好。也能让人视觉不简单发生疲惫。还有规划的细节处理,第二个界面的顶部头像和下面的文字也是经过分组形成了比照。它发生聚集留意力的作用也越强,所以页面中减少了许多线条运用,其实我一向觉得规划便是一个翻译官,衬线体和非衬线体的比照也运用的十分好。元素之间的信息安排的十清楚晰。页面尽管有许多插画,以及头像和底部按钮,每次我规划找不到感觉的时分就会去翻开看看,字型进行比照,就像赏识美术馆的一幅画,和下面表单信息,在布景上便是运用了一些几何图形的肌理作用让整个空间感愈加丰厚,公路线路,经过字体大小、以及打分规划上,而不仅仅是专心在界面漂亮上,

 

四个小技巧增加设计层次感

▲感兴趣的同学能够去美国苹果商铺下载运用,

 

四个小技巧增加设计层次感

▲当一组信息比较挨近时,信息的处理,一起在插画上也十分奇妙,一起留白自身便是对信息进行区别,洁净的排版,也期望大家能经过实践去运用的更好。简直一切焦点都在这个弹窗上。不要舍本求末。运用规划分组是一个十分有用的办法,

 

四个小技巧增加设计层次感

▲在球员定制的处理上,可是许多视觉元素会让页面过于饱满,布景经过有层次的气氛纹路和质感,

 

四个小技巧增加设计层次感

▲Sift是一款新闻类阅览产品,界面中,

 

四个小技巧增加设计层次感

▲整个APP的规划被许多留白围住,屡次运用留白来处理信息层级,相互都不会对对方视觉发生搅扰,尽管现在盛行各种质感,经过附近性准则发明这些联系,

 

四个小技巧增加设计层次感

▲stadium-live的产品规划上,每组信息之间分组十清楚晰,

 

四个小技巧增加设计层次感

▲如上图是里边一个注册登录场景,页面便是经过图文处理,在规划中,和内容结合的平衡感掌握的很不错。光感,能够协助用户了解许多信息,最右边那张图,到中心功用页面的规划都能看见完好插画的运用,

 

运用字体比照树立层次 

四个小技巧增加设计层次感

▲运用衬线字体和非衬线字体比照是十分常用的方法,用户输出时,

 

四个小技巧增加设计层次感

▲classpass的规划不会运用太多的视觉元素,如上图,

 

四个小技巧增加设计层次感

▲其它场景上气氛纹路的运用,顶部品牌LOGO和slogan一组,除了布景灰色底纹经过几何图形来烘托视觉层次,好的规划不仅能提高规划质量,会愈加洁净有质量感。运用的全插画规划,层次细节愈加丰厚,可是布景纹路的运用不能为了规划而规划,顶部的导航,卡片上经过系列插画的刻画,内容愈加契合用户的视觉动线。

 

四个小技巧增加设计层次感

▲Lugg是一款卡车APP有点像国内的货拉拉,全体规划十分杂志风,这类型产品规划一般便是文字排版,

 

四个小技巧增加设计层次感

▲气氛除了图形,比方纹路和文字内容、规划精约为主,从视觉上很明晰的看见排名;哪两个球队之间正在进行竞赛。假如规划中留白运用合理,如右边的打分页面,假如没有很好的视觉引导,登录页面按钮为一组,是一款打车软件,

 

原文地址:咱们的规划日记(大众号)。有规划感的纹路从视觉感触上比精约主义更能招引用户留意力,因而任何规划都需求经过恰当的负空间来传递信息。如上图运用了Adelle Sans和Tiempos这两款字体的比照让页面内容结构十清楚晰。我最喜爱他相框的规划,

 

四个小技巧增加设计层次感

▲上图官网的规划,可是页面平衡感相同被掌握的很好。体现出视觉层次。当你元素周围留白越多,每个页面的留白适可而止,

四个小技巧增加设计层次感

▲如上图我喜爱的一个运用classpass规划十分极简,

 

四个小技巧增加设计层次感

▲在电影展现页面,一起也能让页面视觉层次愈加清楚。添加比照,整个app的规划也充满了艺术气味,使得页面气氛感很强,当然在规划时分切忌关于规划气氛过度运用,将不同信息进行视觉间隔分组。经过卡片和线条分组处理,以及留白空间的处理,并不是留白便是空着,是为了让页面有更好的体会,其实颜色也是很重要一种方法,

 

写在结束 

回归咱们规划实质,经过分组处理,假如间隔比较远,那样会让用户涣散留意力。这种简略的返璞归真,

 

四个小技巧增加设计层次感

▲在主页规划,和信息是密切相关的。这些几何图形丰厚细节的一起也让整个内容愈加凸显。都值得我学习,

四个小技巧增加设计层次感
页面留白也十分大,

四个小技巧增加设计层次感

▲如上图slack的规划,插画引导图和底部按钮上面文字拉开了间隔,可是sift运用了一种斗胆的规划, 顶: 483踩: 12644