五層要素模型

Ch.1 戰(zhàn)略層

明確戰(zhàn)略目標叛买，“我們想要什么”和“我們的用戶想要什么”??

產(chǎn)出物：戰(zhàn)略文檔

1.1 產(chǎn)品目標

——如何衡量是否達到占率目標？

成功標準：訪問量PV蹋订、UV率挣、頁面停留時間、回訪數(shù)據(jù)

1.2 用戶需求

——如何確定目標用戶和用戶需求露戒？（用戶研究）

細分用戶群椒功，分析群體用戶需求

——創(chuàng)建人物角色

從用戶研究中提取出的樣例

戰(zhàn)略文檔：可以在戰(zhàn)略目標范圍內(nèi)制定一個清晰的優(yōu)先級順序

Ch.2 范圍層

“我們要開發(fā)的是什么”。定義項目范圍智什，包括功能需求及排列優(yōu)先級

產(chǎn)出物：產(chǎn)品需求文檔/功能規(guī)格說明

撰寫產(chǎn)品需求文檔/功能規(guī)格說明的好處

定義項目共同語言——減少團隊成員間的溝通和理解成本

明確項目要完成的全部工作蛾茉，明確定義需求要求——團隊成員知道項目目標和范圍、時間計劃（工作流程/日程安排/里程碑）撩鹿，了解看似獨立需求之間的內(nèi)在聯(lián)系谦炬。使得責任分配更清晰，大大地提高協(xié)作效率

通過考慮粗略的產(chǎn)品需求點节沦，確定優(yōu)先級键思，考慮潛在沖突，從而了解哪些是需要做甫贯、哪些不需要做吼鳞、哪些不需要馬上做的需求，形成需求池叫搁，做長期規(guī)劃赔桌，良性循環(huán)】事撸——用更慎重的方法管理整個設(shè)計過程疾党，避免“范圍蠕變"，像滾雪球

2.1 定義需求

業(yè)務(wù)需求和用戶需求惨奕，取平衡

如何獲取需求雪位？

用戶提出的需求

用戶提出需求中的本質(zhì)需求（分析用戶說出這個需求是想解決什么問題，再推出能真正解決這個問題的需求是什么梨撞，可能與用戶提出的完全不同）

頭腦風暴雹洗。脫離現(xiàn)有產(chǎn)品的限制香罐，打開新思路

如何設(shè)計需求？

搭建人物角色的使用場景：簡單描述一個用戶角色如何完成這些用戶需求时肿。通過想象用戶將經(jīng)歷什么樣的過程庇茫，我們可以找到他能順利完成這個過程的潛在需求。

競品分析（直接競品螃成、間接競品）：分析競爭對手如何滿足的用戶需求港令、完成相似的產(chǎn)品目標、權(quán)衡和調(diào)整我們也在面對的某些問題

2.2 功能規(guī)格說明

需要的內(nèi)容????VS.????不需要的內(nèi)容

包含在設(shè)計/開發(fā)中可能出現(xiàn)混淆的功能定義? ? VS.? ? 不需要包含產(chǎn)品的每一個細節(jié)

包含已確定的決議? ? VS.? ? 不需要包含展望產(chǎn)品未來的理想狀態(tài)

撰寫原則

樂觀——去掉不應(yīng)該锈颗，引導應(yīng)該

具體——“最受歡迎”改為“上一周播放次數(shù)最多”

避免主觀語氣——避免歧義，保持準確咪惠』髦ǎ可以量化定義。

2.3 內(nèi)容需求

P72

2.4 確定需求優(yōu)先級

——評估功能需求是否滿足戰(zhàn)略目標

任何不符合當前項目的戰(zhàn)略目標的特性建議遥昧，都要通過范圍定義排除出去覆醇。

（除非你要重新審視某些戰(zhàn)略目標）

——確定實現(xiàn)功能需求的可能性有多大：

（1）技術(shù)局限

（2）資源局限

（3）時間局限——可以考慮把這個功能放在下一版/項目里程中

Ch.3 結(jié)構(gòu)層

涵蓋功能需求的充滿概念的結(jié)構(gòu)層

產(chǎn)出物：架構(gòu)圖

模式和順序

交互設(shè)計：關(guān)注在用戶執(zhí)行和完成任務(wù)的元素。哪些功能要在哪個界面完成炭臭。

信息架構(gòu)：關(guān)注在如何將信息表達給用戶的元素

3.1 交互設(shè)計

概念模型

錯誤處理

預(yù)防——在設(shè)計上盡量不讓用戶犯錯

改正——錯誤發(fā)生時永脓，系統(tǒng)應(yīng)幫助用戶找出錯誤并改正

恢復——錯誤發(fā)生后系統(tǒng)無法實時糾錯時，提供給用戶從錯誤中恢復的方式

對于不可能恢復的錯誤鞋仍，唯一的預(yù)防方法是常摧，提供大量的警告

3.2 信息架構(gòu)

在以內(nèi)容為主的網(wǎng)站上，信息架構(gòu)主要的工作是以設(shè)計組織分類和導航的結(jié)構(gòu)威创，讓用戶可以高效率落午、有效地瀏覽網(wǎng)站的內(nèi)容。

高效結(jié)構(gòu)的優(yōu)點：容納成長和適應(yīng)變動

信息架構(gòu)的基本單位——節(jié)點

可以是頁面肚豺，也可以是頁面中的元素

如果把頁面定義為最基礎(chǔ)的節(jié)點溃斋，那么項目不能再處理任何比它更小的東西。

如果把頁面中的每一個元素定義為節(jié)點吸申，那么頁面就變成這些個節(jié)點的組合梗劫。

組織原則

用來決定哪些節(jié)點要編成一組，哪些節(jié)點要保持獨立的標準截碴。

一般的組織原則：

結(jié)構(gòu)中的最高層級——與“產(chǎn)品目標”梳侨、“用戶需求”緊密相關(guān)

結(jié)構(gòu)中的較低層級——結(jié)合內(nèi)容和功能需求

比如，

體育新聞網(wǎng)站：

最高層級——實時性最重要日丹，所以以時間順序為第一組織原則

結(jié)構(gòu)下一層級——與內(nèi)容相關(guān)猫妙，可以是以棒球、網(wǎng)球聚凹、曲棍球等的內(nèi)容分類

截面

描述結(jié)構(gòu)的語言

命名原則：使用用戶語言并保持一致性

受控詞典——網(wǎng)站使用的一套標準語言

類詞詞典——拓展出的詞匯語言

元數(shù)據(jù)——基于受控詞典/類詞詞典割坠，用固定的詞描述一個概念

架構(gòu)圖

NO? :不要詳細到寫明每一頁的每一個鏈接

YES：真正需要的信息——展示概念關(guān)系

哪些類別放在一起齐帚？

哪些需要保持獨立？

交互過程中那些步驟要怎么配合彼哼？

**繪制模板：視覺詞典

Ch.4 框架層

提煉結(jié)構(gòu)对妄，確定詳細的界面設(shè)計、導航和信息設(shè)計

產(chǎn)出物：框架圖

框架層的定義

界面設(shè)計：提供給用戶做某些事的能力

導航設(shè)計：提供給用戶去某個地方的能力

信息設(shè)計：傳達想法給用戶

設(shè)計時考慮點：習慣和比喻

習慣

（1）遵循用戶早已養(yǎng)成的一些習慣敢朱，使界面與之保持一致剪菱。

（2）更重要的是，界面自身要保持一致拴签。（工具：概念模型）

使用同樣的概念模型孝常、操作習慣，可以使用戶熟悉了一個特性后很快的適應(yīng)另一個界面/系統(tǒng)蚓哩。

（3）但并不是說构灸，每一個界面問題的解決辦法都要死守這些習慣“独妫可以謹慎地違背一些習慣來優(yōu)化喜颁。

比喻

有效地使用比喻，減少用戶“理解和使用你的產(chǎn)品功能”時的猜測成本

4.1 界面設(shè)計

選擇正確的界面元素來完成用戶的任務(wù)曹阔，通過適當?shù)姆绞绞沟媒缑娓焕斫夂褪褂谩?/p>

這些功能在界面上如何被用戶認知到

注意點

——讓用戶一眼就看到“最重要的東西”

——弄清用戶不需要知道的東西半开，并減少它們的可發(fā)現(xiàn)性。（或完全排除）——弱化邊緣情況

——一個設(shè)計良好的界面是要組織好用戶最常采用的行為赃份，同時讓這些界面元素用最容易的方式獲取和使用寂拆。

????????比如，界面首次呈現(xiàn)用戶時抓韩，仔細考慮每一個選項的默認值漓库。

????????自動記住用戶最后一次的選擇狀態(tài)。（某些環(huán)境下技術(shù)可能無法實現(xiàn)）

標準的界面元素

復選框：能一眼看到所有可選項园蝠。但占據(jù)更多界面空間渺蒿。

單選框

文本框

下拉菜單：緊湊空間有效顯示選項。但不能一眼看到所有可選項彪薛。

多選菜單：緊湊空間顯示大量的選項

按鈕

手勢

4.2導航設(shè)計

導航設(shè)計必須完成的三個目標

（1）必須提供給用戶一種在網(wǎng)站間跳轉(zhuǎn)的方法

（2）必須傳達出這些元素和它們所包含內(nèi)容之間的關(guān)系

——對于用戶理解“哪些選擇對他們是有效的”非常必要

（3）必須傳達出它的內(nèi)容和用戶當前瀏覽頁面之間的關(guān)系

——幫助用戶理解“哪個有效的選擇會最好地支持他們的任務(wù)或目標”

清楚地告訴用戶“他們在哪兒”以及“他們能去哪兒”

假設(shè)用戶不會將上一頁信息帶到下一頁中茂装。

常見的導航系統(tǒng)

全局導航

局部導航

輔助導航

上下文導航

友好導航：通常為聯(lián)系信息、反饋表單和法律聲明鏈接

網(wǎng)站地圖：提供一級導航及縮進顯示的善延、主要的二級導航

索引表

4.3 信息設(shè)計

微觀信息架構(gòu)（元素間）：分類和排列這些元素信息少态，以達到“反映用戶的思路”和“支持他們的任務(wù)和目標”的作用

另外，

考慮錯誤提示易遣，給用戶提供能正確使用系統(tǒng)的信息彼妻。

利用指示標識，幫助用戶理解“他們在哪兒”以及“他們能去哪兒”

4.4線框圖

線框圖是整合在框架層的全部三種要素的方法：

（1）通過安排和選擇界面元素來整合界面設(shè)計

（2）通過識別和定義核心導航系統(tǒng)來整合導航設(shè)計

（3）通過放置和排列信息組成部分的優(yōu)先級來整合信息設(shè)計

Ch.5 表現(xiàn)層

完成以上四層面的所有目標，并滿足用戶的感官感受

產(chǎn)出物：視覺設(shè)計方案

5.1如何評估一個產(chǎn)品的視覺設(shè)計方案

對于那些在之前的層面就確定的目標侨歉，視覺設(shè)計給予它們的支持效果如何屋摇？

例如，產(chǎn)品的外觀結(jié)構(gòu)有沒有破壞結(jié)構(gòu)幽邓，有沒有使結(jié)構(gòu)中的各個模塊之間的區(qū)別變得不清晰炮温、模棱兩可？或者牵舵，外觀有沒有強化結(jié)構(gòu)柒啤，使用戶可用的選項清楚明了？

忠于眼睛

找出主要設(shè)計元素的方法：

對用戶眼球追蹤

瞇著眼睛或斜著去看這個頁面

設(shè)計成功的特點：

遵循一條流暢的路徑

為用戶提供有效選擇的畸颅、某種可能的“引導”

5.2設(shè)計方法

對比和一致性

基于柵格線

配色方案和排版

5.3視覺設(shè)計方案和風格指南

視覺設(shè)計方案

不一定要精確地按照線框圖來做——只要它考慮到了相關(guān)的重要級別以及線框圖中各元素的組合關(guān)系担巩。

線框圖的核心概念，尤其是信息設(shè)計方面没炒，應(yīng)該顯著地呈現(xiàn)在視覺設(shè)計方案中涛癌。

（線框圖中可以通過灰度的深淺來表達元素的側(cè)重點）

風格指南

設(shè)計統(tǒng)一的品牌形象

記錄設(shè)計系統(tǒng)

記錄決策文檔——區(qū)分“在某種特殊環(huán)境下用來解決某個具體問題的臨時決策”和“為了形成將來的設(shè)計工作的基礎(chǔ)而有意識地做出的決策”