隨著設(shè)計團隊規(guī)模擴大，人數(shù)快速增多，但每個人都帶著自己以往工作經(jīng)驗和習慣，一些典型問題也相應(yīng)顯現(xiàn)：上手就干、主觀設(shè)計、缺少方法、忽視跟進等等。所以我們撰寫了「UI標準設(shè)計流程」，希望能為UI設(shè)計師提供對于設(shè)計支撐思路的共識，讓設(shè)計更有價值。
從接到需求到上線后跟蹤，我們把流程拆分為五個節(jié)點：需求分析-交互設(shè)計-視覺設(shè)計-視覺規(guī)范-方案驗證。
當然，在設(shè)計流程中我們只表達不同流程中的行為目的及標準，相關(guān)方法論我們會配套一份「設(shè)計師成長指南」，不久之后再與大家分享。
1.需求分析
我們在接到一個設(shè)計需求后，要做的第一步是進行分析并確定設(shè)計目標。
我們需要：了解背景、用戶和競品，能準確理解產(chǎn)品定位和需求目標，評估需求的合理性和準確性，并提供相應(yīng)策略；甚至洞見機會點，通過設(shè)計對業(yè)務(wù)產(chǎn)生正向價值。
背景分析
目的：背景分析是為了讓我們在剛接觸產(chǎn)品的時候，去洞察表面背后的東西。通過背景分析，能幫助我們快速切入產(chǎn)品，并根據(jù)已有信息去制定準確并具有說服力的設(shè)計策略。
行為：我們需要了解：產(chǎn)品的定位及價值是什么，它的現(xiàn)狀如何，是否有既往的數(shù)據(jù)沉淀或經(jīng)驗總結(jié)。
用戶分析
目的：對UI設(shè)計師而言，用戶分析是為了讓我們更好地了解產(chǎn)品，并擁有對整個產(chǎn)品的宏觀思路。通過用戶分析，能為我們的視覺設(shè)計提供方向，并為我們做出決策提供實際落點。
行為：我們通常需要了解：用戶畫像、用戶需求、用戶行為、用戶路徑等。
競品分析
目的：競品分析能夠讓我們獲得行業(yè)內(nèi)的優(yōu)秀經(jīng)驗，減少我們的思維盲區(qū)，同時還為我們提供了一份可被量化的標準，使我們可以基于競品去反推現(xiàn)有產(chǎn)品。
行為：UI設(shè)計師可以從競品定位、主要功能、迭代動向、產(chǎn)品結(jié)構(gòu)、頁面布局、交互動效、視覺設(shè)計、優(yōu)劣勢對比這幾個維度去進行競品分析。
需求評估
目的：在了解以上的通用信息后，我們要對需求進行評估，去決定采用哪種方式、制定什么樣的策略。
行為：我們接到的需求，通常可以分為三種：全新產(chǎn)品類、產(chǎn)品改版類、功能新增或優(yōu)化類。
對不同類型的需求，我們都可以用5個問題去評估：
- 是否可被證偽？
- 目標是否明確？
- 投產(chǎn)比如何？
- 是否有更優(yōu)解法？
- 是否有可預見風險？
基于以上問題，我們可以去協(xié)同交互、產(chǎn)品做相應(yīng)調(diào)整和策略制定，甚至發(fā)現(xiàn)新的機會點并進行推動。
目標對齊
目的：設(shè)計為目標服務(wù)，所以我們要在設(shè)計開始前與需求方對齊目標，這也能為設(shè)計價值的佐證提供標準。
行為：設(shè)計目標通常有3種，我們可以從中去對需求目標轉(zhuǎn)譯：提升數(shù)據(jù)型、解決問題型、體驗優(yōu)化型、創(chuàng)新項目型。針對不同目標我們可以去制定不同的設(shè)計策略，并對策略的落地進行數(shù)據(jù)監(jiān)測與分析，進行方案校正。
2.交互設(shè)計
在產(chǎn)品流程中，交互設(shè)計的作用在于，通過信息架構(gòu)的組織去產(chǎn)出體驗流暢的界面原型。
我們需要：充分理解整體流程與交互原型，基于設(shè)計原則去發(fā)現(xiàn)可優(yōu)化的部分；同時能平衡產(chǎn)品、設(shè)計與開發(fā)的效益最大化，并驅(qū)動產(chǎn)品的體驗提升。
設(shè)計原則
目的：設(shè)計原則能為我們提供一個行之有效的設(shè)計向?qū)Щ蛱崾?。熟知各類設(shè)計原則，能使我們在設(shè)計支撐時，擁有更豐厚的專業(yè)度和更敏銳的洞察力。
行為：我們需要去了解市面常見的Guildline如iOS、Material、UWP等，以及一些常用原則如菲茲定律、格式塔理論等等。
流程梳理
目的：流程的再梳理，可以幫助我們在視覺設(shè)計前，快速地理解和診斷流程邏輯。
行為：在流程再梳理的過程中，我們需要注意以下4個問題：
- 功能是否完整？
- 鏈路是否流暢？
- 步驟是否冗余？
- 是否易于理解？
基于以上問題，我們可以用自身的專業(yè)儲備去推動流程的優(yōu)化。
原型優(yōu)化
目的：交互原型是需求內(nèi)容的外在表現(xiàn)，通過原型優(yōu)化，可以最大程度地避免視覺評審后的設(shè)計返工。
行為：在對交互原型優(yōu)化的過程中，我們要重點注意以下4個問題：
- 架構(gòu)是否符合目標
- 層級是否足夠精簡
- 信息是否傳達準確
- 狀態(tài)是否有所缺失
在視覺設(shè)計時，我們基于以上四點可以去同步優(yōu)化原型，并根據(jù)經(jīng)驗去尋求體驗和成本的最佳平衡。
3.視覺設(shè)計
視覺設(shè)計是產(chǎn)品與用戶直接連接的媒介，優(yōu)質(zhì)而恰當?shù)囊曈X設(shè)計，可以極大地提升產(chǎn)品吸引力。
我們需要：基于分析確定視覺方向、定義設(shè)計語言，輸出完整且高質(zhì)量的視覺頁面。
設(shè)計情緒板
目的：設(shè)計情緒板可以為設(shè)計語言的構(gòu)建提供可視化參考，也有助于我們前期快速與各方達成共識。
行為：我們通?；诜治?，去確定設(shè)計關(guān)鍵詞，并基于關(guān)鍵詞去衍生映射物、建立圖形情緒板，最終分析和確定設(shè)計方向。
設(shè)計語言
目的：設(shè)計語言是情緒板的具象表達，它將構(gòu)建起用戶對產(chǎn)品的視覺感知。
行為：在明確設(shè)計方向后，我們就要基于情緒版去定義設(shè)計語言，主要包括主視覺、色彩、字體、圖標、圖形、動效等。
典型頁面
目的：典型頁面是設(shè)計語言在場景中直觀體現(xiàn)，這有助于我們制定設(shè)計規(guī)范，并為其他頁面的設(shè)計提供參考。
行為：我們通常需要設(shè)計首頁、頻道頁或其他具有示例作用的典型頁面，在設(shè)計的過程中我們還需要同步去規(guī)范間距、卡片、視覺變量、圖形應(yīng)用等，以此為視覺規(guī)范夯實基礎(chǔ)。
4.設(shè)計系統(tǒng)
在設(shè)計典型頁面的同時，其背后其實已經(jīng)對應(yīng)了一套設(shè)計規(guī)范和組件，而我們基于此去整理并沉淀出設(shè)計系統(tǒng)，能極大地提升統(tǒng)一性和迭代效率。
我們需要：制定完整、清晰的基礎(chǔ)規(guī)范，沉淀圖標庫、組件庫等，并持續(xù)優(yōu)化和更新，形成可持續(xù)沿用的產(chǎn)品設(shè)計系統(tǒng)。
基礎(chǔ)規(guī)范
目的：基礎(chǔ)規(guī)范是設(shè)計語言的沉淀，也是視覺變量的基本粒子。它可以保證頁面的基本統(tǒng)一，同時我們可以基于不同業(yè)務(wù)快速地拓展其他主題。
行為：在我司，一份基礎(chǔ)規(guī)范的構(gòu)成包括：色彩、字體、間距、布局、斷點、層級、圓角、透明度、陰影。
圖標庫
目的：圖標規(guī)范可以幫助其他成員快速、準確地進行圖標拓展，而沉淀的圖標庫也可以極大地提升產(chǎn)出效率。
行為：基于具體需要，我們可以設(shè)定多套圖標風格，規(guī)范其柵格、筆畫、圓角等，并將已有的圖標資產(chǎn)進行沉淀。同時我們也會去規(guī)范一些常見圖形并沉淀，如空態(tài)插畫、懸浮入口、徽章、商品等。
組件庫
目的：組件庫是對常用控件進行設(shè)計規(guī)范、開發(fā)、封裝的可被復用的集合，組件分而治之，可被自由組合，能保證設(shè)計品質(zhì)、統(tǒng)一用戶體驗、提升產(chǎn)研效率。
行為：在我司，一套組件庫通常包括：通用、布局、導航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、其它。除通用原子組件外，我們也會對常用模塊進行梳理，沉淀業(yè)務(wù)組件庫。
5.落地跟蹤
在設(shè)計完成之后，我們需要對設(shè)計方案進行評審、驗收及數(shù)據(jù)跟蹤，以保證設(shè)計方案的落地并跟進調(diào)整。
我們需要：運用合理策略以保證設(shè)計方案的高質(zhì)量落地，對方案上線后的用戶反饋進行有效跟進，運用多種方式驗證目標，迭代產(chǎn)品。
設(shè)計評審
目的：設(shè)計評審通常包含了交互與視覺，其目的在于審查設(shè)計方案中的可用性問題。
行為：在我司，視覺評審即終評，我們需要在視覺稿中標注出所有交互邏輯，并對潛在問題有預判，能與各方確認目標、分桶與數(shù)據(jù)埋點；同時我們要對開發(fā)實現(xiàn)有預判，能與研發(fā)確認實現(xiàn)細節(jié)。
設(shè)計驗收
目的：設(shè)計驗收是為了確保需求滿足、體驗流暢，并且設(shè)計細節(jié)能高質(zhì)量落地。
行為：視覺設(shè)計師主要驗收視覺細節(jié)的還原度，并且要在一定程度上對開發(fā)的適配、樣式解法有預知，減少二次驗收。同時需要保證驗收有沉淀，利于后續(xù)跟進。
數(shù)據(jù)驗證
目的：數(shù)據(jù)驗證除了分析分桶之外，也可以分析產(chǎn)品上線后的一些問題、并在迭代中修改。同時我們也可以總結(jié)設(shè)計經(jīng)驗、提升未來設(shè)計的準確率。
行為：我們通?；谠O(shè)計策略，去對數(shù)據(jù)進行篩選與分析，以此衡量設(shè)計對于目標達成的增益度。對于有問題的，能反思并且修改；對于結(jié)果好的，能總結(jié)并且沉淀。
設(shè)計復盤
目的：設(shè)計復盤以結(jié)果為導向，我們可以通過復盤對設(shè)計策略的價值進行總結(jié)驗證，并去發(fā)現(xiàn)、優(yōu)化流程中的不足之處。
行為：我們需要陳述設(shè)計目標和策略，對設(shè)計價值進行驗證，并能總結(jié)過程中的亮點與不足，制定后續(xù)計劃、沉淀相關(guān)經(jīng)驗。
以上是酷家樂UED「UI標準設(shè)計流程」的所有內(nèi)容，雖然它主要針對UI設(shè)計師而設(shè)，但相信它也能幫助到交互、體驗設(shè)計師們?nèi)荛_亂麻，更好地為業(yè)務(wù)目標服務(wù)。
后續(xù)我們會與大家繼續(xù)分享與之配套的「設(shè)計師成長指南」，它將基于Design Thinking為大家?guī)砀娴膶I(yè)知識幫助。
同時我們也會沉淀基于該流程的幾個典型案例，包括C端、B端、以及工具端，會在未來陸續(xù)與大家分享。
原文鏈接：酷家樂用戶體驗設(shè)計（公眾號）（公眾號）
作者：不戳
轉(zhuǎn)載請注明：學UI網(wǎng)》讓設(shè)計更有價值——設(shè)計流程指南
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小
助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)