一些典型問(wèn)題也相應(yīng)顯現(xiàn)：上手就干、主觀設(shè)計(jì)、缺少方法、忽視跟進(jìn)等等。

所以我們撰寫(xiě)了「UI標(biāo)準(zhǔn)設(shè)計(jì)流程」，希望能為UI設(shè)計(jì)師提供對(duì)于設(shè)計(jì)支撐思路的共識(shí)，讓設(shè)計(jì)更有價(jià)值：

從接到需求到上線后跟蹤，我們把流程拆分為五個(gè)節(jié)點(diǎn)：需求分析-交互設(shè)計(jì)-視覺(jué)設(shè)計(jì)-視覺(jué)規(guī)范-方案驗(yàn)證。

當(dāng)然，在設(shè)計(jì)流程中我們只表達(dá)不同流程中的行為目的及標(biāo)準(zhǔn)，相關(guān)方法論我們會(huì)配套一份「設(shè)計(jì)師成長(zhǎng)指南」，不久之后再與大家分享。

1.需求分析

我們?cè)诮拥揭粋€(gè)設(shè)計(jì)需求后，要做的第一步是進(jìn)行分析并確定設(shè)計(jì)目標(biāo)。

我們需要：了解背景、用戶和競(jìng)品，能準(zhǔn)確理解產(chǎn)品定位和需求目標(biāo)，評(píng)估需求的合理性和準(zhǔn)確性，并提供相應(yīng)策略；甚至洞見(jiàn)機(jī)會(huì)點(diǎn)，通過(guò)設(shè)計(jì)對(duì)業(yè)務(wù)產(chǎn)生正向價(jià)值。

背景分析

目的：背景分析是為了讓我們?cè)趧偨佑|產(chǎn)品的時(shí)候，去洞察表面背后的東西。通過(guò)背景分析，能幫助我們快速切入產(chǎn)品，并根據(jù)已有信息去制定準(zhǔn)確并具有說(shuō)服力的設(shè)計(jì)策略。

行為：我們需要了解：產(chǎn)品的定位及價(jià)值是什么，它的現(xiàn)狀如何，是否有既往的數(shù)據(jù)沉淀或經(jīng)驗(yàn)總結(jié)。

用戶分析

目的：對(duì)UI設(shè)計(jì)師而言，用戶分析是為了讓我們更好地了解產(chǎn)品，并擁有對(duì)整個(gè)產(chǎn)品的宏觀思路。通過(guò)用戶分析，能為我們的視覺(jué)設(shè)計(jì)提供方向，并為我們做出決策提供實(shí)際落點(diǎn)。

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

競(jìng)品分析

目的：競(jìng)品分析能夠讓我們獲得行業(yè)內(nèi)的優(yōu)秀經(jīng)驗(yàn)，減少我們的思維盲區(qū)，同時(shí)還為我們提供了一份可被量化的標(biāo)準(zhǔn)，使我們可以基于競(jìng)品去反推現(xiàn)有產(chǎn)品。

行為：UI設(shè)計(jì)師可以從競(jìng)品定位、主要功能、迭代動(dòng)向、產(chǎn)品結(jié)構(gòu)、頁(yè)面布局、交互動(dòng)效、視覺(jué)設(shè)計(jì)、優(yōu)劣勢(shì)對(duì)比這幾個(gè)維度去進(jìn)行競(jìng)品分析。

需求評(píng)估

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

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

           對(duì)不同類型的需求，我們都可以用5個(gè)問(wèn)題去評(píng)估：

           1.是否可被證偽？

           2.目標(biāo)是否明確？

           3.投產(chǎn)比如何？

           4.是否有更優(yōu)解法？

           5.是否有可預(yù)見(jiàn)風(fēng)險(xiǎn)？

           基于以上問(wèn)題，我們可以去協(xié)同交互、產(chǎn)品做相應(yīng)調(diào)整和策略制定，甚至發(fā)現(xiàn)新的機(jī)會(huì)點(diǎn)并進(jìn)行推動(dòng)。

目標(biāo)對(duì)齊

目的：設(shè)計(jì)為目標(biāo)服務(wù)，所以我們要在設(shè)計(jì)開(kāi)始前與需求方對(duì)齊目標(biāo)，這也能為設(shè)計(jì)價(jià)值的佐證提供標(biāo)準(zhǔn)。

行為：設(shè)計(jì)目標(biāo)通常有3種，我們可以從中去對(duì)需求目標(biāo)轉(zhuǎn)譯：提升數(shù)據(jù)型、解決問(wèn)題型、創(chuàng)新項(xiàng)目型。

           針對(duì)不同目標(biāo)我們可以去制定不同的設(shè)計(jì)策略，并對(duì)策略的落地進(jìn)行數(shù)據(jù)監(jiān)測(cè)與分析，進(jìn)行方案校正。

2.交互設(shè)計(jì)

在產(chǎn)品流程中，交互設(shè)計(jì)的作用在于，通過(guò)信息架構(gòu)的組織去產(chǎn)出體驗(yàn)流暢的界面原型。

我們需要：充分理解整體流程與交互原型，基于設(shè)計(jì)原則去發(fā)現(xiàn)可優(yōu)化的部分；同時(shí)能平衡產(chǎn)品、設(shè)計(jì)與開(kāi)發(fā)的效益最大化，并驅(qū)動(dòng)產(chǎn)品的體驗(yàn)提升。

設(shè)計(jì)原則

目的：設(shè)計(jì)原則能為我們提供一個(gè)行之有效的設(shè)計(jì)向?qū)Щ蛱崾?。熟知各類設(shè)計(jì)原則，能使我們?cè)谠O(shè)計(jì)支撐時(shí)，擁有更豐厚的專業(yè)度和更敏銳的洞察力。

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

流程梳理

目的：流程的再梳理，可以幫助我們?cè)谝曈X(jué)設(shè)計(jì)前，快速地理解和診斷流程邏輯。

行為：在流程再梳理的過(guò)程中，我們需要注意以下4個(gè)問(wèn)題：

           1.功能是否完整？

           2.鏈路是否流暢？

           3.步驟是否冗余？

           4.是否易于理解？

           基于以上問(wèn)題，我們可以用自身的專業(yè)儲(chǔ)備去推動(dòng)流程的優(yōu)化。

原型優(yōu)化

目的：交互原型是需求內(nèi)容的外在表現(xiàn)，通過(guò)原型優(yōu)化，可以最大程度地避免視覺(jué)評(píng)審后的設(shè)計(jì)返工。

行為：在對(duì)交互原型優(yōu)化的過(guò)程中，我們要重點(diǎn)注意以下4個(gè)問(wèn)題：

           1.架構(gòu)是否符合目標(biāo)

           2.層級(jí)是否足夠精簡(jiǎn)

           3.信息是否傳達(dá)準(zhǔn)確

           4.狀態(tài)是否有所缺失

       在視覺(jué)設(shè)計(jì)時(shí)，我們基于以上四點(diǎn)可以去同步優(yōu)化原型，并根據(jù)經(jīng)驗(yàn)去尋求體驗(yàn)和成本的最佳平衡。

3.視覺(jué)設(shè)計(jì)

視覺(jué)設(shè)計(jì)是產(chǎn)品與用戶直接連接的媒介，優(yōu)質(zhì)而恰當(dāng)?shù)囊曈X(jué)設(shè)計(jì)，可以極大地提升產(chǎn)品吸引力。

我們需要：基于分析確定視覺(jué)方向、定義設(shè)計(jì)語(yǔ)言，輸出準(zhǔn)確且高質(zhì)量的視覺(jué)頁(yè)面。

設(shè)計(jì)情緒板

目的：設(shè)計(jì)情緒板可以為設(shè)計(jì)語(yǔ)言的構(gòu)建提供可視化參考，也有助于我們前期快速與各方達(dá)成共識(shí)。

行為：我們通?；诜治觯ゴ_定設(shè)計(jì)關(guān)鍵詞，并基于關(guān)鍵詞去衍生映射物、建立圖形情緒板，最終分析和確定設(shè)計(jì)方向。

設(shè)計(jì)語(yǔ)言

目的：設(shè)計(jì)語(yǔ)言是情緒板的具象表達(dá)，它將構(gòu)建起用戶對(duì)產(chǎn)品的視覺(jué)感知。

行為：在明確設(shè)計(jì)方向后，我們就要基于情緒版去定義設(shè)計(jì)語(yǔ)言，主要包括主視覺(jué)、色彩、字體、圖標(biāo)、圖形、動(dòng)效等。

典型頁(yè)面

目的：典型頁(yè)面是設(shè)計(jì)語(yǔ)言在場(chǎng)景中直觀體現(xiàn)，這有助于我們制定設(shè)計(jì)規(guī)范，并為其他頁(yè)面的設(shè)計(jì)提供參考。

行為：我們通常需要設(shè)計(jì)首頁(yè)、頻道頁(yè)或其他具有示例作用的典型頁(yè)面，在設(shè)計(jì)的過(guò)程中我們還需要同步去規(guī)范間距、卡片、視覺(jué)變量、圖形應(yīng)用等，以此為視覺(jué)規(guī)范夯實(shí)基礎(chǔ)。

4.設(shè)計(jì)系統(tǒng)

在設(shè)計(jì)典型頁(yè)面的同時(shí)，其背后其實(shí)已經(jīng)對(duì)應(yīng)了一套設(shè)計(jì)規(guī)范和組件，而我們基于此去整理并沉淀出設(shè)計(jì)系統(tǒng)，能極大地提升統(tǒng)一性和迭代效率。

我們需要：制定完整、清晰的基礎(chǔ)規(guī)范，沉淀圖標(biāo)庫(kù)、組件庫(kù)等，并持續(xù)優(yōu)化和更新，形成可持續(xù)沿用的產(chǎn)品設(shè)計(jì)系統(tǒng)。

基礎(chǔ)規(guī)范

目的：基礎(chǔ)規(guī)范是設(shè)計(jì)語(yǔ)言的沉淀，也是視覺(jué)變量的基本粒子。它可以保證頁(yè)面的基本統(tǒng)一，同時(shí)我們可以基于不同業(yè)務(wù)快速地拓展其他主題。

行為：在我司，一份基礎(chǔ)規(guī)范的構(gòu)成包括：色彩、字體、間距、布局、斷點(diǎn)、層級(jí)、圓角、透明度、陰影。

圖標(biāo)庫(kù)

目的：圖標(biāo)規(guī)范可以幫助其他成員快速、準(zhǔn)確地進(jìn)行圖標(biāo)拓展，而沉淀的圖標(biāo)庫(kù)也可以極大地提升產(chǎn)出效率。

行為：基于具體需要，我們可以設(shè)定多套圖標(biāo)風(fēng)格，規(guī)范其柵格、筆畫(huà)、圓角等，并將已有的圖標(biāo)資產(chǎn)進(jìn)行沉淀。同時(shí)我們也會(huì)去規(guī)范一些常見(jiàn)圖形并沉淀，如空態(tài)插畫(huà)、懸浮入口、徽章、商品等。

組件庫(kù)

目的：組件庫(kù)是對(duì)常用控件進(jìn)行設(shè)計(jì)規(guī)范、開(kāi)發(fā)、封裝的可被復(fù)用的集合，組件分而治之，可被自由組合，能保證設(shè)計(jì)品質(zhì)、統(tǒng)一用戶體驗(yàn)、提升產(chǎn)研效率。

行為：在我司，一套組件庫(kù)通常包括：通用、布局、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、其它。除通用原子組件外，我們也會(huì)對(duì)常用模塊進(jìn)行梳理，沉淀業(yè)務(wù)組件庫(kù)。

5.落地跟蹤

在設(shè)計(jì)完成之后，我們需要對(duì)設(shè)計(jì)方案進(jìn)行評(píng)審、驗(yàn)收及數(shù)據(jù)跟蹤，以保證設(shè)計(jì)方案的落地并跟進(jìn)調(diào)整。

我們需要：運(yùn)用合理策略以保證設(shè)計(jì)方案的高質(zhì)量落地，對(duì)方案上線后的用戶反饋進(jìn)行有效跟進(jìn)，運(yùn)用多種方式驗(yàn)證目標(biāo)，迭代產(chǎn)品。

設(shè)計(jì)評(píng)審

目的：設(shè)計(jì)評(píng)審?fù)ǔ０私换ヅc視覺(jué)，其目的在于審查設(shè)計(jì)方案中的可用性問(wèn)題。

行為：在我司，視覺(jué)評(píng)審即終評(píng)，我們需要在視覺(jué)稿中標(biāo)注出所有交互邏輯，并對(duì)潛在問(wèn)題有預(yù)判，能與各方確認(rèn)目標(biāo)、分桶與數(shù)據(jù)埋點(diǎn)；同時(shí)我們要對(duì)開(kāi)發(fā)實(shí)現(xiàn)有預(yù)判，能與研發(fā)確認(rèn)實(shí)現(xiàn)細(xì)節(jié)。

設(shè)計(jì)驗(yàn)收

目的：設(shè)計(jì)驗(yàn)收是為了確保需求滿足、體驗(yàn)流暢，并且設(shè)計(jì)細(xì)節(jié)能高質(zhì)量落地。

行為：視覺(jué)設(shè)計(jì)師主要驗(yàn)收視覺(jué)細(xì)節(jié)的還原度，并且要在一定程度上對(duì)開(kāi)發(fā)的適配、樣式解法有預(yù)知，減少二次驗(yàn)收。同時(shí)需要保證驗(yàn)收有沉淀，利于后續(xù)跟進(jìn)。

數(shù)據(jù)驗(yàn)證

目的：數(shù)據(jù)驗(yàn)證除了分析分桶之外，也可以分析產(chǎn)品上線后的一些問(wèn)題、并在迭代中修改。同時(shí)我們也可以總結(jié)設(shè)計(jì)經(jīng)驗(yàn)、提升未來(lái)設(shè)計(jì)的準(zhǔn)確率。

行為：我們通常基于設(shè)計(jì)策略，去對(duì)數(shù)據(jù)進(jìn)行篩選與分析，以此衡量設(shè)計(jì)對(duì)于目標(biāo)達(dá)成的增益度。對(duì)于有問(wèn)題的，能反思并且修改；對(duì)于結(jié)果好的，能總結(jié)并且沉淀。

設(shè)計(jì)復(fù)盤(pán)

目的：設(shè)計(jì)復(fù)盤(pán)以結(jié)果為導(dǎo)向，我們可以通過(guò)復(fù)盤(pán)對(duì)設(shè)計(jì)策略的價(jià)值進(jìn)行總結(jié)驗(yàn)證，并去發(fā)現(xiàn)、優(yōu)化流程中的不足之處。

行為：我們需要陳述設(shè)計(jì)目標(biāo)和策略，對(duì)設(shè)計(jì)價(jià)值進(jìn)行驗(yàn)證，并能總結(jié)過(guò)程中的亮點(diǎn)與不足，制定后續(xù)計(jì)劃、沉淀相關(guān)經(jīng)驗(yàn)。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：站酷   作者：酷家樂(lè)UED

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)