如何增加设计的层次感？ 如何提升设计中的色彩层次感?
\u600e\u4e48\u8ba9\u5e73\u9762\u8bbe\u8ba1\u4f5c\u54c1\u589e\u52a0\u5c42\u6b21\u611f?01. \u786e\u4fdd\u4f60\u7684\u6807\u9898\u3001\u526f\u6807\u9898\u548c\u6b63\u6587\u7684\u5b57\u53f7\u662f\u9010\u6e10\u51cf\u5c0f\u7684
\u8fd9\u4e9b\u662f\u5370\u5237\u515a\u7684\u4e09\u5251\u5ba2\u3002\u8ba9\u5b57\u53f7\u4ece\u6700\u5927\u5230\u6700\u5c0f\uff0c\u53ef\u4ee5\u8ba9\u8bfb\u8005\u81ea\u7136\u7684\u6839\u636e\u4f60\u7684\u987a\u5e8f\u53bb\u9605\u8bfb\u3002\u4f60\u7684\u6807\u9898\u5e94\u8be5\u662f\u9996\u5148\u8ba9\u8bfb\u8005\u770b\u5230\u7684\uff0c\u6240\u4ee5\u4e00\u5b9a\u8981\u786e\u4fdd\u4ed6\u975e\u5e38\u660e\u663e\u3002\u4f60\u53ef\u4ee5\u7528\u6bd4\u8f83\u5927\u7684\u5b57\u53f7\u5e76\u4e14\u975e\u5e38\u9192\u76ee\u7684\u5b57\u4f53\u3002
\u526f\u6807\u9898\u5e94\u8be5\u662f\u76f8\u5bf9\u4e8e\u6807\u9898\u6765\u8bf4\u8f83\u5c0f\u7684\u5b57\u4f53\u3002\u6b63\u6587\u5b57\u4f53\u662f\u6700\u5c0f\u7684\uff0c\u5e94\u8be5\u6e05\u6670\u6613\u8bfb\u3002\u907f\u514d\u4f7f\u7528\u590d\u6742\u7684\u5b57\u4f53\u6216\u7279\u522b\u523a\u76ee\u7684\u989c\u8272\uff0c\u56e0\u4e3a\u8fd9\u6837\u4f1a\u5206\u6563\u773c\u775b\u7684\u6ce8\u610f\u529b\uff0c\u8ba9\u6587\u5b57\u66f4\u96be\u9605\u8bfb\u3002
02. \u589e\u52a0\u56fe\u6807\u7684\u5927\u5c0f\uff0c\u6765\u53cd\u6620\u5176\u91cd\u8981\u6027
\u8bb0\u4f4f\u4fdd\u6301\u6700\u91cd\u8981\u7684\u5bf9\u8c61\u662f\u6700\u5927\u7684\u3002\u5143\u7d20\u5c3a\u5bf8\u8d8a\u5927\uff0c\u8bf4\u660e\u8d8a\u91cd\u8981\u3002\u4e0a\u56fe\u4e2d\u589e\u5927\u56fe\u6807\u5927\u5c0f\uff0c\u7ed9\u4eba\u4f20\u9012\u4e00\u79cd“\u884c\u52a8\u547c\u5401”\u7684\u4fe1\u606f\u3002\u4e0e\u56fe\u7247\u4e3b\u9898\u66f4\u76f8\u5173\u7684\u56fe\u6807\uff0c\u4f5c\u7528\u4f1a\u66f4\u5f3a\u3002
03. \u4f7f\u7528\u989c\u8272\u4f5c\u4e3a\u4e00\u79cd\u89c6\u89c9\u4eae\u70b9
\u8272\u5f69\u4e0d\u4ec5\u80fd\u5524\u8d77\u611f\u60c5\uff0c\u8fd8\u80fd\u533a\u5206\u4ec0\u4e48\u662f\u91cd\u8981\u7684\uff0c\u4ec0\u4e48\u662f\u4e0d\u91cd\u8981\u7684\u3002\u4f7f\u7528\u660e\u4eae\u3001\u5927\u80c6\u7684\u8272\u5f69\u80fd\u591f\u5438\u5f15\u773c\u7403\uff0c\u8ba9\u5b83\u6210\u4e3a\u8bbe\u8ba1\u4e2d\u7684\u7126\u70b9\u3002\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c“sunshine”\u7684\u989c\u8272\u662f\u9009\u62e9\u7684\u9ec4\u8272\u7684\u82b1\u7684\u989c\u8272\uff0c\u8fd9\u4f7f\u5f97\u4ed6\u66f4\u52a0\u660e\u663e\u3002
04. \u6df7\u5408\u4f7f\u7528\u4e0d\u540c\u7684\u5b57\u4f53\u6837\u5f0f
\u5927\u591a\u6570\u5b57\u4f53\u6709\u4e0d\u540c\u7684\u98ce\u683c\uff0c\u5982\u7c97\u4f53\u548c\u659c\u4f53\uff0c\u5728\u60a8\u521b\u5efa\u5c42\u6b21\u7ed3\u6784\u65f6\uff0c\u4ed6\u53ef\u662f\u7279\u522b\u6709\u7528\u3002
05. \u7528\u6846\u67b6\u6765\u6392\u5217\u60a8\u7684\u56fe\u7247
\u4f7f\u7528\u7f51\u683c\u7684\u5c42\u6b21\u7ed3\u6784\u662f\u521b\u5efa\u4e00\u4e2a\u8bbe\u8ba1\u7684\u7b80\u5355\u7684\u65b9\u6cd5\uff0c\u7279\u522b\u9002\u5408\u53d9\u4e8b\u6027\u4e3b\u9898\u7684\u8bbe\u8ba1\u3002\u60a8\u53ef\u4ee5\u628a\u4e3b\u8981\u7684\u56fe\u7247\u653e\u5728\u6700\u5927\u7684\u65b9\u6846\u4e2d\uff0c\u6b21\u8981\u7684\u653e\u5728\u8f83\u5c0f\u7684\u65b9\u6846\u4e2d\u3002\u8fd8\u6709\uff0c\u53ef\u4ee5\u901a\u8fc7\u540c\u6837\u7684\u6ee4\u955c\u5c06\u6240\u6709\u7684\u7167\u7247\u8bbe\u4e3a\u540c\u79cd\u98ce\u683c\u3002
\u5173\u4e8e\u600e\u4e48\u8ba9\u5e73\u9762\u8bbe\u8ba1\u4f5c\u54c1\u589e\u52a0\u5c42\u6b21\u611f\uff0c\u73af\u7403\u9752\u85e4\u5c0f\u7f16\u5c31\u548c\u60a8\u5206\u4eab\u5230\u8fd9\u91cc\u4e86\u3002\u5982\u679c\u60a8\u5bf9\u7f51\u7ad9\u8bbe\u8ba1\u3001\u9875\u9762\u6392\u7248\u3001\u56fe\u50cf\u5904\u7406\u65b9\u9762\u6bd4\u8f83\u611f\u5174\u8da3\uff0c\u5e0c\u671b\u5206\u4eab\u7684\u8fd9\u7bc7\u6587\u7ae0\u80fd\u591f\u5bf9\u60a8\u6709\u6240\u5e2e\u52a9\u3002\u5982\u82e5\u60a8\u8fd8\u60f3\u4e86\u89e3\u66f4\u591a\u5173\u4e8e\u5e73\u9762\u8bbe\u8ba1\u7684\u7d20\u6750\u53ca\u6280\u5de7\u7b49\u5185\u5bb9\uff0c\u53ef\u4ee5\u70b9\u51fb\u672c\u7ad9\u7684\u5176\u4ed6\u6587\u7ae0\u8fdb\u884c\u5b66\u4e60\u3002
\u4e00\u3001\u5de7\u7528\u7a81\u53d8
\u76f8\u5173\u4e8e\u5355\u8272\u800c\u8a00\uff0c\u7a81\u53d8\u8272\u5f80\u5f80\u53ef\u4ee5\u5bf9\u7528\u6237\u53d1\u751f\u66f4\u5927\u7684\u5438\u5f15\u529b\u3002\u7531\u4e8e\u7a81\u53d8\u8272\u81ea\u8eab\u5c31\u5177\u6709\u8f83\u4e3a\u4e30\u5bcc\u7684\u5c42\u6b21\uff0c\u5047\u5982\u8fd0\u7528\u7a81\u53d8\u8272\u52a0\u4e0a\u5408\u7406\u7684\u70b9\u7ebf\u9762\u5143\u7d20\u7684\u8c03\u914d\uff0c\u53ef\u4ee5\u53d1\u751f\u8f83\u597d\u7684\u9875\u9762\u4f5c\u7528\u3002\u800c\u5728\u54b1\u4eec\u65e5\u5e38\u7684\u89c4\u5212\u4e2d\u8fd8\u662f\u9700\u8981\u7cbe\u5fc3\u6311\u9009\u7a81\u53d8\u8272\u7684\u8272\u503c\uff0c\u540c\u8272\u7a81\u53d8\u3001\u90bb\u8fd1\u8272\u7a81\u53d8\u548c\u6bd4\u7167\u8272\u7a81\u53d8\u662f\u6bd4\u8f83\u5e38\u89c1\u7684\u3002
\u4e8c\u3001\u8272\u5f69\u6bd4\u7167
\u5047\u5982\u4f60\u7684\u9875\u9762\u770b\u8d77\u6765\u4e0d\u5177\u5907\u8f83\u663e\u7740\u7684\u4eae\u70b9\uff0c\u90a3\u4e48\u8fd0\u7528\u6bd4\u7167\u8272\u548c\u53cd\u5dee\u5927\u7684\u8272\u5f69\u5c31\u6709\u5229\u4e8e\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u3002\u7531\u4e8e\u5047\u5982\u9875\u9762\u4e2d\u6709\u975e\u5e38\u6fc0\u70c8\u7684\u8272\u5f69\u6bd4\u7167\uff0c\u753b\u9762\u7684\u51b2\u51fb\u529b\u4f1a\u5728\u5f88\u5927\u7a0b\u5ea6\u4e0a\u5f97\u5230\u63d0\u5347\uff0c\u53ef\u4ee5\u5e26\u7ed9\u7528\u6237\u6108\u52a0\u6fc0\u70c8\u7684\u89c6\u89c9\u4f53\u9a8c\uff0c\u4ece\u800c\u6709\u7528\u52a0\u6df1\u9875\u9762\u5728\u7528\u6237\u5fc3\u76ee\u4e2d\u7684\u5f62\u8c61\u3002
\u4e09\u3001\u64cd\u63a7\u8272\u5f69
\u505a\u8fc7\u89c4\u5212\u7684\u5c0f\u4f19\u4f34\u90fd\u77e5\u9053\uff0c\u5728\u9875\u9762\u4e2d\u8272\u5f69\u8f83\u591a\u7684\u60c5\u51b5\u4e0b\u662f\u6bd4\u8f83\u7b80\u5355\u663e\u5f97\u6742\u4e71\u7684\u3002\u56e0\u800c\u5173\u4e8e\u591a\u8272\u5f69\u7684\u89c4\u5212\u54b1\u4eec\u8981\u505a\u7684\u5c31\u662f\u64cd\u63a7\u9971\u548c\u5ea6\u548c\u660e\u5ea6\uff0c\u5c3d\u91cf\u4f7f\u5404\u4e2a\u8272\u5f69\u7684\u9971\u548c\u5ea6\u548c\u660e\u5ea6\u575a\u6301\u534f\u8c03\u7684\u5171\u540c\u3002
\u5173\u4e8e\u5982\u4f55\u63d0\u5347\u8bbe\u8ba1\u4e2d\u7684\u8272\u5f69\u5c42\u6b21\u611f\uff0c\u73af\u7403\u9752\u85e4\u5c0f\u7f16\u4eca\u5929\u5c31\u548c\u60a8\u6682\u65f6\u5206\u4eab\u5230\u8fd9\u91cc\u4e86\u3002\u5982\u679c\u60a8\u5bf9\u7f51\u7ad9\u8bbe\u8ba1\u3001\u9875\u9762\u6392\u7248\u3001\u56fe\u50cf\u5904\u7406\u65b9\u9762\u6bd4\u8f83\u611f\u5174\u8da3\uff0c\u5e0c\u671b\u5206\u4eab\u7684\u8fd9\u7bc7\u6587\u7ae0\u53ef\u4ee5\u7ed9\u60a8\u7684\u5b66\u4e60\u6216\u5de5\u4f5c\u63d0\u4f9b\u5e2e\u52a9\u3002\u5982\u82e5\u60a8\u8fd8\u60f3\u4e86\u89e3\u66f4\u591a\u5173\u4e8e\u5e73\u9762\u8bbe\u8ba1\u7684\u7d20\u6750\u53ca\u6280\u5de7\u7b49\u5185\u5bb9\uff0c\u53ef\u4ee5\u70b9\u51fb\u672c\u7ad9\u7684\u5176\u4ed6\u6587\u7ae0\u8fdb\u884c\u5b66\u4e60\u3002
层次感是什么？
把画面中的各个元素合理的、清晰的、有节奏的组合在一起，使整个画面看起来更加的舒适、愉悦和协调。是不是感觉很深奥？好吧，换句简单的话来说就是——不多、不少，看起来舒服正好！
这篇文章分为3个章节，而每个章节都有若干细分的知识点，各位看官请仔细看哦！
初步理解，先来看看文章大纲：
一、画面的层次
使用点、线、面来分割画面
留白
在摄影中找层次
颜色的对比
渐变色的流行
多种颜色搭配的控制
字体的对比
文字的对比
二、色彩的层次
三、文字的层次
请点击输入图片描述
一、画面的层次
1.使用点、线、面来分割画面
点、线、面是设计中最基本的设计元素，学过平面构成的同学应该都有些了解，连点成线、连线成面、而面缩小到一定程度就是点。而面的边界就是线，线的宽度增加和点扩散到一定的面积也就成为面。
上面的这几句话看起来比较复杂，其实仔细想想这就是世界里一切元素的原理甚至是宇宙星空。我们下面来举个例子。
请点击输入图片描述
上图就基本可以把点、线、面的所有变化全部概括。下面我们来分析一下。
请点击输入图片描述
红圈里的十字元素可以看作为“点”做为整体画面中的装饰元素出现。要注意的是所谓的“点”并不只是圆形的哦。任何在画面中尺寸和面积相对最小的元素都可以看做成“点”。而画面中的小圆点既可以看做“点”，也可以看作“面”。所以连点成面也是没错的。
请点击输入图片描述
黄色圈里的线大家认为是什么？我认为它并不是线而是点。为什么呢？因为无论从它在画面中的占比还是所起到的作用来看，它都属于点的属性。而线在那？在绿色块和红色块的交界处。还有色块的边界处。而这正说明了“线”的一个重要的用途——分割。画面中的“线”把整个画面分割成了4个大小不一的区域，这种分割让画面更加有趣味性也更加有层次感。
请点击输入图片描述
而线分割出来的4个区域也就是元素“面”。
这个图例不仅说明了点线面的几个重要的特征，也证明了点线面并不会因为它的形状而固定的，而是会不断变化的。
最后总结一下点线面的一些特点：
点：是最有装饰性的元素，因此大多情况下在画面中起到装饰作用。
线：除了装饰作用外还起到对画面的分割、元素的穿插和对视觉引导的作用。
面：往往起到稳定画面和承载重要信息的作用。
另外要注意的是：点线面是组合使用的，想想看没有面的衬托又怎么能显示出点和线的特征呢？
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
通过这些设计案例我们可以分析并总结出，有效的利用点线面的组合可设计出层次丰富的作品。而我们要如何做呢？——置换临摹。借鉴好的设计作品的点线面的构成元素再加以利用和创新。
请点击输入图片描述
2.留白
留白是设计中很常用的手法，留白除了让画面整洁、干净和透气外，更是对“面”的更深刻的理解和使用，而现在用的非常广泛的极简设计就是在留白的处理上用的比较好的一种设计类型。
我们这里再说一下留白对层次的影响，先看几个设计案例。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
上面的几个设计作品的共同特点就是有大量的设计留白，并且在留白的同时对画面的层次进行了处理，例如留白与主图之间的大小对比，标题与补充性文字直接的对比。
请点击输入图片描述
我把上面的图做了个处理，分成背景层，留白层，主体模特层，标题文案层和功能文案层。从这里我们就能看出这幅设计的层次是如何设计的了。大家也不妨把自己喜欢的设计这样分层解构，来研究一下设计的层次。
3.在摄影中找层次
现在的设计中，摄影图片的使用也是越来越多了，尤其是质量高的摄影作品往往能最大限度的提高设计的品质。但是这是为什么大家想过吗？其中一个原因是摄影中也存在着层次。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
这个装B耳机大家熟悉吧，这就是用摄影的方式来做的，并且其中近景，中景，远景三个层次全都有。不仅看起来画面非常细腻丰富，而且也品质感十足。
但是如果图片层次少怎么办？很简单，我们可以使用文字来做为图案元素来增加画面层次。
请点击输入图片描述
请点击输入图片描述
二、色彩的层次
1.颜色的对比
使用对比色和反差大的颜色来设计也是增加层次感的一个常用方法，因为有非常强烈的颜色对比，画面的冲击力会非常强烈，给人们的视觉观感也会更加刺激。
黑黄对比是非常经典配色方案，虽然只有两个颜色，但是通过画面中的文案和图片的组合也会显得非常丰富，在这种极简的配色中更加需要对点线面的合理运用否则会显得有些单调。
请点击输入图片描述
从上面的设计来看，设计师在用黑黄配色的时候又用了黄色的对比色——蓝色，这样既可以让画面的颜色更加丰富不会单调，又会让画面中的一些重要元素凸显出来，起到强调作用。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
黄蓝配色和红绿配色也是经常用到的经典配色，上面两个案例可以看到，黄蓝配色多用饱和度比较高，这样显得年轻时尚有科技感，而另一个设计是红绿蓝的配色，饱和度较低，显得更加复古和深沉。
2.渐变色的流行
渐变色已经流行了几年，今年淘宝的手机app也是以渐变色来设计的，可见渐变色的使用范围也是越来越大了。而渐变色本身就具有层次丰富的特点，因此，使用渐变色加上合理的点线面元素的搭配会在具有冲击力的同时最大限度的丰富画面的层次。
在我们日常的设计中渐变色的使用还是需要更加精心的选择颜色的色值，一般来说会选择同色渐变、邻近色渐变和对比色渐变。而渐变的颜色数量也不宜超过2种。2种以上的渐变色就需要非常强的控色能力来驾驭了。（我这里说的是在同一渐变色里的2种以上的颜色哦）
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
渐变色的使用大多都出现在UI设计中，而随着UI设计的发展，web端的设计，无论是网页还是电商也有很多借鉴UI设计的设计方法和配色方法。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
渐变色的配色是可以搭配使用的，例如上图，都属于同色渐变，但是这样使用有一个规则，就是互相搭配的几个渐变色的饱和度要基本一致，否则会出现颜色“花”的问题。
3.多种颜色搭配的控制
对于多颜色的设计我们要做的就是控制饱和度和明度，尽量使各个颜色的饱和度和明度保持协调的一致。无论是清淡的中国风，还是浓烈的欧美风，都会让画面丰富有层次的同时不会“乱掉”、“花掉”。
请点击输入图片描述
请点击输入图片描述
我们可以看到，上面的几个图例里的颜色非常多，但是为什么我们会感觉非常丰富而又有层次呢？没错，就是饱和度和明度的控制到位。
请点击输入图片描述
请点击输入图片描述
三、文字的层次
1.字体的对比
字体是我们设计中必须使用并且比较难的一个环节，但是正式这个让大家比较闹心的环节会使画面的层次变得异常丰富，即使在只有文字没有图案的时候，只要排版合理也可以得到惊人的效果。
请点击输入图片描述
请点击输入图片描述
不同的字体表达不同的意境和涵义，尤其是中文字体传承几千年每一个字都有特定的涵义。而西文主要是以衬线体和非衬线体的字形装饰的变化。时而粗犷，时而纤细。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
2.文字的对比
这里的对比包括文字的字体、大小、粗细、颜色等等。为什么单单要挑对比来说呢？因为对比是最能拉开并体现层次的方法，我们逐个来说。
请点击输入图片描述
我来那这个作品来分析解构一下，30%是文字里面积最大的，也同样是画面元素里占比最大的，通过DISCOUNT VOUCHER的解释说明这是折扣信息，而这个解释也是画面里第二大占比的文字。然后就是下面的时间、地址、电话等信息，使用最小号的文字。通过这三种文字大小来把层次拉开，并且一下就得到3个层次，在加上最后面的花纹背景、白色背景和金色蝴蝶结总共是6个层次。另外为了统一画面，文字的字体都采用了衬线体。
请点击输入图片描述
请点击输入图片描述
上面的这两个海报也是同样的道理，大家可以解读一下。
字体的颜色，上面两个aranya的海报是个系列，分别把主题文字aranya的颜色换成绿色和蓝色，一方面可以增加文案的层次感，另一方面可以与视觉主体的颜色统一。下面是一些设计的案例大家可以试着分析一下。
请点击输入图片描述
请点击输入图片描述
请点击输入图片描述
最后说一说对齐，对齐是使画面更加有秩序，看起来更合理且舒服。我们用上面这个海报来分析一下。
请点击输入图片描述
看这些蓝色的线，就是这幅海报的对齐方式。
总结
其实层次是在综合的运用了点线面的分割，色彩的搭配和文字的排版而形成的，并且在大小比例，颜色选择，对齐等这些细节上精益求精，层次自然立现。
运用分组建立层次 在设计中，相邻的元素比分开较远的元素会更加吸引人注意，在做设计阅读顺序时，利用设计分组是一个非常有效的方法，将不同信息进行视觉间距分组。能提升用户对于内容上的理解。▲如上图slack的设计，插画引导图和底部按钮上面文字拉开了距离，使得内容更聚焦。第二个界面的顶部头像和下面的文字也是通过分组形成了对比。 ▲stadium-live的产品设计上，登录页面按钮为一组，顶部品牌LOGO和slogan一组，人物为一组，每组信息之间分组非常明确，互相都不会对对方视觉产生干扰，后面两张页面也是如此，顶部的导航，和下面表单信息，以及头像和底部按钮，通过分组处理，内容更加符合用户的视觉动线。 ▲在球员定制的处理上，最右边那张图，通过卡片和线条分组处理，从视觉上很清晰的看见排名；哪两个球队之间正在进行比赛。 ▲当一组信息比较接近时，证明他们是有关联的，如果距离比较远，这意味着这组信息和他们是不同的，简单来说，通过邻近性原则创造这些关系，为信息带来层次。 运用空白建立视觉层次 空白也是视觉设计元素，并不是留白就是空着，如果设计中留白运用合理，可以帮助用户理解很多信息，因此任何设计都需要通过适当的负空间来传递信息。▲如上图我喜欢的一个应用classpass设计非常极简，页面中大量运用留白来凸显内容。 ▲classpass的设计不会使用太多的视觉元素，而是运用留白把内容进行分组，每个页面的留白恰到好处，同时留白本身就是对信息进行区分，所以页面中减少了很多线条使用，会更加干净有品质感。 ▲must是一款电影软件，整体设计非常杂志风，页面就是通过图文处理，以及留白空间的处理，增加对比，基本产品使用过程中你不会感觉到视觉负担，元素之间的信息组织的非常清晰。 ▲在电影展示页面，信息的处理，以及打分设计上，多次运用留白来处理信息层级，在设计中，当你元素周围留白越多，它产生聚焦注意力的作用也越强，如右边的打分页面，几乎所有焦点都在这个弹窗上。 ▲Artsy是一款艺术品电商网站，整个app的设计也充满了艺术气息，每次我设计找不到感觉的时候就会去打开看看，里面的排版、还有设计的细节处理，都值得我学习，但我喜欢的还是他对于板式和留白空间的处理。 ▲在首页设计，我最喜欢他相框的设计，就像欣赏美术馆的一幅画，页面留白也非常大，衬线体和非衬线体的对比也运用的非常好。 ▲整个APP的设计被大量留白包围，虽然现在流行各种质感，光感，C4D的设计，但是大量视觉元素会让页面过于饱和，如果没有很好的视觉引导，用户会感到不知所措。这种简单的返璞归真，也能让人视觉不容易产生疲劳。 运用氛围建立层次 ▲每个纹理的运用，有设计感的纹理从视觉感受上比简约主义更能吸引用户注意力，但是背景纹理的运用不能为了设计而设计，而是需要和产品内容有关系。比如纹理和文字内容、和信息是密切相关的。如上图，是一款打车软件，背景结合了打车的地图，公路线路，用车场景；让页面对比和设计层次更加突出。 ▲Jour这款产品在设计上，背景通过有层次的氛围纹理和质感，使得页面氛围感很强，层次细节更加丰富，当然在设计时候切忌对于设计氛围过度运用，那样会让用户分散注意力。 ▲其它场景上氛围纹理的运用，卡片上通过系列插画的塑造，页面虽然有很多插画，但是页面平衡感同样被把握的很好。用的时候需要考虑用户在不同界面看见的元素视觉感受是一致的。 ▲氛围除了图形，其实色彩也是很重要一种方式，我很喜欢的ASANS的设计，在背景上就是运用了一些几何图形的肌理效果让整个空间感更加丰富，这些几何图形丰富细节的同时也让整个内容更加凸显。 ▲如上图是里面一个注册登录场景，界面中，除了背景灰色底纹通过几何图形来烘托视觉层次，同时在插画上也非常巧妙，用户输出时，完成后，整个插画到品牌图形的连贯变化体验非常好。 ▲Sift是一款新闻类阅读产品，这类型产品设计一般就是文字排版，设计简约为主，但是sift运用了一种大胆的设计，背景氛围上采用一些点线底纹的肌理效果，和内容结合的平衡感把握的很不错。 ▲Lugg是一款货车APP有点像国内的货拉拉，整个设计氛围感也非常强，运用的全插画设计，从引导页，到核心功能页面的设计都能看见完整插画的运用，是我目前见过运用插画氛围作为主设计最好的产品。 ▲感兴趣的同学可以去美国苹果商店下载使用，页面中增加氛围是一种增加层次很好用的方式，但是同样需要注意好视觉平衡，不要本末倒置。 运用字体对比建立层次 ▲运用衬线字体和非衬线字体对比是非常常用的方式，如上图运用了Adelle Sans和Tiempos这两款字体的对比让页面内容结构非常清晰 ▲上图官网的设计，干净的排版，通过字体大小、字型进行对比，体现出视觉层次。 字体的选择本身也是设计中很重要的因素，好的设计不仅能提升设计品质，同时也能让页面视觉层次更加分明。
绛旓細鏂规硶/姝ラ1绗竴銆鐏厜锛岀伅鍏夌殑鏄庢殫鍐锋殩锛岄兘浼氬奖鍝嶇敾闈㈢殑灞傛鎰燂紝灏卞儚浜哄垎杈ㄨ窛绂绘槸鐢辫繎澶ц繙灏忎竴鏍凤紝鎯宠涓板瘜鐨勫眰娆℃劅锛屽氨瑕佹妸鐏厜鍋氭殫涓浜涳紝鐏厜澶寒锛岀敾闈㈠亸鐧斤紝鐢婚潰涓病鏈夋槑鏆楀姣旓紝灞傛鎰熻嚜鐒朵笉涓板瘜銆2绗簩锛岄鑹诧紝鎯宠灞傛鎰燂紝棰滆壊鐨勯ケ婊″繀涓嶅彲灏戯紝涓婇潰璇磋繃鐏厜杩囦寒锛岀敾闈㈡病鏈夋槑鏆楀姣旓紝灏辨病鏈夊眰娆...
绛旓細涓銆佹棤琛嚎瀛椾綋涓庢墜鍐欒嫳鏂囨惌閰 璁捐甯堝湪鍋氭帓鐗堣璁＄殑鏃跺欙紝鍙互缁欒嫳鏂囨垨鑰呬腑鏂囨爣棰閫夋嫨涓涓瑪鐢绘瘮杈冪矖鐨勬棤琛嚎瀛椾綋锛岀劧鍚庡湪瀹冪殑涓婇潰鍔犱笂涓涓垨鑰呭嚑涓瘮杈冩溅鑽夛紝绗旂敾杈冪粏鐨勬墜鍐欒嫳鏂囧崟璇嶏紝杩欐牱鐨勮璁℃柟娉曡兘澶熻捣鍒伴潪甯镐笉閿欑殑瑁呴グ浣滅敤銆備簩銆灏嗚嫳鏂囨帓鎴愪竴涓渾鍦 璁捐涓绘槸瑙夊緱鑷繁鐨勭増闈㈣璁¤繃浜庤鐭╋紝娌℃湁鐗...
绛旓細1. 鑹插僵鎼厤锛氬浜庨鑹茬殑鎼厤锛屾垜浠彲浠ラ噰鐢ㄩ珮銆佷腑銆佷綆涓変釜灞傛鐨勯鑹茬粍鍚堬紝浣挎暣涓睍鍘呯┖闂村叿鏈夋洿澶氱殑灞傛鎰熴傚叾涓紝楂樺眰娆￠鑹插簲璇ユ瘮杈冩槑浜侀矞鑹筹紝鑳藉鍚稿紩浜虹殑瑙嗙嚎锛涗腑灞傛棰滆壊搴旇鏄暣涓┖闂寸殑涓昏壊璋冿紝璧峰埌鎵夸笂鍚笅鐨勪綔鐢紱浣庡眰娆￠鑹插簲璇ョ浉瀵硅緝娣★紝鐢ㄦ潵琛墭鍦烘櫙銆2. 鐏厜璁捐锛氶氳繃鐏厜鐨勮璁★紝鍙互...
绛旓細浣跨敤瀵规瘮鑹插拰瀵规瘮鑹茶繘琛岃璁′篃鏄鍔犲眰娆℃劅鐨勫父鐢ㄦ柟娉,鍥犱负鏈夐潪甯稿己鐑堢殑鑹插僵瀵规瘮,鐢婚潰鐨勫啿鍑诲姏浼氶潪甯稿己,浜虹殑瑙嗚鎰熷彈涔熶細鏇村姞鍒烘縺銆 榛戣壊瀵规瘮鏄潪甯哥粡鍏哥殑閰嶈壊銆傝櫧鐒跺彧鏈変袱绉嶉鑹,浣嗘槸閫氳繃鏂囨鍜屽浘涓浘鐗囩殑缁撳悎,浼氶潪甯镐赴瀵屻傚湪杩欑鏋佺畝鐨勯厤鑹蹭腑,鐐广佺嚎銆侀潰鐨勫悎鐞嗚繍鐢ㄦ洿鏄繀涓嶅彲灏,鍚﹀垯浼氭樉寰楁湁浜涘崟璋冦 璇风偣鍑昏繘鍏ュ浘...
绛旓細浜屻侀鑹茬殑灞傛 棰滆壊鐨勫眰娆★紝浣犲厜鍋氬ソ鍏冪礌鐨勫眰娆℃槸杩滆繙涓嶅鐨勶紝棰滆壊涔熻嚦鍏抽噸瑕侊紝鍏充簬濡備綍閰嶈壊锛岀綉涓婄殑鏁欑▼闈炲父澶氾紝杩欓噷涓嶅璇翠簡锛岃繖閲屼富瑕佽涓嬫庝箞閫氳繃閰嶈壊鏉ヨ〃鐜板眰娆℃劅銆傚ぇ瀹堕兘鐭ラ亾鍋 缃戝簵瑁呬慨 璁捐鏃跺欎細鏈変富鑹插拰杈呰壊锛屽姣旇壊锛屼絾鏄笉鐭ラ亾涓轰粈涔堝仛鍑烘潵鐨勪笢瑗夸笉鏄崟璋冨氨鐨勮姳鍝紝閭ｄ箞杩欏彲鑳藉氨鏄壊褰...
绛旓細瑕佽惀閫犲嚭楂樼骇灞傛鎰鐨勫姙鍏瑁呬慨璁捐锛屽彲浠ヨ冭檻浠ヤ笅鍑犱釜鏂归潰锛1. 閫夋嫨楂樿川閲忔潗鏂欙細浼樿川鏉愭枡鏄墦閫犻珮绾ф劅鐨勫熀纭銆傞夋嫨楂樿川閲忕殑鍦版澘銆佸闈㈡潗鏂欏拰瀹跺叿锛屽瀹炴湪銆佸ぇ鐞嗙煶銆佺毊闈╃瓑銆傝繖浜涙潗鏂欒川鎰熷ソ锛岃兘澶熸彁鍗囩┖闂寸殑鍝佽川鎰熴2. 鑰冭檻鑹插僵鐨勬惌閰嶏細閫夋嫨鍏搁泤銆佹煍鍜岀殑鑹茶皟鏉ヨ惀閫犻珮绾ф劅銆傚父瑙佺殑鑹插僵鍖呮嫭绫宠壊銆佺伆鑹层佺櫧鑹...
绛旓細寰堢畝鍗,鎴戜滑鍙互浣跨敤鏂囧瓧鏉ュ仛涓哄浘妗堝厓绱犳潵澧炲姞鐢婚潰灞傛銆 璇风偣鍑昏緭鍏ュ浘鐗囨弿杩 璇风偣鍑昏緭鍏ュ浘鐗囨弿杩 浜屻佽壊褰鐨勫眰娆 1.棰滆壊鐨勫姣 浣跨敤瀵规瘮鑹插拰鍙嶅樊澶х殑棰滆壊鏉璁捐涔熸槸澧炲姞灞傛鎰鐨勪竴涓父鐢ㄦ柟娉,鍥犱负鏈夐潪甯稿己鐑堢殑棰滆壊瀵规瘮,鐢婚潰鐨勫啿鍑诲姏浼氶潪甯稿己鐑,缁欎汉浠殑瑙嗚瑙傛劅涔熶細鏇村姞鍒烘縺銆 榛戦粍瀵规瘮鏄潪甯哥粡鍏搁厤鑹叉柟妗,铏界劧鍙湁...
绛旓細瑕佽惀閫犲睍鍘呰淇璁捐鐨楂樼骇灞傛鎰锛屾澀宸為害鐢拌楗拌涓哄彲浠ヨ冭檻浠ヤ笅鍑犱釜鏂归潰锛1. 绌洪棿瑙勫垝鍜屽竷灞锛氬悎鐞嗚鍒掑睍鍘呯殑鏁翠綋甯冨眬锛岀‘淇濆睍绀哄尯鍩熷拰娴佸姩鍖哄煙鐨勭晠閫氾紝骞惰冭檻涓嶅悓灞曞搧涔嬮棿鐨勫叧鑱斿拰鍛煎簲銆傛牴鎹睍鍝佺殑绉嶇被鍜岀壒鐐癸紝绮惧績瀹夋帓绌洪棿鍜屽睍绀烘柟寮忥紝浣挎暣涓睍鍘呭憟鐜板嚭缁熶竴銆佹湁搴忎笖绮捐嚧鐨勬劅瑙夈2. 璞崕鏉愯川鍜岀粏鑺傦細閫夋嫨楂...
绛旓細褰撲綘璁捐鐨鏄浘鐗囩殑鏃跺欙紝鍙渶瑕佸皢鍥剧墖杩涜閬尅灏卞彲浠ヤ簡銆傚叾娆★紝鍦ㄥ浘鐗囧眰娆℃劅涓嶅己鐨勬椂鍊欙紝杩樺彲浠ラ氳繃璋冭妭瀵规瘮搴︽潵鎻愰珮鍥剧墖鐨勫眰娆℃劅锛屼笉绠℃槸榛戠櫧鑹茶皟杩樻槸鍗曡壊璋冪殑鍥剧墖锛岄兘鍙互浣跨敤瀵规瘮搴︺傚鏋滀娇鐢ㄥ姣斿害锛岃繕闇瑕佹敞鎰忚壊褰╃殑鍒嗗竷锛屼笉浠呴渶瑕佽鍥剧墖鐪嬭捣鏉ユ瘮杈冮泦涓紝杩樿纭繚棰滆壊涓嶅け鐪熴
绛旓細鍟嗕笟绌洪棿瑁呬慨璁捐涓紝澧炲姞绌洪棿璁捐鎰鐨勬柟娉曟湁寰堝銆備互涓嬫槸涓浜涘父瑙佺殑鏂规硶锛1.閲囩敤鍚堥傜殑棰滆壊鎼厤锛氶鑹茬殑杩愮敤鍙互甯姪鏀瑰彉绌洪棿鐨勬皼鍥村拰瑙嗚鏁堟灉銆備緥濡備娇鐢ㄦ槑浜殑鑹插僵鍙互璁╃┖闂存洿涓哄紑闃旓紱鑰屼娇鐢ㄦ殩鑹茶皟鍒欏彲浠ュ甫鏉ユ俯鏆栧拰鑸掗傛劅銆2.鍏呭垎鍒╃敤鍏夌嚎锛氬悎鐞嗙殑鍏夌嚎杩愮敤鍙互澧炲己绌洪棿鐨勫眰娆℃劅鍜岀珛浣撴劅銆備緥濡傚埄鐢ㄨ嚜鐒跺厜鎴栬...
