講解對(duì)象：處于中小型公司項(xiàng)目的UI設(shè)計(jì)師（目前現(xiàn)狀：相比起大廠的設(shè)計(jì)師來(lái)言缺乏流程和規(guī)范，也不懂系統(tǒng)的工作方法缺猛，容易陷入無(wú)人帶+無(wú)人指導(dǎo)+無(wú)標(biāo)準(zhǔn)流程的尷尬境地，不知道如何在項(xiàng)目中體現(xiàn)出自己更大的價(jià)值届谈，設(shè)計(jì)也沒(méi)有自己的一套可支撐的體系枯夜，在項(xiàng)目實(shí)施過(guò)程中永遠(yuǎn)處于被動(dòng)方）
注明：此次只分享一些大的方向弯汰，并不會(huì)具體講解哪一塊如何去實(shí)行艰山，在一些重要的部分會(huì)稍微提一下，因?yàn)樯婕暗膬?nèi)容太多所以只能以后分塊面來(lái)分享給大家咏闪。
OK曙搬，廢話(huà)不多說(shuō)，進(jìn)入正題：
首先梳理了一個(gè)簡(jiǎn)化版的中小型公司項(xiàng)目流程與角色分工表（表格注明：一般中小型公司是沒(méi)有交互設(shè)計(jì)師與用研的鸽嫂，交互設(shè)計(jì)的活兒都是交給產(chǎn)品經(jīng)理來(lái)做纵装，所以交互設(shè)計(jì)角色我把它歸為產(chǎn)品經(jīng)理；視覺(jué)設(shè)計(jì)會(huì)在后面重點(diǎn)強(qiáng)調(diào)所以簡(jiǎn)化說(shuō)明据某；開(kāi)發(fā)測(cè)試這一塊與我講解的內(nèi)容關(guān)聯(lián)不大所以也給簡(jiǎn)化說(shuō)明了橡娄，但是在開(kāi)發(fā)測(cè)試階段會(huì)有更重要的任務(wù)讓我們?cè)O(shè)計(jì)師去做，后面我會(huì)詳細(xì)講解）癣籽。
從上圖中可以看出UI設(shè)計(jì)在項(xiàng)目中主要就是進(jìn)行視覺(jué)設(shè)計(jì)這一塊挽唉，但真的是這樣嗎？其實(shí)并不是筷狼，一位出色的UI設(shè)計(jì)師在項(xiàng)目的各個(gè)階段都應(yīng)該體現(xiàn)出自己的價(jià)值瓶籽，特別是對(duì)于中小型公司，公司想要的是如何生存下去埂材，就更需要團(tuán)隊(duì)里的每一個(gè)人在產(chǎn)品中創(chuàng)造更多的價(jià)值塑顺，而不是像流水線(xiàn)工人一樣做完自己的事就什么都不管了，這樣的團(tuán)隊(duì)是活不下去的俏险，正因?yàn)檫@樣严拒，這也是我們?cè)O(shè)計(jì)師證明自己價(jià)值的一個(gè)機(jī)會(huì)，那么我們?cè)陧?xiàng)目各階段該做些什么呢竖独？
一：產(chǎn)品立項(xiàng)+交互設(shè)計(jì)階段
因?yàn)橹饕v解中小型公司裤唠，所以我把產(chǎn)品立項(xiàng)與交互設(shè)計(jì)放在一個(gè)階段來(lái)講，雖然這一階段沒(méi)有任何視覺(jué)可視化設(shè)計(jì)预鬓，但要體現(xiàn)設(shè)計(jì)師的價(jià)值這一階段就是重要前提巧骚，那么我們?cè)趺醋瞿兀?/p>
1.查看迭代的產(chǎn)品文檔赊颠，實(shí)時(shí)了解產(chǎn)品信息（一般中小型公司的產(chǎn)品立項(xiàng)已經(jīng)成立，直接開(kāi)始進(jìn)入交互設(shè)計(jì)階段）
目的：設(shè)計(jì)前提就是了解產(chǎn)品劈彪，這一點(diǎn)是最基本的竣蹦。
延展：有助于后面協(xié)助UE“部分內(nèi)容”的分析。
重點(diǎn)：著重了解這三大塊：1.市場(chǎng)調(diào)研與客戶(hù)需求分析沧奴。2.需求文檔痘括。3.產(chǎn)品特性概覽及概要描述。
2.主動(dòng)協(xié)助產(chǎn)品完成UE的“部分內(nèi)容”滔吠，“部分內(nèi)容”包含：市場(chǎng)分析/用戶(hù)畫(huà)像/痛點(diǎn)/競(jìng)品分析/使用場(chǎng)景（因?yàn)橹行⌒凸镜捻?xiàng)目都比較趕纲菌，有些產(chǎn)品經(jīng)理做UE這塊內(nèi)容的時(shí)候可能沒(méi)考慮太多細(xì)節(jié)，有些內(nèi)容沒(méi)有去做疮绷，所以這時(shí)就可以協(xié)助產(chǎn)品主動(dòng)去完成這些分析文檔）
目的：有利于做視覺(jué)分析時(shí)提供更好的思路與決策翰舌，減少走彎路，減少不必要的溝通成本冬骚。
延展：對(duì)產(chǎn)品信息進(jìn)行文字提煉椅贱，做一個(gè)有利于視覺(jué)團(tuán)隊(duì)理解的表格文檔，方便做視覺(jué)稿時(shí)能直觀的看到產(chǎn)品分析只冻，也為了后期有UI新成員加入時(shí)更快的熟悉產(chǎn)品提供必要的文檔庇麦。（表格沒(méi)必要做的多好，簡(jiǎn)單直觀才是最重要喜德，后期再根據(jù)視覺(jué)風(fēng)格統(tǒng)一優(yōu)化）
表格示例：
重點(diǎn)：協(xié)助UE內(nèi)容重點(diǎn)不在于幫助產(chǎn)品經(jīng)理更細(xì)化的分析產(chǎn)品山橄，重點(diǎn)是在此過(guò)程中能更好的拓展自己的知識(shí)面，提升自我的分析能力舍悯，為后期的視覺(jué)稿提供更好的理論支撐航棱，以及對(duì)自己的崗位轉(zhuǎn)型也具有很大幫助。
3.輸出關(guān)于設(shè)計(jì)的競(jìng)品分析文檔（協(xié)助完成UE內(nèi)容后）
目的：作為視覺(jué)規(guī)范/界面視覺(jué)的參考贱呐，讓自己的設(shè)計(jì)更具有說(shuō)服力丧诺。
延展：如果有足夠多的時(shí)間可以細(xì)化更多內(nèi)容，進(jìn)行對(duì)比分析奄薇，以便于后面做視覺(jué)稿時(shí)能快速進(jìn)行布局決策驳阎。
重點(diǎn)：可以形成一套屬于自己的競(jìng)品分析文檔，以后可以套用到其他項(xiàng)目中馁蒂，我個(gè)人的設(shè)計(jì)競(jìng)品分析文檔是從4個(gè)層面/3種表現(xiàn)形式來(lái)進(jìn)行分析的呵晚。4個(gè)層面為：表現(xiàn)層/框架層/結(jié)構(gòu)層/范圍層；3種表現(xiàn)形式為：分析列表沫屡；思維導(dǎo)圖饵隙；圖文結(jié)合。
給大家舉三個(gè)不同形式的例子：
01-表現(xiàn)層+分析列表形式：
02-結(jié)構(gòu)層+思維導(dǎo)圖形式：
03-范圍層+圖文結(jié)合形式：
二：視覺(jué)設(shè)計(jì)階段
這一階段是設(shè)計(jì)師最熟悉的沮脖，也是很多設(shè)計(jì)師所痛心的金矛，流程混亂會(huì)導(dǎo)致你做很多無(wú)用功芯急，沒(méi)有合理規(guī)范以至于進(jìn)度提不上來(lái)，設(shè)計(jì)出的界面卻說(shuō)不出任何依據(jù)驶俊，也許我的一個(gè)設(shè)計(jì)思路能解決你們的難題娶耍。
第一步：根據(jù)產(chǎn)品文檔與設(shè)計(jì)競(jìng)品分析文檔確定視覺(jué)風(fēng)格，根據(jù)視覺(jué)風(fēng)格做出視覺(jué)概念稿（建議3版）饼酿，確定好視覺(jué)概念稿后主視覺(jué)設(shè)計(jì)師針對(duì)主要功能界面設(shè)計(jì)風(fēng)格定位稿榕酒。（設(shè)計(jì)風(fēng)格定位稿必須要結(jié)合競(jìng)品分析文檔來(lái)做，讓自己的每一塊設(shè)計(jì)區(qū)域都有據(jù)可循）
第二步：當(dāng)出了定位稿后故俐，就可以制定設(shè)計(jì)的周期節(jié)點(diǎn)（注：也可以制定周期后再確定風(fēng)格定位稿想鹰，把定位稿歸位節(jié)點(diǎn)內(nèi)）
第三步：制定文件命名規(guī)范；確定設(shè)計(jì)規(guī)范（迭代）药版；建立組件庫(kù)（迭代）
1.文件命名規(guī)范：為了提高內(nèi)部交接效率辑舷，盡量使文檔的命名與層級(jí)統(tǒng)一
示例：
2.確定設(shè)計(jì)規(guī)范：設(shè)計(jì)規(guī)范并不是一步就能做好的，項(xiàng)目前做基本的設(shè)計(jì)規(guī)范刚陡，項(xiàng)目中進(jìn)行迭代惩妇，項(xiàng)目結(jié)束后再進(jìn)行總結(jié)輸出最終檔。
那么我們現(xiàn)在要做的就是項(xiàng)目前的基本設(shè)計(jì)規(guī)范筐乳，前期建議這些規(guī)范是必須要的：統(tǒng)一設(shè)計(jì)環(huán)境/字體/行高/界面柵格/顏色/icon制作規(guī)范/輸出規(guī)范/最小基礎(chǔ)間距/按鈕。（規(guī)范沒(méi)必要一次性就想做的非常完美乔妈，在設(shè)計(jì)中都是要不斷迭代的）
3.建立組件庫(kù)：組件庫(kù)是通過(guò)對(duì)功能及視覺(jué)表達(dá)中元素的拆解蝙云、歸納、重組路召；并基于可被復(fù)用的目的勃刨，形成規(guī)范化的組件，通過(guò)多維度組合來(lái)構(gòu)建整個(gè)設(shè)計(jì)方案股淡，將這些組件整理在一起身隐，便形成組件庫(kù)。簡(jiǎn)單來(lái)說(shuō)就是可復(fù)用/節(jié)省產(chǎn)出時(shí)間/視覺(jué)統(tǒng)一唯灵，加快我們的設(shè)計(jì)步伐贾铝，讓我們把更多時(shí)間用于專(zhuān)注于用戶(hù)體驗(yàn)和對(duì)產(chǎn)品的創(chuàng)新。（注：組件庫(kù)也是需要不斷的迭代的埠帕，在項(xiàng)目完成后可以把組件庫(kù)歸位設(shè)計(jì)規(guī)范文檔里面）
第四步：規(guī)范設(shè)計(jì)流程
根據(jù)每個(gè)項(xiàng)目不同/每個(gè)公司不同設(shè)計(jì)流程都有些不同變化垢揩，規(guī)范設(shè)計(jì)流程包含這三塊：設(shè)計(jì)組交付流程；產(chǎn)品交付流程敛瓷；前端交付流程叁巨。
目的：直接減少了因時(shí)間有限導(dǎo)致的設(shè)計(jì)誤差及衍生的研發(fā)返工，為項(xiàng)目的高質(zhì)量交付奠定了基礎(chǔ)呐籽。
第五步：視覺(jué)稿設(shè)計(jì)+視覺(jué)稿交付
視覺(jué)稿設(shè)計(jì)：設(shè)計(jì)視覺(jué)稿是為了讓自己的視覺(jué)稿有據(jù)可行锋勺，需要結(jié)合產(chǎn)品文檔/競(jìng)品分析文檔/設(shè)計(jì)理論這三大塊來(lái)作為依據(jù)參考進(jìn)行設(shè)計(jì)蚀瘸。
視覺(jué)稿交付：與開(kāi)發(fā)商討出最佳交付方案，統(tǒng)一輸出規(guī)范庶橱。
三：開(kāi)發(fā)測(cè)試階段
這一階段屬于設(shè)計(jì)的一個(gè)空檔期苍姜，很多設(shè)計(jì)師在這一階段都開(kāi)始了休閑時(shí)光，只是做一些查缺補(bǔ)漏的工作悬包，其實(shí)這一階段對(duì)于設(shè)計(jì)師來(lái)言是一個(gè)體現(xiàn)自我價(jià)值的重要階段衙猪，那么我們應(yīng)該怎么做呢？
1.與前端工程師經(jīng)常溝通布近，查查看寫(xiě)出的界面是否有偏差（因?yàn)橛行┣闆r下程序?qū)懗鰜?lái)的界面與你所做的界面有偏差垫释，如果不經(jīng)常溝通，那么他在做同樣組件時(shí)也會(huì)犯同樣錯(cuò)誤撑瞧，有問(wèn)題及時(shí)糾正棵譬，免得來(lái)來(lái)回回耽誤工作進(jìn)度）
2.重點(diǎn)：總結(jié)輸出設(shè)計(jì)文檔（定稿設(shè)計(jì)規(guī)范/定稿競(jìng)品分析文檔）
①定稿設(shè)計(jì)規(guī)范第一版：包含設(shè)計(jì)過(guò)程中所有迭代的規(guī)范內(nèi)容以及組件庫(kù)
作用：對(duì)于設(shè)計(jì)師而言是展現(xiàn)業(yè)務(wù)能力的體現(xiàn)，對(duì)于整個(gè)團(tuán)隊(duì)而言是提升生產(chǎn)效率的重要工具预伺。
②定稿競(jìng)品分析文檔（設(shè)計(jì)類(lèi)）第一版：把項(xiàng)目中所有的競(jìng)品分析文檔歸類(lèi)订咸，以及因時(shí)間問(wèn)題某些板塊未做的競(jìng)品分析加入迭代，綜合輸出最終檔酬诀。
作用：簡(jiǎn)單來(lái)說(shuō)就是更快為設(shè)計(jì)提供具有可行性/有依據(jù)性的視覺(jué)稿脏嚷。
四：上線(xiàn)階段
作為最激動(dòng)人心的階段，為了避免上線(xiàn)后不必要的錯(cuò)誤以及產(chǎn)品后期的迭代考慮瞒御，還是有許多工作需要做的父叙。
1.交付物走查(排查交付給開(kāi)發(fā)的文件，查看是否有圖標(biāo)/界面/提示信息等的遺漏)
2.驗(yàn)收工作（界面是否與高保真原型圖保持一致肴裙，圖片是否正常顯示趾唱，打開(kāi)界面速度是否正常，動(dòng)效是否達(dá)到預(yù)期等）
3.后續(xù)延伸（因項(xiàng)目時(shí)間原因UI樣式/交互/情感化設(shè)計(jì)還沒(méi)做到更細(xì)致蜻懦，可提上日程留至于下期改版甜癞。
