目录：
一、键盘与命令类型
二、设计要点
三、有意思的键盘交互
毕竟该处是表单输入的交互终点，用‘前往（Go）、登录（Join）’这些命令词是不是更准确些呢？
文章来源：UI中国
设计并不只是为了区分市场定位，在视觉上对产品做一些修修补补。设计需要从品牌自身出发，设计出来的产品才能与用户产生情感交流、为品牌而发声，这样的设计才能真正为品牌创造长尾的价值。
前阵子和朋友去看车，我们去的第一家店是沃尔沃，沃尔沃主打的品牌理念是「安全」「可靠」，当时我在沃尔沃店里看的每一辆车的外形就像从金属盒子进化来的，棱角分明、线条硬朗，同时每个部件都相当厚实，当时我坐在车里的时候，感觉自己像是坐进了一个大保险箱，里三层外三层把我包裹起来，坐在里面特别有安全感。
我们去的另一家店是宝马，宝马的品牌概念主打的是「时尚」「运动」，所以宝马车给人的感觉和沃尔沃又完全不同了。它的流线感非常明显，而且这种流线型设计一直延伸到车内的每一个部件。印象特别深的是，车里座椅的荔枝皮纹和我们常见的品皮质特别相似，让我感觉自己像是坐进一个时尚的爱马仕箱包里。
其实无论是工业设计，还是我们的用户界面设计，好的设计给用户的感受与品牌理念是相契合的。设计中的每一个细节都是围绕品牌自身而展开，设计出来的产品才能够成为品牌的具象化延伸，与用户产生情感交流的同时也会让用户更加忠诚于我们的品牌。具体怎么做？这需要我们运用统一的设计语言来完成。
什么是设计语言？从设计的层面理解，当你看到一组功能与形式相互融合，向你诉说其特色与优点的产品，从而唤起你的情感反应时，你正在体验的就是设计语言。简单讲，当你的品牌运用设计语言的时候，你的产品会跟人说话：会告诉人们它能做什么，怎么做，以及你的品牌是个什么样的品牌。而这个设计语言也将会从前期的风格设定到后期的设计执行，始终贯穿在我们整个产品设计的流程当中。
首先从一开始的风格设定，比如每次我们设计师接到一个 brief 都会先做视觉推导。但是我之前的视觉推导是这样的：比如现在为一个类似拼多多的产品做设计，然后搜集了一圈竞品的界面，发现拼多多、聚划算、淘宝特价都是这种线框的、扁平的设计风格，所以最后推导的结论就是——因为我们拼购面向的用户群体是低消费人群，而竞品的设计风格是 xxxx 的，所以我们的用户偏爱这种 xxxx 设计风格，所以我们需要用这种风格去设计我们的页面。
搜狐总监总结的竞品分析方法：
其实这是一种循环论证，并不能推导出真正有价值的内容。就像你问一个胖子「你为什么这么胖呀」，胖子说「因为我吃得多」，你又问「为什么要吃这么多呀」，胖子又说「因为我胖，所以需要吃多点」。
竞品分析虽说也是一种前期设计调研的方法，但如果我们的设计只依赖于参考其他人怎么做，最后我们设计出来的产品不仅没办法向人们表达一个完整的品牌理念，而且我们的设计跟其他竞品看起来很相似，失去了自己的特点与优势。
所以，在我们设定产品的设计风格的时候就需要运用统一的设计语言，产出能够表达我们品牌特质的设计。那具体怎么做？这里涉及 2 个关键点，一个是如何找到你的品牌特质，另一个是如何针对这个品牌特质找到对应的设计语言。
首先，想要找到我们的品牌特质，我们可以从一个很有意思的原型中得到启发。如果想让我们的品牌真正能够影响用户，让用户为我们的品牌买单，我们的品牌就需要基于用户内心最深层次的需求，明白用户买单的动机在哪里。这时候我们再对应这些深层次的动机和需求做出设计，效果自然会事半功倍。那么如何能把品牌和用户的动机需求连接起来呢？我们可以借助心理学家荣格的原型理论来一一对应。
荣格的原型连接了人们最深层次的动机和感觉体验，表达了人们的基本需求，最重要的是他将这些需求都具像化为一个个角色。所以我们可以从中找到自己品牌的角色，并且在往后的发展中根据这个角色设定我们的品牌特质和设计语言，进而与用户建立根深蒂固的联系（相当于为我们的品牌打造一个「人设」）。我们先看看荣格的原型具体有哪些：
1. 开拓者
我们也有称之为探求者、朝圣者，它是敢于冒险的、首创的、独立的、不墨守成规的，更多的寻求自我实现和改变，拥有自由的价值观、自给自足的。开拓者通常会在未知的领域，开创新的路径。同时是个驱动力很强的非常有个性的人，能够忍受探索新路上形单影只的孤独。属于这种角色设定的品牌比如有星巴克、路虎都是。
2. 守护者
守护者通常是说无私的、有同情心的、仁慈的人，给弱势群体提供帮助和支持的，同时具有慷慨大方、自我奉献的精神。守护者更多立志于他人的安危和福利，像这种角色的品牌稍微少点，通常是一些救济会、慈善组织等等。
3. 爱人
爱人相关的特点像热情的、美丽的、感性的寻求真爱和愉悦，追求爱的价值观和亲密关系。爱人通常是通过给予和获得爱的强烈愿望所驱动的，这个不局限于爱情，友谊也包含在内，主要是意味着情感，所以一般是香水或者化妆品品牌都是运用这个原型角色。就像 dior，当然还有巧克力费列罗等等。
4. 魔术师
我们知道魔术师的形象通常是爱恶作剧的、滑稽的，有时候能够跨界，打破禁忌，并且自身带有乐趣，善于改变的。魔术师通常渴望乐趣，从单调的生活中解脱出来，敢于打破禁忌，质疑不可能的事物。这种角色设定的品牌我们可以很快想到那个爱玩有趣、经常跨界合作的百事可乐。
5. 创造者
创造者更强调艺术感、想象力、创新性，以及自我表现的价值观和美感上的愉悦性。创造者通过精心制作用来表现自我的事物，让人们耳目一新从而得到认可。像这种强调创造力的品牌比如乐高，用有限的积木组合、创造出无限种可能。
6. 反叛者
反叛者也可以说是不法之徒、外来者，这种角色通常是具有变革性的、反常的、打破常规的，表达一种价值观的解放。反叛者通常存在于社会边缘的，被大部分社会群体看成局外人甚至异类的角色，我们也可以看成是亚文化的一种转变。像这种主打标新立异、反常规的品牌，最著名的就是哈雷。
7. 魔法师
前面我们提到了魔术师，那么魔法师相对于魔术师而言，会带有更多的非现实的想象，精神上的超凡魅力，带来转变的、形而上的意识的扩张。通俗地说，是带有更多迷信元素的。但是最重要的是，魔法师趋向于驾驭各种能量和环境，进而给人们带来身体上以及精神上的转变。同样，像这种强调 magic 的品牌我们第一个可以想到迪士尼，典型的魔法世界。
8. 智者
我们也可以称之为「圣人」，智者通常是一种富有哲理性的、知识渊博的形象，忠于追求真理、乐于分享知识，也是智慧的代名词。智者经常被当成真理的捍卫者以及智慧的来源，为人们指明方向，帮助大家前进的代表。这种角色设定适用于一些知识输出的品牌，比如哈佛大学、金融时报等等。
9. 天真
这是 11 个原型中唯一一个形容词而不是角色名词，它代表着信任、纯洁、健康乐观，有希望的、诚实善良并且拥有简单的快乐。天真代表着乐观主义，不管处境如何都能保持希望和信仰，更像是纷杂世俗中的一片净土或者是一个乌托邦世界。而像这种原型设定一样传达乐观、希望、天真的品牌有麦当劳、可口可乐等等。
10. 统治者
统治者象征着权威、控制、至高无上，同时也有承担、效率、和谐的属性。统治者被得到和控制权利的欲望所驱动，通过对事物的掌控来防治混乱发生。同时也是一种责任承担的表现，以有组织的的方式来完成义务。属于这种角色设定的品牌比如有 IBM、花旗银行等等。
11. 英雄
每个人心目中的英雄不尽相似，但是他们的共性都是勇敢的、有原则的，勇于克服障碍，同时敢于接受挑战、伸张正义，面对逆境的时候坚韧不拔。这种角色设定的品牌比如强调挑战、正义、勇敢的耐克、联邦快递等等。
总而言之，原型是将我们用户内心最深层次的需求，具象化成一个角色，我们的品牌对应上这些角色，相当于对应上了我们用户最深层次的需求，为我们品牌和用户产生情感交流打下基础。同时，它可以为我们设计师想为品牌找到对应的设计风格的时候，提供更多维度的灵感。而这之后的过程，就涉及到刚才提到的第二个关键点，如何为我们的品牌找到对应的设计语言？
我们从前面的心理原型中了解到品牌的角色设定之后，围绕这个角色将会有一系列的关键词去描绘这个角色的特质。我们将这些抽象的、描绘品牌特质的关键词具像化，则可以得到描绘品牌自身的设计元素。具体我们可以借助一个图形四象限来完成：
我们将图形的基本构成（点、线、面）作为我们的坐标延伸——宽窄曲直，用这四个属性我们可以组合出非常多不同形态的图形元素。比如说，我们用「宽+曲」组合出来的图形可以是：实心的圆形、波浪曲线等等；再比如说我们用「窄+直」可以组合出：细直线、带有直角边的矩形等等。
同时，在图形属性的坐标上，我们还需要延展出一些带有这种属性的事物或印象。比如，生活中带有曲线的事物，像有花瓣、棉絮等等，这些事物给人的印象是柔和、温暖的表现；而直线的事物，我们联想一下生活中的带有直角的事物，比如像玻璃、霓虹灯管等等，这些表现前卫、锋芒毕露的事物。
像上面绿色部分的认知印象，针对每一个维度可以联想出很多关键词与事物，那么在我们延展出更加详细的四象限之后，这时候可以再次拿出，我们前面说到的，原型角色的关键词，再和刚才的图形四象限进行比对，利用象限中的图形基本属性，来组合出属于我们品牌的设计元素。具体怎么做，我举一个京东直播改版的案例。
首先基于京东品牌特质（原型设定是英雄），围绕英雄这一个原型我们会有很多关键词去形容它，比如敢于挑战、坚韧不拔等等。不过，京东直播作为京东 App 的主要栏目，更希望吸引更多的年轻人以及女性群体的参与，所以在京东直播里，我们表现的是更加年轻、女性向的英雄——惊奇队长，一位自信、勇敢挑战的女英雄形象。因为像人在不同场合下都会有不同的表现，对于品牌来说也是如此，我们设计师也需要根据不同的场景或者子产品的需求，基于原型的核心理念再做出适应性的设计，让我们设计的品牌更像一个生命体，而不是一成不变的事物。
那么我们围绕年轻、女性、自信这个主题再脑暴出更多相关的关键词。比如具象的可以代表女性的事物：口红、高跟鞋；比如一些抽象的内容，我们可以把他们具像化，比如年轻的「活力」，我们可以用泡泡、花朵来表现，女性的「优雅」可以用香水、丝带表现，英雄的「自信勇敢」用笑容表现。
不过，我们知道用户界面设计相对于平面设计的海报、插画而言，更重要的是对产品信息功能的辅助，所以这里的设计元素运用会更加克制，这意味着需要我们回归到更基础的层面。所以我们需要从刚才的具象事物（比如花朵、笑容）中提取出他们的基础属性，比如花瓣是圆弧形的、片状的，笑容是向上的曲线。同时借助图形四象限，用「宽+曲」的手法来表达我们的设计元素（年轻、女性向在第二象限，对应的宽+曲属性）。在后期设计过程中，融入这几个元素再作出界面设计。
当然，在整个设计流程中，设计语言的设定并不单单包含元素这一部分，还包括颜色、框架、布局等，各个方面的考量缺一不可。
为什么是相对统一而非绝对一致？因为人们对大部分颜色的认知其实是来自于自身的行为，受到心理、环境、文化等背景因素的影响，更多是一种个体的主观感受。比如同样的红色，在中国是吉祥喜庆的代表，在国外普遍认为危险警告的颜色。比如黑色，在大部分年轻人眼里会认为是酷的时尚的颜色，而相对年长传统的人则更多会觉得是邪恶、忌讳的颜色。所以我们并不需要过分强调建立绝对一致的色彩规则，这样也能使我们设计的品牌更像是一个有灵性的生物，而不仅仅是一个僵硬的组织。
比如今年的京东 618 项目，时间跨度长达 30 天，活动页面覆盖上千个，设计师不可能一个个去指定颜色规范、或者让同一个颜色适用于所有页面，所以需要设定的只有色彩感觉和表现手法，这种统一的大方向。所以我们可以看到这些在 618 期间的设计，虽然不尽相同但能让人清楚的感知到，这是来自同一个生态下的主题，并不会因为颜色不同就无法识别。
虽然人们对大部分颜色的认知来自于心理的主观感受，但还有对另一部分的颜色的认知是来自于人们的生理反应。而这一部分，才是我们在设计的时候需要注意的，关于造成人们「感知过强」和「感知过弱」的问题。
1. 感知过强 —— 颜色对抗通道
简单讲，就是相当于我们设计常说的——对比色，虽然我们知道对比色可以给用户带来视觉刺激，但是并不建议在设计中大面积的、长期的使用（红绿或黄蓝对比色），为什么呢？
因为我们所说的颜色，其实是人眼对频率、光的波长的感知，就像我们耳朵听的音高或一个音符时所感知的声音的原理一样。下图是人们视网膜三类视锥细胞对光的敏感度，以及人造红、绿、蓝色光感受器对光的敏感度。我们可以看到，低频视锥（红线）信号是红色和黄色，中频视锥信号是绿色，高频则对应蓝色。而我们设计中常说的对比色，其实就是通过这些视锥细胞的低、中、高频信号的极值相减，才得来的颜色对抗组。所以这种通过对视锥细胞两极的强烈刺激才得到的对比色，长期使用下会让人产生疲劳甚至烦躁的情绪，而在这种不稳定的情绪下，用户非常容易产生误操作，甚至最终迁怒于你的产品不再使用。
所以我们作为设计师可以运用一些方法来尽量控制对人眼的最极端的刺激，比如通过减少对抗色的面积，或者通过将对抗色组中的一个颜色用它的近色替换，等等。
2. 感知过弱 —— 色域跨度
除了以上，让我们感知过强的颜色对抗通道，另一个需要注意的颜色问题就是，让人们感知过弱的色域跨度。我们有时候会遇到一个问题就是，按钮上的文字和按钮的颜色融在一起，导致按钮文字看不清。
这个问题其实就是两个颜色的色域跨度过小导致的，首先我们用 H（色相）S（饱和度）B（明度）的数值来划分色域（如下图）。在统一H（色相）值的情况下，规定了 10 个标准的S（饱和度）、B（亮度）值，以 10 为单位作为一个跨度。两种颜色在这个色域中，至少要相差 5个跨度，用户才能有效感知到两种颜色的差异。
比如下图中的蓝色背景色值是 60，那么放置在这个背景中的文字 A，至少要跟这个 60 的位置相差 5 个跨度，也就是 10 这个位置。如果文字A 的色值只有 30，与背景色的 60 跨度小于 5，那么文字 A 在这个背景上会难以识别。以此类推，深色模式中（如下图）这个背景色值 100，那么在这个背景上的文字 A 色值，最多不能超过 50。
以上关于颜色对抗通道和色域跨度的问题，就是我们需要了解的一些颜色运用中的边界，并在这个边界以内让设计保持最大的灵活度。所以对于颜色，我们需要强调的是相对统一的边界极值，而不是绝对一致的色值。
如果我们把前面说的设计元素和颜色看作品牌的皮肤，那么视觉框架则是品牌的骨骼。如果想让我们的品牌成为一个能够真正影响用户的存在，不仅要有好看的皮囊——在设计元素和颜色上延续品牌基因，还要有强大的内心——视觉框架要能足够支撑起我们品牌的身躯。
视觉框架包括了层级和布局，我们需要在设计的过程中，加入对产品阶段和品牌价值的思考。因为就像人一样，处于不同阶段的人追求的东西会有所差异。同样的对于品牌也是如此，处于不同产品阶段会有不同的需求，相应的品牌价值点也会有所差别。所以如果想让设计的视觉框架能够足以撑起品牌，在这其中将会涉及 2 个关键点：如何定位产品阶段和品牌价值，以及如何围绕产品阶段与品牌价值点设计对应的视觉框架。
首先是定位我们的产品阶段和品牌价值，我们可以通过对照经济价值系统（如下图）：产品的阶段分为初级产品、产品、服务和体验这 4 个阶段。
拿京东举个例子，如果我们位于初级产品阶段，我们的平台就是这样的（如下图）：展示出所有商品信息，用户需要根据信息联系商品的供应商，去和供应商进行交易。那么在这个阶段的时候，品牌的核心价值在于对商品信息展现的完整性、全面性，只要这个平台能够覆盖足够多的商品，并展示完整的商品信息，这个阶段的目标就达到了；
如果我们位于产品阶段，我们会对商品进行分类，并在平台上提供统一的购买渠道。相应的，这个是以后的品牌价值在于，平台能够对商品进行精准分类或者实现统一的购买渠道功能，让用户能够在平台上买到商品；
而当我们位于服务阶段，我们的平台不仅可以购买商品，我们还会提供售前售后的服务，对应不同的客户群体推荐不同的商品，或者提供定制化的服务等等。平台除了实现交易功能，需要提高品牌的竞争力，在竞品之间形成差异化，为人们提供一系列附加价值的服务，吸引更多用户在我们平台上下单才是目标；
而如果我们位于体验阶段，我们可以从视、听、味、嗅、触觉给用户带来一系列的情感反应，为每个个体营造不同的回忆与感受。让用户与品牌产生情感上的互动，在更深层次上影响用户认知并形成坚固的情感纽带，让用户忠于我们的品牌才是这个阶段的目标。
正因为不同的产品阶段，对应的品牌价值与目标不同，我们才需要针对产品阶段，为品牌设计合适的视觉框架，到后期设计出来的产品才能更贴合地为品牌发声。像今年京东 app 改版项目，在接到这个 brief 之后，首先当然会先看看当时版本存在的问题，下图为当时京东 7.0 版本。
当时团队逐一列出了 7.0 版本存在的几个主要问题：
1. 品牌识别度低
我们可以发现在这个界面里很难发现京东的品牌元素，就算现在换一个品牌同样这个界面也适用；
2. 业务分发局限
这个版本里的商品坑位是固定的，业务展现的数量和形式是局限的；
3. 运营维护成本高
banner 模块采用通栏而且上下渐变的样式，这需要商家制作运营图片的时候，将主要内容严格控制在我们的限制区域内，这同时也增加了我们运营审核的工作量；
4. 楼层过长、转化率低
在 7.0 版本中，中间的楼层频道长达 7 屏，同质化的内容导致平台商品的转化率不高；
5. 促销信息干扰
界面的促销信息让用户眼花缭乱，难以让用户快速找到自己想要的商品；
6. 个性化感知不足
电商平台内容形式趋向单一化，没有太多创新的表现。
有了这些具体的问题项，设计师们开始进行针对性地视觉框架设计。比如，针对个性化感知不足的问题，我们希望重新设计百宝箱区域，打破常见的圆底 icon 的样式，每个图标的边框都是不规则的，让整个区域更有表现力，同时与其他电商平台的界面形成差异化。再比如，针对促销信息干扰的问题，我们希望简化原本频道入口的信息，将原本好几个 sku 信息对应同 1 个入口，优化为单个 sku 与单个入口一一对应，让用户保持专注力快速找到自己想要的频道入口。
诸如此类，当时我们为这几个问题延展出许多设计上的解决方案，输出了不少有创新性的视觉稿。但是随着设计工作越往后进行，我们发现手中的设计并不能很好地解决，品牌在当前阶段中面临的实际问题。
因为在前期框架设计的整个过程中，我们没有把品牌定位这一因素考虑进去，我们发现旧版本的问题，埋着头只想把这些问题都解决了，却忘记抬起头看看我们的品牌现在在哪。我们前面说过，对照经济价值系统，京东目前主要处于服务阶段，还在逐渐迈向体验阶段的进程中。
而处于这个阶段的京东，外部环境是电商平台的逐渐趋同化；内部环境是业务体量庞大，同时产品仍有上升空间。所以我们的阶段目标就是需要加深用户对品牌的认知，业务内容需要更加具备兼容性、延展性，同时需要提高产品的业务分发能力。
结合这个阶段性目标，我们可以从旧版本存在的问题中，发现这 4 个问题才是当前优先级最高的、需要在当前阶段中解决的内容。所以基于筛选后的 4 个问题，我们开始将设计往回收，从视觉框架上更多聚焦于这 4 个问题的优化。
比如针对业务分发局限性的问题，对首页下拉区域的布局进行优化：下拉刷新除了常规的刷新状态外，在营销活动期间用户可下拉跳转至活动页面。我们将下拉路径缩短 30%，共享元素空间兼容更多的业务内容，充分利用首焦区域丰富业务的展现形式。
比如针对品牌识别度的问题，将首页头部区域的层级进行优化：在京东品牌形象 Joy 中提炼出微笑曲线，将微笑弧度应用在头部的背景轮廓上，并且在整个页面中统一植入品牌色京东红，同时在当前我们的品牌尚未成熟的阶段，直接使用京东 logo 强化用户对品牌的感知度和记忆点。
比如针对运营维护成本高的问题，还记得前面说的我们一开始做的百宝箱的设计么，虽然那种设计是更具有差异化和创新性，但是目前产品量级大、业务入口多，而且这一区域涉及合作商家自己提供的素材露出，如果没有统一的外框与规范的内容，运营维护成本是相当高的。所以我们保留了 icon 外框，同时规范每个框中只居中展示一个对应的图形，不能包含文字等其他元素。
最终我们可以看到，改版后的京东 app 无论是在品牌、业务层面，还是在多种复杂的运营场景中，都能实现作为平台的兼容性和延展性。所以，在视觉框架的时候需要预先考虑产品阶段，针对不同阶段需求作出相应的设计侧重，让设计出来的产品能够更加贴合品牌本身。
经过刚才的推导和框架设定，我们对眼前要做的产品设计风格、视觉框架已经确定的七七八八，界面的形态也初具雏形了。接下来要做的设计执行阶段就是我们设计师的魔法时刻，相信每位设计师都有自己的方式和能力让我们的产品变得更优美，所以关于这部分的内容暂不在此赘述。
通过以上章节我们了解到，只有从品牌自身出发，设计出来的产品才能在每一个方面都延续品牌基因、展现出设计的整体性。一方面满足品牌价值需求为品牌发声，另一方面将用户的所闻、所见、所感打造成一个特别的情感反应，让用户更长久的忠于我们的品牌。
不过，如果我们想要创造出能深化品牌基因的产品，我们在用户方面也要投入和品牌方面同样多的关注。因为不仅要看产品的外观界面，还要看产品给用户的感觉、使用方式和效果。比如用户因为什么才被你的产品吸引，用户会从中得到什么，你的产品能带给用户什么感受，用户如何才能为你的产品发生实际行动，等等。正因为我们所做的一切，都应该对品牌产生支撑作用。所以不仅仅是品牌能够识别和定义我们的产品，用户的认知体验也应该成为我们设计考量的一部分。究竟怎样做，才能让我们的设计能够有效的影响用户、让用户为我们的品牌买单呢？
文章来源：优设
Type defines type. 在英文中，单词 Type 包含两个含义，文字和类型。这从某个角度说明了字体对于品牌的意义。一种字体能影响甚至决定人们对于这个品牌风格的认知。随着产品使用场景的不断拓宽，一个品牌的呈现已经不再局限于一个 LOGO 那么简单。
品牌可以通过 LOGO、品牌色、IP 形象、字体等多种方式与受众构建联系。根据权威机构 Salesforce 今年 4 月的调查，75% 的消费者期望在与品牌互动时获得一种持续性的、连贯的体验。
纵观京东现在的品牌光谱，可以发现，之前我们在字体方面的确是处于缺位的状态。而字体作为一个分布广泛的媒介，必将成为连通全部潜在品牌触点的重要工具。
因此，京东朗正体的推出，将会与我们现有的资源一起，全面提升京东的品牌体验的连贯性，并有利于构建新的品牌生态。
京东朗正体其实脱胎于京东内部设计团队所称的「京东字体」。与很多品牌（IBM、奥美）相似，我们的品牌字体也是从我们的 LOGO 文字中延伸而来。
一开始，我们也是边学边做，通过已有的一些基础字体设计知识，从 LOGO 里寥寥无几的笔画中总结了一些笔画规律，比如横细、竖粗、点平、锐折等，然后将其应用到各个部门提过来的做字需求中。另外有时候也需要对其他部门提交的文字 LOGO 进行审核。
△ 这个神秘组织就是我本人
但是渐渐的，我们开始感到力不从心。一方面是随着京东业务不断扩充，希望设计京东字体作为 LOGO 的需求越来越多。使用京东字体作为标志，具有强品牌背书的优点，而且相比专门设计一个图形 LOGO 乃至一套 VI 体系，使用京东字体更加节省时间，具备更高的推广效益。但仅靠一个设计师来对接整个集团众多部门的做字需求，还是有点不堪重负。
△ 源源不断的做字需求
另一方面是我们意识到，我们根据 LOGO 字体制定的造字规则，其实非常模糊且局限，这也是我们缺乏字库设计的经验造成的。而这样的漏洞使得我们在实际的应用中遇到了问题。比如一开始我们简单地将撇的收笔都规定为纵切，但是在某些字中，使用横切收笔，视觉上却显得更为舒适。
后来我们在与专业的字体设计师沟通后了解到，这其实是因为在汉字中，单是一个撇笔就分为左上撇，斜撇，弯撇，直撇这么多种类型，而简单地将一个规则应用到所有的撇笔中，会造成某些字结构上的失衡。
就在京东字体的造字工程陷入困局时，市场部刚好找到我们，提出了与专业字库公司合作定制京东品牌字体的计划，从而推进品牌升级。我们与市场部一拍即合，确定了与方正的合作。于是，整个字库的创作主力转到了方正身上，而我们主要承担掌舵的角色，整个字库的制作也开始向专业化、规模化、系统化发展，生产速度更是呈现出爆炸性增长。
首先，我们与方正的老师确定了字体整体的基调，希望仍然保持简洁、直接、力量的感觉。对已有材料进行分析后，方正团队重新调整了字体的笔画、字面、重心和结构等方面，特别是对笔画粗细比例和规则进行了规范化。
可以看到，新版字体的纵横笔画比例从 20:11 缩小到 3:2 后，字面布白变得更均匀，辨识度也显著提高。
同时，方正团队对笔画规则的重新分类，也解决了我们之前碰到的难题。例如规定：点、撇、捺及镜像点撇的收笔采用横切，较为扁平的撇捺和镜像撇捺的收笔则采用纵切。
明确规则后，方正团队先小规模试点，做了 130 个字，这些字涵盖了京东常用字以及中文里的主要偏旁部首和部分独特字形。同时，方正也邀请我们为这些字提供意见。
由此，我们开始了字体找茬大赛。我们把这些字放大，打印后贴在墙上细细端详。近看，远看，坐着看，站着看，跪着看，走着看，调动起我们体内最原始的设计直觉，试图找出这些字里不自然的地方，然后贴上便利贴标记。后来我们甚至走火入魔，看字不是字。
△ 看字看到失智的同事
这次的项目合作，方正团队派出了两位重量级的设计专家，方正字库的设计总监仇寅老师与设计副总监汪文老师。（如此深厚沉淀的字体设计资历让我们忍不住就直呼老师）
一开始，我们还担心在项目过程中会比较被动，无法很好地参与到字型设计的讨论中。毕竟相比之下，我们简直是字体小白，缺乏系统的字体设计知识与建设大型字库的经验。但在合作的过程中，我们慢慢能体会到，从某个角度来说设计还是相通的。
在一期和二期字样中，我们都根据「设计直觉」，对一些基本结构提了调整意见，甚至直接上手做了修改的尝试，因为感觉这样讨论起来也比较直观。这也的确得到了方正老师们的认可与呼应，其中还包括一些比较重要的偏旁部首。
比如竖心旁、火字旁的两点，老师们一开始都做得特别纤细。这可能是因为点笔在初始的调性设定上，就被规定从起笔到收笔都不能有弧度。老师们或许是出于字面留白的考虑做小了。但我们认为从总体来看，还是显得过于「可爱」了点，于是将它们适当加粗，并向中心靠拢。老师也采纳了我们的意见，终稿效果呈现上双方都比较满意。
确认核心字样后，方正开始进一步快速地扩充字库。整个字库制作的时间虽然只有短短的 3 个月，但还是进行得比较流畅和有序的。
而这当中，还有一个无法忽略的角色，那就是市场部。市场部作为整个集团的品牌资源中继站，长期负责承接各个部门的设计需求，对字体在业务前线的实际应用效果有很强的发言权。于是，方正和市场部，自然落在了跷跷板的两边，而我们站在中间，既要信任双方，又要平衡好双方的意见，推进字库快速而高质量地产出。
这次制作间隙，刚好碰上了新板块业务——「京东健康」的品牌发布，因此方正团队需要临时先制作这几个字的标准字。在康字上，我们费了不少的功夫。
市场部认为方正给到的「康」字设计，有种不稳固的感觉。这可能是康字右下角的捺笔过高过短造成的。这可以理解，因为涉及到京东健康的业务范围和希望传达的品牌调性，业务方自然希望在字体标志上体现出稳定、安全的感觉。
但业务方提过来的建议，从设计上看还有欠缺，与其他字体也不成体系。因此我们在此基础上为方正老师提供了一些修改方向的建议，也就是让折捺更贴近地面，左边的两点也相应做出调整适应。
方正侧根据我们的意见，又做了进一步的创新修改。我们以设计角度和业务需求结合的角度进行挑选，认为将右边的点和捺打散，捺笔能获得更大的舒展空间，整个字符也「站得更稳」，选定了方案C。这个小插曲也就顺利解决了。
品牌定制字体，从名字上可以看出，似乎具有天然的专属性，它只属于其服务的品牌。但正如蒙纳在 2020 字体设计趋势报告所说，品牌的字体策略不应该是固定的、死板的，它更像是一个可扩展、可变化的工具，帮助我们实时重塑品牌。这意味着京东朗正体在未来仍将持续进化，更加开放。它不只是属于京东的字体，它还是我们所有人的字体，它试图满足设计师、合作商家、消费者等多方的需求。
京东朗正体目前仅有一个字重，比较粗，主要适用在大型标题或标志中，还不能满足目前众多文字内容样式的需要。后续我们将会制作更多字重，丰富京东朗正体的字体家族。我们也不排除京东朗正体会覆盖更多语言的计划。毕竟京东作为一个全球化的品牌，在各个国家的露出将会越来越多，使用字体在不同语境中保持品牌连贯性也一样至关重要。
除此之外，可变式字体(Variable Font) 可能是我们更长远的一个发展方向。可变式字体的特点在于其无限性，只需下载一套支持这种技术的字体，就可以直接调整字的各种外形参数，包括字重、字宽、衬线、斜度等。这既能减轻字体设计师的工作，也能为使用字体的设计师提供更多可能性。同时，这也有助于消除字体在各种电子终端演绎的屏障，释放更多品牌活力。目前我们正在与技术平台的小伙伴沟通这一计划的实现进程。
在使用范围上，京东朗正体已经开放授权给所有合作的商家和机构。我们也希望借助品牌字体增强与合作方的联系，让这个品牌符号为合作伙伴提供更多展示的空间，进一步拓展品牌生态的广度。
品牌战略公司 Lippincott 的负责人提到：「在这个新的时代，字体比任何时候，都更需要也更可能统一人们关于品牌的体验，并在各个渠道和载体上都实现无缝连接。」
这一次，我们做京东的品牌字体，当然不是为了「赶潮流」。它立足于现实环境的需要。京东，根源上看是一个提供零售基础设施服务的平台。这个服务，既是硬件上的，比如储存和传送包裹，也是软件上的，处理和分发信息。 而文字，作为信息的重要载体之一，是我们这一次尝试为京东创造设计价值而抓住的发力点和机会点。
和京东朗正体一起成长的历程，包含了我们在系统化字库设计中的懵懂探索，与跨界设计师合作的思想碰撞，乃至对京东品牌字体未来发展的想象，辛酸和快乐等比混合。
让我们期待京东朗正体的表现。
另外一款品牌字体「腾讯字体」也值
除了专业和工作，你思考过别的问题吗？最近反思了这十个问题，分享出来与各位酷友共勉。
年关将至，越是这个时候行业的波动也比较大，设计师萌生跳槽想法、被离职风险、薪资拖欠带来焦虑情绪、常年加班的职业病等等。也许我们在耗费心力提升专业能力的同时，是否应该思考点别的问题。
最近进行了一些反思，除了专业以外我还有哪些需要坚守的习惯和培养的目标。整理出最近思考的十个问题，希望与大家一起共勉。
无论是职场新人还是行业老司机，我们不怕专业能力不足，就怕浑噩度日，漫无目标。看到过很多工作多年的设计师迷茫，缺少新人的工作激情，却又不知道自己应该如何前进一步。
小时候老师总会问我们梦想是什么，却很少有人实现，现在如果问我梦想的话，我一般会说自己的短期目标是什么。你可以定一个大的目标，但是一定要拆分为短期可落地执行的目标，阶段性的验收才能做出灵活的调整。
如果是专业层面可以梳理当前行业需要的技能树，然后对自己的能力进行梳理，看看不足的是哪些，以此制定短期目标一个一个进行攻破。目标不一定与专业有关，也可以是生活中的兴趣，比如学会游泳、看十本书、完成一次自驾游、让自己瘦十斤、年底有钱回家~O(∩_∩)O~一切都可以成为自己的短期目标。短期目标是为了丰富自己的时间管理，也能充分的利用好阶段性的时间去完成，不断增进自信和维持这份驱动力。
如果你能控制好自己的时间，就是一个优秀的设计师，时间规划主要的难度不是制定，而是坚持，很多人都半途而废。我从实习开始工作以来为了更好的掌控自己的时间，喜欢以日记的形式记录当日完成的工作和接下来需要准备去执行的事项。完成之后以勾选的方式划掉，如果发现接下来没有任务进来，会制定一些日常提升的计划。
业余的碎片化时间根据出现的场景做规划，刚工作的时候上下班地铁时间需要 2 小时左右，通常就会安排进行阅读，不仅可以消磨时间也增加了自己的阅读量。如果加入一些日常练习主要的不是一天要做多少，而是能否长期坚持，通常是一天完成两个界面就睡觉，不多做也不少做，随着练习的坚持后面完成的时间就会越来越快。通过一些设计平台以打卡的形式发布作品，目的就是为了有一个可以记录自己成果展示的场景，调动起氛围。
也可以给自己的时间规划设定提醒，以免忘记这个时间段应该做什么，规划不能过于密集，休息是为了放松自己，如果被规划压得喘不过气，会把一个好的东西变得排斥。所以，留足一些休息的时间追剧、刷抖音、锻炼身体、逛逛商场散散步等等，劳逸结合才能持之以恒。
其实专业能力不足并不可怕，只要你想学都可以弥补不足，难的是缺少自我驱动力。三分热度你都能有，持之以恒却没多少人可以做到了。要时刻反思自己坚持了曾经的那份初心了吗？
如果自己自控意识薄弱，要刻意而为之，强迫自己按照定好的轨迹运行。可以制定阶段性的小目标和规划，这样战线不会拉得很长，有助于刻意坚持。可以给自己设定一些奖励，完成目标大吃一顿、看一场电影、去一个地方旅游、买一件规划好的商品等。如果没有完成就要强迫自己完成才能获得设定好的奖励，现在不对自己狠一点，未来职场就会对你狠一点，进而抛弃你。
如何提高自我驱动力：
思考一下除了专业和工作以外，你有兴趣爱好吗？如果你犹豫停顿了，希望你可以培养一个兴趣爱好，丰富自己的精神追求。当然，这个爱好需要是阳光积极的，别把陋习当成爱好。
除了设计以外，我从小喜欢画国画，虽然没有走这个方向去发展，我把它作为兴趣爱好来看待，丰富自己的业余生活。作为设计师兴趣爱好不一定是与设计沾边的，我以前有个同事她是 UI 设计师，业余时间却是某游戏栏目的专栏博主，也有专门写旅行日记的，研究美食的等等。
培养兴趣爱好可以让你在工作之余放松心情，释放压力，没有束缚才能释放自己压抑的情绪，也能更好的调整好心态。
有哪些适合设计师的兴趣爱好？
年轻的自己从来不担心这个问题，只有当发现自己身体透支过度的时候才会有所意识。作为设计师来说加班似乎已经家常便饭，不过如果加班透支了自己的身体也要进行反思了，毕竟健康是属于自己的。
虽然没办法立马做到早睡早起，但是可以逐步把休息时间和起床时间提前，早点起来锻炼一下身体、看半小时书也不错。好的身体才能实现更多价值，我最近都在尽量控制晚上十一点前睡觉，逐渐调整出更好的作息时间和习惯。
把青春和时间奉献给了工作，别把健康也搭进去了，如果公司不注重员工的健康而一味的压榨，不值得你为之拼命。
青春我们都曾有过，也都会失去，如果你正直青春期间，如何看待自己当前的经历和奋斗的动力比较关键。
刚毕业的时候用一部分青春换取了职场经验和专业进阶，后来选择创业也是希望把青春留给自己，为自己而奋斗。每个人都有自己的选择，只希望你今日的努力能够对得起未来的自己。
责任感是我们每个人都需要具备的，上学期间我们习惯了在爸妈的庇护下成长，从我们步入职场的时刻，我们就要学会独立生活。虽然你可能过着月光族的生活，一人吃饱全家不饿，也不一定尽到了自己的责任，但是总有从某一刻开始你会意识到自己的责任。
当我们在追求自己的未来的时候，也要回头思考自己的责任，从肩负起一个小的责任开始。可以是对家人的关心与照顾，如果当你成家之后应该会感触更深。今日对未来的反思与规划是为了使自己变得更优秀，将来有能力守护家人，实现自己的价值，肩负起自己的责任。
作为设计师我们是商业环节中的一环，随着感官体验的升级，设计的质量越发显得重要。在工作中我们需要成为一个有态度的设计师，主导自己的设计使其发挥更大的价值。个人态度分为性格层面和习惯层面的态度，下面分别梳理一下。
从性格层面体现自己的态度：在对接需求的时候，我们不能是一只温顺的小羔羊，被人牵着走并任人宰割。要有自己的态度，敢于为自己的设计发声，有自己坚守的原则，通过案例和经验进行引导需求方的选择。坚持不一定可以改变别人的选择，但是我们做到了专业设计师的态度。
从习惯层面体现自己的态度：设计能力都是可以学习培养的，养成良好的习惯至关重要，对细节的态度、设计质量的态度、提案演示的态度、沟通对接的态度等等。养成一个好的设计习惯，就算生活中也应如此，态度可以决定你能把一件事做到何种深度，希望我们都可以成为一个有态度的设计师。
优秀的设计师总能善于总结，总结可以对自己的知识体系进行梳理和检索，查漏补缺。总结个人分为两个方向，一是对自己的经验进行总结梳理，把经验形成可传递的方法论；二是对优秀的案例和资源进行梳理总结，把他人的优秀方法论转化为自己可吸收的轨迹。
有句话叫为了写作而看书，通过输出倒逼输入，主动吸收的通常转化和记忆都更强。除了专业相关的总结以外，我们也可以是一些读书笔记、日常感悟等，锻炼自己写作的能力和养成习惯。以前我们一个学员有记录生活感悟和写读书笔记的习惯，一年能坚持输出十万多字的随记，这个习惯值得学习。坚持几年后可以看出她在各方面的理解能力都非常好，也善于将自己的经验进行总结，带来的结果自然是得到了很多机会去更好的发挥自己的价值。
写作与你的专业能力不一定强关联，不要以经验不足而自我放弃，这只是一个习惯的培养。只有去尝试了才知道那里不足，如何去优化，下次应该如何写才能更合理。希望从今天以后，你可以坚持写作总结的习惯。
一切的自信和态度都是建立在自我专业的基础上，特别是设计师，如果自身不够专业如何说服别人。要时刻质问自己是否依然保持专业性，低姿态面对学习，时刻评估和提升自己。
不同阶段关注的焦点不同，刚开始我们可能在意技能操作层面，执行能力为第一保障。随着工作经验的积累，我们的关注面更综合，有时候也会感觉学得越多发现自己越是什么都不会。如果在职场中一直都没有新的知识和认知丰富自己，会逐渐变得被动，很难突破自己的瓶颈期。要保持学习的动力和日常输出的自我驱动力，不要温水煮青蛙，把自己陷入被动的状态。
所以，时刻问问自己，我是否够专业。
反思自己是为了让自己时刻保持清醒，作为设计师我们需要有态度、要自信、够专业；除了专业层面我们还需要反思更多问题，有自己的短期目标、能管理好时间、培养更多兴趣爱好等等。不断丰富自己的生活状态，可以带给自己更多乐趣，把有限的时间过得更合理。
希望本文可以抛砖引玉，大家都可以反思自己面临的问题，提升自己的综合素质和能力。
文章来源：优设
本文的英文原标题是「10 Rules of Dashboard Design」，其中 Dashboard 如果翻译成仪表盘的话，总觉得不大容易理解，所以我在这里把它翻译为数据可视化。数据展示方面的设计，相信大家会经常用到，这篇文章有很多简单直接，立马就能用上的干货，一起来学习吧！
数据可视化的目的是以一种用户更容易理解的形式呈现复杂信息。
一个优秀的数据可视化界面包含以下几个关键要素：
数据可视化界面设计最重要的步骤是需要了解目标用户是谁，能为他们提供什么价值。了解目标受众的知识背景和理解水平能帮助你做出对他们有价值的设计。
在了解目标用户时，有必要了解受众感兴趣的数据类型。
「专注于用户的需求，更容易产生他们喜欢使用的结果。」
目标用户级别可能会在一级和另一级之间变化，这是一个挑战性的点。与其他任何设计项目一样，可以细分受众并将信息相应地分为基本内容和高级内容。
在界面中表示一组信息有多种方法，选择正确的数据指标是设计数据可视化的另一个关键元素。这也与目标用户的偏好有关，即他们希望看到什么样的信息。
「根据需要设计数据可视化界面，为不同的业务使用不同类型的展示方式。」
下面是为目标用户设计数据可视化界面时需要考虑的一些重要规则。
一个常见的错误就是设计师没有对信息区分层级，所有的内容看起来都一样重要。
可以尝试使用组件的大小和位置来区分数据的层次结构。
2. 简单易懂
数据可视化的真正目的是用一种更方便理解，更简单的形式来传达复杂信息。
3. 一致性
使用一致性布局设计的数据可视化界面看起来更好。
4. 临近原则
在界面中把相近的信息放在一起可以帮助用户快速理解。
想更深入了解接近原则，看这篇：
5. 对齐
可视化组件元素需要在视觉上对齐，并保持视觉平衡。
6. 留白
留白是为了让界面有呼吸感，它使得用户在使用你的界面时能够有喘息的空间。
△ 留白太少简直就是在鼓励你的用户尽快离开
7. 颜色
使用有效的配色方案来吸引用户的注意力，帮助他们轻松地浏览信息。
△ 避免使用低对比度和低效的渐变
8. 字体
标准字体是可视化界面中的最佳字体，除非有特别的理由，一般不要用其他字体。
△ 不要使用影响可读性的字体
9. 数字排版
显示精度超过要求的数字使它们难以阅读和理解。
10. 标签
使用能够快速有效地向用户传达所需信息的标签。
△ 避免旋转标签
数据可视化旨在节省时间和精力，将复杂和抽象的数据以更简单的形式表示，目的是以用户能够理解的方式将关键信息传达给他们，确保自己理解用户所需，并给他们需要的信息。
文章来源：优设
本文整理了人工智能行业中设计师需要理解的一些名词和内容。
一方面供自己学习思考，另一方面也希望能帮助到准备投入到人工智能行业的设计师。之前听有的朋友讲到，觉得自己没有计算机背景，有点害怕进入到这样一个领域来。
没有计算机背景没有关系，只要对这个行业充满好奇，一个个的问题解决掉，在你眼前的迷雾都会散去的。
先简单举几个人工智能在生活中有在应用的例子：
像现在有的超市寄存物件，开箱时采用的人脸识别；像家里购置的智能音响，时不时还能跟它聊上几句；像接听到的银行电话（是的，对方可能是机器人噢）；像在淘宝上咨询的客服小蜜；像你手机里的虚拟助手….等等这些都是人工智能在生活中的应用。
人工智能在设计领域的应用也相当广泛，具体可以看这篇文章：
这几个例子是在生活中比较普遍能接触到的，实际人工智能应用的领域还在不断的扩大，我们甚至都无法想象到，未来的生活会是怎样的状态和场景。
在这家公司之前，我做过语音交互类的产品交互设计。当时在定义人与设备进行语音交互时，会是怎样的一个交互场景。从说唤醒词到发出指令，从收到反馈到继续对话。唤醒后等待的时间、结束的规则等等这些。
而现在，我大部分时间是在设计工具，如何让使用者能快速的创建出一个智能机器人。如何让机器人的创建者方便快捷的添加机器人的相关数据和创建出对话场景。
所以在进行这些工具的设计之前，有些名词概念，会需要设计师来了解一下，能让我们更好的理解人工智能的一些原理以及能够让设计师具象化到实际的设计中，甚至能基于此技术/原理来进行相关的创新或研究。
整理内容如下：（内容基于工作及自身理解，如有概念理解错误，欢迎指正）
下面尝试用较易理解方式来解释这些名词：
与机器人进行对话，首先就需要让机器人懂我们说的话，这其中，就需要来关注到自然语言处理，通过自然语言处理技术，能够实现我们与机器之间「无障碍」对话。
我把这三者关系画了张图示，我是以这样的方式理解的
从图中可进一步看出，NLU 和 NLG 是 NLP 的子集，而 NLP 是人与机器沟通中很重要的存在。
涉及到语音就会经常听到 ASR 和 TTS
语音识别（ASR）：将语音内容转为文字
如微信里面，当别人发的语音信息不方便外放收听时，可以转为文字查看
语音合成（TTS）：将文字内容转为语音
如现在很多的阅读软件，支持播放，有的就是利用 TTS，直接将文本内容转为语音播放出来。
我试着将上面提到的 NLP 和 ASR、TTS 组合起来，关系可以如下图所示
当我们说一句话的时候，机器知道我们表达的是什么吗？
意图（Intent）:一个人希望达到的目的，或者解释为想要做什么，他的动机是什么。
如：
槽位（Slot）：可以理解为系统要向用户收集的关键信息。
如：
「买张明天从上海到北京的机票」
上面这句话中，获取到意图（买机票）；提取关键信息 时间（明天）、地点（出发地：上海；到达地：北京）
这些关键的信息就是槽位，当系统获知到这些信息后，就能去执行下一步动作。
还可以这样理解，当我们去银行营业厅办理卡的时候，会填写一张表，表每个要填写的选项，就是一个个的槽位。槽位就是为你服务的人员要从你那收集的关键信息。
实体（Entity）：用户在语句中提到的具体信息
实体这词放在生活中，我们很容易理解，就是实实在在的物体，像桌子、电脑、熊猫等等这些都是实体。
但是在人机对话中，机器理解人的语句内容，会识别出语句中的实体信息（如：地点、人名、歌曲名等），然后进行标记。
那槽位和实体是不是讲的是一回事？只是不同的说法？
我之前有一度陷入这样的困惑中，但其实这两者还是有所区别的。比如，一个实体是数字，但是在语句中，数字将代表不同的含义。
如：
人：有没有10元的鲜花？ 机器人：玫瑰花10元一支 。
这句话中，实体number「10」，但这个 10 在句子中表达的是价格，所以收集到的槽位信息是价格：「10元」
这样说可能还是不太能理解，那我们可以先了解下，在一句表达中，需要进行槽位信息收集，但机器如何知道「买张明天从上海到北京的机票」中，「上海」是城市，并且「上海」是出发地呢？
「上海」这个词会被建立在一个城市实体词库中，这是「上海」能被识别到是「城市」的原因。
其次，通过将解析槽位加入语料中，加以训练让机器学习相关表述结构，来获知该句式中，收集到的第一个城市是出发地，于是把第一个城市填到对应的槽位中。
使用什么工具来让机器知道，这个信息是要提取的信息？
解析器（Parser）：抽取/解析用户语句中的关键信息
上一个讲到实体，这里讲到的解析器则是这么个工具，用来抽取这些信息。比如会有些通用的解析器如时间解析器、城市解析器、歌手解析器等等。
解析器的类型也比较多，如通用解析器、词典解析器、正则解析器、组合解析器等等，这里就不再扩展开讲具体解析器，实在过于复杂了。
命名实体识别（NER）：用来识别具有特定意义的实体。主要会包括像机构、地名、组织等。
是不是发现，解析器和 NER 在做差不多的事情？我是这样理解的，解析器的话是一个更大的存在，其中包括了 NER。解析器下会有不同类型和不同功能的工具来实现关键信息的识别/抽取。
在我们与机器人对话时，一般会涉及到四个不同类型的对话，开放域的聊天、任务驱动的对话、问答（FAQ）和推荐。
上面是在有次分享中提到的，这四个不同类型的对话，在机器人平台中，会需要借助不同的功能模块来实现。
任务对话（Task Dialogue ）：有上下文联系，就像我们要去订票、订餐之类的一段任务型的对话。
我们公司产品中，任务引擎模块就是做这个任务对话的创建，比如，要订机票的场景。用户在这个订机票的场景中，会涉及到的对话内容、流程的设计。
知识图谱（Knowledge Graph）：这个可以理解为可视化关联信息。
比如：查询一个明星的身高、年龄，他的学校、他的女友，他的相关作品，这些基于这个人而构建的信息库，都可以通过知识图谱在做整理。并且在构建时能够做到可视化的了解。
要让机器人知道，它脑子里有货了！
训练（Train）：这个概念可以这样理解，比如你创建了个机器人，但是它什么都还不懂，于是你塞了堆知识给他，这时，它就需要自己训练学习了。训练好了，就能回答你塞的那堆知识里的问题了。
讲到这就忍不住想用这个学习的例子，来简单讲下一般机器人的创建流程。像我们在学校，会经历上课学习新知识-复习温习-考试-整理错题集，以此循环进行。
这个创建机器人的流程也是一样通过知识的导入/创建-训练-测试-优化-上线-优化，以此循环，不断强化机器人，让它越来越智能。
其他：
数据标注：将对话日志中的有价值数据做标注（标记/匹配/关联之类）。
因为人的表达万千，多种表达方式都代表的同一个意思。有时用户说了句话，是语料库中并不包含，于是机器人可能就答非所问了。
Ai 训练师们就可以将这些数据信息标注到对应的问题中去，这样当用户再用同样方式表述时，机器人就能如预期回答了。
讲到标注想到之前在朋友圈很火的你画我猜，谷歌推出的这个小游戏席卷朋友圈。他们用了个如此聪明的做法，其实我们参与其中的做法就是在做数据标注，而且还是主动提供数据的那种。
这也反映了，数据对于机器人的重要性，通过不断的进行数据维护和补充数据，机器人就会越来越理解人，表达也会越来越智能。就跟我们学习一样，不断学习才能够理解其他的含义，甚至当认知能力提升了，看待问题的角度才能不一样。
文章来源：优设
我们在做设计的时候总是会听到，要注意「节奏感」。关于节奏感这个词，大多数人似懂非懂，可能明白它是什么意思，但是在设计中都应该注意哪些节奏感，却还没有一个比较清晰的思路。我们都知道音乐是有不同种类的，有古典音乐，有摇滚音乐等，它们之间的不同，很多时候是节奏给我们带来的感受不同。在设计上也是一样的，掌握节奏感就能控制画面的变化和气质的传达。
先理解什么是节奏感。
我们常说的生活节奏，可以理解为，假如你在规定时间里，你只需要上班和回家两点一线的生活。
但是当你有了孩子还要去幼儿园接送，晚上还要去健身等，这样就是生活节奏加快了。
我们常听到的节奏感其实是来源于音乐的。
不同节奏感的音乐会给人不同的感受，就像音乐1这种，会给你一种平静舒缓的感觉。音乐2这种就会有种比较喧闹、比较活泼的感觉。
说到设计的中的节奏感，从绘画里也可以看出，这是吴冠中的绘画作品，看似很简单的画面，但是这种水流的蜿蜒的感觉让这个画面变得灵动起来。
去掉这些流动的线之后，整个画面就变得很平静了。失去了那种蜿蜒流潺的感觉。
在我们很多图像网站里都用了这种瀑布流的方式，不仅是为了方便不同尺寸的图片的载入，在很多时候这种方式，相对于平铺的图片放置会更让人舒服而不枯燥。
在平面设计里，我们在学习平面构成的时候节奏与韵律是常常放在一起说的。
我们可以看海报去理解，第一张海报那几条鱼摆放的位置是没什么规律的，但是它却能形成节奏感。那么在第二张海报，我们能清晰地感受到它的节奏与韵律的变化。所以节奏是有规律或者无规律的变化的，韵律是有规律的变化的。
包括去百度百科查找相关信息也是表达类似这样的意思。
一个版面里的节奏影响是多方向面的，有文字编排、色彩搭配、图像处理等。
今天我们要讲的是文字编排里的节奏感。在文字编排上我们为什么要掌握节奏感呢?
我们在看一些纯文字的书籍的时候，很容易犯困。
这就是因为书籍的文字编排几乎没有节奏感，所以相对来说是枯燥的。
有一些不同的书籍设计或者杂志会在里面加入图片、对文字与版式进行处理，使它们变得有变化性，就会调节这种节奏感。让画面阅读不再枯燥。当然了，画面左边是因为大量的信息的传达不适合做过多的变化，否则阅读过程会有阻碍。这也是根据不同种类的信息从而把握不同节奏感的结果。
所以在这个画面里标题是节奏感比较强的，在保证阅读性的同时也做到了装饰性。那么由于下方信息量比较多，这些文字又需要被快速传达，所以这些文字的编排就会趋向于阅读性。
掌握文字编排的节奏感对画面传达的气质的影响是非常大的。就像这两张海报，它们的背景图片气质是很像的，都是天空的大留白，但是，完全不同的文字编排，就让第一张海报表现出活泼可爱的感觉，第二张海报表现出平静安静的感觉。
我们可以理解为，随着几乎没有节奏感到节奏感比较弱再到节奏感强，它的画面是可以呈现出由静止到舒缓再到动感的。
在文字编排中有非常多的对比，是一个非常大的系统，今天我们主要去梳理一下文字编排时的一些影响因素，以及在文字编排上一些需要注意的细节。（我们今天会讲这些影响我们文字编排的节奏感，字体种类、大小、长短、位置、疏密、颜色、组合形状和方向。）
文字种类就是我们对文字的类别进行分类，在字体种类里一般分成了衬线体与非衬线体，但是在中文里，我觉得主要由这五大类组成，分别是黑体，宋体，楷体，圆体与书法体。
包括字体家族里的不同字重。
不仅是这样，对于同一个字体我们还分常规体、窄体、扁体。
一段文字只选择上面的所说的变化就已经可以有很多种了。我拿了一段数学公式装❌。这里我们算出有 105 种。所以文字编排时稍微不注意就会有太多的变化性。
更何况我们经常在版面里加入其他国家语言的文字，这些都会影响文字的节奏感。
所以我们要学会控制这种节奏感，一般来说我们日常比较常用的就是黑体配无衬线体，宋体配衬线体。并且在字重上我们都要注意协调。尽量使它们看一起是一样的粗细度。
不同的字体搭配起来是有一定难度的。这种节奏感就好像不同风格的音乐的结合，它们之间的衔接与融合会比单纯的某一种风格的音乐制作起来更难。
这种不同类型的文字的搭配，对于排版和运用的能力有一定要求，运用不好就会传达不了画面的气质与信息。在电商里的反例是比较多的。在我看到的这张图里，它同时用了无衬线体与衬线体的结合，画面没有清晰呈现出准确的气质。大家可能会说它是简约高贵风，但是这是一个大范围，在简约高贵里有现代的高贵，有复古的高贵，还有一些与众不同的高贵等。
我们尝试把左边的衬线体换成无衬线看看。是不是有种现代都市的气质？
如果都统一成衬线的话，是不是一种精致的时尚感就出来了呢。统一这种文字的种类能更加精准地传达画面的气质。
刚刚我们也说到字体的混搭会产生混乱和怪异感，要慎用，但是如果我们的画画就需要这种感觉呢，当然就可以用这种特性来故意营造一种怪异感，当画面的字体种类越多的时候，所营造出来的节奏感会更强烈。
我们看这个画面也是这样的，周围的很多图形和各种各种样的字体类型让这个画面变得搞怪活泼。
就算去掉了周围的图形，文字这传达出来的搞怪感觉也依然存在。
接下来我们用这个文案来做一个案例演示下，由于平时很多都是用同一种类型字体搭配，那么这一次就挑战一下，我就打算做一稿用不同类型字体的版面。看看会有什么样的效果。
首先我在版面中划分版块，填上相应的文字，在这里可以看到，我同时用了衬线与无衬线的字体，还用了具有手写性质的字体。不仅如此， 所有的文字我都用了窄体而不是常见的常规体来增强这种怪异的节奏感。
最后加上一些图形处理一下负空间，这个案例就完成了。
为了减少影响，我把图片遮住单看文字组，我把这些字体都变成黑体了，对比可以发现，还是原来的文字组更有搞怪奇异的节奏感。右边这个因为板式与图形的完整性使得它看起来并没有很大的问题，但是它的确是缺少了像左边这种古典与现代结合的节奏感。
文字的大小节奏可能会有人理解为这样，但是我们一般不会这么做。
我们更多地是用在标题与内文的对比。
节奏变化比较大的文字组会给人一种冲击力，让人无法忽视标题的存在，就好像我在大声告诉你一句话的感觉，会比较强硬与喧闹。
节奏比较平缓的文字组表现出一种精致、安静的感觉。
我们把它们放到画面里看下，这个标题与内文的对比很大，并且在这个版面中占据一定的大小，这种时候有没有觉得这个画面呈现出一种，好像在播放新闻的感觉，好像在说这个小岛有什么重大新闻一样。
但是当标题变小时，整个画面呈现出比较平缓的节奏感，很符合画面传达出来的安静舒缓的感觉。
这种方式很多作品都有，这种标题和内文的对比，或者说是文字在版面的占比比较大时，就可以体现出这种很强烈的节奏，让人很难忽视这些文字内容。同时画面也更容易传达出一种力量感。
往往想要营造这种安静感的时候，比较注重画面整体的感觉，就不需要太多的文字变化，甚至为了区别文字层级而需要有的文字大小，也尽量地在减少对比。
我们都知道音频都是这种长短不一的声波图，因为这种长短不一的变化感受会给人带来节奏感。
所以也有以这种形式来编排文字，表现节奏感的系列广告作品。
它比较经常出现在居中对齐的文字组上。
但是我们要注意的是，你会发现很少情况在两个极端之间直接过度，比如说一长一短。
在没有文字大小的对比情况下，如果文字的长短对比太小，我们先不说节奏感，我们可能会有种疑问，它到底是想两端对齐还是居中对齐的呢？所以这种两端模棱两可的情况最好避免。不能模棱两可，对比太大又会不够美观，所以我们去创造节奏感的时候要注意这些问题。
毕竟它不是让人阅读时间很长的文字，所以我们就需要调节这种节奏让它看起来美观而且不枯燥。
这是我随便在购物网站截图的，你会发现它们的文字编排都很注意我刚刚说的短长短的节奏感。
我找了两张都是黑色背景并且配图比例也差不多的海报作对比说明这个问题。
因为图像的干扰我就同时去掉了图片，还有也把右边红色的字变成了白色，它们之间的对比变得清晰了，左边的文字规划在版面中显得更有活力，右边版面的文字集中在一块，就像我们前面提到的小说书籍内页一样。这样的文字编排在阅读上会比左边的缺少节奏感。但是我在这里要说的一点是，左边海报本身的图像没有右边的有冲击力与活力，所以我们如果要真正做对比的话。
用左边的图像放置在两个不同的版面来作对比，这样大家应该能感觉到差别。左边的版面虽然没有表现特别强的节奏感觉，但是至少版面不是特别压抑的。至于右边的我们会觉得很沉静，配合这种黑色的背景比左边更压抑。这就是文字编排在版面的影响。
不仅是文字组之间，标题的有意放置不同的位置就可以营造这种节奏感，是因为它依然可以使得我们的阅读视线发生变化。
比较随意编排的文字组也会比，比较拘谨正式的文字组看起来更有节奏、更活泼。
接下来我们用案例来演示。
首先选择纤细的宋体会比较符合这个画面的气质，很多人可能把文字组放在画面四个角就算大功告成了，但是这个画面既没有一个亮点吸引我们，而且画面里的元素都非常得散，没有体现出一点活泼的味道。
这个时候我们可以效仿刚刚我们看到的标题的做法，拉开距离，调整位置让它有上下浮动的节奏感，包括文字上我都做了一些切割移动让它们活泼，再加上线条让它们更有联系感。这个画面就会比刚刚活泼多了。
案例完成。
左边紧凑的文字字距会呈现出一种张力，一种急促的节奏，营造一种紧张感。右边宽松的字距画面会更缓和，不同的字距在版面中有宽松对比，也营造出了一种节奏对比。不会感到枯燥。
很多人可能没太去注意这些文字编排的小细节，这两版里哪一个更符合平缓的节奏感呢？答案是下面这个。第一张这样做也没错的，但是我们想让文字也能相应地呈现出一种透气感的话，第二张的会更加符合。
颜色的问题大家应该了解了很多了，这里就简单提一下，就像我们在营造一种氛围的时候选择的气球颜色都是非常重要的，我们选择饱和度比较高，颜色种类比较多的气球的时候，是想营造一种热闹活泼的感觉的。但是如果想营造一种浪漫安静的氛围时就用了很多白色或者淡色调的颜色。
就像这个 banner 一样，中间不同颜色的文字为这个画面增加了很强的节奏感。变得很活泼。
很多时候我们不需要太强的节奏感，所以我们经常给文字做一点的颜色变化，来让画面更鲜活。就像这个 banner，如果它没有了左边那个粉色的颜色的跳跃。
这个画面就会变得很沉静。
如果，画面文字的粉色变多，它的节奏感又会变得更强。
不仅是因为这个颜色本身的跳跃性比较高，而且也是因为颜色的不停切换导致这种节奏感的增强。所以不同颜色的占比也是需要考虑的。在这里主要是因为模特身上没有玫红色，所以左边不适合用过多的玫红色，用全黑都会显得很沉闷，所以这里选择用一次玫红色让这个画面鲜活。
我们在这些变化的图形中替换两个不同形状的图形，我们可以感觉到替换后的图形里的变化会更多，呈现出来的活泼性更强了。当画面中的不同形状更多，就会趋向于一种混乱。
用不同的图形在版面里，有区分不同信息的作用，但是这种方式也是增加版面节奏感的一种方式。在很多促销的传单会经常看到。
这个画面没有人物图片，仅仅是通过文字的编排就能传达出这种热闹的节奏感。
除了颜色本身的热闹性，其中比较大的影响因素。就是文字在各种不同形状里的编排，让这个画面呈现出热闹的氛围。
随着方向变化越来越多，画面会趋向于更有动感的的节奏。但是节奏感觉也是有度的，一旦变化性很多，那么这个版面就会显得杂乱。我们也可以简单理解为乱的元素的占比决定着你画面呈现出来的节奏感的强烈。
像第一张海报一样，这种有点古老的作品我们一般会认为是比较正式和比较严肃的，但是这些方向不一的文字编排，向我们说明了这不是一个严肃的展览，而是具有活泼的属性，从而吸引不同的观看群体。包括右边这个海报的文字编排都让这个画面的节奏感变得更强了，与人物夸张的肢体语言也相呼应。
倾斜的文字编排在电商里是出现得比较多的，微微倾斜文字就可以强调这种活泼的节奏感。
我们来看一个比较明显的例子，画面只有一个黄色的色块和文字编排以及一个不规则的图形，但是这个画面呈现出来的感觉却很活泼。
其实去掉这图形，也并没有影响原有的气质，是因为文字的编排的方向性的对比让它的节奏感增强了。
那么说到这里其实今天的内容也就结束了，这次的案例就给大家演示下怎么用这些知识去做一张海报。
首先我们要分析这个画面，图片本身是比较具有节奏感的，因为不是我们平常看的袜子的视角，而且人物有一种运动过程的动势。
这个负空间非常不规则，如果文字在这个画面负空间上直接加字的话，可能就会显得比较乱，但是我们又要做出迎合这个图片的节奏但是不乱的画面，应该怎么做呢？
首先不采取直接在图上加字的方式，把图片缩小，再添加一个深色的底色，这样这张图片和这个画面里就是一个整体了。
由于我们要压住图片的节奏感，不让它太乱，所以我在周围的空间编排文字是呈现一个既有文字层级关系，但是整体是呈现矩形的文字组。现在这个画面看起来的确不会乱，但是文字还是少了和图片活泼气质契合的节奏感。
分析一下这个画面，是宇宙系列的感觉，所以我就加入了环形的文字，然后再加一点与图片呼应的颜色。这个画面就会比之前更和谐。在做的过程通过减少变化与增加变化让画面逐渐接近自己的预期。
总结一下今天我们讲的，我们今天讲的是文字编排中的节奏感，在一开始，我分别给大家讲了从生活节奏、音乐节奏、再到设计的节奏去理解什么是节奏感，然后我还讲了关于文字节奏感对于画面的重要性，无论是对信息的传达还是对气质的表现，它的影响是非常大的。最主要的部分，我讲了影响文字编排的节奏都有哪些因素，比如文字类型、大小、方向、长短、文字组合形态等。把握自己要传达的节奏，才能正确传达信息。大家也可以用这种方式去看作品，分析它的节奏感是通过什么方式形成的。久而久之，对节奏感的掌握就会更加熟练与精准。
文章来源：优设
卡片式设计对于我们来说并不陌生，从设计类网站上或市场上的一些 APP 中也会看到很多的卡片式设计的案例，卡片式设计也是 UI 设计中最常用的方式之一。
最近在新项目的设计中也尝试使用了卡片式设计，结合实际项目中的一些思考进行总结并归纳出一些卡片式设计的小知识点。同时希望通过本次的总结进行知识沉淀，以及跟大家一起探讨下卡片式设计。
在现实生活中的卡片式设计可以说是无处不在，例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡……诸如此类的生活常见品都是以卡片的方式存在，其共同点都使用一个容器承载着内容，并且具有「便携性、信息简洁和相对独立性」。
在项目设计之初我分析了一些使用卡片设计的 App，并且从中整理总结了几个较为常见的卡片式设计的使用场景。
1. Feed流
卡片式的 feed 流设计是一种非常常见的设计，早在前几年 Facebook、Google+ 等产品就使用了这一方式，Feed 流作为一种长内容的媒介，用户需要长时间的滑动看内容并筛选有效信息，卡片式设计很好的解决了内容与内容的区块分隔，让用户在长屏幕滑动中依旧可以很好的明确识别每一块的内容。
实际案例-淘宝微淘
2. 瀑布流设计
瀑布流的出现让单屏区域内显示更多的内容，而内容较多的情况下，使用卡片式设计可以较好的对内容进行了区域划分，让上下左右的内容从整体中具有相对独立性。
实际案例-Pinterest
3. 左右滑动组合型内容
卡片式设计具有较强的层次感，相比于平铺更能呈现内容可滑动的感受，并且块状化的设计让内容具有较高的区域分割感。
实际案例-QQ音乐
4. Tips提醒
作为非界面固定内容，卡片式设计可以让 tips 提醒设计变得更自由，在符合用户体验的基础上，它可以出现在任何我们想要它出现的位置。
实际案例-淘票票会员提醒
5. 结合手势的单块可互动内容
若页面中有且只有一个主内容，并且需要用户进行快速筛选时，可考虑这种结合卡片式设计与手势设计的方式。大大增强了用户对于设计的体验感知和丰富视觉表现。
实际案例-探探首页
6. 卡券类设计
卡券类的设计实际上是一种物化映射的过程，我们在现实中看到的卡券造型，结合卡片式的拟物化设计，让用户在屏幕上可以更直观的感知，提升了设计的代入感。
实际案例-京东领券中心
7. 集合型功能入口
集合型功能入口往往会有多个入口，使用卡片式设计让入口形成一个区域整体，可以做到既统一又相对独立。
实际案例-淘宝微淘关注账号
8. 个人主页顶部内容卡片
个人主页的设计往往会在氛围上营造沉浸感，卡片式的设计可以把关键信息进行概括收归，让原本单个的内容形成一个整体。
实际案例-美团外卖会员
基础的卡片设计规则，相信大家在一些系统级别的设计指导规范中也或多或少都能了解到，不同平台的规范差异其实不会有太多本质性的区别，更多的是处理技巧或方式的差异，而每个设计师对其理解的角度也会具有一些差异化，这里分享下我对于卡片式设计的一些基础想法。
同样的卡片设计，不同的人做出来的感受可能会有所差别，而表达卡片质感的主要关键点在于：卡片形体、投影深度、卡片颜色对比，我们需要了解这些基础知识点之后，再结合实际的 APP 风格进行设计。
卡片形体
就像图标的图形设计一样，不一样的形体也能表达出不一样的气质，因此在设计的时候我们需要依据整体的风格进行表达。异形卡片的设计，可以让原有方方正正的卡片表达出差异化，从造型上打破一些传统的处理方式，再结合一些 IP 人物元素可以更加直观的表达出具体的内容氛围。
投影深度
投影的视觉效果，会直接影响整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过度生硬，因此合理的数值比例可以让卡片看起来自然有质感。在项目中我常用的一组数值规律是 1:2 或 1:3，例如 Y 轴偏移 10px，模糊度则设定为 20 或 30px，这样成比例的数值出来的效果会较为自然，如下图：
卡片颜色对比
卡片与背景的颜色对比会影响这卡片的整体质感，在设计时我们需要把握好卡片与底色的对比，不同的明暗对比出来的质感也会有差异。这里有两点建议：
在使用卡片式设计时，经常会纠结边距的设定，宽边还是窄边？多少像素更为合适？我经常会带着这种疑问去设计。
基于内容的简单规则
卡片式设计作为设计的表现形式，最终是为了承载内容，因此边距的宽窄也需要依赖于实际内容的判断。结合我在项目中的尝试分享以下几点：
多窄少宽
卡片内容较多是使用窄边距，让卡片具有足够的空间来展现内容，内容较少则可以考虑采用宽边距来打造整体的视觉空间感，如下图 app store 和淘宝的设计对比。当然这只是一个建议，实际还得具体问题具体分析。
再如一些瀑布流、宫格、横滑模块较多的 APP 设计亦是如此，在内容较多的情况下会把边距压缩到最小的合理间距。
内外成比例
以最外边为基础值往里设计，间距以固定比例进行缩减，虽然没有删格来得规范，但也可以让设计变得有迹可循。
基于删格
删格系统解决了一些基础的板式问题，有助于提升设计的规范性，让设计更加有迹可循。在设定卡片式的边距时可以适当应用删格系统，让边距与内容形成固定的关系，这样可以帮助整体的卡片设计更加具有细节和规则。
标题的设定主要考虑以下几点：1.是在卡片内还是卡片外；2.标题的字号设定多少更合适；3.标题是否加粗？
卡片内或外的对比
在项目设计中让我较为纠结的是：标题应该在卡片内还是卡片外？通过了一些案例的尝试之后，我总结了一个规则（需要依据内容的形态而进行设计）：当卡片内容是独立的模块或模块中只有一个大标题时可设定在卡片内；当卡片内容是以组合呈现或者具有延续性内容时设定在卡片外，形成最外层的主标题。
标题的字号设定
标题主要作用为 2 点：1.简短说明每个模块的内容；2.让用户在长页面浏览中起到引导、定位的作用。
通过一些尝试发现：1.当内容较少时，并不需要太大的字号即可起到标题的作用；2.当内容较多时，较小的标题字号则容易被沉入内容中，让用户在浏览的过程中难以发现，而导致信息获取缺失；3.建议标题与正文字号大小差异在 6-10px，这样可以更好的拉开差异，让标题更具有标题感。
字体是否加粗
常规思维下我们都会对标题进行加粗，我在实际中的经验得到的总结是：需要看手机系统或不同厂商的机型。我在项目之初都对标题进行了加粗，但后续在跟进还原时看到的效果并不理想，特别是 Android 的机型上，因为我们使用的是系统默认字体，android 系统很多字体并未对系统进行优化，而是使用微软雅黑，微软雅黑在android 系统上再加粗，就会显得整个系统的外轮廓特别粗糙，最后我们依据不同的机型进行了差异化的选择。
圆角的设定实际上没有太多的原则问题，只要符合整体的风格调性即可。当然不同的圆角也能表达出不同的质感，大圆角表达柔和、小圆角表达硬朗。
圆角的规则设定
以卡片的圆角作为基础的参考值往内推算整体的圆角使用规范，卡片与卡内的元素形成合理的比例规则，而非随意根据「经验」进行设定。
圆角大小差异对比
大小的差异化呈现出不同的视觉感受和风格差异，我们在设计时更多需要考虑我们设计的产品风格或气质是适合大圆角还是小圆角，而非依据一些设计网站上的流行趋势。因此基于不同的风格或者实际内容场景下进行设定才更为合理。
卡片式设计相比拉通式设计更需要考虑设计中的透气感。在常规情况下，对内容边距及四周边距进行调整，让内容之间具有较好的空间呼吸感，从而让设计得到留白的效果。如下图对比案例，在基础删格不变的情况下，每个间距都在原有基础上扩大了12px（接近 1.33 倍），从而让内容具有较为舒适的宽度进行阅读
选择某一种设计方式的重点在于我们了解这种方式的优点，并且可以把这些优点融合到我们的设计当中。在项目设计中，我总结了几点卡片式设计的优点。
1. 优化模块化，提升内容区域感
模块化的设计也是我们日常中会应用到的方法，结合卡片式的设计可以让模块化的规则变得更加简单，增加了模块之间的可复用性和延展性。而当内容较多的情况下，使用卡片式设计可以有效直接的形成区域分隔，从视觉感知上就对内容进行了分隔，提升用户获取信息的效率。
2. 提升内容独立性
在组合型的内容设计上，使用卡片式设计可以让每个小块内容呈现相对独立的展现特性，结合模块化的设计，可以在一大片关联的内容中，做到既统一又相对独立。
3. 增强视觉空间感
卡片式的设计可以提升整体设计层次感，通过投影、前后颜色的设定，让内容与背景之间产生视觉空间感。
4. 增强视觉表现力
在设计中我们可以对卡片进行异形设计，用来达到我们想要的风格表现。当然在一个页面内尽量不要太多，尽量使用页面中的首个卡片进行差异化处理，让整体表现出一点不同即可。
5. 增强可点性
卡片式设计产生的空间感，让每个模块更加突出，相比扁平式的处理方式，卡片式从视觉感官上会较为突出，从感官上更具可点击感知。
任何一种设计方式都会有其利弊，最终选择某一种其实不过就是当下最适合而已，而在尝试中我也总结了几点卡片式设计存在的一些缺点，当然只是个人的思考而已。
1. 横向空间利用率降低
卡片式设计的存在左右边距，因此在有限的屏宽内内容横向区域相比于拉通式设计有所减少，在内容较多的情况下可以适当调小卡片左右边距。
2. 避免过多的层级
从整体来说，卡片式的设计本身就是增加了基础背景的层级表现，其视觉层级相比拉通式更为丰富，因此不建议在卡片上再二次叠加块状式设计，避免造成层级复杂。在项目中也会遇到内容层级需要多层级的表现，从中总结了2种方式：
3. 不适合长文或内容多的表达
若在设计上使用了卡片式的设计风格，但在一些长文表现的界面建议去除卡片。长文章的页面更强调阅读的沉浸感，用户需要更多的专注于文字，这时候无边的体验更适合。
4. 把握好界面的分区，避免过于拥挤的排版
卡片设计具有独特的视觉空间感，但卡片与卡片之间也会有分隔，因此在设计时更应该对内容进行归纳，避免产生过多的小块卡片而导致排版过于拥挤、凌乱或者内容不够宽度展现。
无论是卡片式或者拉通平铺的方式，其最终的目的都是为了服务于内容，我们在做设计的过程中只是选择适合于呈现我们内容的一种方式。根据具体的内容情况给出合理/合适的设计判断才是我们需要不断提升的关键点，切莫流于形式而忽略了内容设计本身的重要性。
文章来源：优设
B 端工作看起来总是没有 C 端工作那么有趣，面临的限制比较多，面对客户（金主爸爸），很多时候总是左右为难。在实际工作中，面对这些情况该怎么办？笔者根据自己的 B 端工作经验，总结了一些交互设计的要点。
从事 B 端 SaaS 行业已经两年有余，从最开始面对需求的茫然无措，到现在已经有了自己的一些基本方法论，这期间经历了从有人带到自己摸索的一个阶段。
每天看看文章、看看书，大家讲的都是 C 端的产品，C 端的交互和体验；每天看同行们分析的不是如何提高用户活跃量，就是 APP 的设计风格。这在我一个 B 端交互看来，无比羡慕啊。
C 端项目的设计师感觉每天和一线用户打交道，忙得不亦乐乎，可以与用户直接对接，可以添加有趣生动的文案。
而对于一个做 SaaS 的 B 端来说，Boss 常说的话就是：
你这个颜色太鲜艳了。
我们是 B 端，你这种页面布局不合适吧。
这个文案太幼稚了，不适合我们产品的调性。
中规中矩就好，不要太跳。
整理了一堆的字段，画了无数的线框和流程图，却拿不出 C 端设计师才有的丰富多彩的作品集，
尽管如此，设计的原则是通用的，无论是尼尔森十大可用性原则，还是格式塔原理，在设计方案的落实上，都有着相同的方法论。
无意在此讨论 B 端和 C 端之间的差异，仅以此文章来总结下我自己的一些工作经验，如有错误，敬请指出。
从业务需求的对接，到界面交互的细节，从功能的设计要点，再到产品的发展导向，我总结出了以下几个方面，逐步展开：
C 端设计师最开心的可能就是收到用户的反馈需求了吧，这样表示自己的产品还有人在用，然后建个群让用户开开心心吐槽，完了就从里面提炼适合产品的一些需求和建议。
而对于 B 端设计师来说，如何处理需求是其成长的第一关，尤其是 SaaS 行业，不会处理需求，产品的功能更新将会遇到极大的问题。
B 端的用户不像 C 端，虽然可以用用户画像来进行归类和分析。但是由于 B 端的直接用户是付费用户，付了钱的就是大爷，因此大爷提的需求你敢不应？
用户提的需求乱七八糟，有些是体验问题，有些是功能问题，有些就是属于比较极端的需求。那种传说中甲方要你做一个可以根据手机屏显示颜色而改变手机壳颜色的需求，在 B 端行业也是存在的。
那么问题来了，我们该如何处理纷繁杂乱的需求呢，我从收集需求-评估需求-需求落地挨个讲起：
如果你也打算像 C 端产品体验群那样建立一个群，完了将自己的用户聚集在那里，静静等待需求的话，我劝你三思而后行。你可以这么做，但是应该明确群的目标，可以收集需求，可以是 bug 反馈群，也可以是更新通知群；但是不要将其变成一个纯粹的用户反馈群，因为这会导致用户的吐槽声音过大，而让潜在的用户流失。
B 端的客户一旦使用你们的系统，就要付出相应的金钱和时间代价，不是说想换一家就能换。因此他对于已经使用中的用户反馈是极其看重的，B 端的产品很大程度是靠着同行间的口碑传播从而取得了良好的效益。如果一个新用户想进群了解，结果一进去就发现大家都在吐槽这个系统的不足之处，那么可想而知他的选择是什么。
因此，最好的需求收集方式是通过运营、市场以及客服的同事们的反馈，因为他们是离客户最近的人，他们每天都跟客户打交道，了解这个行业从业者的一些基本情况。很多时候，客户回访和运营对接的时候用户会提出一些功能的建议。
通常的一种情况是，在 SaaS 行业，你的一个客户的流失意味着你的竞争对手多一个客户。因此一般市场都会有竞争对手的信息，他们会知晓客户从我们平台流失到其他平台的一些原因。最重要的是，他们也为你提供了绝佳的竞品资料，进而可以进一步明确需求。
收集好的需求，该怎么处理呢？
工具之前我用的是 trello，很好用，你可以将需求按照类型分为不同的看板，规划产品的进度。
之后由于团队的原因，改用 teambition，功能要丰富点，可以写测试案例等，对于国内用户比较友好；可以按照 KANO 模型将需求划分为不同的类型，用以安排产品。
KANO模型
基本（必备）型需求——Must-beQuality/ Basic Quality
一个产品应该具有的基本功能，能满足用户的基本需求，比如，微信的基本功能是即时通讯。
用户不会因为该功能的出现而觉得满意，因为这是基本的、必备的一项功能。如果连这个都没法满足，用户满意度会大幅下降。
期望（意愿）型需求——One-dimensional Quality/ Performance Quality
用户迫切希望产品能提供的功能，当提供该需求时，用户满意度会大幅上升，当不提供该需求时，用户满意度会下降。
比如百度网盘一直为人诟病的下载限速，无法对单次下载而付费。而需要开通会员，用户的抱怨恰好说明了其痛点；当提供单次下载付费的服务时，用户满意度明显提升。
兴奋（魅力）型需求—Attractive Quality/ Excitement Quality
用户对该类型的需求并无明显的期望，但是若产品能够提供该类需求，用户满意度会极大提升，也会培养用户的忠诚度。
比如，很多产品都有实验室功能，即对那些不是必备需求的功能设计一个开关，用户打开后可以进行使用。对于有的用户来讲，这些功能很大程度上会带来惊喜。当然，每个人期望不一样，实验室方案也可以视为另类的灰度测试，用以验证用户对于功能的需求。
无差异型需求——Indifferent Quality/Neutral Quality
产品无论是否满足该类需求，用户的满意度是不会变化的，正如用户不会因为收到「玛莎拉蒂5元代金券」而感到开心。因此在 B 端行业，开发时间有限的情况下，无需为该类需求投入资源。
比如优化一个用户访问量很少的网页，也无需因为领导或者客户的个人喜好而改变后台页面的颜色。无论使其鲜艳活泼还是稳重大气，后台满足基本的视觉要求和规范即可。当然，这并不意味着你可以把后台设计的简陋和杂乱。
反向（逆向）型需求——Reverse Quality
当提供方向性需求的功能时，会招致大部分用户满意度的大幅下降。比如常见的在搜索中掺加广告、强制用户授权过多个人信息以及推送大量无用的消息等，会导致用户的反感。
通常需求的收集不是你一个人在进行，产品经理、老板以及其他同事也会帮助你收集，汇总到你这里的需求会开会进行讨论，下一步要做什么。
做之前首先要对需求进行评估，评估的原则基本是按照 KANO 模型来，但是也会有比较特殊的情况。
交互设计师需要注意的是，你除了需要关注用户体验的问题以外，还要与开发一起评估该需求的实现；你不懂技术没关系，开发会告诉你该需求的落地会出现什么问题，在实现上会有什么难度。这些在评估需求的阶段都要提出来，并且在交互层面解决掉，否则你画出了原型以后，开发告诉你这个页面必须要修改，否则开发成本过大，无法在排期内完成，这个时候你再去改交互稿将会费时费力。
评估完需求，定好下期开发的需求后就结束了么？
其实并没有，因为需求收集不可能是一个固定的阶段，它是渐进的、不确定的。因此收集需求和评估需求会不断在实际工作中叠加和重复，比如你制定好了需求优先级，已经着手开发了；这时候老板或者领导突然又增加了一个优先级很高的需求，所以你得重新安排这些需求。如何在敏捷开发中保质保量的完成工作任务，这是一场斗智斗勇的 battle。
前面讲到需求评估的时候，需要与开发人员一起评估技术难度。其实在你将需求落地为交互原型的时候，也需要持续沟通，这完全是为了避免因为技术问题而产生修改设计稿或沟通不顺畅的问题。
如果你是在做的过程中，持续与开发人员保持沟通，能了解到他们是如何实现这个功能的。当然，有些基本的设计原则所不允许的事完全不用屈服于他们的「淫威」，毕竟他们得按照你的方案来。如果开发懒惰而想通过最简单的办法来实现，用户体验又是极其不友好，那么请直接对其说「NO」。
比如常见的删除的二次确认等弹窗，一般最好的体验是在按钮旁边弹出；但有些开发懒得写弹窗，直接调用浏览器的弹窗，即浏览器顶部经常出现的那种确认弹窗，这个时候你要坚决告诉开发，这样搞是坚决不行的。
需求的落地伴随着竞品分析，判断一个需求是否靠谱、落地方案是否成熟的一个重要途径就是竞品分析，可以通过调查研究相关竞品是如何进行设计的。这对于我们有着非常大的帮助，可以避免很多的弯路，甚至能避免犯错，提高交互方案的可靠性。竞品分析又是个比较繁杂的事项，如果是有特殊要求可以做成报告的形式，如果仅是去参考对照的话只需要去体验竞品即可。
B 端的业务比较重要，尤其是涉及到数据的增删改查和金额的计算，一旦出错，将会导致无法挽回的后果。因此在出错前和出错后，应该有相应的挽回机制。
1. 出错前
内容编辑类的功能应该提供自动保存草稿功能，防止没有及时保存而丢失内容；删除、禁止等较重操作应该有二次确认，防止用户误删。
对于操作流程应该建立明确的引导机制，长表单可以分开按步骤填写。
提示信息应该明确而及时。比如一个表单需要登录才能填写，在未登录的状态下，应该先提示其登录再填写否则用户在填写大量信息后，因为一个错误而前功尽弃。
系统内的禁止信息、警告信息、提示信息建立一套相应的规则。
2. 出错后
用户的时间就是金钱，这对于 B 端商家角色中尤为重要，大量订单的处理、表格化的导入和导出、批量管理和网站运营等方面，对于效率有着极高的要求，商家通过可视化界面来完成某项任务。
在这其中，影响最大的莫过于交互方式了，相信各位一定用过各大银行的网站，页面的导航关联性弱、结构不合理、提示不明确、交互流程过长，甚至有的网站光是登录，就得大费周章。
如何提率，我认为主要从以下几个方面着手：
1. 提高易用性
如果你的产品，让人看一眼就能上手，那么说明是非常友好的设计。易用性不一定意味着简单和低智，依据复杂守恒定理（泰勒斯定理），每个应用程序都有自己内在的、无法简化的复杂度。
所以，提高易用性意味着要设计合理的交互，易用性分为对新手（小白用户）友好和对老用户（专家用户）友好，包括数量最大的中间用户。
如果你的界面是仅仅对于新手友好，那么可能完成的任务都是简单而轻松的。但是对于老用户，他需要更复杂的功能来处理大量庞杂的任务；因此在设计的时候，既要提供傻瓜式的操作方式，也要对专家用户提供提率的工具。
2. 智能化
此处的智能化既包括通过大数据或者人工智能自动将操作步骤变得简洁，也包括诸如一些字段输入、自动定位、图片识别、OCR 等方式来使用户的效率得以提升的功能。
以前的用户要抠图可能会在 ps 中操作好几个步骤才能完成，但是随着机器学习技术的发展，ps 已经可以更加智能的抠图。当然，还包括其他功能的智能化。
在 B 端 SaaS 领域，智能化也是一个重要的趋势，针对不同的商家所面临的不同的行业领域，我们或许可以提供更加全面且友好的服务。
3. 场景化思维
如果你深入了解你的用户，去观察他们整个行业的运作模式，以及他们对于业务的处理方式，你就会明白你的产品的走向。
你需要深入每一个场景，比如，在户外旅游领域，发布旅游产品线路的可能是在办公室中的编辑人员，带队出行的是在户外场景中的导游，现场签到的可能是集合点的管理人员，而处理订单的又是另一个坐在办公室里的小伙伴。
他们需要协同工作，才能使各项工作顺利展开，发布活动-用户报名-订单管理-报名人统计-活动成行-集合点签到-带队出发-旅游结束-活动评价-领队评价-交易成功，这一系列流程中，面临的角色是复杂的，而意外也是常有的事。比如报名人无法参加活动而导致的退款、活动因为天气原因而无法成行、户外活动发生意外等。
你需要做的就是：
场景化的思维会让你设身处地为一线操作用户的体验而努力。因此，交互稿完成以后，彻底回退到小白用户的身份，假装自己是在某个场景下要做某件事，通过你的交互方案，能否顺利完成自己的目标。
此处的通用性是指，在 SaaS 软件领域，不同客户所面临的行业有一定的差别，可能这个功能对于 A 用户极其重要，但对于 B 用户，该功能并不重要。比如有的客户想要在前台展示某活动的报名人的姓名以增加真实性，用以吸引用户参加；但是有的客户就明确反对该功能，认为这个功能侵犯了用户的隐私。
诸如此类的需求相离、甚至相反的情况太普遍了。合适的解决方式是建立两套开关，一套是由 SaaS 服务提供商的统一后台来配置，用以区分比较大的行业差别，比如电商领域中，可以配置店铺类型为：美妆、服饰、食品、电子产品等；另一套开关在客户的站点后台，用以控制不同的站之间的差别，比如前台界面样式、交易流程、相关字段或菜单的前台显示等。
另外比较重要的一点，也是最基本的一点，软件设计中存在一个原则就是高内聚低耦合，模块化设计，用以提高系统内部组件的复用。
交互设计也是同样的道理，可以将你的商品视为一个模块，那么这个模块无论是添加到网站，还是小程序，我只需要创建一个商品即可，可以同步更新到不同的平台。
另外，订单的管理只需要添加相关的标记即可（比如来自小程序的订单标记为小程序，淘宝订单标记为淘宝等），一个平台发布，多个平台同步，有效提高了运营人员的效率。
同样的，如果你的 pc 端产品和移动端产品没有实质性的运营差异（即当成两种模式来运营），那么很多数据（如文案、图片、banner等）的获取可以采用同一个数据源 。
最后，提高系统内的一致性，减少用户认知成本。在同一平台内的页面，样式和交互上要尽量保持一致性，不要有的地方是总金额，有的地方是总价格，这会让用户犯迷糊。提高通用性，也意味着你需要关注并熟悉系统内不同功能之间的关联性，尽量做到统一处理。
在进行商业化运作和产品功能的优化时，对于正向的用户需要激励，对于负向的用户需要限制。
这是我在读完有赞的白鸦写的关于有赞产品设计原则的文章后，影响最深的一个原则，他写到：
我们的使命是帮助每一位重视产品和服务的商家成功。「每一位」和「商家成功」是我们最重要的关键词，我们要服务的是每一位商家，然后帮助每一位商家成功，但是为了整个生态的健康，那些不重视产品和服务的商家，我们是（可以）不服务的。所以我们在产品设计原则上，在产品做一些功能的选择上，如果这个功能做完了会导致商家不重视产品和服务，我们是不会/能做的。
举个例子：消费者购买之后（可以）有一个评价，我们的购物评价是要么开启要么不开启这个功能。我们不接受商家去删购物评价，因为商家一旦可以删了消费者的差评，他就（很可能）不会那么重视产品和服务了。所以有赞永远不会提供删除商品评价的功能，商家要么就不开启。可以不用，如果要用就要接受有人说你不好，商家可以去跟消费者沟通，沟通完了消费者自己改，但是我们不提供让商家删坏评价的功能。所以，这就是最基本的有赞产品设计原则，我们只服务重视产品和服务的商家，我们所有的产品设计原则都是需要这样。
——《白鸦内部培训：企业服务类产品的底层逻辑和有赞产品设计原则》
更多内容请看：
曾任支付宝首席产品设计师，现任有赞创始人的白鸦是很多人心里的产品大神，这份由他在内部分享的《产品设计原则》值得设计师、产品、运营等阅读学习。
阅读文章 >>我将其概括为一个产品的中正原则，即中立且保持正向原则。
一方面，对于企业未来的发展而言，正向的用户能带给平台无尽的潜力，平台可以和商家一起成长，而负向的用户，则会给平台带来隐患。比如，淘宝既限制商家的违规运营和欺诈客户，也限制 C 端用户的恶意薅羊毛，在商家和用户之间做一个中立者和调节者的角色。
我在做需求的时候，也遇到过很多的负向需求，这在商家看来是一个必须的功能，作为平台应该提供。但是若是提供给商家，则会对消费者的利益造成损害，删除差评就是一个很好的例子。
看了白鸦对于有赞产品原则的阐释，我觉得每一个平台类的产品，都应该保持自己的中正原则：
在 B 端行业，口碑传播是非常重要的一种被动营销方式，很多 B 端公司都是低调的潜行者，坚持中正原则，并不会损害自己的利益，反而会获得商家的尊重和消费者的信赖。
啰啰嗦嗦说了这么多，比较细碎，不乏逻辑凌乱的片段，但也算是对自己两年以来对于 B 端交互的一些心得吧。
其实交互的原则基本都是通用的，无非就是根据平台属性做一定的调整，不同的是产品所处的行业，每一个产品都无法脱离其所处的行业而存在，这也是使用产品的具体场景。
因此做一个产品前，一定要了解行业，去熟悉行业的通用做法，了解行业的专业术语和规范，研究行业的所属群体等，这样你就会做出真正适合市场且能让大多数用户满意的产品。
文章来源：优设
给大家看两张图，这两页的文字内容相同，你更想看哪本？
不出意外的话，大家应该会选右手边的吧（选左边的请自觉去面壁）。（所拍书籍为《西文字体》，高冈昌生 ）
虽然大家不是专业做文字排印的，但对文字排版的感知力，其实是生而有之的。
中文也是如此，优秀的出版社（译林出版社、广西师范大学出版社等），为了让阅读体验顺畅、版面舒适，在文字排印上做了许多工序。
正是这些工序，提升了书籍正文的阅读体验。想要在阅读软件上打造优秀的阅读页，这些工序正是我们需要借鉴的。
通过设计师与开发的共同努力，我们最近完成了这一文字排版能力的建造，让阅读页的效果能够更上一层楼。
最终效果如下：
本文将从以下几个部分说明这些工序存在的理由、实现的逻辑等。
细致的来看，文章包括以下内容：
通过前期的大量学习与调研（专家观点：小林章先生、鸟海修先生、刘庆先生等人关于字体排印 or 字体设计的讲座、W3C 中文排版需求（强烈建议大家看这个）、孔雀计划的文章、字体排印的专著：《平面设计中的网格系统》、《字体排印》、《西文字体》等；本次改版几乎所有的功能与逻辑都参照了以上专著与文章。）
我们把文字书排版时的工序，总结为「文字排印要遵循的三个原则」：
原则说明
中文排版中，字与字之间的间距被称为「字间距」。
文字间距会影响阅读节奏。字间距大的文章，阅读速度会变慢。因此，散文、诗歌在排版时，会刻意调大字间距。
下面的图，仅凭自己感受，选一张更好的:
不出意外的话，应该是觉得下图更好看。
尝试默读一下，你会发现，上边的图片，最后两行字间距被拉大，阅读速度放慢；而这不是作者的本意，换言之，这会破坏阅读节奏。
因此，我们把「保证字间距恒定」作为首要原则，来保障阅读节奏感。
备注（建议第二次看文章的时候再读）：需要说明的是，部分字面较大的字体（方正博雅宋、兰亭黑等）在书籍排版时为了契合书籍内容的调性，有时会刻意设置字间距，这与「字间距保持恒定」的原则并不冲突。在电子阅读软件中，由于无法针对特定书籍进行调整，因此本次设计实际上是保持「密排」(字与字之间没有额外添加字间距，保留字体原始的间距)。
工序
行长是字号的整数倍。相同字号下，汉字字宽固定（就是字号本身），汉字标点的字宽同样也是字号本身（除了个别标点之外，例如破折号）
汉字排版时，没有额外字间距的情况下，是上图所示的字面框依次密排。
因为中文书籍的正文排版常用两端对齐，如果行长不是字号的整数倍，则汉字之间会有异常的行间距出现。
更严重的是：阅读软件字号可变的情况下，行长不可能做到适应所有字号且字间距不会被拉大。
行长是字号的整数倍是中文字体排印中标点挤压等的前提。
——《孔雀计划》，原文链接：https://thetype.com/2017/07/12513/
在阅读软件中，随着字号调整，如果沿用「版心宽度固定」的思路，难免存在字间距被拉大的情况。
对此，我们调查了国内外知名中文阅读软件，发现：KindleAPP 能随着字号变化自由变动，但这会导致：改变字号大小时，版心宽度略微变化。
有此顾虑，我们做了一个测试。结果证明，大家不会发现版心宽度有变化。这说明用户投入到阅读当中、调整字号时，并不会因为版心宽度变化而有不适，甚至不会感知。通过测试，打消了我们的顾虑。
最终我们大胆采取了「版心宽度跟随字号调整而变化」，来确保「行长是字号的整数倍」。
虽然「版心宽度跟随字号变化」并没有不适，但我们需要保证在多种屏幕尺寸、字号下，版心占据屏幕的区域都舒适。
面对这个问题，我们制定了一个公式，可根据屏幕大小、字体大小等，自动调整版心宽度。确保「行长是字号的整数倍」的同时，保证页面美观。
标点符号「优先推入式避头尾」。如图所示，为宋抄本《孙子算经》；在古代，书籍排版可以做到字间距恒定，原因是古代不存在「标点」，也就没有「标点避头尾」导致的种种问题。
而现代汉语存在标点符号，有的标点不能放在行首，有的不能放在行尾。
我们把不能放在行首的标点叫做避头标点，如逗号、顿号、句号等；把不能放置在行尾的叫做避尾标点，如前引号、前括号等。
「推出式」避头尾是大部分阅读软件的做法：
以避头标点为例，若此标点被排到了行首，「推出式」 的做法是从上一行拉一个字放在本行。如下图所示：
然而这么做的话，上一行的字间距被拉大，打断了阅读节奏（阅读节奏放慢）。
我们发现专业的排版软件（Indesign）和出版社（广西师范大学理想国系列、人民文学出版社、译林出版社等知名出版社）的做法是「优先推入式避头尾」，这种方式可以很好地解决「仅推出式」造成的问题。如下图所示：
△ 《少数派报告》译林出版社
通过「优先推入式避头尾」，上图中标出的双引号的宽度被挤压了一半，如果它保留为「全宽」，就没办法排在这一行，这就是「优先推入式避头尾」的最终效果。
以避头尾标点为例，「优先推入式」避头尾在这种情况下会将本行内标点宽度挤压，为避头尾的标点腾出空间，如下图所示：
上面的图可以看到：通过「优先推入式标点挤压」，第一行的字间距没有被拉大，保持了密排。
通过将本行内的标点宽度进行挤压后，腾出了空间给本来排不到的逗号，确保了字间距的恒定。然后只有在本行内标点无法压缩出足够空间时，才会选择「推出式」的处理方式。
因此这种处理方式叫做「优先推出式」标点避头尾。
行内标点挤压。因为相邻标点挤压、行首段首挤压，会出现部分标点符号占据半宽的情况。这种时候，一行的末尾可能正好有汉字或标点轧在了边框上，如下图所示，为汉字轧在边框的情况：
遇到这种情况，通过挤压行内标点宽度，从而腾出空间给最后一个字。这种做法叫做「行内标点挤压」
标点悬挂的逻辑和配套内容。存在另外一种处理方式来避头，叫做「标点悬挂」，即将标点悬挂在文本框外。
然而这种采用「标点悬挂」，需要配套做「行尾强制半宽」，如下图所示：
然而行尾强制半宽带来的问题是字间距被拉大，违反了原则一（尽量保证字间距恒定），对于宽度有限的手机屏幕，尽量不要改动。因此最终我们没有采用标点悬挂的处理方式。
Type is Beautiful 网站中对此有详尽的思考，如有兴趣请看：https://thetype.com/kongque/
原则说明
书籍排版中，文字所在的范围称为「版心」。
经验老道的文字排印设计师，检查正文排版效果时，最常用的方法是：离远看页面，就像蒙上一层磨砂玻璃一样，检查整个页面是否疏密均衡（《字体排印》，高冈昌生先生），也叫做「灰度均衡」（龟仓雄策先生称之为「浓淡匀称」，from《疾风迅雷》）。灰度均衡的版心可以让整个页面美观的同时，也保证了读者阅读中不会被突然的空白打断。
如下图所示，第一张图因为一些原因导致了页面中有许多「窟窿」，显得零碎，灰度明显不均衡。而第二张图，通过「标点挤压」将这些「窟窿」填上，整个版面更像是一个整体，灰度更均衡。
看倒数第二行的「乃跪地罪曰：‘大人何故’」两个标点连续的地方，从整体的角度看，会不会觉得这里有一个窟窿？
总的来说，灰度均衡的版面整体感更强、视觉上更舒适，因此也是相当重要的原则。
工序：
相邻标点挤压
众所周知的，汉字是方块字，在字体设计时会被放在一个方形里；中文标点同样也会被放置于同等大小的方框之中，如下图所示。
如上图所示，中文标点所占体积一般远小于汉字，因此当多个标点符号连续排列时，会让版面在这里好像有一个窟窿。专业的中文排版中会做的事情是「相邻标点挤压」。如下图所示：
如上图所示，有连续标点存在时，通过压缩标点所占的宽度，从而补上「窟窿」。
原则说明
与西文书籍的左侧对齐不同，中文书籍（横排）传统而言是讲究两端对齐。这是被大多数国人认可的中文排版方式，因此不再赘述。
工序
行首段首标点挤压。当行首出现标点符号，会感觉左侧不齐：
可以看到，处理前版心左侧因为有单引号，看起来第一行没有和第二行左对齐，处理后效果回归正常。同样的，段首的标点也需要挤压。
知道了以上内容，我们需要把它变成开发需要的逻辑。具体如下：
1. 相邻标点挤压逻辑
在 W3C 的《中文排版需求》中，对相邻标点挤压的具体做法为：
通过梳理，我们将其简化描述为 4个逻辑（实际逻辑与 W3C 基本一致）：
备注：成对出现的标点叫做夹注符，如双引号、书名号等；其中细分为开始夹注符与结束夹注符。
此外，我们注意到，一些出版书在以上逻辑之外，把问号与叹号与[顿、逗、句]归为一类，实际效果良好，因此出于问号与叹号同样占据字面不多的逻辑，采用了这种分类法。然而随后在走查阶段发现线上部分字体的问号与句号占据字面的位置不同。
这促使我们关注到标点在字面中占据的位置，我们梳理了客户端所有字体的中文标点。
发现汉仪乐喵、方正兰亭黑、汉仪启体等几款字体的问号字面占据异常，如果进行相邻标点挤压可能会造成标点粘连的情况，因此最终我们决定保持问号与叹号不参与相邻标点挤压。
2. 避头、避尾标点汇总表：
以上逻辑实施需要首先让程序判定哪些标点是避头尾标点，因此我们梳理了所有汉字标点并分为避头、避尾两类（部分标点即避头又避尾）。
汉字标点符号与西文的标点符号许多时候仅凭肉眼难以分辨（如,与，前者是西文标点中的逗号，后者是中文标点中的逗号），因此我们使用Unicode 码为每一个标点精准划分，确保不会造成错误。
3. 行内标点挤压与「优先推入式避头尾」逻辑：
「行内标点挤压」与「优先推入式避头尾」其实本质上都是对行内标点宽度进行压缩，因此在逻辑上归为一类。根据具体解决逻辑的不同将其分为以下四类：
针对这四种情况要做的具体事项补充在右侧：
至于推出逻辑，则稍简单些，书籍中有时候会遇到连续几个标点符号都是避尾标点的情况（或连续避头标点），因此对推出的逻辑设定为：
备注：国内知名的字体设计与排印网站 Type is Beautiful 中有介绍，行内标点挤压的方式有多种，「开明式」「全部半宽式」「平均式」等等…我们选择了「平均式」（有权重），开发难度会稍小些、效果也更可控制，不再赘述。
4. 整体逻辑流程图
但是仅仅通过文字性质的描述还不够，我们需要能让程序理解的逻辑。
由于部分处理方式之间互相干扰，因此根据这四种方式影响的内容不同，以「对其他处理方式的干扰程度」从高到低排序，并串联成整整体的逻辑图，以保证整体逻辑简单、不重复，如下图所示。
在此基础上，我们将文章中第二部分所梳理的逻辑细节填充进流程图内，并合并重复流程，最终获得如下流程图，方便开发理解和工作：
5. 小结
通过「避头尾标点列表」「可挤压标点与挤压空间」「广义的推入逻辑具体说明」「整体逻辑流程图」四个文件，我们可以顺畅的将设计要求传达给开发。
最终，通过这些工序，我们可以在最大限度上保证字间距恒定、版面齐整和内容灰度均衡。提升阅读流畅性和阅读页的体验。
文字排印作为一个古老的技艺，从排版工人操作实体字模的时代，经历了照排时代，来到了数字排版的当下，排版的自由度和效率已然成倍提高，然而由于许多原因至今这些排版的工序只在出版社等专业领域流通。
相对于纸质书籍，电子阅读在易携带性、阅读方便性、多媒体辅助阅读上有得天独厚的优势，然而最基础的阅读体验有时候不如纸质书籍，我们希望通过我们的努力，电子阅读在未来，能够让读者获得全面超过纸质书籍的阅读体验。
当然，文字在移动端的体验上限远不止如此，一些产品仅靠网格系统与字体排印加上优秀的字体，已经做出了令人惊艳的体验。
如上图所示，通过优秀的明朝体、网格系统，物书堂出品的几个词典 APP 的界面让人惊艳，文字之美还有很多可能，这也是我们的努力方向。我们也知道，当前客户端内中英混排、英文排版等方面，依然有进步空间，未来也会进一步完善。
文章来源：优设
蓝蓝设计的小编 http://www.lanlanwork.com