上次跟大家分享了界面构图中的九宫格构图,今天就继续来说说圆心放射构图与三角形构图,其中蕴含着哪些最基础的版式设计理念,让我们一起梳理梳理,为初入UI行业的读者提供一个参考。
圆心放射构图
在生活中,最为常见的就是圆形了,眼睛是圆的,太阳是圆的,碗也是圆的,天也是圆的。在界面设计中,圆的运用可谓是点睛之笔。
圆是有圆心的,在界面中,往往通过构造一个大圆来起到聚焦和凸显的作用。
放射形的构图,有凸显中央内容或功能点的作用。在强调核心功能点的时候,可以试着将功能以圆形的方式排布到中间,以当前主要功能点为中心,将其他的按钮或内容放射编排起来。
我们将主要的功能设置在版面的中心位置,就能引导用户的视线聚集在想要突出的功能点上,就算视线本来不在中间的位置,也能引导用户再次回到中心的聚集处。
案例分析
在界面设计中,圆形的运用能让界面显得格外生动,多数可操作的按钮上或交互动画中都能见到圆形的身影。因为圆形具有灵动、活跃、有趣、可爱和多变的特征。在界面设计中合理地将圆形的设计与动画相结合,能让整个界面鲜活起来。
如果再加上旋转围绕的动画,会让整个界面更加灵动。界面中的圆形能集中用户的视线,引导点击操作,突出主要的功能点或数据,把产品核心展现出来。圆心点放射形的设计,会使软件感觉更为智能化,包容万象。
如果要体现的功能点非常简单,例如只有几个功能按钮的时候,可以尝试使用大圆形进行展示设计,突出最重要的功能,然后罗列并排出其他的功能点。这种方式非常实用,就和画重点一样,圈出最重要的数据。善于运用大圆构图,能撑起整个画面,让界面圆润而饱满。
圆心放射的构图运用到Banner设计中可以起到很好的聚焦作用。
使用放射形状的图案作为背景有利于让用户将视线集中到中心点的文案主题上,用这种表现方式设计出来的Banner具有非常强冲击力,主题也是一目了然。
三角形构图
三角形构图主要运用在文字与图标的版式设计中,能让界面保持平衡稳定。从上至下式的三角形构图,能把信息层级罗列得更为规整和明确。在界面设计中,三角形构图大部分都是图在上,字在下,这样阅读起来更为舒服,有重点有描述。
案例分析
Gogobot的登陆页在设计时将Logo图标及字标作为一个图片整体放在了上面,而输入框作为核心描述放到了三角形的下面,也是整个界面的中心,大大的加强了用户对产品的理解,同时也可以让用户以最快的速度找到搜索这个主功能。
在个人信息页的设计中,比较常用的也是三角形构图。头像明确了这个页面的内容,而下面的粉丝和喜欢等数据就是对本人的一个描述和介绍。
在设计下面的这个儿童卫士宝贝信息设置页时,结合了三角构图与圆形构图一起进行设计。将体重刻度做成可滑动操作的效果,而卡通形象用来突出设置的对象及这个页面的功能。
好啦!今天就分享到这里!
来源:MICU设计
上一篇 超实用的界面设计构图原则!
下一篇 如何用构图搞定界面设计!
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题,火星帮你解答腾讯游戏美术春招已经启动啦!25、26、27、28届均有机会投递,实习岗位有动画、特效、3D场景/角色、2D场景/角色、技术美......
刚入学的同学,在第一次学到新软件的时候,经常会被各种快捷键整懵。但是网上download的快捷键记忆图,不一定就是合适的。这里......
官方宣布3月共134款新游戏版号过审,网传68家游戏公司超1000岗位
提前了解行业趋势,关注热门游戏和新技术如AI、UE5等;或通过了解和参加线上、线下行业游戏大赛或交流峰会,增加行业信息来源,积......
今天要分享的是武汉校区剪包专场招聘会,企业代表是曾就读于武汉校区2210期的剪包学长,这次代表公司返校,招聘视频拍摄剪辑岗位。
AI时代找不到工作怎么办?瞄准这6个常青树行业,火星全专业可匹配!
科技在创新,社会在发展,自动化、机器人和AI人工智能的应用,让很多重复性高、低技能要求的传统工作岗位正在被逐步取代,这是一个无......
一般发生在下半年,如果公司上半年业绩未达标,有些公司可能会在年中发起招聘需求,为团队储备一些新人,到年底以“试用期不通过”为理......