UI页面视觉传达设计包括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 Roman，Georgia 等字体样式归属于衬线体。
衬线体具备复古时尚传统式的线条美，个性化独特，支撑力十足，一般用在时尚奢侈*牌，复古海报等设计方案行业中。
1.2 无衬线体
无衬线体说白了，是指“沒有衬线的字体样式”。衬线指的是英文字母构造字的笔画以外的装饰艺术线框，
衬线字体英文字母的横线和水平线大小基本一致，像經典的 Helvetica 和 Futula 等字体样式就归属于无衬线体。
无衬线体一般较为简洁，具备科技感，适用 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 系统软件中，常见手写字体有 苹方，思源黑体 ，华文细黑 等，英文字有 Helvetica，SanFrancisco 等。
值得一提的是：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清晰度」栅格数据标准来具体指导原素规格和间隔的制订;
质感.聚焦点.风韵.吸气是留白艺术的四个特性，留白艺术的表达形式需融合知名*牌的特性来挑选。
在一切行业，假如要想有一定的造就，都*须持续的不断学习提升，*须砥志研思的探寻，*须开拓创新，*须持续训练和实践活动。
