宋体的起源和发展

雕版宋体字的形成 

在印刷术发明之前，书要一字一句用手抄写，费时费力。而唐代发明的雕版印刷术，使书籍由手工抄写进入印刷复制时代。

现存最早的雕版印刷品是唐代咸通九年的《金刚经》

宋朝体

到了宋代，雕版印刷迎来黄金时代，但此时的字体也并非我们熟知的“宋体”，而是以唐代大家的楷书字体入板，并且不同地区入板的字体也不同。

浙江刊本–《姓解》

四川地区 – 《开宝大藏经》

明朝体

明朝体是中国明代木板印刷中出现的字体，也是现今大众所认知的“宋体”的原型。虽然明朝体逐渐失去宋朝体所特有的风格，但由于易于凋刻，字形便于走刀，能满足当时的印量而得以发扬。

《南齐书》 –明朝时期的南京国子监刊本

清代宋体字

在康熙中期以后逐渐形成清代的风格，此时的宋体字更加成熟、精致。乾隆时期，宋体字大体定型，与现代宋体字基本相同。

《学统》清康熙刻本

综上所述，我们可以知道宋体字不是宋朝的字体，而是汉字字体中的一种风格类别。而在日本以及港台地区，宋体字也被称为“明朝体”，“宋体”与“明体”本为一物，是由于文化差异所带来的名称上的差异。

现休宋体

如今，为了适应印刷和电子屏显示的需要，宋体又被进行了一番改造。现代型宋体的几何特征更为明显，笔画更为利落冷峻，为了可读性，文字胸线也较大，更加符合现代设计所需要的明快感。

以宋体为基础发展出许多新字体，各大字库也开发有各有特点的宋体。包括老宋到新宋，再到仿宋，从用于标题的粗宋、中宋，到用于正文的书宋，成为一个完整的字体系列。笔画较粗的宋体适合用做标题，醒目大方；笔画较细的宋体，拥有很高的阅读性，主要用于正文排版。

根据中宫和体饰等特点，可以大致地将宋体分为传统型宋体、中间型宋体、现代型宋体：

目前可免费商用的宋体字非常稀缺，

推荐9款免费商用宋体。

宋体的使用场景

传统、历史

传统宋体的笔画结构带有手工雕刻的痕迹，几百年的文化沉淀，加上字体本身的特征，使得宋体用于传统、历史题材的设计中，可以体现出古朴的传统文化感。

文化、艺术

宋体由于继承了自然书写的痕迹，又具有精致的装饰性美感，运用在文化艺术等题材，具有强烈的人文气息，充满文艺范。

典雅、高贵

宋体字方正平稳、对称均衡的字体结构，显得端庄典雅，舒展大气。常运用在要体现高端、雍容、典雅、华丽的设计中。

女性、优雅

宋体在工整中充满人情味，有着很强的韵味感和精致美感，带着几分女性的温柔与优雅气质。所以很多和女性相关的设计都会使用宋体。

时尚、前卫

现代宋体笔画呈几何化结构，相对于传统宋体的温情，现代宋体更加的冷峻，细腻中透露出时尚前卫的风格，具有时尚感与精致的印象。

宋体搭配推荐

案例一

使字体搭配协调的一个基本原则就是选择风格相近的字体。使用同一字族里的字体进行搭配，是最简单、安全的搭配方法。所谓字族（font family）即一款字体下的多个子字体，如思源宋体字族从细到粗共有七款字体，风格协调统一。

使用中西文组合排版时，西文尽量不要使用中文自带的字体。宋体常与衬线体相搭配使用，因为两种这字体无论在笔画特征，还是气质上都很相似。如本案例使用的是西文字体“Times New Roman”。

在编排时需要形成视觉层次，通过字体的大小、粗细、颜色等方式来给版面带来阅读的层次感。

案例二

搭配不同的字体时，要注意他们之间的包容性，既要有所区别又要统一和谐。书法字笔画变化丰富且非常具有视觉冲击力，通常会搭配同样具有历史文化属性的宋体字形。

西文则选择与宋体对应的衬线体，与书法字形搭配。

根据书法字的结构和笔势，通过对文字大小、位置的调整，进行编排，让文字看起来更紧密也更有节奏感。

案例三

在进行时尚类的设计时，可以选择现代型宋体，西文字体则可以搭配几何衬线体。本案例使用方正风雅宋和Didot进行搭配，这两款字体简约的几何造型和粗细对比强烈的笔画，细腻中透露着时尚前卫的风格。

黑体与宋体的混搭是很常用的一种搭配方式，需要注意的是尺度的把握，适当的对比能够为版面带来更丰富的视觉印象，但对比过度也会产生凌乱感。

本案例选择较细黑体进行搭配，字形形成了微妙的对比，较细的黑体还有着高雅、精致的气质，运用在具有女性时尚特征的设计中相得益彰。西文则选择和黑体相对应的无衬线体。

编排效果：

如果感觉排版太过于规矩，可以尝试加入手写体加强字形对比，打破呆板感，营造更强烈的动感。

在进行设计时，不管是中文与中文还是中英文搭配，都是需要经过仔细分析和不断练习，才能达到和谐统一、层次清晰而美观大方的效果。

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

转载请注明：学UI网》如何排版更高级？带你重新认识宋体字排版！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

表格作为组织整理数据的手段，可以有效的向用户展示数据信息，是B端产品中出现最高频的模块之一。

下图为典型的B端表格示例：

 

用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化（关联和区别）。好的表格信息展示设计，应当是能够辅助用户高效便捷的实现以上场景中的诉求。

今天我们就来讨论表格设计中一个重要的问题——【应该如何考虑表格信息展示】。首先抛出结论，我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。 

 1

一、疏密适度

常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信息Icon等。表格单元格是信息填充的基本单元，行高和列宽的定义决定了表格信息的疏密程度，进而决定了表格给用户的直观感受，因而下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。

 1

1、定义合理的表格行高

a、行高模数设定

在具体设定表格行高时，由于表格中以文字信息为主，我认为可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑。文字行高可以设定为字号的1.2~1.8倍，文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯（多行行高同理去设定）。

 

根据用户场景的不同，来选择模数倍数，需保证系统内使用统一的模数。比如，针对用户快速浏览获取大量数据场景时，可以选择1.2倍作为模数，列表更为紧凑，同样扫视范围内，可获取更多信息。

 

b、为小屏幕考虑一屏显示的行数

表格行高决定屏幕内能呈现的行数，即用户在一屏内能获取信息的数量，主要影响用户纵向对比数据的效率。对于1920*1020（包含该分辨率）以上的大屏用户，对于一屏显示行数的感知不强，但对于1366×768、1280*720等这类小屏，显示行数有限，用户进行纵向数据对比的效率就会有所降低。在设计前，应当充分了解目标用户的行为诉求，了解目标用户设备屏幕分辨率的占比分布情况，有针对性的设置行高。

 

c、用户自定义行高的场景

B端产品的特点之一是通用化，覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。比如个人视力的原因，有些用户喜欢表格行高值大一些，看起来舒适透气，便于阅读。而有些平台用户由于很熟悉线下excel表格模式，希望线上的表格也尽可能像excel那样紧凑，以便他们在一屏内看到更多的数据，进行对比，提升工作效率。产品为了让不同用户都能获得较好的体验，可以考虑把表格疏密度的设置开放给用户，建议不是完全开放给用户去调整尺寸，而是给出一定阶梯度的快速选项，例如舒适、标准、紧凑三种高度来满足用户需求。

例如，Gmail提供默认/标准/紧凑三种表格密度设置，如图：

 1

2、灵活扩展的横向空间

通过对表格固定位置与列宽的调整，扩大表格数据空间，使信息不局促，空间更透气，保证横向扫视易读性。

a、列宽极限值设定

设计师需要根据表格承载内容定义表格的列宽，应包含最大/最小/默认列宽的定义以及使用规则。

我推荐的一个规则是：

规则1：当相对列少【浏览器宽度-页面其他模块 > 全部列的默认宽度和】，则各个列自动等比拉伸，撑满屏幕；

规则2：当相对列多【浏览器宽度-页面其他模块 < 全部列的默认宽度和】，则出横向滚动条，每列宽度为默认宽。

另外需注意最小值设定时应避免信息展示出现【对联式表格】。对联式表格最大的问题在于，一屏内展示的行数有限，当用户纵向对比数据时，需往复滚动多次，记忆压力大；横向扫视时，阅读视线不能一直保持左右横向预览，而是不停上下左右切换，使用体验不佳。

 

b、横向『偷取』屏幕外空间、行高模数设定

当压缩列宽也无法在有限空间内展示大量的数据指标列时，我们可以借助横向滚动来『偷取』屏幕外更多空间。横向滚动需用户拖动滚动条进行浏览，有一定操作成本，所以要结合业务实际情况选用是否利用屏幕外横向空间。

随着行和列的增加，用户的瞬时记忆会达到极限，超过“7±2原则”的范围，用户需要依靠辅助信息去阅读表格内的数据，防止遗忘某列数据的意义。因而当表格数据列较多横向滚动时，建议为用户固定重要信息列，如标题列、操作列。同时用户浏览表格时是符合F型扫视原则的，建议固定列显示在表格左侧，方便用户从左至右浏览数据、从上至下对比数据时能够清晰定位当前所浏览数据的主体是什么，同时可根据需要快速发起操作。

 

同理，用户拖拽纵向滚动条来阅读数据时，可固定表格的表头，帮助用户在阅读过程中清晰知晓单元格数据的意义。

 

c、用户自定义展示信息

针对需展示大量数据的情景，我们除了【偷取】屏幕外空间外，可以根据B端产品提供的数据表格是覆盖全部用户角色的全量数据的特点，让不同用户角色来自定义想要浏览的信息，从而提升表格的可读性。下图为百度信息流推广平台的自定义列功能，用户可根据需要选择展示的数据列，系统将在用户完成选择后，主动帮用户保存自定义内容，下次登录后，表格依然按照用户定义的数据来展示。

 

1 

二、高效扫视

无论是在表格中要明确的定位数据，还是顺序阅读，高效扫视都是B端用户一个很重要的诉求，我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。 

1

1、合理的对齐方式

数据信息本身包含多种格式，可遵守一个基本原则即文字左对齐，符合从左到右的阅读习惯；数据信息右对齐，方便数据大小的直观对比。

具体对齐方式可参考我们建议的方式：

文本字段：可点击字段、普通文本类、数字、字母等，长短参差不齐，左对齐；

格式化字段：日期、时间、部分枚举类等，字符数一致且较短的，左对齐。

数据字段：金额、数据、百分比。带小数点等数据，方便对比为主，右对齐。

 1

2、去除视觉杂音，强调对比关系

a、正确使用分割线，实现对表格行与列的强调

横向分割线可强调行内信息的连续性。垂直分割线在缩减元素之间的距离后也能区分不同元素，更好的强调纵向数据对比。但只要遵循良好的对齐方式，通常不展示纵向分割线，避免信息干扰。因而表格中通常仅使用横向分割线和底色分割，提升表格阅读效率。 

1

b、斑马线作用有限

斑马线即隔行（列）变色。它能让行（列）间界限更为明显，但由于与分割线的作用类似，起到的作用有限，可针对不同场景酌情考虑是否使用。比如针对不同类型的数据（如总和、平均值）使用不同底色来区分，可以更突出强调该数据。要注意的是，隔行（列）换色的两种颜色不能反差过大，否则看来太“跳跃”。

对同一类数据而言，分割线就已经能够明显区隔，所以可不使用斑马线，但需要给出单行的悬浮状态，强化横向导视，避免出现列数过多引起数据错行的问题。

 

1

3、突显重要内容的视觉重量

前面我们提到表格呈现的数据信息除文本外，还有其它一些可视化数据。可视化一方面提升了列表视觉表现力，增加差异化，另一方面让内容更加突出，提升阅读效率。例如：数据列中数据异常时，最好可以醒目的形式突显，让用户一进入页面就能快速注意到异常状况。

 1

三、精简克制

体验好的表格一定是克制的，克制应表现在信息的适度隐藏以及内容折行与截断展示原则。

 

1、适度隐藏信息

a、隐藏低频操作

当表头需要承载排序、表头筛选、提示等功能时，不建议一股脑的将所有功能展示出来。用户对表头的诉求是定位数据指标﹥执行操作的，因此可根据具体业务定义展示哪些操作，将其它操作隐藏，有需求时用户主动触发再展示。比如，百度搜索推广平台的推广管理页面提供了全局筛选，所以表头筛选对于用户而言是相对低频的操作，我们选择隐藏表头筛选的图标，当用户鼠标HOVER表头单元格时再展示。

 

对于表格行内的操作我们也应当进行优先级排序，为用户专门设置操作列展示高频核心的操作，其它相对低频的次要操作可隐藏在相关数据单元格中，用户有诉求时hover对应单元格即可快速发起操作。

 

b、隐藏辅助信息

表格中的有些数据指标是综合纬度的，当用户关注点定位于该指标时，需要通过细分数据来理解、分析。指标的细分纬度信息虽能起到辅助用户更好理解数据指标的作用，但如果全部拿出来在表格列展示，会让表格变得臃肿不易读，此时可以考虑采取一定设计手段去隐藏这些信息，把触发展示的自由度交给用户，也更符合用户逐级查看的场景。例如，百度搜索推广平台中关键词列表中，质量度指标是由多条数据共同决定的，我们采用了将细分指标聚合在气泡卡片中，当用户HOVER质量度得分数据时展示出来。

 1

再比如，有父子层级关系的数据，可以通过父子折叠表格将子信息默认隐藏，用户根据需要，去展开查看详细的子信息。

 

2、设定折行与截断规则

B 端业务的数据信息复杂多样，信息内容的长度高度是多样不可控的，很多内容会超出我们限定的最大列宽，最大列高，我们应当给出折行与截断原则去约束内容的展示，而非总是为具体情况而做特殊设计，破坏体验的一致性。

截断折行原则设定时要细分，不能简单粗暴的一刀切，比如一行截断这种，如日期、时间等固定格式内容，拖动列宽后文字应折行而非截断展示，避免影响用户误读。再比如很多业务实体标题字段是格式化的，即标题前面部分可能都是一致的，这时候如果简单的截断，用户就需要逐一Hover才能找到定位到要找的数据。因而折行与截断原则，我们建议是给出三种：单行截断、双行截断以及自适应截断，根据具体业务情景选择。

 1

总结

我们今天集中讨论了应该如何考虑表格信息展示，并总结了如何做好表格信息展示，即遵守【 疏密适度】、【高效扫视】、【精简克制】三原则，并结合业务特点以及目标用户场景，设计高效易读的表格。

最后，感谢你花费宝贵时间阅读这篇文章，希望可以给你带来一些启发。我们非常期待我们的思考和一些小经验能够帮助你去设计满足你的业务场景的表格，也可以通过这些方法和步骤，创造属于你们团队自己的设计资产。 

也欢迎加入MEUX,视觉/交互/用研

可投简历至MEUX@BAIDU.COM

(注明信息获取来源如：公众号）

01.契机

每一个伟大的项目背后总有一个必要的契机和一个有趣的故事，而我们的故事是这样开始的。

在我们团队设计师之间经常会听到这样一些问题：

1、这个项目是谁做的？有没有源文件？
2、这个产品是设计规范是什么？我这样做符合规范吗？
3、之前那谁谁离职了，文件谁能找到？

总体说来就是设计文件管理难，规范一致性统一难，设计师对接协同难

在技术同学之间也会存在一些问题：

1、这部分代码是谁写的，怎么这么乱？
2、技术框架已经落后了，我们现在不这么写了，再优化也没有价值，我们计划重构代码
3、大量重复的UI还原工作，研发变身”切图仔”
4、明明是按照设计稿还原，设计同学总说差1px

而在产品侧的问题却是这样的：
每次都做了很多重复的事，我们版本需求量太有限了，这些问题大大影响了产品节凑和业务扩展的要求。

我们在工作协同开发过程中，一直缺少一个连通器，导致产品、设计、技术沟通协作不便，设计和技术规范落地较难。同时因为缺少容器承载导致各种资源和文件共享不便。因此使得我们重复设计和重复开发内容较多，影响了我们版本需求的吞吐量。

对于一款成熟的产品来说，夯实设计与技术的框架基础地基，这样才能助力我们在上空盖更壮丽的楼阁，基于这种契机，我们希望做一次彻底的改变

1

02.故事

生逢乱世总有一些拯救世界的英雄出现。当我们带着想法和前端专家“存哥”一起聊的时候，没想到我们双方的想法不谋而合，甚至在细节和方向都出奇的一致。经过几次深度的协商沟通，我们快速制定了解决方案，同时招募研发团队，快速的开展项目，带着激情与理想，「58UXD」与「前端技术委员会」发起了共建项目「风火轮」。

主要通过两方面来解决问题：

设计插件提效：通过Sketch插件进入设计师的工作流程，聚合设计资产，解决设计规范落地、设计资产可视化承载，提升设计规范和设计资产的使用率，增强资源共享避免重复设计。

设计协同管理：通过风火轮协作平台进行团队资产、项目管理，实现设计稿在线标注解析，供研发同学在线查看研发。

在这里有的同学就会说，这不就是做了一个蓝湖吗？

那可就想简单了，我们的终极目标是：“把设计稿变成终端代码”。通过智能解析，将设计稿自动化解析生成代码，提升产研效率。

那么背后的逻辑和我们的思路又是什么呢？

3

03.代码生成

在我们集团设计师Sketch的使用率高达90%，因此我们选择了Sketch作为UI自动生成代码的设计源，通过Picasso解析工具进行智能解析，高精度还原设计稿，支持多种代码格式，满足各种场景需求。

设计稿生成代码的主要流程如下图：

设计稿生成代码的实际效果展示：

为了提升操作效率，我们将Picasso工具在风火轮协作平台直接内置，这样设计师上传设计稿交付需求的同时，风火轮自动将设计稿转换成代码。代码生成的UI界面与设计稿几乎完全一致，并且代码的可用度高，生成代码的结构布局合理、可维护性高，提供了两种模式: 专注于高精度解析的运营版和专注于代码可用度的普通版，并且支持多种格式、尺寸的切图，导出来满足不同平台、不同尺寸屏幕的需求。

为了保证智能解析代码的还原度，我们通过以下几个方式来处理解析问题：

1、还原度计算—感知哈希算法

我们将自动生成的UI页面通过puppeteer进行截图，通过感知哈希算法与原图进行像素对比，计算出生成页面的真实还原度。

2、样式解析-渐变解析方案

在渐变处理方面，首先根据渐变类型分为线性渐变、径向渐变、环形渐变三种，然后根据渐变值、位置等信息计算渐变方向距离及渐变节点之间的比例，最终生成渐变样式代码。

3、图片处理—精准切图方案

为了精准还原图片，我们通过调用sketch API进行图层截图的方式，计算不规则图形的精准位置及大小，精准切图是保证我们的高精度还原页面的关键；

为了保证智能解析代码的可用度，我们通过以下三个方式来处理可用度问题：

1、结构重组

由于设计同学输出设计稿是以视觉为主，不太关注分组结构的合理性，因此我们需要将原有的分组去掉，按照符合开发习惯的方式进行重新分组。

2、特征分组

针对列表这种重复结构的场景，我们通过特征分组算法识别相似结构，减少代码重复，提升生成代码的合理性

3、样式优化-样式精简、样式排序

样式精简及排序，使得生成代码更贴近工程师”手写代码”，代码可维护性更高。

w

04.能力与规划

我们做一下回顾，20年12月30日成功将「风火轮」研发上线以来，历经7个月的时间，用户覆盖了集团85%的产研团队，并且覆盖了大多数的子公司。Sketch Plugin以容器的形式承载了6000+的设计资产和14调业务的设计规范，智能生成了1500+代码。

风火轮上线7个多月的时间，经历的3次版本迭代，上线核心功能点20+；风火轮插件发布了2个大版本，20多个小版本迭代，快速解决了100+的线上BUG，不断完善功能和优化体验。并且建立了完善的用户反馈机制，以最快的的方式解决用户诉求。

目前为止我们生成代码覆盖了常见终端代码格式：Web、Mini Programs、React Native、Flutter、iOS、Android等。代码解析还原精度达99.8%，生成终端代码可用度85%（目前行业顶级）

在未来我们要以解放生产力为目标，继续深耕从设计到代码的路线，以风火轮为媒介，将产品、设计、开发紧密的连接起来，为我们内部协同发光发热。同时也欢迎更多的设计师和研发工程师加入我们，共同构建风火轮生态，编写故事的下一篇章。

原文地址： 58UXD（公众号）

转载请注明：学UI网》把设计变成终端代码｜风火轮背后的故事和规划

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

在开始之前，请大家先思考下面两个问题～

问题1：你的产品真的需要Tab Bar吗？

好像并不是。虽然淘宝、微信、微博、美团等大多数主流的产品都在使用Tab Bar，但这并不意味着所有产品都需要它。

问题2：为什么产品要有Tab Bar？

答案是为了易于使用，意味着通过Tab Bar这种简单的设计可以轻松帮助用户导航到页面。

#1显示最重要的信息

导航栏应该只包含最有用的信息，不能添加过多无用的标签使导航栏混乱。许多App在导航栏上添加搜索功能，因为这有助于用户更快地导航和检索内容。

#2扩展导航的功能

主流App更喜欢在底部导航栏中使用4-5个标签，这样能保持导航栏的整洁，还避免了标签过多导致用户难以精确点击选项的情况。

#3容纳多种标签形式

多数App底部导航栏会使用「图标+文字」的标签形式，这样能清楚地告知用户点击标签之后的结果。

有时候我们也会看到有些产品的导航栏只有图标没有文字，但这种形式并不会影响我们的操作，因为当导航栏的标签使用了用户特别熟悉的形状和内涵，完全可以省略文字。

▲ 宜家App的导航栏使用了大众都很熟悉的图标，所以即使不加文字，我们也能清楚地知道这3个图标分别代表了主页、分类、我的。

▲ 相对于宜家，Youtube的导航栏就显得有点复杂，因为Youtube的图标含义用户可能并不是很熟悉，加上文字说明很有必要。

#4文字标签应该简短

文字标签应该简短而清晰，准确的文字说明能对用户使用正确导航起到关键作用。

▲ TikTok导航所有的文字标签都简短，并且中间的添加图标还隐藏掉了文字，以此来引吸引用户的注意力。

#5避免隐藏导航栏

Tab Bar通常包含了最重要的导航信息，应该始终向用户展示，避免在用户滚动页面的情况下被隐藏掉。

▲ Pinterest导航栏的设计是个例。当滚动页面时，底部的导航栏会隐藏，这么设计的原因可能是为了防止导航栏遮挡图像，保证用户看到更多的图像内容。

#6传达位置

Tab Bar帮助用户轻松导航，但如果用户不知道自己的位置，将会影响他们浏览和使用产品的体验。

▲ 多邻国App通过改变导航图标的样式来让用户清晰的知道自己所有的板块。

▲ Headspace在底部导航栏加上了线条装饰，每次切换选项，线条都会跟着一起切换，确保告知用户确切的位置。

#7从反馈中学习并不断改进

反馈是关键，如果想改善产品的导航栏设计，就要考虑并测试用户最喜欢哪个导航选项，不使用哪个导航，需要四个还是五个选项等等。

#8在导航栏中显示更新

Tab Bar不仅仅起到导航的作用，很多时候还能通过状态变化告知用户更多的信息。

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》从TikTok、Youtube、Pinterest等主流海外产品中，学习如何设计底部导航栏

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

转载请注明：学UI网》UI动效设计之设计原则

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

不知道大家有没有听过 Aesop（伊索）这个澳洲护肤品牌子？以天然有机植物草本为卖点，大部分产品在小几百到大几百之间。产品的网站上线后连获三奖，网站做得好，我觉得是定位清晰，想清楚产品的战略层和范围层定位定位，并运用到结构层、框架层、表现层。下面我们从各个层面分析一下网站的有哪些可以学习借鉴的地方。

Aesop 的天猫国际店截图

他们本来是特别注重线下体验店的，除了装潢考究之外，里面的护肤顾问也都是经过专门培训的。

这样一家原本挺传统的中高端护肤品牌，与知名设计公司 Work&Co 合作推出了自己的购物网站。

这个网站确实做得很有特色，而且把护肤购物的体验细节打磨到位，做到了大型网购平台做不到的事情。

上线后连获三个奖，我们来看看有什么可以学习借鉴的地方。

信息架构

由于 Aesop 注重商品在精不在多，所以网站在导航里就直接将商品目录列出了，当然还是根据用途和肤质进行了分类。

这种商品名称列表的展示方式，还真不是什么电商都适用的。

但是 Aesop 的商品不多而且包装设计非常统一几乎没什么可预览的，而老顾客大多更需要快速补货或者找到新品，所以就不需要像普通电商那样一层一层地靠预览图寻找。

以及购物车的设计也非常简洁，没有图片只有文字，而且换成深色的背景以提醒用户注意。

内容策略

护肤品这类产品非常特殊，不像服装或者日用品那样看着不错就买了，而是需要向用户提供很多辅助信息才能促使其下单。

一般在门店里，顾问都会询问顾客的肤质和需求，向他们推荐合适的商品，并介绍其功效、用法、成分等信息，并打开让顾客闻一闻、试一试。

网上购物时，虽然闻一闻和试一试提供不了，但其它的部分还是要想办法提供。

Aesop 的官网的商品详情页里，第一屏图片旁边会提供的基本信息包括：标题+功效说明+适合肤质+皮肤触感+主要成分+容量+价格。

第二屏会提供一张使用商品的视频或者图片，并提供更多信息：用法+用量+材质+气味。

第三屏会告诉用户，做一套完整的护肤流程是怎样的，以及还可以购买哪些配套的商品。

另外，回头客会收到基于购买记录的个性推荐，内容也会根据季节和地域气候量身定制。

视觉语言

Aesop 的产品包装非常简洁，深棕色的瓶子上，贴着米黄色的包装纸，上面印着深灰色的字，除了一些矩形框之外，几乎毫无装饰。

线下门店的也是在结构上规整干练，但因为多用木质材料，所以没有工业风格那种冷冰冰的感觉。

Aesop 的网站设计使用了与包装纸类似的色调，把白底换成米黄色，上面无论是线条还是文字，都是统一的深灰色。

而且整个网站在布局上运用了很多大方框和抽拉效果，与线下门店的设计风格像呼应。

对于商品展示的风格，设计团队也是给出了一套与网站设计匹配的范例，Aesop 未来如果要增加新品，也可以在此基础上进行拓展延伸。

另外，配套的活动页也设计也挺有特色的。

思考总结

虽然国内购物都是平台的天下，但是很多大品牌还是没有放弃做自己的网站。

Aesop 这个网站，不论是在视觉风格、内容策略还是信息架构上，都是为这个品牌量身定制的，在细致程度上有统一模板的电商平台难以企及的地方。

我想未来哪怕平台再强再大，小而美的电商如果能够把细分领域的体验做到极致，还是有自己的生存空间的。

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》做好大平台忽略的细节，这购物网站连获三大设计奖

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

大家好，我是彩云。在做UI界面设计时，有时候看着设计出来的界面总觉得不大好，但又不知道问题出在哪，这里其实考验的就是设计观察力。资深设计师之所以强，往往就是强在对设计细节的把握能力，他们总能找到你所看不到的细节问题。大的问题往往一眼就能看出来，但设计品质高低往往就藏在这些设计细节中。观察力的提升也是来自于平时项目中的经验积累，为此，彩云围绕设计细节计划出一个系列文章，今天这篇文章是第一期，感兴趣的同学保持关注，后续会有更多设计细节干货文章连载更新，保证看完就能用到自己的工作中。

当你在设计一个高效、美观的UI界面时，有时只需要一些小的调整，就能快速提高设计的品质。有时候仅仅是简单的调整就能设计出让客户、用户和你自己真正满意的界面。

在这篇文章中，我整理了一些小的设计技巧，来帮助你快速改进自己的设计，提高用户体验。

1.适当使用文本装饰元素

有些人会拿极简设计出来说事，认为不应该加多余的文字干扰 ，界面上的内容都应该遵循有意义这个原则，这没有问题。但有时候增加文本的目的只是简单的为了“装饰”，这样是可以的。我们不希望所有的设计都变得平平无奇。

纯粹出于装饰原因而加入一些比较特别的元素也完全没问题，它可以不遵循可访问性标准，比如颜色对比度特别浅，看不清都没关系。只要这些元素不影响用户体验就可以。

2.UI界面中的不同元素要有区分度

按钮、通知（文字链接）是用户界面中两个独立又重要的元素。如果可以的话，一定要确保用户在浏览你的网站或应用时能够快速且轻松地将它们区分开来。

按钮，在大多数情况下都是最重要的，所以在界面中一定要确保是最突出，并且很容易区分其他元素（例如：文本链接）。

3.使用更自然的投影

设计过程中我们通常都会用到投影。投影的恰当使用，可以有效提高视觉品质。在设计界面时，避免使用比较重的投影，降低不透明度，让界面看着更加自然。

4.使用让视觉更加清晰的字体

在设计中，字体适当都使用大写也是很不错的。它可以帮助你在设计中实现元素之间的多样性和对比度，提高视觉的整体效果。但要确保选择是合适的字体，行高和字重粗细，确保给用户呈现的内容清晰度。

5.面包屑导航设计要便于用户理解

导航的设计无处不在，通常会应用在内容比较多的网站上，但有时很难理解它所表达的意思。如果将字体颜色和粗细稍微调整下， 就可以让用户快速确定自己所在站点中的位置，以及他们可能需要去的其他地方。

例如：如果他们通过搜索跳转到某个站点的某个位置，这就特别有用。像上图中的设计一样，始终让导航链接中的最后一项让它在视觉上与其他有明显区别，这样用户更加容易理解。

6.少用过高饱和度的颜色

高饱和度的颜色（明亮的蓝色、红色、绿色等）在网站上是挺有视觉冲击力，并能吸引用户的注意的。但是如果过度使用它们可能会让用户的眼睛感到疲劳，尤其是结合文本内容一起使用的时候。

尽量少地使用高饱和的颜色，你可以尝试把饱和度降低，增加颜色中的灰度来使颜色变淡，这样不仅能避免用户视觉疲劳，还能更加突出重点内容，让用户阅读起来更加方便且不被视觉干扰。

7.使用用户熟悉便于识别的图标

在设计中使用图标时，最好使用用户熟悉并便于识别的图标，让用户能快速理解使用它能做什么。使用不能传达正确含义的图标，只会变成视觉噪音，引起用户混淆，成为用户的认知障碍。

8.使用亲密性原则来表达元素之间的关系

版式设计四大基本原则：对比，重复，对齐，亲密性，其中亲密性原则是把画面中相关元素进行分类，建立某种视觉上的关联，实现页面整体结构清晰度，加快用户在浏览网站或应用时的认知。

9. 使用4pt基线网格+8pt网格来做字体排版

进行文字排版时，将 4pt 基础网格 与 8pt 网格 一起使用可以为设计带来更加和谐的垂直节奏。

你只需要使用 4 的倍数（16、20、24、28 等）的行高值将字体与 4 的基线网格对齐。为什么是 4？ 好吧，就我个人而言，我发现在处理某些文本大小时，过去以 8 的倍数进行缩放并不是那么通用。

10. 减少标题的行高

冗长的正文需要足够的行高来增加可读性，而标题通常要短得多，所以你可以稍微减少间距。

标题的推荐行高通常是文本大小的1 – 1.3倍，标题文字越大，需要的行高就越少。

11. 使用色轮上的邻近色不容易出错

邻近色，是最和谐的配色方案之一，当你在挑选颜色遇到困难时，它能给你很大的帮助。

一组由“主”、“次”、“再次”组成的邻近色可以帮你快速构建一个简单的、不会出错的配色方案。

12. 在设计中最大化信噪比

设计中的清晰度和可用性可以通过“最大化信号”和“最小化噪音”来实现，这反过来又产生了高信噪比。

你可以通过确保相关信息(信号)有效地呈现，而不相关的信息(噪声)被完全减少或删除来实现这一点。剪掉绒毛。使事情更加清晰，删减无关信息，强化重要信息，提高信噪比达到提高界面设计品质的目的。

彩云注：由于篇幅有限，今天是设计细节系列文章的第一期，下一篇会继续更新更多设计细节，感兴趣的同学保持关注，保证看完就能用到自己的工作中。如觉得有学到，一定要给彩云点个赞，我会更有动力，哈哈~

本文翻译已获得作者的正式授权（授权截图如下）

原文地址：mediue

作者：Marc Andrew

译文地址：彩云译设计（公众号）

译者：彩云Sky

转载请注明：学UI网》UI设计细节连载系列① | 让设计细节更高级的12个实用小技巧

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

不论是 toB 还是 toC 的移动端设计中，都会遇到一些表单填写和上传证件信息的情况。面对移动端要手动填写的表单，用户通常期待有高效的解决办法可以立即完成填写任务。本文为你总结出了几种移动端表单设计的实用原则，可以有效解决表单不够友好、用户填写错误、费时费力的问题，希望对你有帮助。

一. 信息内容层级化——信息分层次、分步骤、分页面呈现

1 . 表单结构分层

从表单结构层面来看，内容过长的表单，信息可以分步骤、分页面处理。

使用条件

• 表单内容过长，用户填写有压力
• 操作步骤较多，需要给用户明确的步骤提示
• 中途需要多次跳转，接入第三方服务的表单

案例分析

做企业认证时，由于需要填写的项目较多，步骤繁杂，因此很多产品会采用分步骤的形式，提示用户当前进度。

2 . 页面内容分层

每个页面的信息内容呈现，有层级，有重点

使用条件

• 表单填写内容较多
• 页面内文字内容较多
• 产品对于用户填写的内容有倾向（如对平台来说更有意义、更希望用户填写的信息）

案例分析

大众点评在设置用户信息时，虽然要填写的内容都是“设置”，但是重点需要设置的信息使用了链接颜色处理，做了强调。

二. 减少用户输入——用其他方式代替用户手动输入

1 . 以选择代替输入

如果用户可以做选项时，就不要使用输入，可以充分利用移动设备的性能，比如 GPRS 定位、通讯录等，合理调用第三方或系统信息。

使用条件

• 填写的内容边界较为模糊，词语不确定性较高
• 选项数量控制在 3-5 个之间
• 可以调用第三方或系统信息

案例分析  

• 案例一：知乎 App 博主认证 和 爱康国宾 App 个人信息都使用了部分选项替代填写：

• 案例二：淘宝 App 可以调动系统定位，并提供几个最有可能的选项，让用户选择最佳定位。

2 . 提供默认选项，替用户做选择

选取最大概率事件作为默认选项，减少用户的手动调整

使用条件

• 系统能够确定出符合用户的较大概率选项
• 选项数量控制在 3-5 个之间

案例分析  

蚂蚁链实人认证在上传证件时会根据用户所在国家和地区，帮助用户默认选择概率最大的选项，不需要用户自己操作。

三. 定义键盘类型

根据调用内容调动不同的键盘类型

根据表单输入内容的不同，调用出系统不同的键盘类型。

使用条件

• 填写的内容有明确的输入语言要求

案例分析  

航旅纵横在航班查询的时候，由于航班号都是大写字母和数字的组合，所以键盘会默认调用出只有数字和字母的输入法，同时默认开启大写形式。蚂蚁链实人认证在用户手动填写身份证时也同理。

四. 避免重要信息被遮挡

重要的信息要始终可以被看到

需要避免输入项被键盘遮挡，也要避免将重要的输入提示作为占位符，不要在用户填写时被输入的内容遮挡。

使用条件

• 表单的填写位置刚好会被弹出的键盘挡住
• 输入提示很重要，需要用户在输入时随时注意
• 输入提示很长，用户短时间内记不住

案例分析  

大众点评在写评论时，一些可以激励用户写点评的提示性文字，会在用户输入时始终存在。

五. 实时校验

重要的信息要始终可以被看到

当输入需要被判断和检验的信息时，系统最好可以针对信息做实时校验，避免用户一直到最后提交表单时才发现填写问题。

使用条件

• 输入的信息需要判断，并会影响最终的表单填写通过率
• 输入内容的质量需要用户知晓，如密码的强度

案例分析  

证件号码输入错误时会给予相应的提示。

原文链接：长弓小子（公众号）

作者：元尧

 转载请注明：学UI网》干货｜移动端·表单设计有方法！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

酷家乐的产品性质决定了其增值付费类活动的目标用户从根本上说是真正意义上的b端用户，这类用户群体的审美喜好一直以来很难与视觉流行的趋势和酷家乐品牌调性找到平衡点，这类视觉产出已经遇到瓶颈；而此类运营动作越来越多，并且作为公司营收的重要组成部分，在视觉侧形成正确的指导方向具有非常重要的意义。

背景与目标：

背景

• B端增值付费类用户群体具有特殊性
• 低成本的线上运营活动推广逐渐增多
• 在线增长是公司营收的重要部分，尚未形成视觉侧的品牌形象

目标

• 符合用户层且体现时下趋势的视觉形象
• 品牌刻板印象扭转
• 具有贯穿各类运营活动的可识别特性，形成视觉指导

调研阶段：

用户画像

过半购买角色具备设计属性，对审美也有一定的要求，所以推广视觉表现可以也需要具备一定的设计感

购买角色年龄分布较广，岗位属性分布也比较平均，因此推广视觉表现需要兼顾各年龄层，具有通用适配性

视觉现状

设计过于“用力”，为了在营销活动中体现酷家乐科技属性，与D端视觉产生差异，一味采用深色/蓝色，硬朗机械感；营销氛围叠加后画面过饱和，难以与传统电商拉开层次。

流行趋势

关键词提取：

根据用户画像，结合流行趋势与酷家乐品牌调性，我们得出了视觉关键词，我们将它概括为“轻炫彩”。

情绪板：

实战案例：

升级后的虚拟奖品全部采用3D设计，强化奖品的真实存在感，更容易吸引用户注意；同时应用“轻炫彩”的设计原则，能够普适于大部分增值营销类活动页面/海报中。

输出的系列图标可以在不同场景下复用，提升了长期的设计效率。

原文链接：酷家乐用户体验设计（公众号）

作者：柚子、阿九

团队：柚子、阿九、九州、白夜

转载请注明：学UI网》酷家乐B端线上增值营销类视觉原则

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

终于迎来了一年中最热的时候，整个人都感觉热膨胀了，似乎空调也变弱了许多，每天只想着一头扎进冰箱，可能这才是夏天的最优解。今天就以大暑为主题设计一款字体，看看如何让一个字看起来非常热。

首先将文字整理好。

STEP 01 > 分析属性

接着我们分析字体属性，上次小暑是想体现凉爽，那么这次我们来表现特别热的感觉。

根据分析出的属性，我们先构思好风格方向，胖胖的字体，要体现热的感觉。

STEP 02 > 设计字体

下面将编排形式以图框形式画出来，这里可以看出是烈日和主题字结合的形式，笔画风格就是比较胖的设定。

我们开始具体操作，这里我们用画笔先画出大概的草图，接着细化文字。

做好字形之后，我们将两个字靠近，很挤的感觉，中间可以加上一些连接特征，减去部分笔画线条，使层次叠压更明显。

然后我们再继续增加特征，加一些汗珠和流汗的感觉。

接着我们需要对字体进行编排，按照之前画出的图框，画好烈日与文字叠压。

最后我们可以用褶皱工具做出抖动的效果，热浪的感觉就有了。

STEP 03 > 搭配颜色

最后就是搭配颜色，这里底色我用了深蓝色，可以更好的突出设计效果。

OK，字体做完了，学会提取属性的特征，会使你的设计更有意思，技法只是其中一个环节，想法是非常关键的一步。

原文地址：趣投记（公众号）

作者：趣趣熊

转载请注明：学UI网》做了5年设计，还是这个设计技巧实用！！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务