在B端设计中，数据可视化是必不可少而且非常重要，越来越多的设计师需要和数据打交道，但是很多设计师不懂可视化当中不同用途的图表规范，只是单纯设计出好看的数据图表，却不能给用户带来更多的信息和价值。
因此掌握数据可视化能力是设计师必不可少的一个技能，然而目前国内互联网对于数据的教学不够全面，这让很多B端的设计师很苦恼，所以今天我结合自己的工作经验和大家分享一下--“数据可视化之图表设计”，为大家梳理一套完整的数据可视化的框架，以及关于可视化设计的基本准则和规范。帮助大家理解什么样的数据对应什么样的图标，了解颜色的意义，知道数据排版的要点。
将不可见的数据转化为可见的图形和符号，从中发现规律和特征，以获取更多的信息和价值。
在当前互联网的时代下，一页图可能对标一个庞大且复杂的数据表格，按照人类本身对图的记忆远大于对抽象文字的记忆，所以我们要学会让数据说话，数据可视化除了“简洁直观”，还可有容易理解和记忆、传递信息更丰富的特点。
接下来我们开始思考如何制作数据可视化图标？首先规范的流程是最好的前提，下面的工作流程结合我自己的经验和日常企业的数据分析场景，找到了一个合适的参考，我们就可以步步为营，避免很多不必要的返工，保证设计质量和项目进度。
很多小伙伴在做可视化图表设计过程中，肯定遇到过这样的困扰，发现自己做完的图标并未能准确表达自己的意图，也无法传达自己的意图，图表通常让用户看完困惑不已，主要问题出现在分析的维度没有找准或定义的比较混乱，面对B端庞大复杂的图标，同样的一个指标的数据，我们从不同维度分析就会出现不同结果。用一句古话来形容：横看成岭侧成峰。
国外专家Andrew Abela曾整理了一份图表类型选择指南图示（如下图），他把数据的关系分成了4种类型，帮助我们去选出合适的图表来呈现。
上图向大家展示了数据分析常用的4个维度，我们在选定数据指标后，我们需要和数据产品经理沟通我们核心需求，是我们想通过可视化向用户传递什么价值信息。上图引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题，我们在进行图表设计时首先进行需求的分析，熟悉数据并且明确数据要展现出来的信息，然后选用合适的图表来进行数据的展现。
联系：数据之间的相关性
分布：指标里的数据主要集中在什么范围、表现出怎样的规律
比较：数据之间存在何种差异、差异主要体现在哪些方面
构成：指标里的数据都由哪几部分组成、每部分占比如何
考虑到日常企业的数据分析场景，图中有些图表使用频率是非常低的。所以我参考了上图的部分内容，对其进行了总结，重新整合成三个维度
图表的作用，是帮助我们更好地看懂数据。选择什么图表，需要回答的首要问题是『我有什么数据，需要用图表做什么』，而不是 『图表长成什么样』 ，根据数据选用合适的图表展现来把数据的信息传达给用户。因此我们从数据出发、熟悉每种图表的定义、适用场景、优缺点，从功能角度对图表进行分类，这样才能快速选择合适的图表。
（1）柱状图
定义：柱状图是一种以长方形的长度为变量的统计图表。长条图用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。
特点：
1、这个分类不限于地区、品牌等，可以是一个时间周期；
2、数量控制在5-12条最佳；
使用建议：
（1）使用合适的宽度去适配柱条的宽度
当柱子太窄时，用户的视觉可能会集中在两个柱中间的负空间，而这里是不承载任何数据的。宽度推荐使用在1/2 柱宽到 1 柱宽之间，但也要视情况而定。
（2）不推荐采用全圆角
柱形图可以有适当的圆角，全圆角则有可能歪曲可视化图表的表达，用户可能无法明确是圆心还会顶点作为峰值。
（3）不要使用非水平和竖直的文字标注，也不要使用转行
有时坐标轴上的注释文字会很多，所以很多人为了妥协，在小空间内显示出所有的文字标注内容，而使用倾斜的文本，或者将文本转行处理。
不要用过于复杂的设计形式，数据可视化的第一要义是简单易懂，所以在遇到标签文字过长时，可以采用将柱状图转化为条形图
定义：条形图是用宽度相同的条形的高度或长短来表示数据多少的图形。条形图能够使人们一眼看出各个数据的大小，易于比较数据之间的差别。当条目较多，如大于12条，移动端上的柱状图会显得拥挤不堪，更适合使用条形图。
特点：
1、与柱状图类似，只是交换了X轴与Y轴位置；
2、多用于竖长的显示区域，例如手机端、大屏的一侧；
3、多用于top排行或分类名称较长的情况；
4、数量一般不超过30条，否则易带来视觉和记忆负担
使用建议：
（1）采用有序排列，轴标签右对齐
对多个数据系列排序时，如果不涉及到日期等特定数据，最好能符合一定的逻辑用直观的方式引导用户更好的查看数据。
可以通过升序或降序排布，例如按照数量从多到少来对数据进行排序，也可以按照字母顺序等来排布。总之，按照逻辑排序可以一定程度上引导人们更好地阅读数据。
（2）标签直接显示在柱体上
条形图还可以通过省略横轴和纵轴，并直接在柱子上表明数值，来降低数据墨水比，进一步提高信息的获取效率。
定义：用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。折线图分为直线折线图和曲线折线图。折线图可以清晰的反映数据是递增还是递减、增减的速率、增减的规律（周期性、螺旋性等）、峰值等特征。
特点：
1、横轴如果不是表示连续数值，折线图的意义不大
2、数量一般不少于3条，否则用柱状图更合适
使用建议：
（1）反映事物随时间或有序类别而变化的趋势
折线图看的是趋势，所有不是有序类别的不适合使用折线图
（2）视觉美化
折线图可以清晰的反映数据是递增还是递减，不能和面积图累计的概念混淆，由于折线图放在界面上的视觉重量很弱，所以我们可以通过添加微渐变加重视觉。
定义：面积图又叫区域图。它是在折线图的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充，颜色的填充可以更好的突出趋势信息，需要注意的是颜色要带有一定的透明度，透明度可以很好地帮助使用者观察不同序列之间的重叠关系，没有透明度的面积会导致不同序列之间相互遮盖，减少可以被观察到的信息。
使用建议：
（1）不要超过7个序列
当数据系列过多时，往往造成用户难以观察的痛苦，所以建议使用堆叠面积图时数据系列最好不要超过7个。
分组条形图属于条形图的一种，又叫簇状条形图，是一种以不同分组高度相同的长方形的宽度为变量的统计图表，每个分组中的柱子使用不同的颜色或者相同颜色不同透明的方式区别各个分类，各个分组之间需要保持间隔。
特点：
（1）适用场景
分组条形图适用于表达相同分类不同组别的数据，或者相同组别不同分类的数据，简而言之，就是根据一个相同变量的不同分组进行数据表达。
（2）不适用场景
分组条形图不适合用于表达分组过多的，数据量较大的数据，也不适合用于表达趋势类的数据。
定义：双向柱状图又叫正负条形图，是使用正向和反向的柱子显示类别之间的数值比较，其中分类轴表示需要对比的分类维度，连续轴代表相应的数值。
定义：一种圆形直方图，使用半径长短表示数值大小。可以在视觉上夸大数据之间的差异。
特点：
1、由于面积等于半径的平方，玫瑰图会将数值之间的差异放大
2、南丁格尔玫瑰图不能用于表示占比构成
3、数量：一般 不超过30条，否则易带来视觉和记忆负担
定义：雷达图又称为蜘蛛网图、网络图，蜘蛛图，星图，是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法，所有这些方面都可以类似地量化，常用于排名、评估、评论等数据的展示，比如我们玩王者荣耀中英雄的各项性能指标。
特点：
1、指标得分接近圆心，说明处于较差状态，应分析改进；指标得分接近外变现，说明处于理想状态
2、数量控制在5-8个最佳
定义：对比分类数据的数值大小以及是否达标
特点：
1、可以通过标记刻度区间，来进行更好的评估
2、数量控制在10个以内
定义：由多个梯形从上而下叠加而成。从上到下的项有逻辑上的顺序关系，梯形面积表示某个业务量与上一个环节之间的差异，通过漏斗各环节业务数据的比较，能够直观地发现和说明问题所在，为决策者提供一定的参考。
特点：
适用于业务流程比较规范、周期长、环节多的单流程单向分析，不适合表示无逻辑顺序的分类对比
使用建议：
（1）漏斗图不是表示各个分类的占比情况，而是展示数据变化的一个逻辑流程，如果数据是无逻辑顺序的占比比较，建议使用饼图更合适。
（2）可以根据数据选择使用对比色或同一种颜色的色调渐变，从最暗到最浅来依照漏斗的尺寸排列。切记，不要添加许多图层和颜色造成漏斗图难以阅读。
定义：用于表示不同分类的占比情况，通过弧度大小来对比各种分类，将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个圆弧所在的块表示该分类占总体的比例大小，所有圆弧所在的块组成的圆饼等于 100%，这样可以很好地帮助用户快速了解数据的占比分配。
特点：
1、可以通过标记刻度区间，来更好的评估
2、数量控制在10个以内
使用建议：
（1）饼图适合用来展示单一维度数据的占比，要求其数值中没有零或负值，并确保各分块占比总和为100%
（2）饼图不适合被用于数据的比较
定义：本质是将饼图中间区域挖空
特点：
（1）饼图的整体性太强，我们会将注意力更多集中在扇形的面积上，环图则可以很好地避免这个问题
（2）建议分类数量不超过9个
使用建议：
饼图更加集中面积，环图会集中在角度和弧长上，所以我们中间的空间利用率还可以更好的利用。
定义：旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。
特点：
1、旭日图=N张饼图
2、离远心越近，代表层级越高
3、下一层级的总和构成上一层级
4、可以无限向外扩展
定义：堆积面积图是一种特殊的面积图，可以用来比较在一个区间内的多个变量。如果有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。
特点：
1、适合表达总量和分量的构成情况
2、分类指标的纵轴起点，并不是从0开始，而是在上一个分类基础上叠加
使用建议：
1、图表有重叠的数据时，类别数量越多，重叠越多，因此可见度越低，所以不建议堆叠面积图中包含过多数据系列.
2、堆积面积图要展示部分和整体之间的关系，所以不能用于包含负值的数据的展示。
3、建议堆叠面积图中把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更好的展示效果。
定义：堆叠柱状图是柱状图的扩展，不同的是，柱状图的数据值为并行排列，堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比，因此非常适合处理部分与整体的关系。
特点：
1、二级分类并不是按照同一基准对齐的
使用建议：
大多数的堆叠柱状图都是垂直绘制的，但是如果你的数据标签特别长时，考虑更好地展示效果，可以选择使用水平堆叠的方式。
定义：通过显示正值（收入）和负值（支出）对总量的贡献来显示结果累积的过程，因为形似瀑布流水而被称之为瀑布图。瀑布图通过巧妙的设置，使图表中数据的排列形状（称为浮动列）看似瀑布悬空，从而反映数据在不同时期或受不同因素影响的程度及结果，还可以直观反映出数据的增减变化，在工作表中非常实用。
特点：
1、过程值为正的时候，向上加；
2、过程值为负的时候，向下减；
定义：特殊高亮的形式显示数据集中的区域和数据所在的地理区域的图示。使用地图作为背景，对数据的地理分布显示直观通过颜色深浅、气泡大小等容易判断度量的大小，将数据在不同地理位置上的分布通过颜色或者气泡映射在地图上。
特点：
1、结合散点：位置坐标更清晰
2、结合飞线图：表达起始点和目标点的链接或流向关系
使用建议：
（1）必须要有地理位置
（2）展现的通常是以某个地区为单位的汇总的连续信息
（3）当你用基于地图的热力图的时候，颜色梯度变化一定是有规律的，一定根据数值递增递减来变化的，否则在视觉上产生错误引导
定义：数据点在直角坐标系平面上的分布图，表示因变量随自变量而变化的大致趋势。
定义：气泡图是显示变量之间相关性的一种图表。与散点图类似。在直角坐标系中显示数据的两个变量（X和Y轴）之间的关系，数据显示为点的集合。与散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，在气泡图中，较大的气泡表示较大的值。可以通过气泡的位置分布和大小比例，来分析数据的规律。
特点：
有一定的数据量是展现三个变量之前的相关性，数据具有3个序列、特征及相关值。
举个栗子：
我们回归到线下场景，我们通常在逛生鲜超市类如盒马生鲜、沃尔玛等，会发现里面售卖的鸡蛋、生鲜类会比外面便宜很多，因为他们容易过期，属于成本极高的食品，通过限购来让他们引流，从而吸引更多的顾客来买那些成本低、单品收入高的商品。
最后给大家总结一下，首先我们拿到数据后先明确我们的使用目标，是让用户用最短的时间了解到数据带来的信息，结合每个图表的优缺点，选择合适的图表，从需求和目标出发，切忌盲目的增加和删减元素，图表的易用性大于它的美观度。
以上就是本篇文章的全部内容，数据可视化是一门庞大系统的科学，关于可视化相关的知识还有很多没有涉及到，例如可视化图表的构成、图表运用场景、数据可视化大屏等等，后续希望大家持续关注。
文章来源：tob.design 作者：佩奇一只居
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
元旦过后，新的一波工作又要开始了，我在开始准备新一轮汇报材料的时候突然想到了一个问题，不知道铁子们在往年参加设计评审的时候，有没有总被老板 diss 设计稿里“太空了” “不够饱满” 这些个问题呢？
我猜测应该 99%的铁子经历过，我也不例外，从校招进到第一家公司就开始被植入页面需要利用好每一像素的理念，搞得像北京房价一样寸土寸金，生怕被浪费了；思前想后为了大家不重蹈我的覆辙，所以新年的第一篇，咱一起来聊聊排版的问题：
如果你看过我过往的文章，也许会对我的排版多少有点印象，夸张的大字，极强的对比，还有一些微妙的层级关系。
坦诚的讲，我的风格揉杂了 2 种设计体系 —— 瑞士风格 / 拟物风格；
1. 瑞士风格
整洁、严谨、工整、理性化、实用的特征是瑞士平面设计的精神所在；这种一丝不苟，传达准确的风格，即所谓瑞士国际主义风格。简单的说，由于 Swiss Design 这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此，又被称为国际主义平面设计风格；
简单的说，瑞士的这种设计风格典型的代表就是我们看到的杂志，其中有 3 个特点：讲究网格 / 非常理智的克制颜色的使用 / 层级关系；有趣的是，审美和潮流是循环的，随着时代的发展，越来越多的 app 开始重新挖掘出来瑞士风格并加以使用，比如我们 iOS 系统自带的应用们，Spotify：
年少的时候，我经常看着这些个 app 会不禁的问，为什么在没有一张图片的情况下还能如此好看？这些年终于明白了前人良苦用心：文字是内容，同样也是构成；是信息，同样也是装饰；简单可以理解为，不管在平面还是网页亦或者是 UI 界面，在没有可用的装饰下，信息本身要承担起装饰和传达的双重功能，这就是瑞士风格的核心本质。
2. 拟物风格
iOS 是拟物的典型代表，网上对于这块的讲解已经过于饱和了，我也没必要赘述；那么这一趴，来聊聊对我产生深远影响的锤子科技吧。我第一次接触到 smartisan OS 并没有觉着多么惊艳，潜意识里只不过是觉着把 iOS 的图标画的更漂亮了一点而已…
但当我打开下图这个页面的时候，我意识到我对拟物的理解还是浅薄了，第一次被光影的层次震撼到：
通过光影塑造了一个三维空间，让整个画面丰富饱满，也打破了我幼稚的设计观，PS.不管锤子科技现在如何，我依然敬佩 Paco / 方迟 / 罗子雄的设计团队为这个行业做出的贡献，respect！
毫无保留的说，我的设计就是二者的融合，以 层次对比 作为核心理念。
啰嗦了半天，赶紧进入正题；如果你是一名产品体验设计师，一定听说过 “奥卡姆剃刀” ，这个定律通常用在交互链路的设计上（意思就是在用户路径中没必要的步骤，省了就完事了），“如无必要，勿增实体” 即简单有效原理；
同样，在嘈杂的视觉结构里，画面也需要奥卡姆剃刀，当你在对画面的饱和上困扰不已，并急于找到一些背景和纹理填充的时候，我建议你先冷静一下…因为页面的空虚未必是需要实体化的东西来填充的；上文有说过以 “层次对比” 作为核心理念出发，要区别于平面设计，营造一个立体空间，所以先理一下画面结构：
通常来讲，如果想要不平，把二维空间转化成三维空间是必要的一步，需要在 Z 轴上下功夫；如果你恰巧也是一名摄影爱好者，可以想象下照相机的焦距和景深，工作原理是相同的，需要 前景 / 主体和背景 三个层次；当然，虚实的对比对信息的呈现和层次的拉开是极其重要的，这里需要通过景深来控制效果，你可以通过 photoshop 滤镜-模糊画廊的“场景模糊”来做到：
另外，空间的感觉想要被突显，那么“光影和空气”的价值就可以无限放大了，按照如上所说的结构，把内容和自然物质摆进去就好了，甚至可以做到举一反三（比如不同颜色的氛围，我就不展开了）：
整个 case 下来，你会发现用光来聚焦在信息上，自然而然就形成了我们说所得 “信息优先级”；有点时候空气和光影的饱满程度超乎你的想象，这种自然存在的物质可以很好的帮助画面分层，以达到填充的效果，并不是一定要依赖于实体化的装饰。
对了，如果你跟我一样闲着没事干的话，借用 keynote 的动画效果做一个吊炸天的动效，一定可以成为汇报场上最靓的崽（注意：视频有音乐）！
keynote 素材和视频可在开头/文末下载
本来不打算再开一个章节说这个，但还是觉着很有必要再说下（我好纠结），作为 PPT 来讲，ta 的主要用途分为两种：其一是给人看的，其二是给人讲的；不管是哪种，尽可能的简化文字，是对输入者关爱；
以上图为例（实名 diss 自己的作品），坦诚的讲左边的部分大多数观者是不会有心思来看的，按照视觉系统的处理，这部分就会被当成一个“面”而被忽略掉，这种情况下右边显得有力很多，也能帮助观者聚焦信息，所以还是那句话，能不写的就别写，能少些的别多写，保持信息的密度也是设计师必要的职责之一。
想问一个问题，铁子们觉着 UI 的本质或者作用是什么？从我个人的角度来讲，UI 设计的本质就是对信息的整理归类和编排，没有什么比信息更重要，如果贸然为了饱满加入一些装饰元素，很有可能是本末倒置，得不偿失。这就像喝酒一样，喝醉很容易，但微醺的感觉才是最棒的，希望你能有个好心情迎接美好的一年～
文章来源：优设网 作者：负能量补给站
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在当今互联网快速发展的情况下，每个行业竞争都非常激烈，所以对于我们设计师而言，有时候项目的周期也非常紧迫，导致当我们接到需求时，很容易会遇到这样的问题：需求方解释不清楚，设计师不知道从何开始，对项目也是不了解，后面临时想到什么就问什么，使我们工作效率低下，也会让对方觉得你很不专业，做完的方案，需求方不满意，改了又改，浪费了很多宝贵的时间。
那么我们如何在项目周期紧迫的情况下，通过有效的沟通准确的输出运营设计方案呢？下面，我将和大家分享一些我在日常和需求方沟通的一些小技巧。
所谓有效的沟通，是通过听、说、读、写等载体，通过演讲、会见、对话、讨论、信件等方式将思维准确、恰当地表达出来，以促使对方更好的接受，使双方就某个问题可以达到共同认识的目的。
当接收到一个设计需求时，不要忙着动手开始做，要先去与需求方沟通清楚，如果少了前期的沟通，后期你可能会在无休止的改图中，一点点的不仅失去了耐心，还磨灭了激情！
首先了解项目背景、活动的文案和玩法以及活动的目标及用户人群。
根据活动的文案和玩法去网上搜索一些针对性的有启发性的图片案例作为参考，用来初探需求方的喜好，明确接下来该走的方向，最后达成对风格的整体认知。同时要整理好自己的设计思路。
随时记录
带着前期准备的内容去和需求方沟通，把自己的一些设计想法给对方讲清楚，这样做能保证我们在和需求方讨论的时候能做到心中有数，不会被牵着走！
与需求方沟通时随时记录在沟通中对方的想法，比如需求方想重点突出表现什么，想营造出什么样的氛围等。也可以记录在讨论中一些好的创意，再结合自己的思考运用到实际中。
「沟通过程中的 3 个小技巧」
先听：这一阶段很重要，一定要以求知的心态去了解需求，不要拿着一个自认为的结论去沟通，因为产品在提出需求时，也一定是经历过多次推翻自己的想法，最后才选择的这一版方案及玩法。
后问：这个时候有不明白或者没有理清的地方要及时的提问，问题要明确，避免后期重复沟通。
再复述：将接收到的信息总结后与对接人复述，查漏补缺，确认下没有出现任何的遗漏。
达成共识
前面的所有点都确定好了之后，这时候我们已经与需求方达成共识，就可以进行设计阶段了。
下面我将通过实际案例，具体说一下我是怎么通过有效的沟通与产品达成共识，从而减少多次改稿的问题的。
项目背景：
此次双 11 大促活动借助京东这一平台，增加品牌的曝光度，吸引用户下单，为业务线吸引更多的流量，促进转化率。
头图文案：
活动的玩法：通过预售提前付定金，享受折扣这样的活动方式来吸引用户。
针对的用户人群：用户群体年轻，女性占比较高，超过 80%的用户在 35 岁以下。
参考的搜集和对设计的想法
由对第一点的总结，得出设计目标：
参考图的搜集:
了解完项目的背景，和对项目进行初步的思考之后，就可以带着自己的想法和参考图去找需求方沟通。
随时记录
给需求方看参考图，他们对用 C4D 搭建场景的创意表示认同与支持，也很期待。
在讨论时也说出了他们的诉求（这时候要拿小本本记下，好记性不如烂笔头）：
达成共识
与需求方沟通完需求之后，心里有了方向和发力点，结合需求方的诉求和自己的思考，就可以胸有成竹的往下进行了。
这几个步骤虽然看似简单，但是做到了这几项，产出的设计稿可以减少改稿的次数！
最终设计结果：
把需求方说的每个点都着重考虑到，以免等完稿的时候再修改。
最后我们来回顾总结一下
不管项目大还是小，每次做完都要去做一个总结复盘，把遇到的问题记录下来，多思考是哪个环节出了问题，或者请教有经验的同事,逐步优化自己的沟通流程。养成良好的沟通技巧，这样对于在下一次接到新需求的时候不至于手忙脚乱，做到心中有数，这样会大大的提高自己的工作效率！
如何有效沟通是一个需要长期去总结思考的事情，只要掌握方式方法，再经过刻意练习，就一定会有好的结果。
文章来源：优设网 作者：58UXD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
完美，不是因为没有什么可以增加，而是没有什么可以减少。
创建美观、可用和的 UI 界面需要花费时间进行设计细节的打磨，本文从视觉和情感化设计两个方面来说说如何提升 UI 设计的高级感。
在互联网产品日趋成熟的今天，你会发现所有的 App 越来越像，似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重，使得设计不精致，产品没有气质和品牌感。一个 App 设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的 UI 设计。本节总结了 12 个简单直观的提升设计感的小细节，一起来学习。
在对 UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。如果可以的话，你甚至可以采用两到三种颜色：
类似的，在 UI 设计的时候，通常两种不同的字重足以营造出优秀的层次感：
大多数的文本采用正常的字重（400 到 500，具体取决于字体）
对于需要强调的文字采用较重的字重（600 到 700，具体取决于字体）
△ 主标题字重为600，其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于 400，因为这一部分字体本身尺寸已经较小，低于 400 会使得可读性不佳。如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理
不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。
但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：
一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。
△ 左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相的颜色
其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃。通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
选择一种基础色，再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
阴影是 UI 设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净，增加了画面的精致。如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。
阴影不一定是黑色的，还有一种扩散阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。在 UI 设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个 App 的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。通常，大多数 App 都是使用 iOS 规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了。要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。
3D 立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。
Tab 是 App 设计中最常见的控件之一，它源自 Material Design 的设计规范。现在很多 iOS 产品当中也开始使用这种导航栏样式来进行设计，而原本属于 iOS 规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab 和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态。因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。例如虾米音乐的 Tab 选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的 Tab 就被创造出来了。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为 Tab 选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到 Tab 的设计上，既让界面视觉，又进一步强化了用户对品牌形象的认知。
在 UI 设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力，让内容更聚焦。
使用不同的背景色来区分
通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。
增加额外的留白
创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是 UI 设计中的常用手法。
在 App 中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观。这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。虽然默认字体可以满足大多数 App 的设计需求。但会出现一个问题就是，系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微。例如在运动类 App 中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
大多数 App 都支持三方登陆，他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计。一个设计精致的 App 不应漏过任何的细节，我们可以以自家 App 的图标风格为依据，对第三方图标进行优化设计。
App 中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式，为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
图片的质量影响着整个 App 的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想。而低品质的图片会瞬间拉低 App 的质感。在 App 设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用。即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
现在的 UI 界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率。同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰，他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈，有时候仅仅一句文案、一幅插图、一个动画就能打动人心，使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面，这些简单而美好的设计细节充满了积极情绪，它是满足产品的功能性和易用性之后，追求更高层次的目标。
1. 提示性文字
语言是情感化设计最直接的利器，拟人化的对白相比冰冷的话语更能获得用户的好感，赋予产品的新的生命力。例如 App 那些 push 推送通知，因为用户每天收到的 PUSH 实在是太多了，早已心如止水！这个时候，你就需要一条成本低、效率高的 PUSH 文案，去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣，让人看到会心一笑。
2. 下拉刷新
下拉刷新是用户在 App 使用中经常进行的操作，常见的下拉刷新设计是图标加文字的形式，这种设计简单、直观，但毫无设计感，不能引发用户任何的情绪。
下拉刷新是一种临时状态，丰富它的设计细节不会造成与产品界面的格格不入，相反，一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如 uc 头条在下拉刷新时会蹦出一只奔跑的小鹿，暗示正在快马加鞭的加载新内容，小鹿形象延续了品牌 logo。作为资讯类产品，内容更新速度至关重要，奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感，瞬间就让下拉刷新变得生动有趣。
3. 头像设计
个人中心页与用户信息密切相关，用户的虚拟形象在这里得以展现，常见的设计是一个用户头像加登陆文字的形式，这种默认的头像设计无法得到用户的认同感。
现在很多的产品已经放弃了死板的默认头像，给用户更多的选择。赋予产品一些人格魅力，可以让产品富有生命力，消除人机界面的冰冷交互，帮助用户和产品建立友好的联系。例如美团外卖和躺平，它们各自的身份都代表了产品的气质和用户的属性，让用户产生一种身份的认同感。
4. 缺省页化解负面情绪
通常状态是，当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式，这种简陋的设计会给用户心理造成很大的落差，陷入负面情绪中。情感化设计在此时就可发挥巨大的作用，它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大，根据产品属性和品牌延展图形，结合动效或插画等情感化设计，可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景，让用户会心一笑，使产品充满了趣味性。
5. 标签栏微动效
情感化设计变得越来越丰富，图标设计上升至可以展示动画效果。通过动效的使用，标签栏切换变得不再死板。用户在频繁切换页面时，不再觉得单调。精心设计的动态效果，能够缓解用户等待时焦躁的心情，从心理上缩短用户等待时长，让品牌更加深入人心。
6. 模拟用户行为
如果一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化，播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。
情感化设计可以拉近用户与产品之间的距离，在更深的层面体现出对人性的关怀，为人们带去情感上的愉悦和感动。洞悉用户的行为，换位思考去满足用户的需求，情感交流就产生了。例如当你截屏了一张图片，打开微信对话框时就会自动显示这张图片，提前预知了你发截图的需求。
再例如很多观众都习惯了在电影结尾等彩蛋的习惯，因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时，你会发现影片详情页会有彩蛋提醒，告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息，就不必再为了不确定的彩蛋期待浪费时间啦。
7. 有趣的细节设计
俗话说：有趣的灵魂万里挑一，可见有趣是可以引发交流进而让人们产生积极的情绪。 在 UI 设计中，有些有趣的设计是隐形的，需要用户自己去发现，当用户找到这颗彩蛋时，就会获得一份喜悦和乐趣，增强用户对产品的探知欲。例如在电脑端打开 B 站的鬼畜区长按这个返回图标 10 秒左右，你会打开鬼畜区的新世界(⊙o⊙)（友情提示：记得戴上耳机或调小音量）其实长按「返回顶部」10秒后网页下方会出现一条黑框提示「尝试输入字母，发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕！
有些有趣的设计又是显性的，目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员，不仅可以尊享丰富的影视资源，还能让自己的 ID 在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕，让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性，一方面也丰富了弹幕区的多样化，可谓一举两得了。
总的来说：UI 设计的“高级感”意味着在视觉层面要从细微之处着手，创造出精致富有设计感的画面；另一方面要从情感化设计出发，使用户与产品产生情感上的共鸣，获得更高层次的使用体验。
好的学习方式就是把日常积累的知识点汇总并讲出来才能真正为自己所有，新的一年愿每位设计师都能继续保持对设计&生活的激情和热爱。希望这篇文章对你有所帮助。
文章来源：优设网 作者：印迹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为UI设计师，虽然现在做了很多项目，但是实际上每一次想要做好，过程都还是很痛苦的。尤其是前段时间，身心俱疲，时间、心情、精力都不在线。但恰恰接到的又是一个重头的急活，产品方也不清楚自己想要什么效果，所以一开始改版的心路很渺茫。
不过也由于这次的经历也让我更加明白设计方法的重要性，越是短时间内，越需要理性分析。在实际工作中，产品有时候因为项目急需上线，给我们的时间会非常有限，根本没有太多的时间去给你思考，就比如我这次，只有半天时间去思考设计。那么如此短的时间，如何提出有效的设计方案呢？
以这次为例，学习圈页面刚上线不久，当时也是设计了许多方案，都被pass了，如下：
产品方提出页面上方的发布按钮需要重新设计，那我就要搞清楚具体是谁提出的意见，为什么要重新设计，这样才不会让自己处于完全被动状态。
由于项目刚上线，数据库也因为某些原因还不能检测点击和转化量，无法得知哪种按钮点击量高。产品方也不清楚想要什么效果，需求方向不明确就着急去动手设计，那对于设计师来说无疑是效的，问明白需求后再通过竞品分析、产品体验、用户喜好等方式去突破。
所以接下来需要我们主动出击引导产品方，得出一些需求具体的方向。那怎么去引导？反向思维法，既然需要改动的是不确定的，那么我们可以确定那些不需要改动的地方——通过排除不需要改动的，来确定需要改动。
需要排除的是：整体页面排版布局、按钮设计方向（扁平、立体、简洁、卡通等方向）、动效方向、背景（颜色元素）。
通过沟通后明确的是：
在第一版时已经对相关竞品做了分析，基本是一个纯色背景上加一个具象化大按钮，发布功能使用加号、笔、照相机等元素来制作按钮，原则：按钮凸显，背景元素比较少。其实按钮如果用照相机这种结构复杂点的元素去设计会更有方向，但是我们左上角会有拍米币的功能，用相机会更直接一些，而加号笔画过于简单，可延展性不强，所以改版的话最终决定还是使用铅笔作为图标设计元素。
关于整体颜色方向，上一版颜色设计原理是背景用产品主色（蓝色）+白色按钮，不过产品方提出太过冷静，一开始我想用色肯定要跟整个app的主色相关呀，就跳不出蓝色背景的思维，后来决定先跳出来，配色思维反过来，背景不局限在主色，按钮及周边装饰元素可使用产品的主色。
时间紧急，当时想到的是常用的太空元素（有空间感、好延展、符合用户喜好），于是背景就选了蓝紫色（据研究，紫色也是小学生最喜欢的颜色，性别倾向相对偏弱，在色环上是蓝色的邻近色，协调又会有对比。）
在设计前，我先在心里大致分了两个设计方向：
以下便是常规大按钮设计稿：
非常规按钮设计稿
在尝试的这期间，对于有疑问的地方一定要跟需求方及时沟通，及时反馈，确保自己的设计在功能上没有遗漏。比如我这次，是通过询问一个产品经理，才得知，按钮上需要加文字，才在后面加上了。
大体方案出来后，通过优缺点分析对比，同产品方选出最适合的方案。
1. 常规按钮设计稿
优点：容易被用户所熟知，用户的学习成本低，更容易点击
缺点：对于小学生来说吸引力不够，形状上偏规矩，不够活泼，另外上方第一个元素稍微有一点抢主角的光环
2. 非常规按钮设计稿
优点：配合动效会更有吸引力一些
缺点：用户的学习成本比较高
通过对比，大家一致倾向非常规按钮，那就在气泡与星球这两者中选出最终方案。在APP的任务页面也有星球的按钮，用户已经对星球有了一定的点击感知，减少了学习成本，最终选择了星球。
优化方向：
1. 颜色调整
现在看着球跟背景区分不是很明显，整体偏灰，需要加强对比，球的颜色需要调亮调纯。我们看下色环：
90度以内的邻近色，搭配在一起和谐又不失活泼。所以可以尝试将球的颜色改为背景蓝紫色的邻近色：红色或者天蓝色，如图：
红色的球虽然跟背景拉开了对比，但是过于鲜艳，大家反应有点类似于心脏。
所以相对来说蓝色的球比较适合，也跟APP的主色相呼应。
2. 细节元素调整
球的环境色过于明显，需弱化一些；周边增加几个小球，四周边缘的球太抢，也需要弱化 ；文字“写一写”由常规字体改为大一点的手写字体：
3. 添加动效
鉴于上线版本的动效反馈说不明显，按钮点击感偏弱，所以这次动效优化点需要凸显星球本身。第一想到的就是呼吸效果，但是只有一个呼吸有点单一，周边可以添加一些社交鼓励的元素，如鲜花、笑脸、太阳，动效一开始想着是从球两边飞出来，但是经过对比就参考了直播送奖励的形式，相对来说辅助性稍微好一些，视觉上不会过于太抢主角，如下最终呈现结果：
如果有限时间内想要让需求方得到满意方案，所以以下两点我觉得是挺重要的：
好啦，文章写到这里，如果大家有更好地意见也欢迎留言
文章来源：优设网 作者：麦芽糖
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标在UI设计体系中，是重要......
（此处省略1000字）
直接上图！
上图是我以前绘制的一套图标作品，
感兴趣的话就一起来了解一下我平时是怎么创作一套图标的吧~
1、搜集+临摹+原创
积累素材是设计师必备的“基本功”，同时也是“职业病”。
平时我会有意识的在速写本上绘制一些简易的图标，如果在一些APP中看到比较好的图标，我也会临摹下来。
下面给大家随机展示一些我平时绘制的图标。
除了绘制图标以外，我平时也喜欢绘制一些其他的图案。
2、反复打磨
将绘制好的图标利用电脑矢量化后打印出来，根据打印稿用笔标记出不合理的地方，比如：线条太粗了，重心不稳.......对不合理的地方进行反复修改，再次打印，再修改，循环多次后直到得到自己满意的效果，最后定稿。
下面这幅手绘图就是文章一开始给大家展示的图标成品的手绘最终稿了。
需要强调的是，这一次图标的绘制，有一个特殊的地方，其中一个图标是有实物的。（左：实物图；右：对应图标）
3、图标插件化
最后，将图标上传阿里的iconfont网站，制作成字体图标。
然后将字体图标做成插件（我演示的是ps插件，也可以做成其它xd/sketch/figma插件）
制作过程就是给每个图标赋予关键字，然后利用正则表达式，可以方便的搜索所有图标。
不过这个步骤我就不详细解释了，因为
转自：站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
可以说，每个项目因合作方式，人员习惯，落地形式的不同，所形成的规范是有区别的。所以，设计规范更应该是针对项目来说的，除非是问你Android或iOS这种已经广泛适用的平台级规范。不然是很难有标准答案的，回答更应该是一种思路的描述，比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升。
Don't make me think。大家都知道，好用得产品都是尽可能的减少用户思考，不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时，你会熟悉的去左上角找返回操作，但如果把返回操作放在右上角就会很不习惯；再比如对国内用户来说，他们习惯正确按钮用绿色，错误按钮用红色，如果你非要反过来制造所谓的差异化，用户就会感到困惑，误操作的概率也可能会大量增加。
其实网上很多设计规范，原理之类的文章，源头都来自于这些大厂规范，想获得一手信息，最好是自己去这些网站多看看。
这也就是我为什么不写具体规范数值的原因，因为网上的资料实在是太多太详细了，写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己，需要更多的主动性，这样才能提升自己的学习能力和解决问题的能力。
2）针对自己要做的模块，有针对性的找市面上大厂的应用作为参考，直接截图标注，自己总结规律印象会更加深刻。
我开始做UI的时候就这样学习的，不知道字体该用多大，间距用多大，颜色怎么用，就直接去找相类似的界面截图参考，量它们的尺寸，吸它们的颜色，然后就这样一步步的把规范经验积累起来了。
比如从QQ的动态tab页面中，我们可以借鉴到很多信息，比如列表的高度，列表左侧的图标尺寸和圆角，间隔线高度和配色，右侧的箭头大小和配色，列表文字的字号和配色，用户头像大小和结合的样式，图标与文字的间距等等。这些借鉴并非是抄袭，要你做的跟这个界面一模一样，只是参考这里面的某几个属性然后结合自己的产品综合运用，减少出错。
发现了吗？一个优秀的界面设计，上面的任何信息其实都可以拿来参考，就看你会不会用了。
文章来源：彩云译设计 作者：彩云
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1. 圆角
不同的圆角，所带来的气质是不同的。圆角很小，视觉印象是硬朗，高冷，具有攻击性的，多用于严肃、高端、冲突感强烈的设计中；而更大的圆角给人的感觉是有亲和力，柔软，安全的，多用于儿童产品、娱乐性强的设计中。
在设计的时候，根据自己的产品属性选择气质相符的圆角设计很有必要。
△ 常见的卡片弧度形式有4类：直接、小圆角、大圆角、特殊圆角
我一般喜欢用4的倍数来设置圆角，比如圆角大小为4px、8px、12px之类的。要注意的是，圆角越大，可用面积会越小，需要根据实际场景进行平衡，以视觉上舒服为宜。
2. 比例
卡片的比例，我习惯遵循一些美感规律，比如黄金比例（1.618），白银比例（1.414），青铜比例（1.732），正方形之类的比例。当然，实际设计需求中的比例，还是要结合内容的多少具体分析。
我的经验是，当比较接近这些美感比例其中之一时，就直接优化到这个比例。比如做了一个卡片，宽高比是1.5，比较接近于黄金比例，我就干脆让它等于黄金比例。
3. 异型
除了正常的卡片样式，还可以做一些异型的卡片设计。异型卡片具有较强的形式感和视觉冲击力，所以会比较多的用在游戏或者运营相关的界面中，吸引用户的注意力。缺点是批量化设计成本略高且因为过于风格化而不够耐看。
1. 颜色
卡片的颜色搭配可以使用纯色和渐变色。这些颜色与文字之间的对比要符合界面对比度标准（ https://contrast-grid.eightshapes.com/，这个网站可以直接查到可用性数值，只要不是DNP就是可以用的配色），以免影响内容本身的阅读。如果拿不准的话，可以多用一些白色，比较不容易出错。
纯色卡片设计会让界面显得冷静高级，但对配色的要求相对较高，用不好的话会显得单调，沉闷。如果你坚持要用这种卡片配色的话，建议搭配一些图形纹理，会更容易把控，还能提升画面细节。
△ 纯色卡片设计
渐变色的卡片设计目前较为常见，层次细节更加丰富，画面也显得更活泼一些。
△ 渐变色卡片设计https://dribbble.com/shots/12284120-Wallet-Design-App
有些朋友经常因为配色不好而发愁，其实是需要多去找一些参考来看的，实在担心配色不好，直接去吸优秀的配色方案也是OK的，但要注意搭配合理。
教大家一个方法，去dribbble上搜color或直接打开 → https://dribbble.com/search/color这个链接，就可以看到非常多的优秀配色方案了。
2. 图案
卡片的设计还可以结合辅助图形，以图案的形式与卡片进行结合。这些辅助图形可以来源于品牌符号的延伸，让品牌有更多的露出机会。
也可以是运用一些简单的图形，提升卡片的设计细节，以下是一些还不错的设计案例。这些卡片上的图形都有借鉴参考的价值，自己平时有时间的话，也可以多做一些作为图形的储备。强烈建议收藏，真的可以很有用。
△ 来源：https://dribbble.com/shots/10513966-Gradient-Bank-cards
△ 来源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design
△ 来源：https://dribbble.com/shots/11313260-Finance-App-Exploration
△ 来源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD
这里彩云给大家找了非常多的卡片设计形式，可以从中参考学习配色和纹理造型。
3. 图片、视频
卡片背景也可以用图片和视频的形式进行设计，图片和视频的选择一般会偏暗色，以不影响内容阅读为准。
△ 来源：https://dribbble.com/shots/5717917-Travel-Article-Application
1. 文字
卡片上的文字不要太长，我的经验是横向不要超过42字（关于这个字数，有资料可以查，感兴趣的可以找找看），纵向不要超过5行。过多的文本不建议使用卡片形式。
其实这张卡片的设计中，我也用到了黄金比例来指导自己的设计，方便快速确定文字比例关系。
2. 间距（网格法）
卡片上的文字间距最好有一定的规律，这里可以按网格法来规划，比如8px网格，10px网格等等。网格的使用其实可以很灵活，比如我这里的卡片其实就用到了8px网格，各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理，这样做目的一方面是为了让界面有秩序，另一方面是提升决策效率。秩序产生美，而效率让你早点下班。
3. 减少线框
卡片中尽量减少线框，多用留白来进行内容划分。
4. 层次清晰
卡片中的内容层级要做好，标题和内容之间的差异要明显。这里的层次主要是通过对比拉开的，做好对比的关键就是对比效果要强烈，决不能模棱两可。
比如下图中左边的案例只是在文字的字号上有一定的对比，但字号间相差不大，效果不明显，就会让人第一时间不知道看哪。而右侧的案例则用了加粗，大字号，大留白等，让画面有了强烈的对比，从而产生更好的信息层级。
5. 内容出界
只在卡片的框框里做设计，有时候未免显得太呆板，破开卡片的边界可以让卡片本身更具形式感。如果被人说你的设计没啥亮点，那内容出界的设计就是一个很好的提升设计亮点的手法。
△ 彩云曾经做的一张banner就是运用了出界的手法
△ 来源：dribbble。界面上的天气图标也用了出界的手法，让画面显得更有亮点
1. 光感
卡片中的光感细节能提升设计的质感。下面这张图是我最近做的一张会员卡的背景设计，大家对比下，在卡片顶部加了1px高光线和斜面反光的细节前后的质感区别。
这个小细节，我经常会用到，执行简单又容易出效果。
2. 投影
投影的细节，不要过重，但又要能与背景分离开。有2个小技巧：
3. 3D效果
3D卡片的设计，因为不便于内容编排和阅读，所以带透视的卡片在实际UI中并不太常用。但在作品集包装和运营页面中，则可以带来比较好的视觉冲击力，可以尝试运用。
△ 图片来自：Cradle
以上就是今天彩云关于卡片设计的一些经验总结，卡片设计的应用已经如此广泛，我们有必要利用它来提升自己的界面设计细节。
转自：优设网
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
