“設計標準化流程”指南 by 酷家樂UED

Sponsor

隨著設計團隊規模擴大，人數快速增多，但每個人都帶著自己以往工作經驗和習慣，一些典型問題也相應顯現：上手就干、主觀設計、缺少方法、忽視跟進等。

所以我們撰寫了「UI標準設計流程」，希望能為UI設計師提供對于設計支撐思路的共識，讓設計更有價值：

從接到需求到上線后跟蹤，我們把流程拆分為五個節點：需求分析-交互設計-視覺設計-視覺規范-方案驗證。

當然，在設計流程中我們只表達不同流程中的行為目的及標準，相關方法論我們會配套一份「設計師成長指南」，不久之后再與大家分享。

1. 需求分析

我們在接到一個設計需求后，要做的第一步是進行分析并確定設計目標。

我們需要：了解背景、用戶和競品，能準確理解產品定位和需求目標，評估需求的合理性和準確性，并提供相應策略；甚至洞見機會點，通過設計對業務產生正向價值。

背景分析

目的：背景分析是為了讓我們在剛接觸產品的時候，去洞察表面背后的東西。通過背景分析，能幫助我們快速切入產品，并根據已有信息去制定準確并具有說服力的設計策略。

行為：我們需要了解：產品的定位及價值是什么，它的現狀如何，是否有既往的數據沉淀或經驗總結。

用戶分析

目的：對UI設計師而言，用戶分析是為了讓我們更好地了解產品，并擁有對整個產品的宏觀思路。通過用戶分析，能為我們的視覺設計提供方向，并為我們做出決策提供實際落點。

行為：我們通常需要了解：用戶畫像、用戶需求、用戶行為、用戶路徑等。

競品分析

目的：競品分析能夠讓我們獲得行業內的優秀經驗，減少我們的思維盲區，同時還為我們提供了一份可被量化的標準，使我們可以基于競品去反推現有產品。

行為：UI設計師可以從競品定位、主要功能、迭代動向、產品結構、頁面布局、交互動效、視覺設計、優劣勢對比這幾個維度去進行競品分析。

需求評估

目的：在了解以上的通用信息后，我們要對需求進行評估，去決定采用哪種方式、制定什么樣的策略。

行為：我們接到的需求，通?？梢苑譃槿N：全新產品類、產品改版類、功能新增或優化類。

對不同類型的需求，我們都可以用5個問題去評估：

1. 是否可被證偽？

2. 目標是否明確？

3. 投產比如何？

4. 是否有更優解法？

5. 是否有可預見風險？

基于以上問題，我們可以去協同交互、產品做相應調整和策略制定，甚至發現新的機會點并進行推動。

目標對齊

目的：設計為目標服務，所以我們要在設計開始前與需求方對齊目標，這也能為設計價值的佐證提供標準。

行為：設計目標通常有3種，我們可以從中去對需求目標轉譯：提升數據型、解決問題型、體驗優化型、創新項目型。針對不同目標我們可以去制定不同的設計策略，并對策略的落地進行數據監測與分析，進行方案校正。

2. 交互設計

在產品流程中，交互設計的作用在于，通過信息架構的組織去產出體驗流暢的界面原型。

我們需要：充分理解整體流程與交互原型，基于設計原則去發現可優化的部分；同時能平衡產品、設計與開發的效益最大化，并驅動產品的體驗提升。

設計原則

目的：設計原則能為我們提供一個行之有效的設計向導或提示。熟知各類設計原則，能使我們在設計支撐時，擁有更豐厚的專業度和更敏銳的洞察力。

行為：我們需要去了解市面常見的 Guildline 如 iOS、Material、UWP 等，以及一些常用原則如菲茲定律、格式塔理論等等。

流程梳理

目的：流程的再梳理，可以幫助我們在視覺設計前，快速地理解和診斷流程邏輯。

行為：在流程再梳理的過程中，我們需要注意以下4個問題：

1. 功能是否完整？

2. 鏈路是否流暢？

3. 步驟是否冗余？

4. 是否易于理解？

基于以上問題，我們可以用自身的專業儲備去推動流程的優化。

原型優化

目的：交互原型是需求內容的外在表現，通過原型優化，可以最大程度地避免視覺評審后的設計返工。

行為：在對交互原型優化的過程中，我們要重點注意以下4個問題：

1. 架構是否符合目標

2. 層級是否足夠精簡

3. 信息是否傳達準確

4. 狀態是否有所缺失

在視覺設計時，我們基于以上四點可以去同步優化原型，并根據經驗去尋求體驗和成本的最佳平衡。

3. 視覺設計

視覺設計是產品與用戶直接連接的媒介，優質而恰當的視覺設計，可以極大地提升產品吸引力。

我們需要：基于分析確定視覺方向、定義設計語言，輸出完整且高質量的視覺頁面。

設計情緒板

目的：設計情緒板可以為設計語言的構建提供可視化參考，也有助于我們前期快速與各方達成共識。

行為：我們通?；诜治?，去確定設計關鍵詞，并基于關鍵詞去衍生映射物、建立圖形情緒板，最終分析和確定設計方向。

設計語言

目的：設計語言是情緒板的具象表達，它將構建起用戶對產品的視覺感知。

行為：在明確設計方向后，我們就要基于情緒版去定義設計語言，主要包括主視覺、色彩、字體、圖標、圖形、動效等。

典型頁面

目的：典型頁面是設計語言在場景中直觀體現，這有助于我們制定設計規范，并為其他頁面的設計提供參考。

行為：我們通常需要設計首頁、頻道頁或其他具有示例作用的典型頁面，在設計的過程中我們還需要同步去規范間距、卡片、視覺變量、圖形應用等，以此為視覺規范夯實基礎。

4. 設計系統

在設計典型頁面的同時，其背后其實已經對應了一套設計規范和組件，而我們基于此去整理并沉淀出設計系統，能極大地提升統一性和迭代效率。

我們需要：制定完整、清晰的基礎規范，沉淀圖標庫、組件庫等，并持續優化和更新，形成可持續沿用的產品設計系統。

基礎規范

目的：基礎規范是設計語言的沉淀，也是視覺變量的基本粒子。它可以保證頁面的基本統一，同時我們可以基于不同業務快速地拓展其他主題。

行為：在我司，一份基礎規范的構成包括：色彩、字體、間距、布局、斷點、層級、圓角、透明度、陰影。

圖標庫

目的：圖標規范可以幫助其他成員快速、準確地進行圖標拓展，而沉淀的圖標庫也可以極大地提升產出效率。

行為：基于具體需要，我們可以設定多套圖標風格，規范其柵格、筆畫、圓角等，并將已有的圖標資產進行沉淀。同時我們也會去規范一些常見圖形并沉淀，如空態插畫、懸浮入口、徽章、商品等。

組件庫

目的：組件庫是對常用控件進行設計規范、開發、封裝的可被復用的集合，組件分而治之，可被自由組合，能保證設計品質、統一用戶體驗、提升產研效率。

行為：在我司，一套組件庫通常包括：通用、布局、導航、數據錄入、數據展示、反饋、其它。除通用原子組件外，我們也會對常用模塊進行梳理，沉淀業務組件庫。

5. 落地跟蹤

在設計完成之后，我們需要對設計方案進行評審、驗收及數據跟蹤，以保證設計方案的落地并跟進調整。

我們需要：運用合理策略以保證設計方案的高質量落地，對方案上線后的用戶反饋進行有效跟進，運用多種方式驗證目標，迭代產品。

設計評審

目的：設計評審通常包含了交互與視覺，其目的在于審查設計方案中的可用性問題。

行為：在我司，視覺評審即終評，我們需要在視覺稿中標注出所有交互邏輯，并對潛在問題有預判，能與各方確認目標、分桶與數據埋點；同時我們要對開發實現有預判，能與研發確認實現細節。

設計驗收

目的：設計驗收是為了確保需求滿足、體驗流暢，并且設計細節能高質量落地。

行為：視覺設計師主要驗收視覺細節的還原度，并且要在一定程度上對開發的適配、樣式解法有預知，減少二次驗收。同時需要保證驗收有沉淀，利于后續跟進。

數據驗證

目的：數據驗證除了分析分桶之外，也可以分析產品上線后的一些問題、并在迭代中修改。同時我們也可以總結設計經驗、提升未來設計的準確率。

行為：我們通?；谠O計策略，去對數據進行篩選與分析，以此衡量設計對于目標達成的增益度。對于有問題的，能反思并且修改；對于結果好的，能總結并且沉淀。

設計復盤

目的：設計復盤以結果為導向，我們可以通過復盤對設計策略的價值進行總結驗證，并去發現、優化流程中的不足之處。

行為：我們需要陳述設計目標和策略，對設計價值進行驗證，并能總結過程中的亮點與不足，制定后續計劃、沉淀相關經驗。

以上是酷家樂UED「UI標準設計流程」的所有內容，雖然它主要針對UI設計師而設，但相信它也能幫助到交互、體驗設計師們去撥開亂麻，更好地為業務目標服務。

作者 | 小波
來源 | 酷家樂用戶體驗設計（ID:KUX_KUJIALE）

贊助商鏈接

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