網易有道詞典APP如何做設計改版？（上）

Sponsor

接到改版這種「大工程」，可能每個設計師都有自己的方法和訣竅，也踩過不少坑。風格那么多該往哪些方向嘗試？設計時用了各種系統理論，最后評審大家卻在 battle 顏色好不好看？這些問題很讓人頭疼，長此以往也會消磨專業自信。我們需要找到盡可能快速、準確定義改版思路的方法，讓設計引起大家的共鳴。

經歷了網易有道詞典 7 / 8 / 9.0 改版、眾多設計項目，以及即將發布的有道翻譯官 4.0?APP改版，我逐漸發現這個過程是有些規律可循的。雖然愈加龐大的用戶量使設計的每一步都要謹慎明確，但這也為我們提供了深入探索、驗證的條件。這里和大家分享下我初步總結的改版六步法。

（有道詞典及翻譯官改版效果示例）

本文以我們在改版中的分析思路為主，一步步是如何推導的；具體產出效果可以看下面這篇，是我和團隊另兩位小伙伴之前產出的詞典 9.0 改版總結??~

改版，改什么？

通常有三個原因導致產品的改版：業務調整（產品戰略升級）、體驗優化（有數據支撐的迭代）、不可抗力（政策 / 老板偏好等）。每個類型，都有不同的針對策略，今天我們主要討論第一類業務主線的大型改版 —— 比如美團 “變黃”、滴滴首頁改版、躺平改版等等，其中都涉及 UI 風格、視覺、交互、品牌、等各類設計的配合。

設計從哪里開始？

一次成功的改版，從方案謀劃到成功面世，基本會經歷【產品定義】→【設計方案】→【開發+測試】→【市場推廣】流程，上下游涉及的環節眾多。作為設計師，我們通常拿到需求后開始調研、做方案、改稿、輸出給客戶端 / 前端，最后進行 debug 。但這些環節，都是偏重設計執行的。

如果希望更了解業務方的考量、目標，獲得更多人的理解和共鳴，建議避免把 “設計” 局限在設計環節本身，而是要從前期產品數據分析階段嘗試積極介入、開發角度了解技術可行性和成本、提供必要支持（保障還原度）、后期市場宣傳環節，從設計角度提供一些創新點和效果示意。

如果把全流程畫個軸，設計參與的環節是這樣的：

這就是設計中需要的「全局視角」。有點“卷”，但有助于項目快速推進，以及提升你和團隊的設計影響力。

此時想起小米從大師那重金 “請” 來的新 LOGO ，也許在其構思設計、說服各路評判者的時候，也會一定程度上從“全局戰略”、“可持續演繹價值”上考慮吧。畢竟看著第一代方方正正的小米手機到今天的小米電視、手表，這個 LOGO 還真讓我有了些畫面感。說不定未來的小米盒子、掃地機、軟件設計就會變成圓潤的品牌造型 ID 了？

設計師的「全局視角」，一定程度上避免我們和需求方過度糾結在“審美”問題上，嘗試從“價值”角度考量設計。

具體是哪幾個步驟？

我將改版的主流程歸納為 6 個步驟：【① 用戶多維分析】→【② 品牌基因定位】→【③ 設計總方向】→【④ 方案及優勢整合】→【⑤ 提案呈現】→【⑥ 調整輸出】。

其中前兩部分屬于前期的背景分析、鋪墊，有助于了解用戶群體“要什么”、我們自己“有什么”；在這之后，從總方向到分工實施，再到整合優勢，是“總分總”的結構，和我們上學時寫作文很相似（由于優勢整合環節需要依據時間而定，有時在提案前沒有時間和把握做這個步驟，因此暫不單獨作為一環）；提案步驟，是我們展示思路、收集意見的關鍵階段，有“半開放”、“故事化敘述”等呈現技巧；最后的定稿輸出，可以分為設計規范細化和具體需求延展兩部分，是落地設計改版的最終保障。

? ? ??邏輯思維、設計表現、溝通表達、耐心共情，在這個過程中從前至后，缺一不可。

由于這套流程的分析、舉例較多，這次先講解下前兩部分。

1 ?用戶多維分析

了解用戶特征、需求的重要意義無需多言，但如何真正找到有價值的點而非“套路化”分析，是設計師面臨的一個問題。很多作品分析中，大家傾向用繪制“體驗地圖”、“用戶畫像”等模式填充這一部分，甚至根據設計反推得到 —— 分析方法本身都是很好的，但只有當這些方法“為你所用”、靈活地為找到用戶特征這個目標服務時才有實際價值，而非因大家都放所以我要有。

為什么主張多維度地分析用戶？多數情況下，用戶對產品設計這一表現層面的偏好，是與其所處地域、社會環境共同形成的價值觀密切相關的，對于數億級龐大用戶量的產品，他們的共性特征更為重要。

例如，同是企業協作應用的釘釘和國外的 Slack、Monday、Toggl 官網的設計表現，釘釘偏重嚴謹中略帶清新的風格，讓用戶感受到其產品的專業性；而國外產品則偏好使用大面積色彩、Q 彈有趣的動效和插畫、甚至看起來不那么嚴肅的傾斜非襯線字體來打造輕松無壓力辦公的感受，這與不同社會環境下對于“專業感”、“工作態度”的理解也是直接相關的。設想兩個設計倒過來，也許都不再合適。同理的還有股票交易類、資訊類應用風格、布局的差距。

生活是多方面相互滲透的整體，用戶多維分析，目的則是在于找到“群體”特征，其所日常接觸的「衣、食、住、行、娛、社會背景、政策」等方面「共性」都是我們要研究和取樣的對象。

在文學分析中，這種包圍式的、由表及里的方法也被廣泛應用，即 “知人論世”（畢竟文、藝本就相通），漸入里層需求。

例如在探索有道詞典 9.0 中，我們通過各類直接調研、機構調研報告鎖定與詞典用戶群高度重合的 Z 時代高滿意度產品，涉及潮流服飾、影音娛樂、等各領域，競品調研范圍遠超出教育、工具單一品類?？吹酶?，我們也更確定地從中找出了用戶偏好的共性：例如嗶哩嗶哩、Twitch、云音樂等優秀產品深耕的同好聚合、高歸屬感社區；頗受好評的快手 “看見” 短片、云音樂熱評列車、機智暖心的小愛同學所共有的真實情感、emo走心特征；以及炙手可熱的得物、盲盒文化等體現出的個性專屬特征等等。

對上面的特征進行總結，以及加入對現實社會 Z 時代人群需求的洞察（例如雞娃社會背景下的渴望陪伴和理解、減負政策下的輕松伴學，“輕” 質氛圍等），便能很快得到改版應當具備的總體走向。

當然，相似的用戶群通過更加深入的探視，能夠得到不同的結論，例如有道詞典和有道翻譯官的用戶特征差異。

至此我們得到了提煉設計方向的兩個配方之一，多維度「用戶特征」。

2 ?品牌基因定位

知己知彼，百戰不殆。看到用戶要什么，還要清楚我們自己有什么、需要延續什么。

近幾年看到一些產品在改版中運用各種新潮強視覺的設計風格，C4D 好看就拋棄扁平用 C4D、玻璃擬物新潮要馬上換上這種圖標、新版使用一個顛覆性的配色抓住用戶眼球，更新版本之后基本不認得了，好像要對過去的自己做一個徹底了斷。個人看來，這樣刻意顛覆前代、略顯炫技的設計方式并不妥當。尤其對于已經積累數代品牌經驗和影響力的大中型產品，如非整體業務上的考慮，每一次草率的嘗試都可能流失用戶對品牌長期建立的的信任和認知直覺。

在有道詞典、翻譯官改版中，我們也在考慮這個問題。9.0 升級的業務出發點是打造 “泛學習平臺”，提供查詞工具外更多服務內容（如建立學習社區、視頻圈、簽到體系等）。怎樣能在大量業務變化中接續詞典前代累積的權威、專業特征，同時擁有更強的 “網易”、“有道” 品牌感呢？

同樣作為年輕用戶群下老品牌升級的星巴克，給了我們一些啟發。

在近十年，星巴克開辟了線下第三空間、星專送、啡快等各種新型業務，也嘗試打造貓爪杯、星冰粽、品牌保溫杯等網紅周邊延展品，業務逐漸趨向年輕化、與同行的差異化。其品牌標識也從最初的 “星巴克咖啡 + 人魚造型” 到 “突出面部的人魚造型”，省略了文字，但始終延續著自己 “海上塞壬” 的冒險精神和迷人的品牌基因，無論何時 —— 他始終是他。

可以看到，星巴克的升級策略是擴展外延 + 延續內核，讓升級承上啟下。

此時思考有道詞典，我們的內核是十數年積累下的權威內容和專業詞典數據，這是用戶選擇的根本，需重點傳承和謹慎優化（升級查詞體驗和視覺風格）；同時，在拓展品牌外延的角度，有道詞典從 7.0 設計的深沉嚴肅，到 8.0 的輕松明快，再到本次的 9.0，我們將其與網易系產品獨具的 「匠心」、「文化態度」相結合 —— 通過嘗試給設計加入更多文化內涵，找到突破純工具屬性的方法。

一些閃光點，例如網易蝸牛讀書的 “包書皮”、讀書等級引用詩句等設計，都極好地滲透著品牌文化感，這種質感是 9.0 需要追尋的設計方向，它與有道詞典的外語學習文化碰撞，一定會產生很多火花！

（靈感參考：網易蝸牛讀書“文化態度”細節）

研究階段確定了這樣的品牌設計方向，后續的設計都變得更有頭緒（以便下一步的視覺表現），而不再是為了 “新” 而散亂地嘗試各種視覺上流行的設計樣式，聚焦于做屬于自己品牌的設計。

一點體會是，團隊規模有限情況下，“產品設計師” 需要擔負起更多數據、體驗、視覺、品牌設計的角色，以及執行，并不只關注 UI 一項。大型團隊，這種全棧設計的思維也十分重要，但落地層面上可能會有專人負責。

至此所做一切，都是在盡力避免在設計中我突然興起的 “自嗨”、盲目自信，和閉門造車的郁悶為難（理郁者苦貧，辭溺者傷亂 —— 《文心雕龍》）。有理有據地進行、讓技術風格趨勢都成為我的設計手段，才是改版穩而不慢的關鍵。

到這里我們得到了另一配方「品牌基因」！

在下個階段，我們將把兩個配方合并在一起，得出設計的方向（把調研成果翻譯成可延展的設計語言），以及探討一些落地、設計提案時實用高效的設計手段。

作者：Potti_跑題
來源：站酷（zcool.com.cn/article/ZMTMwMTYxMg==.html）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。