移動端產品再設計經驗分享

最近有打算嘗試對現有產品進行重新設計，來看看來自 Jingxi Li 的方法論羅。

設立再設計目標

在對已有產品再設計之前，最好能跟利益相關各方進行討論，以了解各方的考慮和需求。包括產品經理，設計師，開發人員等。但如果你不是在這個團隊裡面工作，那你也可以在網上搜集一些該產品相關資料，對產品有更多了解。

為發行做計劃

一開始，我們發現需要為我們的產品 sing！做導航欄的再設計，從而提高產品功能的可發現性。也就是說，從傳統的工業漢堡式導航到底部導航欄。這是個巨大的改變，所以我們只能回到畫板上重新考慮：什麼是最主要的功能，怎樣才是合理的、功能性的、層級化的導航欄。最首要的問題是，我們是應該為導航欄單獨重新設計，還是融入再設計這個過程中。一般來說，在引入新的功能的時候，我們的流程是這樣的：

1. 建立假設
2. 設計和創建新功能
3. 給用戶展示新功能
4. 衡量和分析新功能的表現
5. 評估該功能是否達到了預期的假設
6. 驗證最初的假設

這個過程可以讓我們從用戶角度了解每一個步驟質的影響。

選擇平台 鎖定資源

主要的決定做好之後，下一個問題是在安卓還是 iOS 平台發布的問題，我們面臨的條件是：1）所有的改動都有很高風險；

2）我們沒有資源去支撐一個 A/B testing 來驗證哪個更好；

3） 我們的設計和開發資源都很有限。

在這個情況下，考慮到我們安卓版本的產品比 iOS 產品的功能更少，留存率也更差，我們決定在安卓版本進行這個更新實驗。這樣就可以鎖定我們有限的資源（1個設計 4個開發）到安卓版本。這樣風險也更小。

開始設計吧！

在再設計項目開始之前，需要留出足夠的時間研究設計方案，整個過程應該是簡潔且敏捷式的。再設計包含兩個步驟：

• 建立一個新的導航原型，但不改變現有的視覺設計
• 創建新的設計來推出新的 UX/UI 原則，包括新的色彩，字體和圖標。

第二步尤其需要研究來得出什麼是產品的主色調，什麼新字體最合適，怎樣的設計原則能適配兩個平台。

進行新的導航設計

1. 找到適合你產品目標的導航結構

主要問題在於，需要解決不同尺寸上顯示的問題，包括筆記本，台式，手機。而手機的各種不同尺寸又讓問題更複雜。在 2014年 的時候，我們發現市面上有三種基礎標準：

1）iOS 標準（主屏幕導航）

2）安卓標準 （漢堡式導航）

3）個性化的、按照開發者需求來

我們發現導航的設計不應該按照屏幕尺寸來決定，而應該看產品要滿足什麼需要。比如像創造型的應用，比如 instagram，就適合主屏幕導航。而且如果一個產品是瀏覽型的，比如郵件應用或是新聞類應用，那麼用漢堡式導航就是不錯的選擇。

2. 圍繞主題組織功能

我們的產品是一款用音樂連接用戶的應用，也就是說，創建音樂和社交是兩個核心主題，其他功能應該圍繞該核心主題展開。

按照這個思路設計導航，我們把所有的功能重新排列了一遍。適應「音樂 」功能的，就歸入「音樂 」類，適應「社交 」的，就歸入「社交 」類，而像「註冊 」這種兩者都不適合的功能，我們創建了一個「其他 」。而在分類內部，我們根據用戶調研數據和產品目標等把這些功能進行排列，來最大化用戶體驗。

3. 為導航建立清晰的層級結構

傳統的導航設計有三種類型：全局導航，局部導航以及情景導航。我們根據以前的經驗挑選出了五個使用頻率最高的功能組成了一個全局導航，剩下的則成為了局部導航的一部分。最後，由於手機屏幕沒法讓用戶像在電腦上一樣從一個屏幕跳到另一個屏幕，對於疊加屏幕的設計（什麼時候疊加、什麼時候清理）就應該有個清晰的規則，以防給用戶造成困惑。

這樣做的結果是，我們安卓新版的產品獲得了更好的用戶留存率。

開始產品再設計

設計策略

手機再設計平台的選擇很重要。兩個平台都有自己的設計規範。有些公司喜歡先設計好 iOS 的產品 UI 風格，再把 iOS 設計風格遷移到安卓平台；有些公司則喜歡直接用兩種語言分別設計兩個平台的產品，這樣可以分別符合 iOS 的扁平化設計和安卓的材料設計。

對於這兩種做法，都是有利有弊。第一種做法節約時間，第二種做法用戶體驗更好。

而我們最終打算自己創建一個融合材料設計和扁平化設計的設計規範來做一個折中方案。

1. 找到一個代表品牌調性的主色調

我們首先考慮了未來的用戶會是誰。因為我們的產品是一款有趣的社區應用，強調用戶熱情好客的屬性，並想要吸引樂觀、自信的用戶，所以我們參考了顏色情緒板來選擇了一個主色調。

2. 從主色出發，創建一個品牌色板

創建色板有很多方法，我們採用的方法是混合兩種顏色來取色：從主色出發到白色混合，以及從主色出發到黑色。然後在這兩個區域之間，我們區分了 8 個色度，這樣我們就一共有了包含 19 種顏色的品牌色板。這樣，我們就可以從中選出強調色，字體色，圖標色，分割色和背景色了。

對於字體顏色，一般用黑白是最保險的。但是因為我們的產品是面向具有創造力的用戶，只有黑白可能有點單調了。所以在基於好幾輪的研究和探索的基礎上，我們選出了幾款標題，主體內容和 CTA 的字體顏色。

另外，背景色，分割色和導航色都要比字體顏色淺，才能突出字體，增強可讀性。

3. 建立一個設計原則和規範

有一個統一的指導原則才可以讓整體設計風格統一，同時還可以節省開發很多時間。

其他一些注意事項

• 再設計過程中與開發保持溝通協作
• 設計新的屏幕來給出全新的體驗
• 對設計進行質量監管，以保證最終開發出來的產品與設計最大可能保持一致

原文參考：Yeah, redesign

個人專欄：盒子以外 全是設計、產品和科技。

歡迎關註：知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章。

推薦閱讀：