如果產(chǎn)品經(jīng)理是個(gè)武林門派，那么拜入師門后首先要學(xué)習(xí)的不是具體的招式，編寫文檔、繪制原型，而是本門的武功心法，學(xué)習(xí)產(chǎn)品設(shè)計(jì)的思維框架，理解產(chǎn)品設(shè)計(jì)的底層邏輯，這樣才能更好的指導(dǎo)具體的工作事務(wù)。
今天，我們一起來讀這本產(chǎn)品經(jīng)理心法，《用戶體驗(yàn)要素》。這本書出版于20年前，當(dāng)時(shí)的互聯(lián)網(wǎng)世界遠(yuǎn)沒有今天這么繁華，而書中提到的用戶體驗(yàn)五要素模型卻非常經(jīng)典，至今仍然被各大互聯(lián)網(wǎng)公司產(chǎn)品經(jīng)理、UI設(shè)計(jì)師們廣泛應(yīng)用。但這本書也存在稍顯晦澀的翻譯問題，以及部分已不符合現(xiàn)在互聯(lián)網(wǎng)發(fā)展的內(nèi)容，我將結(jié)合目前互聯(lián)網(wǎng)產(chǎn)品經(jīng)理的現(xiàn)狀以及書中的五層分析框架，化繁為簡(jiǎn)，對(duì)本書進(jìn)行解讀。
這本書的副標(biāo)題，點(diǎn)出了產(chǎn)品設(shè)計(jì)的核心理念——以用戶為中心！在產(chǎn)品開發(fā)中的每一步，都要把用戶列入考慮范圍。作者將設(shè)計(jì)用戶體驗(yàn)的工作分解為5大要素，也就是五個(gè)層面，分別是戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層，他們由下至上環(huán)環(huán)相扣、層層遞進(jìn)。對(duì)用戶來說，他使用產(chǎn)品時(shí)是從上到下的順序來體驗(yàn)產(chǎn)品。而對(duì)產(chǎn)品團(tuán)隊(duì)來說，順序恰好相反，產(chǎn)品設(shè)計(jì)是自下而上、層層遞進(jìn)式的思考、規(guī)劃產(chǎn)品，是一個(gè)從想法到實(shí)施、從抽象到具體的過程。
我們以產(chǎn)品經(jīng)理的視角自下而上分別來看看五個(gè)層次，每個(gè)層次都從是什么、誰來做、輸出三方面來分析，首先是戰(zhàn)略層。
戰(zhàn)略層需要回答“為什么做這個(gè)產(chǎn)品？”
具體而言，企業(yè)通過這個(gè)產(chǎn)品要得到的是什么？用戶通過這個(gè)產(chǎn)品要得到的是什么？首先找到企業(yè)和用戶的訴求，明確產(chǎn)品目標(biāo)、用戶需求。
這部分工作一般是由企業(yè)高層完成產(chǎn)品目標(biāo)，產(chǎn)品經(jīng)理深挖用戶痛點(diǎn)、理解用戶需求，在具體的工作中需要輸出BRD（Business Requirement Document，商業(yè)需求文檔）和MRD（Market Requirement Document，市場(chǎng)需求文檔）文檔，涵蓋產(chǎn)品商業(yè)價(jià)值、用戶痛點(diǎn)、市場(chǎng)競(jìng)爭(zhēng)態(tài)勢(shì)等。
舉個(gè)例子，微信讀書這款A(yù)PP在戰(zhàn)略層，騰訊要得到的是：通過微信讀書，完善文娛產(chǎn)品生態(tài)，提升品牌形象及品牌忠誠度；用戶要得到的是，閱讀喜歡的文字內(nèi)容，實(shí)現(xiàn)精神滿足與自我提升。
戰(zhàn)略層之上是范圍層，范圍層需要回答“產(chǎn)品要做哪些功能？
在明確戰(zhàn)略的基礎(chǔ)上，范圍層需要把抽象的戰(zhàn)略拆解為具體的產(chǎn)品需求，并轉(zhuǎn)化為踏實(shí)可見的產(chǎn)品功能與內(nèi)容，最終獲得一份產(chǎn)品的功能清單。這是產(chǎn)品經(jīng)理的核心工作之一，需要將確定的產(chǎn)品功能落實(shí)在PRD（Product Requirement Document，產(chǎn)品需求文檔）文檔中，清晰描述產(chǎn)品功能架構(gòu)、各板塊需求說明等。
舉個(gè)例子，在范圍層，針對(duì)用戶，微信讀書需要解決通過互聯(lián)網(wǎng)閱讀書籍的問題，具體拆分為找書、存書、讀書、做筆記等需求，于是相應(yīng)的，設(shè)計(jì)出了找書的書城、存書的書架、讀書的筆記等功能。
范圍層之上是結(jié)構(gòu)層，結(jié)構(gòu)層需要完成“以用戶體驗(yàn)最優(yōu)的方式組織各功能”。
范圍層已經(jīng)梳理了產(chǎn)品的功能清單，但現(xiàn)在所有功能是分散的、沒有主次和章法的，結(jié)構(gòu)層采用不同的信息架構(gòu)、流程設(shè)計(jì)，將清單中扁平的功能串聯(lián)起來，變得立體。具體來說，表現(xiàn)為產(chǎn)品有哪些頁面，功能如何在各個(gè)頁面分布，各個(gè)頁面是如何跳轉(zhuǎn)的等等。一個(gè)好的結(jié)構(gòu)能夠讓產(chǎn)品用起來順手，讓用戶擁有流暢、高效、清晰的“行動(dòng)路線”。這在產(chǎn)品經(jīng)理的工作中，需要落實(shí)在PRD（Product Requirement Document，產(chǎn)品需求文檔）文檔中，包括產(chǎn)品結(jié)構(gòu)、信息架構(gòu)、頁面流程等。
繼續(xù)看微信讀書的結(jié)構(gòu)層，微信讀書使用邏輯清晰的層級(jí)結(jié)構(gòu)，構(gòu)建了“5個(gè)主頁面+4個(gè)核心頁面+N個(gè)延伸頁面”的結(jié)構(gòu)，主頁面覆蓋了找書、存書、找文章、賬戶管理四個(gè)主要場(chǎng)景，核心頁面服務(wù)于讀書、讀文章這兩大用戶的核心訴求，整個(gè)產(chǎn)品架構(gòu)簡(jiǎn)潔、清晰、高效。
結(jié)構(gòu)層之上是框架層，框架層需要完成“以用戶操作體驗(yàn)最優(yōu)的方式布局頁面元素”。
每個(gè)頁面的流轉(zhuǎn)關(guān)系與功能分布已經(jīng)由結(jié)構(gòu)層梳理完成，框架層在此基礎(chǔ)上，考慮頁面的元素布局與交互關(guān)系，產(chǎn)品經(jīng)理根據(jù)每個(gè)頁面的功能和特點(diǎn)，去擺放各個(gè)組件，包括按鈕、表格、照片、文本等元素，最終輸出產(chǎn)品原型圖。
那微信讀書的框架層是怎么設(shè)計(jì)的呢，以“書城”頁面為例，頁面標(biāo)題與搜索欄位于頁面頂部，然后是8個(gè)分類導(dǎo)航。除此之外“猜你喜歡”部分成了書城頁面的視覺焦點(diǎn)，再往下就是不同維度、不同分類的書籍推薦。該頁面自上而下、以瀑布流的形式對(duì)各元素進(jìn)行布局，符合手機(jī)端用戶的瀏覽習(xí)慣，層次分明、邏輯清晰的設(shè)置了各類元素。
框架層之上是表現(xiàn)層，表現(xiàn)層需要完成“以用戶感知體驗(yàn)最優(yōu)的方式設(shè)計(jì)頁面”。
表現(xiàn)層是用戶最終接觸到的層面，在表現(xiàn)層需要實(shí)現(xiàn)其他四個(gè)層面的所有目標(biāo)，并同時(shí)滿足用戶的感受。具體來說，用戶接觸到互聯(lián)網(wǎng)產(chǎn)品時(shí)，產(chǎn)品的頁面排版、背景顏色、圖標(biāo)樣式、圖片質(zhì)感等視覺感受，以及APP中操作的音效、震動(dòng)等聽覺與觸覺感受等，這些都是服務(wù)于用戶感知的表現(xiàn)層。日常工作中，由UI設(shè)計(jì)師完成，最終輸出高保真原型圖，以及視覺切圖。
再看微信讀書，他在表現(xiàn)層延續(xù)了微信干凈、簡(jiǎn)潔的風(fēng)格，微信讀書整體采用扁平化的設(shè)計(jì)風(fēng)格，化繁為簡(jiǎn)、去除冗余，采用大卡片式的布局，利用留白直觀突出書籍，所有頁面沒有過多的裝飾，從視覺層面讓用戶沉浸在讀書的氛圍中。
總的來說，用戶體驗(yàn)五要素這套經(jīng)典的產(chǎn)品設(shè)計(jì)思維模型，每位產(chǎn)品經(jīng)理都要銘記于心，潛心修煉，讓產(chǎn)品更好的服務(wù)每一個(gè)用戶。最后，讓我們一起來復(fù)習(xí)一下用戶體驗(yàn)五要素的心法要訣“一切以用戶為中心，戰(zhàn)略層，確定目標(biāo)、范圍層，梳理功能清單、結(jié)構(gòu)層，明確頁面流轉(zhuǎn)、框架層，精準(zhǔn)布局元素、表現(xiàn)層，完成視覺呈現(xiàn)”。
全書完整思維導(dǎo)圖
