1.2　網(wǎng)頁UI設(shè)計(jì)的制作流程

很多沒有在正規(guī)的大公司工作過的設(shè)計(jì)師想知道UI設(shè)計(jì)的具體工作流程是什么。其實(shí)，每個(gè)公司都有自己的工作流程，有些公司可能需要設(shè)計(jì)師從前期立項(xiàng)到中間開發(fā)再到后期產(chǎn)品測(cè)試和項(xiàng)目上線進(jìn)行全程跟進(jìn)，而有些公司可能只需要設(shè)計(jì)師在產(chǎn)品研發(fā)階段進(jìn)行參與。但不管哪種方式，設(shè)計(jì)師有必要知道一個(gè)產(chǎn)品從立項(xiàng)到完成的所有步驟?，F(xiàn)在給讀者介紹一種工作流程，如圖1-19所示。

圖1-19

1.2.1　產(chǎn)品調(diào)研階段

在一個(gè)項(xiàng)目開始之前首先是立項(xiàng)，領(lǐng)導(dǎo)或者相關(guān)部門給產(chǎn)品經(jīng)理提出想法，產(chǎn)品經(jīng)理拿到項(xiàng)目之后對(duì)整個(gè)項(xiàng)目進(jìn)行分析，期間產(chǎn)品經(jīng)理需要做很多的準(zhǔn)備工作，如圖1-20所示。

圖1-20

產(chǎn)品定位：產(chǎn)品經(jīng)理需要配合市場(chǎng)部門進(jìn)行市場(chǎng)調(diào)研，首先需要確定目標(biāo)市場(chǎng)、目標(biāo)人群和產(chǎn)品定位，如果時(shí)間充足，要做用戶調(diào)研來確定產(chǎn)品的用戶需求。

市場(chǎng)分析：對(duì)市場(chǎng)里的競(jìng)品做一些競(jìng)品分析，進(jìn)一步確保產(chǎn)品的市場(chǎng)定位。

結(jié)構(gòu)設(shè)計(jì)：當(dāng)確定了產(chǎn)品的目標(biāo)人群和市場(chǎng)定位后，接著要做的就是產(chǎn)品的結(jié)構(gòu)設(shè)計(jì)，預(yù)算產(chǎn)品周期，疏通整個(gè)產(chǎn)品流程。

原型設(shè)計(jì)：進(jìn)行原型設(shè)計(jì)是為了根據(jù)進(jìn)度與成本把原型控制在手繪、圖形、Flash、視頻這幾個(gè)質(zhì)量范圍內(nèi)。它不需要有全部的功能，但要體現(xiàn)出設(shè)計(jì)對(duì)象的基本特征和基本功能。

知識(shí)點(diǎn)睛：原型圖是需要交給交互設(shè)計(jì)師來完成的，但是產(chǎn)品經(jīng)理要跟其他部門的同事時(shí)刻保持密切溝通，例如，產(chǎn)品的市場(chǎng)定位需要找市場(chǎng)部門的同事進(jìn)行溝通，產(chǎn)品設(shè)計(jì)規(guī)范。界面布局等需要找UI設(shè)計(jì)師溝通，而開發(fā)環(huán)境和項(xiàng)目周期要找技術(shù)開發(fā)的同事進(jìn)行協(xié)調(diào)。有些公司還有專門的交互設(shè)計(jì)師，產(chǎn)品經(jīng)理需要在前期制作原型圖時(shí)和交互設(shè)計(jì)師充分配合完成交互說明，以便后期的視覺設(shè)計(jì)和技術(shù)開發(fā)。

1.2.2　UI視覺設(shè)計(jì)

產(chǎn)品原型（包括前期交互稿）完成之后需要交付給UI設(shè)計(jì)師進(jìn)行視覺設(shè)計(jì)，這里指的UI設(shè)計(jì)其實(shí)嚴(yán)格來說屬于GUI。因?yàn)閁I的本意為User Interface（用戶界面），涵蓋了交互設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)和視覺設(shè)計(jì)，而交互設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)是在產(chǎn)品開始之時(shí)就已經(jīng)同時(shí)展開的，所以這里說的設(shè)計(jì)通常指GUI界面視覺設(shè)計(jì)，如圖1-21所示。

圖1-21

根據(jù)原型設(shè)計(jì)階段的界面原型，對(duì)界面原型進(jìn)行視覺效果的處理。

01　搜索素材靈感：多找優(yōu)秀設(shè)計(jì)作為自己設(shè)計(jì)靈感的來源是一個(gè)非常有效的方法（參考學(xué)習(xí)而不是抄襲）。

02　確定界面配色風(fēng)格和界面整體色調(diào)。

03　確定界面布局和設(shè)計(jì)風(fēng)格。

04　進(jìn)行界面設(shè)計(jì)。

05　完稿后進(jìn)行可用性測(cè)試，并和技術(shù)開發(fā)人員討論修改直至最終定稿。

知識(shí)點(diǎn)睛：這里有必要說一下視覺設(shè)計(jì)規(guī)范。有些公司的視覺規(guī)范是在視覺設(shè)計(jì)開始前就定下來的，而有些公司是整個(gè)視覺設(shè)計(jì)完成之后再來制定視覺規(guī)范的。為什么可以這樣呢？因?yàn)橐曈X規(guī)范是為了整個(gè)設(shè)計(jì)團(tuán)隊(duì)在設(shè)計(jì)時(shí)更容易溝通而制定的，但設(shè)計(jì)工作在進(jìn)行中可能會(huì)隨時(shí)變更視覺風(fēng)格，所以設(shè)計(jì)前期確定設(shè)計(jì)規(guī)范，可能會(huì)對(duì)后期的設(shè)計(jì)帶來一定的限制，設(shè)計(jì)師內(nèi)部通常會(huì)有一個(gè)簡(jiǎn)單的設(shè)計(jì)文檔來進(jìn)行交流。

等設(shè)計(jì)稿確定之后，再來制作標(biāo)準(zhǔn)的設(shè)計(jì)視覺規(guī)范，方便后期開發(fā)和設(shè)計(jì)工作繼續(xù)跟進(jìn)。在整個(gè)視覺設(shè)計(jì)中，設(shè)計(jì)師不僅要把控好整體的視覺設(shè)計(jì)風(fēng)格，更要耐心設(shè)計(jì)好各個(gè)細(xì)節(jié)，例如，icon、字體、元素之間的間距這些不起眼的地方往往代表了整個(gè)App的質(zhì)量，細(xì)節(jié)之處做好會(huì)在視覺上給用戶帶來一種安全可靠的感覺，所以細(xì)節(jié)非常重要。

1.2.3　產(chǎn)品技術(shù)開發(fā)

產(chǎn)品技術(shù)開發(fā)環(huán)節(jié)中UI設(shè)計(jì)師需要配合程序開發(fā)人員進(jìn)行切圖。標(biāo)注，把控開發(fā)質(zhì)量，并及時(shí)反饋由于開發(fā)人員的視覺偏差和設(shè)計(jì)師所造成的開發(fā)難度過大而需要調(diào)整的設(shè)計(jì)。

01　UI設(shè)計(jì)師切圖、標(biāo)注，并將圖片輸出。

02　程序員按照設(shè)計(jì)人員給出的界面設(shè)計(jì)圖稿，完成界面的初步代碼編譯部分。

03　UI設(shè)計(jì)師配合開發(fā)，以保證視覺效果還原度及小細(xì)節(jié)的修改，如圖1-22所示。

圖1-22

1.2.4　BUG測(cè)試

在開發(fā)工作完成之后，整個(gè)項(xiàng)目組會(huì)配合測(cè)試人員對(duì)產(chǎn)品進(jìn)行測(cè)試，測(cè)試視覺、交互以及后臺(tái)等多方面有無BUG并進(jìn)行及時(shí)修改，如圖1-23所示。

圖1-23

提示：BUG測(cè)試就是一個(gè)用于完善軟件的測(cè)試階段。用戶必須知道，只要是軟件就會(huì)有BUG。再嚴(yán)格的測(cè)試也只是抽樣活動(dòng)，總會(huì)有BUG被遺留下來?；谝陨蟽煞N原因，軟件或者系統(tǒng)發(fā)布時(shí)總會(huì)或多或少存在BUG。需要看BUG的影響程度。對(duì)于生命周期比較長(zhǎng)的軟件或系統(tǒng)，BUG只要產(chǎn)生了影響就要被修復(fù)。

1.2.5　產(chǎn)品上線

產(chǎn)品通過測(cè)試之后就可以發(fā)布上線。此時(shí)UI設(shè)計(jì)師可以輔助產(chǎn)品經(jīng)理收集手機(jī)用戶體驗(yàn)報(bào)告，并進(jìn)行分析。產(chǎn)品上線后，用戶一般會(huì)通過各種渠道發(fā)出自己對(duì)產(chǎn)品的聲音，這些反饋對(duì)于產(chǎn)品和設(shè)計(jì)師來說非常重要。

提示：為什么要收集用戶反饋？收集用戶反饋大致可分為兩個(gè)目的：了解用戶和了解產(chǎn)品。這些資料將會(huì)為之后的產(chǎn)品迭代所使用。

1.2.6　產(chǎn)品迭代

當(dāng)產(chǎn)品基礎(chǔ)框架開發(fā)完成進(jìn)入成熟期后，產(chǎn)品的周期性迭代就變得非常重要。所謂產(chǎn)品迭代，就是在一定時(shí)間內(nèi)，對(duì)該產(chǎn)品一定量的新需求加以評(píng)估、篩選、開發(fā)、測(cè)試以及上線的一系列行為的總稱。而產(chǎn)品迭代的周期化，是指固定產(chǎn)品迭代的流程，一般為一到兩周。

對(duì)市場(chǎng)和用戶反饋進(jìn)行分析之后找出產(chǎn)品界面設(shè)計(jì)的優(yōu)缺點(diǎn)，為下一個(gè)版本提出合理的建議，如圖1-24所示。

圖1-24