表格作为组织整理数据的手段，可以有效的向用户展示数据信息，是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

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

如今设计师不再仅仅作为一个需求的接收方与执行方，职能更加的全面，在整个产品设计研发流程中也需要我们有更强的参与度。最近工作中得到一些设计同学的咨询并参与围绕着一些项目中的问题进行讨论，比如：项目协同与执行的过程中总感觉节奏乱？对于项目缺乏整体的规划、每次设计过程中付出的成本很高。对结果验证时发现不论设计质量还是效率都还有很大的提升空间。设计感觉做的不错，但项目中的角色话语权不高？多个项目并行不知如何管理操作，有无标准方法，怎么从中创造更大的价值？本文结合日常项目管理当中的一些思考与方法，带大家了解设计师需要有的项目管理意识。

a

01.好的设计能不能管理出来？能收获什么？

首先，我们思考一下，管理是什么？其实简单来说更像是很多标准化、流程化、格式化的方式方法组合，辅助我们更好的达成目标，并为整个设计团队构建一个基础的工作体系。项目中稳定与高效输出都来自于更加科学的管理。设计师链接上下游部门，也需要通过管理来解决诸多设计以外但与设计有联系的事务。对于我们的收获部分可以大致分成以下三点：

· 目标达成层面

引导促成整个产品/项目的目标高质高效达成，使之利益最大化。

· 视角变化层面

能够让我们视角产生改变，能够更全局看待问题，让自己有大局观的同时更加拥有结构化的思维。

· 影响力与服务能力的提升层面

在项目中角色话语权提升，在团队内外有更高的影响力

a

02.项目管理我要管什么？

设计师运用项目管理的方法，个人认为最基本的就是要合理的规划与控制，管人管事，且贯穿在整个项目流程当中，以下几点其实我们可以重点关注。

我们工作当中实际参与的流程，基本可以归纳为启动阶段、计划阶段、执行监控阶段、收尾阶段。

· 启动阶段

在这个阶段经常会使用到6W2H方法，它有助于我们思路的条理化，杜绝盲目性，所以此方法能够快速帮助我们确定目标、里程碑、项目成员以及合作模式，例如在此前的二手车大类页改版等大型改版项目中都有所使用。

· 规划阶段

需求的梳理、排期、以及任务拆分、资源协调。我们可以尝试使用STAR模型来操作。而这部分在车业务的内部设计需求中也是在iWiki常态化留档的，以SITUATION（背景）,TASK（任务）,ACTION（行动）,RESULT（结果）几个维度构成表的基本结构。

需求规划完毕需要考虑的就是内部资源协调，在专职项目、动态项目、创新项目中协调的原则上可以是：擅长人做擅长事，挑战与执行并存，提效最大化，成长最大化。

· 执行监控阶段

在此阶段，我们可能会遇到以下一些问题，产出效率不高、质量不高、反复修改或项目推进缓慢影响业务目标。这些情况或风险在很多项目当中都存在，风险并不一定是坏事，而风险大多数都是可以预测和管理的，我们可以多使用WWH模型和STAR模型结合的方式快速的辅助我们思考、记录、评估、计划、调整。在落实的时候我们会使用到iWork工具进行需求的变更、说明、同步，包括后续的进度跟踪与回溯，在项目的管理上非常直观易用。

· 收尾阶段

对于该阶段质量控制方面，我们引入了更规范的走查文档、共建集成体验环节、以及全职能自查环节。常规的设计走查介入方式如下：

改变走查方式之后，增加集成体验环节与每个节点中的输入输出内容，保障每次项目的最终落地质量。

在收尾阶段从项目管理的角度来说另外一个希望提及的是，除了事前有规划、执行有控制、更要注重事后收尾有总结。虽然每一次的项目可能过程会有一些不同、结果目标不同，但是我们在总结复盘的过程中一定要做到以下几点：

1.拒绝形式化，避免假大空反思

2.具备借鉴意义

4.对应解决方案，具体落实到人、功能范围、时间等

w

03.聊聊其它

其实我们可以发现既然是要去管理项目，在每个节点里沟通是非常重要的，可能很多设计师都会遇到一些沟通方面的问题：效率低、无结果、惧怕沟通。其实多数就是在信息通过传输渠道、媒介的时候，发送者与接受者在各阶段所暴露出的不同问题，如下图：

· 我们可以怎么做呢？大家可以多从以下几点去思考

1.沟通前的思路整理以及相关案例或设计理论的支持

2.对齐沟通方的关注点与信息交集

3.灵活正确的处理意见与分歧，开放心态、开放式话术、气氛控制、善用询问等

4.总结与使用流程管理进行规划

5.建立设计师个人品牌可信度

以上为对日常设计项目管理工作的一些个人理解，大家可在实际的项目当中灵活应用，如对项目管理方面非常感兴趣的同学也可以去看看PMP相关知识，也欢迎入群多多交流。

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

转载请注明：学UI网》设计师的项目管理意识

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

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

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

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.企业不是学校 

很多同学工作后一定要明白，企业不是学校，职场也不是学校，公司招你过去是希望你给公司带来价值，对设计师定位一定不是学生，好的企业可能会有很多内部培训，学习的机会，但是一定是靠你去主动学习。

这也是职场的潜规则，工作越久越会发现，很难有人会毫无保留的教你，如果我们一直处于学生思维，只会在职场中失去好的机会。职场上的学习，一定是主动的。

学生时候我们学习是被动接受，老师教什么，我们学什么，但是职场不一样，一定要从“被动”改为“主动”，公司会有很多内部培训，学习资料，但是学习一定要记得是自己的事情。

好的公司会有体系化培训，相当多的公司是不愿意付出培养成本的。比如之前在阿里，内部很多设计培训、课程，但是大家都主动去报名学习，没有人逼着你一定要学，大家时间都是一样的。所以从“被动学习”到“主动学习”是新人设计师职场进阶的第一步，现在互联网上学习资源那么多，无论我的星球，还是各种教程，只要你想一定能学到，关键在于你自己意愿是否足够强烈。

a

 2.掌握正确的学习方法 

上图就是我们大多数学习状态，每周学下AE，学下C4D，然后三天打渔两天晒网，最后会发现，都学的很一般，没有一个学的很精通。

聚焦学习，单点突破

正确的学习方法是什么，是单点击破，横向拉通，我们要聚焦学习，一段时间只学习一个知识点，比如你最近学AE，就花精力把这个技能彻底掌握，再去学下一个，我把这个叫100小时刻意练习，我在星球里，也是带着大家这样去学习知识点。当你学习一件事情持续100小时，每天3小时，坚持3个月，你会比90%人都要学习的好。

考虑投入产出比

学习的目的最终是要学以致用，现在大家每天工作本来就很忙，如果毫无目的地学就没有意义了。一定要考虑投入产出比，要根据自己的规划去学。

比如你未来是走体验设计师的方向，那么你就应该学技能树里面相关的内容，比如数据研究、交互知识、产品思维、商业思维这些维度，这些方向是未来帮你迈入新的台阶需要具备的能力。

w

3.性格上一定要有「要性」

阿里有一个词叫「要性」，什么意思呢，简单的说就是对一件事物的渴求程度。作为设计师也是如此，无论我们学习，做项目，还是工作上，都需要有这种精神。

要性决定判断

我们今天接到一个项目，判断这个项目好好做一定会有很大的市场反响，比如我做双11这个项目一定会被上亿人关注，那么我判断这个事情价值后，我会很拼，会拼尽全力做好，因为我知道这个事做好后带来的价值，假如我没有那么强渴望这个事情，或许我就当一个普通项目，也不会去判断它的价值，说不定就错过了提升和磨练的机会。

判断决定行动

要性能决定我们的判断，假如我判断这个事情一定要做好，做好后可以发到behance，或者放作品集里面。那我的行为也会跟着变成正向。

工作多年后，其实对于加班不加班，其实很好衡量，这个事情加班做好对你晋升、对你成长有没有好处，如果有自发都会去加班，如果这个事情就是一个投入产出比不高的，我可能就会去另外更有价值的事情。要性决定我们的行为。

同样个人学习也是一样，如果你渴望掌握它的欲望足够强烈，那么根本不需要人督促你，你都会自发去学习。这就是信念的力量。

行动决定结果

4.当你没优势的时候，唯有勤奋 

每个人都想去大公司，去做优秀的产品，但是光有想是不够的，最重要是去做。能在夏天做的事情就在夏天完成吧，不然到了秋天，它就黄了，到了冬天，它就凉了……

w

想不等于做

w

充分利用工作外的8小时

所以在我们起跑线比较低的时候，没有学历，没有知名项目，没有大厂背景，唯有勤奋，上班时间8小时，大家都是被项目缠住，重复利用下班和周末时间，不断去提升专业技能，唯有勤奋你才能有弯道超车的机会，我们这一行和其他行业不一样，没有任何捷径，如果有，很多人都去尝试了。

o

学会曲线救国

大公司招人都是有标准的，有些岗位就是有鄙视链的，比如喜欢招知名公司背景，海外的，年轻有潜力，做过知名APP的，如果简历上没有这些很难进去的。但是就因此放弃么，当然不是。

学会曲线救国，我没有知名项目，那我是不是提升我专业项目，争取去一个规模小点公司，积攒知名项目案例，比如每年TOP100的应用榜单，里面其实很多小而美的公司，先去这些公司锻炼好了，再去二线公司，再去一线公司，循序渐进往上走。

不要一根筋的，在毫无背景、毫无资历情况下去碰壁，试想你是大公司人，你是不是也想招一个被市场验证过，有过同样公司背景和项目的设计师。

5.设计师推动力是带着方案 

q

左手艺术，右手科学

t

让决策者做选择题，而不是判断题

提案也有很多技巧，后续再和大家分享，但是很重要一点就是提案时候，不要给领导太多的方案选择，很多设计师很容易犯的错误就是，提案时会放一堆方案给领导看，让领导做决策，这样最终结果还是继续改下去。

6.你的一招鲜就是你的竞争力 

什么是竞争力？人无我有，人有我全，如果你在一个几十人团队，怎么能被领导记住，一定是你具备其他人不具备的技能，或者你这个技能在你们团队是最好的。任何时候，设计师具备一招鲜的能力，都会很吃香，你可以想下你的团队，那些备受领导喜欢的设计师是不是都具备这个特征。

每个人都想成为主角，团队核心，怎么做到，就是某个专业能力上，设计总监或者主管有事情第一个想到就是找你来完成，那么就成功了。

q

7.打造自己的标签 

w

第一个：专业标签

专业标签，毋庸置疑也是最难的，大家对你专业上评价怎么样的，哪方面是你特长，在主管心中是很一般，还是说UI上是你优势，数据是你优势，你需要自己给自己定位好，假设你想让别人觉得数据分析是你专业标签。

o

第二个：性格标签

性格标签很好理解，你在大家心中是个什么性格的人，活泼的，有才华的，有魅力的，吃货还是内向的，职场上人和人之间关系很微妙，虽然不提倡站队，但是这种事情哪里都少不了。

那些性格活泼开朗，比较玩的开的，往往容易受欢迎，所以你要问自己，你希望在大家心中是个什么样性格，是内向的老黄牛，还是吃货一枚，还是美食专家。你需要建立一个性格标签，去和身边的人情感上维系。否则很容易职场上吃亏，和主管没有共同语言，没有尿到一个壶里，那你后面晋升，涨薪股票，或许也没你什么份。

w

第三个：没有无缘无故的爱

和同事之间多去培养一些共同的爱好，在互联网公司做事情，很多事情其实难的不是事情本身，而是人的关系处理上，在大公司的同学应该很能体会。

 w

最后 

这是我所总结出来的一部分职场心得，或许和设计无关，但是在我们工作中却尤其重要，希望今天的分享你会喜欢。

00.【前言】

现在我们在目标导向流程的第一个部分：研究。

我是从0开始、系统讲解用户体验设计方法的CC～

上周说完了决定是否购买的客户之后，我们就需要聊一聊，购买了以后真实使用产品的用户——也就是我们常说的【关注点为用户的访谈】。

01.【用户是谁？】

这个人是亲自使用我们产品的人，也就是【现有用户】。

是更能对我们的产品提出有建设性的优化意见的人。

问题

那么问题来了：

“如果说我们的产品还没有进行发布，或者说我们还没有明确的使用我们产品的用户，这个时候应该怎么办呢？”

仔细思考一下，在推广一个物品的时候，我们一定会有一个目标的用户也就是说这个产品的潜在用户。

他们现在虽然没有使用这款产品，但是后期他很有可能去使用这款产品。

就比如说线下进行美术教育活动的学生是否也有可能在后期的过程当中接受线上的教育呢？

这肯定是非常有可能的！

就像我们现在的疫情发展，会让很多学生出于安全考虑，去更多的接受线上教育，避免人流繁杂的线下课堂。

在此之前，我们就该认识到，这些孩子就是我线上教育的潜在用户。

总结

【现有用户】以及【潜在用户】，这两种用户都是我们可以对产品进行优化访谈的重点人群。

02.【用户要什么？】

如果我们卖一款洗发水，那我们就需要去访谈使用这些洗发水的用户的真实感受。

【香味是否好闻？】【去屑能力如何？】【使用感受如何？】等等……

在前期我们首先需要了解的就是我们这款产品对用户生活产生的影响。

访谈用户会在什么时候，什么原因来使用一款产品、用户的期望是什么？

需求

如果用户所说的需求是：“在夏天的时候我希望能有一款产品能让我在很热的时候放松和清洁自己，并且达到清爽怡神的目的。”

那我们就需要去考虑针对用户的生活需求来划重点。

Q：用户想在什么时候使用？

A：夏天。

Q：什么原因使用？

A：觉得很热想要清洁放松。

Q：用户具体的关键要求是什么？

A：清爽怡神。

我们就可以针对用户的这几点需求，围绕着这几点需求去考虑，一款什么样的产品能够带给用户这样的体验呢？

解决方案

我们可以采取添加薄荷元素或者是清新的香氛元素来达到放松清爽的感觉等等等。

后续的开发过程就是我们需要提炼用户的关键需求，让它成为一款对用户有用的产品。

这就是一款有针对性的产品。

03.【产品的用户针对性】

当然洗发水这个例子是我们生活中非常基本的生活领域的产品。

还有很多在用户领域知识之外的产品，也就是用户完成这个工作必须有需要知道的信息。

要从用户当前的这个领域知识出发。

如果说我们针对的用户是小白级用户，我们就需要将产品尽量做的浅显易懂。

如果说我们的产品是一款专业性很高的领域性产品，我们就需要提供给专业大牛尽可能完善、准确性高、易用性强的产品。

了解用户的任务和活动是我们开发一款产品前提。

小思考   

这时候提一个小思考了：【如果用户告诉你的任务和活动并不是他真实的想法，或者压根不愿意告诉你，我们应该怎么做？】

下章我们就聊这个吧～

我是cc~下期继续带你系统学习用户体验的基本方法。

原文地址：达芬奇的火柴（公众号）

作者：CC本人

转载请注明：学UI网》用户体验 | 与用户交流，我们是认真的

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

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

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

#01。Willian Santiago  

#02。Fran Labuschagne

#03。Abbey_lossing

#04。Danielbarretoes

#05。Levysfriends

#06。Laborregaviuda

博客地址：

https://www.instagram.com/laborregaviuda/

个人介绍

https://ballpitmag.com/portfolio/laborregaviuda/

 

#07。kazuhisauragami

Kazuhisa Uragami 是来自日本东京的插画家。他的作品从风格手法上就可看出极具日本文化特色，色彩像素化表现，让人印象深刻。

博客地址：

https://www.instagram.com/kazuhisauragami/

最后想说的是：插画能带给我们不一样的情感体验，是我们的内心世界和我们周围的现实之间的纽带。通过插画我们唤起情感连接，表达想法。喜欢插画的小伙伴们，赶紧画起来。

好了，今天文章就到这，下期见~

转载请注明：学UI网》你绝对想不到，这波宝藏插画师的博客究竟有多好！

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

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

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

01 音视频娱乐新形态

挖掘更好玩的娱乐社交场景，能带给用户更愉悦的体验。疫情期间，线下聚会因此受限，线上娱乐应运而生，在此契机之下，期望借助音视频实时互动、声影重现的特性，开启了新的娱乐形态——QQ一起派对。

观察竞品普遍存在不足之处，即缺乏真实聚会游戏的氛围与互动。因此，解决社交游戏产品缺少真实情境的问题，成为QQ一起派对的创新机会点，有利于在竞品中突围，塑造差异化优势。

02 打造真实聚会游戏体验

2.1 回归本质，突围创新

QQ一起派对是基于音视频展开的线上聚会游戏，结合了实时互动与娱乐化内容。为了让游戏过程更贴近真实聚会场景，我们从游戏氛围和自然交互两方面切入，寻找创新突破口。

游戏氛围

构建适用于游戏类型的界面框架，让线上聚会更贴近真实世界，并运用视觉感染力，营造环境氛围，包括场景具象化、增强代入感等方法，实时感知好友的情感变化，从而获得社交临场感，在心理上感到彼此的存在。

自然交互

有别于竞品需通过点击按钮作答，QQ一起派对利用实时语音识别，让用户通过更自然的人机交互方式，在游戏过程中进行语音抢答，彷佛置身于真实世界中与好友互动，成为QQ一起派对的独特卖点（Unique Selling Proposition）。

综上所述，QQ一起派对的设计要素包括：、

1. 社交临场感（Social Presence）：场景具象化、高度同步实时响应、感知他人情感变化

2. 沉浸感（Immersion）：营造氛围、增强代入感、突出内容与主角

3. 可玩性（Playability）：游戏界面、游戏机制、游戏互动

4. 凝聚力（Cohesion）：将好友聚在一起、吸引更多用户来玩

2.2 游戏界面设计

舞台场景化布局

QQ一起派对能让用户创建房间，邀请好友参加线上聚会，促使游戏氛围具象化。游戏类型聚焦于〝你演我猜〞、〝明星问答〞等猜题游戏，为了增强代入感，让用户融入情境之中，我们采用舞台表演的界面隐喻（Interface Metaphor），借由深色背景突出内容与表演者。界面框架选择一个大画面与多个小画面的组合，更贴近轮流上台表演的游戏类型。通过舞台场景化布局，模拟线下互动的真实感。

多层次感官体验

我们真实还原了线下抢答的互动体验，通过倒计时动效、实时分数标签，以及抢答成功反馈，增添游戏的紧张感与刺激感。

在游戏过程中，除了通过视频画面感知好友的情感变化，用户的语音状态也会实时反馈在头像上，响应抢答题目、好友交谈，以及各种表达情绪的声音，借着声音视觉化的效果，搭配视频与人声的重现，交织出多层次的感官体验。

邀请消息实况化

发送邀请是召集好友的重要途径，而作为〝邀请函〞的消息，需要传达明确的信息，让用户一眼就能感知房间内的状态，包括准备开始、游戏中、游戏结束等，避免用户点击加入游戏时，却因游戏已开始或结束而无法加入。为此，我们将邀请消息实况化，持续更新当前状态、参与成员等，让用户能实时感知派对房间的变化。

03 拯救孤独，陌生人玩法登场

3.1 让你随时找到伙伴

排解寂寞心理诉求

QQ一起派对初期聚焦于好友一起玩，但仍不免发生创建了房间，当下找不到好友，或因等待过久而退出房间的状况，使得创建房间到实际参与的转化率受到影响。从用户访谈结果来看，用户存在排解寂寞的心理诉求，但对象不一定得是熟人好友，因此渴望找到游戏伙伴、快速开始游戏，成为QQ一起派对扩展至陌生人玩法的契机。

引入陌生人匹配

针对找不到好友的问题，我们新增了匹配陌生人的能力，用户可从游戏大厅进行随机匹配，倘若创建房间后找不到好友，也能在房间内匹配玩家，降低游戏参与门槛。

此外，进一步优化房间内的界面布局，将游戏卡片缩小平铺排列，让用户一眼就能看到多款游戏，提升对游戏数量的感知与转化率。在游戏类型上，新增了猜歌与知识问答两款游戏，并提升现有题库质量，避免游戏趣味性不足，影响用户留存率。

3.2 游戏大厅情感化设计

搭建游戏世界观

为了增强游戏氛围，我们通过情感化设计带领用户进入情景中，让用户更好地理解每个玩法，并从游戏玩法与情感诉求提炼出场景元素，以此搭建游戏世界观，并将故事情节加以推演，增强趣味性与独特性，还能进一步提升记忆度。

利用光效聚焦视线

光效有利于吸引和聚焦视线，并以不同的表现形式来影响情绪。我们从光的色彩、动效、光感和造型等层面，创造出五种增强感官体验的光效设计，将其应用在游戏大厅入口，借由不同的光效类型与动画形态，强化用户的世界观感知。

会讲故事的界面

带有情感的故事会在记忆中发酵，引领用户进入场景。我们将游戏入口的功能属性，转化为富有故事性的场景设计，当用户被故事所吸引，多感官区域被激活，将会激发用户情绪，有利于记忆与理解游戏入口，对游戏产生共情，进而超出产品的功能价值，与用户建立情感链接。

例如匹配陌生人入口，使用QQ的IP形象驾驶UFO，准备召集用户前往神秘的太空之旅，意味着通过陌生人匹配，你将摆脱寂寞，以光速般的速度找到游戏伙伴、快速开始游戏。通过故事剧情激发情感共鸣，并适当结合IP渗透品牌价值，吸引用户参与游戏。

破格设计能够加强张力、突出游戏主题，我们运用破格效果的3D图标造型，彰显游戏的独特调性，树立鲜明的品牌印象。

组件化卡片设计

组件化除了提高设计效率，还能从整体一致性考量差异化。我们将游戏卡片、题库卡片、提示卡片和入口卡片等功能界面，构建一套组件系统，让框架布局贯通全流程，打造体验一致的可玩性，利于后续的扩充与延展。

3.3 生存战增添挑战性

激发持续参与动力

根据游戏可玩性研究，提供挑战与磨练技巧的机会，对持续参与游戏的动机有正面影响。有鉴于此，除了提供随机匹配、召集同好共乐，我们还设计了极限生存战玩法，希望借着1v1淘汰赛制增添乐趣与挑战性，激发用户持续参与的动力，特别是年轻人酷爱这种竞技感，击败的对手越多，获得的奖励就越高，有利于勾起用户的胜负欲。

匹配动效强化氛围

为了营造同场竞技的临场感，我们利用匹配动效强化氛围。随着已加入玩家的数字不断增加，底部会实时展示用户头像，具象化呈现玩家数量，烘托热闹气氛，消除等待时的焦虑感，让用户处于蓄势待发的状态，而红蓝对战布局则进一步强化PK宣战的氛围。过程中若有玩家遭到淘汰，用户也能通过底部头像感知剩馀玩家数量，以此增强游戏临场感与成就感。

增强荣誉感与仪式感

每轮击败对手时，答题区域将变为全屏的庆祝画面，搭配撒花特效、头像聚光灯，营造欢愉的胜利氛围。而在游戏结果页，我们同样利用色彩和动效的差异对比，塑造胜败双方的情绪氛围，以此增强荣誉感与仪式感。在生存战登顶挑战成功的用户，将会站上颁奖台授予最高荣誉，在舞台聚光灯的照耀下，迎接光荣胜利。排行榜有助于强化击败众多好手的感知，激发胜利者的分享欲。

04 结语

QQ一起派对推出后深受用户喜爱、获得广泛好评，调研结果显示，用户整体评价相当高，也乐于将QQ一起派对推荐给好友。

综而观之，音视频除了广泛应用在通讯场景，正逐渐赋能更多创新场景，而娱乐场景更成为兵家必争之地。QQ一起派对开启了新的娱乐形态，充分发挥音视频声影重现的独特优势，消弭了空间距离，尝试解决社交游戏产品缺少真实情境的问题，让游戏过程更具临场感，就像面对面进行游戏一般。未来将从玩法丰富性、游戏挑战性、题库可玩性三方面持续优化，打造更好玩的音视频体验。

立即打开QQ，邀请好友畅玩聚会游戏！

原文地址：ISUX

作者：腾讯ISUX

转载请注明：学UI网》声临其境 | QQ音视频娱乐社交设计

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

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

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

移动设备激增，零工经济迅速发展，远程工作开始兴起。在疫情的影响下，几乎每个人都成了远程工作者。

表情符号与我们一道稳步发展，成为鲜活和丰富情感的必要交流工具。肢体语言，微妙幽默，或者环境条件——虽然我们可以亲眼看到并回应这些暗示，但在网络环境中失去它们会极大地影响我们的交流。然而，用表情符号，几个像素就能以有趣、清晰、能引起情感共鸣的方式表达我们的想法和感受。（彩云注：这就是这项艰巨工作的商业价值）

随着世界走向混合工作场景，面对面和远程结合，线上交流的表达形式比以往任何时候都更加重要。微软365里有超过1800个表情符号，我们在过去的一年里一直在努力通过创建一个自然的Fluent（流畅）系统 （彩云注：这是他们更新整套表情系统的理念）来更新它们。

我们选择了3D设计而不是2D设计，并选择了让大多数表情动画化。在接下来的几个月里，你会看到这些产品的推出，我们想和大家分享一下，以纪念世界表情符号日。我们也很激动地推出了五个全新的表情符号，这代表着我们对工作、表达和空间的新视角。

拥抱游戏的力量

在疫情改变工作和生活之间的界限之前，交流就已经朝着真实情感和娱乐的方向发展。为了确保我们的新设计反映这一点，设计研究员Meghan Stockdale与我们密切合作，重新思考专业的图形表达。通过主次研究，她专注于游戏概念，将其作为一种催化剂，帮助我们挖掘最好的作品和最诚实的自我。她引用了斯图尔特·布朗(Stuart Brown)的精彩著作Play: How it Shapes the Brain, open the Imagination, and inspiring the Soul （游戏:如何塑造大脑，开拓想象力，激发灵魂），对她的有着特别地影响。

“游戏对于创造性头脑风暴、发展和掌握新技能以及团队建设等活动至关重要，”Meghan说，“但我们通常不愿意在工作或工作工具中给予游戏空间。由于我们工作和成年的关系，玩有时会让一些人感到不舒服——尽管我们生来就是为玩而生的。”

因为对每个人来说，好玩或富有表现力不是件容易的事，表情符号是完美的小帮手。它们绝不是无聊或装饰性的，而是我们人性的延伸，是重要的沟通工具。根据Meghan的研究，它们可以软化或强化我们的语气，为平淡无奇的互动增添乐趣，帮助我们以一种比书面文字更普遍的方式表达自己。

这张图片展示了我们用不完美的圆来做头部的形状。人是不完美的，为什么我们的图形表示要完美的正圆呢?

那么，表情符号或其他好玩的媒体适合在工作中交流吗？游戏鼓励创新，而表情符号则是有趣的交流者。也许文字和表情符号之间的相互作用加强了两者的交流力量。也许表情符号的脆弱和轻松不仅可以激发我们自己的创造力，还可以鼓励我们组织中其他人共同参与。当我们进一步进入混合工作模式世界时尤为重要，在那里我们将首次在网上见到新的团队成员。

我们的一些全新表情符号甚至试图捕捉这个新的混合世界。下面是一些概念草图，我们希望能得到你的想法。

以上是我们正在创建的新表情符号的概念草图，以帮助传达混合工作的现实。从左到右:一心多用，静音，不拍照，一边工作一边照顾孩子，穿着睡衣。

自然有趣，天生流利

在整个过程中，信任和清晰是我们的指导原则。我们希望人们相信，我们的新表情符号风格会理解到他们的意图，反映出他们的人性。人是不完美的，我们的创意中有美，这就是为什么我们选择了一个不完美的圆形作为头部的轮廓形状。

我们还密切关注表情符号中眼睛的表情，并倾向于把眉毛特征做的更加明显。对我们来说，在保留情感意图的同时进行设计是至关重要的。最后，因为我们希望人们相信他们并能从设计中找到令人振奋和鼓舞，我们倾向于明亮、高饱和的颜色和大胆的形式! 

通过全面利用特定的眼睛、嘴巴和头部形状，我们创建了一套统一的面部特征，可以缩放，同时保持一致的外观和感觉。

为了保持不同类别的1888个表情的一致性，我们在新风格中使用了简单的几何形状作为每个表情的基础。如果这听起来很熟悉，那是因为我们连接图标系统的工作方式是相同的。螃蟹表情确实突出了这一点;我们用圆形和半圆形来代替解剖的表示法，造型更加简单，从而赋予它更多的个性。

当你注意细节时，平凡也能变得不平凡。图中的螃蟹表情符号通过大胆、美丽的颜色和厚实的图形形状证明了这一点。

整套表情我都喜欢，但我最喜欢的还是这只螃蟹。这只酷炫的小螃蟹体现了我喜欢我们表情符号系统的地方:它让看似普通的表情符号都变得与众不同。无论是螃蟹还是人类，我们的独创性都蕴含着美。（彩云注：这就是作品中的亮点部分阐述，面试的时候讲自己作品的亮点，就可以从类似这样的角度去讲，学到了！）

最后，但并非最不重要的是，我们必须利用这个机会做出一个改变，只有我们才能真正做到——将经典标准的回形针，改了全新的3D形态。

当然，我们现在使用的回形针可能比全盛时期要少，但我们无法抗拒怀旧的吸引力。

为了让自己焕然一新，我们忍不住把扁平的、标准的回形针变成了新造型的回形针。

表情符号正在巩固其作为在线交流不可或缺的工具角色，你将能够在不同平台和设备上使用这些全新的表情符号。我们的一些新表情从今天开始在Flipgrid中上线，其余的将在未来几周推出。在这个假日季，团队和Windows将配备该套件，Yammer、Outlook和更多的产品将在2022年全年实现落地。

除了表情符号，我们还将在微软365中通过更具表现力的主题、插图、背景等，将我们的流畅美学带入生活。但首先，我们想听听你的意见!你最喜欢的表情符号有哪些?如果你能成为一天的表情符号设计师，你会创造出哪些新的表情符号?

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

原文地址：medium

作者：Microsoft Design

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

译者：彩云Sky

转载请注明：学UI网》被刷屏的微软全新3D表情，微软官方分享背后的设计思路

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

江湖上一直流传着这样一套理论，视觉设计语言五维度即“形、色、字、构、质”，说人话就是图形、色彩、字体、结构、质感。这套理论的来源我寻了很久也没找到，但是这套理论却经常出现在各种方法论里面。下面我来逐一分享一下我对这几个要素的理解。

1、形 

形就是指图形，界面中的图形就包括图标、卡片、图片，因此，icon的风格、卡片圆角的大小、图片圆角的大小，都会影响界面的风格，所以要进行规范。 

2、色

色即是色彩，在界面中色彩不是单一的色调，它是整个色彩规范，什么时候应该用主色，什么时候应该用辅色，主色和辅色的比例，颜色在图标、文字、装饰上的应用，这些会影响人的整体感受，吸引视觉注意力，规范的配色搭配会让界面的视觉更加舒适。

 

3、字

字即是字体，字体的形式、字号大小、文字的间距都影响着界面的信息传递，选择符合产品特性的字体、合适的字号、舒适的间距都能让界面看起来更加精致。

 

4、构

构即是结构，也就是界面的内容布局，排列的方式、分割的方式、留白的多少，都是属于界面结构的范围，结构的定义非常重要，决定着界面是否具有呼吸感、通透感、舒适感。

 

5、质

质就是质感，也就是整体页面的感觉，通过圆角的大小、留白的多少、排版的疏密、投影的大小来决定整个质感是扁平的还是拟物的、高冷的还是活泼的。

知道了这五个维度之后该如何应用呢？我们可以应用在竞品的视觉分析里，项目的视觉改版里，项目初期的定风格阶段里，反正就是应用在一切需要整理汇报的地方，提升你设计的专业度和可信度，如果在你的述职报告或者作品集里面搞一下，档次一下子就上去了。

最近因为季度汇报，我发现有些领导可太爱听这一套大道理了，加了这些方法论之后，他就会觉得这个人有思考、能力强、有自己的方法论，不过是好是坏那就各自评说吧。

原文地址：LEO设研所（公众号）

作者：设研_仓仓君

转载请注明：学UI网》没想到学会这套方法论，定义视觉风格能这么快

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

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

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