界面视觉五要素
要素一：色彩
1.1色彩出概述-色彩三属性
色相(H)：即色彩的相貌、种类和名称，比如红、橙、黄、绿等颜色的种类就叫色相
饱和度(S)：即色彩的鲜艳程度，也称纯度
明度(B)：即色彩的明亮程度
人眼看到的任一彩光都是这三个属性的综合效果。
1.2色彩出概述-色彩寓意
同一色相的不同明度和不同饱和度，也会对人产生不用的心里感受。我在这里归纳整理了各种色彩在通常情况下代表的不同寓意。
红色：热情、喜庆、热烈、浪漫、危险
橙色：温暖、食物、友好、财富、警告
黄色：光辉、明亮、尊贵、权力
绿色：健康、自然、清新、希望、安全
青色：朝气、脱俗、真诚、清丽
蓝色：平静、纯洁、清凉、科技、沉稳
紫色：神秘、高贵、优雅、浪漫、妖娆
黑色：深沉、庄重、严肃、邪恶、死亡
白色：纯洁、神圣、干净、高雅、冷淡
灰色：平凡、随意、苍老、冷漠
2.1色彩搭配-同类色搭配
色环上相距0度的颜色为同类色，一般常用同一种色相的不同明度或不同饱和度的组合方式，例如蓝与浅蓝，红与粉红等。同类色彩搭配对比效果统一、清新、含蓄，但也容易产生单调、乏味的感受。
2.2色彩搭配-邻近色搭配
色环上相距30度左右的颜色为邻近色，例如紫与蓝紫，蓝紫与蓝等。邻近色搭配对比效果柔和、文静、和谐，但也容易感觉单调、模糊，需调节明度来加强效果
2.3色彩搭配-类似色搭配
色环上相距60度左右的颜色为类似色，例如橙与黄，黄橙与黄绿等。类似色搭配对比效果较丰富、活泼，同时又不失统一、和谐的感觉
2.4色彩搭配-中差色搭配
色环上相距90度左右的颜色为中差色，例如红与黄橙，蓝绿与黄等。中差色搭配对比效果明快、活泼、饱满、使人兴奋，同时不失调和之感
2.5色彩搭配-对比色搭配
色环上相距120度左右的颜色为对比色，例如红与黄，红紫与黄橙等。对比色搭配对比效果强烈、醒目、刺激、有力，但也容易造成视觉疲劳，一般需要采用多种调和手段来改善对比效果
2.6色彩搭配-互补色搭配
色环上相距180度左右的颜色为互补色，例如红与绿，黄与紫等。互补色搭配表现出一种力量、气势与活力，具有非常强烈的视觉冲击力
2.7色彩搭配-多色搭配
多色搭配顾名思义是由多种色彩组合而成的一种搭配方式，一般以不超过4种颜色为宜，规定一种作为主导色，其余作为辅助色使用。
多色搭配会让画面显得更加丰富、多彩，充满趣味性，但若控制不好，也容易让画面变花，失去平衡。搭配时须注意区分主次，按比例进行调和。
要素二：文字
1.1字体简介-衬线体
衬线体字体在画笔末端具有附加的修饰线条或者“韵脚”。衬线字体字母的横线较细、竖线较粗，如Times New Roman、Georgia 等字体属于衬线体。
衬线体具有复古传统的曲线美、个性鲜明、张力十足，通常用在时尚奢侈品牌、复古海报等设计领域中。
1.2字体简介-无衬线体
无衬线体顾名思义，就是指“没有衬线的字体”。衬线值得时字母结构笔画之外的修饰性线条，无衬线字体字母的竖线和横线粗细基本相同，向经典的Helvetica 和 Futula 等字体就属于无衬线体
无衬线体通常比较简约、具有年代感，适用于Web、App 等互联网科技领域的设计中
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 等
要素三：图标
1.1图标功能
图标是web和app设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效地识别，并且图标也有一定的装饰作用，可以提高界面设计的美观度。
2.1图标类型-功能性图标
一般来说，凡是UI界面中，用户可以点击的图标均可看成是功能性图标，该类图标往往代表某一功能或某一链接的跳转。这类图标的典型应用场景就是ios系统中的底部标签栏，以及Material Design 中侧滑菜单选项的左侧
某些列表或卡片内的图标也属于功能性图标，但这类图标往往代表一个功能，而底部标签栏图标往往代表一个页面或板块
2.2 图标类型-展示型图标
相比功能性图标，展示型图标更加具有【设计感】，是独特的、有内涵的以及具备辨识度。一般来说，展示型图标蛀牙是应用程序的启动图标。该类图标代表了一款产品的属性、气质以及品牌形象等，也是用户首先看到的内容，设计时应尽可能让用户记住并感到愉悦
该类图标在ios系统中除了出现在App Store 里，还出现在用户下载后的桌面上，以及 Spotlight 的搜索结果和设置等地方
3.1图标风格-线性图标
线性图标是由直线、曲线、点等元素组合而成的图标样式。该类图标轻巧简练，具有一定的想象空间，且不会对界面产生太大的视觉干扰
3.2图标风格-面型图标
面型图标可以简单理解为对线性图标的填充，但面性比线型更加稳重和扎实，对色彩的传达也清晰明显
3.3图标风格-线面结合图标
线面结合图标典型代表是【MBE风格】图标，其设计特点是采用了粗描边线和偏移的填充面相结合，灵动而鲜明。粗线条起到对画面的绝对分割，突显内容、表现清晰
3.4图标风格-偏平图标
偏平图标去掉了透明、纹理、渐变等能做出3D效果的元素，让信息本身作为核心被凸显出来，并且在设计元素上强调抽象、极简、符号化
3.5图标风格-轻拟物图标
轻拟物图标没有拟物图标那么写实，也不像偏平图标那么“平”，而是利用淡淡的渐变和一些光影来达到两者之间的平衡，识别性高又不失美感
要素四：图片
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.1图片排版-满版型
满版型是以图片作为主体或背景铺满整个画面，常搭配文字信息或icon修饰，视觉传达直观而强烈，给人大方、舒展的感觉
2.2图片排版-通栏型
通栏型是指图片与整体页面的宽度相同，而高度为其几分之一甚至更小的一种图片展示方式，最常见的就是轮播图。通栏型图片宽阔大气，可以有效的强调和展示重要的商品、活动等运营内容
2.3图片排版-并置型
并置型是将不同的图片作大小相同而位置不同的重负排版，可以是左右或上下排版，能给原本复杂喧闹的版面带来秩序、安静、调和与节奏感
2.4图片排版-九宫格型
九宫格型是用四条线把画面上下左右分割成九个小块，可以把1个或者2个小块作为一个单位填充图像，这种构图给人严谨、规范、有序的感觉
2.5图片排版-瀑布流型
瀑布流型的图片会在页面上呈现参差不起的多栏布局，降低了界面复杂度，节省了空间，使用户专注于浏览，去掉了繁琐的操作，体验更好
要素五：空间
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.1留白-留白四属性
层次感：留白可以使页面的层次感得到极大的增强，留白越大，模块、信息间的层次感越清晰。
焦点：元素越多，人的视觉注意力越容易分散；相反元素越少（即留白越大），注意力则会更有效地聚焦在重要的内容上。
韵味：留白具有“此时无物胜有物”的感觉，犹如中国的水墨画。留白运用于页面设计中，韵味也会出现。
呼吸：留白的呼吸属性可以想象成周围的空气，当空气中的颗粒物（元素）特别多时，人的呼吸也会觉得不通透；相反留白越多时，呼吸感越顺畅。
2.2留白-留白表现形式
轻度留白：轻度留白是我们常见的页面留白设计形式，在传递出雅致、高端、文艺等气质的同时，又能将信息表现得清晰直接，让页面更加简洁和实用。轻度留白融合了重度留白的优势，但不受品牌属性的影响，几乎任何产品都可以用这种表现形式。
重度留白：重度留白是把主体缩小到极致，其传递出的雅致、空灵、高端气质是最强的，但与此同时，其他的属性也近乎为零。“无印良品”品牌倡导简约、质朴的生活方式，原研哉赋予其设计理念就是“空”。所以，重度留白传递的不是产品，而是概念、气质和态度。
