改版背景

设计体验不统一

由于产品模块多，经手的设计师多，没有规范进行统一。例如同一个icon在各个模块的显示都不同，因此需要在视觉和交互上统一化、规范化。

视觉风格过时

设计语言陈旧，视觉风格过时，且缺乏亮点和趣味性。希望改版能重新定义视觉风格，打造全新的视觉设计系统。

协作效率低下

团队协作效率较低，设计师与开发沟通成本高。

探索改版目标

用户调研

1.问卷调查

本次调研活动共有 4977 位参与，回收有效样本为 4973份。

通过用户调研，理性和了解用户，根据他们使用简书APP的目的、行为、习惯和态度差异，最终挖掘出不同人群对简书的偏好和潜在需求，以及对目前简书品牌的认知程度，从而帮助产品进行整体的设计升级和用户体验优化。

2.用户焦点访谈

进行了4轮访谈，共访谈了4位简书用户。

访谈提纲：用户属性、使用偏好、产品认知&产品使用情况、界面探索。

确定改版目标

关键词的探索与确定

结合用户调研和问卷调查结论，团队总结出了一些改版方向。

提炼关键词：

最后敲定关键词为：更年轻 更温暖 更高效

为什么要更年轻

后台数据可得简书用户的年龄层20-30岁占比43.7%，意味着产品主流群体是年轻人。所以视觉层面、文案等都要更趋向于年轻和有趣。

为什么要更有温度

我曾经在简书用户反馈中看到这样一条消息：

“很棒的写作治疗平台，谢谢每次在黑暗中自我治疗的方式。”

“自从使用了简书，我多一位可以宣泄内心故事的朋友。”

“温暖有温度，”这个产品特质也是大多数用户选择简书的原因，简书不是一款冷冰冰的工具，而是一个温暖治愈的产品，所以应该更加强化简书这一产品特质。

在产品设计中，我们应更多的思考如何将情感化细节运用在简书产品中 。尝试把情感化设计作为体验设计的切入点，从用户情感诉求出发，系统性地盘点产品中哪些场景需要做情感化设计、怎么做，然后提炼设计目标，转化成情感化的解决方案，结合业务迭代落地，加深用户对于简书产品的情感连接。

图片来源：unsplash

为什么要更高效

工作中遇到的问题

统一性差：每个设计师都有自己的设计习惯，同一个组件呈现不同的视觉样式，无法复用。

效率低下：1.设计师重复设计相同类型的组件，消耗大量时间。2.设计师在遇到特殊情况和分支时总是遗漏一些特殊状态等到开发问起来才想到。

开发成本高：同一组件开发需要写重复样式，无法全局调用，耗费时间开发成本高，安装包体积庞大，甚至会影响产品性能。

如何提升产品设计组工作效率，如何缩短开发时间成本。如何增强产品的统一性，避免多样式给用户带来认知障碍，将成为此次改版的重点之一。

图片来源：unsplash

围绕关键词做了哪些

如何更「年轻」

1.品牌色升级

旧版简书配色明度与饱和度较低，红和绿的互补色搭配对比度太过强烈，显得过于花哨。也易引起视觉疲劳感。

调研问卷

由调研问卷得知75.3%的用户对简书品牌红的印象很深。对品牌色进行较大改动会带来用户认知成本的增加，因此决定沿用简书红的主色调。将主色调颜色升级，提高品牌色明度与饱和度，恰当运用渐变色，与2020年色彩趋势之一“Lush Lava”融合，传递全新的视觉感受，也使之更贴合年轻化的趋势。

将辅助色进行降噪处理，去掉多余颜色带来的视觉噪点，减少次级信息给用户带来的干扰。次级按钮将不再使用辅助绿色。

升级后配色

2.LOGO升级

logo在原有标识的基础上进行了微调，把直角统一改为圆角，圆角更有安全、温和、舒适的属性且更有亲和力，更贴合产品气质。

优化细节展示：

新旧版对比：

logo应用：

3.ICON升级

流行趋势研究

根据 Shutterstock发布的2020年色彩趋势报告。（Shutterstock是一家提供高质量图片，工具和服务的创意平台公司，根据平台上数十亿图像的搜索数据，Shutterstock发布了2020年色彩趋势报告。通过大数据分析，Shutterstock的团队能够看到他们的用户最常下载的色调。利用这些大数据，他们编制了三种最普遍的流行颜色的趋势报告，以及世界各地用户最爱的颜色。）

image.png

其中最突出的三种颜色分别为：Lush Lava（#FF4500）、Aqua Menthe（#7FFFD4）、Phantom Blue（#191970）。

旧版icon风格不统一，有纯扁平风格、纯描边风格、描边与扁平结合风格，视觉上显得较紊乱。新版icon统一成纯扁平风格，统一视觉样式。icon颜色参考了2020年色彩趋势，选取了很有代表性的色彩，且在此基础上运用了更高饱和度的渐变色，更符合年轻化趋势，让用户更有探索的欲望。

4.页面升级

「首页」增加多维度标签

在文章模块增加了更多维度的标签信息来帮助用户进行决策，快速定位自己感兴趣的文章内容提高CTR。在推荐系统还不是很智能的情况下，基于用户视角来增加一些标签分类，提高用户满意度更提高了用户黏性。

考虑到阅读的舒适性和用户的使用场景。为了让用户阅读更舒适，新版本修改了首页feed流的组件字号。在大屏手机的趋势下，原先的feed流看起来非常吃力，难以辨认。新版升级了首页feed流的字号。将原先标题的17号字升级为18号，副标题14号升级为15号，11号文章信息改为12号。优化后信息更干净清晰，更好触达用户。

当然，小的字号改动可能会带来点击率的下滑，因为在相同屏幕下显示出的feed流数量可能会减少。在后期持续观察数据之后发现对ctr并无较高影响。

1.阅读效率。

国人的阅读习惯大多是从左到右的阅读顺序，先看到图片再看到标题，但有些图片表达信息过于模糊，用户需要阅读标题后再次会看图片，这里就会造成一个视觉重复，虽然这也只是短时间的视觉滞留，但大量的类似列表就会比较影响阅读效率了。

2.视觉布局。

对于可能出现的无图内容信息，那么左图右文的情况就会造成页面视觉上的不整齐感，影响视觉阅读的连惯性。

「我的」页面升级

较旧版用色更大胆，视觉呈现上更显年轻化。增加了页面细节，让页面更耐看。旧版字体较小，在大屏幕下看起来较为吃力。加大字号后更符合大屏阅读习惯。

「简书钻」页面升级

对比旧版新版层级更清晰明确，内容呈现得更易懂。

如何更「温暖」

这里仅选取几个比较有代表性的情感化案例，不多做展开，具体案例可移步「简书」产品的情感化探索。

1.空状态页面设计

缓和用户的焦急与沮丧的情绪

相较于冰冷且毫无人情味的界面说明，报错信息，通知以及反馈,一些另类好玩的插画会让整个设计变得更加有趣生动。为用户营造出符合他当时行为和感知的情景，转移用户的注意力或化解用户因等待、失败等场景引起的负面情绪。

2.文本设计

直击心灵的文本设计也是实现与用户情感交流的重要途径。语言和图形一样，是传达信息的重要手段，同时也是情绪的主要载体。富有人情味的文案可以帮助产品增添温度。相较于冰冷且毫无人情味的界面说明，报错信息，通知以及反馈，带有情感，温暖，贴心的文本设计，更能激发用户好感，引导用户行为的同时，加深用户对产品的认可和喜爱。

发布文章成功提示

“你的每一次创作，都应该得到鼓励。”在用户辛苦码字提交成功后，会有很强的成就感，我们在这个情绪点上让情感化更升华。

小岛模块的点赞、发帖成功的 toast 提示。

文案与emoji的趣味化，简单有力。小岛模块增加互动率，随机提示设计，每次点赞和发布的提示不同，有的是夸奖、有的是暖心告白、有的是引导用户继续发帖。这样设计更有惊喜感，更能激发了用户的好奇心，并不断操作尝试。

3.人文关怀类提示

在简书搜索「自杀」字眼时会弹出提示。

告诉用户如果你或别人正在经受困难，甚至想自杀或者伤害自己。我们可以帮助你，你并不是孤单一个人。

一个好的产品不仅仅是以盈利为目的，更要有社会责任感与人文关怀。

4.微交互

动效

动效能很好地激发用户的点击欲，增强参与感。在带给用户全新使用体验的同时，也为使用增加了趣味性。设计始终都关乎细节。即使是再微小的细节都值得我们关注，看起来微不足道的微交互，细小但是引人注意的动效，所有的这些东西构成了产品令人印象深刻的用户体验。

触动反馈

触觉比视觉和听觉的传达更迅速被用户感知，由于以人体为介质，触觉反馈会为对表皮以及对肌肉中感受器进行刺激，因此其要比视觉与听觉更加敏感和强烈。
触动反馈可以弥补异常情况，如网络延迟，用户进行某些操作后可能需要等待一段时间才能收到反馈，如果时间过久，用户会怀疑是自己操作不当，但如果加入振动反馈，会在其他反馈信息出现前打消用户的顾虑。

5.仪式感的节日提示

简书周年纪念彩蛋

6.徽章设计，成就激励

提升用户的成就感与荣誉感等正面情绪。

徽章和等级功能一般属于产品的成长/成就体系当中，其目的基本都是为了激励用户去完成产品需要的行为，这类功能，能够使产品获得更精准的用户量化区分，提升产品使用频次，停留时长等目标，完成用户忠诚度、使用粘性、活跃度等指标。同时用户可获得一定的荣誉感、自信心、身份认同等。

徽章的魅力不在于徽章本身，而是它包含的价值和情感。

旧版徽章

旧版徽章的问题：徽章类型，红、蓝、绿等颜色逻辑关系比较混乱，图形的运用亦如是：圆形与多边形的图形运用毫无章法。

改版时的思考：

如何区分不同徽章的不同功能？如何让徽章系统更成体系？如何让徽章系统更好延伸？如何加深用户的“成就感”“荣誉感”等正面情绪？

以此问题为基础进行了视觉与交互升级。

改版新后徽章系统

1.身份认证类徽章：对应行为成就（较难获得，成就感高，以红色区分）

2.活动类徽章：对应行为奖励（较易获得且更新较快，成就感低，以蓝色区分）

3.会员徽章：身份的象征（以金属色区分）

升级的徽章系统适应现下流行趋势，用高饱和度的亮色和渐变色。因徽章大多展示的像素仅有10px-12px,所以不做过多复杂的图形修饰，在小尺寸下也能看得清晰。

7.夜间模式升级

从下图可以直观得看出旧版简书App夜间模式的可读性略差，使用的文字颜色和背景颜色的对比较弱，导致界面文字不清晰，辨识度低。不适合在白天或者亮光环境下使用。且背景颜色背景偏灰，底色为浅灰，这点会导致OLED屏幕深色不发光的特性无法很好的发挥，隐藏边框的视觉效果无法显示出来，还是十分影响观感的。

需要设计更符合用户使用习惯，让用户的眼睛更为舒适的夜间模式。让用户在任何时间都可以轻松且舒适地浏览内容。

在夜晚不开灯的情况下，环境与手机屏幕亮度的明暗差距被进一步放大，亮度对比带来视觉刺激也更加明显。如果在漆黑的环境下看高亮的手机屏幕，对我们的健康有非常大的损害，不仅表现在对视力的伤害上面，视网膜和神经元容易受损，同时主流的研究项目还表明会这会抑制我们褪黑素的分泌造成失眠。

因此尽可能降低屏幕亮度，缩小屏幕显示亮度与环境光的差距，是保证用户夜间舒适阅读和使用的重要前提。

下图为改版后效果图：

image.png

如何更「高效」

1.制定视觉规范，提升工作效率

统一的视觉规范有助于保持视觉统一，且便于设计团协作。对开发工程师来说可以提高开发速度，相同的组件可复用，减少开发成本。甚至有些页面不需要设计师重复出图，便可直接复用控件开发。这样更有利于设计师和开发的协作互通，有效地配合工作并且极大提高效率。

对用户来说不光是视觉上更整体统一，学习成本也更低，因为界面和功能的操作更统一。不会出现同一个功能运用不同交互操作的情况。

新版打造了更加便捷的组件规范，提高了协同工作效率。

2.制定交互自查表

面对分支流程和异常情况时，交互自查表可以帮助设计师提高处理效率。

大多数设计师都遇到过这个问题，特殊情况没考虑清楚，总是遗漏一些特殊状态等到开发问起来才想到。这时就需要一份交互自查表，在设计评审之前，与交互自查表对照设计稿，考虑的细节是否完善，对特殊状态的描述是否有遗漏。例如：空状态如何展示？初始情况如何展示？极端情况如何展示？

下图为简书交互自查表部分展示：

最终视觉界面呈现

改版总结

关于用户层

总的来说还是收获了不错的正向反馈。

关于体验层

视觉层面

新版新增了视觉规范，更统一。

数据反馈

改版后也持续关注核心页面的各种转化数据，在改版进行优化调整后，依然保持了数据的高转化率，验证了设计优化的方向是正确的。

例如小岛模块增加了小岛情感化提示文案后，用户的点赞率、评论率与发帖率均有上升。

后期还将持续关注数据变化，做产品提升与改进。

升级改版只是一小步，设计师应该有全局思维，如何做出更好的产品，如何量化设计价值，如何提高效率创造更大的价值等，这些都是需要设计师不断思考的。设计从来不是拍脑袋就能决定的，都是有据可循的。

作为简书的第一次系统化的改版，希望此次改版只是一个开始，希望通过不断的打磨优化，秉持初心，为用户提供更触动人心、可依赖的写作阅读平台。

在这里还要感谢曾一起为简书产品奋斗过的设计师。