越到!界面视觉设计 5 要素

一如既往舒缓 App 或 Web
产品,从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而当
UI
设计师,假如并「表现层」的内容还还同知半解就去盲目地读外世界,这是未提倡的。

此地说的「表现层」是依靠视觉设计范围,在界面的视觉设计受到相同为带有了 5
只视觉元素:色彩、文字、图标、图片、空间。一个美的界面设计,必然是将这么些要素就了淋漓尽致。

正文结合大气卓越的案例,并因为浅显简练之言语,系统到地介绍了当下 5
独视觉元素。篇幅略长,耐心读了公得会生出获取!(适合阅读人群:视觉设计师、交互设计师、平面设计师、设计爱好者等。)

章大纲之类:

这就是说大家尽管开吧 ~


要素一:色彩

1. 情调基础概述

1.1 色彩三属性
  • 色相(H):色彩的眉宇、序列与称号,比如红、橙、黄、绿等颜色的序列就叫色相。

  • 饱和度(S):色彩的花哨程度,也如纯度。

  • 明度(B):色彩的通晓程度。

人眼看到底不论是一彩色光都是登时三独特性的综合功用。

1.2 色彩寓意

同一色相的例外明度和见仁见智饱和度,也会指向人口有不同的思感受。我于此间归结整理了各个色彩在通常状态下代表的不等寓意,仅供参考。

  • 红色(Red) 热烈、喜庆、热情、浪漫、危险

  • 橙色(Orange) 温暖、食物、友好、财富、警告

  • 黄色(Yellow) 光辉、明亮、尊贵、权力

  • 绿色(Green) 健康、自然、清新、希望、安全

  • 青色(Cyan) 朝气、脱俗、真诚、清丽

  • 蓝色(Blue) 平静、纯洁、清凉、科技、沉稳

  • 紫色(Purple) 神秘、高贵、优雅、浪漫、妖艳

  • 黑色(Black) 深沉、庄重、严肃、邪恶、死亡

  • 白色(White) 纯洁、神圣、干净、高雅、冷淡

  • 灰色(Gray) 平凡、随意、苍老、冷漠

2. 情调加配

色相相比较:两栽及一定量栽以上色彩做后,由于色相差异而形成的色彩比较效果称为色相相比。

色相相比较的强弱程度,取决于色相之间以色环上的相距 (角度),距离 (角度)
越老比越强,反之比较越弱。

相似界面的情调加配重要不外乎三栽颜色:主色调辅助色点缀色,搭配比例分别吗
6:3:1。

2.1 同类色搭配

色环上距离 0°
的颜料为同类色,一般常用同一种色相的不比明度或不同饱和度的构成模式,例如蓝和浅蓝,红和粉红等。同类色搭配相比较效果统一、清新、含蓄,但也易有单调、乏味的感想。

2.2 邻近色搭配

色环上相差 30° 左右底水彩吗靠近色
,例如紫与蓝紫,蓝紫与蓝顶。邻近色搭配比较效果和、文静、和谐,但为容易感到单调、模糊,需调剂明度来增进功效。

2.3 类似色搭配

色环上距离 60°
左右底水彩吗类似色,例如橙和退步,黄橙及黄绿等。类似色搭配相比较效果相比充分、活泼,同时还要不错过联、和谐的感到。

2.4 中差色搭配

色环上距离 90°
左右底水彩也碰到差色,例如红和黄橙,蓝绿和黄等。中差色搭配比较效果明快、活泼、饱满、使人兴奋,同时不失调和的感。

2.5 相比较色搭配

色环上偏离 120°
左右底颜料吗相比色,例如红和挫折,红紫与黄橙等。比较色搭配相比效果显明、醒目、刺激、有力,但为便于导致视觉疲劳,一般用选用多种调整和手法来立异相比效果。

2.6 互补色搭配

色环上离 180°
左右底水彩也相互补色,例如红与绿,黄和紫等。互补色搭配表现来同样种能力、气势以及精力,具有十分显眼的视觉冲击力。

2.7 �多色搭配

多色搭配顾名思义是由余情调组合而成的同一栽搭配法,一般坐不越 4
种颜色吗适当,规定同一种作为主导色,此外作为匡助色使用。

多色搭配会于画面显示更为长、多彩,充满趣味性,但万一决定不好,也便于让画面变花,失去平衡。搭配时须注意别主次,按百分比举办调停。


要素二:文字

1. 字简介

粤语字体类别大致分为:仿宋、宋体、陶文、仿宋、此外(变体字)。

西文字体连串大致分成:无衬线体、布达佩斯真或衬线体、意大利斜体、手写体、黑字体(哥特体)。

本次重点为我们介绍一下比较常用之衬线体和任衬线体。

1.1 衬线体

衬线字体在画末端有附加的装点线条依然“韵脚”。衬线字体字母的横线较细、竖线较粗,如
Times New RomanGeorgia 等书属于衬线体。

衬线体具有复古传统的曲线美、个性显著、张力十足,通常用在时尚奢华品牌、复古海报等规划领域中。

1.2 无衬线体

无衬线体顾名思义,就是依靠“没有衬线的字”。衬线指的是字母结构画之外的装饰性线条,无衬线字体字母之竖线和横线粗细基本相同,像经典的
HelveticaFutula 等书就属于无衬线体。

无论衬线体平常相比简便、具有现代感,适用于 Web、App
等互联网科技领域的统筹受到。

2. 文应用规则

不同平台的界面设计中标准之字体会来两样,像移动端界面的统筹虽会晤发稳定的书体样式,网页中碰面时有爆发常用之八只字。

2.1 移动端常规字体

当 iOS 设备及,系统默认的英文字为 SanFrancisco,普通话字体为
PingFang。值得注意的是,SanFrancisco
字体会随着字号的转变自动调整字母里的区间,以保险其他动静下还可以够十分显著地读。

当 Android 设备及,原生系统英文字接纳 DroidSans
Roboto,但国内的 Rom
大都是第三方厂商定制而改为,对原生系统字体有所转。我们以设计时方可行使
Noto 作为普通话字体来拔取。

2.2 网页端常用书

每当 Windows 系统面临,常因此书有 微软很黑黑体宋体
等,最小字号推荐 12px,正文字号推荐 14px,标题字号推荐
18px、20px、24px、28px、32px 等,尽可能采用偶数。而施行间距一般为字号的
1.5-1.8 加倍。

每当 Mac OS 系统中,常用闽南语字体有 苹方思源宋体
华文细黑分外,英文字有 HelveticaSanFrancisco 等。

值得一提的是:Helvetica
已吃评为是设计师最容易之字体,简洁现代底线条,极度受追捧。在 Mac
下受看是一级的网页字体,在 Windows 下由于 Hinting 的由显示大不好。


要素三:图标

1. 图标效率

图标是 Web 和 App
设计被的点睛之笔,既会扶助文字音讯之传言,也克当消息载体被飞速地辨识,并且图标为发生早晚之装裱功能,可以加强界面设计的赏心悦目度。

2. 图标类型

有关图标的路目前并没有死高贵的分类,我遵照图标的用途将这分为两这么些接近:「效用型图标」和「显示类型图标」。

2.1 效用型图标

相似的话,凡是 UI
界面中,用户可以点击的图标均只是看成是效能型图标,该类图标往往代表有平效果要有平链接的跳转。这看似图标的第一名以场景就是是
iOS 系统受的最底层标签栏,以及 Material Design 中侧滑菜单选项之左边。

少数列表或卡片内的图标为属效率型图标,但就类似图标往往代表一个效,而根标签栏图标往往意味着一个页面或板块。

2.2 展现类型图标

对待效能型图标,显示类型图标更加富有「设计感」,是殊的、有内涵之跟具有辨识度的。

诚如的话,显示类型图标首假诺应用程序的开行图标。该类图标代表了一如既往缓慢产品之性能、气质和品牌形象等,也是用户率先看到底始末,设计时应尽量让用户记住并感觉心旷神怡。

此类图标在 iOS 系统面临除去出现于 App Store
里,还起于用户下载后的桌面上,以及 Spotlight 的搜结果和安装等地方。

3. 图标风格

图标的设计风格有众多种,例如:线性图标、面性图标、线面结合图标、扁平图标、轻拟物图标、拟物图标、手绘型图标等,我本着中大的几乎种作下简要的牵线。

3.1 线性图标

线性图标是由直线、曲线、点当要素组合而成的图标样式。该类图标轻巧简练,具有自然的想象空间,且非汇合对界面暴发最怪的视觉烦扰。

3.2 面性图标

面性图标能够简单领悟为对线性图标的填写,但面性比线性更加稳健与朴实,对色彩的传言也清晰明朗。

3.3 线面结合图标

线面结合图标典型代表是「MBE风格」图标,其设计特征是以了粗描边线和偏移的填充充面相结合,灵动如家喻户晓。粗线条从至对镜头的绝对划分,显示内容、表现清晰。

3.4 扁平图标

扁平图标去丢了透视、纹理、渐变齐会做出 3D
效果的元素,让信息本身作为着力被呈现出,并且于计划因素上强调抽象、极简、符号化。

3.5 轻拟物图标

轻拟物图标没有拟物图标那么写实,也无像扁平图标那么“平”,而是采用淡淡的渐变和部分光影来达到两者之间的平衡,识别性高而休失美感。


要素四:图片

图于 Web 和 App
界面设计中是分外常见的,图片的质量及表现格局还汇合影响着用户指向成品之感官体验。

1. 图形比例

今非昔比比例的图所传递的第一音信各不相同,我们要组合产品的特色,并基于不同的景来摘取适用的图片比例举行统筹。

1.1 1比1

1:1
凡于宽泛的图片设计比例,相同的增长宽以构图展现得简单,优异了关键性的存在感,常用来产品、头如、特写等突显场景。

1.2 4比3

4:3
的图比例要图像更困难凑,更易于构图,便于举办规划,也是常用图片比例有。

1.3 16比9

16:9
底图比例可展现电影观影般的效果,是诸多视频播放软件常用之尺寸,能拉动被用户同样种植视野开阔的经验。

1.4 16比10

16:10
的图片比例最相仿黄金比,而黄金分割具有从严的比例性、艺术性、和谐性,蕴藏在长的美学价值,被看是艺术设计中很是特出的百分比。

2. 图片排版

图的排版类型有广大栽,根据不同的景观以及所用传递的主心骨音讯来挑选和的符的变现情势,以下是广阔的几乎种植排版类型。

2.1 满版型

满版型是因图片作为主心骨或背景铺满所有画面,常搭配文字音信要 icon
修饰,视觉传达直观而强烈,给人大方、舒展的感觉。

2.2 通栏型

通栏型是恃图片与共同体页面的大幅度相同,而低度也那么些几私分之一竟是还小的同等栽图片展现格局,最普遍的便是轮播图(Banner)。通栏型图片宽阔大气,可以中地强调与出示重大的货物、活动十分营业内容。

2.3 并置型

并置型是以不同的图纸发大小同等而地方不同的再一次排列,可以是反正依然左右排列,能于原本复杂喧闹的版面带来秩序、安静、调和及节奏感。

2.4 九禁格型

九宫格型是用四长条线把镜头上下左右分开成九单稍片,可以把 1 个或 2
只小片当一个单位填写图像,这种构图让丁小心、规范、有序的感觉。

2.5 瀑布流型

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


要素五:空间

1. 栅格系统

1.1 栅格系统简介

栅格系统英文为「Grid
systems」,是一样栽平面设计的法门以及作风,运用固定的格子设计版面空间布局,其作风工整简洁,在世界第二次大战后大受欢迎,已变成前些天出版物设计的主流风格有。

今昔栅格系统也曾经让选取到网页设计受到,它因为规则之网格阵列来指导与标准网页中的空间布局。栅格系统的采取,可以为网页的信息显示更加漂亮、易读、严酷与千篇一律,同时也重新有着可用性。

1.2 「8像素」栅格规则

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

胡用 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. 留白

对于片相当的页面,例如带页、闪屏页、减价页等,可以不用严苛遵照栅格系统开展统筹,但需专注空间留白的行使。

2.1 留白四属性
  • 层次感
    留白可以使页面的层次感得到大的增进,留白越老,模块、信息里的层次感越清晰。

  • 焦点
    元素越多,人之视觉注意力更爱散开;相反元素越少(即留白越老),注意力则会再一次有效地聚焦在重大之情节达。

  • 韵味
    留白有“此时无物胜有物”的感觉,犹如中国之壁画。留白运用于页面设计中,韵味也会油但是生。

  • 呼吸
    留白的呼吸属性可以想象成周围的空气,当空气被之颗粒物(元素)特别多时,人之透气也会觉得无通透;相反留白越多时,呼吸感越顺畅。

2.2 留白表现格局
  • 轻轻留白
    轻度留白是大家常见的页面留白设计款式,在传递出优雅、高端、文艺等气质的又,又会以音信表现得清清楚楚直接,让页面更加简洁与实用。轻度留白融合了重度留白的优势,但非为品牌性之震慑,几乎任何产品仍可以用这种表现形式。

  • 重度留白
    重度留白是管重心裁减分外致致,其传递出底雅致、空灵、高端气质是非凡强之,但又,其他的性能为接近为零星。“无印良品”品牌倡导简约、质朴的生方法,原研哉赋予其计划意见就是是“空”。所以,重度留白传递的未是活,而是概念、气质与态势。


小结

1. 色彩

色相、明度、饱和度是色彩的老三单特性,不同之色彩具有不同之思维寓意,选色时得考虑产品之调性和受众人群;色环上相差(角度)越大的颜料相比效果更加强,反之比较效果尤其弱,设计时承诺接纳合适的色彩配搭。

2. 字体

金鼎文、石籀文等是常用之粤语字体,而衬线体和管衬线体是常用之西文字体;不同平台的界面设计会发生两样的书接纳正式;另外,设计时用小心字号、字重以及行间距的安,以达成最佳的读体验。

3. 图标

图标可以助音讯文字的传达,也得以对界面起及修饰效用;效率型和展示型是图标的点滴卓殊色;不同风格的图标传递出不同的视觉语言,依据气象的要展开适量的选用,并保持风格的一致性。

4. 图片

不等比例之图所传递的重要信息各不相同,设计时欲整合产品之风味,并因不同的求来选合适的图纸比例;图片的排版类型有成千上万栽,按照不同之情景和所需要传递的基本点音信来摘取与之切的表现形式。

5. 空间

使用栅格系统,可以被界面的信息显示更雅观、易读和规范,设计时得以「8像素」栅格规则来率领元素尺寸及距离的制定;层次感、要旨、韵味、呼吸是留白的季单特性,留白的表现格局需做品牌之习性来挑选。

末段附上一段子正能量语录:

于此外领域,要是想只要所有得,都亟待跨越极限的上,都需要孜孜以求的追,都需殚精竭虑的思想,都要多多蹩脚破产与成功的实践。没有人可抢先学习、思考与施行成为一个审的高手。

感谢你的开卷。