守望者
一个APP在开始启动设计的时候,第一步就会是应该用主要的页面来顶下整个的APP设计风格,然后其他页面按照统一的设计美化,统一的设计风格能给用户呈现整体一致的视觉体验,有利于传达产品整体的品牌形象。
我们今天就是来讨论产品的风格定义的下部分:圆角、按钮和图标,上部分的链接如下:
? ? ?《如何快速又精准的确定产品风格?(上)
?

圆角的大小

为什么现在几乎所有的产品都是使用的圆角矩形呢?其实这个呈现方式是苹果首先有的,除了乔布斯认为圆角矩形在生活中很常见之外,还有一个原因是人眼对于圆角矩形的认知会优于直角矩形,如下图所示:
人眼能够一眼锁定结构中辨识里最强的部分,而圆角和直角矩形的区别就在于内容速度的识别差异,当然还有圆角也是能够让我们的作品元素统一化的一种形式,很多时候看我们的作品是否精细,就会看我们的圆角是否一致。所以我们今天要说有两个在界面设计中经常用到圆角的部分,图片和按钮,首先,先来说一下图片:

1、图片

除了图片的风格以外,还要考虑图片是否使用圆角,圆角的数值多大,如下图所示:
上图中的图片都是正常我们在界面中看到的封面,但是由于圆角的不同,视觉感就大不一样,圆角的存在是为了让界面更具有亲和力,上图中GOFUN的图片直角的设计,让整个界面变得设计感很强,但整体风格也偏硬朗一点。
说到图片,对于头像的外框形状一直是我们在设计个人中心会遇到的问题,目前常见的类型有两种:圆形和圆角矩形,直角一般不作为考虑,如下图所示:
从表现形式上来说,圆形的头像给人灵动、均衡以及平滑的感觉,适合用在内容元素比较丰富以及设计感比较强的产品中,如下图所示:
而圆角矩形的头像就相对来说比较沉稳、冷静和拘谨的感觉,因此会在设计比较简约的界面或者列表上,如下图所示:
为什么不选择直角的头像呢,就像上面说的,头像是作为辨识身份的一种信息,需要快速的识别,而圆角能够引导用户的视觉中心,因此能够快速的帮助用户识别头像内容。
?

2、按钮

跟图片一样,按钮的圆角大小也直接影响着界面效果,如下图所示:
而选择圆角的大小也呈现了不同的视觉感受和风格差异,我们在设计的时候需要更多的考虑我们设计的产品风格或者定位是适合大圆角还是小圆角,而不是根据设计网站的流行趋势,要根据实际的内容场景进行设定才更为合理。?
?

图标

图标是设计中极为重要的一个环节,我们做的每个界面几乎都会涉及到图标的设计,而这也体现着设计师的基本功,图标大致分为三类:线性、面性、线面结合。

1、线性图标

线性图标,即图形是通过线条的描边轮廓勾勒出来的,很多新手第一反应就是使用纯色的闭合轮廓,其实线性图标有很多创作空间,如下图所示:
关于线性有两个我们经?;嵊龅降奈侍?,描边线用几像素,是否用圆角?我们可以看一下不同的产品是如何选择的,如下图所示:
2px的线性会显得有点轻,4px的线性会显得有点重,目前来说3px是使用最多的一种选择,但是我们设计时要依据整体的UI风格来决定线的粗细,如下图所示:
爱彼迎整体界面比较轻盈,因此用2px的图标可以达到视觉平衡,京东金融界面内的线性图标也是细线的,而且图标比较多,但是底部图标用4px的图标就能在视觉上有重点,并且不突兀。
当然我们在各个不同的页面选择图标类型,除了参考各大产品的规律之外,也要符合自己产品的定位,不要盲目的觉得这个好看就直接选择了,在我们做设计阐述的时候,好看是无法说服同事的。

辽宁35选7开奖哪个台 www.duulp.com  

2、面性图标

面性图标是用内容区域进行色彩填充的图标样式,同样,在这类图标中,也有很多种不同的表现形式,如下图所示:

面性图标其实相对于线性来说,对新手设计师会比较友好,因为面性的识别度会比较高,但是它的表现形式就没有线性那么多了,纯色的面性图标适合用在金刚区,但是针对比较商务或者金融类型的产品,如下图所示:
但是渐变的面性图标就视觉而言,会更加好一些,因此渐变的面性图标就比较适合轻松活泼一些产品的金刚区和瓷片区,如下图所示:
透明叠加的图标视觉风格很强,目前都是出现在教育和社交求职类的产品中见到,如下图所示:

 

3、有背景的图标

透明叠加的图标+渐变背景,此类图标通常被用在列表或者顶部的入口位置,如下图所示:

这种风格比较适合于轻松一点的产品,还有一种图标和背景都是纯色的图标,如下图所示:

这种形式图标就比较适合工具类界面比较简单的一些产品,因为这类图标视觉上相对不那么复杂,能够保证界面的整体效果的统一与和谐。

这个图标还有一个容易忽略的问题就是,背景和图标之间的大小比例是多少比较好,我们来看看大公司们的比例是怎么定的,如下图所示:
从上图中可以看出,背景与面性图标的比例以3:2使用最多,2:1的也可以选择,只是整体视觉上会显得稍微有些空,大家要谨慎选择。

 

4、混合风格

混合型的图标,既有线性描边的轮廓,又有色彩填充的区域,目前这种图标都是用于底部图标选中的状态下,如下图所示:

?

划重点

很多新手在刚接触界面设计的时候可能觉得很简单,但是越往后走就越会发现,越简单的越复杂,把握好细节,保持界面统一是很多设计师都没办法做好的一件事,对自己保持高要求,有方向的努力提高技能,希望我们都能越走越远。?

 

原文地址:海盐社(公众号)
作者:潘团子

转载请注明:辽宁35选7开奖哪个台 » 产品的风格到底是什么来决定的?(下)

登录收藏
 
你可能喜欢的:
0-1系列:目标推导与策略制定0-1系列:目标推导与策略制定
滴滴国际化司机端-首页改版总结滴滴国际化司机端-首页改版总结
如何用游戏化思维构建 如何用游戏化思维构建 “好玩” 平台
【新系列】十万个为什么设计-为什么你设计的信息用户总是看不见【新系列】十万个为什么设计-为什么你设计的信息用户总是看不见
深耕“用户界面”(中篇)- 界面设计表现层差异性深耕“用户界面”(中篇)- 界面设计表现层差异性
滴滴网约车安全设计语言探索滴滴网约车安全设计语言探索
有图标的设计,体验就一定好吗?有图标的设计,体验就一定好吗?
探索企业级产品情感化设计探索企业级产品情感化设计
2019年海外设计趋势回顾2019年海外设计趋势回顾
如何快速又精准的确定产品风格?(上)如何快速又精准的确定产品风格?(上)
?