一款 App 或 Web 产品,从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师,如果连「表现层」的内容都还一知半解就去盲目地学习其他领域,这是不提倡的。

这里说的「表现层」是指视觉设计层面,在界面的视觉设计中同样也包含了5个视觉要素:色彩、文字、图标、图片、空间。一个出色的界面设计,必然是将这些要素做到了淋漓尽致。

本文结合大量优秀的案例,并以通俗简练的语言,系统地介绍了这5个视觉要素。篇幅略长,耐心读完你一定会有收获。

文章大纲如下:

饿了么高级设计师:介面视觉设计 5 要素
饿了么高级设计师:介面视觉设计 5 要素

并置型

并置型是将不同的图片作大小相同而位置不同的重复排列,可以是左右或上下排列,能给原本复杂喧闹的版面带来秩序、安静、调和与节奏感。

饿了么高级设计师:介面视觉设计 5 要素
饿了么高级设计师:介面视觉设计 5 要素

九宫格型

九宫格型是用四条线把画面上下左右分割成九个小块,可以把 1 个或者 2 个小块作为一个单位填充图像,这种构图给人严谨、规范、有序的感觉。

饿了么高级设计师:介面视觉设计 5 要素
饿了么高级设计师:介面视觉设计 5 要素

瀑布流型

瀑布流型的图片会在页面上呈现参差不齐的多栏布局,降低了界面复杂度,节省了空间,使用户专注于浏览,去掉了繁琐的操作,体验更好。

饿了么高级设计师:介面视觉设计 5 要素
饿了么高级设计师:介面视觉设计 5 要素

五、空间

1. 栅格系统

栅格系统简介

栅格系统英文为「Grid systems」,是一种平面设计的方法与风格,运用固定的格子设计版面空间布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。

饿了么高级设计师:介面视觉设计 5 要素
饿了么高级设计师:介面视觉设计 5 要素

如今栅格系统也已经被运用到网页设计中,它以规则的网格阵列来指导和规范网页中的空间布局。栅格系统的使用,可以让网页的信息呈现更加美观、易读、严谨和一致,同时也更具可用性。

「8像素」栅格规则

「8像素」栅格规则是一个以 8px 为单位,利用 8 的倍数来规定页面中元素(按钮、输入框、图片等)的尺寸及各自间距的一种通用的栅格规则。

饿了么高级设计师:介面视觉设计 5 要素
饿了么高级设计师:介面视觉设计 5 要素

为什么用 8 而不是 5 或 7 呢?因为 8 是一个偶数,在 UI 设计过程中,对于 Android 系统需要导出特殊的 @1.5x 的切图,如果图片尺寸为奇数,则会出现半像素和虚边的问题,而用偶数则可以避免这种情况。
为什么用 8 而不是 6 或 10 呢?因为目前主流的屏幕尺寸大部分都是 8 的整数倍,比如 1920 1080、1280 1024、1280 800、1024 768 等。即使某些屏幕边长像素不是 8 的倍数,在设计中仍然可以尽量做到自定义元素的长、宽、margin 以及 padding 都是 8 的整倍数来维持设计的一致性。

2. 留白

对于一些特殊的页面,例如:引导页、闪屏页、促销页等,可以不用严格按照栅格系统进行设计,但需要注意空间留白的运用。

留白四属性

  • 次感:留白可以使页面的层次感得到极大的增强,留白越大,模块、信息间的层次感越清晰。
  • 焦点:元素越多,人的视觉注意力越容易分散;相反元素越少(即留白越大),注意力则会更有效地聚焦在重要的内容上。
  • 韵味:留白具有「此时无物胜有物」的感觉,犹如中国的水墨画。留白运用于页面设计中,韵味也会出现。
  • 呼吸:留白的呼吸属性可以想象成周围的空气,当空气中的颗粒物(元素)特别多时,人的呼吸也会觉得不通透;相反留白越多时,呼吸感越顺畅。

留白表现形式

轻度留白:轻度留白是我们常见的页面留白设计形式,在传递出雅致、高端、文艺等气质的同时,又能将信息表现得清晰直接,让页面更加简洁和实用。轻度留白融合了重度留白的优势,但不受品牌属性的影响,几乎任何产品都可以用这种表现形式。

饿了么高级设计师:介面视觉设计 5 要素
饿了么高级设计师:介面视觉设计 5 要素

重度留白:重度留白是把主体缩小到极致,其传递出的雅致、空灵、高端气质是最强的,但与此同时,其他的属性也近乎为零。「无印良品」品牌倡导简约、质朴的生活方式,原研哉赋予其设计理念就是「空」。所以,重度留白传递的不是产品,而是概念、气质和态度。

饿了么高级设计师:介面视觉设计 5 要素
饿了么高级设计师:介面视觉设计 5 要素

小结

1. 色彩

色相、明度、饱和度是色彩的三个属性,不同的色彩具有不同的心理寓意,选色时需考虑产品的调性和受众人群;色环上距离(角度)越大的颜色对比效果越强,反之对比效果越弱,设计时应采用合适的色彩搭配。

2. 字体

黑体、宋体等是常用的中文字体,而衬线体和无衬线体是常用的西文字体;不同平台的界面设计会有不同的字体使用规范;另外,设计时需注意字号、字重以及行间距的设置,以达到最佳的阅读体验。

3. 图标

图标可以辅助信息文字的传达,也可以对界面起到修饰作用;功能型和展示型是图标的两大类型;不同风格的图标传递出不同的视觉语言,根据场景的需要进行合适的选择,并保持风格的一致性。
4. 图片

不同比例的图片所传递的主要信息各不相同,设计时需要结合产品的特点,并根据不同的要求来选择合适的图片比例;图片的排版类型有很多种,根据不同的场景和所需传递的主体信息来选择与之相符的展现方式。
5. 空间

使用栅格系统,可以让界面的信息呈现更加美观、易读和规范,设计时可以采用「8像素」栅格规则来指导元素尺寸和间距的制定;层次感、焦点、韵味、呼吸是留白的四个属性,留白的表现形式需结合品牌的属性来选择。

在任何领域,如果想要有所成就,都需要超越极限的学习,都需要孜孜以求的探索,都需要殚精竭虑的思考,都需要无数次失败和成功的实践。没有人可以超越学习、思考和实践成为一个真正的高手。

欢迎关注作者的微信公众号:「彭彭设计笔记」

饿了么高级设计师:介面视觉设计 5 要素
饿了么高级设计师:介面视觉设计 5 要素