從設計目標拆解方法、設計語言、設計提升點、情感化、實際應用幾個方面分享 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 改版感謝所有設計同學的共同努力，也感謝開發同學為保證還原度持續不斷地調整，在他們全力支持與配合下，保證了設計工作高質量的落地。本次改版目前還有很多不足和待完善的地方，我們會持續不斷迭代優化，盡最大努力為用戶提供更好、更有價值的服務。