好久没有发文章了，今天顺叔和大家一起聊一聊卡片式设计，无论是WEB还是APP卡片式设计运用的比较多，很多UI设计师比较偏爱这样的表现，卡片式设计会给人一种视觉上的享受，也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解，不能因为卡片式设计而卡片式设计，要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家，之后的几篇系列文章中，顺叔会从界面中比较趋势的设计技法进行分析，希望能帮助到一些设计的小伙伴。
教程前的引言
卡片式设计这几年比较流行，同样这样的设计表达也是个趋势，应用在APP PC界面中至今还流行着，从事UI设计的都会知道卡片式设计，具有把内容整合模块化，从视觉，个性化体验上进行呈现，是设计师在设计时常用的一种表现，同样也具有独特的创新概念。
在一些项目中，一些客户会说这个设计的APP界面有点太白，没有层次感怎么办，那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法，卡片式设计，可以解决在画面中有个性化 、变化、 层次感的设计。那客户又问什么是卡片式设计呢？
一、什么是卡片
无处不在的卡片设计具有个性的美感和很好的易用性，是以文字标题，小标题， 图形或图片组成的模块化，以块状形式规整的整合内容，让内容更规整化，视觉上更个性化，也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势，而卡片在设计中也占用一定的优势，让整体更加的有层次感，在运用起来也比较方便，从视觉、体验、交互都具有不错的优点
设计效果图展示
顺叔为了这个文章特意设计了两个案例，通过这两个案例进行一些讲解。请见下图：
二、卡片设计优势
1.趋势
无论是大平台 还是小平台的产品都会运用这样的卡片式，跟风式设计趋势，也让卡片式设计成为了一个现在常用的优势，不过卡片式设计的确有很好的效果
2. 层次感
具有一定的层次感，能在页面版式中起到设计上的不同，个性化变化，页面层次感区分强烈，能更好的体现提炼出内容
3. 规整化
卡片式设计以图片、 图标 、LOGO、 标题、 整合到一起 以块状的形式在界面中展示，更规整的排版呈现。虽然内容多会导致页面乱，一个模块包含内容之后就会规整不少，也给页面设计上带来了更好的视觉
4. 视觉体验
卡片式给整个页面会增加视觉上的体验，特别那种大图片卡片式更具有视觉上的冲击力，背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、 产品需求 、功能进行设计。以达到最好的用户体验、视觉体验。
不要为了卡片设计而卡片设计。
5. 易用性
卡片式设计在易用性和灵活性上比较高，在响应式设计中同样应用的也比较多一些。能更好的有序排列。
6.简约设计
简约设计会更显得品质，不需要过多的进行装饰，哪怕就是一个白色的色块，上面点缀有色彩的图标和标题 副标的变化，也会觉得显得高大上，就算是一个带有颜色的色块卡片，也无须过多的设计 内容上的标题 、图标、 按钮就足以支撑起卡片
7. 交互效果
在卡片式的设计中会有一些动效交互，比如整体卡片放大、 缩小 、左滑、 右滑，可以整模块化滑动 缩放。整体效果增加了不错的视觉交互体验
三、卡片正确设计知识
一般在界面设计中卡片的存在的意义和表现手法都是什么样的呢，下面为大家举例了几种常用的正确的设计表达姿势。希望小伙伴在设计的同时有所灵感和参考，把一些表现手法加入到自己的设计中，适合才最重要。卡片式设计还是要根据整个风格和整个布局而进行展示，在做进一步的对比和布局中以最好的效果为最终展示方式，总结分析几个常见代表例子，如有不全请讨论补充，下面就是一些例子
1.卡片式形式一
以色块为主体并用现在比较流行的渐变色组成，其中四边为圆角，同样色块下边阴影衬托出主题，这个是在卡片中设计比较常见的运用手法，卡片的长高在设计中也是根据结构，内容功能而进行设定。正方形，长方形都是一个表现得手法，在色块上面标题文字，图标，图形是整个卡片的布局的形式，无非就是左右布局和上下布局
应用场景：卡包、天气、类别、入口、优惠劵，卡劵
此图片来自于网络
2. 卡片式形式二
这种形式共同点都是在头部C位出现的卡片式设计，其中承载着标题，副标题，以及图文版式，不难发现，如果图片有颜色，那么下面是白色底，这样在白底上面色块的出现还是比较简约凸显卡片，如果背景有颜色，卡片也有颜色那么卡片的凸显程度就不会那么强，图二很多在会员卡设计中常用的比较多，也比较简约，另外两个共同特点背景有颜色，一般底部背景颜色就是整个界面的主色调，背景有色块，上面就用白色卡片，卡片上方标题、 文字、 图片呈现。只不过排版的方式有所不同而已，在很多APP设计中，这样的表达也很多，通过主色调可以很融合的把上面的状态栏，导航栏融为一体视觉上统一性，底部背景颜色延续下来，上面凸显白色卡片，这样更具有视觉感和层次感。白色的卡片不需要过多的修饰，更能体现的上面的文字和图片。
应用场景：会员卡，滑动卡片，图文标题，入口
此图片来自于网络
3. 卡片式形式三
这种形式上图下文字，或者是上标题，下图片的形式，这种形式特别在图片素材的选择上尤为重要，有视觉效果好的图片通过剪切，处理，合成，摄影，插画等等方式，出现的图片质量上好的话可以带动整个设计的逼格，通过有效的图片传达，文字传达，让用户更清晰的了解。这样的形似一般在入口或者列表的形式出现的比较多，同样也能体现出整体化和视觉化
应用场景：滑动卡片，图文标题，入口，列表
此图片来自于网络
4. 卡片式形式四
大图卡片式，一般以摄影图片，插画形式，文字压与图片之上，这样的效果更具有冲击力，也能显得出比较潮流。体验也很不错，放大视觉，展示内容，图片相结合，让浏览者更愿意多看一会。表达的图片与文字内容相符，做到图文交融的程度。一般这样对于图片的选择上还是比较要求严格的。没有质量的图效果会降低。
应用场景：列表，说明，入口，天气
此图片来自于网络
5.卡片式形式五
列表卡片设计，这种形式一般白色的卡片，上面标题，头像，按钮，扁平插画形式体现，更多应用在一级页面的下方内容，以及二级页面的列表页或者集合页，整体弱化背景以白色为主，给予圆角及阴影承托出层次感同时，体现上面内容部分。每个模块的单元体具有统一的视觉。
应用场景：列表，集合页，入口
此图片来自于网络
6. 卡片式形式六
大卡片式设计，表现为一块特大的卡片式，上面会有标题，按钮等信息，同样表现出突出层次感，个性化设计的特质。体现出内容，一般背景有颜色上面卡片为白色，如下面背景为白色，那么卡片的形式也可色块，在对比上有个反差，才能突出卡片的作用性。
应用场景：提示，说明，优惠劵，劵，入口
此图片来自于网络
以上总结的几种卡片的形式，在设计中可以根据情况而设计，卡片多样化，布局多样化，适合自己产品的才最重要，虽然在界面设计中常用的设计，但不要盲目的为了卡片而卡片套用设计，这样起不到作用反而效果达不到理想程度。希望几个卡片形式总结能给大家带来一些灵感和启发。
同样在这些卡片中会有一些基本的共同的特点
共同的特点是
1. 四个角都是圆角
2. 根据潮流渐变色或白卡片
3. 色块下的阴影，色块下的阴影更能体现出层次
4. 卡片上面组成部分，标题，副标题，图形，按钮，图片，头像
5. 字体大小，字体颜色的变化
6. 一般卡片应用在会员，列表，说明，优惠劵，分类，类别，集合页，欢迎页等场景常见
三、卡片正确设计知识
为了讲解文章，顺叔临时构思一个产品原型，而快速进行了简单的设计，一个第一版，一个优化版，主要为了讲解一下这个卡片设计一些问题，
以下此图为构思的原型图
经过分析原型图之后开始进行设计，首先设计一个版本的，如果这样卡片布局设计，这样色彩搭配的情况下，会怎么样呢，整体设计用了蓝紫色为主色调，首先铺蓝紫色的色块作为背景，然后上面放白色卡片，以至于卡片上详细的内容，比如数字，图形 能更好的丰富支撑卡片。同样数据流也是比较重要的C位。也是比较重要的位置。接着根据原型图下面有两个卡片，通过扁平化设计，以色块为主设计一个蓝色，一个橙色的卡片，上面并有图标，头像，以及标题，两个颜色的对比，更让视觉有冲击力，整体看这个设计并没有什么，但有个问题在于单个模块拿出来效果的确都不错，但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉，当打开这个界面的时候视觉落点在彩色卡片上，那么这个整体设计上就出现了问题，上面的数据，白色卡片其实是比较重要的，而且整个画面都是卡片毫无设计上的变化，
那么只能在这个基础上在进行优化，其实大家在做设计的同时也这样，在考虑功能模块前提下，用户体验，也要考虑视觉体验，那么视觉从哪方面来，色彩、层次、版式等等方面。那么能不能在进行一下优化呢，其实还是有空间在进行优化。以下图为第一版
设计第一版
根据上面的设计在进行优化，同样保留白色卡片部分元素，在卡片与卡片之间放一些颜色的图标，这样更好的给功能上快捷入口，也能给卡片设计增添了变化。使得整个画面更灵活
虽然白色卡片，但有一些色彩的点缀，也让白色卡片活跃起来，把颜色的卡片改成白色卡片，从上到下的版式舒服多了，也没有那么跳。整个风格更简约，同时功能也更全面。
调整后
从原型图，在到设计第一版，在到优化调整之后，证明一点，卡片不要因为卡片而套设计，反而会失去效果，考虑功能模块，用户体验，视觉体验也一定让整体舒服。一直都说，绘画中需要有主有次，设计中也一定要有主，有次的进行设计。这样层级关系才能更清晰。
但这些条件一定是从，体验、色彩、布局、版式等方面进行对比和研究的。设计不要先着急做设计，前期的进行思考，逻辑清楚了，在进行设计的时候会更加的顺畅。卡片式设计，大家都在应用，希望这个文章能给大家带来一点点知识点，那就不枉费我在熬夜写这篇文章。
不为别的，只是一个喜欢分享的肉团子。这篇文章就写到这里，如果喜欢请给个赞吧。如内容有没说到的地方，各位可以进行补充，以上两个图你稀罕哪个呢？
随着当今越来越多的信息需要被展示、曝光，而移动设备的屏幕空间又有限，为了减少用户在使用应用时的跳转，减少用户的路径，设计师们开辟了第三个维度——即在 z 轴上展示叠加的分层动效进行交互表达，从二维到三维，这样更能有效利用手机屏幕上的有限空间，这也是以后界面设计的大趋势。
这个思维方式最早是在安卓的MATERIAL DESIGN语言上体现出来的。（以下简称MD）
Depth（深度）：
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.
在MD的设计规范中，用Depth来说明界面设计中的深度，既而在界面设计中引入了Z轴的设计思维，将界面设计由二维设计引进了三维设计思维的地带。MD通过抽象化纸片在物理世界中的形态，定义除了各种信息层级以及常用状态的表达方式。
再来看看，如今iOS的最新版本iOS 12，也已经开始向这一方向进行发展。最典型的要属以下的iOS的内置应用：股市、语音备忘录、地图、钱包、音乐、播客、App Store等。
三维设计法，在界面设计当中，主要分为两个方向来运用，视觉设计和交互设计。
人们通过双眼能够分辨出物体远近大小的形态，因此如果利用这样的视觉规律，便可以在画面中呈现出真实的效果，突出视觉的立体化。
因为使画面产生三维的模拟真实的效果，可以画面更具有吸引力，我们之所以能够看清楚物体，是因为有光的存在，现实生活的影子是因光而产生的，才是一个真实立体形。如果能恰当运用光影的效果，那将会让图形在进行三维空间转换时变得更加凸显。
当今，在界面的视觉设计方面，通过层叠、卡片化和投影的设计手法来对界面的内容进行处理，可以增加界面的层次感。在如今同质化严重的扁平化设计下，能给人焕然一新的感觉，同时也给人一种内容呼之欲出的感觉，加强了点击的欲望。这样的设计手法让界面的Z轴空间得以加强，必将是下一个新的趋势。
例如：KEEP、潮汐、虾米音乐
例如：Dribbble 和 Behance
图片来源于网络
而在交互设计方面，想同时展示多种内容时，假设对一个需求有着很强的曝光要求，或者是想让用户知道有这项内容的存在，但又不想让页面内容过长，导致被忽略或难以找到时，可以采用页面Z轴层级覆盖的表现形式。
采用了Z轴层级覆盖的架构形式，用户主要的交互操作变为上拉、下拉来阅读信息，减少了点击跳转这一类的操作，减少了用户的操作成本。且滑动手势，是以后人机交互发展中的一个必然趋势。
在一些APP中有所表现的有：豆瓣FM、豆瓣详情页等。（大家可以从这些APP上获取设计灵感）
豆瓣FM
豆瓣（电影详情页）
例如：
上图是京东（APP）的商品详情页，这时候我们接到的需求是将上图的文案放进这个界面中。
要知道在寸土寸金的APP界面中，每一个位置都是十分的宝贵，一但放置不佳，就会给用户的视觉流造成一定的影响，使得用户体验下降。况且，还是京东这样流量巨大的电商APP，位置便显得更加宝贵，而上图中的红色标记范围就是我们的限制区域，下面我们先来看一个不合理的做法。
上图我们是直接加了一个界面，将这个模块设定为可以进行跳转，从而达到显示完整（文案）的需求。
这样做，不仅增加了用户的路径，而且还会给来回切换的用户造成一定的困扰，消耗了手机的资源的同时，下面的留白也显得很浪费、空旷，视觉上就很不美观。
那么，京东是怎么做的呢？
京东采用了一个浮层设计（Z轴），将全跳转改为半跳转，这便是在界面设计中的Z轴运用，这样既可以达到文案所要求的曝光，也能最大利用让界面的空间，实现与原场景的完美衔接。
通过在 Z 轴上进行分层设计，模拟物理世界中人与物的真实的交互模式，帮助用户理解产品设计，将信息更好的浅层化，这样可以给设计师们带来更多发挥的空间。
在使用这个思维来做设计时，可以事先考虑以下几点：
根据用户使用体验，来判断是否需要使用Z轴分层交互。
这样做是否能帮助用户更好的理解你所做的设计？
空间感设计主要意义是能正确的引导用户，并建立起对产品的使用逻辑。
每一个界面层级只需要表现一件事。
当你想要在界面中加入一个菜单栏但发现没有空间？这时候可以考虑使用Z轴的设计。
谨慎使用Z轴层级交互，因为它会增加空间关系的复杂度。
多参考现实世界中的真实交互，它给你的预期和感受，在互联网设计中的很多灵感都来自于对真实世界的理解。
总结：
我们在做设计时，可以把当前的界面可以想象成一个的三维世界——分作X轴，Y轴，与Z轴，在这三个坐标轴上，可以进行思维上拓展。
在交互设计当中，减少跳转便是减少用户路径，就是使用各种方法在三维空间中，用x轴、y轴、z轴做出最合适、合理的用户体验设计。
前言
之前为大家分享过很多工作的案例，很多伙伴表示收获颇多，之所以分享工作案例是为了，给大家讲解设计思路，让大家明白，为什么这样设计，出于什么目的，要解决什么问题，这些正是UI设计的根本所在，掌握了设计思路就能应对各种问题。
接下来本期的分享，依旧会用真实案例解析从需求到设计的完整过程。
接需求与案例解析
我司的运营小姐姐@我要改个产品的UI，下午找我聊需求。
一、准备工作
提前了解产品，从视觉、交互上感受一遍，标记产品中有疑问的地方，这样大概对产品有个概念，为接下来的沟通做好铺垫。
二、了解业务
首先需要运营小姐姐讲解一下业务逻辑，了解产品涉及到的各种角色，产品使用场景等等，期间把疑问一一了解清楚，尽可能对业务、角色、使用场景有充分的了解。
通过沟通，了解到这个产品是一个H5问卷后台，业务上用来查看问卷统计的结果，使用的人群是公司的运营人员，产品时常会打包卖给客户，客户的使用场景不定，多数用户会用手机端查看统计结果。
三、沟通需求
接下来，沟通中我会先听她讲解需求，讲完后我会问她一些问题，确保我理解的正确。
需求沟通后，此产品问题为：界面太乱，很难用，需要改的好看舒服好用。
这时候就要想到她是不是用了其他体验好的产品，如果是的话，这个产品可能是重要的设计参考，然而了解后并不是因为用了其他产品，是一直以来就不好用，没时间改而已。
接下来的需求沟通就要落实到页面中，需要一起探讨产品，不明白的地方要了解清楚，从中总结优化的地方。
下面开始案例分享：
第一个页面改版
上图为“统计问卷”首页，A、B、C处为页面中较为突出的点，其中C处最为明显，沟通后得知C处图表的切换是为了截取图表做ppt，仅此而已，所以此处UI设计上需要弱化。
其实用户之所以觉得页面看起来不舒服，是因为想看的元素被弱化，而不该看的却过度设计，这样用户在看页面过程就会很费神，因为获取信息要躲开视觉上被过度设计的地方。
例如A处，用了页面中唯一的橘黄色，当初设计者应该是为了能强化区别上下题目的分界，但也成了突出的视觉干扰项。
其实分析后，页面中用户要看的是两个地方，一个是B处答题的比例数据，另一个是旁边的“小记”数据量，而B处进度条的设计过于突出，与文字没有良好的视觉比重。
结合以上问题进行改版：
解决A处问题
把每道题设计为卡片式，这样能很好的区别上下题的界线，题号从突出的橘黄色改为黑色，使得页面视觉上不那么跳跃。
解决B处问题
弱化变细进度条，与文字视觉比重相当，不会显得突兀，排版上下排列改为左右排列，这样能够缩减表格的高度，页面可以显示更多的内容。
解决C处问题
图表切换是个弱功能，使用频率较低，所以放到卡片的右上角弱化设计，用切换的方式展示。
不仅仅是以上的问题，排版的细节也会大大提升产品的质感。
旧版所有元素的排版间距几乎没有什么规律，这也是导致用户对产品有乱糟糟印象的原因。
改进后，用间距去表达元素之间的关系，间距设计常常会用到“黄金比例”或“五分原则”，黄金比例不必多说，五分原则就是相关的元素用周边0.5倍的距离表达亲密关系。
当设计好第一个页面后，需要先给到需求方评审，确认没问题后再继续，这样就尽可能保证了后面的设计是符合他们需要的。
上图只是个最终的结果，过程中做过一些小改动，最初发给需求方设计的页面，需要做简单的设计注解，这样才会更容易被理解，且具有说服力，最终确认没问题再继续其他页面的设计。
第二个页面改版
上图是给做问卷的人配置红包奖品的页面，看完后我表示心疼我们的运营人员。
A处本可以切换项目，但现在的设计显然是不可点击切换的状态。
B处是这个项目总金额统计，目前排版色彩杂乱且拥挤。
C处是给问卷配置红包奖品的各个属性信息，然而元素间没有层次，依旧杂乱拥挤。
D处按钮没有主次关系，排版拥挤。
E处是个“增加奖品”按钮，现在看起来没太大问题。
改版后页面延续了首页的卡片风格，保持一致性。
解决A处问题
“子入口切换”用户很难理解，因为不是确切词，例如换成“项目切换”“问卷切换”就很容易理解，当然也是可以去掉的，因为运营人员对每个项目都很熟悉，没必要注解。
解决B处问题
重新定义排版后，显而易见会比之前要清晰透气很多，动态变化的金额用颜色突出强调，未配置金额为次要信息，用灰色表示。
解决C处问题
改变排版样式，视觉上有主有次，“配置数量”跟“个数”为重复信息，只留一个即可。
解决D处问题
按钮“已启动点击禁用”拆分为“点击下线”按钮，和问卷状态（进行中），“展开”按钮放到最左边，和“编辑”并列。
解决E处问题
“新增奖品”按钮，如果增加配置奖品列表，就会把按钮挤到不可视区域，这样的设计不是特别推荐，所以设计成悬浮按钮，旧版本已经建立用户的按钮功能认知，悬浮按钮上面配加号图标，用户就会很容易理解。
第三个页面改版
上图还是第二个改版页面，此次要改版的是，点开“展开”按钮显示的属性，目前的问题是有很多重复的信息，例如时间，上面已经显示时间，最下面又出现同样的时间。
最严重的问题是，所有灰色字的注释，不符合逻辑，不应该在展开的属性下面提示，因为这已经是编辑好的内容，再去提示就意义不大了。
模拟一个场景，比如上图红圈的地方，已经设置好了奖品名称为“幸运红包”，展开后有个灰色字提示“用户中奖后，用于显示给用户看”，如果发现理解错了，然而在此页面是不可以改正的，所以灰色字应该在“新增奖品”的编辑中提示，用户在输入信息的场景下，提示才是最合理的。
页面改进后，去掉重复的属性信息，去掉灰色字的提示，（去掉这些内容是提前跟需求方探讨过的）最后用最少的空间展示了所有的信息，更清晰明了，其实展开后的卡片高度，完全也是可以考虑去掉“展开”“收起”的功能。
然后
第四个页面改版
当我看到这个页面时，不知道为什么要有A处的信息，所以再次请教需求方寻求答案，给我的答案是“子入口”“IP”是为了给开发人员提供便捷查询，例如这个中奖者存在刷红包行为，可以通过A处的信息进行查询。
很显然这并不合理，因为对用户来说没有用，还造成了认知负担，如果存在不良行为，提供编号信息就可以搞定了。
B处的设计，让页面没有条理，更是一个信息干扰项。
页面改进后，依然沿用首页卡片式的设计，去掉“子入口”“IP”“昵称”多余属性，去掉昵称是因为答问卷一般不会获取到用户昵称。
“中奖”和“未中奖”卡片，设计上有明显的视觉比重差异，去掉未中奖的绿色标示，只突出中奖者。
最后一个页面改版
上图是做问卷用户答案页，页面的弹窗偏小，使用起来很憋气，A处不知道什么意思，询问后可以直接去掉，B处是一个不合理的“确定”按钮，原因是用词错误，应该叫“关闭”更合适，因为这个页面是查看信息，并没有执行某些任务操作。
改进后加大弹窗，去掉页面中的多余元素颜色，上下题目用留白间距隔开，去掉“确定”大按钮，因为太占面积，改为右上角“关闭”按钮。
最后
当我们看到一个页面时，如果只看到美与丑，那是不客观的，这可能是对UI设计最大的误解，UI的美不只体现在表面上，还有内在的体验中。
UI设计一般都会带着一种目的进行设计，目的绝不只是设计的好看，更多的是创造一个良好的产品体验，同时能够助力业务，实现产品价值。
UI设计师对于业务要积极的去了解，对需求不要总被动接收，要有意识的去探讨挖掘，对业务的熟知，需求的准确拿捏，是你开始设计前最好的基石。
看了一位著名设计大师Aaron Gustafson关于UI设计的演讲报告，讨论和剖析了几个自适应界面，并演示了他们如何智能地变形以满足用户的需求。这里我有一些心得体会分享给大家。
当我开始我的职业生涯，我还是一个简单的网页设计师。我在网页设计工作了一年，从小型商业网站开始，最终转移到更大的客户。我发现对它并不感兴趣。我对分页模式，用户与表单交互的方式，以及感觉到的性能，比网页的视觉设计更感兴趣。我发现我爱上了交互，体验各种的性能。
当我看科幻电影时，我会看看界面。当我玩视频游戏时，我会观察菜单的布局方式。如果任何这些特质听起来很熟悉，你也可能有一颗UI设计师的心脏。
于是我退出我的之前的设计公司，开始了我自己感兴趣的项目与目标。在我的LinkedIn页面上，我试图总结我的新职业目标：创作出不仅具有视觉，交互，体验，还应更加智能，更加方便的大胆构想。自从我爱上了我现在这份工作以来已经有三年了，我并不是把它当作工作，而是把它当作我兴趣慢慢去培养，所以我的旅程并没有停止。我目前在一家创业公司，这里有我们共同的梦想与信念，我们想把东西做好，做全面，希望广大用户会喜欢，我每天逼着自己去思考，去学习，去看一些书籍资料，但是很多时候事与愿违！
在这篇文章中，我主要想描述一个UI设计师是什么样子：
这些工作是什么构成的？
哪里是最好的学习资源？
你如何在你的技艺得上展现更好？
UI设计的工作
我会将用户界面设计的工作分为四类。与客户沟通，研究，设计和原型，并与开发人员沟通。下面让我们更详细的去接触一下怎么去工作。
沟通
客户沟通是关于理解客户的问题。目标是掌握客户的业务。项目的开始通常包括很多的谈话。在工作开始时，不要太多地去了解客户的想法- 你可以设想可能的设计解决方案时，以全新的方式展现给她们看，然后接受需求，进行分析。
要成为一个好的UI设计师，你需要能够最终考虑你的客户的意愿。例如，您的客户可能在航空，为他们工作最终将使你对这个行业有很多认知。所以，你会感受到：不能明智的去选择你的工作行业，也就不会成为这行业的专家。我们需要对自己有足够的认知。
在项目期间，沟通不会停止。作为设计师，你将不断地展示你的工作。产品的诞生需要有火花的碰撞，所以我们迭代好，不断的进行沟通与讨论。
研究
与客户沟通，你会做很多研究。这可能包括实地研究，与客户的研讨会，分析竞争或定义一个策略 - 基本上，只是帮助你理解手头的问题。
研究是什么？研究可以告诉你的设计选择。这是你读过的文章，或者苹果刚刚发布的新东西。当你解释为什么做出一个特定的设计选择时，你的研究会帮助你。
研究可以非常广泛。我经常测试新的设备用于研究目的; 或注册新的网络应用程序以研究其用户界面。
设计和原型
作为设计师，你可能会花大部分时间做设计调整工作。UI设计项目可以以多种方式前进，从素描，详细设计到编码。
您使用的方法在很大程度上取决于项目的类型。你在设计什么？这是一个网站，还是应用程序，或者你宁愿称它为一个应用程序吗？它使用本地技术吗？是重新设计还是从头开始？
在我们公司没有固定的过程，但大多数项目遵循相同的粗略顺序：他们从草图和线框开始，继续详细的视觉和交互设计，并以一个原型结束。
作为设计师，我们花费了大量的时间来思考我们的工具。虽然强大的工具很重要，但它们不是最重要的事情。能够使用Adobe Creative Suite和像Sketch这样的应用程序是相当于能够使用铅笔绘画或刷子来绘画。
话虽如此，对工具的浓厚兴趣是一件好事。我也喜欢尝试新的设计工具，可以帮助我更有效率的完成工作。我最喜欢的矢量编辑工具是Illustrator，但我的大部分视觉设计工作是在这些天在PS上完成的。其他团队成员已经切换到较新的工具，如Sketch,Affinity Designer,这些工具我们都需要了解，找到适合自己的就行。
工具是一个非常个人的选择。只要我们能轻松地一起工作，每个人都可以自由选择自己。为了使与客户的讨论，我们的设计更简单，我们使用Axure制作原型。对于更高级的原型，我们使用HTML和CSS。你需要的工具都取决于你想要做的工作。
开发者沟通
沟通设计有多种形式：详细规格，提供资产，一起审查设计。在每个实例中提供的意义很大程度上取决于项目是本机还是Web应用程序。
传统的方法是在屏幕设计旁边交付资源。屏幕设计可用于查看设计整体看起来是什么样子，而资产是即用型PNG和图标的SVG，因此开发人员不必处理图形编辑器。
在我们公司，我们是提供更多的支持者。我们使用组件样式指南来帮助保持我们设计的一致性。当我们处理一个web项目时，我们提供了详细的HTML和CSS集合，逐条记录，准备实施。我相信在软件开发的每个阶段都有设计眼光是实现我创建一流级软件目标的唯一途径。
Web与本机应用程序
然而，这些指南倾向于针对营销网站进行调整，并且其中的内容并不总是导致良好的用户界面决策。字体倾向于出于营销原因而选择，而不是为了易于理解。颜色可以是粗体和醒目的，它可以在广告活动中使用，但不会在您日常使用的应用中使用。这些指南必须解释。
有几个UI设计的网络指南。你可以认为网络是不同风格的熔炉。如果你做任何感觉更像一个应用程序而不是一个网站，你需要知道广泛使用的框架如Bootstrap和ZURB基金会。框架先打好，再开始确定事情应该如何去做，因为你不想重复做某一件事。
我比较喜欢使用Bootstrap。它为常见的UI元素（如按钮，数据表和模态）提供了合理的默认大小。
在网页设计中，您受网络技术能力的限制。它曾经是很难实现简单的视觉华丽像网站上的圆角。现在很多构想都可以做了 - 你现在可以自由绘制大量的阴影，过渡，动画甚至3D的用户界面。
作为设计师，在浏览器中控制流程和设计是更加现实的。我还没有看到许多UI设计师接管本地应用程序的UI编程，但是设计师做一个网络应用程序的HTML和CSS是一个常见的事情。如果你可以编写你自己的设计，你将有一项专业独特的技能在你的同行，也会增加你许多优势。但是对我来说，这也是唯一的方式，真正了解网络的工作原理。所以作为一名设计师，还是需要懂代码的。
Web约束
您很快就会发现，并非所有的浏览器都支持您学习的所有酷技巧，这是网页设计的现实。这是很好的遵循着名的原则，如渐进增强，你尽可能加载增强内容，但也想想如何内容降级。
最近，“切割芥末”已经变得流行。在BBC的网络团队的支持下，这包括区分“好”和“坏”浏览器，并为“坏”浏览器提供有限的体验。但是，它真的只适用于内容网站。
当涉及到类似应用程序的体验，许多人只限于支持一些领先的浏览器，使开发更容易。可悲的是，这让我们回到1996年的情况，你需要一个特定的浏览器来查看内容。
改善你的技能
那么，你如何跟上快速移动的网络行业的最新发展，并提高你的技能？让我们看看几种不同的方法提高你的技能...
平台知识
设计师的主要部分是平台知识。你应该知道各种操作系统，以及如何使用它们。作为设计师，我们倾向于使用Mac，但是很容易忘记，大多数人使用Windows框来完成他们的工作。
我觉得你只有真正理解的东西，如果你自己使用它。我喜欢使用我的Mac设计，但花费大量的时间赶上各种其他平台的演变。我有几个副本的Windows安装在我的Mac上作为虚拟机。我一直在忙于使用Microsoft的Insider程序测试Windows 10的新构建，以检查UI中的各种更改。
我也经常购买新硬件来测试它是如何工作的。我买了一个苹果手表只是为了测试的平台。然后我卖了它，因为我觉得它并不是必要的。
此外，web可以被视为其自己的操作系统。它不断发展，每周都会向每个浏览器供应商添加新功能。非常值得了解浏览器的技术方面，特别是关于CSS和图形能力。你需要知道SVG和WebGL是什么，以及如何使用Web动画API。
每个平台随着时间演变，作为一个用户界面设计师，它是你的任务，保持最新。毕竟，无论你在设计什么，都不是孤立生活，而是一个更大的软件生态系统的一部分。
回到基本
我们今天所处的困境与我们在20年前所挣扎的情况没有什么不同。书中有很多好的建议。尝试防御设计的网页由Jason Fried和马修Linderman和不要让我认为通过史蒂夫·克鲁格的初学者。
如果你不知道概念，如模态和可承受性，你需要读。你应该能够解释Fitts的定律是什么。格式塔的邻近法？这是UI设计的面包和黄油。
受游戏和电影的启发
作为UI设计师，我利用其他灵感来源来完成我的工作。我在游戏中找到很多灵感。一些游戏非常复杂，UI设计人员不得不解决与UI设计师在商业项目上工作相同的复杂界面问题。
游戏也可以表示趋势。在Colin McRae Rally的菜单中发现的极简主义让我想起了iOS7的方向。在某种程度上，现在时尚的UI动画设计出现在几年和几年前的游戏中。从skeuomorphism到裸，功能界面和“平面设计”的转变在游戏中也很明显。比较2006年的湮灭与2011年的天际。这两个游戏都是同一系列的RPG，但差异是惊人的。
Marvel电影中的未来派界面如钢铁侠也是我的灵感。他们不是完全可用的例子，但他们确实让我更多地关注计算作为一个整体。我们想要一个未来的屏幕，或者我们想让屏幕消失？这可能是一个很好的问题，在一个酒吧的设计师。
前言
近年来，「设计规范」逐渐被「设计体系」或「设计语言」的概念重塑。基于一套架构严谨、规则统一的体系框架，产品表现层面的设计工作可以逐渐实现模块化运作，从而让视觉设计工作变得更加高效。
「Design System 系列」将会从设计观、设计原则、设计形式三个方向入手，由深到浅、由整到分地演绎设计体系对整个产品迭代过程的价值和意义。有正确的设计观作判断好坏的标准，并结合行之有效的设计原则作指引，才能制定出最优的设计方案。
简介
Robin Williams 的四大基本设计原则相信大家都不陌生，尤其在平面设计领域内对它的应用更为广泛。在此基础上，我结合中后台产品的设计特点，将其缩写为「两对两性」原则，即：对齐、对比、亲密性、一致性。
每个优秀的设计中都会应用这些设计原则，并且各自是相互关联的，只应用某一个原则的情况很少。
作为设计体系的一部分，这套设计原则也为设计实践提供了理论依据。本章引用中后台产品设计中一些常见的案例，并以简洁凝练的语言，分析总结了这四个基本原则的实际应用方法和注意事项。
本章大纲如下：
一、对齐原则
任何元素都不能在页面上随意摆放，每一项都应该与页面上的另一项或多项存在某种视觉关联。即使对齐的元素空间上是相互分开的，但在水平或垂直位置上也会有一条“隐形的线”把它们连在一起。
在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
1. 左对齐
左对齐是将文本信息或视觉元素沿垂直方向向左对齐的一种对齐方式，左侧会有一条“隐形的线”，将彼此分离的文本或元素连在了一起。
文案类、列表类、表单类等排版会常用到左对齐的方式，这能让用户顺着视觉流的方向，快速高效地接收信息或填写表单内容。
2. 右对齐
右对齐与左对齐相反，右侧会有一条“隐形的线”，将文本信息或视觉元素连在一起。
在表格或表单中使用右对齐，可以实现快速对比数值大小，建议数值的格式保持统一。常规类数值可以统一使用千位符，如「1,024」；金额类数值可以保留小数点后两位，如「¥88.00」。
3. 居中对齐
居中对齐是第三种常见的对齐方式，中间会有一条“隐形的线”，将文本信息或视觉元素连在一起。
居中对齐会形成一种更正式、更稳重的外观。尽管这是一种合理的对齐方式，但边界是“软”的，“对齐线”的强度也较弱，所以会显得中规中矩。通常，首页的功能介绍文案以及数据、金融等类型的产品界面会使用这种对齐方式。
4. 两端对齐
两端对齐也称方形左右对齐，因为文本信息的左右两端均对齐。
通常在商品信息结算、带有辅助说明的列表等场景中会使用两端对齐的方式，不仅能让横向的文案更具关联性，易于用户接受信息，也能使排版显得更加工整和严谨。
二、对比原则
对比可以有效地增强页面的视觉效果，同时也有助于元素之间建立一种有组织的层级结构，让用户快速识别关键信息。
需要注意的是，要想实现有效的对比，就应当拉开元素之间的差异，差异越大，对比效果越明显。
1. 字体对比
字体对比包括：衬线体和无衬线体的对比，如 Georgia 和 PingFang；字重粗细的对比，如 Regular 和 Semibold；字号大小的对比，如 14px 与 20px；字体颜色的对比，如 #333 和 #999。
当界面或模块的标题字体大而粗、且颜色较深，正文字体小而细、且颜色较浅时，信息层级关系更明显，字体对比效果将更理想。
2. 颜色对比
颜色对比包括：色相对比，如 Red 和 Blue；饱和度对比，如 S100 和 S60；明度对比，如 B100 和 B60。
下图中的百分比堆叠面积图利用不同维度 (区域) 的色相对比，清晰的反应每个数值所占百分比随时间或类别变化的趋势，对于分析自变量是大数据、时变数据、有序数据时各个指标分量占比极为有用。
3. 大小对比
大小对比就是在同一画面里利用大小两种元素，以小衬大，或以大衬小，使主体得到突出。大小对比主要体现在面积或体积两种维度上的对比。
在下图的 Dialog 中，主体图片的面积相对于商品信息文字的面积得到最大化突出，主次更加分明，视觉冲击感也更加强烈。
4. 水平与垂直对比
水平与垂直对比，是指水平分布的视觉元素与垂直分布的视觉元素在横纵方向上的对比。
在排版上，水平与垂直对比可以打破单一呆板的排列方式，在保持对齐的基础上，丰富了界面元素的空间表现形式，减轻了用户的疲劳感和无味感。
三、亲密性原则
如果信息之间关联性越高，它们之间的距离就应该越接近，从而形成一个视觉单元；反之，则它们的距离就应该越远，从而形成多个视觉单元。
亲密性的根本目的是实现组织性，让用户对页面结构和信息层级一目了然。
1. 水平空间关系
为了自适应不同尺寸的屏幕，同时保持横向上控件的关联性，因而采用栅格布局的方式来组织摆放元素和控件，保证布局的灵活性。
同一控件内部的元素，横向间距上也会有“亲疏”之分，以体现组织性。
2. 垂直空间关系
在复杂的页面或模块设计中，纵向上需要使用高、中、低三种规格的间距来区分信息的层级关系。基于「元间距」8px，三种规格可以是 24px (高间距)、16px (中间距)、8px (低间距)。
注：纵向间距公式：y=8+8×n。其中 y 是纵向间距，8 是元间距，n≥0。
另外，增加「分割线」等视觉元素，也是有效划分页面结构和信息层级的常用手段。
四、一致性原则
可以把「一致性」理解为「复用」，相同的元素在整个界面中不断复用，复用元素可以是线框、颜色、控件、文本格式、空间间距、设计要素等等。
一致性的根本目的是统一元素，并增强视觉效果，降低用户的学习成本，帮助用户快速识别出这些元素之间的关联性。
1. 线框复用
同类信息的载体可以是相同粗细的线框、相同投影的卡片、或是相同颜色的底面，注意保持样式属性值的一致，以及上下左右间距的一致。
2. 颜色复用
在界面设计中，相同的功能提示、图表数据、文字层级、按钮、图标、分割线、背景等，应使用相同的颜色，保持色彩体系上的统一，避免同类型的元素使用不同颜色给用户造成认知困扰。
3. 控件复用
使用统一的导航、按钮、弹框、图表、选择器等控件，既可以提高设计者和开发者的工作效率，避免重复造轮子的现象出现，又可以保持界面设计的一致性，降低用户的理解成本，提高使用效率。
4. 格式复用
相同类型、维度或级别的文案，应使用相同的展现格式。注意标题、正文、辅助信息的层级关系，使用统一的对齐方式，让关联性高的信息之间形成一个视觉整体。
本章小结
1. 对齐
任何元素都不能在页面上随意摆放，每一项都应该与页面上的另一项或多项存在某种视觉关联。
2. 对比
对比可以有效地增强页面的视觉效果，建立一种有组织的层级结构，如果想让元素不同，那就让它们截然不同。
3. 亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近，从而形成一个视觉单元，这有助于组织信息，减少混乱。
4. 一致性
一致性的根本目的是统一元素，并增强视觉效果，降低用户的学习成本，帮助用户快速识别出这些元素之间的关联性。
好久没有发文章了，今天顺叔和大家一起聊一聊卡片式设计，无论是WEB还是APP卡片式设计运用的比较多，很多UI设计师比较偏爱这样的表现，卡片式设计会给人一种视觉上的享受，也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解，不能因为卡片式设计而卡片式设计，要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家，之后的几篇系列文章中，顺叔会从界面中比较趋势的设计技法进行分析，希望能帮助到一些设计的小伙伴。
教程前的引言
卡片式设计这几年比较流行，同样这样的设计表达也是个趋势，应用在APP PC界面中至今还流行着，从事UI设计的都会知道卡片式设计，具有把内容整合模块化，从视觉，个性化体验上进行呈现，是设计师在设计时常用的一种表现，同样也具有独特的创新概念。
在一些项目中，一些客户会说这个设计的APP界面有点太白，没有层次感怎么办，那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法，卡片式设计，可以解决在画面中有个性化 、变化、 层次感的设计。那客户又问什么是卡片式设计呢？
一、什么是卡片
无处不在的卡片设计具有个性的美感和很好的易用性，是以文字标题，小标题， 图形或图片组成的模块化，以块状形式规整的整合内容，让内容更规整化，视觉上更个性化，也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势，而卡片在设计中也占用一定的优势，让整体更加的有层次感，在运用起来也比较方便，从视觉、体验、交互都具有不错的优点
设计效果图展示
顺叔为了这个文章特意设计了两个案例，通过这两个案例进行一些讲解。请见下图：
二、卡片设计优势
1.趋势
无论是大平台 还是小平台的产品都会运用这样的卡片式，跟风式设计趋势，也让卡片式设计成为了一个现在常用的优势，不过卡片式设计的确有很好的效果
2. 层次感
具有一定的层次感，能在页面版式中起到设计上的不同，个性化变化，页面层次感区分强烈，能更好的体现提炼出内容
3. 规整化
卡片式设计以图片、 图标 、LOGO、 标题、 整合到一起 以块状的形式在界面中展示，更规整的排版呈现。虽然内容多会导致页面乱，一个模块包含内容之后就会规整不少，也给页面设计上带来了更好的视觉
4. 视觉体验
卡片式给整个页面会增加视觉上的体验，特别那种大图片卡片式更具有视觉上的冲击力，背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、 产品需求 、功能进行设计。以达到最好的用户体验、视觉体验。
不要为了卡片设计而卡片设计。
5. 易用性
卡片式设计在易用性和灵活性上比较高，在响应式设计中同样应用的也比较多一些。能更好的有序排列。
6.简约设计
简约设计会更显得品质，不需要过多的进行装饰，哪怕就是一个白色的色块，上面点缀有色彩的图标和标题 副标的变化，也会觉得显得高大上，就算是一个带有颜色的色块卡片，也无须过多的设计 内容上的标题 、图标、 按钮就足以支撑起卡片
7. 交互效果
在卡片式的设计中会有一些动效交互，比如整体卡片放大、 缩小 、左滑、 右滑，可以整模块化滑动 缩放。整体效果增加了不错的视觉交互体验
三、卡片正确设计知识
一般在界面设计中卡片的存在的意义和表现手法都是什么样的呢，下面为大家举例了几种常用的正确的设计表达姿势。希望小伙伴在设计的同时有所灵感和参考，把一些表现手法加入到自己的设计中，适合才最重要。卡片式设计还是要根据整个风格和整个布局而进行展示，在做进一步的对比和布局中以最好的效果为最终展示方式，总结分析几个常见代表例子，如有不全请讨论补充，下面就是一些例子
1.卡片式形式一
以色块为主体并用现在比较流行的渐变色组成，其中四边为圆角，同样色块下边阴影衬托出主题，这个是在卡片中设计比较常见的运用手法，卡片的长高在设计中也是根据结构，内容功能而进行设定。正方形，长方形都是一个表现得手法，在色块上面标题文字，图标，图形是整个卡片的布局的形式，无非就是左右布局和上下布局
应用场景：卡包、天气、类别、入口、优惠劵，卡劵
此图片来自于网络
2. 卡片式形式二
这种形式共同点都是在头部C位出现的卡片式设计，其中承载着标题，副标题，以及图文版式，不难发现，如果图片有颜色，那么下面是白色底，这样在白底上面色块的出现还是比较简约凸显卡片，如果背景有颜色，卡片也有颜色那么卡片的凸显程度就不会那么强，图二很多在会员卡设计中常用的比较多，也比较简约，另外两个共同特点背景有颜色，一般底部背景颜色就是整个界面的主色调，背景有色块，上面就用白色卡片，卡片上方标题、 文字、 图片呈现。只不过排版的方式有所不同而已，在很多APP设计中，这样的表达也很多，通过主色调可以很融合的把上面的状态栏，导航栏融为一体视觉上统一性，底部背景颜色延续下来，上面凸显白色卡片，这样更具有视觉感和层次感。白色的卡片不需要过多的修饰，更能体现的上面的文字和图片。
应用场景：会员卡，滑动卡片，图文标题，入口
此图片来自于网络
3. 卡片式形式三
这种形式上图下文字，或者是上标题，下图片的形式，这种形式特别在图片素材的选择上尤为重要，有视觉效果好的图片通过剪切，处理，合成，摄影，插画等等方式，出现的图片质量上好的话可以带动整个设计的逼格，通过有效的图片传达，文字传达，让用户更清晰的了解。这样的形似一般在入口或者列表的形式出现的比较多，同样也能体现出整体化和视觉化
应用场景：滑动卡片，图文标题，入口，列表
此图片来自于网络
4. 卡片式形式四
大图卡片式，一般以摄影图片，插画形式，文字压与图片之上，这样的效果更具有冲击力，也能显得出比较潮流。体验也很不错，放大视觉，展示内容，图片相结合，让浏览者更愿意多看一会。表达的图片与文字内容相符，做到图文交融的程度。一般这样对于图片的选择上还是比较要求严格的。没有质量的图效果会降低。
应用场景：列表，说明，入口，天气
此图片来自于网络
5.卡片式形式五
列表卡片设计，这种形式一般白色的卡片，上面标题，头像，按钮，扁平插画形式体现，更多应用在一级页面的下方内容，以及二级页面的列表页或者集合页，整体弱化背景以白色为主，给予圆角及阴影承托出层次感同时，体现上面内容部分。每个模块的单元体具有统一的视觉。
应用场景：列表，集合页，入口
此图片来自于网络
6. 卡片式形式六
大卡片式设计，表现为一块特大的卡片式，上面会有标题，按钮等信息，同样表现出突出层次感，个性化设计的特质。体现出内容，一般背景有颜色上面卡片为白色，如下面背景为白色，那么卡片的形式也可色块，在对比上有个反差，才能突出卡片的作用性。
应用场景：提示，说明，优惠劵，劵，入口
此图片来自于网络
以上总结的几种卡片的形式，在设计中可以根据情况而设计，卡片多样化，布局多样化，适合自己产品的才最重要，虽然在界面设计中常用的设计，但不要盲目的为了卡片而卡片套用设计，这样起不到作用反而效果达不到理想程度。希望几个卡片形式总结能给大家带来一些灵感和启发。
同样在这些卡片中会有一些基本的共同的特点
共同的特点是
1. 四个角都是圆角
2. 根据潮流渐变色或白卡片
3. 色块下的阴影，色块下的阴影更能体现出层次
4. 卡片上面组成部分，标题，副标题，图形，按钮，图片，头像
5. 字体大小，字体颜色的变化
6. 一般卡片应用在会员，列表，说明，优惠劵，分类，类别，集合页，欢迎页等场景常见
三、卡片正确设计知识
为了讲解文章，顺叔临时构思一个产品原型，而快速进行了简单的设计，一个第一版，一个优化版，主要为了讲解一下这个卡片设计一些问题，
以下此图为构思的原型图
经过分析原型图之后开始进行设计，首先设计一个版本的，如果这样卡片布局设计，这样色彩搭配的情况下，会怎么样呢，整体设计用了蓝紫色为主色调，首先铺蓝紫色的色块作为背景，然后上面放白色卡片，以至于卡片上详细的内容，比如数字，图形 能更好的丰富支撑卡片。同样数据流也是比较重要的C位。也是比较重要的位置。接着根据原型图下面有两个卡片，通过扁平化设计，以色块为主设计一个蓝色，一个橙色的卡片，上面并有图标，头像，以及标题，两个颜色的对比，更让视觉有冲击力，整体看这个设计并没有什么，但有个问题在于单个模块拿出来效果的确都不错，但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉，当打开这个界面的时候视觉落点在彩色卡片上，那么这个整体设计上就出现了问题，上面的数据，白色卡片其实是比较重要的，而且整个画面都是卡片毫无设计上的变化，
那么只能在这个基础上在进行优化，其实大家在做设计的同时也这样，在考虑功能模块前提下，用户体验，也要考虑视觉体验，那么视觉从哪方面来，色彩、层次、版式等等方面。那么能不能在进行一下优化呢，其实还是有空间在进行优化。以下图为第一版
设计第一版
根据上面的设计在进行优化，同样保留白色卡片部分元素，在卡片与卡片之间放一些颜色的图标，这样更好的给功能上快捷入口，也能给卡片设计增添了变化。使得整个画面更灵活
虽然白色卡片，但有一些色彩的点缀，也让白色卡片活跃起来，把颜色的卡片改成白色卡片，从上到下的版式舒服多了，也没有那么跳。整个风格更简约，同时功能也更全面。
调整后
从原型图，在到设计第一版，在到优化调整之后，证明一点，卡片不要因为卡片而套设计，反而会失去效果，考虑功能模块，用户体验，视觉体验也一定让整体舒服。一直都说，绘画中需要有主有次，设计中也一定要有主，有次的进行设计。这样层级关系才能更清晰。
但这些条件一定是从，体验、色彩、布局、版式等方面进行对比和研究的。设计不要先着急做设计，前期的进行思考，逻辑清楚了，在进行设计的时候会更加的顺畅。卡片式设计，大家都在应用，希望这个文章能给大家带来一点点知识点，那就不枉费我在熬夜写这篇文章。
不为别的，只是一个喜欢分享的肉团子。这篇文章就写到这里，如果喜欢请给个赞吧。如内容有没说到的地方，各位可以进行补充，以上两个图你稀罕哪个呢？
颜色是感知的问题。每种颜色代表不同的定义波长，但是我们每个人对颜色的感知都取决于我们的感知能力。此外，我们都有与颜色相关的不同文化或背景关联。
有很多很棒的文章和视频，介绍了色彩理论和色轮，还有许多用于生成调色板的工具。但是有时您会在实践中发现这些文章不太好用，颜色组合不完全匹配或所生成的调色板在您的项目环境中效果不佳。
所以你会怎么做？您如何开始思考和查看颜色，使它们更易于选择以及调整您的需求？
诸如互补和单色，饱和度和亮度之类的色彩理论术语并没有吸引他们。
因此，我开始以不同的方式分解色彩，方法是从绘画和室内设计等传统视觉和图形艺术中汲取灵感，并以对我们作为UI设计师所做的方式有意义的方式对其进行取景。
匹配调色板并平衡配色方案
也许您已经按照所有的色彩协调和颜色理论教程进行了准备，并生成了一个免费的调色板，但是您注意到这些颜色似乎不太匹配，也许它们看起来比较粗糙或不专业。
创建良好的配色方案就是与色调，阴影和温度匹配的平衡。要在设计应用程序中成功做到这一点，您需知道要拉动哪些杠杆。
色彩理论提供了一些公式，可用于启动调色板，这是理解调色板的重要基础。但是创建漂亮的调色板不仅与这些公式有关，还与平衡色调，阴影和温度有关。
这些是我们可以推拉的“杠杆”，可以为我们的UI设计实现更加平衡和独特的颜色组合。
因此，首先，回顾一下这些杠杆的作用。
色相是用于描述所见到的每种色调的通用术语。
饱和度指的是我们正在查看的特定颜色的主要颜色系列。白色，黑色和灰色通常被称为无彩色。
明度也指颜色的明暗程度。色调相同的颜色，明暗可能不同。例如，绛红色和粉红色都含有红色，但前者显暗，后者显亮。
色温-色温更多地是关于我们如何感知所看到的色相。并且我们倾向于将它们分为暖色和冷色。
暖色-通常是通过增加色调中的红色或黄色来获得的颜色。这些往往会唤起激情，舒适，活力和运动的感觉。他们使我们想起阳光和热量。
冷色-是增加蓝色和绿色的颜色。这些趋向于唤起，清新，冬天，静止，平静。他们使我们想起冰，雪和水。
色彩模型和色彩空间
要获得一些技术知识，您可能听说过3种不同的颜色模型，这将有助于我们更好地理解光和颜色的协同作用。
CMYK使用减法混色。它指的是光线反射物理白页的方式。颜色的重叠导致黑色。由于页面无法投射光线并向您发光，因此页面必须具有反射光。将这些颜色混合在一起就可以掩盖页面的白色，从而减少了可以反射的光量。
RGB称为光的加法混合。它指的是数字屏幕向我们投射光的方式。您在全亮度下的颜色会导致我们看到白色的重叠。有点像被明亮的泛光灯所蒙蔽。
HSB-代表色相，饱和度和明度
HSB颜色模型为我们提供了放射状的颜色，其中我们具有一定范围的色相，饱和度和明度值。
这就是我们的眼睛和大脑如何解释颜色HSB就是我们的眼睛所看到的一切，而与它是从屏幕还是在纸上投射的光线无关。
因此，出于为UI设计选择颜色的目的，我们将使用HSB颜色模型。
颜色属性
您经常会听到两种较大的颜色分组。暖色和冷色。
暖色通常被认为是主动色，这意味着它们会引起更多关注。
冷色通常被认为更被动且后退一些。
根据色彩的丰富程度和它们如何平衡，您可以使柔和的暖色充当被动元素，而更鲜艳的冷色则扮演主动角色。
现在，您了解了颜色如何在屏幕上显示以及如何设置我们的设计应用程序。让我们谈谈如何在我们的设计软件中使用和推动这些杠杆，并平衡我们的配色方案和调色板。
为了得出这些不同的颜色类别，我们将集中于推和拉色调，饱和度和亮度（HSB）的控制杆。
在数字屏幕上，我发现有一个公式和安全范围的饱和度和亮度，可以每次为每个类别创建一个完美的调色板。
为简化起见，我将主要颜色分为6种通常可以识别的主要颜色类别。这些反映了我们在日常生活中谈论颜色时通常倾向于指代颜色的方式：
1.宝石色调
S：83-73，B：76-56
这些颜色是饱和度很高的色调，以宝石命名，包括宝石蓝，宝石红，紫水晶紫色，柠檬黄和翠绿色。想一想红色宝石项链或皇家紫色的魅力。这些颜色富丽堂皇，深沉，并赋予豪华感。
2.粉彩
S：14-21，B：89-96
柔和的颜色属于浅色系。粉色，淡紫色和淡蓝色是常用的柔和色。这个家庭的颜色通常被描述为“舒缓”。我们通过降低饱和度和调整色彩来创建这些颜色。
3.大地色调
S：36-41，B：77-36
这些是自然界中常见的颜色。可以通过将纯色与白色，黑色或灰色相结合来创建它们。从广义上讲，这些是中性色。它们受到树木，森林，海洋和天空的色调的影响，被用以模仿自然色彩。我们通过增加饱和度和调整色调来创建大地色调。
4.中立
S：1-10，B：99-70
纯中性色包括黑色，白色，米色和所有灰色，而接近中性色则包括棕色，棕褐色和深色。这些是通过使色彩去饱和来创建的。它们可以与以上任何类别配对以创造平衡。我们通过降低饱和度并调整色调，色调和阴影来创建中性色。
5.荧光灯/霓虹灯
S：100-63，B：100-82
在物理世界中，这是由霓虹灯管或紫外线反应涂料的颜色创造的，但在数字世界中，我们可以通过将非常明亮和高度饱和的颜色应用于我们的设计来获得相同的效果。我们通过增加亮度和色调来创建它们。
6.阴影
S：0-0，B：0-100
两种主要的阴影是黑色和白色，其他阴影也包括不同程度的灰色。
UI颜色组合
最佳的用户界面设计结合使用一种颜色类别以及中性和阴影。
您实际上只需要这些类别中的1或2种颜色即可设计参与整个用户界面。
我们为什么不这样谈论颜色
作为数字设计师，我们倾向于避免给这些配色方案分类，因为术语似乎是为混合自然色彩的画家，印刷设计师和室内设计师保留的。但是从实际的角度来看，当我们仍在学习色彩理论并使我们的眼睛习惯于选择可以一起使用的色彩时，我发现以这种方式引用色彩在UI和数字屏幕设计中可以非常有用。
这不是一门精确的科学，但是您会看到如何以这种方式思考颜色并掌握一些杠杆和数字，以指导您帮助用户创建更令人愉悦和精致的调色板。
理解色彩理论的基础和原理很重要，特别是当涉及到实际应用时，它就显得尤为重要。引用不同的学科并找到对我们有用的类比可以带来很大的不同。
作为UI / UX设计师，最重要的是，无论您如何去实现，您都能够有效地使用颜色来传达信息并为用户创造最佳体验。
UI 设计，是用理性方法，来满足需求，并带来美学享受。
本篇探讨 UI 设计如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性吗。
UI 设计主要有四类理性：基本原则，基础知识，风格设定，风格把控。四类理性有一个共同核心：活学活用。
共有四个基本原则：对齐，对比，亲密，重复。
先说对齐。
秩序产生美。对齐作为一种基本秩序，主要事关整齐美观和阅读体验。
对齐一般分左对齐、右对齐和居中对齐。
从阅读体验角度来讲，左对齐通常胜过居中对齐，所以绝大部分文章和 UI 界面都是左对齐为主。
从美感角度来讲，居中对齐往往胜过左对齐，所以一些强调美感胜过强调阅读效率、篇幅不长、同时需要细品的诗或歌往往采用居中对齐。
从空间利用率角度来讲，右对齐往往是左对齐的一种补充。比如微信的发现页面，最重要的图标和文字左对齐，次要的右箭头和其它信息右对齐。
UI 设计追求阅读体验、美感和高空间利用率，所以这三种对齐方式大部分时候都会同时出现。整体而言，是以左对齐为主，居中对齐和右对齐为辅。
再说对比。
嘈嘈切切错杂弹，大珠小珠落玉盘。音乐讲究韵律和节奏，设计也追求错落有致的节奏感。这种节奏感，很大程度上靠对比实现。
好的对比可以带来视觉张力，就是抓人眼球的吸引力，同时也能起到主次分明和视觉引导的作用，最终带来良好的阅读体验。
一定程度上，对比是无处不在的。只要存在不同，就存在对比。比如大小之间的对比，不同颜色之间的对比，文字与图标/图片之间的对比，不同对齐方式之间的对比，等等。
一般而言，对比需要果断：若不同，就彻底不同。因为一般情况下，充分的对比能带来更好的视觉张力和更好的阅读体验。
第三说亲密。
设计就是分类，张小龙曾如是说。分类中最重要的原则是亲密，还有一个副产物是留白。
性质相同或相似的元素，我们会让它们看起来离的更近，关系更亲密。亲密成就分类，分类能化繁为简。
最后说下重复。
设计追求一致性，一致性主要靠重复来实现。被大量“重复”的元素，比如这篇文章里的字体大小和字体颜色，既保证了一致性，又提高了效率。
基础知识主要包括：手绘、颜色、版式设计、字体设计、品牌设计、动效设计、插画设计等专业知识。
UI 设计师可能不用画卡通人物或插画，但一定会画图标和 logo，这些也会用到手绘。作为造型基本功，需要掌握一定手绘技能。
颜色方面，最重要的是能够很好感受和理解颜色传达出来的感觉，也即颜色的“精神之美”，这块主要依赖审美和练习。
配色方面，推荐软件里的 HSB（色相、饱和度和亮度） 模式，这种模式很好理解，也方便调色。另外还强烈推荐从照片中吸取颜色，因为照片往往会和“生活”、“自然”有一定关联，“生活”和“自然”是非常重要的素材和灵感来源。从色卡中选择颜色也是一个不错的选择。
版式设计就像是选秀节目中练习生的舞台表演，考验的是唱跳、表情管理、舞台魅力、临场应变等综合实力。
“活学活用”环节，会结合例子分享版式设计。
字体设计、品牌设计、动效设计、插画设计等方面，个人经验不多，就不分享了。文末会附一份推荐书单，囊括基本原则和部分基础知识。
风格设定，即上篇提到的“精确描述”，是在动手设计之前，先探索出合适的风格，并把它精确描述出来。
好的开始是成功的一半。风格设定是一个开始，极其重要。如果风格设定只做到 60 分，稍微打点折扣的执行结果就是不及格。所以，如果要把设计做到 85 分，风格设定一般要做到 90 分。
风格设定犹如在茫茫大海中行船，首要目标是把握方向，核心诉求是精准。海上并无现成道路和导航可循，只能依靠繁琐而严谨的推理和计算。
风格设定的次要目标是划一个既清晰界定风格、又清晰指明“发挥范围”的“圆圈”，核心诉求是周密。因为需要清楚知道“圆圈”以内代表什么，“圆圈”以外代表什么。
在“精准”和“周密”上同时做到优良，风格设定才能做到优良。
既精准又周密的风格设定，通常无法一蹴而就：“风格设定”阶段一般只能做到七成，剩下三成需要在设计过程中继续探索和打磨。下一大段会结合案例分享具体方法。
风格把控有两层含义，一是实现当初设定的风格，二是在实现的基础上做到统一和规范。
只要严格在“圆圈”里发挥，实现当初设定的风格并不难。那做到统一和规范难吗？往难了说就是需要做大量琐碎工作：以联系的眼光看待所有设计元素，并把它们分类规整好，注意分类不宜过多，同时分类逻辑上不能出现明显问题。往简单了说就是大量复用已有的设计样式。
风格把控就是在划定的“发挥范围”内，利用设计知识和经验，以规范的方式实现规划好的风格。
活学活用作为四类理性的共同核心，最典型的应用场景是版式设计。
活学活用有两个要点：正反结合，风格第一。
所谓正反结合，是指设计知识既能正着用，也能反着用。最常见的例子是对齐原则，大部分时候是正着用，但如果想要营造活泼的感觉，也会反着用：故意打破对齐原则。
除了对齐原则，其它设计知识，比如重复原则，也可以反着用。
本文配图就是一个例子：图片左上角、右上角和右下角分别散布着装饰元素（横线、圆环）和 logo，在装饰元素的出现次数上，没有用重复原则。过年家里挂灯笼一般至少挂两个，同一装饰元素一般至少出现两次，以达到一种和谐和较为热闹的装饰效果。
我在装饰元素的出现次数上没有用重复原则，而在出现位置（相似位置）、元素大小（相似大小）和元素颜色（相似颜色）上用了重复原则，同样达到了和谐效果。之所以没在装饰元素的出现次数上用重复原则，是想放一个隐喻在这里。
所谓风格第一，是指设计风格永远第一，设计知识永远第二。知识服务风格，切不可重知识轻风格。
《倚天屠龙记》中，张三丰教张无忌练习太极剑时，要他忘记剑招，只记剑意。某种程度上，版式设计也要将“剑意”放在第一位，“剑招”服务“剑意”。
对比原则也有反着用的时候。有一条关于对比的知识：对比要果断，若不同，就彻底不同。这条知识能解释百事可乐 logo 里红色与蓝色的强烈对比，但解释不了山本耀司旗下大部分服装那千篇一律的黑色——单色，无对比。
设计最重要的是感染力，感染力主要来自个性、态度、价值观这些风格层面的东西，而非设计知识这些技法层面的东西。
当一个设计，技法高超而风格不足时，感染力和魅力就会不足，这也是设计师经常会犯的错误，大家需要注意。
可以简单分成三步：规划，成形，细化。下面结合微信 Redesign 这个案例来说明。
设定风格，用到的方法姑且称之为“红绿灯”法。“红绿灯”法借鉴并改良了我在网上看到的一种“红黄绿卡片法”（在红、黄、绿三种颜色的卡片上写下不同的设计关键词），并和“情绪板”法有相似之处：都包含关键词定位和图片参考两部分。
先说关键词定位，共有两步。
第一步类似头脑风暴，结合产品属性、用户属性、市场情况、个人喜好等因素，把能想到的设计关键词全部写下来。合适的不合适的都要写，只要想到了就写下来，确保有二三十个。如果关键词数量不够，这个步骤可以多重复几次，直到够了为止。这一步设计师和需求方都要参与进来，在提供关键词上双方是平等关系。
这个微信 Redesign 是个具有探索性质的小练习项目，基于微信 7.0，有两个目的：首先保留原有交互体验和品牌识别度，其次在视觉上更年轻、更流行。可以通俗理解成：一款微信“皮肤”，主要给年轻用户和赶新潮的中老年用户用。
结合产品属性（社交类、工具类、内容类）、用户属性（年轻用户为主）、市场情况、个人喜好这些因素，这一步想到的关键词如下图所示。
第二步是归类，就是把第一步产生的所有关键词归成“红黄绿”三类。如果关键词不够，还可以再补充。这一步依然是需求方和设计师共同参与，但需要设计师来主导。
红色关键词代表不能踩的红线：不能这样做；黄色关键词代表黄灯警告：这样做不太合适；绿色关键词代表畅通无阻：应该这样做。
需要注意的是，绿色关键词最好控制在 3-4 个之间，如果超过 4 个，就需要分成主绿关键词和次绿关键词，主绿关键词依然要控制在 3-4 个之间。这样做有两个考量，一是确保简单和重点突出，二是也更容易实现。
回到第一步的关键词上来。设计中当然可以用“拟人”、“隐喻”等手法，所以“拟人”这个关键词显得意义不大，故删去。“温润”和“亲和”，“老少皆宜”和“大众”在语义上都存在一定的重复，所以删去后者。删除这类不合适的关键词后，剩余关键词就按“红绿灯”法归类，归类后情况如下。
（微信 Redesign 之按“红绿灯”法归类后的设计关键词）
关键词定位已就绪，再来找参考图片。
可供参考的图片有两大类：照片和 UI 界面。UI 界面也有两类：线上作品（真实项目、练习作品等）和上线作品。
做 UI 设计，参考什么样的图片？个人建议，做什么类型的设计，就重点参考什么类型的图片。比如 UI 界面就重点参考 UI 界面，banner 就重点参考 banner。
UI 界面的设计，个人喜欢重点参考知名产品的上线作品。单从视觉角度来说，上线作品的质量可能比不过一些线上练习作品。但是已经上线的知名产品的 UI 设计，其风格的形成往往都会经过很多推敲，会有很多比较成熟的设计思路在里面。
参考别人的设计，最重要的是参考设计思路，其次才是参考表现形式。这种设计思路，有时候能从网上找到，但更多时候靠自己推测。
微信 Redesign，根据“很多年轻人在用，且风格比较流行”这条主线，找来了 QQ、抖音、B 站、小红书、陌陌、Soul、腾讯视频、爱奇艺等产品的截图。这些产品的截图，看完一圈后，就会面临一个问题：以图标为例，这几个产品的图标，风格各异，但基本都具备“年轻”和“流行”的特点，那应该参考哪一个？
这时就要求助关键词定位。除了“年轻”和“流行”，主绿关键词还有一个“轻微老少皆宜”。最符合“轻微老少皆宜”的是爱奇艺和腾讯视频：很多老人和小孩也会用这两个 App 看视频，网上公开的数据也能佐证这一点，所以它们的设计一定会照顾中老年用户的审美。
最后，出于个人偏好，我选择重点参考爱奇艺的图标风格，具体而言就是：深浅双色、较粗(1.5pt)描边、圆润风格。
红黄绿三色关键词及重点参考图片就绪后，就可以动手设计。
我一般会把界面设计粗略分成三大部分：版式风格、元素风格、元素大小，元素为图标、图片、按钮等，然后去一一实现。
先说版式风格。
用的主要绿色关键词是“更流行”和“更年轻”。“更流行”包括：更大字号的页面标题、尽可能用留白代替分割线和卡片的“无界”风格、圆形头像、更多留白更多舒适、等等。“更年轻”包括：更圆润的搜索框、输入框和图标、更年轻更具活力的配色、等等。
再说元素风格之图标风格。
图标主要参考爱奇艺 App：其一，底部导航和发现页的图标都是深浅双色加较粗的描边；其二，除了更圆润以外，部分图标还变 Q 了。
最后说元素大小。
以这个小项目为例，最主要的元素大小是图标大小和字体大小，它们会影响整个设计的感觉。通常情况，元素越小，给人感觉越精致、越高端，此其一；其二，可能是年轻人和老年人视力存在差别的原因，越小的元素往往代表年轻人的审美，反之则代表老年人的审美。
元素大小主要运用的绿色关键词是“轻微老少皆宜”。也就是说，需要在年轻人和中老年人的审美中找到一个平衡，所以元素大小基本直接参考了微信 7.0 的设计，个别地方做了微调。
最后，出来的效果如下图所示。
这份设计我发在了网上，部分网友留言说看着不够好，不太舒服，有一个表达的比较具体——“虽然用了大面积留白，却让人感到紧迫...”。
基于网友的留言，我仔细审视了这个设计，最后发现问题主要出在页面（发现页为例）左右两侧：留白过小。
当初之所以这么设计，是想通过页面左右两侧较少的留白制造一种内容将要撑破屏幕的感觉，从而营造一种活泼的感觉。注意，彼时“活泼”还没出现在“黄色”关键词里，上文两张关于关键词的图都省略了中间探索和优化的过程。
很多网友之所以没有感受到活泼而只是觉得不太舒服，至少有两个原因：第一，整个设计的基调是简约、清爽，有一定的年轻感和流行感，但没有太明显的活泼感，硬往里面某个地方塞“活泼感”并不和谐，大家也难以感受到；第二，单纯就“活泼感”而言，做的依然不到位，比如图标与右侧文字的留白，可以比图标与左侧边界的留白大，方能更好彰显活泼与活力。
考虑到“轻微老少皆宜”这个绿色关键词及微信主要是工具型和内容型产品，“活泼感”用在这里并不十分合适，于是放弃，并将“活泼”归为“黄色”关键词。此处留白的目的就回归其本职工作：整体和谐与舒服。于是就把留白相应调大了。
另外一个优化的点是“眼睛”的形状：微信图标、看一看图标、表情图标、朋友圈里将点赞和评论折叠起来的图标都有一双“眼睛”，这双“眼睛”起初是竖着的椭圆形，很萌，也比较低龄化。为了尽可能的“轻微老少皆宜”，这里统一把“眼睛”由竖着的椭圆形改成了圆形，弱化了“萌”和“低龄化”的感觉。
还有一块是颜色上，拍摄视频动态的图标有用到蓝紫色。这个紫色基本符合“更年轻”、“更流行”，但不太符合“轻微老少皆宜”，所以最后放弃了紫色，保留了蓝色。
遵循主绿关键词里的“轻微老少皆宜”，其它优化的点有：微信图标尖角处的圆角调小，删除启动页与黑色"WeChat"字形成对比的绿色圆点。另外还有一些视觉层面美观、和谐、舒适度的优化，比如颜色、留白、圆角大小、字体大小方面的微调。
优化后的微信 Redesign，整体效果如下图所示。
凡事预则立，不预则废。UI 设计如何做到理性，最核心的是设计风格，规划、成形和细化都紧密围绕设计风格展开。
最后，尝试总结下“红绿灯”法的优势，主要有四点：精确、周密、稳妥、高效。
关于设计风格，传统规划方法一般只有三四个“绿色”关键词。
“红绿灯”法拥有“红灯”、“黄灯”和“绿灯”三种颜色的关键词，从而确保大方向更准确。“红绿灯”法会产生20个以上的红黄绿关键词，从而确保划出来的“发挥范围”更周密，极少有疏漏。
在“成形”这个设计环节，一旦踩到“红线”和“黄线”，规划好的红黄绿关键词都会马上发出警报，从而大大降低“违规踩线”行为的发生次数，确保设计执行环节的稳当可靠。
“红绿灯”法通俗易懂门槛低，需求方可以较为深度参与“规划”环节。需求方在“规划”环节的深度参与，理论上可以降低后期的返工和修改次数，从而确保整个设计过程的高效。同时理论上也能够提高设计师和需求方双方合作的愉快程度。
UI 设计，始于理性，但无法止步于理性，还需要超越理性。注意，这里的理性，仅指设计知识的相关理性。
超越理性主要有两点：直觉，其它知识。
直觉是指一种能够快速感受和评估设计优劣的感觉。良好的直觉往往快而准。
感知和评价别人的设计时，用到的几乎全部是直觉。审视自己的设计时，也离不开直觉。
在审视自己的 UI 设计时，直觉主要发挥两个作用：第一，囿于知识储备或表达能力，有些地方就是解释不清，这个时候就要靠直觉去感受去判断；第二，直觉往往会作为检视设计的最后一道关卡，也是最重要的一道关卡。
直觉来自哪里？
个人观察是，直觉往往和审美正相关。比如一个设计师，他掌握的设计知识有限，经验有限，对自我的要求也不高，最终的作品往往不出彩。但如果他审美好的话，往往能够分辨出不同设计方案之间孰优孰劣。
如果你想就设计稿征求别人的意见，请去找那些审美好的人。
其它知识是指设计知识以外的所有其它知识。比如 iPhone 上删除应用前应用图标的抖动，其灵感应该来自生活中的摇头求饶或吓得发抖，抖动的幅度和频率则需要利用物理学和数学方面的知识。
优秀的设计，一定会从生活中汲取大量灵感，并广泛利用社会类、人文类和理工类学科的知识。就拿数学来说，在好的设计中，一定是个常客：因为你需要不停的按计算器，从而计算不同设计元素之间的比例关系和各自的大小。
汝欲学诗，功夫在诗外。遣词造句这些文字技巧只能是写诗的基础，而非关键。写诗的关键在于你对生活、对世事的积累和感悟，在于你的思想是否深刻，情怀是否充足。
写诗如此，做设计亦如此。设计知识只是做设计的基础，而非关键。做设计的关键在于“其它知识”。“其它知识”非本文重点，就不展开了。
UI 设计里的理性，主要是各类设计知识。理性的核心在于活学活用各类设计知识。
理性严谨的做 UI 设计，可以简单分成三步：规划，成形，细化。好的开始是成功的一半，一个高质量的规划显得尤为必要。
用“红绿灯”法做规划，并指导成形和细化工作，会更精准、周密、稳妥和高效。
UI 设计，是七分理性，三分直觉。审美越好，直觉越准。
优秀的 UI 设计，一定会从生活中汲取大量灵感，并广泛利用设计以外学科的知识。
推荐书单
[美]Robin Williams《写给大家看的设计书》
[日]佐佐木刚士《版式设计原理》
[日]伊达千代《色彩设计的原理》
[日]小林章《西文字体1、2》
左佐《设计师的自我修养》
左佐《治字百方》
作者：王铎(Micu设计)
这篇主要说一下版面和图形使用，对高手来说可能有些老生常谈，但对移动端界面设计或许会有点参考价值，用几分钟看看吧。
界面美不美，除了构图之外，另一个重要手段的就是如何处理留白，也可以理解成版率。留白就是为了凸显层次、突出内容。
手持设备屏幕较小，决定了信息显示是有限的。用户有效接受信息并不与界面内提供的信息量成正比，有的时候提供的越多，用户反而真正接受的越少。妄想满屏都是信息是不可能的。用户越来越受不了满屏的信息了。
让用户接受该接受的有效信息，是关键。
在设计界面的时候，因为内容和页面都比较多，为了保证页面与页面的统一性，首先需要设定页面内容四周的留白。在设定页面的间距后相应的内容图标，图片等的安排就确定下来了。用这样的方法能使调整出来的页面更为条理化。
红色色的部分就是内容。在页面中一般会有导航的存在，那么内容区的版面是从导航下面计算的。
界面四周增加留白。这样的界面很容易集中用户的视线到少数的内容上去，突出了焦点，整体给人一种典雅高级的感觉。
反之，缩小留白或者不留白，页面会显得更丰富更充满活力。而图片的展示空间会增加，冲击感增强，让界面更显得富更有张力。
根据页面的内容不同和功能点，适当的调整界面周边的留白非常重要。一般图片本身比较有意境，可以直接采用“出血”的方式，不留白或者少留白。
下面介绍一些版面的小规律、小技巧。
1.取其精华，一块颜色也能定天下！
提取主要的信息，通过对整个页面的颜色进行调整，从而提高版面使用率。将一个或多个功能点作为主信息，提到首页中进行设计，从达到想要的视觉效果。这样处理后的界面设计不仅能显得大气有张力，而且展现出来的信息聚合度高。
在缺少图像素材的情况下，如何让界面显得有张力，整体感强，呈现出来的版面率高。
单色背景留白，凸显主要信息。要求图标或者文字，相对简洁，能够很好地和背景色融为一体。再通过线条和规则的图形来分割留白区域，增加层次感。
做好这些的前提是，设计师要明确主要信息，以及它们之间的关系。
结合产品特点巧妙的运用大色块，将变化的信息用颜色区分出来。让用户最直观的感知信息的变化。
2.多色块灵活分割，加强内容使用率
图片素材少，还可以采用多色块进行分割，让界面显得不那么单调。
加强内容使用率可以通过色块（临近色或是互补色）的延伸或是图像的重复来组织页面版式。将图片和色块进行统一化排版布局，整体基调能使页面丰富化。图片与相同大小的色块可以保持界面的统一性与简洁性，色调的一致的统一性和连续性使页面更为整体，这样看起来的页面就像一张图片一样有张力。并且这种方式让用户感觉点击的区域也会增加，从而操作也变得便捷起来。
3.构图不拘一格，找到最合适的内容版率。
横向和纵向分割，使界面显得整齐、稳定，而斜向分割让界面冲击感强。
使用不同的构图方式，穿插性地将少量的图片整合在构图的形状中，能让界面变得活跃而富有活跃性。这样的表现方式还能将产品的气质融入进去，淋漓尽致地展现。有节奏感的设计更为取巧地加强了版式率。在界面设计中，图文的穿插可以引导用户的视线，让原本简单的内容变得有趣。在层次上，也可以区分内容的主次性，让阅读更加的轻松。
4.简约化桌面或主页，让界面越近越美
常用方式：图标、加大文案字号、序号、数字等来达到加强版式率的运用，提高视觉上的丰富性。
图标表达
人们越来越认同扁平化，一方面是因为扁平化的图标看上去清新简洁，用户理解快。另一方面，与图标搭配的背景更加单纯，要么留白，要么炫简，尽可能减少给用户在视觉上干扰。好的扁平化图标不是简单地删减细节，而是着重凸显有效的信息。
图标是最为直接的表达方式，简单明确的图形，能让用户通过对图标的认识快速找到想要的功能和需求点。图标与文案的搭配有效的降低了阅读时候的疲劳感。从而加强了界面内容的节奏。运用图标的设计条理清晰，功能明确。
信息化图标能给产品增色。有趣的图标设计不仅能很好的将功能点进行区分，也能好的将软件的特性和品牌展现出来。
把图形融入到界面中，可让内容更为丰富，层次更加的分明。
5.突出重点文案，调整版面率，让信息更清晰。
调整文字大小将调整版式的使用率，使原本空的界面内容显示的更为饱满，用户阅读起立更为直接。使用较大的字号进行加强页面使用率能让页面显得更为信息。突出重要的引导文案，加强了软件的情景感和带入感。快速引导了用户对功能的理解，从而准确的使用。
在页面中我们可以强调重点数据或功能词等来区分界面中的层次感。让用户的视线更为集中。
6.串联图片，让它们讲故事，视图化版面。
这种设计方法更多的是将文案用图形或插图展现出来。在数据页面和引导页中最为常见。
一段文案一副插图的引导页更为有特色，给用户的情怀感更强。这种设计手法也是最容易体现产品特质和吸引眼球的。图案的易读性高，能在极其短暂的时间内快速传达给用户信息。用图像来讲故事，是设计中最根本的表现方法，也更是最为受欢迎的表达方式。
图在界面中的运用
三种方式：抠，边界关系，残缺
1.切抠弄，制造纯色留白！
在处理图片素材的时候，常常会碰到图片背景杂乱，产品不够突出的问题。在设计之前我们可以对素材先进行处理，将产品直接抠出来。利用这种方式可以找到产品的形状，越明确的形状越能反映用户对产品的认知度。产品的独特性能快速明确的表达给用户，用户从潜意识第一时间的判断到产品的类型和使用特性。
下面是一个曲奇饼干的网站，将主饼干的勾出来，进行层次感的区分。在产品介绍中采用了侧面的实物抠图，体现出了曲奇饼干最为真实的厚度。运用碎落的饼干块虚化拉开产品的层次。深色的背景与饼干对比强烈，直接凸显了实物的形状。让用户一目了然，食欲大增。从而增了用户的购买欲望。
在很多的电商APP中也常采用抠图，去除多余杂乱的信息，利用产品的形状直接体现不同商品的特点。这样的界面用户阅读起来轻松愉悦。
2.建立边界，再打破边界，破出重围
如果需要展示的信息较多，采用分割区域的方法，可以使界面显得整齐干净。而当信息较少时，设计师可以大胆选用“局部出血”的方式，建立边界，再突破它，增加层次感和冲击力，以凸显主题。
一定要记得设定好的内容范围是为了让页面显得整体化，而不仅仅是摆放和拼图。
在网页设计中有时候会见到这种方式，其实在手机、平板等UI设计中我们完全可以套用。
运用图片的穿插来区分背景和产品或形象的层次感，处理完的界面更加富有生命力。放大需要突出的主形象，把它作为第一焦点展现在用户的眼前，有种强烈的“面对面”感受。
在APP中采用将图片局部突出出来，能拉开信息的层次，将需要突出的图片信息第一时间展示给用户。一方面可以方便和引导用户点击，另一方面在上下滚动的长副瀑布流里，适当地打破平衡，可以丰富页面的节奏感。
在ICON的设计中我们也常用到破图的方法。在统一的圆角矩形中，将表达寓意的图形局部超出，使图标更为有空间感和灵活性。
采用这种方式设计的图标空间感强，层次感强烈，能使产品形象显得更为突出。
在字体中也经常运用到破图的方法，让字体更为生动。在破字的过程中也能引发出不同的创意点。
大美青海字体设计我把数字9破出了方块。而在优车尚品字体的设计中，我通过品字的破图找到了车的联想，让整个字体设计的更为贴切灵动。
3.冲出画面，只保留局部，让产品再大一点！
有时候，我们拿到素材，在处理后发现，图片比较平常，用户一眼就知道是什么。这个时候，可以考虑保留局部的方式，营造残缺美，增加时尚感。不要小看用户的的脑补能力，当然，这种方案还是要与客户或者产品经理及时沟通，残缺美不是所有人动能接受的。
我们将图片进行放大，找出产品特点。选择能撑起整个页面构图的位置，切除不必要的图形，让图片冲出画面！这样处理后，页面显得非常富有张力，激发了用户想看到产品整个形象的欲望，起到产品预热的效果。
在WATCH的预热官网中，设计师将图片放大，裁取有特点的部位进行展示，引导了用户点击观看产品的整体形象，激发了用户更多的去了解产品的特性。
从版面角度看，局部放大裁切图片，增加了留白，增加了版式率，让整个页面显得饱满，微距的效果使用户与产品更贴切。
这一篇主要理顺了一下版面和图形使用知识，并不全面，大家还是以欣赏为主。看完了能有个留白、破图的印象就不算白看。
设计大方向上的东西终于絮叨得差不多了，我知道其实大家都懂，就是不知道从何下手而已，下一篇来点小方向的实用东西，欢迎大家留言。
蓝蓝设计的小编 http://www.lanlanwork.com