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

Sponsor

在「改版6步法」的前兩部分《網易有道詞典APP如何做設計改版？（上）》，我們通過分析已經得到了核心的「用戶特征」和「品牌基因」。如何將兩個要素適當結合并翻譯成可操作的設計語言、以及最終傳遞給合作方，是后續步驟的重點。（6步法的流程圖）

3??定位設計總方向

用戶特征、品牌基因都是相對抽象的描述，而且常會存在一定沖突。此時我們需要用一些具象化的手段（如情緒板收集、品牌形象速寫等方式）將這些描述在視覺上被表現出來，取兩部分交匯點作為后續設計的方向。

在有道詞典的描述 “具象化” 過程中，我們選擇了篩選情緒板方式，將符合團隊成員對「個性、專業」兩個核心關鍵詞理解的圖像羅列并逐步尋找其中共性，如表現「個性」這一概念時情緒版中高頻出現的色彩、對比、動感、趣味元素；以及詮釋「專業」概念時高頻可見的文化符號、理性/現實映射等。

此外，在具象化過程中我們還為有道詞典構想了一個理想「人設」—— 歐陽娜娜，同時具有潮流個性與古典特征（可能是方案溝通后某些潛移默化的影響或機緣巧合，詞典9.0二期代言人真的選擇了歐陽娜娜??…）。這些圖像共性形成的新關鍵詞，讓我們直觀地看到了后續設計中的可能性。

通過上面的過程，我們將最初有限的用戶數據、品牌資料轉化為了有道詞典關鍵詞「個性、專業」，并繼續拓展為了「歐美文化感、新銳活力感、親切趣味性」三個具體的設計關鍵詞（共性）；而后繼續翻譯為指導設計的具體解讀（如側重文化符號的使用、強化對比、動態暗示等）。這幾個主要方向在后續復盤中雖有微調，但奠定了9.0設計的基礎，也是后續設計自查的重要標準，成為了此次改版的核心環節。

有時在確定設計關鍵詞時，我們可能僅拆分到“個性、專業”這一層級來指導設計，但后續執行方案時會比較寬泛，難以在設計師腦海中浮現獨特可感的畫面。個人認為當嘗試理解偏抽象的概念時，不要閉門造車苦思冥想，而用一些更圖像化的東西拓展思路，會更快地找到方向。

有了能夠提供獨特畫面感的設計關鍵詞，下一步我們就可以從UI設計的「形、色、字、構、質、動」六個主要維度進行進一步拆分（按明確的方向找競品、收集細化的情緒版），確定具體的設計風格走向，為參與項目的設計師在方案設計前提供更加明確、聚焦的風格共識。

請注意，這一步指導設計的這些「方向」，一定是具體、可分工的，讓大家在這個“風格庫”里選擇自己要做的方案，而不需要繼續去猜測。

當然，關鍵詞側重不同，可選風格庫也隨之改變 —— 有道翻譯官4.0比有道詞典更側重對K12用戶的治愈與引導，因此在對應關鍵詞下衍生出的「色彩」、「質感」、「動態」都逐漸集中在另一種風格趨向附近。

設計總方向的確定，能夠保障項目設計周期緊張的情況下避免出現風格稿每個人都完全不一樣難以判斷和抉擇的情況。（畢竟前提不一致的設計和比稿是沒有評判標準的…誰也不好說服誰）

YAY! 到這里我們更加具體地擴展出了風格庫，參與改版的設計師們也有了一些比較清晰的畫面，馬上動工！

4 ?設計方案，開工！

有了明確的方向，就可以愉快地分工啦~

在這一步就看我們天賦異稟的設計師們的功力和腦洞了！每人都從風格庫中找到 1-2 個自己最感興趣的「切入點」進行設計發散 —— 有些嘗試側重質感+色彩，以動效輔助（比重例如5:3:2）；有的側重探索有記憶點的圖形+結構，色彩輔助（比重為6:3:1）；另外一些側重字體等嘗試（定義相應的風格占比）。用 9.0 中「新世界 · 大不同」主題方案作例子看下~

（我選擇的切入點）

（一些過程稿）

就像撥動滑塊，每種風格比例的變化都會帶來耳目一新的方案 —— 但大家的設計發散都擁有一致的前提和關鍵詞，整體往一個大方向嘗試。

我們鼓勵設計師在自己的方案中腦洞大開，除了共同定義的基本頁面外有些自己的「彩蛋點」和側重，思考在流程中能有哪些出彩的點（比如分享頁、文章或是某些情感細節），提前呈現，也是幫助看客青睞自己的方案~

比如，從UI衍生到周邊、貼紙等等…

翻譯官4.0中，由于風格嘗試階段時間非常有限，我們調整策略，將重點集中于「交互結構」和易用性設計的嘗試，視覺風格放在相對輔助地位，選取大家廣泛認可的輕漸變質感進行重點嘗試。

（一種方案??）

（另一種方案??）

（另另一種方案??）

這里你可能想問：為什么交互結構每個方案不一樣呢？這不應該已經確定再進入UI設計么？

是的，我們暫時沒有交互??…… 從需求原型到設計提案，全靠各位體驗/界面設計能力和必備的順暢溝通。但這也很好，我們有了更多的思考機會，逐步轉變為「產品設計師」，而非僅限于視覺/UI或是體驗一環。

這里對「設計合作」有一些小提示。

① 在開始動手前要先定義統一的試驗頁面，但不一定是一級「Tab」，需要根據產品的核心流程有側重地選擇。

② 設計不是純藝術，是「信息、體驗、藝術」三者的綜合。因此，在我們的方案中需要規劃這三者的占比。對于有些產品能懂可用、清晰無干擾是最重要的，那就不要過度藻飾；有些產品特定場景下使用，體驗為王，就要怎么好用高效怎么來；有些是走文藝、情感牌的，那么設計藝術角度就要提高些占比。

不區分好壞，只是這三個維度能夠產出截然不同的設計。

畢竟有人說：

也有人認為：

③ 我們設計之前經常會上Dribbble / Behance看看，但究竟那些漂亮的新風格、酷炫的質感適合我的產品么？用上之后對于「信息傳達」和「可用性」并沒有什么幫助，單純是為了設計風格好看呢？設計改版的目的，時時考慮。

（流行風格之外，探索能夠“專屬于有道詞典”的設計細節）

④ 設計周期雖然有限，但是「細節」不能忽略：依據你的設計思路，在一些重點流程或者視覺、情感細節中著重刻畫一下，這些栩栩如生的細節能幫助你的方案更有效地擊中看客。當然，如果你的產品重點在于體驗，那么在體驗、動效展示上多花些功夫。

當你已經成功地做出了設計稿，如何判斷已經達到標準，可以包裝成提案了？推薦參考UI設計自查表。

如果時間有余，推薦各位在內部溝通之后把大家的方案融合成一個最推薦的設計稿（濃縮的都是精華）。當然，這一步也可以在提案討論之后再做，根據項目難度和時間排期而定。

當UI稿終于通過自查和內部確認，在下一步我們就要考慮如何呈現給需求方了?！柑岚讣记伞故悄芊褡罱K獲得全戰線認可的重要一步~

5 ?提案呈現技巧

好的設計師，需要講好自己的設計。

如何讓大家在短時間內get到你的用心、把精華展示出來是值得探索的。我把這種思考稱為「提案意識」，就像我們在做外包項目的時候，設計完成后需要闡述創作構思、標識寓意、以及做些效果圖來豐滿使用場景。UI設計與此同理，如果僅是幾個界面而沒有足夠引導，看客很容易就會按照自己的好惡評論。

提案思路上，建議大家圍繞最初定義的設計關鍵詞和總方向來展開，按項目改版初衷 → 推導過程 → 設計成果的順序，由淺入深，帶領每位觀者感受這次設計探索的過程。從改版價值角度出發，也就和團隊（產品/市場/開發/測試）所有人站在了一起，避免一上來直接討論視覺「好看」與否的主觀傾向。

比如有道詞典9.0提案，是這樣講述的：

適當的、半開放式的引導，能讓方案更深入地被了解；但要避免強勢灌輸和干預判斷，不利于建立互信。

這里有一些我認為比較實用的「提案設計」小方法：

①?讓方案有神：給每個方案找一個「主題」，也就是對設計切入點的描述。就像一句廣告詞，它能便于觀眾記住你的方案，而且方案的講述也可以依據主題來拆分，讓方案不再是一個個界面而是有神的整體。

②?延展邊界：之前提到設計階段鼓勵大家開一些腦洞（后續的市場運營點、跨界可能性、周邊構想等等），都能加強你的方案與相關同事的共鳴，讓你的設計思路延續下去。

③?故事化敘述：嘗試在展開方案的時候把為什么這樣設計、我想達到什么意圖用生動有趣、富有情緒的語言講出來。比如翻譯官這個筆畫線的元素，是在用自由筆觸 · 自在質感的方式突出0壓力治愈的點；詞典創新的 」符號，有自己的名字，叫做靈魂小弧線，是為了讓靜態的元素像漫畫里抖動線一樣富有動感?！笐蚨唷沟拿枋?，更能和大家的情緒有些互動。

總之這些敘述方式還是為了一點，避免直接、過度糾結在「美丑」主觀維度上。用一個詞來說叫做「價值導向」。

當然，如果你試過了各種引導，但需求方還是油鹽不進，那就只能換方式接待了。

6 ?最終章！調整輸出

當你的設計稿歷經層層考量進入量產（功能延展）階段，這里主要有兩方面需要輸出的內容：① 品牌/UI的延展落地 ?② 設計語言的細化規范。每部分具體要做的事，基本在下面列出（加重的是PO-P1優先級內容）

例如，主界面優化定稿后一些相關狀態的延展，和其他UI功能設計細節的輸出：

空狀態、運營視覺等等配套內容，也圍繞「設計關鍵詞」延展設計：

以及IP形象的嘗試（沒有專門品牌設計團隊的情況下）：

n.0大版本一般需要換新視頻，反復打磨腳本分鏡，和視頻設計師溝通效果：

應用市場截圖、代言人活動等等物料，與市場溝通好逐一輸出：

品牌這塊，如果像有道詞典需要在大版本更新LOGO和字體，那么在設計完字體之后，盡管時間有限也要抽空出一個VI規范手冊，新版本會有很多合作要用到：

有的時候LOGO更新涉及IP形象設計（例如有道翻譯官4.0），也在風格確認階段后進行嘗試和延展，并以1-3輪提案形式單獨進行，給設計多爭取一些時間保障：

設計語言的細化規范，還涉及與開發密切相關的控件庫更新：

有些備受矚目的「大版本」，建議從設計角度出一些物料宣傳品，比如朋友圈長圖、官方解讀文章等等（放在最后階段進行，發版后釋出）。整理這些材料、匯成文字的時候，也是我們再度審視設計、復盤改版是否達到「初心」的一次機會。

回顧&延展

到這里設計改版6步法已經逐步進行了解讀，再來回顧一下這個流程吧~

其實很像小時候寫作文「總分總」的結構，題目里先給一段材料，開頭構思出總起部分，然后分幾個段落詮釋提出的觀點，最后結尾扣題，再來些點睛升華。當然，前提是有感而發 ——?湊字數套結構，到底還是少了些共鳴。

真實的用戶、品牌、業務價值作為設計基點，延展設計行為，也就是所謂「價值導向」，無論小型APP或是體量龐大的產品，也許都需要這個部分，照亮同一個方向。

當這套價值導向的設計方法，從改版延伸到后續版本的具體功能設計中，也就逐漸形成了完整的設計系統，循環上升。（具體項目有具體項目的分析方法和難點，后續有機會分享一下~ 但都要建立在最初的方向上，在后續設計中持續體現）

上線后靜候佳音，持續關注反饋~ 如果功課已經做足，數據和滿意度都會給你正向的支持。而非個例的差評和建議，也是我們繼續優化的方向。

改版是動用全項目組人力的一件大事，對于上億用戶量的產品更是這樣?？赡茈S著項目擴大，有些新的前后端開發、產品、測試、運營、市場我從前都從未見過，但大型的改版，讓我們有了更多的交匯點（甚至有機會接觸到算法開發、商務團隊） ——?作為設計師，連接了最初的構想與最后的呈現，每個步驟皆需涉足，成為了整個項目的粘合劑，也擘畫了更加有情可感的遠景。

好的改版，讓經歷過種種交集的團隊關系更加密切，了解我們做的所有事是為了什么。

尾聲：最初的想法

兩年前詞典8.0改版的時候，團隊投入了7-8個人來做這件事，從初版方案到定稿持續了2個多月時間。其中產生了無數飛機稿，總覺得方向差點意思?? —— 不是表現形式過頭就是有些“普通”……

（8.0各種各樣的方案）

逐漸我們都覺得“比稿法”不是個長久之計，需要有些突破了。因此，我們在試驗中總結出了「改版6步法」，并嘗試在不同項目中進行復用。

實測證明，方法加持下的設計效率明顯提升。摸索階段，詞典9.0改版方案確定花費了4位設計師4.5周的時間；復用到后續翻譯官4.0改版，減少到2位主要設計師2周時間；有道優課及國際詞典等對這一改版方法進行了思路借鑒；諸多產品在新版上線后都取得了各渠道用戶的積極反饋，以及設計上的認可。

投入產出的變化也從側面證明著方法對提效的正向作用。

寫到這兒，內容基本已經結束了。但方法不斷總結，項目總在更新，最近工作中又有許多關于產品新經驗（如數據思維、詞典社區、視頻模塊、搜索優化等）、工作流程優化的想法，逐漸與大家分享，也是對思考深度的積累。

希望有道的產品，每個版本都能讓使用者感受到它的進步和用心??。這也是最初我選擇它的理由吧。

期待下次再見 ????

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

贊助商鏈接

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