实战案例复盘！36氪APP 9.0全新设计升级背后的思路

从规划方针拆解办法、规划言语、规划前进点、情感染、实际运用几个方面共享 36 氪 APP9.0 全新规划晋级内容。

跟着事务继续开展和产品内容不断丰厚，资讯形态已涵盖文字、视频、直播等各类方法，可满足用户多样化的阅览需求，这也使得用户集体的年纪、工作、教育等各方面较原来产生了改变，原有偏重商务感的规划风格现已很难满足广阔用户集体多样化的审美需求。

依据此布景，2020 年 Q4 进行 APP 9.0 视觉晋级，这是自 2018 年 APP 8.0 后的大幅度改版，涉及品牌前进、视觉晋级、交互与用户体会前进、情感染重塑。此次改版数据与用户反应上都取得较好前进。

接下来咱们从规划方针拆解办法、规划言语、规划前进点、情感染、实际运用几个方面分别为咱们共享一下此次改版的内容。

规划方针拆解办法

1. 规划方针定制

咱们开端接到的事务方针是两个，完成此次改版晋级的产品方针、 用户体会晋级。

产品方针：更丰厚的资讯、更精华的栏目、更好看的视频、更交心的重视、更及时的触达。这些内容很难直观的跟规划方针相关起来，而用户体会晋级也是一个宏观方针，所以，事务方针≠可直接落地执行的规划方针，怎样与产品方针结合构成准确且可执行的规划方针，咱们有一个“无中生有”的办法论。

2. 方针拆解

挖掘问题

咱们整理总结 8.0 存在的视觉问题，要点为两个方向：一是内容展示低效，二是全体颜色感触单一。

创造重生

经过很多搜集和整理国内外最新规划事例、盛行趋势的分析文章和陈述，制定出契合 36 氪的风格特征，且与当时的规划盛行趋势做相关，比如有品质感的毛玻璃规划方法，愈加精细化的细节处理办法。

制造亮点

由于视频、直播等多样化的内容形态加入，首要用户集体年纪、工作、教育、收入等均出现改变，用户集体的改变也一起改变了用户对于品牌的认知，现在已有的品牌略显老旧。所以在品牌特性上，咱们要针对现有用户集体特征，强化品牌感知度，也要做更具有 36 氪温度的情感染规划。

3. 规划处理方向

针对以上拆解出来的方针，相对应给出规划处理方向

4. 转化规划言语

依据规划处理方向，提炼出规划关键词，也便是咱们规划言语：高效、简洁、精美、年青。

高效、简洁、精美在前面现已有推演，“年青”关键词的提炼原因是在咱们新版用户画像陈述中，年青用户集体所占比重越来越高，新的规划风格也要适应年青用户集体的审美，视觉言语传达愈加年青、生动，契合年青人喜爱的品牌主张。

5. 贯穿运用

以上便是规划方针拆解链条的进程，怎么贯穿运用会在以下做详细解说。

规划前进点

依据前面界说的规划言语，咱们提取出 5 个需要规划改善的点：

1. 图

调整图片份额和 web 端共同，着重跨渠道品牌共同性，且下降编辑找图门槛；

加大图片圆角，让视觉出现更年青化；

调整图文间距，适当留白，着重视觉节奏，前进阅览舒适性。

2. 文

去除文字加粗，轻量化处理，前进阅览舒适性，下降用户长期阅览的视觉疲劳感；

构建栏目字体体系，在一些重要模块对标题字体进行了特别规划，将品牌 DNA 融入字体规划，强化品牌感知度。

3. icon

精美化图标规划，前进页面规划精细度；

页面按钮、布景等位置运用毛玻璃作用，紧跟规划盛行趋势，增强品质感与界面差异化。

4. 颜色

更新晋级了品牌色-有态度的氪星蓝，在颜色饱和度上较原版别有所提亮，增强颜色对比，前进品牌辨识度。依据品牌色，裂变出不同重量、层次更丰厚的品牌辅助色。在实际运用中添加辅助色运用份额，处理蓝色调带来的镇定、单调感，一起运用通明度、毛玻璃等方法前进颜色清透感，使颜色体系既轻盈又态度明显。

5. 情感染

结合 8.0 版别情感染的问题和 9.0 规划方向，进行情感染体系重塑，赋予更丰厚的情感，更流畅的交互，更立体的人设。其间要点晋级了产品形象，更新 8.0 时略显笨拙，色调昏暗的宇航员形象。

在唐纳德诺曼的《规划心理学 3-情感染规划》一书中提出规划的三个层次：本能层次、行为层次、反思层次，解析了规划触达用户情感的方法，这三个层面相互交织，为用户带来愉悦的产品体会。以下也从这三个层次和咱们共享下此次情感染晋级的心路历程。

本能层

UI 层面视觉感触上面已有介绍，下面首要共享下产品形象晋级相关内容。

在 8.0 版别中产品形象为宇航员，形象、体态等从实际中宇航员形象做提取，无较显着品牌回忆点和差异化。在晋级前的脑爆会上，首要做减法抛开宇航员的思想定式，从解读用户集体入手，依据 2020 年用研陈述计算，用户人群出现如下特征：

• 男性用户居多，占比约 64%
• 年纪出现下降趋势，趋于年青化
• 用户分布会集在一线、新一线和二线城市
• 高知人群占比约 80%，会集在本科和研讨生
• 行业会集在 IT、互联网、传媒、金融等高精尖行业

除以上数据，还经过用户内容偏好陈述了解到用户全体偏向阅览具有深度分析的内容。对以上内容进行整合推演，得出一个年青、商务、精英的男性形象，结合产品调性咱们将他的性情界说为睿智、专业、牢靠。

1）打磨形象造型

有了以上的设定支撑，开端要点研讨怎么与品牌调性结合，打造品牌回忆点和差异化。对成熟期产品来说，做视觉晋级不是推翻，而是前进优化，36 氪的品牌也一向围绕氪星、宇航员、未来等关键点，所以咱们从头拿回宇航员这个关键词，寻找商务精英人设和宇航员做融合的方法。

经历多轮草图规划，终究将宇航员面罩做笼统概括，服饰上运用商务服装的精粹感和宇航服做结合，运用领带做宇航服差异化回忆点一起与商务感做相关，全体打造“商务精英宇航员”的产品形象。在身体结构上设定为七头身份额，身材健康、瘦长和精英人设共同，体态轻盈和后面的悬浮场景不谋而合。

2）场景树立

在场景方面将人设中的宇航员因素放大，投射在和宇航员相关较大的“空间站”上，翻阅很多空间站资料之后，结合实际运用状况和产品调性，决定提取空间站中的悬浮感为要点表达方向，而不对空间站做详细描绘。场景物品可为笼统科技物品，也可为沙发、电脑等日常物品，在实际运用中依据需求提取重要元素做结合。

新设定详细如下：

将情感染内容整理归类并依据重要程度标明等级，界说画面杂乱程度：

3）组件化

产品形象晋级进程中运用了组件化思想，人物拆解、场景拆解，后续可高效构建新内容，减缩规划时刻成本。

行为层

1）微交互

在我的页面，右上角报到 icon 添加左右晃动微动效，招引用户添加互动，增添交互趣味性。

2）内容引导

在主页引荐信息全部阅览结束之后，出现暂无新内容，更多精彩视频的提示，奉告用户当时所处状况并对视频内容进行引流，为更多内容供给曝光时机。

反思层

1）品牌相关

主页下拉改写会呼出一颗旋转的星球，以此反应执行下拉手势操作的状况。改写速度和星球旋转相相关，用有趣的微交互为用户与产品互动进程增添趣味，缓解等候焦虑感，以情感染细节规划拉近产品与用户的间隔，也强化渠道形象，添加品牌回忆点。

落地计划

1. 主页信息流

前进展示效率

• 查找功用上滑后由顶部收起至分类导航区，下降顶导高度；
• 下降 banner 图的屏幕占比；
• 文章配图由方图调整为与 web 端配图份额共同，单条文章组件全体高度由 118px 降至 98px，一屏可承载文章数量由 3 条+前进至 5 条。

前进阅览舒适度

• 轻量化文字规划，下降长期阅览因字体加粗带来的视觉疲劳感；
• 适当留白，添加页面呼吸感；
• 图片圆角由 2px 添加至 4px，圆润带来亲和力和点击感，让视觉出现愈加年青化。

资讯方法多样化

将运营位进行整理整合，产出“3+1”方法的规划计划，即 3 条通用信息流+1 条资源位，平衡事务和用户需求，视觉感触更多样，着重视觉阅览节奏；可承载内容更丰厚，添加用户阅览时长；前进资源位转化率，添加项目曝光量。

规划提效

资源位整理重构，树立资源位规划规范，由一个项目需制作多张不同尺度迭代为仅需规划一个尺度，资源位规划提效 50%。

体会前进

主页信息流视频在 wifi 状况下自动静音播放，减缩用户步长且兼顾用户运用场景，添加用户运用时长。

2. 文章页：

阅览体会前进

• 整理文章页高频功用：字体大小设置、深浅色方法切换，与共享功用整合以半弹窗方法出现，下降用户阅览进程中跳出率；
• 界说多种表意清晰的内容款式，前进视觉方法丰厚度与节奏感，防止用户长期阅览大面积文字带来的视觉疲劳感；

强化品牌 IP

• 依据文章内容树立原创、非原创主题 IP 分类，于文章顶部展示，增强主题品牌IP传达，树立用户认知；
• 整合作者相关信息在文章底部以卡片方法出现，品牌色+毛玻璃质感结合，增强品牌回忆点，强化个人 IP；

前进共享转化

共享进口优化，将高频共享渠道微信作为显露渠道展示，当用户在文章页滑动到一定长度后，底导共享 icon 变为微信 icon，招引用户点击，下降共享步长，前进文章转化率；

3. 我的：

优化登录

将登录常用渠道在我的页头部展示，减缩用户登录步长，前进登录几率；

强化互动数据

经过监测数据发现，用户对重视、保藏、阅览等功用运用频次较高，所以咱们将常用功用数据信息进行强化，增强进口展示；

4. 特别规划点-毛玻璃质感：

风格特征

毛玻璃质感的风格特征：通明感、悬浮感、明显感、轻浮感

通明感：带有含糊磨砂质感布景的通明作用

悬浮感：带有显着悬浮的层级

明显感：运用明显的颜色作为底色并且从半通明层中透出

轻浮感：轻浮的边框来强化物理质感

运用场景

毛玻璃质感作为规划亮点在 APP 多个模块中运用，对于统一视觉风格起到重要作用，传递的视觉感触更贴合用户集体的审美喜爱。

• 底导布景运用毛玻璃规划方法，运用质感差异化来区分层级，一起烘托品牌色 icon 更有质感；
• 毛玻璃规划方法作为播放 icon 和标签布景运用，可以在视觉内容繁杂的视频封面上清晰识别 icon 或标签文字，确保信息传递的准确性；
• 大局卡片布景运用毛玻璃规划方法，增强品质感与界面差异化，丰厚视觉体现力，让文字体现更有张力；

总结

从前置探究，到规划方针确定，再到多维度的计划落地，规划师对交互体会、视觉言语进行多维度琢磨与打磨，终究使得视觉和体会方面有了可感知的前进，上线后数据产生的改变也验证了规划优化方向是正确的：

规划为内容展示服务，“无规划”是最好的状况。

跳出规划思想，经过大局视角看，资讯渠道的本质是内容出现。规划需要经过专业的方法去完成用户体会和商业变现的双重价值，规划师要时刻防止“规划的自嗨”，坚持规划的初衷：时刻为内容、为功用、为商业服务。

9.0 规划言语依据现阶段产品特性和需求树立，跟着事务、产品、规划盛行趋势开展，咱们会继续更新优化，让规划言语更好的服务于事务和产品，久远继续地输出价值。

本次 9.0 改版感谢一切规划同学的共同努力，也感谢开发同学为确保复原度继续不断地调整，在他们全力支持与配合下，确保了规划工作高质量的落地。本次改版现在还有很多缺乏和待完善的当地，咱们会继续不断迭代优化，尽最大努力为用户供给更好、更有价值的服务。