2019-7-28 鶴鶴
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
文章從項目流程的各階段來講解UI設計師應該做些什么，如何做才能把自己的價值在項目中體現出最大化！
講解對象：處于中小型公司項目的UI設計師（目前現狀：相比起大廠的設計師來言缺乏流程和規范，也不懂系統的工作方法，容易陷入無人帶+無人指導+無標準流程的尷尬境地，不知道如何在項目中體現出自己更大的價值，設計也沒有自己的一套可支撐的體系，在項目實施過程中永遠處于被動方）
注明：此次只分享一些大的方向，并不會具體講解哪一塊如何去實行，在一些重要的部分會稍微提一下，因為涉及的內容太多所以只能以后分塊面來分享給大家。
OK，廢話不多說，進入正題：
首先梳理了一個簡化版的中小型公司項目流程與角色分工表（表格注明：一般中小型公司是沒有交互設計師與用研的，交互設計的活兒都是交給產品經理來做，所以交互設計角色我把它歸為產品經理；視覺設計會在后面重點強調所以簡化說明；開發測試這一塊與我講解的內容關聯不大所以也給簡化說明了，但是在開發測試階段會有更重要的任務讓我們設計師去做，后面我會詳細講解）。
從上圖中可以看出UI設計在項目中主要就是進行視覺設計這一塊，但真的是這樣嗎？其實并不是，一位出色的UI設計師在項目的各個階段都應該體現出自己的價值，特別是對于中小型公司，公司想要的是如何生存下去，就更需要團隊里的每一個人在產品中創造更多的價值，而不是像流水線工人一樣做完自己的事就什么都不管了，這樣的團隊是活不下去的，正因為這樣，這也是我們設計師證明自己價值的一個機會，那么我們在項目各階段該做些什么呢？
一：產品立項+交互設計階段
因為主要講解中小型公司，所以我把產品立項與交互設計放在一個階段來講，雖然這一階段沒有任何視覺可視化設計，但要體現設計師的價值這一階段就是重要前提，那么我們怎么做呢？
1.查看迭代的產品文檔，實時了解產品信息（一般中小型公司的產品立項已經成立，直接開始進入交互設計階段）
目的：設計前提就是了解產品，這一點是最基本的。
延展：有助于后面協助UE“部分內容”的分析。
重點：著重了解這三大塊：1.市場調研與客戶需求分析。2.需求文檔。3.產品特性概覽及概要描述。
2.主動協助產品完成UE的“部分內容”，“部分內容”包含：市場分析/用戶畫像/痛點/競品分析/使用場景（因為中小型公司的項目都比較趕，有些產品經理做UE這塊內容的時候可能沒考慮太多細節，有些內容沒有去做，所以這時就可以協助產品主動去完成這些分析文檔）
目的：有利于做視覺分析時提供更好的思路與決策，減少走彎路，減少不必要的溝通成本。
延展：對產品信息進行文字提煉，做一個有利于視覺團隊理解的表格文檔，方便做視覺稿時能直觀的看到產品分析，也為了后期有UI新成員加入時更快的熟悉產品提供必要的文檔。（表格沒必要做的多好，簡單直觀才是最重要，后期再根據視覺風格統一優化）
表格示例：
重點：協助UE內容重點不在于幫助產品經理更細化的分析產品，重點是在此過程中能更好的拓展自己的知識面，提升自我的分析能力，為后期的視覺稿提供更好的理論支撐，以及對自己的崗位轉型也具有很大幫助。
3.輸出關于設計的競品分析文檔（協助完成UE內容后）
目的：作為視覺規范/界面視覺的參考，讓自己的設計更具有說服力。
延展：如果有足夠多的時間可以細化更多內容，進行對比分析，以便于后面做視覺稿時能快速進行布局決策。
重點：可以形成一套屬于自己的競品分析文檔，以后可以套用到其他項目中，我個人的設計競品分析文檔是從4個層面/3種表現形式來進行分析的。4個層面為：表現層/框架層/結構層/范圍層；3種表現形式為：分析列表；思維導圖；圖文結合。
給大家舉三個不同形式的例子：
01-表現層+分析列表形式：
02-結構層+思維導圖形式：
03-范圍層+圖文結合形式：
二：視覺設計階段
這一階段是設計師最熟悉的，也是很多設計師所痛心的，流程混亂會導致你做很多無用功，沒有合理規范以至于進度提不上來，設計出的界面卻說不出任何依據，也許我的一個設計思路能解決你們的難題。
第一步：根據產品文檔與設計競品分析文檔確定視覺風格，根據視覺風格做出視覺概念稿（建議3版），確定好視覺概念稿后主視覺設計師針對主要功能界面設計風格定位稿。（設計風格定位稿必須要結合競品分析文檔來做，讓自己的每一塊設計區域都有據可循）
第二步：當出了定位稿后，就可以制定設計的周期節點（注：也可以制定周期后再確定風格定位稿，把定位稿歸位節點內）
第三步：制定文件命名規范；確定設計規范（迭代）；建立組件庫（迭代）
1.文件命名規范：為了提高內部交接效率，盡量使文檔的命名與層級統一
示例：
2.確定設計規范：設計規范并不是一步就能做好的，項目前做基本的設計規范，項目中進行迭代，項目結束后再進行總結輸出最終檔。
那么我們現在要做的就是項目前的基本設計規范，前期建議這些規范是必須要的：統一設計環境/字體/行高/界面柵格/顏色/icon制作規范/輸出規范/最小基礎間距/按鈕。（規范沒必要一次性就想做的非常完美，在設計中都是要不斷迭代的）
3.建立組件庫：組件庫是通過對功能及視覺表達中元素的拆解、歸納、重組；并基于可被復用的目的，形成規范化的組件，通過多維度組合來構建整個設計方案，將這些組件整理在一起，便形成組件庫。簡單來說就是可復用/節省產出時間/視覺統一，加快我們的設計步伐，讓我們把更多時間用于專注于用戶體驗和對產品的創新。（注：組件庫也是需要不斷的迭代的，在項目完成后可以把組件庫歸位設計規范文檔里面）
第四步：規范設計流程
根據每個項目不同/每個公司不同設計流程都有些不同變化，規范設計流程包含這三塊：設計組交付流程；產品交付流程；前端交付流程。
目的：直接減少了因時間有限導致的設計誤差及衍生的研發返工，為項目的高質量交付奠定了基礎。
第五步：視覺稿設計+視覺稿交付
視覺稿設計：設計視覺稿是為了讓自己的視覺稿有據可行，需要結合產品文檔/競品分析文檔/設計理論這三大塊來作為依據參考進行設計。
視覺稿交付：與開發商討出最佳交付方案，統一輸出規范。
三：開發測試階段
這一階段屬于設計的一個空檔期，很多設計師在這一階段都開始了休閑時光，只是做一些查缺補漏的工作，其實這一階段對于設計師來言是一個體現自我價值的重要階段，那么我們應該怎么做呢？
1.與前端工程師經常溝通，查查看寫出的界面是否有偏差（因為有些情況下程序寫出來的界面與你所做的界面有偏差，如果不經常溝通，那么他在做同樣組件時也會犯同樣錯誤，有問題及時糾正，免得來來回回耽誤工作進度）
2.重點：總結輸出設計文檔（定稿設計規范/定稿競品分析文檔）
①定稿設計規范第一版：包含設計過程中所有迭代的規范內容以及組件庫
作用：對于設計師而言是展現業務能力的體現，對于整個團隊而言是提升生產效率的重要工具。
②定稿競品分析文檔（設計類）第一版：把項目中所有的競品分析文檔歸類，以及因時間問題某些板塊未做的競品分析加入迭代，綜合輸出最終檔。
作用：簡單來說就是更快為設計提供具有可行性/有依據性的視覺稿。
四：上線階段
作為最激動人心的階段，為了避免上線后不必要的錯誤以及產品后期的迭代考慮，還是有許多工作需要做的。
1.交付物走查(排查交付給開發的文件，查看是否有圖標/界面/提示信息等的遺漏)
2.驗收工作（界面是否與高保真原型圖保持一致，圖片是否正常顯示，打開界面速度是否正常，動效是否達到預期等）
3.后續延伸（因項目時間原因UI樣式/交互/情感化設計還沒做到更細致，可提上日程留至于下期改版。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。