设计师提高UI美学的7种思路

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

设计师提高UI美学的7种思路

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

今日分享大纲:

  1. 使用图标 / 图形
  2. 融入3D元素
  3. 使用高清图片
  4. 运用网格
  5. 注意版式
  6. 一致性
  7. 注意颜色

1、使用图标

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

设计师提高UI美学的7种思路

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

设计师提高UI美学的7种思路
设计师提高UI美学的7种思路

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

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

2、融入3D元素

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

设计师提高UI美学的7种思路

△ 韩国UI

设计师提高UI美学的7种思路

△ 腾讯视频

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

3、使用高清图片

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

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

设计师提高UI美学的7种思路

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

设计师提高UI美学的7种思路

△ 来源:NIO Lifea

设计师提高UI美学的7种思路

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

4、运用网格

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

设计师提高UI美学的7种思路

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

设计师提高UI美学的7种思路

5、注意版式

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

设计师提高UI美学的7种思路

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

设计师提高UI美学的7种思路

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

6、一致性

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

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

设计师提高UI美学的7种思路
设计师提高UI美学的7种思路

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

7、注意颜色

界面设计中,色彩是一切的灵魂,因为色彩,可以让我们对该品牌记忆深刻。之前我写过一篇关于色彩的文章,今天这里就不深入讲解,如果你很想提高色彩使用思路,可以再去看看这个颜色运用方法,搞定了我大部分排版配色

设计师提高UI美学的7种思路
设计师提高UI美学的7种思路

8、感悟

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

设计师提高UI美学的7种思路

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

本文由 新媒体之家 作者: 功夫UX 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
1

发表评论