1. 场景化用词

针对特定的场景，使用文案进行情感的烘托、渲染或是放大，通常可以带来意想不到的效果。

案例 1

QQ 音乐会员到期的续费提醒文案，是由各类歌名组成的一句话，每天的到期提醒都不同。这种形式增加了用户的停留时长，也更富有情感共鸣。

案例 2

钉钉的桌面版，在用户退出后重新登录时，在产品的右半侧会分不同时段展现不同的欢迎用语，下图是早上和中午的欢迎页。

案例 3

知识星球在用户发表评论时，会用不同的语句，对评论这个场景做用户行为引导。

案例 4

很多产品对于某些功能的空状态设计，都融入了个性化的语言描述，至少会让页面更有情趣：

2. 更精准的描述信息

有些文案对于信息起到精准的描述和呈现，虽不是必须要呈现的内容，却可以将文案作为加分项，而创造更优的体验。

案例 1

支付宝页面的“理财热点”和“抗击疫情”的数据，都显示了实时更新的时间数据，让信息给用户的感觉变得更加可信和准确。

案例 2

京东的一些商品在提交订单页面，会显示商品进入了某个排行榜，比如  “恭喜你，挑选的商品好评度高达 97%”，或者 “XXX热卖榜第 2 名” 等，给予用户的选购能力和产品质量的肯定，促使用户开心买单。

案例 3

美团外卖在开通会员的卡片上很醒目的标示出卡通会员后，可以为用户节省的预估成本，以及限时的惊喜红包提示，降低会员成本在用户心里的预估价。

案例 4

飞书的聊天窗口中，每条消息的时间默认不显示，但在单击每条消息时，就会在下方显示该条消息的时间，精确到秒级。

3. 字体和排版设计

对于文案本身的字体选择和排版设计，如果可以和文案的内容或功能有效的结合，也可以对用户体验起到提升作用。

案例 1

得到 App 的阅读设置页面，字体有 4 种选择，字体样式就用在字体名称上进行展示，让用户对于字体的样式一目了然，很有体感。

类似的方案在很多软件中都有体现，比如 Sketch 的字体选择功能：

案例 2

8 月 13 日有英仙座流星雨，B 站的央视新闻当天的直播弹幕，就变成了流星雨的形状，很有新意。

案例 3

同花顺 App 中把用户对于股票的评论以弹幕的形式进行呈现，既让评论变得直观，又可以提升用户对于个股的重视程度。

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

作者：元尧

转载请注明：学UI网》案例锦囊｜如何巧用「文案设计」优化用户体验？

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

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

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

一  阶段划分

按时间和经验区间来看，大致可以分为三个阶段：初级阶段、高级阶段、专家阶段。

每个阶段我们总结出一个最具有关键点的问题来展开分析。

二  初级阶段

这个阶段的设计师初入职场或者一两年工作经验，处于小白阶段，对任何事物都有好奇心，精力也是最充沛的阶段。

同时也是在这个阶段，设计师往往是迷茫的，不知道自己要朝着哪个方向努力、该学习什么。一个不小心，努力错了方向，耽误的时间是弥补不了的。

这里我给初级阶段的设计师总结了一个问题，同时这个也是目前各大厂在招人的一些可参考的标准。

（问题一）如何在众多设计师中脱颖而出？

2.1 对设计有足够的热爱

俗话说干一行爱一行，只有对设计有足够的热爱，才能激发出无限的潜力。加班到深夜完成一个项目后，才会有无比的满足感而不是厌恶感。

2.2 学习能力

学习伴随终生，互联网发展如此之快，你如果只局限于现有的能力，早晚会被时代所抛弃。学习能力分为两类：

• 自我学习：抓住当下火热的趋势，不断挑战自己的能力，提升自己；
• 项目中学习：项目完成后做复盘，可以让你学到更多的东西，避免相同问题再犯错。

2.3 交叉能力

职业有边界，设计无边界。不要只看重自己当下职业中的技能，要把有限的职业做出无限的可能。多学习相关知识和技能，充实自己。

2.4 协作能力

随着互联网的发展，协作能力变得越来越重要，很多项目是你一个人无法完成的，所以就需要多人协作，人效也尤为重要。为了提高效率，你就必须增强你的协作能力。

2.5 责任心

有责任心的设计师往往是会被看重的，像那些只为了眼下自己的任务而不关心项目整体的设计师，会被慢慢边缘化。

2.6 有想法

这个是基本的能力，就不用过多阐述了吧？没有想法的设计师只是一个没有感情的做图机器。

2.7 高执行

无论有多好的设计能力、想法，最后能落地才是好方案，高的执行力可以让你的方案很快的落地，不至于让别人认为你只有嘴上的功夫。

2.8 懂商业

随着行业的发展，设计能力不仅仅是视觉能力，更大一部分是是否满足商业化的需求，只有懂商业才能设计出更符合消费者的产品。

2.9 正能量

设计师一定要有正能量，是一个积极向上的人，每天都在想 *** 的事情，是不能成为真正的大神。

2.10 有沉淀

每个设计师的思想都是独特的，你要把自己的想法和经验沉淀下来，多年过去回头看，你才不会觉得前些年什么都成绩都没有。

三  高级阶段

高级阶段一般处在 5 年左右的一个工作经验，这个时候职业技能方面已经炉火纯青，行业上面也有一些造就。

这个时候呢，又到了职业生涯的第二个分叉口。我们就来引出第二个问题：

（问题二）30+ 岁的设计师如果走不上管理岗，该如何做好自己的职业规划？

在这里我想反问大家两个问题：

• 管理岗位跟你的职业目标是不是一一对应？
• 你是想要获得一个管理岗位还是管理的能力？

其实在 30 岁这个年龄，是设计师最美好的时间。要职业技能有职业技能，要经历有经历，也有年轻人的干劲。

其实很多人都是因为喜欢设计这个行业才做的设计，刚毕业的时候都是憧憬着自己哪一天能成为设计界的大牛。现在却被行业内卷的，非要走上管理岗吗？

设计上走上管理岗是一种出路，但不是唯一出路，我们完全可以在专业度上深挖，把自己打造成一位大神（据大厂数据统计，专家级别的平均年龄在 30 出头）。

设计是有无限的可能，把所有的时间都放在专注设计上都不够用的。

最后，我想再反问大家一个问题：你真的想得到的是管理岗吗？你有可能只是想得到认可。

所以价值的体现会在各个方面，不要被内卷的世界所误导。

四  专家阶段

这个阶段你就已经站在了行业金字塔的顶端了。一般情况下，就算不专门的转做管理岗，也会或多或少的带一些职级低一些的设计师，需要有一些管理的能力。那么最后一个问题也就也就引出来了：

（问题三）如何打造一个优秀的设计团队？

4.1 对专业的热爱，你要让你团队的成员感受到从上到下都是很专业的。很多优秀的设计团队不是有很多人，而是有一群非常专业的人。

4.2 爱的氛围：你要把团队成员当做家人一样，让他/她在这个团队里感受到爱。

4.3 给予大家更多的空间，不设定死的 KPI 目标，不设定框框架架，可以激发更多的潜力。

4.4 接上一个点，如果没有 KPI，那该如何量化设计价值？当团队的专业能力达到足够的高度，硬性指标的事情就会做的非常得心应手，反而大家都会去做一些没有尝试过的事情，激发框架之外的潜力。

4.5 找一个比你还优秀的人，永远有个人鞭策着你，让你不断前进。

4.6 你要做决定，要不然要你做什么，做任何一个关于团队的决定。

最后总结下来，你要“雌雄同体”，既要有男性的理性和果断，也要有女性的包容和爱，这样才能成为一个合格的 leader。

总结

每一个阶段的过度都是一个成长，勇于困难、不惧未来，你总会成为你理想中的样子，加油！

最后，希望本编文章能对看完的你有所帮助，这也是我做分享的初衷，我们下期见。

原文地址：友设青年（公众号）

作者：Luckgg

转载请注明：学UI网》我们来聊一聊设计师成长的三个阶段

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

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

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

1. 色轮分析

颜色是我们眼睛感知不同波长的方式。色轮是将一系列颜色，有次序地利用圆盘的形式展现出来，色轮颜色的构成包括三组颜色：

原色：红色、黄色、蓝色

二次色(间色)：绿色、橙色、紫色(三原色混合而成)

三次色(复色)：黄橙、红橙、红紫、蓝紫、黄绿、蓝紫(原色二次色混合而成)

通过不断混合相邻的颜色，产生新的颜色，最终形成一个全域的色轮。

▲ 色轮显示了3组颜色，原色范围最小，在圆的的中心处，二次色在中间环。最大的外圆由三次色组成。

2. 色彩搭配

色彩搭配最基本且重要的原则就是颜色间要相互协调，一些常见的颜色搭配包括：

同类色：色轮上90°以内彼此相邻的颜色，这种颜色搭配的对比度较低。

互补色：色轮上相对的颜色，产生较高的色彩对比度，在搭配上可以一种作为主色，另一种用于强调。

分裂补色：互补色两侧相邻的颜色。这种颜色搭配既有同类色的低对比度的美感，又具有互补色的冲击力，形成一种既和谐又突出重点的颜色关系。

三色组：色轮上的三种等距颜色，相隔120度，其中二种颜色互相类似，另一种与它们形成对比关系。

单色搭配：只使用一个色相,通过改变饱和度、明度来得到其他色彩。这种搭配看上去干净、优雅，但是不容易突出重点。

引入的颜色越多，就越难平衡视觉层次。如果你有丰富的配色经验，可以从两种或三种颜色开始，不断尝试更复杂的搭配。

3. 色彩含义

虽然随着全球化的到来，某些颜色可能已经达到了标准含义，例如红色表示停止，绿色表示开始，但色彩含义会因文化而有所差异，例如想一下钱是什么颜色，红色(中国)还是绿色(美国)？

如果想在设计中明确解释色彩的含义，需要做到两点：

• 颜色可能不会在全球范围内起作用；
• 设计时考虑少数群体(色盲)，进行用户测试来确保用户明确了解颜色示意。 

4. 将色彩理论应用到设计中

调色板是为特定项目、品牌选择的一系列或一组颜色，每个颜色都是特意添加的，整个调色板的色彩组合展现了产品或界面的视觉美感。

创建调色板

选择一种颜色搭配并进行颜色迭代

单色方案通常最容易创建和应用，因此如果你没有太多的配色经验，可以从这种配色开始。

首先要弄清楚为什么要选择这些颜色、这些颜色有什么作用、表现出来怎样的效果等问题，这样创建调色板才更有效率。

▲ 如果在配色过程中觉得卡住了或者不知道从哪里开始，可以从ColorHunt的调色板中汲取灵感。

将调色板限制为三种颜色

少量的颜色加强了视觉层次和对比度，因为影响用户考虑和分心的元素更少。所有的颜色都在争夺注意力，在设计中也是如此。

▲ 少即是多。过多的颜色反而会让用户眼花缭乱，找不清重点信息。

遵循品牌的颜色标准

创建调色板时要始终遵循既定的颜色标准，这样不仅会让工作更轻松，因为不考虑太多新的的颜色，还会给用户带来一致的品牌体验。

如果没有品牌色标准，可以看看现有设计和产品中使用的颜色，并尝试融入到调色板中。

▲ 耐克的网站使用了最基本的单色调色板：黑色、白色和灰色，这种颜色选择使用户可以专注于产品。

使用调色板

使用60-30-10规则

这条规则仅表示主色使用60%，辅助色使用30%，强调色使用10%，通常主色和辅助色是相对中性的颜色。

这些比例有助于创造平衡，防止搭配的颜色出现混乱。

▲ 苹果新闻App很好地使用了60-30-10规则，白色和浅灰色是主色调，蓝色是辅助，粉色作为强调色来吸引了用户的注意力。

应用然后迭代

使用了60-30-10规则后，接下来就要调整颜色来提高美感，并且突出设计中重要的内容。

看看颜色选择是否有助于创建正确的视觉层次结构、颜色选择在设计中是否创造了平衡和对比。

保持颜色的一致性

一致性是帮助用户理解颜色使用的关键。如果在一个页面上使用亮蓝色作为提示按钮，那么在产品的任何地方都应该使用相同的颜色作为提示。

测试调色板

测试设计效果

将调色板应用到设计中后，需要做一些可用性测试，例如颜色在按钮、链接或其他类型组件上的可用性，页面的易读性和可访问性问题等

最后

合适的颜色搭配可以增强品牌认知度，吸引用户注意力并提高可用性，静下心来多多实践，才能充分利用好这些奇妙的颜色。

最后为大家分享一波非常不错的配色方案，特别适合用在日常设计中～

下载方式：

1）关注公众号“Clip设计夹”

2）公众号后台回复“配色”自动获取下载链接

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

作者：Clippp

转载请注明：学UI网》配色看起来总是不舒服？用这个科学的配色方法！

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

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

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

a

字体 

Samsung Sharp Sans

三星这款字体是一个几何感很强，接近完美的圆形O和简约设计感强的小写字体，特别是字母a设计的脱颖而出。

在首尔的街头上，物理交通工具上，这款字体都很清晰美观，和整个城市的时尚结合在了一起。字体不仅仅是一个字体，同时还是一个沟通工具。三星这款字体不仅用在数字广告，还包括印刷上，这个字体承载了三星对于未来的突破。三星不再是只有产品线，而是成为时尚生活品牌。

在移动端，三星使用的是 Samsung One 字体，它也是一个非衬线字体，相对于传统的衬线字体，这款字体设计更加具有人性化。

苹果和谷歌早已推出了自己的字体，三星也推出了自己的通用字体，Samsung One 由三星和 Brody Associate 联手打造。超过400种语言，以及超过25000个字符，成为一套全球性的字体。从手机到电视，从笔记本电脑到微波炉，所有的三星产品都将用上这套字体。它也是未来三星视觉语言的核心。

Samsung One 字体设计语言有5个关键词：人文主义，易区分，通用性，专业性，清晰可扩展。

▲人文主义：笔画自然就像手写一样变化，字体具有动态角度的正方形曲线，有很大想象空间。

▲字没有的左右空间都很窄，所以有效空间非常好。

▲通用性：在全球各种语言环境下要足够通用。

▲专业性：就是每个笔画的设计都需要经得起考究。▲清晰可扩展：各种场景的拓展性这块需要能适用。

Helvetica Neue 字体之前有一些设计很受诟病的地方，比如时间的冒号不居中，理想状态应该是居中，识别性和平衡感更好。

三星整体的版式采用的左图右文或者右图左文，这样的设计能让用户更加关注内容，阅读也比较符合从左到右的习惯。这样的版式结构在全球官网设计都是类似，和苹果的上下排版不同。版式字体上也是通过字重来凸显视觉层级。

苹果会结合产品的特点，重点体现产品，其次生活场景。三星的产品图片，色调都是以生活化，贴近生活为主，无论手机还是电器。

原文地址：我们的设计日记（公众号）

作者：sky

转载请注明：学UI网》苹果和三星，哪家设计强？

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

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

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

宋体的起源和发展

雕版宋体字的形成 

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

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

宋朝体

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

浙江刊本–《姓解》

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

明朝体

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

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

清代宋体字

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

《学统》清康熙刻本

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

现休宋体

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

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

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

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

推荐9款免费商用宋体。

宋体的使用场景

传统、历史

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

文化、艺术

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

典雅、高贵

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

女性、优雅

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

时尚、前卫

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

宋体搭配推荐

案例一

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

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

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

案例二

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

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

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

案例三

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

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

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

编排效果：

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

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

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

作者：邓海贝

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

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

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

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

宋体的起源和发展

雕版宋体字的形成 

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

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

宋朝体

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

浙江刊本–《姓解》

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

明朝体

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

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

清代宋体字

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

《学统》清康熙刻本

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

现休宋体

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

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

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

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

推荐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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务