UCD，User Centered Design, 以用戶為中心的設(shè)計(jì)。這個(gè)概念其實(shí)很早就有了：

1955年，《為人的設(shè)計(jì)》

美國(guó)著名工業(yè)設(shè)計(jì)師Henry Dreyfuss寫下了著名的設(shè)計(jì)書《為人的設(shè)計(jì)》（Designing for People）。

《為人的設(shè)計(jì)》（Designing for People）

在書中，他寫道：

當(dāng)產(chǎn)品和用戶之間的連接點(diǎn)變成了摩擦點(diǎn)，那么工業(yè)設(shè)計(jì)師的設(shè)計(jì)就是失敗的。

相反，如果產(chǎn)品能讓人們感覺更安全，更舒適，更樂于購(gòu)買，更加高效，甚至只是讓人們單純地更加快樂，那么此處的設(shè)計(jì)師是成功的。

1995: Don Norman，第一個(gè)用戶體驗(yàn)專家

身為電氣工程師和認(rèn)知科學(xué)家的Don Norman加盟蘋果公司之后，幫助這家傳奇企業(yè)對(duì)他們以人為核心的產(chǎn)品線進(jìn)行研究和設(shè)計(jì)。而他的職位則被命名為“用戶體驗(yàn)架構(gòu)師”（User Experience Architect），這也是首個(gè)用戶體驗(yàn)職位。

Don Norman，用戶體驗(yàn)設(shè)計(jì)師鼻祖

在這個(gè)階段，Don Norman 還撰寫了經(jīng)典的設(shè)計(jì)書《設(shè)計(jì)心理學(xué)》（The Design of Everyday Things），直到今天它依然是設(shè)計(jì)師的必讀書。這個(gè)人在TED上有段演講很經(jīng)典，感興趣的童鞋可以看看：http://www.tudou.com/programs/view/nwzOgoOzaFo/

那么，在如今的互聯(lián)網(wǎng)產(chǎn)業(yè)中，隨著產(chǎn)品的同質(zhì)化，用戶體驗(yàn)越來(lái)越被提升到一個(gè)不置可否的高度，這種人與屏幕之間的交互也逐漸變成了一種產(chǎn)業(yè)，衍生出互聯(lián)網(wǎng)行業(yè)特有的工作模式：“以用戶為中心的產(chǎn)品設(shè)計(jì)和開發(fā)”。

以用戶為中心的產(chǎn)品設(shè)計(jì)流程

以用戶為中心的產(chǎn)品設(shè)計(jì)流程

從這張圖，也許大家看不出“以用戶為中心”體現(xiàn)在哪里，接下來(lái)，就對(duì)每個(gè)步驟做一些詳細(xì)解釋，包括每個(gè)步驟的關(guān)注點(diǎn)和方法等。另外請(qǐng)注意，這8步僅僅是屬于一個(gè)迭代，基于用戶反饋的迭代優(yōu)化也是互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的精髓。

愿景

愿景是什么？

公司戰(zhàn)略層面需要達(dá)到的目標(biāo)，如：搶先占有市場(chǎng)，提高市場(chǎng)滲透率，培養(yǎng)用戶習(xí)慣，提升營(yíng)收等等。

這個(gè)最最high-level的戰(zhàn)略層對(duì)于以下的所有活動(dòng)起著決定性作用，任何一步需要做決策的地方，都需要回顧這一決策是否支持公司戰(zhàn)略？

為了幫助理解，在這里，我們舉個(gè)例子，假設(shè)我們成立一家科技公司，計(jì)劃做一個(gè)找圖應(yīng)用，在實(shí)現(xiàn)一定流量后，通過推送廣告來(lái)進(jìn)行流量變現(xiàn)，達(dá)到公司營(yíng)收目的。

分析研究

這里的分析研究大概可以分為兩類：競(jìng)品分析和用戶研究。

分析研究關(guān)注點(diǎn)和方法

競(jìng)品分析

這里可以參考《用戶體驗(yàn)的要素》里面提到的五個(gè)要素進(jìn)行分析，包括戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層，會(huì)分析的很全面。至于具體每一層代表什么意思，大家可以去問度娘，也建議大家能看下這本書，很有指導(dǎo)意義。

例子：前面提到要做一個(gè)找圖應(yīng)用，因此競(jìng)品我選擇分析“百度圖片”APP。

百度圖片APP

優(yōu)點(diǎn)：百度自家產(chǎn)品，無(wú)論從圖片數(shù)量，技術(shù)能力，用戶認(rèn)可度而言都有極高優(yōu)勢(shì)。

缺點(diǎn)：找圖增加了在APP內(nèi)社交互動(dòng)的屬性，淡化了“找圖”這一核心屬性；搜索的圖片base在百度圖片庫(kù)上，搜索精準(zhǔn)度有待提高；圖片質(zhì)量不高，有水印，圖片模糊等。

機(jī)會(huì)點(diǎn)：強(qiáng)化“找圖”屬性，提供精準(zhǔn)搜索，高質(zhì)量圖片

百度圖片APP界面

用戶研究

用戶研究的目的：挖掘出用戶特征 + 需求

這里提到一個(gè)方法：人物角色，這里的人不是真實(shí)的人，但他們是基于我們觀察到的那些真是的人的行為和動(dòng)機(jī)抽象出來(lái)的人物原型。這是一種幫助團(tuán)隊(duì)成員建立同理心的方法，并且也是一種決策依據(jù)，幫助大家達(dá)成共識(shí)。

例子：

人物角色

需求過濾

需求過濾的關(guān)注點(diǎn)和方法

需求是什么？

什么用戶群，在什么場(chǎng)景下，可以通過產(chǎn)品做什么事？需求也是機(jī)會(huì)點(diǎn)，用戶的某個(gè)場(chǎng)景的痛點(diǎn)未被滿足，便產(chǎn)生了需求

基于場(chǎng)景的需求：

1. 在關(guān)燈的房間，用戶用閱讀軟件閱讀…
2. 在接完朋友電話，用戶通過通話列表存儲(chǔ)聯(lián)系人信息…

在過濾需求之前，我們通過頭腦風(fēng)暴發(fā)散出任何能想到的基于場(chǎng)景的需求，還是沿用之前的例子，列出所有的需求：

1. ?在發(fā)朋友圈的時(shí)候，找到合適的圖來(lái)配合此刻的心情和文字
2. ?圖片質(zhì)量要高，不能有水印，不能太模糊
3. 可以支持圖片的自定義處理
4. 智能的通過篩選本地圖片來(lái)推薦用戶配哪張圖
5. 搜索按鈕旁邊設(shè)置一個(gè)高級(jí)搜索條件

這些需求里面有一些是假需求，大家可以試著猜一下，答案在最末尾公布。在過濾假需求和技術(shù)無(wú)法滿足的需求后，剩下的這些需求，可以嘗試使用storyboard的形式表達(dá)出來(lái)，即”用戶+場(chǎng)景”來(lái)表達(dá)。

功能&數(shù)據(jù)確定

這一步是將過濾后的需求轉(zhuǎn)化為功能，這一步也需要你從開發(fā)的視角去考慮，這些需求的技術(shù)實(shí)現(xiàn)難度有多大，如何設(shè)定規(guī)則既能一定程度滿足用戶需求也符合現(xiàn)有技術(shù)能力。如上一步提到的”在發(fā)朋友圈的時(shí)候，找到合適的圖來(lái)配合此刻的心情和文字”這一需求，轉(zhuǎn)化為功能便是”支持通過關(guān)鍵字模糊搜索圖片”，為了實(shí)現(xiàn)這個(gè)功能，我們需要制定一套搜索機(jī)制，包括分詞機(jī)制，數(shù)據(jù)庫(kù)內(nèi)圖片的分類和標(biāo)簽系統(tǒng)。還需要思考搜索結(jié)果的排序和容錯(cuò)提醒等功能。當(dāng)然，咱們團(tuán)隊(duì)能做到哪一步，需要你和開發(fā)溝通，了解開發(fā)現(xiàn)狀，進(jìn)而規(guī)劃產(chǎn)品，保證你的產(chǎn)品是可以實(shí)現(xiàn)可以落地的。

舉個(gè)栗子，拿百度圖片來(lái)看一下：

概要設(shè)計(jì)的關(guān)注點(diǎn)和方法

信息架構(gòu)設(shè)計(jì)

是指將信息變成一個(gè)經(jīng)過組織、歸類、以及具有瀏覽體系的組合結(jié)構(gòu)，這個(gè)活特別適合處女座，整理控~ 包括組織系統(tǒng)，導(dǎo)航系統(tǒng)，搜索系統(tǒng)，標(biāo)簽系統(tǒng)。

（1) 組織系統(tǒng)：用一定的規(guī)則，把信息員分堆，并且劃分好之間的關(guān)系。組織系統(tǒng)可以由樹形結(jié)構(gòu)來(lái)展示，也就是俗稱的面包屑。類目系統(tǒng)和標(biāo)簽系統(tǒng)也常拿來(lái)對(duì)前端頁(yè)面進(jìn)行分類展示。

微信組織系統(tǒng)

(2) 導(dǎo)航：從一個(gè)地方到另一個(gè)地方。在原本的組織結(jié)構(gòu)基礎(chǔ)上加上箭頭。組織是房間格局，導(dǎo)航就是門窗。

在設(shè)計(jì)搜索的時(shí)候，需要考慮搜索聯(lián)想的分類和呈現(xiàn)，搜索結(jié)果的排序和高亮，容錯(cuò)提示，搜索狀態(tài)和商業(yè)策略。最后一點(diǎn)是搜索引擎賺錢的保證。

(4) 標(biāo)簽：在導(dǎo)航那里就提到了標(biāo)簽，這是一種為了迎合用戶需求和設(shè)計(jì)的一種將網(wǎng)站內(nèi)容快速分類展示的設(shè)計(jì)方式。

界面框架設(shè)計(jì)是對(duì)信息架構(gòu)的進(jìn)一步細(xì)化，常用的方法是原型法，常用的工具有Axure RP，PPT，Word，Sketch等，展現(xiàn)形式有界面圖片，圖片+文字說(shuō)明，界面流程等，不受限于工具，能表達(dá)清楚即可。

關(guān)鍵任務(wù)流設(shè)計(jì)是基于任務(wù)的，將在不同界面跳轉(zhuǎn)的過程表現(xiàn)出來(lái)。例如，在微信發(fā)朋友圈，這是一個(gè)任務(wù)，用戶需要五步來(lái)完成，第一步進(jìn)入朋友圈，第二步按下頁(yè)面右上角的照相機(jī)按鈕，長(zhǎng)按和短按效果不一樣，第三步選擇圖片或輸入文字，第四步選擇地點(diǎn)和發(fā)送的對(duì)象，第五步點(diǎn)擊發(fā)送。這五步，會(huì)在三個(gè)到四個(gè)界面跳轉(zhuǎn)，界面+跳轉(zhuǎn)路徑是任務(wù)流設(shè)計(jì)的常見形式。

細(xì)節(jié)設(shè)計(jì)

細(xì)節(jié)設(shè)計(jì)可以理解為對(duì)線索、操作、反饋的設(shè)計(jì)。

發(fā)微博的線索，操作，反饋

(1) 線索的視覺屬性：包括形狀，尺寸，顏色，位置，紋理，方向

視覺元素的組織來(lái)表現(xiàn)線索

再來(lái)看看下面這個(gè)栗子：

大麥網(wǎng)首頁(yè)

“猜你喜歡”顏色和”今日推薦”，”即將開售/預(yù)售”不同，表示當(dāng)前頁(yè)。海報(bào)最吸引眼球，所以尺寸比文字大很多。價(jià)格的顏色最為凸顯，也是用戶會(huì)優(yōu)先關(guān)注的元素。上方的Tab框用灰色細(xì)線包圍，表示與下方內(nèi)容的隔離，并且上方的信息顯然比下方更重要。

總而言之，就是利用視覺屬性將頁(yè)面進(jìn)行組織分類，區(qū)分主次，將用戶關(guān)心的信息凸出放大顯示，保證視覺的美觀的基礎(chǔ)上，能引導(dǎo)用戶完成需要他們完成的操作。

(2) 操作是施加在對(duì)象上的行為，是一種輸入過程。

回想上面發(fā)微博的栗子，為了引導(dǎo)用戶操作，需要設(shè)計(jì)觸發(fā)器，保證它容易被識(shí)別，容易被理解。

(3) 反饋是對(duì)操作的反應(yīng)，也是下一步的線索。通俗來(lái)說(shuō)，就是讓用戶知道現(xiàn)在神馬情況？結(jié)果咧？下一步要做什么？

狀態(tài)的反饋

需要考慮的狀態(tài)：勾選，懸停，移開，進(jìn)入熱區(qū)，拖動(dòng)，按下，未點(diǎn)擊，左右翻動(dòng)，上下翻動(dòng)，flip-flop button(類似開關(guān)按鈕)，進(jìn)度條… 做這些設(shè)計(jì)的主要目的是緩解用戶的焦慮…

研發(fā)支持&設(shè)計(jì)驗(yàn)收

這兩部分在產(chǎn)品經(jīng)理的工作中占的比重會(huì)相對(duì)較少，在完成設(shè)計(jì)后，需要找程序猿來(lái)實(shí)現(xiàn)，在實(shí)現(xiàn)的過程中，也需要和他們密切溝通，保證他們開發(fā)出來(lái)的產(chǎn)品和設(shè)計(jì)的一樣，當(dāng)然這種情況是很理想的，呵呵，現(xiàn)實(shí)總是很骨感。當(dāng)然，作為一枚產(chǎn)品，如果能了解技術(shù)，和猿類有更多共同話題，產(chǎn)品出來(lái)的效果會(huì)更好。

等到開發(fā)測(cè)試完成之后，產(chǎn)品經(jīng)理也需要在生產(chǎn)環(huán)境進(jìn)行驗(yàn)收，驗(yàn)收功能開發(fā)的完整度。

本文系作者@舊無(wú)痕 授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。