ui工作內容

ui工作內容

ui工作內容

1.制定MRD(Market Requirements Document).

市場(chǎng)需求文檔。獲得項目發(fā)起部門(mén)的認同后，產(chǎn)品進(jìn)入實(shí)施，需要先出MRD，具體來(lái)說(shuō)要有更細致的市場(chǎng)與競爭對手分析，通過(guò)哪些功能來(lái)實(shí)現商業(yè)目的，功能/非功能需求分哪幾塊，功能的優(yōu)先級等等。實(shí)際工作中，這個(gè)階段PD可能的產(chǎn)出物有Mind Manager的思維圖，Excel的Feature List等。

2.制定PRD(Product Requirements Document).

產(chǎn)品需求文檔。進(jìn)步一細化，這部分是PM寫(xiě)得最多的內容，也就是傳統意義上的需求分析，我們這里主要指UC(use case)文檔。主要內容有，功能使用的具體描述(每個(gè)UC一般有用例簡(jiǎn)述、行為者、前置條件、后置條件、UI描述、流程/子流程/分支流程，等幾大塊)，Visio做的功能點(diǎn)業(yè) 務(wù)流程，界面的說(shuō)明，demo等。Demo方面，可能用dreamweaver、ps甚至畫(huà)圖板簡(jiǎn)單畫(huà)一下，有時(shí)候也會(huì )有 UI/UE支持，出高保真的demo，開(kāi)發(fā)將來(lái)可以直接用的那種。

3.用戶(hù)分析報告

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

4.產(chǎn)品架構設計

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

以上是UI設計師需要掌握跟進(jìn)的，從這里開(kāi)始就真的是你的任務(wù)了　。

5.產(chǎn)品原型設計

就是將頁(yè)面模塊、元素進(jìn)行粗放式的排版和布局，深入一些，還會(huì )加入一些交互性的元素，使其更加具體、形象和生動(dòng)。

整個(gè)系統的流程設計也是UI設計師的，為此你要經(jīng)常瀏覽大量的網(wǎng)站，親身體驗，積累經(jīng)典的，很具親和力的、友好的系統流程，你要考慮到整個(gè)系統的任何一個(gè)最終環(huán)節。這才是UI設計師工作量最大，難度最高的部分。比如說(shuō)，用戶(hù)注冊流程，成功了去哪，失敗了去哪，成功了后續有幾個(gè)流程，每個(gè)流程還包含哪些對象等等等等

6.界面UI設計

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

7.界面輸出

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

作為UI設計師，最能符合你的設計的基礎作品，當然還是出自你自己的雙手，為此你要懂得切圖，做靜態(tài)頁(yè)，那么SHTML和樣式表 還有為了實(shí)現你那偉大設計的種種特效的JS代碼，你能不會(huì )么??你可以不去親自做，但你一定要有一個(gè)規范設計，你的施工隊必須在你的培訓和領(lǐng)導下完全符合 規范的去操作，就像架構師一樣。哦，你看，到了這里你應該是一名UI經(jīng)理了。

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

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

9.整個(gè)項目的SEO優(yōu)化設計

但就目前許多公司而言,拿到UI設計師手里的,就是一份什么說(shuō)明都沒(méi)有的VISO圖,這給許多UI設計師造成一種錯覺(jué),覺(jué)得我只需要做效果圖就可以了,對 于其他環(huán)節一概不理,導致了在設計產(chǎn)品界面的時(shí)候,因為掌握的信息不足,設計出來(lái)的界面全憑個(gè)人喜好,但是當面對用戶(hù)的時(shí)候,卻是一點(diǎn)競爭力都沒(méi)有.。

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

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

延伸閱讀：

UI設計師到底是做什么的

UI到底做什么，要從UI接到的工作流程來(lái)說(shuō)——產(chǎn)品/交互/設計。也就是說(shuō)一般我們接到的是交互稿。

這時(shí)候UI看到一個(gè)交互設計，需要考慮的是：

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

2、信息重點(diǎn)在哪里?

3、用戶(hù)人群是哪一類(lèi)?

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

產(chǎn)出卻要求是這樣子的：

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

在解決完上面的問(wèn)題后，我們開(kāi)始著(zhù)手UI設計：

1、從產(chǎn)品需求入手，考慮我們到底要用什么主色調

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

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

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

3、用什么風(fēng)格來(lái)表達

現在來(lái)說(shuō)，說(shuō)到風(fēng)格一句話(huà)，扁平風(fēng)。但是在扁平中也有區別。比如下圖，同樣是扁平。但是左圖微微帶有一些光影，而右圖是純扁平。你能說(shuō)哪個(gè)好或者不好嗎?不能。

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

4、圖標化成什么風(fēng)格

同樣是設置、發(fā)現、首頁(yè)，不同的app在基本結構一致的情況下也有很多細微的差別。倒是是要用圓角的icon、還是直角，是用面還是線(xiàn)形，這背后的設計語(yǔ)言邏輯是什么，設計目的是什么。都是需要UI設計來(lái)考慮。

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

5、如何表達情感化設計

在一些細節頁(yè)面我們常常要考慮情感化設計，以此來(lái)提升app的品質(zhì)，降低用戶(hù)在異常情況下 的挫敗感。同時(shí)好的設計師還會(huì )考慮到如何引導用戶(hù)去解決，從而滿(mǎn)足產(chǎn)品訴求。不同的產(chǎn)品在做情感化設計的時(shí)候方式方法不同，風(fēng)格也不一樣。這些也都是需要UI設計來(lái)處理的。

6、動(dòng)效如何做

因為手機交互是動(dòng)態(tài)的。所以我們如果可以用在一些跳轉頁(yè)面引用動(dòng)效設計，無(wú)意是對整個(gè)app加分的好方法。

7、萬(wàn)年的大頭疼圖標icon

一萬(wàn)個(gè)人有一萬(wàn)個(gè)答案，那么具體怎么做，還是要考慮用戶(hù)、場(chǎng)景、需求等細節。產(chǎn)品可以提供方向，但是具體的落地還是需要UI設計師來(lái)完成。

8、適配、切圖

也算是萬(wàn)年話(huà)題了。你不是做個(gè)好看的東西，要能用，開(kāi)發(fā)要能開(kāi)發(fā)。你要考慮iphone456，還要考慮不同的安卓720/1280/1920，甚至有些公司要特殊考慮某些屏幕。

在某些小公司，UI要肩負和產(chǎn)品一起考慮交互的問(wèn)題。這時(shí)候經(jīng)常需要UI在自己儲備足夠的視覺(jué)設計能力的同時(shí)有良好的交互設計能力。

【ui工作內容】相關(guān)文章：

UI美工設計的具體職責內容通用12-09

UI設計師的工作職責12-16

UI美工設計的工作職責03-24

ui設計師工作職責01-09

ui個(gè)人簡(jiǎn)歷 ui個(gè)人簡(jiǎn)歷范文03-09

UI設計師工作總結06-16

ui設計師工作總結07-12

ui設計師的工作計劃02-01

UI設計師崗位的工作職責01-14

UI美工設計崗位的工作職責12-07