让界面变得更出色的细节(一)


对设计师来说:”细节是头等大事“。一些设计师老是觉得自己做设计没天赋,比不上那些比自己强的人。其实那些厉害的

人,只是在做设计时候多思考了一下细节,你也可以,功夫不负有心人,加油。

今天分享目录如下:

1、圆角细节

2、渐变方法

3、融入白色

 

01 圆角细节

圆角可以说在设计中出现次数最多的设计元素之一,我们熟悉的apple公司家族化产品基本都带有圆角。圆角也是打造记忆点

的常用手段之一,而且现在越来越手机手机硬件厂商都逐步圆角化。

圆角还有一个重要的特点,就是亲和力强和有温度感,让用户感到舒适。反之尖锐的元素会让人产生些许距离感,所以大家

有没有发现大部分奢侈品设计或者一些高端的设计基本硬朗直角多一些。

                                                                           硬角和圆形

我们做界面设计时候,对圆角的掌控或者处理也是需要注意。切勿将直角和圆角混搭设计,这样出来的界面视觉上会比较别

扭。

上图我们可以看到,左侧硬朗直角和右侧比起来,右侧视觉感官会更舒适一些,也体现出功能层级。

还有就是在做界面时候,整体都有圆角,只有按钮是硬朗的或者很小的圆角,就会显得整体格格不入,圆角统一性也很重

要。

对于弹窗里面按钮组件设计也是一个道理。

那么问题来了,圆角值如何定义比较好呢?

这里推荐大家一个简单的方法;”参数化圆角值“,也是基于网格系统来定义的。如果不懂网格系统,可以看看我之前写的文

章8点网格系统。

基于网格系统里面的数值,可以选取3~4个值来满足整个界面设计,如下

有些同学可能会问,为啥是这几个?这里我简单说下:”不管选取圆角值是多少,都是需要在尝试和试效果的,并不是凭感觉

定义数值“。可以根据产品里面的组件,进行圆角值定义。大型产品可以初步定义四种尺寸:”S、M、L、XL“等,当然有些简

单的产品2~3个就够了。

之前,网上流传计算圆角值方法的,其实都不太科学,就如黄金比例做设计出来的卡片就一定很好看么?最科学的方法就是

测试验证,然后去定义。

下面来看下网上做得比较好的圆角运用案例,更能帮助大家理解圆角的统一性和和谐性。

 

设计中,基本组件带有圆角,属于同一个世界中。小图标、小卡片和按钮等圆角整体运用很和谐。

反之,如果使用均是直角,那么整个语言要遵循直角。

>