二、环形的icon
在APP的UI设计中,我们会经常看到一排排环形的icon,例如下图所示。
上图中,前面两个分别是美团和淘宝。在设计上,都有两行横排的环形图标。最后一张图是搜狗地图的服务tab页,可以发现也有纵向排列的一溜环形图标。
在这里,要回答两个问题:
1.为什么要用环形?
2.为什么要用环形而非矩形?
第1个问题很方便回答。每个功能入口的图标都不相同,如果去掉环形轮廓,势必会显得十分凌乱。大家都知道环形是一个封闭的形体,加上环形之后就能够弱化图标的差异性,让其变得更加规整,看起来也更加清爽,整齐划一。同时,在功能上也表明各个图标之间的平等地位,不会因为某个图标形状特殊而有所偏袒。
在回答第2个问题之前,首先回归环形和方形的基本特征,
环形:动,曲线,运动,灵动,流动
方形:静,直线,规则,严肃,理性
环形和方形比起来,显得要灵动很多,不至于那么呆板、严肃。如此,不难理解为什么用环形而非矩形。
其次,环形能够使图标在方形页面中脱颖而出——不觉得这几个环形图标在页面中非常突出抢眼么?原因嘛,很简单。我们的手机屏幕大多是方形的,界面中的大多数元素也是方形的,这时候用一点少量的环形,自然在界面中形成焦点,这一点在后面的分析中还会见到。
除了这种形式之外,还有一些单个的环形图标浮于页面底部,通常执行的是返回至顶部的操作。
圆与方就像太极中的阴与阳,相生相克,而又生生不息。巧妙地将环形与方形进行结合,能够让页面变得生动活泼的同时,也能够更好实现功能上的引导,如下图所示的几个案例。
第一幅图是谷歌手机地图,地点右上角的出行方式图标刚好被方形的临时层一分为二。从功能上来讲,出行方式是下一步的行为,不属于临时层里的内容,因此置于右上角的位置是比较合适的。从UI角度来说,环形与方形结合,使的环形变得更加突出显眼;同时环形置于右上角,页面也不那么死板,反而让页面变得生动、活泼起来。
第二幅图是宜人贷,微微鼓起的弧度让这个理财项目变得十分突出,同时也打破了页面沉闷的布局。
第三幅图是kitchen stories,整个页面保持左右居中,作者的头像居中现实,对页面进行了分割的同时起到了承上启下的作用。
在页面设计中,环形元素通常不是独立存在的,而是和其他元素相生相息,相互包容。寻求好的视觉效果的同时,也要弄清楚页面元素之间的相互关系,这样产出的设计才是真的好设计。
四、环形的轮廓
结合现实物体,借用环形轮廓,打造页面点睛之笔。还是举几个栗子给大家看看吧,如下图所示。
第一幅图所示的是网易云音乐的播放界面。环形轮廓与唱片保持一致,虽然占据了页面的主要空间,但是使的整个页面变得文艺简洁。
第二幅图所示的是搜易贷的账户页面。可用余额采用瓶装水的设计,余额较多则水涨的越高,同时会有晃动的效果,栩栩如生的同时让页面变得灵动起来。
第三幅图所示的是乐动力的首页。步数越多,则描边进度条越多,暗色变得越暖。与现实生活中的仪表盘相对应,渐变色搭配环形,使的页面变得主次分明,极富视觉冲击力。
可以发现,在使用环形元素时要注意页面的平衡,例如左右和上下的对齐居中。为了保证页面的均衡和清爽,通常会在环形元素周围保留较多的空白。这些都是在使用环形元素时需要注意的事项。
FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/
飞特游客
委托设计