设计新手提高UI美学设计的7种实用方法


你曾经是否有过被别人说设计无细节,无品质感等这样的经历,其实每个人都会有这个过程,只是或长或短的时间而已。

设计细节不只体现一个设计师的能力水平,还体现他对产品的理解,对生活的认知。今天的思路能让你在做设计时候,多注意细节,提高美感!

今日分享大纲:

1,使用图标 / 图形

2,融入3D元素

3,使用高清图片

4,运用网格

5,注意版式

6,一致性

7,注意颜色


1.使用图标

添加图标或者图形可以使界面中元素的功能更加清晰直观,同时易于全球化设计和用户对功能的快速识别记忆。

如上图案例,左侧添加图标,右侧纯文字设计。左侧美观度提升,同时更加利于用户去使用与记忆功能。

IBM设计图,上下可对比,第一张图,去掉图形目前看着也能用,第二张图增加图形,画面显得饱满一些,功能都通过图标示意出来,直观易触达。

当然需要注意的点,切勿过度使用,造成画面花哨。


2.融入3D元素

3D设计不用多说,是当下比较火热的设计手法,它在平面包装、电商领域、动态视频、UI设计等涉及范围广,设计新颖,刺激大众感官。

 韩国UI

腾讯视频

腾讯视频将异常状态3D化设计展示


3.使用高清图片

图片在设计中起着重要作用,包括我们概念方案中的情绪图,或者在产品设计中使用图片,都可以更加生动体现产品性格特征。

图片使用3大要点:有意境,简单干净,高清大图

左侧app:29cm,右侧app:Vsco

来源:NIO Lifea

电商设计领域更是广泛摄影图

给大家推荐高清摄影图网站:网站不在于多而在于精

1,https://unsplash.com/

2,https://www.pexels.com/


4.运用网格

网格可以让界面更加有层次与节奏,一致性更强。网格已经在平面杂志设计中多年使用历史,同样在UI设计中运用它,一样可以做出优质设计。

杂志化产品视觉特征打造已是趋势,如果还不熟悉网格的运用,可以搜索下我之前写的一些关于网格的文章。


5.注意版式

这里说的版式也包括字体类型,版式中需要注意文字排版间距,字体行间距,对比度,层次结构,这些都是导致UI细节不完善的原因之一,也是我们最容易掌握的。

左侧设计中,输入框里面信息基本看不清,层级不明显;右侧层次凸显同时,信息能清晰识别到。

左侧排版无层级,右侧版式更加直观清晰,对比度明显。


6.一致性

一致性是一个老生常谈话题,但它确实是保证产品系统性,品牌性不可获取的条件,比如系统中图标样式一致、排版网格一致、插画元素一致、符号一致等。

下面展示一款韩国APP在这方面做得具有代表性:

实际线上的产品在一致性方面做得比较到位,一致性的运用,能使产品更加风格化,记忆特征明显,区分竞品,美学体验到达极致。


7.注意颜色

界面设计中,色彩是一切的灵魂,因为色彩,可以让我们对该品牌记忆深刻。


8.感悟

文中今天说了7种比较实用,同时大家易于掌握的方法与思路,帮助大家开窍。当然也需要灵活运用,每次在做界面设计的注意下这些细节,多思考,坚持下来,成为一个能做出好设计的设计师。

除了上面7种实用方法,还有其他类型的方法,比如微交互、情感化插图、UI品牌系统化、定义统一的具有DNA特征的品牌、功能场景感塑造。对于基础薄弱的伙伴可以先从上面7种入手。


每天更新,
全站高品质素材免费下载!