《用戶體驗(yàn)要素 以用戶為中心的產(chǎn)品設(shè)計(jì)》Jesse James Garrett 美

后感：

整體來(lái)說(shuō)，對(duì)于一個(gè)產(chǎn)品的思考很完整，將一個(gè)產(chǎn)品劃分為信息類產(chǎn)品和功能類產(chǎn)品這一點(diǎn)讓我覺(jué)得很亮眼，因?yàn)檫@樣，學(xué)習(xí)產(chǎn)品的人就可以很清楚地了解到自己應(yīng)該從哪個(gè)知識(shí)入手。

但是可能是由于這個(gè)書本實(shí)在是太久之前的了，大理論后端的實(shí)際操作，現(xiàn)在大家都已經(jīng)明晰細(xì)節(jié)概念或者做法（已經(jīng)是公認(rèn)的說(shuō)話）在這本書描述得很直覺(jué)，沒(méi)有什么條理，也不是很全面。

也可能是所謂的“交互設(shè)計(jì)入門書籍吧”，核心理論基礎(chǔ)建設(shè)

從內(nèi)容上來(lái)說(shuō)，每個(gè)層級(jí)的工作內(nèi)容很含混沒(méi)有明確的界限，沒(méi)有實(shí)際工作的人可能會(huì)覺(jué)得很困惑，似乎所有都是自己的工作，但是仔細(xì)一想，這個(gè)本書要表達(dá)的，或許不是“都要完成”，都是“都要了解”。

工作中，UI設(shè)計(jì)師，交互設(shè)計(jì)師，產(chǎn)品經(jīng)理等等，每一個(gè)部分的人雖然會(huì)因?yàn)楣局贫鹊牟町惞ぷ鲀?nèi)容有或多或少的偏差，但是也會(huì)需要了解到其他部分的思路，這種整體考量的思路可能一定程度上算是含混的（有點(diǎn)全棧的意思），卻反而是幫助所有角色的人能夠更好地完成本職工作。

思考：

1.信息架構(gòu)師是怎么思考一個(gè)網(wǎng)站的？?jī)?nèi)容管理系統(tǒng)？

2.整理現(xiàn)在大致了解的調(diào)研的方法；了解人類學(xué)社會(huì)學(xué)中的觀察法；了解消費(fèi)心態(tài)檔案具體內(nèi)容

3.HBO美劇，SilliconValley 硅谷，寫實(shí)的硅谷發(fā)展真人秀，查北極星指標(biāo)的時(shí)候查到的

4.范圍蠕變

下面是筆記

一、五個(gè)層級(jí)

1.1五個(gè)層級(jí)的定義

表現(xiàn)層：可以看到的（UI）（站在用戶直接視角）

框架層：按鈕，控件，照片和文本區(qū)域的位置，框架層用于優(yōu)化設(shè)計(jì)布局，以達(dá)到這些元素最大的效果和效率（基本交互：文字圖片的位置，主次）（站在用戶操作視角）

結(jié)構(gòu)層：框架是結(jié)構(gòu)層的具體表達(dá)方式，（深層交互+產(chǎn)品設(shè)計(jì)邏輯），產(chǎn)品路線圖

范圍層：確定網(wǎng)站各種特性和功能最合適的組合方式，而這些構(gòu)成了網(wǎng)站的范圍層（產(chǎn)品要實(shí)現(xiàn)什么功能）

戰(zhàn)略層：網(wǎng)站的范圍層基本是有網(wǎng)站的戰(zhàn)略層決定的（用戶，用戶需求，產(chǎn)品需求，產(chǎn)品類別，商業(yè)模式和盈利模式等）

1.2層級(jí)解釋

網(wǎng)頁(yè)是 既屬于功能型也屬于信息型的產(chǎn)品

所以要從功能和信息兩側(cè)去考慮每一個(gè)部分的具體內(nèi)容

功能型產(chǎn)品：關(guān)注的流程的完整性，如何去完成一個(gè)任務(wù)，網(wǎng)站對(duì)于此時(shí)人來(lái)說(shuō)是一個(gè)工具

信息型產(chǎn)品：關(guān)注點(diǎn)是信息，網(wǎng)站應(yīng)該提供什么信息，對(duì)用戶的意義是什么

1.3作用邏輯：

上一層面的決定必須依循下一層面

實(shí)際情況是，較高層面的改變有可能會(huì)促進(jìn)團(tuán)體對(duì)產(chǎn)品的較低層面進(jìn)行重新評(píng)估和完善，所以是雙方面的，在改變的過(guò)程中實(shí)現(xiàn)整體一致性的動(dòng)態(tài)平衡

每一層工作在下一個(gè)層面結(jié)束之前完成，但是不能再下一層面工作完成之間結(jié)束。有點(diǎn)拗口，看圖（沒(méi)有很理解）

二、戰(zhàn)略層：

2.1目的或內(nèi)容：

明確用戶需求；產(chǎn)品目標(biāo)

2.2要求

1要有目標(biāo)；要有北極星指標(biāo)（詳情看《增長(zhǎng)黑客》，對(duì)應(yīng)有 虛榮指標(biāo)，“Vanity Metric”）

2 用戶細(xì)分：（可參考“如何進(jìn)行用戶畫像”）

一般來(lái)說(shuō)用戶群和產(chǎn)品定位是一直在變動(dòng)的，調(diào)研，調(diào)整，驗(yàn)證，調(diào)研，在這個(gè)過(guò)程完成用戶細(xì)分和調(diào)研

方式一，參考市場(chǎng)營(yíng)銷人員根據(jù)人口統(tǒng)計(jì)學(xué)標(biāo)準(zhǔn)劃分用戶，性別，年齡，教育水平，婚姻狀況，收入；或者參考人類學(xué)研究的方式去劃分

方式二：消費(fèi)心態(tài)檔案

2.3用戶調(diào)研方式

1. 質(zhì)性調(diào)研：（觀察法），用戶訪談，焦點(diǎn)小組，卡片排序法（card sorting）（常用于信息分層和信息架構(gòu)，讓用戶通過(guò)直觀感覺(jué)去分出信息應(yīng)該歸類到哪里，信息的真實(shí)意味是什么）

2. 量性調(diào)研：?jiǎn)柧碚{(diào)查，

3. 用戶測(cè)試：有了原型之后測(cè)試用戶反映，在這個(gè)環(huán)節(jié)體現(xiàn)為制作低保真或高保真原型進(jìn)行用戶測(cè)試，在投入大量成本制作之前對(duì)想法進(jìn)行驗(yàn)證

2.4本環(huán)節(jié)最終文件

1 創(chuàng)建用戶模型（對(duì)應(yīng)了上面第二點(diǎn)）

用戶模型不是真實(shí)用戶，而是總結(jié)出來(lái)的，是虛構(gòu)的，他是一個(gè)核心用戶群（或者是細(xì)分用戶群）的代表，具有對(duì)應(yīng)用戶群的典型特征；

最大的作用除了概括之外，同時(shí)也是為了讓項(xiàng)目進(jìn)行過(guò)程中能夠可以牢牢記住用戶群

2.?戰(zhàn)略文檔，愿景文檔（這個(gè)在平時(shí)講需求文檔的時(shí)候很少提到，需求文檔里的需求都是針對(duì)某個(gè)場(chǎng)景下某一需求，現(xiàn)在終于看到了正式的說(shuō)法）

三、范圍層：

書中案例：曾經(jīng)建過(guò)一個(gè)似乎永遠(yuǎn)是beta版本的Web應(yīng)用系統(tǒng)，差不多但是還沒(méi)有轉(zhuǎn)備好向真正的用戶推出。當(dāng)時(shí)最大的問(wèn)題是，沒(méi)有一個(gè)人愿意去定義需求，畢竟當(dāng)所有人都在一個(gè)辦公室里面工作，記下每一件事情是很麻煩的。結(jié)果就導(dǎo)致了產(chǎn)生了一個(gè)不斷變化的，混合了完整產(chǎn)品的各個(gè)階段功能的產(chǎn)品，只要有人讀了文章或者有個(gè)新的想法就會(huì)有可能增加一個(gè)新的功能特性，根本沒(méi)有人知道這個(gè)項(xiàng)目的范圍，因此項(xiàng)目也看不到盡頭。

{我有點(diǎn)搞不懂這個(gè)情況發(fā)生的原因}

3.1目的或內(nèi)容

思考的內(nèi)容：從我們?yōu)槭裁匆_發(fā)這個(gè)產(chǎn)品——我們要開發(fā)的是什么？

具體提現(xiàn)時(shí) 全部的功能需求以及功能規(guī)格

3.2范圍蠕變

如果不能很好的管理要求,就會(huì)陷入范圍蠕變的困境中scope creep

scope creep _業(yè)務(wù)流程管理businessprocess management

在PMBOK guide（PMI，2008，440）定義為在不改良時(shí)間，開支，資本，且未得到客戶的同意下增添新的特征和功能

屬于常見(jiàn)的難以避免的情況（可以研究一下）

3.3具體介紹

范圍層：功能型產(chǎn)品——功能規(guī)格；信息型產(chǎn)品——內(nèi)容需求

內(nèi)容需求管理一般由CMS系統(tǒng)完成（引入一個(gè)概念叫做內(nèi)容管理系統(tǒng)content management system CMS）

CMS的邏輯

大致意思就是，上圖只是一個(gè)例子，假如公司的內(nèi)容審核和生成流程如上，CMS就需要有支持這些類型的需求。

3.4要求

功能規(guī)格說(shuō)明:

主要講寫文檔的一些注意事項(xiàng)，

1.例如簡(jiǎn)潔，因?yàn)槿藗兛赡懿辉敢饪矗?/p>

2.文字表達(dá)準(zhǔn)確，否則會(huì)產(chǎn)生誤解

3. 強(qiáng)調(diào)因果和應(yīng)該怎么做，否則視為偽需求，

（之前在實(shí)習(xí)的時(shí)候基本都深有感觸，且實(shí)際需要注意的東西更多，這里不作贅述，后期可專門寫一份如何寫原型的文檔）

內(nèi)容需求：首先 內(nèi)容的定義 除了文本還包括視頻，圖像

確認(rèn)內(nèi)容要滿足什么調(diào)節(jié)，例如更新頻率，風(fēng)格的要求是什么等等。

確認(rèn)需求優(yōu)先級(jí)，（《從點(diǎn)子到產(chǎn)品》那本書里有比較完整的如何處理需求池的問(wèn)題

四、結(jié)構(gòu)層

4.1目的或內(nèi)容：

功能型的交互設(shè)計(jì)+信息型的信息架構(gòu)

4.2交互設(shè)計(jì)的定義

研究的是可能的用戶行為，然后定義“系統(tǒng)如何配合和響應(yīng)這些用戶行為”；

（可能套用TB的功能型產(chǎn)品的時(shí)候可以比較好理解這一點(diǎn)）；

開發(fā)人員容易制作出來(lái)一個(gè)技術(shù)效率很高但是用戶體驗(yàn)卻很不好的東西

4.3構(gòu)造概念模型

在思考交互組件如何工作的時(shí)候，可以參考一個(gè)觀點(diǎn)叫做 構(gòu)造概念模型，即在設(shè)置元素或者組件的時(shí)候，參考現(xiàn)實(shí)生活，讓用戶可以對(duì)此產(chǎn)生聯(lián)想而降低學(xué)習(xí)門檻、例如購(gòu)物車概念，就會(huì)讓用戶知道這個(gè)可以裝購(gòu)買的東西，可以拿出來(lái)，可以推去支付，等等

雖然思路是這樣，但是正如看到正負(fù)空間那樣，填補(bǔ)是本能，而通過(guò)模型概念去聯(lián)想行為也是本能，是直覺(jué)的，因此在構(gòu)造模型的時(shí)候只要?jiǎng)偤眠_(dá)到直覺(jué)就可以了，并不需要完全塑造一樣的體驗(yàn)，成本高，而且沒(méi)有必要。

反面案例：西南航空公司，幾乎模擬了整個(gè)購(gòu)買票務(wù)的服務(wù)臺(tái)。

（現(xiàn)在西南航空這樣的概念模擬的觀點(diǎn)基本是不可能存在了，概念模擬的本質(zhì)是直覺(jué)設(shè)計(jì)，無(wú)意識(shí)設(shè)計(jì)，讓用戶在無(wú)意識(shí)的情況下可以了解到產(chǎn)品是如何使用，且現(xiàn)在有很多書是寫這個(gè)內(nèi)容的，例如互聯(lián)網(wǎng)領(lǐng)域的《不要讓我思考》，尤其是產(chǎn)品設(shè)計(jì)領(lǐng)域，深澤直人的無(wú)意識(shí)設(shè)計(jì)，人因工程里面的基本要素“防呆，防錯(cuò)，防記憶等”原則）

4.4防錯(cuò)概念

1交互里面的防錯(cuò)要盡可能考慮到足夠多的可能性，各種可能性的恢復(fù)來(lái)提高用戶體驗(yàn)，撤銷，支付前的警告，支付時(shí)候上方的輔助記憶文本，等等都屬于此類

2 △但是要注意不要太過(guò)分了，就像word里面太多改正，反而一定程度上會(huì)讓用戶反感

（我之前考慮過(guò)，但是可能沒(méi)有仔細(xì)考慮過(guò)這個(gè)問(wèn)題）

4.5信息架構(gòu)概述

4.5.1在此處體現(xiàn)的信息架構(gòu)的基本介紹：

信息架構(gòu)是一門古老的學(xué)科

在網(wǎng)站上，信息架構(gòu)的主要工作是 設(shè)計(jì)組織分類和導(dǎo)航的結(jié)構(gòu)，讓用戶可以高效、有效地瀏覽網(wǎng)頁(yè)的內(nèi)容；

信息架構(gòu)和信息檢索的概念相關(guān)；

?

4.5.2如何從信息架構(gòu)的角度去思考：

一般會(huì)從兩個(gè)角度去看，從上到下以及從下到上；

從上到下有可能導(dǎo)致內(nèi)容的重要細(xì)節(jié)被忽略，從下到上則有可能導(dǎo)致架構(gòu)過(guò)于精確反映了現(xiàn)有的內(nèi)容而，不能靈活地容納未來(lái)內(nèi)容的變動(dòng)過(guò)或增加。如圖。

（這個(gè)地方不是很能理解）

4.6步長(zhǎng)計(jì)算

公司經(jīng)常會(huì)計(jì)算步長(zhǎng)，但是計(jì)算步長(zhǎng)除了要考慮盡量減少步長(zhǎng)，更重要的是這個(gè)步長(zhǎng)是否合理“用戶是否認(rèn)為每一個(gè)步驟都是合理的”“當(dāng)前步驟是否自然地延續(xù)了上一個(gè)步驟中的人物”

4.7隨時(shí)思考“容納成長(zhǎng)和適應(yīng)變動(dòng)”

（這個(gè)之前實(shí)習(xí)第一次體會(huì)到了這個(gè)東西，在設(shè)計(jì)的時(shí)候要思考到，假如內(nèi)容成倍增加的話，原來(lái)的模式是否還適用，但是那個(gè)時(shí)候只是停留在了交互層面，至于假如討論的是“信息架構(gòu)系統(tǒng)”如何考慮這一部分的內(nèi)容還不清楚）

4.8架構(gòu)類別

首先是要明晰一個(gè)概念，節(jié)點(diǎn)：信息架構(gòu)的基本單位是節(jié)點(diǎn)，可以對(duì)應(yīng)信息片段或者是組合

1層級(jí)結(jié)構(gòu) 也叫樹狀結(jié)構(gòu)或者中心輻射結(jié)構(gòu)

2 矩陣結(jié)構(gòu) 允許用戶在節(jié)點(diǎn)和節(jié)點(diǎn)之間沿著兩個(gè)或者更多的維度移動(dòng)，例如用戶有可能通過(guò)顏色來(lái)瀏覽產(chǎn)品，但是有人希望是尺寸，那么矩陣結(jié)構(gòu)就是同事容納這兩種不同的用戶

3自然結(jié)構(gòu)：不會(huì)遵循任何一致的模式（其他形式？沒(méi)懂）

4線性結(jié)構(gòu)：呈現(xiàn)內(nèi)容順序?qū)τ诜嫌脩粜枨蠓浅ｊP(guān)鍵的應(yīng)用程序，（軟件教程？支付步驟？）

4.9選擇不同架構(gòu)類別的原則：

一般來(lái)說(shuō)最高層使用的組織原則應(yīng)該與網(wǎng)站目標(biāo)，用戶需求相關(guān)，而低層級(jí)則有內(nèi)容和功能需求影響。

（具體的組織原則寫得很模糊，不過(guò)畢竟不同的產(chǎn)品不一樣）

引入一個(gè)工具叫做，受控詞典，網(wǎng)站使用的一套標(biāo)準(zhǔn)語(yǔ)言。

屬于用戶研究中個(gè)一個(gè)領(lǐng)域。和用戶談話并了解他們的溝通方式，開發(fā)一個(gè)讓用戶感到自然的命名原則系統(tǒng)的最有效方式。

4.10本環(huán)節(jié)最終文件

架構(gòu)圖architecture diagram

不一定要寫明每一頁(yè)和每一個(gè)鏈接，這樣做甚至?xí)黾娱喿x負(fù)擔(dān)，混淆信息，最重要的是記錄概念關(guān)系，哪些類別需要放在一起，哪些需要保持獨(dú)立

(感覺(jué)是流程圖，沒(méi)找到具體指的什么實(shí)現(xiàn)的)

五、架構(gòu)層：

5.1目的或內(nèi)容

界面設(shè)計(jì) 導(dǎo)航設(shè)計(jì) 信息設(shè)計(jì)

界面設(shè)計(jì)：提供給用戶做某些事情的能力；可有有哪些觸點(diǎn)去激發(fā)產(chǎn)品可提供的功能

導(dǎo)航設(shè)計(jì)：去到某個(gè)地方的能力

信息設(shè)計(jì)：傳達(dá)想法

5.2原則：

原則一：習(xí)慣，了解用戶的習(xí)慣，不要輕易改變用戶的習(xí)慣

原則二：比喻；但是網(wǎng)易云音樂(lè)的模擬老式CD以及音波都很吸引人，是恰到好處的比喻的典范

界面設(shè)計(jì)：

1、讓用戶看到最重要的東西；不重要的減少他們發(fā)現(xiàn)的可能性或者把他們排除掉；對(duì)于在程序開發(fā)有一定背景的人來(lái)說(shuō)這種思考問(wèn)題的方式和他們一貫的思路相異，因?yàn)楹玫某绦騿T一般是要考慮到很少發(fā)生的場(chǎng)景，在開發(fā)屬于里稱為“邊緣情況”

2、了解UI設(shè)計(jì)組件：復(fù)選，下拉菜單之類組件的區(qū)別；（此處不多加贅述）

導(dǎo)航設(shè)計(jì)：

1、導(dǎo)航設(shè)計(jì)著重于頁(yè)面跳轉(zhuǎn)的研究，跳轉(zhuǎn)是否合理

2、導(dǎo)航本身是否傳達(dá)除了有效的信息，讓用戶了解到這要操作可以達(dá)到想去的地方；大概意思就是知道自己在哪兒，自己要去或者能去哪兒

信息設(shè)計(jì)：

一般分成常規(guī)排列，以容易理解和明晰的方式分類，就像圖書館數(shù)目；另一種則是比較常用的，“反映用戶思路”和“支持他們目標(biāo)和任務(wù)”的方式去排列，就像許多網(wǎng)頁(yè)首頁(yè)一般都是推薦或者是熱門功能，而仔細(xì)看這些功能其實(shí)往往并非并列關(guān)系

5.3本環(huán)節(jié)最終文件

線框圖

（基本算是現(xiàn)在所說(shuō)的原型圖，但是還是有一些區(qū)別的。）

作為信息架構(gòu)和視覺(jué)設(shè)計(jì)匯集的地方，線框圖會(huì)變成結(jié)論和糾紛的中心。

?“線框圖”是整合在結(jié)構(gòu)層的全部三種要素的方法，通過(guò)安排和選擇界面元素來(lái)整合界面設(shè)計(jì)，通過(guò)識(shí)別和定義核心導(dǎo)航系統(tǒng)來(lái)整合導(dǎo)航設(shè)計(jì)，通過(guò)放置和排列信息的組成部分的優(yōu)先級(jí)來(lái)整合信息設(shè)計(jì)。

六、表現(xiàn)層：

6.1目的或內(nèi)容

感知設(shè)計(jì)

6.2眼動(dòng)軌跡

1如果設(shè)計(jì)是成功的，那么看東西應(yīng)該是流暢的移動(dòng)軌跡（但是我記得之前看的理論說(shuō)過(guò)，通過(guò)眼動(dòng)測(cè)試，用戶一般是跳躍性地閱讀的，偏隨機(jī)，）

2 在盡可能少細(xì)節(jié)得情況下，給用戶提供有效的，某種可能的“引導(dǎo)”，支持用戶完成此時(shí)的目標(biāo)和任務(wù)

6.3原則和措施

注意對(duì)比和一致性：（這個(gè)可以去了解一下，網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)如何營(yíng)造視覺(jué)焦點(diǎn)之類的文章）

柵格：此處不多加贅述

整體風(fēng)格的一致性：要基于企業(yè)品牌識(shí)別形象和一開始的產(chǎn)品定位和戰(zhàn)略目標(biāo)，出UI標(biāo)準(zhǔn)

配色和排版風(fēng)格

對(duì)應(yīng)文件style guide：視覺(jué)原型（高保真原型）+視覺(jué)標(biāo)準(zhǔn)

其余參考鏈接：

http://www.eyascent.com/cn/article-details-327.html

爾雅2015 如何避免BPM中的“范圍蠕變”

https://www.pmi.org/learning/library/top-five-causes-scope-creep-6675

project management institute _Top fivecauses of scope creep and what to do about them

圖片來(lái)源：原書