講解對象：處于中小型公司項目的UI設(shè)計師（目前現(xiàn)狀：相比起大廠的設(shè)計師來言缺乏流程和規(guī)范，也不懂系統(tǒng)的工作方法，容易陷入無人帶+無人指導(dǎo)+無標(biāo)準(zhǔn)流程的尷尬境地，不知道如何在項目中體現(xiàn)出自己更大的價值，設(shè)計也沒有自己的一套可支撐的體系，在項目實施過程中永遠(yuǎn)處于被動方）

注明：此次只分享一些大的方向，并不會具體講解哪一塊如何去實行，在一些重要的部分會稍微提一下，因為涉及的內(nèi)容太多所以只能以后分塊面來分享給大家。

OK，廢話不多說，進(jìn)入正題：

首先梳理了一個簡化版的中小型公司項目流程與角色分工表（表格注明：一般中小型公司是沒有交互設(shè)計師與用研的，交互設(shè)計的活兒都是交給產(chǎn)品經(jīng)理來做，所以交互設(shè)計角色我把它歸為產(chǎn)品經(jīng)理；視覺設(shè)計會在后面重點強調(diào)所以簡化說明；開發(fā)測試這一塊與我講解的內(nèi)容關(guān)聯(lián)不大所以也給簡化說明了，但是在開發(fā)測試階段會有更重要的任務(wù)讓我們設(shè)計師去做，后面我會詳細(xì)講解）。

從上圖中可以看出UI設(shè)計在項目中主要就是進(jìn)行視覺設(shè)計這一塊，但真的是這樣嗎？其實并不是，一位出色的UI設(shè)計師在項目的各個階段都應(yīng)該體現(xiàn)出自己的價值，特別是對于中小型公司，公司想要的是如何生存下去，就更需要團(tuán)隊里的每一個人在產(chǎn)品中創(chuàng)造更多的價值，而不是像流水線工人一樣做完自己的事就什么都不管了，這樣的團(tuán)隊是活不下去的，正因為這樣，這也是我們設(shè)計師證明自己價值的一個機會，那么我們在項目各階段該做些什么呢？

產(chǎn)品立項+交互設(shè)計階段

因為主要講解中小型公司，所以我把產(chǎn)品立項與交互設(shè)計放在一個階段來講，雖然這一階段沒有任何視覺可視化設(shè)計，但要體現(xiàn)設(shè)計師的價值這一階段就是重要前提，那么我們怎么做呢？

1. 查看迭代的產(chǎn)品文檔，實時了解產(chǎn)品信息

（一般中小型公司的產(chǎn)品立項已經(jīng)成立，直接開始進(jìn)入交互設(shè)計階段）

• 目的：設(shè)計前提就是了解產(chǎn)品，這一點是最基本的。
• 延展：有助于后面協(xié)助UE“部分內(nèi)容”的分析。
• 重點：著重了解這三大塊：市場調(diào)研與客戶需求分析；需求文檔；產(chǎn)品特性概覽及概要描述。

2. 主動協(xié)助產(chǎn)品完成UE的“部分內(nèi)容”

“部分內(nèi)容”包含：市場分析/用戶畫像/痛點/競品分析/使用場景（因為中小型公司的項目都比較趕，有些產(chǎn)品經(jīng)理做UE這塊內(nèi)容的時候可能沒考慮太多細(xì)節(jié)，有些內(nèi)容沒有去做，所以這時就可以協(xié)助產(chǎn)品主動去完成這些分析文檔）

目的：有利于做視覺分析時提供更好的思路與決策，減少走彎路，減少不必要的溝通成本。

延展：對產(chǎn)品信息進(jìn)行文字提煉，做一個有利于視覺團(tuán)隊理解的表格文檔，方便做視覺稿時能直觀的看到產(chǎn)品分析，也為了后期有UI新成員加入時更快的熟悉產(chǎn)品提供必要的文檔。（表格沒必要做的多好，簡單直觀才是最重要，后期再根據(jù)視覺風(fēng)格統(tǒng)一優(yōu)化）

表格示例：

重點：協(xié)助UE內(nèi)容重點不在于幫助產(chǎn)品經(jīng)理更細(xì)化的分析產(chǎn)品，重點是在此過程中能更好的拓展自己的知識面，提升自我的分析能力，為后期的視覺稿提供更好的理論支撐，以及對自己的崗位轉(zhuǎn)型也具有很大幫助。

3. 輸出關(guān)于設(shè)計的競品分析文檔（協(xié)助完成UE內(nèi)容后）

目的：作為視覺規(guī)范/界面視覺的參考，讓自己的設(shè)計更具有說服力。

延展：如果有足夠多的時間可以細(xì)化更多內(nèi)容，進(jìn)行對比分析，以便于后面做視覺稿時能快速進(jìn)行布局決策。

重點：可以形成一套屬于自己的競品分析文檔，以后可以套用到其他項目中，我個人的設(shè)計競品分析文檔是從4個層面/3種表現(xiàn)形式來進(jìn)行分析的。4個層面為：表現(xiàn)層/框架層/結(jié)構(gòu)層/范圍層；3種表現(xiàn)形式為：分析列表；思維導(dǎo)圖；圖文結(jié)合。

給大家舉三個不同形式的例子：

表現(xiàn)層+分析列表形式：

結(jié)構(gòu)層+思維導(dǎo)圖形式：

范圍層+圖文結(jié)合形式：

視覺設(shè)計階段

這一階段是設(shè)計師最熟悉的，也是很多設(shè)計師所痛心的，流程混亂會導(dǎo)致你做很多無用功，沒有合理規(guī)范以至于進(jìn)度提不上來，設(shè)計出的界面卻說不出任何依據(jù)，也許我的一個設(shè)計思路能解決你們的難題。

第一步：根據(jù)產(chǎn)品文檔與設(shè)計競品分析文檔確定視覺風(fēng)格，根據(jù)視覺風(fēng)格做出視覺概念稿（建議3版），確定好視覺概念稿后主視覺設(shè)計師針對主要功能界面設(shè)計風(fēng)格定位稿。（設(shè)計風(fēng)格定位稿必須要結(jié)合競品分析文檔來做，讓自己的每一塊設(shè)計區(qū)域都有據(jù)可循）

第二步：當(dāng)出了定位稿后，就可以制定設(shè)計的周期節(jié)點（注：也可以制定周期后再確定風(fēng)格定位稿，把定位稿歸位節(jié)點內(nèi)）

第三步：制定文件命名規(guī)范；確定設(shè)計規(guī)范（迭代）；建立組件庫（迭代）

文件命名規(guī)范：為了提高內(nèi)部交接效率，盡量使文檔的命名與層級統(tǒng)一

示例：

確定設(shè)計規(guī)范：設(shè)計規(guī)范并不是一步就能做好的，項目前做基本的設(shè)計規(guī)范，項目中進(jìn)行迭代，項目結(jié)束后再進(jìn)行總結(jié)輸出最終檔。

那么我們現(xiàn)在要做的就是項目前的基本設(shè)計規(guī)范，前期建議這些規(guī)范是必須要的：統(tǒng)一設(shè)計環(huán)境/字體/行高/界面柵格/顏色/icon制作規(guī)范/輸出規(guī)范/最小基礎(chǔ)間距/按鈕。（規(guī)范沒必要一次性就想做的非常完美，在設(shè)計中都是要不斷迭代的）

建立組件庫：組件庫是通過對功能及視覺表達(dá)中元素的拆解、歸納、重組；并基于可被復(fù)用的目的，形成規(guī)范化的組件，通過多維度組合來構(gòu)建整個設(shè)計方案，將這些組件整理在一起，便形成組件庫。簡單來說就是可復(fù)用/節(jié)省產(chǎn)出時間/視覺統(tǒng)一，加快我們的設(shè)計步伐，讓我們把更多時間用于專注于用戶體驗和對產(chǎn)品的創(chuàng)新。（注：組件庫也是需要不斷的迭代的，在項目完成后可以把組件庫歸位設(shè)計規(guī)范文檔里面）

第四步：規(guī)范設(shè)計流程

根據(jù)每個項目不同/每個公司不同設(shè)計流程都有些不同變化，規(guī)范設(shè)計流程包含這三塊：設(shè)計組交付流程；產(chǎn)品交付流程；前端交付流程。

目的：直接減少了因時間有限導(dǎo)致的設(shè)計誤差及衍生的研發(fā)返工，為項目的高質(zhì)量交付奠定了基礎(chǔ)。

第五步：視覺稿設(shè)計+視覺稿交付

視覺稿設(shè)計：設(shè)計視覺稿是為了讓自己的視覺稿有據(jù)可行，需要結(jié)合產(chǎn)品文檔/競品分析文檔/設(shè)計理論這三大塊來作為依據(jù)參考進(jìn)行設(shè)計。

視覺稿交付：與開發(fā)商討出最佳交付方案，統(tǒng)一輸出規(guī)范。

開發(fā)測試階段

這一階段屬于設(shè)計的一個空檔期，很多設(shè)計師在這一階段都開始了休閑時光，只是做一些查缺補漏的工作，其實這一階段對于設(shè)計師來言是一個體現(xiàn)自我價值的重要階段，那么我們應(yīng)該怎么做呢？

1. 與前端工程師經(jīng)常溝通，查查看寫出的界面是否有偏差

因為有些情況下程序?qū)懗鰜淼慕缑媾c你所做的界面有偏差，如果不經(jīng)常溝通，那么他在做同樣組件時也會犯同樣錯誤，有問題及時糾正，免得來來回回耽誤工作進(jìn)度

2. 重點：總結(jié)輸出設(shè)計文檔（定稿設(shè)計規(guī)范/定稿競品分析文檔）

定稿設(shè)計規(guī)范第一版：包含設(shè)計過程中所有迭代的規(guī)范內(nèi)容以及組件庫

作用：對于設(shè)計師而言是展現(xiàn)業(yè)務(wù)能力的體現(xiàn)，對于整個團(tuán)隊而言是提升生產(chǎn)效率的重要工具。

定稿競品分析文檔（設(shè)計類）第一版：把項目中所有的競品分析文檔歸類，以及因時間問題某些板塊未做的競品分析加入迭代，綜合輸出最終檔。

作用：簡單來說就是更快為設(shè)計提供具有可行性/有依據(jù)性的視覺稿。

上線階段

作為最激動人心的階段，為了避免上線后不必要的錯誤以及產(chǎn)品后期的迭代考慮，還是有許多工作需要做的。

• 交付物走查(排查交付給開發(fā)的文件，查看是否有圖標(biāo)/界面/提示信息等的遺漏)
• 驗收工作(界面是否與高保真原型圖保持一致，圖片是否正常顯示，打開界面速度是否正常，動效是否達(dá)到預(yù)期等)
• 后續(xù)延伸(因項目時間原因UI樣式/交互/情感化設(shè)計還沒做到更細(xì)致，可提上日程留至于下期改版)

以上是我總結(jié)的項目工作里設(shè)計師所要做的主要內(nèi)容，里面的板塊內(nèi)容都沒有去細(xì)化，例如：競品分析/設(shè)計規(guī)范/設(shè)計組的設(shè)計流程（不同級別項目有不同的設(shè)計流程）等等，以后有機會再給大家分享，如果喜歡可以點個關(guān)注哦！

本文源自：黑獅力