想成為互聯(lián)網(wǎng)設(shè)計(jì)師？先來(lái)看這篇超周全的介紹！

編者按：本文專(zhuān)門(mén)寫(xiě)給沒(méi)入行的設(shè)計(jì)新手，不僅介紹了一個(gè)設(shè)計(jì)團(tuán)隊(duì)的分工，還有團(tuán)隊(duì)成員的工作、常見(jiàn)名詞和軟件等，絕對(duì)是新手入門(mén)最好的基礎(chǔ)科普手冊(cè)！

一、互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)師

UI設(shè)計(jì)師是什么呢？UI 是 User Interface Design（即界面設(shè)計(jì)）的簡(jiǎn)稱(chēng)。這個(gè)界面可以是手機(jī)界面，網(wǎng)站界面，軟件界面，智能設(shè)備界面等統(tǒng)統(tǒng)人機(jī)交互可視化序言。人機(jī)交互指的是人類(lèi)與計(jì)算機(jī)的交流，這種交流大家可以想見(jiàn)從最早的圖靈計(jì)算機(jī)寄托紙條來(lái)和計(jì)算機(jī)交流，到我們?nèi)缃裥涡紊钠聊簧系陌粹o，再到我們?nèi)缃竦母黝?lèi)語(yǔ)音交互，以及像科幻電影一樣的 AR、VR 或各類(lèi)腦電波交互，這都是人與計(jì)算機(jī)越來(lái)越方便的溝通體例?？墒侨伺c計(jì)算機(jī)目前最高效的溝通照舊停頓在屏幕上，屏幕仍然是人機(jī)交互體例中最有用率的，如許的交互界面必要由我們來(lái)設(shè)計(jì)成更有用率和讓用戶(hù)能夠看懂的界面，讓通俗大眾更好的理解計(jì)算機(jī)的意圖，這就是我們的職責(zé)了。總結(jié)一下：UI設(shè)計(jì)師的職責(zé)是設(shè)計(jì)供人機(jī)交互使用的圖形化用戶(hù)界面，并使界面更加易用和友愛(ài)。

△ 早期采用GUI設(shè)計(jì)的Xerox 8010 Star

我們完成的圖形化界面又叫 GUI（Graphic User Interface），它的要求是必要有易用性（Easy to use），即界面不必要復(fù)雜地思索即可容易地使用；友愛(ài)（Friendly），即對(duì)用戶(hù)特別很是友愛(ài)，容易理解。一個(gè)好的 GUI 應(yīng)該是易用和友愛(ài)的，比如我們手機(jī)上的微信和付出寶等熟知的 APP。因?yàn)榛ヂ?lián)網(wǎng)的發(fā)展許多行業(yè)被重新整合：設(shè)計(jì)師也被重新定義了。UI設(shè)計(jì)、動(dòng)效設(shè)計(jì)、交互設(shè)計(jì)、平面設(shè)計(jì)被漸漸整合成了一個(gè)職業(yè)，這個(gè)職業(yè)不能單純地設(shè)計(jì)界面和排版，還必要能繪制圖形、掌握平面能力、懂交互等，這個(gè)職業(yè)有了不同的名字，比如全鏈路設(shè)計(jì)師、全棧設(shè)計(jì)師等，但是我認(rèn)為合適的稱(chēng)呼是：互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)師。目前國(guó)內(nèi)名企雇用時(shí)也會(huì)使用這一詞匯來(lái)強(qiáng)調(diào)與只會(huì)排版和套用規(guī)范的界面設(shè)計(jì)師。互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)師擔(dān)負(fù)著我們這個(gè)時(shí)代的主流序言：互聯(lián)網(wǎng)的設(shè)計(jì)。那無(wú)論叫什么，我們的職責(zé)沒(méi)有改變：解決人機(jī)交互的題目。

△ iPhone界面中的UI設(shè)計(jì)

互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)師或 UI設(shè)計(jì)師一樣平常倚賴(lài)于互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)之中，而不像平面設(shè)計(jì)師或服裝設(shè)計(jì)師一樣成立許多平面設(shè)計(jì)公司。所以我們打交道的人不肯定都是偕行，而可能是互聯(lián)網(wǎng)從業(yè)者中的其他角色，如產(chǎn)品經(jīng)理、程序員、技術(shù)團(tuán)隊(duì)、運(yùn)營(yíng)團(tuán)隊(duì)等。假如我們?cè)诘膱F(tuán)隊(duì)不光是設(shè)計(jì)師，那么我們就要有充分地表達(dá)能力和耐心讓周遭的人理解我們的工作。互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)師的工作重要有移動(dòng)端設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、運(yùn)營(yíng)設(shè)計(jì)等。現(xiàn)在隨著 UI設(shè)計(jì)師的數(shù)量越來(lái)越多，行業(yè)越來(lái)越成熟，UI設(shè)計(jì)師所必要肩負(fù)的責(zé)任越來(lái)越多。如必要了解交互知識(shí)、懂平面設(shè)計(jì)、擅長(zhǎng)手繪等。那么 UI 的定義越來(lái)越雄厚，如今想成為 UI設(shè)計(jì)師的門(mén)檻越來(lái)越高。

二、互聯(lián)網(wǎng)的產(chǎn)品團(tuán)隊(duì)

△ 美劇《硅谷》中的創(chuàng)業(yè)團(tuán)隊(duì)

互聯(lián)網(wǎng)公司的產(chǎn)品線(xiàn)是一個(gè)流水線(xiàn)?；ヂ?lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)指的是整個(gè)團(tuán)隊(duì)圍繞著一個(gè)產(chǎn)品打造，并且以設(shè)計(jì)開(kāi)發(fā)完成該產(chǎn)品為目標(biāo)的團(tuán)隊(duì)。比如微信團(tuán)隊(duì)、付出寶團(tuán)隊(duì)等?；ヂ?lián)網(wǎng)產(chǎn)品有可能是移動(dòng)端，也可能是電腦端。也可能同時(shí)開(kāi)展多個(gè)產(chǎn)品線(xiàn)等。我們按部門(mén)可以把他們分為：管理層、產(chǎn)品部、研發(fā)部、市場(chǎng)部。設(shè)計(jì)團(tuán)可能單獨(dú)成立部門(mén)也可能融合在產(chǎn)品部門(mén)里。互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)按角色可分為：

1. 高層（leader）

一個(gè)團(tuán)隊(duì)的領(lǐng)袖，由董事會(huì)、董事會(huì)主席、首席實(shí)行官CEO（Chief Executive Officer）、首席技術(shù)官 CTO（Chief Technology Officer）等組成。決策公司的關(guān)鍵事物。

重要輸出：idea

使用軟件：Office

2. 用研團(tuán)隊(duì) UR（User Research）

通過(guò)用戶(hù)研究的手段調(diào)查老板的想法靠不靠譜。用研團(tuán)隊(duì)保障著公司與用戶(hù)之間的聯(lián)系，確保研發(fā)的產(chǎn)品是用戶(hù)所喜好的。研發(fā)之前、研發(fā)之中、研發(fā)之后的反饋都必要用戶(hù)研究團(tuán)隊(duì)及時(shí)參與收集數(shù)據(jù)等。

重要輸出：用戶(hù)研究報(bào)告

使用軟件：Office、眼動(dòng)儀等

3. 產(chǎn)品經(jīng)理 PM（product manager）

產(chǎn)品經(jīng)理細(xì)化產(chǎn)品邏輯，產(chǎn)品經(jīng)理或交互設(shè)計(jì)師設(shè)計(jì)原型圖，原型圖用來(lái)和老板匯報(bào)和交付設(shè)計(jì)師。負(fù)責(zé)產(chǎn)品從無(wú)到有的企劃。產(chǎn)品經(jīng)理首先的職責(zé)是在產(chǎn)品策劃階段向管理層提出產(chǎn)品文檔。產(chǎn)品文檔 PRD 通常包括產(chǎn)品的規(guī)劃、市場(chǎng)分析、競(jìng)品分析、迭代規(guī)劃等。然后在立項(xiàng)之后負(fù)責(zé)進(jìn)度的把控、質(zhì)量的把控和各個(gè)部門(mén)的和諧工作。在產(chǎn)品管理中，產(chǎn)品經(jīng)理是領(lǐng)頭人，是和諧員，是鼓動(dòng)者，但他并不是老板。作為產(chǎn)品經(jīng)理，雖然針對(duì)產(chǎn)品開(kāi)發(fā)自己有很大的權(quán)力，可以對(duì)產(chǎn)品生命周期中的各階段工作進(jìn)行干預(yù)，但從行政上講，并不像一樣平常的經(jīng)理那樣有本身的部屬，但他又要調(diào)動(dòng)許多資源來(lái)做事，因此如何做好這個(gè)角色是必要相稱(chēng)技巧的。

重要輸出：產(chǎn)品需求文檔（PRD）、市場(chǎng)需求文檔（MRD）、原型圖（Layout）等

使用軟件：文檔書(shū)寫(xiě)軟件（Office）、原型圖軟件（Axure、藍(lán)湖、墨刀等）

4. 項(xiàng)目經(jīng)理（Project manager）

從職業(yè)角度，是指企業(yè)建立以項(xiàng)目經(jīng)理責(zé)任制為核心，對(duì)項(xiàng)目執(zhí)行質(zhì)量、安全、進(jìn)度、成本管理的責(zé)任保證系統(tǒng)和周全進(jìn)步項(xiàng)目管理水平設(shè)立的緊張管理崗位。項(xiàng)目經(jīng)理是為項(xiàng)目的成功策劃和實(shí)行負(fù)總責(zé)的人。這個(gè)職位許多公司里可能都是由產(chǎn)品兼顧。項(xiàng)目經(jīng)理負(fù)責(zé)的是進(jìn)度的把控和項(xiàng)目題目的即時(shí)解決。

重要輸出：項(xiàng)目進(jìn)度表

使用軟件：文檔書(shū)寫(xiě)軟件（Office）

5. 交互設(shè)計(jì)師 UX 或 UE（User Experience Designer）

把產(chǎn)品需求文檔（PRD）優(yōu)化成可交互的原型圖給設(shè)計(jì)師和技術(shù)。

重要輸出：交互圖（prototype）

使用軟件：Axure RP、藍(lán)湖、墨刀、Adobe XD等

6. 互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)師或 UI設(shè)計(jì)師（User Interface Designer）

互聯(lián)網(wǎng)設(shè)計(jì)師不僅僅是給原型上色，設(shè)計(jì)師會(huì)根據(jù)現(xiàn)實(shí)具象內(nèi)容和詳細(xì)交互修改板式，甚至重新定義交互等。同時(shí)要提供應(yīng)技術(shù)切圖或 PSD。一些出現(xiàn)過(guò)的別名：美工、全鏈路設(shè)計(jì)師、全棧設(shè)計(jì)師、UID、UI設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師等等都是在說(shuō)我們。接到原型圖或交互圖后，我們會(huì)根據(jù)原型圖的內(nèi)容來(lái)進(jìn)行交互優(yōu)化、排版、視覺(jué)設(shè)計(jì)。最終和總監(jiān)確認(rèn)后交付開(kāi)發(fā)人員。假如是對(duì)接頁(yè)面項(xiàng)目的話(huà)，我們只必要交付給開(kāi)發(fā)人員：PSD、規(guī)范。假如是對(duì)接移動(dòng)端項(xiàng)目的話(huà)，那么我們必要交付給開(kāi)發(fā)人員：切圖、標(biāo)注、規(guī)范。為什么給頁(yè)面開(kāi)發(fā)的工程師（前端）不必要切圖而直接給 PSD 即可呢？由于前端工程師其實(shí)最早和我們的職位一路并稱(chēng)美工，是有 PS 操作能力的。

重要輸出：設(shè)計(jì)稿、設(shè)計(jì)規(guī)范、切圖、標(biāo)注等。

使用軟件：Sketch、Ps、Ae、Ai 等。

7. 前端開(kāi)發(fā) RD （Research and Development engineer）

開(kāi)發(fā)人員稀有據(jù)庫(kù)端和用戶(hù)端兩種，一樣平常來(lái)說(shuō)我們接觸的是用戶(hù)端開(kāi)發(fā)，他們負(fù)責(zé)還原設(shè)計(jì)。那么做頁(yè)面端的用戶(hù)端開(kāi)發(fā)的工程師叫做前端工程師；做安卓設(shè)備開(kāi)發(fā)的叫 Android工程師；做蘋(píng)果設(shè)備開(kāi)發(fā)的叫 iOS工程師。他們都指的是用戶(hù)端的開(kāi)發(fā)，用戶(hù)端就是我們看到的統(tǒng)統(tǒng)界面。目前用戶(hù)端我們接觸的就是頁(yè)面、安卓、iOS 三種主流設(shè)備，他們開(kāi)發(fā)使用的代碼不一樣，所以對(duì)有些特別結(jié)果如動(dòng)效、陰影等的支持有所不同。

8. 后端工程師或程序構(gòu)架師 RD （Research and Development engineer）

后端工程師重要負(fù)責(zé)什么呢？后端工程師或叫程序構(gòu)架師的重要工作是做數(shù)據(jù)存儲(chǔ)。我們平時(shí)使用產(chǎn)品中產(chǎn)生的數(shù)據(jù)，如：頭像、昵稱(chēng)、聊天、對(duì)話(huà)、圖片等，均是通過(guò)互聯(lián)網(wǎng)傳輸?shù)椒?wù)器再交換信息分發(fā)回去，那么這些資料存儲(chǔ)的架構(gòu)都是后端工程師的工作。然而遺憾的是，設(shè)計(jì)師與后端工程師的接觸沒(méi)有太多。

9. 運(yùn)營(yíng)或市場(chǎng)拓展 BD

產(chǎn)品完成后進(jìn)入運(yùn)營(yíng)階段，可能會(huì)根據(jù)運(yùn)營(yíng)調(diào)整產(chǎn)品設(shè)計(jì)或設(shè)計(jì)運(yùn)營(yíng)圖等需求。運(yùn)營(yíng)更加直接面對(duì)市場(chǎng)，所以對(duì)市場(chǎng)的目的也更加明確。以此推倒出市場(chǎng)和運(yùn)營(yíng)的目的每每更加直接。而偶然運(yùn)營(yíng)的目的紅利和產(chǎn)品以用戶(hù)為中間的思想會(huì)有沖突，這時(shí)對(duì)設(shè)計(jì)師的要求就更高了，如何調(diào)節(jié)設(shè)計(jì)審美、運(yùn)營(yíng)目的、以用戶(hù)為中間幾種目的就成了設(shè)計(jì)師的難題。

10. 測(cè)試工程師 QA

測(cè)試工程師在企業(yè)中一樣平常稱(chēng)為軟件開(kāi)發(fā)測(cè)試工程師（Software Development Engineer in Test，SDET）。一樣平常為具有1-2年經(jīng)驗(yàn)的測(cè)試工程師或程序員。有優(yōu)秀經(jīng)驗(yàn)的測(cè)試工程師可以成長(zhǎng)為產(chǎn)品/項(xiàng)目組的測(cè)試組長(zhǎng)（SDETLead）或軟件質(zhì)量經(jīng)理（SQA Manager），負(fù)責(zé)軟件質(zhì)量保證，進(jìn)行測(cè)試管理和向?qū)y(cè)試團(tuán)隊(duì)。測(cè)試工程師的職責(zé)就是把控軟件的質(zhì)量。主管與客觀的都會(huì)進(jìn)行把控，包括體驗(yàn)與視覺(jué)部分。但是通常設(shè)計(jì)師必要與測(cè)試工程師合作來(lái)完成對(duì)產(chǎn)品視覺(jué)部分還原度的測(cè)試工作。

11. 大型互聯(lián)網(wǎng)公司

△ 大型互聯(lián)網(wǎng)公司結(jié)構(gòu)圖

大型互聯(lián)網(wǎng)公司人員配備較為齊全：高管負(fù)責(zé)決策、用研團(tuán)隊(duì)負(fù)責(zé)研究用戶(hù)對(duì)于產(chǎn)品的反饋、產(chǎn)品經(jīng)理負(fù)責(zé)制訂產(chǎn)品發(fā)布的時(shí)間表、交互設(shè)計(jì)師負(fù)責(zé)優(yōu)化交互圖、視覺(jué)設(shè)計(jì)師優(yōu)化交互并設(shè)計(jì)視覺(jué)后輸出切圖和標(biāo)注并且完成設(shè)計(jì)規(guī)范、前端工程師負(fù)責(zé)實(shí)現(xiàn)界面還原和與數(shù)據(jù)庫(kù)的對(duì)接、后端工程師負(fù)責(zé)程序構(gòu)架和數(shù)據(jù)庫(kù)結(jié)構(gòu)、測(cè)試工程師負(fù)責(zé)測(cè)試整個(gè)程序是否可用、商務(wù)部門(mén)負(fù)責(zé)后期運(yùn)營(yíng)。除了完備的產(chǎn)品線(xiàn)外，大型互聯(lián)網(wǎng)公司還配備了人力資源部門(mén)、后勤部門(mén)、和諧部門(mén)等，分工很成熟。但是每每會(huì)出現(xiàn)大公司病，舉措比較緩慢。注：此圖為產(chǎn)品流程的重要關(guān)系圖，真實(shí)的工作中關(guān)系錯(cuò)綜復(fù)雜，并不只是線(xiàn)性順序。

12. 中型互聯(lián)網(wǎng)公司

△ 中型互聯(lián)網(wǎng)公司結(jié)構(gòu)圖

中型互聯(lián)網(wǎng)公司人員配備中等：高管負(fù)責(zé)決策、產(chǎn)品經(jīng)理負(fù)責(zé)制訂產(chǎn)品發(fā)布的時(shí)間表和交互圖、視覺(jué)設(shè)計(jì)師優(yōu)化交互并設(shè)計(jì)視覺(jué)后輸出切圖和標(biāo)注并且完成設(shè)計(jì)規(guī)范、前端工程師負(fù)責(zé)實(shí)現(xiàn)界面還原和與數(shù)據(jù)庫(kù)的對(duì)接、后端工程師負(fù)責(zé)程序構(gòu)架和數(shù)據(jù)庫(kù)結(jié)構(gòu)、測(cè)試工程師負(fù)責(zé)測(cè)試整個(gè)程序是否可用、商務(wù)部門(mén)負(fù)責(zé)后期運(yùn)營(yíng)。中型互聯(lián)網(wǎng)公司人員也比較劃一，可是會(huì)缺少許多精致的地方，設(shè)計(jì)師會(huì)承擔(dān)更多的責(zé)任。

13. 小型互聯(lián)網(wǎng)公司

△ 小型互聯(lián)網(wǎng)公司結(jié)構(gòu)圖

小型互聯(lián)網(wǎng)公司人員配備較為齊全：高管負(fù)責(zé)決策和擔(dān)負(fù)產(chǎn)品經(jīng)理的角色、視覺(jué)設(shè)計(jì)師優(yōu)化交互并設(shè)計(jì)視覺(jué)后輸出切圖和標(biāo)注并且完成設(shè)計(jì)規(guī)范、前端工程師負(fù)責(zé)實(shí)現(xiàn)界面還原和與數(shù)據(jù)庫(kù)的對(duì)接、后端工程師負(fù)責(zé)程序構(gòu)架和數(shù)據(jù)庫(kù)結(jié)構(gòu)、測(cè)試工程師負(fù)責(zé)測(cè)試整個(gè)程序是否可用。小型互聯(lián)網(wǎng)公司人員很少，決策很快，但是因?yàn)槊啃∥邑?fù)責(zé)的部分太大，所以經(jīng)常有學(xué)雜而學(xué)不精的地方，并且人員較少所以提高更加寄托本身。

三、分工

1. Leader的工作

找投資：作為一個(gè)團(tuán)隊(duì)的領(lǐng)袖，第一要?jiǎng)?wù)是解決團(tuán)隊(duì)生存題目。所以投資是一個(gè)在產(chǎn)品沒(méi)有完成紅利模式構(gòu)建之前的好方法。我們?cè)诿嬖嚂r(shí)總會(huì)看到某公司處于 A輪或者 B輪融資階段。這是什么意思呢？投資根據(jù)項(xiàng)目成熟度分為：路演、天使輪、A輪、B輪、C輪、上市等狀況。隨著投資的階段也代表著項(xiàng)目的成熟度。這一點(diǎn)大家也可以在找工作時(shí)加以權(quán)衡。

招合伙人：一個(gè)好的團(tuán)隊(duì)領(lǐng)袖不應(yīng)該事事躬親。除了 CEO 之外還應(yīng)該找到 CTO、CTOO 等多個(gè)高管的人選。

△ 創(chuàng)業(yè)咖啡文化成為熱潮，圖為北京某咖啡館內(nèi)浩繁創(chuàng)業(yè)團(tuán)隊(duì)在工作。來(lái)源：網(wǎng)絡(luò)

2. 用戶(hù)研究的工作

用戶(hù)研究的體例重要有以下幾種：

可用性測(cè)試：通過(guò)篩選讓不同用戶(hù)群來(lái)對(duì)產(chǎn)品進(jìn)行操作，同時(shí)觀察人員在旁邊觀察并記錄?？捎眯詼y(cè)試的要求是用戶(hù)不可以是互聯(lián)網(wǎng)從業(yè)者而應(yīng)該是真實(shí)產(chǎn)品的用戶(hù)群體。

焦點(diǎn)小組：一樣平常有6-12人組成，由一名專(zhuān)業(yè)人士主持，依照訪(fǎng)談提要指導(dǎo)小組成員各抒己見(jiàn)，并記錄分析。并且在焦點(diǎn)小組的房間里會(huì)有一扇單向玻璃窗，用戶(hù)是看不到里面有誰(shuí)的。而在里面坐著的通常是開(kāi)發(fā)團(tuán)隊(duì)，他們可以清晰地看到用戶(hù)是如何吐槽他們的產(chǎn)品的，但是他們沒(méi)有權(quán)利直接和用戶(hù)進(jìn)行詮釋。

問(wèn)卷調(diào)查：可分為紙質(zhì)調(diào)查問(wèn)卷、網(wǎng)絡(luò)問(wèn)卷調(diào)查。依據(jù)產(chǎn)品列出必要了解的題目，制成文檔讓用戶(hù)回答。問(wèn)卷調(diào)查是一種成本比較低的用戶(hù)調(diào)查方法。

用戶(hù)訪(fǎng)談：邀約用戶(hù)往返答產(chǎn)品的相干題目，并記錄作出后續(xù)分析。用戶(hù)訪(fǎng)談?dòng)腥N情勢(shì)：結(jié)構(gòu)式訪(fǎng)談（根據(jù)之前寫(xiě)好的題目結(jié)構(gòu)）、半結(jié)構(gòu)式訪(fǎng)談（一半根據(jù)題目一半討論）、開(kāi)放式訪(fǎng)談（較為深入地和用戶(hù)交流，雙方都有自動(dòng)權(quán)來(lái)探究）。用戶(hù)訪(fǎng)談設(shè)置時(shí)要細(xì)致：用戶(hù)不可以是互聯(lián)網(wǎng)從業(yè)的專(zhuān)業(yè)人員、不可以提出誘導(dǎo)性題目、不要使用專(zhuān)業(yè)術(shù)語(yǔ)。

眼動(dòng)測(cè)試：使用特別的設(shè)備：眼動(dòng)儀來(lái)追蹤用戶(hù)使用產(chǎn)品時(shí)眼睛聚焦在哪里，盲區(qū)是哪里。比如一個(gè)網(wǎng)站通過(guò)眼動(dòng)測(cè)試可以知道用戶(hù)的視覺(jué)會(huì)主動(dòng)屏蔽網(wǎng)站的常見(jiàn)廣告位置，這時(shí)假如盼望進(jìn)步廣告的點(diǎn)擊，就必要把廣告位放置于用戶(hù)聚焦時(shí)間較長(zhǎng)的位置。眼動(dòng)測(cè)試的設(shè)備比較專(zhuān)業(yè)，通常在小公司較難開(kāi)展。

用戶(hù)畫(huà)像：根據(jù)產(chǎn)品的調(diào)性和用戶(hù)群體，用戶(hù)研究團(tuán)隊(duì)可以設(shè)計(jì)出一個(gè)用戶(hù)的模型，這種研究的體例被稱(chēng)為用戶(hù)畫(huà)像。用戶(hù)畫(huà)像是由帶有特性的標(biāo)簽組成的，通過(guò)這個(gè)標(biāo)簽我們可以更好地理解誰(shuí)在使用我們的產(chǎn)品。用戶(hù)畫(huà)像建立后，每個(gè)功能可以完成本身的用戶(hù)故事：用戶(hù)在什么場(chǎng)景下必要這個(gè)功能。以此，我們所設(shè)計(jì)的功能就會(huì)更接近用戶(hù)現(xiàn)實(shí)的必要。

用戶(hù)反饋和大數(shù)據(jù)分析：根據(jù)市場(chǎng)提供的反饋和數(shù)據(jù)得出客觀的判斷和合理的推斷。用戶(hù)反饋也是用戶(hù)研究的一個(gè)重點(diǎn)，用戶(hù)反饋重要是用戶(hù)通過(guò)產(chǎn)品的反饋入口自動(dòng)向開(kāi)發(fā)者提出的意見(jiàn)。

△ 圖為美劇《硅谷》中 焦點(diǎn)小組測(cè)試橋段

3. 產(chǎn)品經(jīng)理的工作

產(chǎn)品經(jīng)理負(fù)責(zé)和諧整個(gè)團(tuán)隊(duì)的進(jìn)程，工作十分復(fù)雜。產(chǎn)品經(jīng)理與整個(gè)團(tuán)隊(duì)都要打交道。

產(chǎn)品經(jīng)理的產(chǎn)出很大一部分是在溝通和和諧上。假如單純提煉輸出文件，有以下幾種：

PRD：即「產(chǎn)品需求文檔（Product Requirement Document）」，此文檔的受眾是項(xiàng)目組、開(kāi)發(fā)組、測(cè)試組、策劃組、體驗(yàn)組等等人員。文檔中表述了此產(chǎn)品的概念，規(guī)劃了產(chǎn)品各個(gè)步驟的完成時(shí)間，產(chǎn)出內(nèi)容包括產(chǎn)品界面、產(chǎn)品流程、功能需求、測(cè)試需求、體驗(yàn)需求等。

MRD：即「商業(yè)需求文檔（Business Requirement Document）」。此文檔的受眾是商務(wù)、運(yùn)營(yíng)、市場(chǎng)等人員。文檔表述的是產(chǎn)品的營(yíng)業(yè)模式，明確產(chǎn)品的用戶(hù)人群，產(chǎn)出內(nèi)容包括產(chǎn)品模式、營(yíng)業(yè)模式、運(yùn)營(yíng)模式市場(chǎng)模式等。

原型圖：也稱(chēng)為線(xiàn)框圖，即用線(xiàn)條、圖形繪制出的產(chǎn)品框架。

△ 圖為產(chǎn)品需求文檔PRD模板

4. 交互設(shè)計(jì)師的工作

交互圖：體現(xiàn)出操作舉動(dòng)后，對(duì)象之間的的關(guān)系，和觸發(fā)的下一步信息。與產(chǎn)品經(jīng)理設(shè)計(jì)出來(lái)的線(xiàn)框圖或原型圖不同的是，交互設(shè)計(jì)師完成的交互圖更加精致，并且可以在手機(jī)上運(yùn)行，模仿 APP 完成以后的使用。

△ 圖為交互圖案例

5. UI設(shè)計(jì)師的工作

優(yōu)化原型圖：根據(jù)詳細(xì)視覺(jué)元素對(duì)交互圖提出優(yōu)化方案。

視覺(jué)設(shè)計(jì)：依據(jù)人機(jī)交互、操作邏輯等原理，對(duì)原型圖進(jìn)行界面的設(shè)計(jì)與美化。

切圖：根據(jù)不同平臺(tái)尺寸，輸出響應(yīng)倍數(shù)的圖片。

標(biāo)注：行使工具在輸出網(wǎng)頁(yè)上標(biāo)注各個(gè)元素之間的尺寸與情況備注。

項(xiàng)目走查：開(kāi)發(fā)完成后，選擇主流機(jī)型進(jìn)行畫(huà)面審查工作。

視覺(jué)總結(jié)：對(duì)設(shè)計(jì)作品中的字體、字號(hào)、顏色、icon、模塊等元素做出展示并說(shuō)明。

△ 圖為UI設(shè)計(jì)稿

6. 前端工程師的工作

頁(yè)面前端工程師：完成頁(yè)面前端界面的編程工作。從視覺(jué)設(shè)計(jì)師手中接過(guò) PSD 后切圖并用頁(yè)面代碼重新組建好網(wǎng)頁(yè)，并且和數(shù)據(jù)庫(kù)端給到的接口聯(lián)調(diào)，沒(méi)題目后放到服務(wù)器上網(wǎng)站就可以訪(fǎng)問(wèn)了。使用的代碼語(yǔ)言重要有：HTML、CSS、JS 等。

蘋(píng)果軟件工程師：完成 iOS 平臺(tái)上 app 的程序開(kāi)發(fā)，并從視覺(jué)設(shè)計(jì)師手中接過(guò)切圖和標(biāo)注，完成客戶(hù)端編譯，并和后端工程師聯(lián)調(diào)后上線(xiàn)。重要使用的代碼語(yǔ)言有：Object-C、Swift 等。

安卓軟件工程師：也稱(chēng)為 Android 開(kāi)發(fā)工程師。完成安卓平臺(tái)上 APP 的開(kāi)發(fā)，并從視覺(jué)設(shè)計(jì)師手中接過(guò)切圖和標(biāo)注，完成客戶(hù)端編譯，并和后端工程師聯(lián)調(diào)后上線(xiàn)。重要使用的代碼語(yǔ)言有：java、Kotlin 等。

△ 圖為前端HTML代碼

7. 后端工程師的工作

數(shù)據(jù)庫(kù)編程：分為網(wǎng)狀數(shù)據(jù)庫(kù)、條理數(shù)據(jù)庫(kù)、關(guān)系數(shù)據(jù)庫(kù)，重要行使數(shù)據(jù)庫(kù)編程來(lái)存儲(chǔ)管理數(shù)據(jù)。重要使用的語(yǔ)言有：PHP、JSP、JAVA 等。

△ 圖為后端編譯部分代碼

8. 測(cè)試工程師的工作

△ 圖為黑盒白盒測(cè)試漫畫(huà)詮釋 來(lái)源：網(wǎng)絡(luò)

黑盒測(cè)試：以用戶(hù)角度測(cè)試，摸黑測(cè)試。這個(gè)測(cè)試方法就是按照用戶(hù)的視角摸黑測(cè)試。

白盒測(cè)試：按照產(chǎn)品需求文檔的功能點(diǎn)一一測(cè)試。

灰度測(cè)試：直接給30%的用戶(hù)發(fā)送新版本升級(jí)，70%用戶(hù)沒(méi)有發(fā)放灰度包。這種測(cè)試方法就是把我們的產(chǎn)品直接發(fā)放給部分用戶(hù)來(lái)聽(tīng)取反饋意見(jiàn)。

9. 運(yùn)營(yíng)人員的工作

運(yùn)營(yíng)項(xiàng)目：運(yùn)營(yíng)的詳細(xì)手段重要分為：渠道運(yùn)營(yíng)、內(nèi)容運(yùn)營(yíng)、活動(dòng)運(yùn)營(yíng)、品牌運(yùn)營(yíng)。即通過(guò)各種手段進(jìn)行不同的組合，將用戶(hù)與產(chǎn)品更好的連接，得到特定數(shù)據(jù)的增加，并完美產(chǎn)品價(jià)值、持續(xù)其商業(yè)價(jià)值。

△ 五谷雜糧 運(yùn)營(yíng)圖插畫(huà) 作者：馮珊珊

10. 維護(hù)人員的工作

維護(hù)產(chǎn)品所必要硬件的狀況。包括但不限于：

服務(wù)器：即提供計(jì)算服務(wù)的設(shè)備。服務(wù)器的組成包括處理器、硬盤(pán)、內(nèi)存等，與通俗計(jì)算機(jī)類(lèi)似，但是它的性能更壯大、更穩(wěn)固。一個(gè)互聯(lián)網(wǎng)公司的服務(wù)器一樣平?？梢砸揽吭诜?wù)器農(nóng)場(chǎng)里或者放在公司內(nèi)部。假如不是寄存那么就必要維護(hù)人員實(shí)時(shí)去關(guān)注。

域名：（Domain Name），將 ip 地址轉(zhuǎn)化為便于人們記憶的英文名稱(chēng)等。域名是按年收費(fèi)的。

11. 人力資源的工作

雇用：重要流程是確定人員需求、制訂雇用計(jì)劃、發(fā)布信息、人員甄選、辦理入職等工作。

離職：重要流程是告知離職信息、預(yù)備離職面談、辦理相干離職手續(xù)、配合交接工作、資料存檔等工作內(nèi)容。

福利薪酬管理：制訂企業(yè)員工的福利薪酬制度，日常考勤、績(jī)效考核、福利發(fā)放等工作。

四、產(chǎn)品設(shè)計(jì)思維 UED

1. UED

我們老聽(tīng) UED。UED 就是：User Experience Design（用戶(hù)體驗(yàn)設(shè)計(jì)）的簡(jiǎn)稱(chēng)。UED 是進(jìn)行產(chǎn)品策劃的主力之一，他們用本身的知識(shí)、經(jīng)驗(yàn)、設(shè)計(jì)能力拿出設(shè)計(jì)方案。能夠用本身的互聯(lián)網(wǎng)知識(shí)來(lái)設(shè)計(jì)出行業(yè)專(zhuān)家想實(shí)現(xiàn)的操作，而付諸以商業(yè)營(yíng)銷(xiāo)。UED 團(tuán)隊(duì)包括：交互設(shè)計(jì)師（Interaction Designer）、視覺(jué)設(shè)計(jì)師（Vision Designer）、用戶(hù)體驗(yàn)設(shè)計(jì)師（User Experience Designer）、用戶(hù)界面設(shè)計(jì)師（User Interface Designer）和前端開(kāi)發(fā)工程師（Web Developer）等等。

UED 是以用戶(hù)為中間的一種設(shè)計(jì)手段，以用戶(hù)需求為目標(biāo)而進(jìn)行的設(shè)計(jì)。設(shè)計(jì)過(guò)程看重以用戶(hù)為中間，用戶(hù)體驗(yàn)的概念從開(kāi)發(fā)的最早期就開(kāi)始進(jìn)入整個(gè)流程，并貫穿始終。可見(jiàn)，UED 并不是一個(gè)特指，而是指的是全體互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)的一種思維，就是以用戶(hù)為中間來(lái)做設(shè)計(jì)。這種理念貫穿到設(shè)計(jì)、代碼、運(yùn)營(yíng)等方方面面。UED 是一個(gè)以用戶(hù)體驗(yàn)為原則的團(tuán)隊(duì)。

2. UCD

UCD 是什么？UCD（User Centered Design）是指以用戶(hù)為中間的設(shè)計(jì)。是在設(shè)計(jì)過(guò)程中以用戶(hù)體驗(yàn)為設(shè)計(jì)決策的中間，強(qiáng)調(diào)用戶(hù)優(yōu)先的設(shè)計(jì)模式。在進(jìn)行產(chǎn)品設(shè)計(jì)、開(kāi)發(fā)、維護(hù)時(shí)從用戶(hù)的需求和用戶(hù)的感受出發(fā)，圍繞用戶(hù)為中間進(jìn)行產(chǎn)品設(shè)計(jì)、開(kāi)發(fā)及維護(hù)，而不是讓用戶(hù)去適應(yīng)產(chǎn)品。無(wú)論產(chǎn)品的使用流程、產(chǎn)品的信息架構(gòu)、人機(jī)交互體例等，以 UCD 為核心的設(shè)計(jì)都時(shí)刻高度關(guān)注并考慮用戶(hù)的使用風(fēng)俗、預(yù)期的交互體例、視覺(jué)感受等方面。

衡量一個(gè)好的以用戶(hù)為中間的產(chǎn)品設(shè)計(jì)，有三個(gè)維度：

• 產(chǎn)品的有用性（effectiveness）

• 產(chǎn)品的服從（efficiency）

• 用戶(hù)主觀寫(xiě)意度（satisfaction）

分外說(shuō)明：大家可能老誤會(huì) UED 和 UCD 是某個(gè)部門(mén)的緣故原由是由于許多大公司都設(shè)置了用戶(hù)體驗(yàn)部門(mén)，如騰訊網(wǎng)UED、阿里巴巴國(guó)際UED等團(tuán)隊(duì)。所以 UED 和 UCD 不光特指某一個(gè)部門(mén)，更是一種團(tuán)隊(duì)的模式。

五、設(shè)計(jì)師必備能力

經(jīng)過(guò)我們對(duì)上文的閱讀，我們知道了互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)師在團(tuán)隊(duì)中的重要職責(zé)。歸納一下，我們的工作重要是：第一，根據(jù)原型圖和 PRD 文檔優(yōu)化原型圖和交互圖的交互設(shè)計(jì)；第二，根據(jù)需求完成視覺(jué)設(shè)計(jì)并完成設(shè)計(jì)規(guī)范；第三，根據(jù)技術(shù)的需求完成切圖、標(biāo)注、命名PSD、設(shè)計(jì)動(dòng)效等工作；第四，偶然還會(huì)擔(dān)負(fù)起公司的運(yùn)營(yíng)設(shè)計(jì)和企業(yè)形象設(shè)計(jì)或者公司內(nèi)部的平面設(shè)計(jì)等。我們的工作越來(lái)越復(fù)雜，這就要求我們掌握的知識(shí)也要越來(lái)越多。

△ 目前互聯(lián)網(wǎng)設(shè)計(jì)師必要具備的三種能力

互聯(lián)網(wǎng)設(shè)計(jì)師重要必要掌握的能力重要是以下幾種：排版能力，交互知識(shí)，圖標(biāo)繪制，插畫(huà)繪制，手繪，運(yùn)營(yíng)圖設(shè)計(jì)能力，專(zhuān)題設(shè)計(jì)能力，網(wǎng)站設(shè)計(jì)能力，移動(dòng)端規(guī)范，基本代碼原理，展示作品的能力， PPT設(shè)計(jì)能力，表達(dá)能力，H5設(shè)計(jì)能力，LOGO設(shè)計(jì)等。

六、UI設(shè)計(jì)師所使用的軟件

1. 界面設(shè)計(jì)軟件

Adobe Photoshop 簡(jiǎn)稱(chēng) PS。三十年老店不會(huì)讓你失望。來(lái)自一個(gè)行業(yè)具有壟斷地位的公司的益處是你不用憂(yōu)慮研發(fā)公司倒閉而軟件制止更新，同樣因?yàn)殚_(kāi)發(fā)公司的實(shí)力所以 PS 支持 Windows 平臺(tái)和 Mac 平臺(tái)。這個(gè)益處是毋庸置疑的了。PS 的版本三十年中數(shù)不勝數(shù)，而我們應(yīng)該永久學(xué)習(xí)最新的版本。而且 PS 是 Sketch 和 AI 無(wú)法代替的，它的像素圖形處理，它設(shè)計(jì)運(yùn)營(yíng)圖與其他圖像的能力無(wú)所匹敵。

Adobe Iullstrator 簡(jiǎn)稱(chēng) AI。同樣來(lái)自母公司 Adobe，擁有比 PS 稍微年輕一點(diǎn)的歷史。因?yàn)樗麄兌际?Adobe 旗下的軟件，所以?xún)蓚€(gè)軟件可以互通甚至直接拷貝，那么配合度要比不同廠家的軟件高得多了。PS 在 UI設(shè)計(jì)中重要負(fù)責(zé)界面設(shè)計(jì)和圖形處理，AI可以負(fù)責(zé)線(xiàn)性圖標(biāo)的設(shè)計(jì)，設(shè)計(jì)后直接拷貝進(jìn) PS 里即可。不能直接用 AI 作圖的緣故原由是 AI 不具備切圖和標(biāo)注與團(tuán)隊(duì)合作等多種 PS 可以輕松辦到的事情。

看完了上兩種軟件你肯定照舊心有不甘盼望用 AI 的矢量作圖功能，配合 PS 可以切圖標(biāo)注的擴(kuò)展性對(duì)吧，那么就誕生出了 Sketch 這款軟件。在作圖的功能上更加接近 AI，擁有矢量圖形功能，而切圖標(biāo)注甚至比 PS 更加方便快捷。遺憾的是它并非 Adobe 出品，所以和 PS 與 AI 的協(xié)作上差了一些。并且因?yàn)椴皇谴蠊境銎房傆幸恍┎环判模罕热缗c蘋(píng)果決裂后，Sketch 必要在官方購(gòu)買(mǎi)并安裝軟件包而并非直接從蘋(píng)果下載；比如因?yàn)?PC 盜版緊張臨時(shí)在 Windows 體系下是不可用的等等。但是總之這款軟件如今很受 UI設(shè)計(jì)師喜好。

Adobe XD 全稱(chēng) Adobe Experience Design。集原型、設(shè)計(jì)和交互于一體的設(shè)計(jì)軟件。 傳言將會(huì)是 skech 的勁敵。廠商背景決定了它支持 Windows 操作體系，而且 XD 的上風(fēng)是原型圖和設(shè)計(jì)都可以搞定。所以在國(guó)外比較流行，國(guó)內(nèi)設(shè)計(jì)業(yè)界鮮有偕行使用，所以不是必學(xué)。

Adobe Fireworks 列出來(lái)這款軟件并不代表大家要學(xué)習(xí)，由于這款初心是為頁(yè)面設(shè)計(jì)師所設(shè)計(jì)的軟件已經(jīng)退役了。

2. 動(dòng)效軟件

Adobe After Effects 因?yàn)橥瑯觼?lái)自 Adobe，所以該軟件和 PS 與 AI 都可以直接導(dǎo)入，互通有無(wú)。這一點(diǎn)特別很是的爽。但是本軟件的初心并不是做 UI 的動(dòng)效設(shè)計(jì)，而是影視后期。所以首先我們的限定是使用這款軟件完成的動(dòng)效只可以沿著時(shí)間線(xiàn)播放，而不可以交互。其次這款軟件復(fù)雜的插件也都是為了影視后期而設(shè)計(jì)的，對(duì)于新手學(xué)習(xí)比較難。但是總體來(lái)說(shuō)照舊一款大家必學(xué)的軟件。

Sketch 沒(méi)有動(dòng)效，小伙伴怎么辦？別發(fā)急，Princple 出現(xiàn)了。這款軟件可以直接點(diǎn)擊大鉆石導(dǎo)入 Sketch 文件并設(shè)計(jì)出在手機(jī)可交互的動(dòng)效，堪稱(chēng) UI設(shè)計(jì)師的福音。但是不足之處和 Sketch 一樣，就是不支持 Windows 體系。

Flinto 交互原型利器，只可以 Mac 平臺(tái)使用。

Origami 交互原型和動(dòng)效的一個(gè)輕便的工具，同樣只可以 Mac 平臺(tái)使用。

Framer 交互設(shè)計(jì)和原型圖設(shè)計(jì)工具，偏代碼方向。只可以 Mac 平臺(tái)使用。

3. 原型圖工具

墨刀，國(guó)產(chǎn)原型圖工具，語(yǔ)言上風(fēng)加上服務(wù)器速度相應(yīng)快，而且是一款 Web 應(yīng)用，也就是說(shuō)通過(guò)欣賞器訪(fǎng)問(wèn)網(wǎng)站即可設(shè)計(jì)出原型圖來(lái)。

Axure RP 老牌產(chǎn)品經(jīng)理原型圖工具，有多式多樣的插件可以實(shí)現(xiàn)多種結(jié)果的原型圖。

4. 前端工具

Adobe Dreamweaver 前段編譯工具，Adobe 生產(chǎn)，有設(shè)計(jì)和代碼模式。

Adobe Muse Adobe 公司生產(chǎn)的網(wǎng)站開(kāi)發(fā)工具，支持可視化設(shè)計(jì)，并且生產(chǎn)出頁(yè)面前端代碼。

七、好UI的標(biāo)準(zhǔn)是什么？

1. 好用

以用戶(hù)為中間

2. 功能清晰

Don’t make me think

3. 悅目

• 知足用戶(hù)畫(huà)像群的審美

• 達(dá)到需求方的目的

• 比要求完成的更美；審美教育任務(wù)

4. 好實(shí)現(xiàn)

• 可以實(shí)現(xiàn)：設(shè)計(jì)須可以實(shí)現(xiàn)

• 服從：須考慮對(duì)載體服從和性能的影響

• 為實(shí)現(xiàn)設(shè)計(jì)：回頭根據(jù)實(shí)現(xiàn)角度調(diào)整

無(wú)論做什么，只要你擁有一套好的方法論加上刻意演習(xí)都會(huì)獲得很好的效果。互聯(lián)網(wǎng)設(shè)計(jì)是崇尚經(jīng)驗(yàn)的工作，隨著經(jīng)驗(yàn)的積累和方法論的沉淀，我們肯定能夠取得不錯(cuò)的提高。盼望真正喜好互聯(lián)網(wǎng)設(shè)計(jì)的人都能夠?qū)崿F(xiàn)本身的職業(yè)目標(biāo)。

迎接關(guān)注作者的微信公眾號(hào)：「西見(jiàn)」

圖片素材作者：Dmitrij