成为 GUI 设计师:视觉设计的基础

作者:Hindy  

原文地址:uicircle.club/a/226

转载无限欢迎,但请注明「作者」和「原文地址」。感谢您对作者版权的尊重。


前言

本文是 UI 设计进阶系列的第 7-1 篇,系列目录:uicircle.club/a/128

抱歉由于我最近一直在外旅行,导致这个系列停更了这么久,也不知道有没有人在期待(苦笑)。今天为大家带来系列第 7 部分,这个章节将介绍作为一名 GUI 设计师必须掌握的几个视觉设计要点。

视觉设计可能是大多数 UI 设计师们最为关注的地方。它是最直接面向用户的「表现层」。视觉的好坏或差异,在很大程度上直接导致了用户对产品的第一印象(包括品牌印象、产品印象)。视觉设计还将严重影响到用户的使用体验。因此视觉虽然属于设计流程的一小部分,但是对产品而言却至关重要。

在撰写本文时,我原打算概述下视觉设计的要点,但写到一半发现根本无法概括,概括出来也是似是而非的湿货。所以我在这决定按视觉设计的几大注意点,推荐几本优秀的书籍,供大家选择性阅读。要点如下:

UI 设计进阶 7-1:成为 GUI 设计师:视觉设计的基础.002.jpeg.jpg


基础设计 4 原则

在介绍上面 4 个要点之前,我还想简单介绍下 Robin Williams 的《写给大家看的设计书》。这是本非常适合大众学设计的入门书,书中提到了最为基础的设计 4 原则。虽然很老,但是非常经典。

一、亲密性

亲密性原则旨在将存在联系的元素相互靠近,组合成一项一项,令画面更加有序。 

UI 设计进阶 7-1:成为 GUI 设计师:视觉设计的基础.003.jpeg.jpg

左图是非常酷的随机排序,虽然很酷,但我们却无从知晓到底该从哪开始阅读。当我们需要展示某些信息的时候,需要像右图那样,认真将内容组织排序、对齐。相近的元素要相互靠近,不管是视觉上相近还是内容上相近。

二、对齐

让元素更加有序。 

UI 设计进阶 7-1:成为 GUI 设计师:视觉设计的基础.004.jpeg.jpg

左图三个信息完全没有对齐,显得非常无序。右图将信息左对齐,并且将「小标题」与正文相对靠近,令阅读起来更有秩序。

三、对比

使用强烈的对比可以强调信息层级,令人关注到设计师希望突出的重点。

UI 设计进阶 7-1:成为 GUI 设计师:视觉设计的基础.005.jpeg.jpg

当我们希望突出某个信息的时候,一定要加强对比。像左图那种弱小的对比,是很难达到对比的视觉效果的。因此,大胆使用「对比」,让画面更有主次。

四、重复

重复可以简单解释为「统一感」,但重复更加刻意强调。比如通过重复品牌元素达到统一视觉,加深人印象的作用。 

UI 设计进阶 7-1:成为 GUI 设计师:视觉设计的基础.006.jpeg.jpg

重复不一定是某种视觉元素的重复,也可以是文字样式的重复。左图存在的问题就是两个标题、段落的样式都不一样,感觉非常「凌乱」。右图将文字字号、字体等作了统一,看上去就有秩序多了。

即便你从来没接受过设计教育,只要用好这 4 个技巧,就能轻松做出看着舒适、整洁的设计。

推荐书籍

UI 设计进阶 7-1:成为 GUI 设计师:视觉设计的基础.007.jpeg.jpg


字体

「字体」看着是个很小的话题,其实它自身就是一个可以深入的研究方向。简单举例如字形设计、字体排印、字库制作、文字历史、计算机字体渲染技术……

但大家也别怕,对于产品中的视觉设计来说,我们不需要研究得过于深入。因为我们更重要的是「用好字」。在实际应用中,我们通常将字体视为设计中的一种元素,也就是说比起说它是「字」,我们更倾向于将其视为「图形」。这点在海报设计中尤为明显。

IMG_0201_polarr.jpeg

另一方面,字体的选择与编排可能是做视觉设计最需要掌握的两个技巧。我在这再推荐 3 本字体书,希望大家别想着走捷径,能够踏实看完本文推荐的书单。

推荐书籍

IMG_0202_polarr.jpeg


版式

在版式设计中也有两个关键点,一是构图与布局,二是网格系统。

构图与布局追求的是各种元素形成的画面感。最常用的比如中心构图、对称构图、三分法构图,还有比如黄金分隔、对角线构图、善用留白等等。视觉设计师们利用各种构图技巧塑造出或和谐或具有冲击感的画面。

IMG_0203_polarr.jpeg

第二点网格系统则是科学设计最基础的一个方法。利用纵横交错的网格系统来进行对齐、安排布局、统一规范。大多数设计软件都有辅助的网格系统和可自定义的参考线,请大家在做页面的时候务必善用网格和辅助线。

IMG_0204_polarr.jpeg

推荐书籍

IMG_0205_polarr.jpeg


色彩

色彩应用在视觉设计中是很重要的一环。其中除了对最基础的 RGB、CMYK 认识外,还有对冷暖色的运用、色彩对比的技巧,还有色环、渐变色的应用等等。优秀的用色,可以令观者(用户)快速认识你的产品风格,从而打动目标受众,比如「抖音」使用的 Glitch Art 风格。

IMG_0206_polarr.jpegIMG_0207_polarr.jpeg

推荐书籍

IMG_0208_polarr.jpeg


品牌

首先品牌就是一个产品或公司的牌子/招牌,它自古就存在,在此就不多作解释了。而现代的 branding(品牌塑造)是一套系统的营销和管理方法,我们讲 CIS(corporate identity system 企业识别系统)。它有助于将公司或产品与其他竞争对手区分开来,在顾客心中留下持久的印象。

塑造品牌的一个核心理念就是让「品牌」像水一样贯穿整个公司或产品,自内而外传达给人们。品牌在你的服务中应该无处不体现。

一套品牌的 VI(visual identity) 最重要的是包含标志、品牌色、标准字体、辅助图形及应用系统。

IMG_0209_polarr.jpeg

你也可以参考下面的两个案例来了解这些要素:

推荐书籍

IMG_0210_polarr.jpeg


最后总结

如果你想成为一名出色的 GUI 设计师,优秀的视觉设计能力其实是必须过的一关。上面所有这些理论书并不是看完就行,更重要的是观察生活中好的视觉作品,然后多思考、多练习。

祝愿顺利。


免费获取完整 PPT,请关注公众号 uicircle,回复「视觉设计」即可。

UI 设计进阶系列目录uicircle.club/a/128


如果你想提升设计能力,亦或充实自己的周末,欢迎加入我们的会员社区 👉点这报名


参考阅读

成为会员

UIcircle Member

Local Groups

UIcircle 会员

目前仅需 59 元即可加入我们

成为会员后,您可以

  • 加入内部的 Slack Channel 及微信群
  • 报名参与各种线下设计、聚会活动
  • 其他会员福利,如周边礼物、软件折扣等

如有疑问,可以先 了解我们

加入我们