ui工作內容

ui工作內容

1.制定MRD(Market Requirements Document).

市場需求文檔。獲得項目發起部門的認同後，產品進入實施，需要先出MRD，具體來說要有更細緻的市場與競爭對手分析，通過哪些功能來實現商業目的，功能/非功能需求分哪幾塊，功能的優先級等等。實際工作中，這個階段PD可能的產出物有Mind Manager的思維圖，Excel的Feature List等。

2.制定PRD(Product Requirements Document).

產品需求文檔。進步一細化，這部分是PM寫得最多的內容，也就是傳統意義上的需求分析，我們這裏主要指UC(use case)文檔。主要內容有，功能使用的具體描述(每個UC一般有用例簡述、行爲者、前置條件、後置條件、UI描述、流程/子流程/分支流程，等幾大塊)，Visio做的功能點業 務流程，界面的說明，demo等。Demo方面，可能用dreamweaver、ps甚至畫圖板簡單畫一下，有時候也會有 UI/UE支持，出高保真的demo，開發將來可以直接用的那種。

3.用戶分析報告

蒐集相關資料分析目標用戶的使用特徵、情感、習慣、心裏需求等，提出用戶研究報告和可用性設計建議。這部分工作也可和團隊配合完成。時間與項目需求允許的情況下，更可以制定實景用戶分析。

4.產品架構設計

這裏涉及到比較多的界面交互與流程的設計，根據可用性分析結果制定交互方式、操作與跳轉流程、結構、佈局、信息和其他元素。

以上是UI設計師需要掌握跟進的，從這裏開始就真的是你的任務了　。

5.產品原型設計

就是將頁面模塊、元素進行粗放式的排版和佈局，深入一些，還會加入一些交互性的元素，使其更加具體、形象和生動。

整個系統的流程設計也是UI設計師的，爲此你要經常瀏覽大量的網站，親身體驗，積累經典的，很具親和力的、友好的系統流程，你要考慮到整個系統的任何一個最終環節。這纔是UI設計師工作量最大，難度最高的部分。比如說，用戶註冊流程，成功了去哪，失敗了去哪，成功了後續有幾個流程，每個流程還包含哪些對象等等等等

6.界面UI設計

如果很傾向於圖形界面設計，這兒是你最喜歡的部分。但一定要結合循環討論過的分析結果做設計，否則你的作品很難被人信服。色調、風格、界面、窗口、圖標、皮膚的表現是本環節的關鍵。

7.界面輸出

這方面主要由頁面工程師與前端程序員配合,將界面代碼化。

作爲UI設計師，最能符合你的設計的基礎作品，當然還是出自你自己的雙手，爲此你要懂得切圖，做靜態頁，那麼SHTML和樣式表 還有爲了實現你那偉大設計的種種特效的JS代碼，你能不會麼??你可以不去親自做，但你一定要有一個規範設計，你的施工隊必須在你的培訓和領導下完全符合 規範的去操作，就像架構師一樣。哦，你看，到了這裏你應該是一名UI經理了。

8.分析使用者報告,做出完善調整.

多部門共同參與的，包括可用性的循環研究、用戶體驗回饋、測試回饋。同時，UI人員也應該把一些可行性建議進行完善。很多設計師做了東西不喜歡改，這是一個大忌。

9.整個項目的SEO優化設計

但就目前許多公司而言,拿到UI設計師手裏的,就是一份什麼說明都沒有的VISO圖,這給許多UI設計師造成一種錯覺,覺得我只需要做效果圖就可以了,對 於其他環節一概不理,導致了在設計產品界面的時候,因爲掌握的信息不足,設計出來的界面全憑個人喜好,但是當面對用戶的時候,卻是一點競爭力都沒有.。

UI設計師在項目初始,就應該加入其中。包括瞭解項目的市場定位，盈利模式，競爭對手等等，而通過分析競爭對手用戶界面，可以給UI設計師一個初步的圖形概念，而通過參與用戶調研,用戶分析能夠獲取到用戶特徵，年齡，需求，喜好等方面的信息，這些方面的信息,在風格定位，把握上起到至關重要的作用。

通過了解產品架構,知道什麼功能應該做，什麼功能應該突出,在參與了以上工作的制定後，相信許多UI設計師對自己所要設計的產品，已經是信心十足了吧。後期在通過分析使用者報告，用戶反饋等方面信息，做出界面上的調整，這樣一來，一個完善的產品就可以面市了，而這個產品，再也不是一個全憑UI設計師個人喜好所設計出來的產品了!

延伸閱讀：

UI設計師到底是做什麼的

UI到底做什麼，要從UI接到的工作流程來說——產品/交互/設計。也就是說一般我們接到的是交互稿。

這時候UI看到一個交互設計，需要考慮的是：

1、這樣的排布是否合理(比如960的屏和1136的屏幕是否都可以容下足夠的設計關鍵信息)

2、信息重點在哪裏?

3、用戶人羣是哪一類?

等等分析都是自己的事。另外，通常我們拿到的交互稿是這樣子的：

產出卻要求是這樣子的：

那麼這中間的坑和鴻溝就是我們自己填。

在解決完上面的.問題後，我們開始着手UI設計：

1、從產品需求入手，考慮我們到底要用什麼主色調

比如同樣是團購，糯米用的是桃紅色，而美團是翠綠色。那麼我們在UI設計的時候首先就要考慮主色調的問題。

2、配色和輔助色用什麼顏色

在考慮到產品氣質和品牌色的同事，我們經常要考慮配合襯托產品主色調的輔助色。在不同的產品中，輔助色運用的策略是不同的，比如我們經常說的：鄰近色、對比色等。都是我們選擇輔助色的方法。

3、用什麼風格來表達

現在來說，說到風格一句話，扁平風。但是在扁平中也有區別。比如下圖，同樣是扁平。但是左圖微微帶有一些光影，而右圖是純扁平。你能說哪個好或者不好嗎?不能。

同樣的信息，在UI的表達上也有不同的表達方式。那麼只能在具體你的UI設計中去考慮具體你需要用什麼風格。這些都是UI的工作內容。

4、圖標化成什麼風格

同樣是設置、發現、首頁，不同的app在基本結構一致的情況下也有很多細微的差別。倒是是要用圓角的icon、還是直角，是用面還是線形，這背後的設計語言邏輯是什麼，設計目的是什麼。都是需要UI設計來考慮。

比如：同樣是騰訊的產品，手Q和微信的icon就完全不一樣。其原因是由於產品面面對的人羣不同，手Q更偏年輕化。同樣，你去看陌陌、來往、易信的聊天icon也是不一樣的。這都是需要UI設計師一點點摳細節的去畫出來的。

5、如何表達情感化設計

在一些細節頁面我們常常要考慮情感化設計，以此來提升app的品質，降低用戶在異常情況下 的挫敗感。同時好的設計師還會考慮到如何引導用戶去解決，從而滿足產品訴求。不同的產品在做情感化設計的時候方式方法不同，風格也不一樣。這些也都是需要UI設計來處理的。

6、動效如何做

因爲手機交互是動態的。所以我們如果可以用在一些跳轉頁面引用動效設計，無意是對整個app加分的好方法。

7、萬年的大頭疼圖標icon

一萬個人有一萬個答案，那麼具體怎麼做，還是要考慮用戶、場景、需求等細節。產品可以提供方向，但是具體的落地還是需要UI設計師來完成。

8、適配、切圖

也算是萬年話題了。你不是做個好看的東西，要能用，開發要能開發。你要考慮iphone456，還要考慮不同的安卓720/1280/1920，甚至有些公司要特殊考慮某些屏幕。

在某些小公司，UI要肩負和產品一起考慮交互的問題。這時候經常需要UI在自己儲備足夠的視覺設計能力的同時有良好的交互設計能力。