改版背景
設計體驗不統一
由於產品模塊多，經手的設計師多，沒有規範進行統一。例如同一個icon在各個模塊的顯示都不同，因此需要在視覺和交互上統一化、規範化。
視覺風格過時
設計語言陳舊，視覺風格過時，且缺乏亮點和趣味性。希望改版能重新定義視覺風格，打造全新的視覺設計系統。
協作效率低下
團隊協作效率較低，設計師與開發溝通成本高。
探索改版目標
用戶調研
a.問卷調查
本次調研活動共有 4977 位參與，回收有效樣本爲 4973份。
通過用戶調研，理性和了解用戶，根據他們使用簡書APP的目的、行爲、習慣和態度差異，最終挖掘出不同人羣對簡書的偏好和潛在需求，以及對目前簡書品牌的認知程度，從而幫助產品進行整體的設計升級和用戶體驗優化。
b.用戶焦點訪談
進行了4輪訪談，共訪談了4位簡書用戶。
訪談提綱：用戶屬性、使用偏好、產品認知&產品使用情況、界面探索。
確定改版目標
關鍵詞的探索與確定
結合用戶調研和問卷調查結論，團隊總結出了一些改版方向。
提煉關鍵詞：
最後敲定關鍵詞爲：更年輕 更溫暖 更高效
爲什麼要更年輕
後臺數據可得簡書用戶的年齡層20-30歲佔比43.7%，意味着產品主流羣體是年輕人。所以視覺層面、文案等都要更趨向於年輕和有趣。
爲什麼要更有溫度
我曾經在簡書用戶反饋中看到這樣一條消息：
“很棒的寫作治療平臺，謝謝每次在黑暗中自我治療的方式。”
“自從使用了簡書，我多一位可以宣泄內心故事的朋友。”
“溫暖有溫度，”這個產品特質也是大多數用戶選擇簡書的原因，簡書不是一款冷冰冰的工具，而是一個溫暖治癒的產品，所以應該更加強化簡書這一產品特質。
在產品設計中，我們應更多的思考如何將情感化細節運用在簡書產品中 。嘗試把情感化設計作爲體驗設計的切入點，從用戶情感訴求出發，系統性地盤點產品中哪些場景需要做情感化設計、怎麼做，然後提煉設計目標，轉化成情感化的解決方案，結合業務迭代落地，加深用戶對於簡書產品的情感連接。
爲什麼要更高效
工作中遇到的問題
統一性差：每個設計師都有自己的設計習慣，同一個組件呈現不同的視覺樣式，無法複用。
效率低下：1.設計師重複設計相同類型的組件，消耗大量時間。2.設計師在遇到特殊情況和分支時總是遺漏一些特殊狀態等到開發問起來纔想到。
開發成本高：同一組件開發需要寫重複樣式，無法全局調用，耗費時間開發成本高，安裝包體積龐大，甚至會影響產品性能。
如何提升產品設計組工作效率，如何縮短開發時間成本。如何增強產品的統一性，避免多樣式給用戶帶來認知障礙，將成爲此次改版的重點之一。
圍繞關鍵詞做了哪些
如何更「年輕」
a.品牌色升級
舊版簡書配色明度與飽和度較低，紅和綠的互補色搭配對比度太過強烈，顯得過於花哨。也易引起視覺疲勞感。
調研問卷
由調研問卷得知75.3%的用戶對簡書品牌紅的印象很深。對品牌色進行較大改動會帶來用戶認知成本的增加，因此決定沿用簡書紅的主色調。將主色調顏色升級，提高品牌色明度與飽和度，恰當運用漸變色，與2020年色彩趨勢之一“Lush Lava”融合，傳遞全新的視覺感受，也使之更貼合年輕化的趨勢。
將輔助色進行降噪處理，去掉多餘顏色帶來的視覺噪點，減少次級信息給用戶帶來的干擾。次級按鈕將不再使用輔助綠色。
升級後配色
b.LOGO升級
logo在原有標識的基礎上進行了微調，把直角統一改爲圓角，圓角更有安全、溫和、舒適的屬性且更有親和力，更貼合產品氣質。
優化細節展示：
新舊版對比：
logo應用：
c.ICON升級
流行趨勢研究
根據 Shutterstock發佈的2020年色彩趨勢報告。（Shutterstock是一家提供高質量圖片，工具和服務的創意平臺公司，根據平臺上數十億圖像的搜索數據，Shutterstock發佈了2020年色彩趨勢報告。通過大數據分析，Shutterstock的團隊能夠看到他們的用戶最常下載的色調。利用這些大數據，他們編制了三種最普遍的流行顏色的趨勢報告，以及世界各地用戶最愛的顏色。）
其中最突出的三種顏色分別爲：Lush Lava（#FF4500）、Aqua Menthe（#7FFFD4）、Phantom Blue（#191970）。
舊版icon風格不統一，有純扁平風格、純描邊風格、描邊與扁平結合風格，視覺上顯得較紊亂。新版icon統一成純扁平風格，統一視覺樣式。icon顏色參考了2020年色彩趨勢，選取了很有代表性的色彩，且在此基礎上運用了更高飽和度的漸變色，更符合年輕化趨勢，讓用戶更有探索的慾望。
d.頁面升級
「首頁」增加多維度標籤
在文章模塊增加了更多維度的標籤信息來幫助用戶進行決策，快速定位自己感興趣的文章內容提高CTR。在推薦系統還不是很智能的情況下，基於用戶視角來增加一些標籤分類，提高用戶滿意度更提高了用戶黏性。
考慮到閱讀的舒適性和用戶的使用場景。爲了讓用戶閱讀更舒適，新版本修改了首頁feed流的組件字號。在大屏手機的趨勢下，原先的feed流看起來非常喫力，難以辨認。新版升級了首頁feed流的字號。將原先標題的17號字升級爲18號，副標題14號升級爲15號，11號文章信息改爲12號。優化後信息更乾淨清晰，更好觸達用戶。
當然，小的字號改動可能會帶來點擊率的下滑，因爲在相同屏幕下顯示出的feed流數量可能會減少。在後期持續觀察數據之後發現對ctr並無較高影響。
圖文排版爲什麼是左文右圖？
1.閱讀效率。
國人的閱讀習慣大多是從左到右的閱讀順序，先看到圖片再看到標題，但有些圖片表達信息過於模糊，用戶需要閱讀標題後再次會看圖片，這裏就會造成一個視覺重複，雖然這也只是短時間的視覺滯留，但大量的類似列表就會比較影響閱讀效率了。
2.視覺佈局。
對於可能出現的無圖內容信息，那麼左圖右文的情況就會造成頁面視覺上的不整齊感，影響視覺閱讀的連慣性。
「我的」頁面升級
較舊版用色更大膽，視覺呈現上更顯年輕化。增加了頁面細節，讓頁面更耐看。舊版字體較小，在大屏幕下看起來較爲喫力。加大字號後更符合大屏閱讀習慣。
「簡書鑽」頁面升級
對比舊版新版層級更清晰明確，內容呈現得更易懂。
如何更「溫暖」
這裏僅選取幾個比較有代表性的情感化案例，不多做展開，具體案例可移步「簡書」產品的情感化探索。
a.空狀態頁面設計
緩和用戶的焦急與沮喪的情緒
相較於冰冷且毫無人情味的界面說明，報錯信息，通知以及反饋,一些另類好玩的插畫會讓整個設計變得更加有趣生動。爲用戶營造出符合他當時行爲和感知的情景，轉移用戶的注意力或化解用戶因等待、失敗等場景引起的負面情緒。
b.文本設計
直擊心靈的文本設計也是實現與用戶情感交流的重要途徑。語言和圖形一樣，是傳達信息的重要手段，同時也是情緒的主要載體。富有人情味的文案可以幫助產品增添溫度。相較於冰冷且毫無人情味的界面說明，報錯信息，通知以及反饋，帶有情感，溫暖，貼心的文本設計，更能激發用戶好感，引導用戶行爲的同時，加深用戶對產品的認可和喜愛。
發佈文章成功提示
“你的每一次創作，都應該得到鼓勵。”在用戶辛苦碼字提交成功後，會有很強的成就感，我們在這個情緒點上讓情感化更昇華。
小島模塊的點贊、發帖成功的 toast 提示。
文案與emoji的趣味化，簡單有力。小島模塊增加互動率，隨機提示設計，每次點贊和發佈的提示不同，有的是誇獎、有的是暖心告白、有的是引導用戶繼續發帖。這樣設計更有驚喜感，更能激發了用戶的好奇心，並不斷操作嘗試。
c.人文關懷類提示
在簡書搜索「自殺」字眼時會彈出提示。
告訴用戶如果你或別人正在經受困難，甚至想自殺或者傷害自己。我們可以幫助你，你並不是孤單一個人。
一個好的產品不僅僅是以盈利爲目的，更要有社會責任感與人文關懷。
d.儀式感的節日提示
簡書週年紀念彩蛋
e.徽章設計，成就激勵
提升用戶的成就感與榮譽感等正面情緒。
徽章和等級功能一般屬於產品的成長/成就體系當中，其目的基本都是爲了激勵用戶去完成產品需要的行爲，這類功能，能夠使產品獲得更精準的用戶量化區分，提升產品使用頻次，停留時長等目標，完成用戶忠誠度、使用粘性、活躍度等指標。同時用戶可獲得一定的榮譽感、自信心、身份認同等。
徽章的魅力不在於徽章本身，而是它包含的價值和情感。
舊版徽章
舊版徽章的問題：徽章類型，紅、藍、綠等顏色邏輯關係比較混亂，圖形的運用亦如是：圓形與多邊形的圖形運用毫無章法。
改版時的思考：
如何區分不同徽章的不同功能？如何讓徽章系統更成體系？如何讓徽章系統更好延伸？如何加深用戶的“成就感”“榮譽感”等正面情緒？
以此問題爲基礎進行了視覺與交互升級。
改版新後徽章系統
1.身份認證類徽章：對應行爲成就（較難獲得，成就感高，以紅色區分）
2.活動類徽章：對應行爲獎勵（較易獲得且更新較快，成就感低，以藍色區分）
3.會員徽章：身份的象徵（以金屬色區分）
升級的徽章系統適應現下流行趨勢，用高飽和度的亮色和漸變色。因徽章大多展示的像素僅有10px-12px,所以不做過多複雜的圖形修飾，在小尺寸下也能看得清晰。
f.夜間模式升級
從下圖可以直觀得看出舊版簡書App夜間模式的可讀性略差，使用的文字顏色和背景顏色的對比較弱，導致界面文字不清晰，辨識度低。不適合在白天或者亮光環境下使用。且背景顏色背景偏灰，底色爲淺灰，這點會導致OLED屏幕深色不發光的特性無法很好的發揮，隱藏邊框的視覺效果無法顯示出來，還是十分影響觀感的。
需要設計更符合用戶使用習慣，讓用戶的眼睛更爲舒適的夜間模式。讓用戶在任何時間都可以輕鬆且舒適地瀏覽內容。
在夜晚不開燈的情況下，環境與手機屏幕亮度的明暗差距被進一步放大，亮度對比帶來視覺刺激也更加明顯。如果在漆黑的環境下看高亮的手機屏幕，對我們的健康有非常大的損害，不僅表現在對視力的傷害上面，視網膜和神經元容易受損，同時主流的研究項目還表明會這會抑制我們褪黑素的分泌造成失眠。
因此儘可能降低屏幕亮度，縮小屏幕顯示亮度與環境光的差距，是保證用戶夜間舒適閱讀和使用的重要前提。
下圖爲改版後效果圖：
如何更「高效」
a.制定視覺規範，提升工作效率
統一的視覺規範有助於保持視覺統一，且便於設計團協作。對開發工程師來說可以提高開發速度，相同的組件可複用，減少開發成本。甚至有些頁面不需要設計師重複出圖，便可直接複用控件開發。這樣更有利於設計師和開發的協作互通，有效地配合工作並且極大提高效率。
對用戶來說不光是視覺上更整體統一，學習成本也更低，因爲界面和功能的操作更統一。不會出現同一個功能運用不同交互操作的情況。
新版打造了更加便捷的組件規範，提高了協同工作效率。
b.制定交互自查表
面對分支流程和異常情況時，交互自查表可以幫助設計師提高處理效率。
大多數設計師都遇到過這個問題，特殊情況沒考慮清楚，總是遺漏一些特殊狀態等到開發問起來纔想到。這時就需要一份交互自查表，在設計評審之前，與交互自查表對照設計稿，考慮的細節是否完善，對特殊狀態的描述是否有遺漏。例如：空狀態如何展示？初始情況如何展示？極端情況如何展示？
下圖爲簡書交互自查表部分展示：
最終視覺界面呈現
改版總結
關於用戶層
總的來說還是收穫了不錯的正向反饋。
關於體驗層
視覺層面
新版新增了視覺規範，更統一。
數據反饋
改版後也持續關注核心頁面的各種轉化數據，在改版進行優化調整後，依然保持了數據的高轉化率，驗證了設計優化的方向是正確的。
例如小島模塊增加了小島情感化提示文案後，用戶的點贊率、評論率與發帖率均有上升。
後期還將持續關注數據變化，做產品提升與改進。
升級改版只是一小步，設計師應該有全局思維，如何做出更好的產品，如何量化設計價值，如何提高效率創造更大的價值等，這些都是需要設計師不斷思考的。設計從來不是拍腦袋就能決定的，都是有據可循的。
作爲簡書的第一次系統化的改版，希望此次改版只是一個開始，希望通過不斷的打磨優化，秉持初心，爲用戶提供更觸動人心、可依賴的寫作閱讀平臺。
在這裏還要感謝曾一起爲簡書產品奮鬥過的設計師。