全文1万4千字，讲解文字编排有两个层面的作用。其一，它做了一些传递信息的工作；其二，它自身在合理地编排下就会有韵律的美感。
在通常版式设计中，一般是由文字、色彩、图形三个要素组合而成的。通过这三个要素的有机搭配，从而给人视觉上造成一定的冲击，激发人们的阅读兴趣。
其次，文字组合编排是构成版式设计中最主要的构成要素，也是传递信息的重要的设计手法和策略。字体的选择是否合适则会直接影响版式的效果，虽然能现在可供选择的字体五花八门，但是所选择的字体要能够与版式的主题相吻合。除此之外，文字的字号也会影响阅读，在排版时要注意文字信息的等级关系，做到有主有次。
如果文字从发明出来的那一刻起，就是为了记录和传递信息，那在版式中的文字就是通过设计设计手法来更好的传递信息。
怎么去理解这句话呢？如果大家看过《王牌对王牌》这节目，里面有个游戏叫传声筒，里面的游戏规则是“每队轮流参赛，每队任选5名成员，每个成员用隔板隔开，第一人将对手所出题目，演绎给队友，只能通过音效和动作表达，依次传递给下一位队友，经过三四个人传递后最后一名队友，猜测题目上的信息。猜对得一分，最终积分高的一队获胜。”
这种形式像不像设计师的日常呢？老板或者领导有个“牛批卡拉斯”的想法,然后他在想法告诉运营总监或者文策划总监，然后在由下面的运营/策划专员做成方案，最后在交给设计师做成图片来传递老板那个“牛批卡拉斯”的想法。
那么文字组合怎么去编排就成为将老板的想法完美的传递出来的关键要素，为了不南辕北辙，我们需要将文字编排的形成方案，并在实际的工作中通过不断的实践去完善，那让我们一起来了解下文字组编排的技巧吧。
一般的软件里面都会有字体选择器，我们需要找想要的字体的时候都是直接在里面去搜索，然后再去点击使用，那么今天我来看看怎么通过观察字体家族的特征来找到我们想要的字体吧。
家庭中的所有成员都有各不同的称谓来辨别身份，在字体家族中也是如此，我们通过不同的前缀后缀的缩写来区别字体的样式。
例如：字体前面的LT代表的是莱诺字体公司，如果我们使用的字体前面或者后面带有LT，那就说明这个款字体是由莱诺字体公司出版的。
当然，我们日常看到字体厂家也会有很多，例如常见的MS是微软公司，MT是蒙纳字体，ITC是国际字体公司等等，一般字体公司的名称的缩写为连着的大写字母，所以我们看到字体中带有2-3的大写字母，我们可以默认他们是字体公司的名称缩写。
那刚刚我们看到LT后面还有STD，那个是什么意思呢？STD是英文单词“Standard”的缩写，代表着这个字体只支持基础的字符集，它的字体字符集相对会少点，与其相对应的“PRO”是英文单词“Professional”，则是代表字符集比较多的后缀。
既然字体家族的缩写那么多，那我们怎么把它规整好方便记忆呢？方便我们通过不同的前缀后缀来区别字体的样式。正常的我们讲字体家族系统一分为三类，1.字体的宽窄，2.字体的造型，3.字体的字重。
宽窄系统：只有比较大的字体公司去做这类型字体，因为不常用，所以做的就比较少，汉字里面好像汉仪旗黑又宽窄系统，那我们怎么去识别呢，以Ai为例子，如果我们在字体后缀发现带Condensed，那么我们可以确定这个字体为窄体，以后如果我们在字体后缀发现带Extended，那么这个字体则为宽体。如果设计中有特殊的需求，需要我们可以通过后缀去识别。
造型系统是为给不同应用场景下字体做区分的，正常的分为：常规体，意大利斜体，空心体，装饰花边，老式数字。
常规题：常规体的后面一般带Roman或者Regular,带着着这个字体里面最常用也是最适中的字体。
意大利斜体：英文后缀一般带Italic,这类型的字体一般是专人设计过的倾斜体，比软件生成看起来更加舒适和谐。例如有的字体公司为了区分窄体的倾斜体，有的也会用这个单词，oblique,但是意大利斜体（Italic）代表的是常规字的倾斜体。
空心体：英文后缀一般带Outline,在一些大型的字库公司设计的字体会有，他打出的字不是实心的，而是空心字类型的，常见会在比较粗的字体上会有，因为这个的字体变成空心字不容易破坏字体的负空间。
装饰花边：英文后缀一般带Ornament，这种类型的字体一般比较少见，只要一个字体的字库做到比较全的时候，才会考虑开发类似的字体。这个可以理解为字体类的素材，一般的应用场景比较少。
老式数字：英文后缀一般带Oldstyle Figures，比较明显的特征是高低不一样，这类型的字体一般应用在小写字母的编排中让数字看起来更和谐。
标题专用字：英文后缀一般带Titling，这类型的字体在放大后使用看起来比较精致，细节相对比较丰富，但是也有特殊的，例如Caslon字体的标题字用的是540的后缀。所以当找不到的时候我们可以通过细节去分辨。
字重的选择一般是根据当前的选择的字体去跳两个字重去选择，这样才会有对比。字重也是我们设计中常用的选字模式。
我们认识了字体家族对我们做设计有什么作用呢，一个字体家族越全面，我们做设计是可以选择的范围就越大，也就越方便，所以我们接到需求，需要选择字体排版的时候，大致看下字体家族，就可以分辨出这款字体是否适合我们去使用。
需要做好文字组合的编排的基础是需要选择合适的版面气质的字体和相对应的中英文混合编排。
中文字体属于方块字，具有字体的轮廓性，并且每个字符占据的空间都是相同的，限制较为严格，如段落开头必须空两格，竖排文字必须从右到左等规则。中文字体是一种非常规整的文字，因此灵活性相对较小，编排难度较大。
一般情况下，英文字体采用流线型方式，灵活性很强，能够根据版面的需求灵活变化字体的形态，以解决版面僵硬、呆板的问题，创造出丰富生动的版面效果。
在版式设计中，经常会遇到中英文对照的情况。中文字体的象形、会意等特征和英文字体的简单、图形化的特征充分结合，展现两种字体的优势。编排时应该注意中文字体与英文字体的设计创意与主次关系，做到层次明确，并且要注意字体的统一性，如果字体变化过多，很容易造成版面的混乱。
我们在聊中西文的编排之前我们需要先了解下西文的历史，就像我们在打王者荣耀一样，要学习某个英雄，就先得了解英雄的技能，然后才是这些技能怎么去搭配使用，学习文字组编排也是一样的道理。
设计的目的一般是为零解决一些生活中的问题，字体的演化设计之路也是一样的，都是通过外部能力能触达的能力加上内部的需求所达到的最优的解决方案。现在我们将西文字体在历史上的进程可以分为“文艺复兴体” “古罗马衬线体”“过程型衬线体”“粗衬线体”“无衬线体”。
我们可以大致简单的把基础款的字体分为两种，一种是一种是衬线体和无衬线体，衬线体（Caslon,Baskeville，Bodoni,Didot,Garamond,）,无衬线体（DIn,Helvetica）,
衬线体
Garamond是一个早期字体，有老式数字，雕刻感比较强，有倾斜体，
Baskeville修饰比Garamond要粗点，稍微有点厚重感，偏向优雅，特征明显，
Bodoni笔画有明显的过度，比较现代，
Didot比较常见，特征更明显，现代感更加强，女性感强，多用品牌，杂志，简化大胆。笔画对比更加大，出现的比较晚
无衬线体
Helvetica，特征，比较平稳，没有特征，没有华丽的装饰，在国外特别受欢迎
DIN，和Helvetica区别：变化性特殊，切口有角度性的变化，更加简单干净。偏向美术字体数字的几何形强，比较抓眼球
Futuer:菱角分明，几何无衬线体，冰冷，升部比较高，比较高挑，多用于科技感比较足的设计中。
因为基础款的字体很多字体公司都会去做，我们可以通过谷歌可商用字体库去寻找免费字体寻找：http://www.googlefonts.net/
中文的基础款排版字体一般为黑体，宋体，圆体，楷体和一些风格多变的美术体。
衬线体
最早是为适应印刷而出现的一种汉字字体，笔画粗细有变化，而且一般是横细竖粗，末端有装饰部分，（即字脚，衬线），点，撇，捺，钩等笔画有尖端，属于衬线字体，常用于书籍杂志报纸等正文排版，赵集，瘦金体。
思源宋体，前身是小塚明朝体改进的，笔画特征比较相似，小塚明朝横笔画要细点，思源宋体横笔画要粗点。
无衬线体
黑体，屏显字体，无论放大还是缩小都能看的清晰，黑体可塑性比较强，常用于标题字的制作，小的可以作为内文，黑体有称作方体或者等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹全部一样粗细，结构严谨醒目，笔画粗壮有力，撇捺等笔画不尖锐，使人易于阅读。由于其醒目的特点，常用于标题，导语，标志等。
思源黑体：是最广泛知道的字体，质量高，7个字重，
汉仪旗黑：可以满足所有的排版的需求，宽窄系统也有。
在我们日常的设计工作中，衬线体和无衬线体该怎么选择呢？我相信很多设计师都在这个问题上纠结过。我们来结合历史来看看这个问题吧
我们把时间倒退到欧洲17-18世纪，这个时期盛行一种艺术“巴洛克艺术”和“洛可可艺术”，巴洛克是一种更早期的宏大而华丽的艺术风格，后世有人将洛可可风格看作是巴洛克风格的晚期，即巴洛克的瓦解和颓废阶段。它产生在反宗教改革时期的意大利,发展于欧洲信奉天主教的大部分地区,以后随着天主教的传播,其影响远及拉美和亚洲国家。巴洛克作为一种在时间、空间上影响都颇为深远的艺术风格,其兴起与当时的宗教有着紧密的联系。然而它不仅在绘画方面，巴洛克艺术代表整个艺术领域，包括音乐、建筑、装饰艺术等，内涵也极为复杂。
基本的特点是打破文艺复兴时期的严肃、含蓄和均衡，崇尚豪华和气派，注重强烈情感的表现，气氛热烈紧张，具有刺人耳目、动人心魄的艺术效果。所以它代表那个时期最流行风格。同时我们可以看看那个时期所产生的字体，也是一样浮夸，装饰性明显。
我们在把时间拨20世纪德国，一所代表着现代主义设计风格的学校诞生了，包豪斯学院，德国魏玛市的 “公立包豪斯学校”（Staatliches Bauhaus）的简称，后改称“设计学院”（Hochschule für Gestaltung），习惯上仍沿称“包豪斯”。在两德统一后位于魏玛的设计学院更名为魏玛包豪斯大学（Bauhaus-Universität Weimar）。它的成立标志着现代设计教育的诞生，对世界现代设计的发展产生了深远的影响，包豪斯也是世界上第一所完全为发展现代设计教育而建立的学院。包豪斯风格成为了现代主义风格的代名词。
而包豪斯的设计理念：把简单的问题把形成标准化，强调一些构成上的东西，所以在这种观念的影响下，就产生了一些非常好看的无衬线字体。
而在现代化风格的影响下，产生出了工业衍生品也非常简约，现代。
做设计是一个入世学，所有的问题都需要结合现有的场景来看，我们上面聊完每个时期艺术熏陶下所产生的字体，那么我们结合实际情况来看下，我们和我们的父母都是在不同文化体系下所产生不同审美观的人。左边度图是我们绝大数父母喜欢的装修风格，像洛可可那时候一样浮夸，而我们却喜欢简约的现代风格。
那么字体也是一样的，有衬线的字体属于比较古典的气质，简约的无衬线字体则是比较现代的工业风。
也不是所有的衬线字体都是比较古老的，而Didot这款字体因为它造型的特性，也会经常出现在杂志封面和一些奢侈品的设计中。从时间的角度来讲，最有历史痕迹的是括弧线衬线又称古典型衬线，其次是过渡型衬线到粗衬线，最现代的就是极细型衬线。
而中文的衬线体没有明确的区分，但是我们可以根据字体特征按照西文的类目去区分。
那上面谈到，不是所有的衬线体都代表古典或者历史的厚重感，所以无衬线体也不是根据出现时间和之前的应用场景也是有区分的。
西文的无衬线体分为传统型无衬线，人文主义无衬线，和现代主义无衬线（几何形无衬线），传统型无衬线的G开口的地方都是水平的，开口的地方也比较小，看起来比较保守，母A它的笔画是由粗到细，落差不是特别的大，字体造型也比较稳重。人文主义无衬线它慢慢的开始出现一些倾斜的特征，这样它的开口处可以做的更大一点，它的负空间也会更大一点，字母A为了让它的负空间也就是字谷变的更大，它的笔画粗细变的更大了，手写的感觉会更多一点，现代主义无衬线体字母G它不仅开口要大，而且还有很多圆形切割的特点。几何的特征会更浓厚一点，我们把这个特征称为几何型无衬线字体。
中文的无衬线则分为传统型无衬线，中间无衬线，现代型无衬线。在汉字的黑体里，分为2类字体，一类是有喇叭口的，一类是没有喇叭口的，喇叭口的造型特征是在笔画的转折或笔画造型丰富的地方会有一些向里面凹陷或微微凸起的造型特征，没有喇叭口的字体特征是在任何笔画造型都收拾的比较干净利落。像传统和中间型无衬线都是慢慢像现代型无衬线演化，喇叭口慢慢的演化成工业的切口风。
字体的选择我们应该基于合适的主题，合适的用字场景以及使用平台或者场景，这样才可以选出合适的字体。
合适的主题：这点适用可以在运营设计或者平面设计中，我们接到的需要适用何种风格，例如国潮肯定会选用毛笔字这种张力比较强的字体，在例如比较有工匠精神的工艺品可以选用有手工感的宋体字。
合适的用字场景，看选用的字是用在标题还是还是正文，标题字可以选用张力比较强的字体，因为标题的文字需要醒目，可以直接传递版面需要表达的主题，而正文需要阅读文本则选择无个性的黑体比较合适。
适用的平台，设计展现的平台也是对字体选用的影响的关键因素之一，例如在iOS上选用苹方字体，安卓上选用思源黑体，PC选用微软雅黑都可以减轻开发打包的大小。
我们为什么要做中西文的那我们在中西文搭配的时候应该怎么去搭配呢？下面是我总结的三个方向：
1.细节类似，细节类似我们可以观察字体的细节进行搭配
2.时间相同，就是在某一个时间节点下同时产生的两款字体。
3 .气质相同，这个是在汉字里面才有的，我们常见的字体除了宋体和黑体外，还有是书法字体或手写体，这类型的字体在通常是不太好搭配字体的。
那要是原字体的西文不太好看，我们怎么去搭配呢？、
外形类似
带有这种转角圆滑的装饰线的宋体字我们一般是搭配古典型的衬线体，这样搭配起来会更舒服，或者汉字的黑体搭配西文的无衬线体，因为它们特征是一样的，然后就是中文的圆体也同样会搭配一个西文的圆体，这些都是细节类似的搭配方法。
时间相同
是看笔画相似来匹配的，我们可以看到下面这个中文的笔画特征是带有喇叭口，这种类型的黑体很明显是印刷工业时代的产物才会有的特征，而右边的西文是粗衬线字体，也是带有工业时期复古的感觉，而且产生的时间也是比较近似的，一个是20世纪左右产生的字体，一个是19世纪产生的字体，这两款字体搭配在一起可以凸显工业感，稳重感，复古感都有，这也是时间匹配法。
气质相同
例如在中国像楷书字体的特征独特，但是英文的字体没有类似特征的字体，所以楷书和宋体在中国都可以列为书法体，在气质上是相同的，所以搭配在一起也是比较常见的。
另外我也总结了一些常用的字体搭配方法，放在下图了，这些只是给大家平常搭配字体时候的一个参考依据。
我们在日常的的设计工作中，无论是哪种设计，都会涉及文字组的编排，我们可以观察到一般的文本分两种组合，一种是标题文本+说明性文本。
标题文本主要放置版本需要传递的重要信息，说明性文本是辅助传递标题文本的含义。
对比广泛的存在于我们的生活中，对比的形式也是多种多样的，例如身高的高矮对比，体重的胖瘦对比，速度的快慢对比等等。在设计领域内，对比是最常出现的形式。对于信息来说，适当的对比可以让信息层级更加清晰明了，同一层级的信息更加丰富。对于画面整体来说，恰当的对比可以很好的制造出焦点(画面主体)当我们需要突出某一个元素的时候，其他的元素相应的就要做出对比关系，才能保证主体的突出。
字号对比是最快可以提现内容层级关系的一个设计点，一个版面里面不会有太多的文字层级，一般保持在3-5个层级，大部分的软件都会自己自带的推荐字号，为什么最小的字号是6号，因为印刷里是可视的极限。
常见的字号比例有1:1.5,1:1.618,1:1.732,1:2等等。这些比例在正常使用能很快可以做出层级关系且不会有特别大的问题。例如1:1.618是黄金比例，也是很多植物生长的规律，符合人正常的审美感受。
行距比例如果没设置合适，对阅读会造成影响，很容易造成眼睛是视觉疲劳，看来不舒服且文本不容易阅读。
当行距设置到合适的时候， 我们阅读起来会比较舒服，也会提高阅读效率。
行距的设定也可以套用固定的算法：字号*倍率＝行距。
我们在日常的设计工作中，当行距调整到比较合适的大小的时候，版面会具备层次感 ，但超过一定限度也不太好。那行距的调整具体有哪些用途呢，1.平衡版面，2.阅读效率
例如现在整个版面看起来比较轻盈，那么我们可以选择一个比较大的行距，因为中间的空比较多，所以看起来并没有那么重。例如我们现在的版面非常重，我们需要平衡他，那我们的行距就可以给近一点，让文本块在视觉上更重，这就是平衡的作用。
行距的设定大小会影响我们阅读的效率，例如行距比例小的，一般用在标题文本，因为标题的文本一般需要我们快速阅读并了解清楚。
字距大设定也对人的阅读也会有影响，字据过大的时候像树懒说话一样慢，字据小的时候感觉说话比较快。
当字距是-800时候的感受，感觉想动漫里的树懒一样，说起话来慢吞吞的。
当字距是--100时候的感受，感觉像和人在吵架一样，说话的语速比较急切。
在一般的平面设计中字据设定为正负40-70之间去选择，但是在UI设计中，字距一般为0.
同时字距也会受到中宫的影响，在同字号的情况下，微软雅黑会比其他字号大一号，中宫越大，字面也会越大，因为笔画外扩，中宫大的字体，字面大，默认间距小
中宫大的字体，字面大，默认间距小，他的字距可以给大点，中宫小的字体，字面小，默认间距大，他的字距可以给小点，
例如平方字体，正常0间距做内文会比较舒服，但是作为标题，调了之后会读起来比较连贯。
无论是西文还是汉字，他的形状都会不一样，有圆形的，正方形的，三角形的等等，不同的形状，负空间是不一样的，不同的字号是需要微调字距的，我们需要软件视觉来调整。
在AI中有个功能是基于视觉对齐，我们开启便可以解决这个问题。
分栏的宽度，决定了一行的长度和字数，当栏宽太长的时候，我们阅读可以会比较吃力，总感觉一眼看不到头。
一行多少字合适呢？一般的是20-30字之间，极限是15-30之间比较合适，一行字太少和太长都会让人很累，，这也是为什么有的书为啥读不下去的原因。
这也是为什么很多娱乐消遣方便的书一页的字很多，也是为为了提升阅读的兴趣。
文字设计的成功与否，不仅在于字体自身的书写，也在于其运用的排列组合是否得当，文字层级之间的关系，适用规则，栏距＞行距＞字距。
上面的舒服，因为粗细对比比较平衡，下面面的对比过度，什么时候下可以做强对比呢？做了字号对比，就不要做过大的字重对比，
在现在的板式设计中，有一个被忽略的知识点，就是标点符号。标点符号在当今社会不仅仅是用来断句，也是可以用来传递情感，例如下图，同一句话因为加了不同的标段符号，所传达的意思就完全不一样了。
所以标点符号的运用与文字组的编排在板式设计中同样的重要，例如在聊天的时候，我们随意的时候的问号在正式排版中，“！”和“？”的叠用不能超过3个。
你一句话表达惊讶和疑问的时候，我们应该将问号放在前面感叹号放在后面。
例如有书名号的文本段是不在需要用顿号去隔开的，如果当书名号后面有括号则是需要用标点符号去把他们分割开来的。
当然还有就是逗号和不能在一段的前面等等，这些都只是给各位小伙伴一些拓展知识，有兴趣的小伙伴如果想自己的板式更加规范可以自己去查阅相关资料。
梳理信息层级有哪些作用呢？我们在自然界中会发现很多与阶级有关的现场，例如狼群里，一般都会有头狼，也叫狼王，主要是统领狼群的行动及群体意识，在企业中，老板作为一个公司的核心人物，一般正常的普通员工去离职，不会影响公司的正常运作，但是如果涉及到公司的老板不知下落或者企业的核心管理层离职，会对公司的股价和正常的业务流程造成很大的干扰。
在我们日常设计中编排文字组也是一样的，我们首先需要确定接到的需求哪些是重要且关键的信息，哪些是次要信息。当它的重要层级越高，他在版面中所扮演传递信息的角色就越重要，我们接下来便是通过设计手法，例如通过字距，笔画粗细，颜色，以及字体等等来做出层级的区分。
那我我们一起来看看实际的案例吧！
梳理信息层级有哪些作用呢？我们在自然界中会发现很多与阶级有关的现场，例如狼群里，一般都会有头狼，也叫狼王，主要是统领狼群的行动及群体意识，在公司中，老板
1.首先是它会便于传递信息的中心思想，有助于用户快速理解，所以一般大标题文字很对都会做效果，有助于提升视觉的焦点，2.信息层级分明，主次有序的在版面中传递信息，3.降低视觉噪音：当版面中的文字信息案例主次有序的排列后，版面看起来比较和谐，所有的元素感觉是本应该就在那里的。
如果信息层级没有梳理过的版面，则会阅读起来非常的吃力却效率低下。
关于文字编排节奏感，很多人应该好奇了节奏不是音乐的范畴吗？怎么文字编排也说有节奏吗了？
其实节奏感随着地球开始有生命开始便存在了，因为太阳升起到落下是有着自己每天固定的节奏的，太阳升起人开始劳作，看着周围的动物和植物都一天天有变化，感受着自己由青涩稚嫩到迟暮之年；这些有规则的事物形成的固有的节奏。
在文字编排中也可以感受到这样的节奏，例如，字体是直线还是曲线，垂直还是水平，倾斜还是正立，紧凑还是宽松，对称还是不对称……这些都体现着文字的节奏。段与段之间的留白多少，字间距的大小都是有规律可以寻找的，如果文字组合被有规律的设计、排版，那在设计稿中本身就具有了一种节奏感的吸引力。没有节奏就不会有生命，也不会有任何创造。
好听的因为是因为音乐的节奏会有起有伏，有前奏有副歌有高潮部分，这样的音乐才不会让人觉得平淡，我们转换到文字组编排也是一样的道理，当我们把一些没有节奏感的书籍拿出来看是会觉得很困的。
如果我们加以设计的手法，把文字组合好好的排版一下，这是可以提升我们对内容的阅读兴趣的。例如我们阅读的杂志和一些资讯类的APP，他们对文字和图片的排版就会很下心思。
那我们怎么打造自己设计中的节奏感呢？那接下来我们聊聊怎么通过阅读视线心理去引导用户。首先是基础的视觉逻辑，让用户渐入佳境，通过常规的的阅读习惯，其实是根据大小、色彩、线的指向去引导用户的视线节奏，其次是视线引导，根据用户的常用逻辑打造版面中的节奏感。
我们平时在看版面的时候的视线观看逻辑是怎么确定的呢？1.根据日常的书写逻辑：我们看图习惯和我们日常的书写习惯是密不可分的，一般是从左至右，从上到下，所以我们很少会看到从右往左的排版和从下往上的排版，因为这样的不符合人的逻辑，
因为每个人都心理感受都不一样，所以当视觉引导不一样的时候，传递的感受也是不一样的，文字组合的目的是为了增强其视觉传达功能，赋予审美情感，诱导人们有兴趣地进行阅读。因此，在组合方式上就需要顺应人们的心理感受。人们的一般阅读顺序是:水平方向上，视线一般是从左向右流动；垂直方向上，视线一般从上向下流动；大于45°斜度时，视线从上而下流动；小于45°时，视线从下向上流动。
板式的阅读顺序有两种：从左到右和从右到左。这是人们平时惯性的限制，就好像写文章一样，一旦决定了从左到右写，就不会更改，板式也是如此，一旦决定了板式的阅读顺序，许多元素都会随之被限制。
横排文字
正常我们去阅读横排文字就是先从左到右，从上到下的规律去阅读。
竖排文字
竖排文字的阅读顺序是从上到下，整体在从右上至左下。我们无论是横排版还是竖排版，行距都是要大于字距的。
版式设计的核心就是吸引人的视线。当我们在观看某些东西时，大部分的人都有自己习以为常的观看习惯。人们往往在一瞬间就会判断出这是什么？这一现象导致的结果是人们会想起与所看到的东西相近的信息，并判断画面中信息的价值，我们将这种心理倾向称之为视觉心理。视线的引导是建立在视线的移动之上的，在引导视线前，我们需要先建立焦点。
视觉聚焦是在文字组编排中先建立视觉的突破口，然后就再去引导其他的内容。设计师，有一个重要的瓶颈就是，无法在版面中快速的传达主题的中心思想，明明什么信息都有，就是让人抓不住重点。如何一秒吸引别人的注意力，快速get要表达的点？那就是需要在版面中埋下引导别人实现的点。
引导方式可以根据版面现有的内容做大小层次对比，颜色对比，空间对比及元素具有的特有指向性。
人们在日常生活中，通常会先注意到大的东西，在有较大的元素在版面中，我们的视线往往会向大的元素是聚集，从大到小，这样一步一步的去看，在版面设计运用这样的小技巧，我们阅读起来相对来说比较顺畅。特别是当两件物体颜色或材质相同的时候，视线往往会集中在大的物体上。根据这一原理，应该尽量放大希望吸引读者注意的东西。
通过有序的色彩的引导视线是版式设计中不可或缺的主要元素，同时也频繁应用于视觉引导中。色彩的心理效果在视觉引导中的运用就是：人的目光首先会注意众多色彩中不同的那一个。例如下图中，当色彩是蓝色的时候，是没有焦点的，当出现别等颜色是特别吸引人的目光的。
然后在加上大小的对比之后，吸引我们眼球的肯定是下面这个大圆形。
如果在下面这个大圆形去改变颜色，这个便会更加大吸引人
其次是亮明度高的颜色比明度低的更吸引人的目光。
暖色调比冷色调会更加吸引人
我们正常的浏览顺序是从左至右，从上至下，那当我们怎么打破这个顺序呢？首先是暖色＞冷色，明度高＞明度低的，元素大的＞元素小的，那下图我们浏览顺序应该是先看红色，在上面开始看，其次是右边和下方。
引导是一种视觉的语言。一幅好的设计作品，用户的视线一定是被控制在主体和兴趣点上，而不是被其他与主题无关的杂物所吸引，只要用好视线的引导，才可以传递我们想传递的。
当版面中出现箭头或者人脸等相关指向性的图片或者元素出现，是因为古希腊毕达哥拉斯学派和柏拉图认为眼睛在捕捉物体时，视线、目光和力量会以物体为目标，从眼睛向物体方向传送，把这一想法用设计原理来表示时。这时候的带有指向性的图片或者元素，便是视觉的切入点。
线作为板式中的引导，也是非常常用的，它既可以作为引导视线的切入点，也可以填补画面中的空白点。
线除了是直线，还可以是曲线，文字组成的线或者负空间形成的线，都是具有引导视线的作用。
我们从小在学校学习了数字的大小顺序，在在考试时，我们会顺着考生号找座位，坐车时顺着车票找座位。我们生活中还有很多地方会应用到编号。所以我们的目光会随编号移动，是因为我们一直就有这样的习惯。如果看到1，就自然会找2，看到A会去寻找B，视线就会这样一直移动下去。
设计离不开构图，构图通俗地讲：就是为了表现画面的主题思想，而对画面上的人或物及其陪体、环境作出恰当的、合理的、舒适的安排，并运用艺术的技巧、技术手段强化或削弱画面上某些部分，最终达到使主题形象突出，主体和陪体之间的布局多样统一，画面疏密有致，以及结构均衡的艺术效果，使主题思想得到充分、完美的表现。
当我们把文字组编排好了，可以通过构成形式将他们串联起来，这才是好的排版，能快速想到版面的效果。
居中构图是最常见的构图，指的是将画面的主要元素放置在版面的中轴线上，目的是快速吸引眼球，占据视觉焦点，突出主体。中心构图的版式简洁、利落，给人以雅致的视觉感受。在突出主体的同时又能赋予画面稳定感，并使整体画面具有一定的冲击力，需要表现规整稳定、醒目大方的版面时，可以使用居中构图。其次对称构图是居中的一种特例。
对称的形态在视觉上有自然、安定、均匀、协调、整齐、典雅、庄重、完美的朴素美感，符合人眼的视觉习惯。平面构图中的对称，可分为点对称和轴对称。在平面构图中应用对称法则要避免由于过分的绝对对称而产生单调、呆板的感觉。有时，在整体对称的格局中加入一些不对称的因素，反而能增加构图的生动性和美感，避免了单调和呆板。能够突出主体，聚焦视线，当制作的图片没有太多文字，并且展示主体很明确的情况下，可以使用对称构图，在电影海报中也是比较常见的。
斜线式构图又称倾斜构图，是将文字或者主体物以倾斜的方式放置在版面当中。倾斜的角度产生势能，给人以引导作用。优化视觉层级，清晰的传递信息。让比较呆板的画面具有活力和生机，当制作的版面需要冲击、不稳定效果时，可以使用倾斜式构图，需要冲击感和不稳定感时可以尝试，也可以做透视，让他有近大远小的空间感。
曲线式构图指的是版面中重要元素呈曲线排布，其他元素填充剩余空间，曲线具有灵活的属性。其中“S”形状从前景向中景和后景延申，画面构成纵深方向的空间关系的视觉感，所以曲线构图的版面常常显得充实、热闹、生动、空间感。具有曲线的优美而富有活力和韵味，需要有力的表现场景的空间感和深度时，可以选择S形构图，例如瑜伽海报。
要表现画面的空间感和纵深感也可以用S型购物，这也是S型构图的特性，让画面更有空间感。
压角式构图适用于标题字数较少的版式设计，标题作为绝对重要的元素放置四角，一眼就能被看到。要做好压住四角的版式设计得进行网格构架，控制好版面之间的比例。这种构图形式使得画面更加稳定，突出中心主体。
散点式构图是指主体数量较多，散落在画面当中的构图方法。在应用散点式构图时应防止散乱，宜用隐性结构线或结构形将各个“点暗连起来，相互呼应形成联系。”适用于标题文字稍多的平面版式设计。文字排布时，拉开字的间距，在版式上化作为元素。标题文字的纵向距离要大于横向距离，否则容易误导阅读顺序。当文字信息比较多的时候，可以选择散点构图。
三分法是一条法则，同时也不是一条规则。 这个说法很拗口，我们来理解一下。 从本质上讲，它就是我们的眼睛自然感知图像的方式，这些图像被限制在一个边界之内（例如画框）。 这些框架，都有一个固定的长度和宽度; 将这两个属性分别分成三个相等的部分，这会包含两条水平和垂直穿过框架的等距线，形成四个线相交的点，并创建九个相等大小的框架，如下图的九宫格。
而当版面的主要元素分布在三分线或点上，多数人会感觉这个画面会比较和谐舒服，这接近是一种天性和本能了。当然，你还可以举例说很多不是三分构图的例子来反驳我，但这不重要，只要你要知道大部分遵循三分法构图的画面看着都是比较舒服的事实就行了。
古时候的文人墨客的门槛是“知句逗”，我个人觉得设计要想入行设计的门槛便是最基本的文字组的编排，
我们的感觉，即我们的视觉和我们的美感，优于几何结构，当我们在处理黑白对比的平衡时，我们必须诉诸感，
在文字组的编排中，其中包含的技艺、功能和形式设计是绝对不能分开的。当我们作为设计师，做好每一处设计的细节，也是对观看版面用户最基本的尊重吧！
文章来源：优设 作者：Endings
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
B 端设计也是 UI 设计的一种，它的输出环境只存在于电子屏幕中，所以统一使用 RGB 色彩显示模式即可。
RGB 即光的三原色，因为每个像素点是由 R 红色、G 绿色、B 蓝色三种颜色的不同色彩强度混合而成。所以 RGB 色的表示可以由 3 个颜色各自使用 0-255 中的数值来呈现，比如：
这是 RGB 色彩最标准的记录方式，但显然看起来特别的不直观，或者说不方便。所以在计算机中，为了方便记录和调用，使用了一串十六进制的代码来指代具体的 RGB 色。
理论上，我们只要使用 RGB 模式，随便你怎么选色，只要记录 16 进制码进行复用，你就可以在任何文件、设备中获得相同的色彩。
但在实际显示效果上，不同的系统、设备、浏览器都有自己的调色板，“解释” RGB 代码后给出的色彩就有偏差。比如一样的中文不同方言、语系、背景的人可能听出不同的意思，比如牛子，我以为它是类似“晴子”这样的姓名，至于你们的理解嘛……
相关行业为了避免这样的问题，提出了 WEB 安全色的概念，即这些色彩在不同的显示环境下，能实现最接近的色彩效果。
那么安全色都有哪些呢？网上有很多地方都有对应的色卡或者工具帮助我们选色。建议使用 Google 的 MD 色卡，这套色彩最全，使用范围也最广的颜色。
我们可以通过下面这个链接中的网页工具，帮助我们快速实现选色和复制色彩代码的操作。
网站链接：https://www.materialpalette.com/colors
当然，设计 B 端界面并不是只能使用安全配色，这只是一种建议，可以尽量确保主色，尤其是辅助色使用安全色，而中性色可以自由定义（下面会提）。
第 2 件事，自然就是讲讲该怎么配色了。和 C 端设计类似，我们主要的目标就是在项目设计过程中定义出 主色、辅助色、中性色 三种色彩类型，并把它们应用到合理的位置中去。
只是，针对 C 端来讲，B 端的配色更功能化，更理性，也更简单。我们要学习 B 端配色首先要排除那些花里胡哨的案例，比如下图这种。
过度花哨的颜色会干扰我们对界面的实用和对信息的识别、检索效率，除非是一些政绩工程用来当 “花瓶” 的数据大屏，否则我们首先要排除颜色过度应用的选项。
那么什么主色、辅助色、中性色，我们先简单做个说明。
主色，即你这套产品中的品牌色彩，是整套项目最核心，重要性最高的颜色。主色的选择通常和你的品牌相关联，比如腾讯云的蓝色，阿里云的橙色，七麦的绿色。
辅助色，则是用来在系统中进行强调、标识、区分的彩色系统。品牌或者 C 端设计可能会通过辅助色和主色搭配实现个性化的配色方案，但是在 B 端是没有这种诉求的。辅助色应用的目的性更强，是完全贴合操作效率来制定的。
比如下方是国外流行框架 StarBootstrap Admin 中使用的辅助色，它们都有对应的功能寓意场景。
中性色，则是这套系统中色彩使用的相关灰色，因为灰色是没有色相、冷暖的区别，所以我们也称它们为中性色。主要应用在文字、背景、分割线等基础元素中。
B 端的配色，即了解这三个色彩类型以后，能正确制定合理的颜色，并应用进项目中去。下面，我们分别对每个类别进行简单的讲解。
1. 主色的应用规则
B 端的主色也就是产品的品牌色，多数 B 端项目中，主色不需要 B 端设计师自己选，在项目开始前就会有相关的品牌色、LOGO，直接复制色号即可。
和 C 端配色最大的不同是，品牌色在这里很多时候只是 “吉祥物”，它的存在用来宣示品牌本身的存在，但并不是任何情况下都直接参与界面色彩的填充。
假设品牌色是紫色、荧光黄、暗棕色之类的，那么这类颜色本身的内涵、寓意是难以满足功能需求的，我们要尽可能减少它们的出现面积、频次。
在 B 端设计中，主色的应用是最不需要大面积填充的，即使它是常见、耐用的蓝色、橙色，主色的填充主要只应用在下面这些类型内容中：
2. 辅助色的应用规则
有了主色，我们就要为项目添加其它色彩了。
B 端彩色的搭配原则只有一个，那就是 —— 能省就省。我们不是设计一个让用户发出感叹的色彩丰富绚丽、细节众多的视觉平面，而是设计一个用来使用的软件系统。所以前面举例的那些花里胡哨的反面案例，就一定要在正式项目中敬而远之。
用专业术语来说，配色过程要遵守 “奥卡姆剃刀原则”，如无必要，勿增辅色。
而为了满足功能性需求，可以为 B 端项目添加的辅助色类型其实也非常的有限，按寓意划分常见的也就以下几种：
相信看到这里，你们脑海中已经有画面了。我们会为正确使用绿色、链接使用蓝色、警示使用红色等等。这些都是具有普世性的颜色，与用户的长期经验吻合，没有识别的成本。
而如果为了个性而个性，对辅助用色另辟蹊径，相当于在异国自驾时使用蓝灯行棕色停的系统，异国风情是有了，说翻车也就翻车了。
所以，针对 B 端辅助色的使用上，如果自己没有把握和经验，可以套用下方我们整理的 RGB 安全色，填充到页面对应的元素中去：
用谷歌色卡各选 3 个同类色出来，并进行标记
3. 中性色的应用规则
B 端的辅助色找起来不难，难的是中性色的使用和搭配上。
任何完整的 B 端的项目，同一个界面中都包含了多个模块、层级，以及数之不尽的文本字段。在这么多的内容中，我们要根据模块、文字的权重，选择合理的中性色填充。
新手很容易迷失在中性色的配色过程中，往往一套界面做完以后，使用的灰色或黑色透明度数量根本无法统计，非常的混乱。
所以，为了避免这样的情况，我会建议从开始设计之前就定一套中性色，并将它们添加到设计软件的色彩画板中，每次填充中性色的时候直接从这个色板中选择即可。
那么如何制定这套中性色？首先要理解在电子显示器中，人眼对偏冷的中性色是耐受的（舒适），所以专业的 B 端项目中，中性色都带有一定的冷色色相和饱和度，比如下图是 Element 中性色在拾色器区域的分布，就并不是全灰的。
所以加入冷色是有必要的，同时，我们用 HSB 色彩模式中的 B 值作为中性色灰度的主要量化标准，全黑时 B 值为 0，白色为 100，每个定义出来的灰度都可以用 B 值作为代号，如 B20、B40 等。
我们根据这个标准，定义出 5-8 级的中性色，就可以满足项目中的大多数场景。
虽然会有一些项目会使用透明度来制定灰度等级，比如黑色的 80%、40% 透明度，但我更建议将透明度使用场景和实际色值定义区分开来，只有在色彩的不同状态（选中/失效等）下再应用透明度。
有关 B 端配色的部分也就先说到这里，B 端配色远远比 C 端更简单，也更枯燥。可以使用的色彩范围更小，套路也更一致。我们要做的，就是将它们合理进行填充。
B 端设计也是 UI 设计的一种，它的输出环境只存在于电子屏幕中，所以统一使用 RGB 色彩显示模式即可。
RGB 即光的三原色，因为每个像素点是由 R 红色、G 绿色、B 蓝色三种颜色的不同色彩强度混合而成。所以 RGB 色的表示可以由 3 个颜色各自使用 0-255 中的数值来呈现，比如：
这是 RGB 色彩最标准的记录方式，但显然看起来特别的不直观，或者说不方便。所以在计算机中，为了方便记录和调用，使用了一串十六进制的代码来指代具体的 RGB 色。
理论上，我们只要使用 RGB 模式，随便你怎么选色，只要记录 16 进制码进行复用，你就可以在任何文件、设备中获得相同的色彩。
但在实际显示效果上，不同的系统、设备、浏览器都有自己的调色板，“解释” RGB 代码后给出的色彩就有偏差。比如一样的中文不同方言、语系、背景的人可能听出不同的意思，比如牛子，我以为它是类似“晴子”这样的姓名，至于你们的理解嘛……
相关行业为了避免这样的问题，提出了 WEB 安全色的概念，即这些色彩在不同的显示环境下，能实现最接近的色彩效果。
那么安全色都有哪些呢？网上有很多地方都有对应的色卡或者工具帮助我们选色。建议使用 Google 的 MD 色卡，这套色彩最全，使用范围也最广的颜色。
我们可以通过下面这个链接中的网页工具，帮助我们快速实现选色和复制色彩代码的操作。
网站链接：https://www.materialpalette.com/colors
当然，设计 B 端界面并不是只能使用安全配色，这只是一种建议，可以尽量确保主色，尤其是辅助色使用安全色，而中性色可以自由定义（下面会提）。
第 2 件事，自然就是讲讲该怎么配色了。和 C 端设计类似，我们主要的目标就是在项目设计过程中定义出 主色、辅助色、中性色 三种色彩类型，并把它们应用到合理的位置中去。
只是，针对 C 端来讲，B 端的配色更功能化，更理性，也更简单。我们要学习 B 端配色首先要排除那些花里胡哨的案例，比如下图这种。
过度花哨的颜色会干扰我们对界面的实用和对信息的识别、检索效率，除非是一些政绩工程用来当 “花瓶” 的数据大屏，否则我们首先要排除颜色过度应用的选项。
那么什么主色、辅助色、中性色，我们先简单做个说明。
主色，即你这套产品中的品牌色彩，是整套项目最核心，重要性最高的颜色。主色的选择通常和你的品牌相关联，比如腾讯云的蓝色，阿里云的橙色，七麦的绿色。
辅助色，则是用来在系统中进行强调、标识、区分的彩色系统。品牌或者 C 端设计可能会通过辅助色和主色搭配实现个性化的配色方案，但是在 B 端是没有这种诉求的。辅助色应用的目的性更强，是完全贴合操作效率来制定的。
比如下方是国外流行框架 StarBootstrap Admin 中使用的辅助色，它们都有对应的功能寓意场景。
中性色，则是这套系统中色彩使用的相关灰色，因为灰色是没有色相、冷暖的区别，所以我们也称它们为中性色。主要应用在文字、背景、分割线等基础元素中。
B 端的配色，即了解这三个色彩类型以后，能正确制定合理的颜色，并应用进项目中去。下面，我们分别对每个类别进行简单的讲解。
1. 主色的应用规则
B 端的主色也就是产品的品牌色，多数 B 端项目中，主色不需要 B 端设计师自己选，在项目开始前就会有相关的品牌色、LOGO，直接复制色号即可。
和 C 端配色最大的不同是，品牌色在这里很多时候只是 “吉祥物”，它的存在用来宣示品牌本身的存在，但并不是任何情况下都直接参与界面色彩的填充。
假设品牌色是紫色、荧光黄、暗棕色之类的，那么这类颜色本身的内涵、寓意是难以满足功能需求的，我们要尽可能减少它们的出现面积、频次。
在 B 端设计中，主色的应用是最不需要大面积填充的，即使它是常见、耐用的蓝色、橙色，主色的填充主要只应用在下面这些类型内容中：
2. 辅助色的应用规则
有了主色，我们就要为项目添加其它色彩了。
B 端彩色的搭配原则只有一个，那就是 —— 能省就省。我们不是设计一个让用户发出感叹的色彩丰富绚丽、细节众多的视觉平面，而是设计一个用来使用的软件系统。所以前面举例的那些花里胡哨的反面案例，就一定要在正式项目中敬而远之。
用专业术语来说，配色过程要遵守 “奥卡姆剃刀原则”，如无必要，勿增辅色。
而为了满足功能性需求，可以为 B 端项目添加的辅助色类型其实也非常的有限，按寓意划分常见的也就以下几种：
相信看到这里，你们脑海中已经有画面了。我们会为正确使用绿色、链接使用蓝色、警示使用红色等等。这些都是具有普世性的颜色，与用户的长期经验吻合，没有识别的成本。
而如果为了个性而个性，对辅助用色另辟蹊径，相当于在异国自驾时使用蓝灯行棕色停的系统，异国风情是有了，说翻车也就翻车了。
所以，针对 B 端辅助色的使用上，如果自己没有把握和经验，可以套用下方我们整理的 RGB 安全色，填充到页面对应的元素中去：
用谷歌色卡各选 3 个同类色出来，并进行标记
3. 中性色的应用规则
B 端的辅助色找起来不难，难的是中性色的使用和搭配上。
任何完整的 B 端的项目，同一个界面中都包含了多个模块、层级，以及数之不尽的文本字段。在这么多的内容中，我们要根据模块、文字的权重，选择合理的中性色填充。
新手很容易迷失在中性色的配色过程中，往往一套界面做完以后，使用的灰色或黑色透明度数量根本无法统计，非常的混乱。
所以，为了避免这样的情况，我会建议从开始设计之前就定一套中性色，并将它们添加到设计软件的色彩画板中，每次填充中性色的时候直接从这个色板中选择即可。
那么如何制定这套中性色？首先要理解在电子显示器中，人眼对偏冷的中性色是耐受的（舒适），所以专业的 B 端项目中，中性色都带有一定的冷色色相和饱和度，比如下图是 Element 中性色在拾色器区域的分布，就并不是全灰的。
所以加入冷色是有必要的，同时，我们用 HSB 色彩模式中的 B 值作为中性色灰度的主要量化标准，全黑时 B 值为 0，白色为 100，每个定义出来的灰度都可以用 B 值作为代号，如 B20、B40 等。
我们根据这个标准，定义出 5-8 级的中性色，就可以满足项目中的大多数场景。
虽然会有一些项目会使用透明度来制定灰度等级，比如黑色的 80%、40% 透明度，但我更建议将透明度使用场景和实际色值定义区分开来，只有在色彩的不同状态（选中/失效等）下再应用透明度。
有关 B 端配色的部分也就先说到这里，B 端配色远远比 C 端更简单，也更枯燥。可以使用的色彩范围更小，套路也更一致。我们要做的，就是将它们合理进行填充。
文章来源：站酷 作者：百度MEUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大家是不是时常困惑于，B 端的表单设计体现不出高级感？设计发挥的空间特别的少？
那是你没用对发力点~
B 端：设计表单页面时，一方面须尊重用户的习惯，不要在不必要的地方体现差别。总结了 4 个思考问题：
案例：以创建公众号消息自动推送为例
另一方面要考虑信息层次。
搞定了基本要素后，我们开始考虑如何表现信息层次。
在了解什么封装度和信息密度前，我先跟大家讨论一下。什么是表单之间的关系。
我所认为表单之间的关系分为 3 种：
优点：
平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单
缺点：
使用场景：
当需要完成一个简单快速的任务，输入少量信息即可完成创建
优点：
用于复杂任务时，拆解任务进行编排，适当的任务分割，可以降低用户出错率
缺点：
使用场景：
适用于大型、复杂任务
优点：
减少不必要（非重要）的输入项，能适当的减轻用户认知负担
缺点：
使用场景：
特殊场景下使用
那么用一条完整的链路来表达就是：
了解完表单的结构关系知晓利弊后，那么应用在我们实际的场景中表达就是如图所示：
封装密度高且信息密度低
△ 图中案例，仅做示例说明
将一个复杂的任务表单，进行封装后，看起来任务量是不是也变少了？操作起来也不是很复杂了？
小结：
分析了解表单的结构关系，判断表单，寻找共性的内容，将他们封装为一个卡片，也可以封装成一个组。主要的目的就是减少用户认知负担，提升操作/使用效率。
关于使用何种布局方式的判断，应从信息的复杂度和关联性两个维度去梳理。根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。
1. 信息的复杂度和相关性模型
△ 来源：Ant Design；来源链接： https://ant.design/docs/spec/research-form-cn
2. 区隔方式
根据各个信息之间的相关性，判断各个信息模块之间的亲密度，通常情况下，相关性强的内容尽量靠近，相关性弱的的内容尽量拉开层次。
△ 来源：Ant Design；来源链接： https://ant.design/docs/spec/detail-page-cn
3. 注意事项
文章来源：优设网 作者：交互思维
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在 C 端设计中，不管是给车载客户端、手机客户端、电脑客户端设计界面，都有比较具体的规范需要我们学习和遵守。
而唯独 B 端设计，或者说网页设计，我们在网上是找不到具体详细的规范资料的。因为无论是蚂蚁的 AntDesign 还是 Element、Clarity 等 B 端设计系统，其规范都只是针对自己这套产品的设计说明。
当我们不使用这些框架，要完成自定义设计，那么新人就完全不知道该怎么下手。所以，今天这篇内容，就是针对 B 端设计所需具备了解的基本规范进行说明。
帮助大家快速了解和掌握 B 端设计所需的规范知识。
B 端设计是 UI 类设计中的一个大类，它包含了非常多种面向企业、商业的客户端类型，包括电脑、手机、平板、大屏等等，针对不同客户端和系统，基础规范都有一定的差异。本文主要集中在 WEB 端的管理界面设计。
WEB 管理界面虽然看起来和一般的网页差别很大，但说到底，它也是网页的一种，它遵循网页设计的基本原则。我们对规范的解释以网页基础规范为框架展开，并会加入一部分 B 端特有的设计元素规范说明。
主要包含的规范内容包含下面这些模块：
规范的解释，会涉及到不少网页前端制作的知识点，建议立志在 B 端进行深耕的设计师，都要掌握 HTML + CSS 这些前端知识。
我们过去做过这个系列的详解，可以通过下方的链接查看：
还要声明一点，规范中总结的内容，包含 “规则” 和 “建议” 两种类型，规则指的是浏览器、代码等限制产生的硬性规范，而建议则是我根据自己经验整理出来便于大家理解的内容。
在自己的项目中，如果出现 “建议” 无法适应的情况，那么完全可以根据实际场景来做决策，不需要拘泥于我给出的数值和限制。
下面，就开始进入正题吧！
首先，我们来解析一下 B 端布局的规范，即界面排版应该遵守的基本原则。
在前端 HTML CSS 的知识中，需要定义不同 DIV（或其它标签）的长宽数值，并将这些大小不一的矩形进行排列、移动、嵌套，来实现界面的视觉样式。
换句话说，所有置入画面中的元素都包含一个矩形的外边框，无论是文字、图标、图片、按钮、标签还是符号。
所以，在界面的布局中，无论我们使用什么样的内容、字段，对于前端的页面来讲都只是无数矩形的排列过程。我称这种布局的设计思路为 “矩阵布局法”。
矩阵布局法是设计方式和前端开发方式的统一，提升开发阶段实现设计稿的效率和准确性，是每一个专业 B 端设计师都需要具备的素养。
在此基础上，我们还有几个统一的原则需要遵守：
1. 数值使用标准
在 UI 领域中，元素尺寸的定义不像平面设计大多以比例或“感觉”来制定，更多是使用手动输入数值的方法来完成。
主流的系统、规范都会建议我们通过网格化参考工具来辅助我们进行布局设计，比如 Android MD 系统使用的 8*8 网格系统（常用电脑分辨率可以完美支持）。
也就是说，在这个系统中，元素的外边框、间距，都是以 8 的倍数来设置的。这样无论我们在设计还是在开发过程中，对于使用的数值都会有相应的默契。
但是，以 8 的倍数为基准的设计，跨越的幅度有点太大了，比如一个图标，当你觉得 16px 小的时候，那下一档 24px 页可能太大了。所以，我的建议是对于相对比较复杂的项目来说，使用小一级的 4*4 网格来设计，会更兼顾灵活度和数值的统一性。
即设置元素的尺寸、间距的时候，我们都用 4 的倍数来完成，当你觉得元素的长或宽不合适，就对它进行 4px 的增减，比如下面的案例：
要警惕的是，4px 的基准，是针对元素视图边框的值，文字字号、图标栅格等次级内容，并不会受到该原则的影响。且该原则只是一个设计基准的 “建议”，而不是限制，在特殊场景中可以选择打破它。
2. 固定和响应尺寸
使用 4 的倍数完成设计，并不能解决 B 端设计中的所有尺寸问题。因为在 B 端的实际应用中，我们会加入响应式的逻辑，即页面元素尺寸随浏览器窗口的变动而变动。
所以，在设计 B 端界面元素的时候，我们要考虑两种场景，固定尺寸和响应尺寸。
固定尺寸即不管环境发生什么变化，它的大小是定死的。比如图标、标题、LOGO 等元素。而响应尺寸，则是一个 “未知数”，是需要一定的计算规则 “求得” 的。
比如还是搜索栏的案例，搜索框响应尺寸，而搜索按钮是固定尺寸，那么在不同的宽度下面，它们显示的效果如下：
要理解响应式尺寸对应规则，除了了解 CSS 中 Width:auto 属性值的使用外，最简单的就是搞清楚 UI 设计软件中的响应式布局功能。
元素是响应还是固定尺寸是我们在设计过程中就做后决定的，而不是等设计做完以后再看图说话。所以了解固定和响应尺寸的内容，在我们定义组件的过程中就要通过软件的响应式功能进行设置，并需要在后期的标注和文档中进行说明。
3. 常用的界面布局
最后，就是 B 端界面设计使用的主流布局形式了。虽然网页因为画布比手机大得多，设计的灵活性更高，但在 B 端中可以应用的布局形式也不多，只有固定的几种。因为 B 端页面布局中有几个常用需要预留的坑位：导航、标题栏、工具栏、内容区域。
主要使用左右或上下布局两个方向：
左右布局的形式，通常是左侧作为导航区域，顶部作为工具栏使用。这种做法通常是因为系统内模块较多，需要的导航数也多，用户需要经常切换到不同模块中去，所以左右分栏的布局可以很好的提升操作效率。
而上下布局中，则是面向一些处理场景、功能比较简单的平台，导航模块少，且切换的频率不高，主要的操作都集中在内容区域的设置上，没有边栏的影响还能提高操作的专注性和效率。
要使用哪种类型的布局，需要根据当前的项目功能做决定。但即使选择了其中一类，也并不代表我们的工作就结束了，还需要在这个布局的框架下做进一步的规划。
比如，我们需要制定内容区域多栏设计的比例划分、复杂表单填写系统中的内容引导栏、列表条目展开的侧边栏形式等等……
每套项目都需要先确定页面的布局框架，然后再开始针对具体页面、业务内容进行设计，保证整套系统操作方式的一致性。
文章来源：优设网 作者：超人的电话亭
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着项目的不断发展，设计团队在不断壮大，设计师之间的协作也越来越多，相应的沟通和协作成本在不断增加。如何才能更高效的合作，并把设计质量和一致性做的更好，是我们需要去解决的问题。
本文将以 QQ 动漫设计系统为例，分享一些过程中的思考和经验，抛砖引玉，希望对大家有所帮助。
在项目初期，团队设计师的协作方式是通过一个本地的 sketch 规范文件，以复制粘贴的方式来复用一些元素和控件。在设计师协作人数不多，UI 控件改动频繁的情况下，这套流程可以比较快速的完成需求。
但随着项目逐渐成熟，协作设计师人数变多、UI 控件逐渐趋于稳定且需要复用的地方逐渐变多时，之前流程的不足就逐渐凸显出来。
1. 更新通知缺乏自动化
文件更新难以做到及时有效的通知到所有设计师，且需要人工在群里发通知，告知大家更新了文件。有些设计师暂时可能没有相应的设计需求，可能会忽略更新后的文件，造成设计的不同步。或者等到需要的时候才去群里找更新的规范文件，版本容易搞错且费时费力。
2. 全局组件更新困难
由于组件样式是通过复制或修改的方式应用到界面设计中，当规范文件更新时，无法智能的自动更新修改相应的组件，需要设计师人工核对哪些地方有修改。这样很难保证大家的设计版本都能得到统一的更新，当大家使用的组件版本不一致时，输出的界面就会出现杂乱无章的情况。
3. 代码复用率低
开发没法全局调用代码样式，有些样式可能需要反复复制使用，耗时费力，并因此产生的代码臃肿，还会直接影响产品性能。
鉴于设计师目前多使用 sketch+xshow 的工作流程，而 xshow 正好也具备云端管理的能力，故决定以 xshow 作为桥梁，建立一个基于 sketch+xshow 的云端设计组件库，以非常低的迁移和学习成本完成流程优化。
优化后的流程是把 sketch 本地组件库通过 xshow 上传至云端服务器，设计师通过 xshow 云端功能添加到 sketch 中，并在设计文件中嵌入这些云端组件。
这样做能很好的解决上面说的问题：
1. 更新通知自动化
更新文件不用再靠人工在群里发通知，设计师也不需要去找文件，而是在 sketch 中会自动进行提醒。一旦有更新，会在右上角显示提醒消息，设计师只需要点击提醒，下载最新组件文件即可完成更新。
2. 全局组件一键更新
当更新组件库文件后，界面中所有之前使用过云端组件的控件元素都会自动比对更新前后的差异，方便设计师判断是否更新。这种更新最厉害的地方在于，更新是全局的，也就是一旦你确认了更新后的内容，所有界面都会自动按规范进行更新而无需设计师再逐个筛查。这样做既能保证设计稿的一致性，也能大幅提高设计效率。
3. 开发效率和质量大幅提升
开发通过代码把一些常用的样式进行封装，在一些高度复用的场景中直接调用。一方面可以通过调用的形式减少重复样式代码的复制，精简代码，降低软件包体积，另一方面也可以减少不必要的工作量还能方便后期维护。
想要高效解决问题，正确的方法很关键，这里我们用到的方法就是原子设计理论。2013 年前端工程师 Brad Forst 将此理论思想运用在界面设计中，形成一套设计系统，包含 5 个层次：原子、分子、组织、模板、页面，这套理论为组件库的搭建提供了思路和方法。
在实际搭建过程中，因为组件库的搭建工作量往往比较大，需要先明确流程和分工，主要包括以下几个关键步骤：
1. 明确工具流程
因为是搭建云端组件库，所以首先需要有一个云端工具进行管理。针对以 sketch 为基础的云端组件库来说，常用的工具流程包括 sketch cloud，各类云同步盘，第三方云数据库自主部署等等。我们选择的 sketch+xshow 工作流也是基于 xshow 具备云端管理功能，与其他流程本质上是一样的，大家根据项目实际情况合理选择就好。
2. 全面汇总并分类
按原子理论由小到大来对常规控件进行汇总并分类。对于 QQ 动漫项目来说，常见的控件类别包括：颜色、字体、图标、按钮、导航、状态栏、弹窗、列表、标签等等。每个项目所需要整理的组件不尽相同，原则就是对要复用的元素进行整理。
3. 制作样式模板
为了便于维护和提升合作效率，将组件库拆分为几个不同的独立文件，每一个文件由组件库搭建小组成员独立负责，减少混乱。
如果是有多位设计师参与时，因为组件库的元素存在相互调用的情况，会遇到到底谁先做的问题。解决流程分 2 步：
QQ 动漫组件库一共分了 5 个不同文件，分别是：基础、操作、导航、反馈和内容。
4. 搭建本地组件库
1️⃣ 确定命名逻辑
提升设计效率，是组件库存在的重要目标之一，而合理的组件命名起到了至关重要的作用。组件的名称要保证通用性，太独立的命名可能不够兼容其他场景，也会让使用的同学产生误解。
对于组件命名，要多与使用的设计师一起探讨，因为每个人的习惯都不同，方不方便因人而异，所以需要做一些平衡。
比如在做图标命名逻辑的时候，纠结于要先按尺寸分（图标/序号类别/尺寸/图标名），还是按功能分（图标 / 序号类别/尺寸/图标名/状态），不断调整多次，这时候就需要找大家一起探讨，怎么才是最方便的。
命名的方法是尽可能按共用属性由多到少的顺序来整理。比如，图标共用的尺寸属性多，就把尺寸归到上层；如果图标功能分类比较集中，那就把功能名称归到上层。根据实际项目和设计师使用情况的不同，会有不同的命名形式，命名确保效率就好。
在梳理组件库结构命名时，先用思维导图描绘一份结构化地图，方便前期讨论及调整。明确层级关系后，用在多人合作时进行参照，从而统一组件库层级。在做这份结构化地图时，需要列好全部分类、层级、具体名称及示例。
2️⃣ 颜色
颜色库的设计，需要将产品中可复用的颜色汇总并分组，比如品牌颜色，按钮颜色，图标颜色，装饰颜色等等，这样可以使得用到颜色属性的组件更加灵活。颜色的命名规范是：序号_功能/浅色 or 深色/序号 _ 属性 / 序号 _ 状态。例如，04 _ 按钮色/浅色/01 _ 常规按钮/04 _不可点
3️⃣ 字体
字体样式需要做全字重、颜色和左中右三种对齐方式，因为按目前 sketch 的组件逻辑，还不能修改嵌套字体的属性。这些属性可以对应到组件的命名上，字体组件的命名规范是：大小/序号对齐方式/属性/用途，例如 42px/1 居左/常规/主文本。
边做边检查。由于文字组件需要的命名特别多，很容易出错，所以建议是最好每做一组，就检查一遍。检查的时候打开组件样式，如果在组件预览中发现重复或者结构不对的地方，及时调整。
多行文本行高要注意。文字的行高要尤其注意，一定要在前期检查好尤其是多行文本的行高。如果行高前期设置不对的话，非常影响后面文本的扩展性，在用到多行文本时会遇到麻烦。想回头修改的话，因为是最底层的原子需要逐个调整，所以代价是巨大的。
所以一定要开始设置字体组件之前就确定好行高，比如 QQ 动漫组件库中的文字行高统一用文字大小的 1.5 倍，并取偶数作为文本的行高。当然，这里的行高也不是完全规定死，有时候也需要视情况而定。
文本的粗细。文字的粗细也是要在一开始的时候就要设置周全，最好是给所有字号的文字都设置好不同粗细的组件，尽管可能开始用不到，但会提升文字的扩展性，不然后面添加就会比较麻烦。
4️⃣ 图标
图标组件最关键的地方在于使用逻辑和图标规范。比如，我现在做的图标逻辑是：图标/类别/使用场景/具体名称/尺寸/不同状态，主要是按使用的频次来整理的。也可以有其他逻辑方式，以方便使用为准。
图标规范也会影响组件库的整理和日常使用，在做图标组件时，需要定义好图标的最大范围和最小范围，嵌套起来使用才不会出错。图标的规范要严谨，同一个尺寸下的图标视觉面积要保持一致。不然在大小这个层级就会出现，虽然是相同尺寸的图标切图范围，但图标的体量看起来却并不一致。
将纯色或渐变图标中的颜色剥离，并使用颜色组件进行嵌套，这样做既方便替换又能减少图标组件库的复杂度。
对于图标的多种状态，建议做在同一个层级中方便选择。
对于图标来说，直接对画板设置切片即可，不需要再加切片框。如果你的组件库之前用了很多切片来导出图标，可以用 Automate 插件直接清理或设置全局的切片，非常方便。
5️⃣ 控件
有了颜色、字体、图标这些基础元素后再来制作组件就会相对简单很多，只需要通过拼装把通用性强的组件做出来即可。这里可能需要注意设置好布局方式，让内容盒子随着内容的变化而变化。新版 sketch 的布局设置相对于老版本的确实会方便很多，理解起来很容易，所以这就不多讨论了。
6️⃣ 代码组件化
在开发侧进行前端 UI 组件库的封装，实现从设计到开发的样式统一，提升效率和质量。
在优先级上，代码组件化跟 UI 组件化可以同步进行，开发先写好框架，然后随着 UI 组件化的逐步确定，代码也进行相应补充。
5. 构建云端组件库
本地组件库构建完成后，即可通过 xshow 上传至云端，再由 xshow 直接添加到本地 sketch 中，完成整个使用流程的搭建。
6. 权限与维护
为了更好的维护云端组件库，避免更新混乱，需要成立组件库小组，只允许组件库小组成员有编辑权限。日常需求中，如有新增组件，需提交给组件库小组成员审核，通过后方可上传至云端组件库。
在制作组件文件的过程中，需遵循先自测后上传的原则，避免在上传后发现一些诸如命名错误、遗漏、嵌套混乱等问题，造成麻烦。
7. 编写规范文档
文档的作用是给相关同事查阅，形成标准化使用流程。一些在组件库中难体现的设计说明、未形成组件元素的使用规则或一些常见问题都可以写在文档里。
8. 问题与技巧
1️⃣善用插件，提高效率
我其实是一个非常喜欢“偷懒”的人，但凡需要重复，批量的工作，我都觉得应该有更聪明的办法。这里我推荐几个我在做组件库中经常用到的小插件。
2️⃣不断测试
组件库的设计过程中，一定要边做边测试，尤其是在前期确立逻辑的时候，要不断检测是否真的好用。
3️⃣内容更新权限与维护需要专人专办
举例：假设我负责字体，那么后续所有的字体更新相关都只找我来修改。若其他人在组件库内找不到相应的组件搭建页面而又特别高频使用，需要向组件库小组提出申请，并由对应组件库管理员进行更新，不可以私自修改组件库内容并上传。
组件化思维不仅仅应用在 UI 领域，甚至在各行各业都需要建立组件化，比如对于一些时效性非常强的新闻产品，就需要针对突发事件内容模板化，以期能第一时间发布；如果想追热点，组件化能够使得产品具备随时跟进热点的能力，提升市场竞争力等等。
组件化是一种思维模式，也是如今设计师必不可少的能力。通过组件库提升效率能够让设计和开发有更多的时间去打磨产品细节，从而打造出对用户更加友好的产品，赋能设计的价值。
文章来源：优设网 作者：腾讯ISUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
调查问卷，是一个低成本快速收集资料的定量分析工具。这是个看起来简单，产出的问卷也看似很简单，但是在整体设计的过程却是需要很多的思考和预备。
关于调查问卷，会分成三个部分来解说，
废话不说，直接开干！
1. 为什么做问卷
这个是问卷的目的，也直接影响后面问题的设计。
2. 如何使用问卷的研究结果
这是关于问卷解决方案的落地。不需要太过细致的落地计划，但是至少要清楚，这份问卷的研究成果，可以获得多少支持力度。不管问卷发现了多么伟大的问题，如果没有落地，其实是没有无意义。也切忌不要今年做的研究结果，明年来实施，那问卷的时效性和准确性就会大打折扣了，因为市场的瞬息万变。
这是做所有事前，都要问的问题，「为什么做 Why」。而这个问题为什么重要呢，因为这会关系到设计问卷的核心内容是什么，会影响问卷的构成，当然最后也会产出不同的结果。
问卷的目的主要可以分为六个方面
1. 收集用户信息
很多时候，我们或许知道理想目标用户是谁，但是谁才是真正使用我们产品的用户呢？了解真正使用的用户，可以对用户进行更针对性的分析和设计。
2. 了解用户使用习惯
了解用户在产品上是如何使用产品的，以及用户的使用路径是否按着我们期待的方式进行，这是很有必要，这也是一个验证的过程。
2. 满意度
了解用户对产品的满意程度，对于用户不满意的方面，可以进行归纳总结，并给出合理的解决方案
3. 建议反馈、吐槽、好评
从问卷中收集用户的心声，明白槽点是什么。同时也收集用户的好评，这也是激励团队一个很好的方法，因为是直接来自用户。
4. 体验优化
对一个成功的产品来说，它要好用，它也要好看。产品有大改版前，可以用问卷来评估整体产品的体验如何，以便在重新设计的方向上能更好聚焦。
5. 需求验证
很多时候，需求可能没那么明确，用户和产品间始终存在着 gap， 所以我们有时对方案琢磨不定时，可能会试运行，后续看用户反馈。通过合理设计问卷，我们也可以稍微窥探到用户的想法
但是对需求的验证，单通过问卷还是比较难的，只能窥探到比较浅的一层，最好后续可以对用户进行访谈来做后续跟踪，以便了解事情的全面。
这里要注意的是，问卷不适合探索用户的新的需求，或者要验证很精准的信息等比较复杂性的问题。
如果你问用户，近期会推出新功能，问他会不会用。大致上，你得到的回答都是肯定。很多时候，同意比拒绝更简单。
根据提问的方式，可以分为 「是什么」「怎么样」「怎么办」
1. 是什么
主要是用户信息、使用习惯等问题。
例如，年龄层、职业、使用产品目的、知道产品的渠道、使用频率、使用竞品软件、整体满意度等
2. 怎么样
主要是询问用户原因，比如打这个分数的原因，某功能使用如何等
3. 怎么办
主要是询问用户的建议、期待产品改进的地方
问卷中并不是所有问题都适合问，有一些比较敏感的问题需要去避免，以免激起用户的负面情绪
1. 敏感性问题
个人信息类的问题比较容易会有敏感信息存在，就像你问用户工资区间，和在问卷最后告知用户参与问卷都有奖品，需要填写收货地址。很明显收货地址的准确性会比工资更高。
2. 措辞严谨
3. 问卷的顺序
先简单后复杂，并注意整体逻辑性的表达。循序渐进，如果一开头就是很难的问题，用户很容易放弃答题
4. 问题长度
尽量保持所有问题在一个差不多的长度呢，保持一样的节奏。避免时长时短
5. 避免专业词汇
很多时候，我们会用一些所谓的“行话”来表达，但是在问卷当中，无法保证用户同样是理解的，而且也会让用户产生距离感，非必要情况下，不要使用专业词汇
6. 选择题枚举要穷尽
题目数最好不多于 7 个，太多也会造成用户选择困难，最后记得加个其他并提供文本框输入
7. 避免互斥、重复、相似
问题避免前后矛盾，造成用户困扰，也不要重复或相似度极高的问题，除非这个问题是陷阱题，为了检验用户是否认真答题。但是在数量有限的问题中，一般比较少使用陷阱题
8. 保持开放性
为所有选择的选项，加入「其他——」「以上都不是」「不知道」，用户可能会觉得问题或答案不匹配，而不知道选什么，这时需要给用户一个出口，避免产生无效数据
9. 避免询问引导性的问题
大部分用户认为 XX 功能，很好用，你觉得呢？
如果看到这样问题，大概可以从中读出两个信息，1. 大家都觉得好用 2. 平台希望我说好用。
这个问题所传达出来的隐藏含义会引导用户做出不真实的反馈，这是没有意义的问题
10. 避免让用户选择「 是/否」「真/假」「好/坏」
强制选择非黑即白，大部分情况下没什么意思，因为用户可能不确定。这个问题本身也没有太大价值，也会错过用户一些比较有趣的回答。
所以如果这个问题的目的，是一定要知道的，可以更改提问的方式。
对于用户的问题，答案要可以量化表达，来产生数据，才便于后续数据的分析
11. 避免问用户将来的事，或回忆许久前的事
当人们将自己的行为投射到未来时，通常会过于简单化和理想化，人们更擅于解释当下进行的内容。
所以，如果要知道特定环境下用户的操作，则要配合合适的场景预设，并且是用户熟悉的场景。或者可以直接问，今天你会如何如何
所以可以通过询问今天的行为来，确定将来会不会使用。当然这不是绝对的，毕竟未来存在太多变数。
对于许久前的用户的操作行为，也尽量不询问，因为会忘记，而当强迫他去思考时，他可能自己脑补，产生不准确的记忆，进而对研究结果产生偏差。
12. 其他
问卷中存在多选题，必选题，选填题，记得预览问卷时，注意问题平台有无自动添加文字说明。
不要用 checkbox, radio 来区别多选和单选，这是不能准确的传达，也有可能用户没有注意到，或者就不清楚，而使用文字的表述会更清晰，不会产生歧义。
必选题，选填题，如果问卷平台，也只是用*号来表达必选时，建议在文字上也加上这样的说明
整体问卷的过程需要时间，所以也需要的具体的日程安排，以便整体问卷的进行是井然有序。
日程安排中，要包括：
调查问卷从准备到产出报告，需要一个过程，建议与其他设计师或 PD 来一起配搭工作，更高效的完成，一个人去做，总是会有一些盲点，并且会比较大的压力。
如果你在问卷方面是新手，也建议找个有经验的设计师或 PD 来做你顾问，减少一些不必要的坑。
文章来源：优设网 作者：箴盐设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
5分钟带你了解服务设计的原则、案例及常用方法！
我们常说，现在是体验至上的时代，用户对产品的使用不再是单纯的需求满足，更要获得满意的体验。服务设计的发展为我们改善用户的体验提供了新的思路，从本质出发，任何产品都是在提供某种服务，服务的质量从根本上决定了用户的体验。
什么是服务设计
服务设计一直在我们的生活中，我们无时无刻不在体验着各式各样的服务。荷兰一家专业的服务设计机构31 Volts是这样描述服务设计的：“如果有两家紧挨着的咖啡店，出售同样价格的咖啡时，服务设计是让你走进其中一家而不是另一家的原因。”这个描述很生动，同时也说明了服务设计的作用。
其实服务设计的定义还有很多，行业内不同的专家和学者都有自己的理解和解读，不管定义如何，重要的是服务设计的思维方式，可以帮助我们从全局改善服务体验。
服务设计的原则及案例说明
2010年在《This is Service Design Thinking》一书中，作者首次提出了5个服务设计基本原则，这些原则之后也被广泛使用，但随着服务设计的不断发展，其中的一些原则也需要重新去审视和思考，因此在2017年作者将其更新修订为6项。
a.以人为中心(Human-centered)
以人为中心的设计理念在产品设计、交互设计等领域已经得到了广泛的应用，服务设计当然也没有例外，以人为中心就是要站在用户的角度上看待和思考问题，考虑所有被服务影响的人。
在日本，农产品市场存在这样一个问题，农产品批发商无法及时从种植者处了解农产品的相关状况、收获量等信息，因此他们也就无法与要购买农产品的人进行谈判，这样造成的结果可能是粮食的浪费。日本的一家软件公司NJC（Nippon Jimuki Co. Ltd.）发现了这一问题，他们希望利用自身能力（软件方面的优势）去解决这一问题，因此将目标设定为：创建一个可以提供有用数据而又不给农民或农产品批发商带来负担的系统。
最终的产出的结果是Fudoloop这个应用程序，通过Fudoloop，批发商可以提前一天从农民那里收到信息，进而协调买家的各种要求。Fudoloop的使用者分为两种，一种是需要更新农产品信息的农民，一种是从Fudoloop上获取农产品信息的批发商，Fudoloop分别为两种用户进行了设计。
图片来源：Fudoloop
在设计Fudoloop时存在这样一个问题，农产品市场中的相关从业人员普遍年龄较大、受教育程度低、软件使用经验很少，面对这样的用户，显然通常的软件设计并不符合他们的需求，因此Fudoloop的界面设计非常简单且信息突出，从事农产品相关工作的人员可以轻松的使用Fudoloop完成农产品信息的更新，而不会因为学习产生很大的压力。Fudoloop还在大型农业贸易展览会邀请了一些行业内的人员和用户参与到了产品的体验中，并收集了他们反馈的建议，以改善产品。
图片来源：IDEO
NJC在设计Fudoloop时充分坚持了以人为中心的原则，考虑到服务涉及的不同用户，并根据用户本身的特点和需求进行设计。NJC的CMO佐藤贤一是这样评价Fudoloop的：“当简单、以人为本的思想汇聚在一起时，创新就会发生”。
b.协作(Collaborative)
这条原则说的是，不同背景和职能的利益相关者应该参与到服务设计流程中，收集多方诉求，发现不同看待问题的角度，才会更好的解决问题。
在美国旧金山，有一所学校和Revolution Foods这家餐饮公司合作，为学校内的人员提供丰富的、营养的午餐，但是实际来餐厅就餐的人数与预期相差很大，数据显示，有72%可以承担起午餐费用的人并没有来到食堂吃午餐。经过调查发现其中的原因，很多学生等校内人员并不愿意排长队或者匆忙的吃完午餐，因此他们选择了去校外享受午餐的时间。
为了改善这种情况，这所学校请来了全球顶尖的设计咨询公司IDEO，他们与1300多名学生、父母、营养人员、董事会专员、校长、老师和社区团体等利益相关者一起工作，重新去设计了学校的午餐，并且制定了针对三种年龄的就餐体验的建议，完成了饮食、就餐空间、新技术使用等多方面的优化和设计。
图片来源：IDEO
最终，学校完美的改善了午餐服务的体验，这其中包含了所有利益相关者的想法和工作，因此设计成果也被人们所接受，越来越多的校内人员会选择学校的午餐，之后，这种设计模式也被旧金山的许多学校采纳和推出。
所以，服务中涉及到的利益相关者有很多，多收集他们的想法与建议，甚至让他们参与到服务设计中去，问题会得到更好的解决。
c.迭代(Iterative)
迭代是一个不断接受反馈不断优化的过程，如此重复执行，让产品变得越来越好。服务设计也需要迭代，不要避免犯错误，而是从错误中学习和改变，同时也要不断的收集各方的反馈信息，这些信息是服务进行迭代的核心所在。随着互联网的发展，迭代的思维早已渗透到每一个互联网产品，此处就不再过多解释。
d.有序(Sequential)
服务设计应该是一系列相互关联的活动，并且是按照顺序进行的，精准的把控服务每一个环节的节奏，用户才能获得更愉悦的体验。
以外卖为例，用户的使用过程包含订外卖时的商家选择到下单过程，下单后配送外卖，用户收到外卖和用餐后这几个过程，而服务的提供者主要包括商家、平台和外卖小哥，为了保证用户能够获得流畅的服务体验，需要各个服务提供者在服务展开的不同环节推出优质的服务，如下图。
在订外卖时，平台会为用户推出“超值优惠”“限时秒杀”等优惠活动，商家推荐、订单历史等商家选择渠道，以及不同的筛选条件，以上的目的都在于帮助用户快速找到自己期望的、合适的商家。在用户选定商家后，进入到选择商品并下单的过程，一方面，商家会推出优惠的活动、推荐菜品等，另一方面，平台也会给出自己的优惠。
下单后，用户面临的是一个配送过程中的等待时间，为了缓解用户在等待过程中的焦虑情绪，平台会及时更新和推送外卖小哥的状态，如到达商家、取餐中、与用户的距离等，同时会给出用户预期的送达时间，若超过预期时间用户还可进行催单，商家可以联系用户表达歉意，整个过程用户对配送状态是可视的。
用户收到外卖时首先会与外卖小哥接触，包括与外卖小哥提前确定取餐的时间地点，取外卖时的短暂对话等，这些都会影响用户对服务的印象，因此外卖小哥需要保证服务态度的礼貌和友好。收到外卖后，食品包装首先给到了用户对商家的第一印象，然后是餐品是否符合用户预期，让用户满意。
在用户就餐后，首先平台要提供给用户评价的功能，用户可以分享自己就餐的感受，商家也可以通过平台为用户提供更多的优惠，引导用户能够再次回到商家订餐。
从外卖的案例中我们可以看到，服务是一个过程，是需要有序展开的，每一个环节的体验都会影响到用户对服务的印象，在恰当的环节提供恰当的优质服务，才能确保用户的整体体验。
e.真实(Real)
服务本质上是无形的，应该用“物理元素”来可视化，这样可以用户的服务记忆，增强用户对他们所接受服务的感知。
同样以上述外卖为例，商家为用户提供餐食，这部分是借助美团这个平台和外卖小哥来完成的，用户和商家的接触仅仅是送达的餐食，因此无法通过像到店体验一样，让用户感知到商家提供的更多服务。
为了让服务变得更加“有形化”，商家就需要花费更多的心思，如图，商家为了增强用户对服务的感知，一般会在在包装上花费很多功夫，精致的包装让商家的形象更好且更加值得信任，一些有趣的包装还可能让用户的心情变得愉悦。另外，商家也可以通过一张便利贴的温馨问候或者赠送小礼品等方式让用户更真实的感受到服务，通过这样的手段，即使用户并没有真的接触到商家，体验也会变得很好，商家的形象也会提升很多。
图片来源：古田路9号
f.整体(Holistic)
整体就是要着眼于整个用户旅程，考虑用户与服务的每个触点（触点的概念后文会进行介绍），并兼顾多方利益相关者的需求。也就是所谓的全方位服务体验，考虑服务环境的方方面面，没有任何遗漏。这个原则实施起来并不是那么简单，从整体角度思考问题会使问题变得复杂。不过在服务设计中，是有一些方法和工具是可以帮助我们完成整体思考的，比如服务蓝图。
服务设计的常用方法-服务蓝图
a.服务蓝图简介
服务蓝图是一张图表，通过列出在每个阶段发生的、不同角色执行的所有活动，显示了服务的整个过程。如图所示是一个服务蓝图的简单示例，垂直方向上展示服务中的利益相关者，水平方向上为用户的历程，也就是用户经历的不同阶段。在服务蓝图中有两条线，一条是可见线（line of visibility），可见线上方为用户可与之交互的服务，也可以称之为“前台”，可见线下方代表的是后台进程，用户无法看到但需要给用户提供支持，后台进程还可以存在内部交互线，用来表示内部人员的联系。用户与前台服务之间存在另外一条交互线（line of interaction），用来表示用户与服务之间的接触。
图片来源：Service Design Tools
明确了服务蓝图的大致框架之后，还需要注意服务蓝图中一个非常重要的概念——触点。触点就是在服务的各阶段，用户和产品、服务、后台产生的接触，每个触点也是服务可以进行展开和优化的方向。
b.Uber服务蓝图绘制
为了明确服务蓝图的绘制和分析过程，下面将结合下图所示的Uber服务蓝图进行说明。
图片来源：Medium
(1) 明确用户历程
用户使用Uber打车服务主要可以简单分为以下三个阶段：注册（下载APP - 新用户注册），乘车阶段（下单 - 等待车辆到达 - 乘车 - 到达目的地）、乘车后（付款 - 评价）。
(2) 明确利益相关者
用户与之产生互动的前台服务人员为司机，而设计师、开发人员、项目经理等负责后台的服务支持，以保证Uber按照预期的目标运作。
(3) 明确前后台活动
一方面，需要明确和用户接触的前台活动有哪些，Uber打车服务中和用户产生接触的主要为司机及车辆，因此需要确保司机是合格的、车辆内部的环境是干净舒适的，同时司机在与用户接触的过程中需要提供礼貌的问候和交流，满足用户在乘车过程中的要求，完成乘车费用的收取，提醒用户离开前带好随身物品，以及评价乘客等。
另一方面，用户对后台的流程可能并不了解，但需要明确哪些后台活动和支持会对用户产生影响。比如在用户下单时能够自动获取用户定位，告知用户预期的时间和价格，以及发送给用户司机的状态等。
在明确前后台活动时，我们可以以用户历程为线，分步骤进行分析，确保每个环节中涉及到的前后台活动没有被遗漏。
(4)明确关键触点
在服务蓝图中我们可以标注用户与服务的主要接触点，针对触点进行设计是提升服务体验的一个重要和有效的手段。
在Uber打车服务中还有一些需要注意的触点，一是等待时间，这包括用户发起乘车请求后、付款时以及评价司机时，等待时间是造成用户体验较差的一个原因，因此需要注意标注出这些触点，并想办法优化，在服务设计中需要注意相关环节的应尽量简单，减少用户的等待。另外需要注意的是会对体验影响较大的触点，如司机态度不友好、乘客下车时忘记带随身物品等，可能造成失败的服务体验的触点应该精心地去设计，避免这样的情况发生。
通过以上过程我们完成了Uber服务蓝图的绘制，从中可以获取到Uber打车服务的整体概貌及其相互关系。
///
结语
服务设计的思维能够帮助我们从全局的角度去审视和思考，发现更多改善服务的可能性，从而为用户提供更好的体验。因此对于产品和设计等相关人员来说，不能仅仅把目光放在产品本身，而是要从服务的角度去正确看待产品和用户的关系，以用户为中心，找到用户与产品的每一个接触点来进行服务设计，这样才能保证用户在整个流程中都能得到好的体验。
文章来源：站酷 作者：百度MEUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
先看目录！
1.什么是流量分发
2.为什么要做流量分发
3.首页中流量分发的类型
4.流量转化模型
5.流量如何分配的
6.设计案例与流量分发
7.如何衡量流量的效果
相信大家对流量并不陌生，我们在运营的口中经常会听到这个词：流量。运营通过各种手段和策略吸引用户来接触、使用我们的产品，从而吸引到了许多的流量，流量越多机会也就越多，比如一家奶茶店门店选址要考虑的最关键因素就是人流量。
流量分发的本质其实就是用户需求分发，我们设计师的价值就在于如何让这些流量发挥出更大的价值，让流量价值和用户价值相匹配。流量就像是一片海，海水通过不同的分支流入大陆形成了江、河，如果没有这些分支，那么这些水永远无法被利用，发挥出它们的价值。流量分发我们最常见的方式有：搜索分发、算法分发、社交分发、人工分发、付费分发
举一个比较典型的例子：海底捞在进行流量转化之前，并不是单纯的在店门口给用户一排座位让用户去等待，因为这部分用户就像没有被分流的海水是死的，这时候的用户其实也有自己的目标，就是消磨时间，那么海底捞就提供了一系列服务让这部分用户活动起来，比如给零食、玩具、做指甲等等，于是这部分用户其实就相当于进入了就餐流程的分支，提前享受服务和餐厅提供的福利，除了提升用户体验以外，也消化了大部分的流量。试想一下如果一下来了许多客户，但你只有十几张椅子让用户等待，势必造成更多的损失。
流量是无序混乱的，只有到它应该去的地方，它才会有价值。产品与用户双方都需要有清晰的目标，产品提供解决方案和导流不同的场景，用户负责完成目标给业务带来价值。
流量分发最典型的就是电商产品，因为业务目标非常明确，就是实现gmv的提升，但同时其用户的需求场景也是相对来说很复杂的。那么一个好的流量分发策略，可以大大的减少用户完成目标的时间和精力，也让产品可以准确的掌握用户的需求流向。
流量不分发或者错误分发就会造成更多的消耗，什么意思呢？我们举个例子，譬如下方的模坑app首页，首页中虽然提供了搜索、分类和标签栏不同模块，但是核心的内容显示区域则只有一张预售产品的大图。我们知道用户类型非常多，这样的布局对于小白和第一次用此款产品的小白来说会十分迷茫，因为最显眼的内容中并没有他们想要获取的信息。我们不求满足所有用户，但至少需要覆盖大部分用户和核心用户，此外，这样的形式就像一个漏斗，只靠一个出口漏水，效率自然不高。
同时为了达到最大化，流量的分发并不是单向的，而是并行、串联的。比如你可以在通过搜索找到某件商品，参与活动、运营板块、商品分类、网红直播等等区域都可以发现这个商品，同理，你想要购买视频app的会员，不仅仅可以去个人中心，你还可以去详情。所以流量就像一个大网格，单纯的给漏斗戳几个洞还不够，甚至要把这些洞用很多根管子串起来。
流量分发可以帮助盘活新业务以及寻找新的价值，例如我们之前的电商产品在前期是以时间轴为核心的消化方式，商品以单品列表平铺的形式展示，在产品发展过程中形态会发生变化，单纯以这样的形态承载用户需求肯定是不够的，所以更多运营板块和推荐可以分担这部分“旧”流量。
我们在移动端的首页可以常看见的类型有：搜索、宫格型板块、信息流、banner、fab等。
搜索给有明确需求的用户提供了入口，同时在搜索这个显性场景中我们也可以细化出更多的场景给流量提供更有效的支持
例如搜索场景下除了热门搜索、搜素历史以外还可以提供不同的分类内容推荐。
逐渐走下神坛的banner，曾经可是在UI界叱咤风云，在当时由于他是首页占比一哥，很多产品在首页规划中都认为banner会承载大部分的流量，尤其是像淘宝等电商产品，banner不仅仅可以靠图片吸引用户，在做一些大促活动时候还可以变成氛围担当，和导航栏上下呼应。我们说首页是寸土寸金的，但是大家发现没有，banner的流量和他本身的价值可能不相匹配。也就是说虽然他面积很大，但是用户点击率相比于其他板块并没有什么优势，甚至还低。所以淘宝目前的首页已经看不到banner了，这个区域可以放下更多的运营区块和流量入口，当需要它的时候再配置起来就可以了。
这个板块除了业务分类的“金刚区”以外还有运营活动的配置区域，我们先来说以业务划来划分的流量入口，以这样的形式来分配流量是常规的手段，当然他也是有利弊的，有利的地方在于几乎每个业务板块雨露均沾，至少是在同一屏幕中呈现，还可以左右滑动切换更多。弊端的话就是层级深，并且用户浏览效率低不聚焦，对于那些泛浏览型的用户并不友好，因为你进入一个业务板块后发现内容自己 不感兴趣需要就需要再返回。所以这样的分流更适合深度使用产品的用户
那有没有另外一种形式可以分配流量给不同业务板块呢？当然是有的，比如tab标签，有了tab标签，泛浏览的型的用户会更喜欢，他们能更快的找到自己喜欢的内容，比如bilibili、腾讯视频的首页，这个当然也和产品目标有关，他们希望让用户看到更多的内容，让产品更扁平化。
那么你即想扁平又想让用户直观的看到业务板块分类怎么办呢，你可以这么做，就像大众点评一样上边是宫格，下面是tab标签
Fab和cta可以说是比较另类的存在了，几乎就是你想让用户去点，那你就放，所以这样的入口流量路径就比较单一，无法沉淀和升级流量，是短期目标的形态。fab的这样的悬浮入口会一直在首页显示，通常产品为了吸引用户会将其设计的比较吸引人，比如添加动效等，但是fab也会干扰用户正常浏览界面，所以一般可以用透明、伸缩的方式解决，不过伸缩要考虑用户实际操作，避免频繁的伸缩造成的更多干扰。
大部分产品对于泛浏览用户的匹配场景都是提供信息流，但是单纯的给信息流依然无法让用户深入沉淀，所以需要在信息流中穿插一些分流入口，譬如品牌、话题、活动、排行等，让用户有更深入的浏览，这样才能促成转化。
流量获取很容易，但是我们的目标并不是让用户进来逛一圈就走，所以流量的转化我把他以这样的模型展示，也就是说流量从获取到沉淀再到最后的进化过程。
获取新流量的方式很多，例如社交分发、线下活动引流等等，内部流量也可以通过打通多个板块进行流量互换。但是这些流量是表面的，不做进一步整合也就没有实际价值，所以我们需要将其沉淀下来。
流量就像过江之鲫，如果你想让这条江里有更多鱼，你首先需要有个兜来留住这些用户，为了不让这些鱼继续游走，你可以给更多丰富的食物、创造更好的环境。如何让鱼更好的在这里生存呢，要让他们熟悉你的一切，要让这些鱼在其中发展、繁衍，所以当我们用内容吸引住用户后，要让用户留下来成为深度用户，这个前提就是让用户更长时间的使用产品，如何提升产品使用时长呢？譬如通过智能算法在很多断流的板块提供偏好推荐、帮助用户预判场景、社交互动、让用户有成就感、积分体系、个人成长系统、个人品牌塑造等。
之前两步依然是在存量市场里盘流量，这是对的，从十四五国家发展规划来看，我们能看到一个关键的变化，就是从“速度”到“质量”的变化，如果你的流量已经完成沉淀，那么可以不着急找增量，而是找进化的方法。当然以下是我个人的一些思考，仅供参考。从浅层到深入，从深入到高效，从高效到创造，所以当你的流量已经比较成熟的时候，可能更多需要让这些用户再创造新的内容，他们可以利用你提供的产品创造自己的玩法，即便你不提供任何的帮助也可以形成生态，甚至还可以帮你引入增量市场。
譬如玩社群的都知道，引流简单，但是要维持社群的热度和培养超级粉丝是很难的，但是一旦你做到了，那么这些人就是帮你创造更多的价值，所以你需要一个庞大且智能的基建，还有更好的服务。
判断流量分配是否合理的标准不在于多和广，而在于核心价值与目标是否达成。譬如内容型电商（抖音、快手）和传统型电商（淘宝、京东），内容型电商的流量是依靠内容带动电商去转化，更多的是依靠内容的质量，而传统型电商依靠的是商品，那么在这两个产品中，前者的流量更多还是要流向内容而非商品。
再举个例子，在首页的板块中，我们默认流量从大到小是板块越靠上的越多，越靠下的越少是吗？也不是，板块的分配是需要结合用户需求的，比如你规划的板块视觉上很明显但是从数据上看流量很低，那么这个板块就是有问题的，或者板块不明显但流量很高，这些都不是正常表现。
所以流量分发之前就要确定好，分发的目的和希望达成的目标。是能够让新用户更快了解产品，还是让成熟用户在使用时更高效，或者大力宣传新业务等等，不是一股脑儿随大流的把蛋糕切成几块。
不知道有没有在做抖音的小伙伴，抖音的流量分发让很多人搞不明白，其实抖音属于一个强运营平台，当用户制作一个视频发布后，他的流量并不是全部来自于已经关注你的粉丝，一部分是通过判断你的视频内容和质量分发给相应标签、可能会喜欢的用户。但是快手和抖音不同，快手的社交分发策略更重，用户发布的视频，已经关注的粉丝分发到的比例会更高，这样用户的互动也会更强。
通过一些设计案例我们来看看设计在流量分发中起到的作用。
流量与曝光是有关系的，为了争取更多的曝光我们可以采用这样的方式进行设计，通常我们可以看到横向滚动结束后进入下一级界面需要点击更多，但点击的成本就高于滑动，所以在这里可以让用户直接通过滑动进入下一级界面，增加曝光。同时滑动是承接上一步手势操作，很连贯，相比点击的效率也会越高。
我们经常在用产品的时候能看到同一个界面可以从多个不同的入口进来，比如像小鹿茶app点击下单跳转到商品列表，也可以直接点击底部第二个tab切换过来。比如你可以在夜宵板块和品牌板块都能找到kfc，让一个区域的流量不仅仅从单独的方向流入，这样可以满足更多用户的场景需求。像淘宝的商品流量来自多个不同的层级
还有我们可以将更深层级的业务板块提到上一层级，提高子业务板块的点击率和曝光，譬如贝壳在下方的tab板块中除了信息流内容外还嵌入了精选、人气、热门三个分类。还有类似像德邦app这样的工具型首页其实版面利用率太低，本身产品功能不多其实不需要划分出这么多板块，让每个板块流量这么分散，可以直接在首页中加入查单号的功能，并且将寄件收件历史平铺在首页。
淘宝商品详情中会有店铺和店铺推荐内容，方便用户查看更多偏好商品，提高客单价。具有电商属性的社交产品在用户图文中可以添加商品链接、标签、话题等等。还有淘宝在首页的feed流中点击商品会进入另一个feed流，这里的商品又进行了算法权重的加持，会更加准确与多样，由于本身处于逛场景的用户，在这一步再次帮助用户进行准确选择，可以提高转化，当然了，这样中心化的分流方式对于商家而言不太友好。
衡量流量分发的效果，我们可以查看板块的点击率（UV/PV）和预期。比如在某个周期中，有100个人进入这个界面，而这个界面中的banner最终点击量为1000次，那么这个banner的点击率为1000/100=10，平均每人点击了10次。点击率越高，该入口的流量自然更大。
每个产品对于活跃的标准不同，比如一个商场衡量活跃用户数会算那些进来蹭空调的大伯大妈吗？还是衡量那些有消费行为的顾客，同理一个产品计算活跃不是单纯看每天有多少人登录浏览就算活跃的。
那么观察活跃度有什么用呢？比如我们之前做一个大促活动，每个板块都有活动，但是大促结束后，只有童装类板块的日活流量在持续下降，于是我们通过相关调研，发现是因为童装类的品类太少，用户没有逛和再次购买的兴趣。
一波流量进入后，我们不仅要看他们去了哪里，还要查看这波流量在这里做了什么，于是我们通过查看页面停留时长可以判断一些问题，比如
1. 如果用户在本该停留时长长的页面反而停留时间短可能是当前内容不感兴趣、看不懂、闪退、临时有事等等
2.反之，在本该停留时间短但是用户停留时间长，说明可能文案排版或者解释的不清楚、用户可能在思考、临时有事等等
一波流量进入后，可能进入更深级界面也可能停留原地，那么还有一部分可能就直接离开了，查看流量的流失可以帮助我们判断以下问题
1.如果用户在进行某个多步骤任务，当我们发现其在即将完成时退出了，或者在中间步骤退出了，那说明可能出现了某些问题让用户进行不下去
2.用户可能对当前流程没有预期，也可能觉得有风险也可能是对某个地方产生不满
流量就像是一群被标记过的小白鼠，从哪里来到哪里去，中间做了什么，都被我们记录了下来，那么页面访问路径也是我们查看这些流量去向的关键指标，例如cctalk在冷启动后默认打开发现页面，我们进行了一些用户的调研，发现90%以上的同学在进入后都会切换到上课这个界面，这里可以思考的是作为产品我们发现用户有这样的行为，需不需要对产品进行优化，产品这样的设计是否考虑到的是新用户和培养用户习惯让更多课程有曝光。其实这里可以做一些判断，如果用户近期有购课、上课的记录和行为，默认打开上课板块。若新用户或者长期没有上课行为的用户则默认打开发现界面。这样就可以起到更精准的分流。
8.总结
流量诚可贵，流失就白费。
今天分享就到这里，你学废了吗？
文章来源：站酷 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
