結(jié)構(gòu)層確定了我們的產(chǎn)品將用什么方式來(lái)運(yùn)作，而框架層用于確定用什么樣的功能和形式來(lái)實(shí)現(xiàn)。
框架層的定義
在框架層，我們的關(guān)注點(diǎn)幾乎全部在獨(dú)立的組件以及它們之間的相互關(guān)系上。在功能性產(chǎn)品中，我們通過(guò)界面設(shè)計(jì)來(lái)確定框架，包括按鈕、輸入框和其他界面控件。在信息型產(chǎn)品中，導(dǎo)航設(shè)計(jì)是專門用于呈現(xiàn)信息的一種界面形式。而信息設(shè)計(jì)是功能和信息兩方面都必須要做的，它用于呈現(xiàn)有效的信息溝通。這三者之間的關(guān)系非常緊密，邊界有時(shí)也會(huì)模棱兩可，但是定義清楚它們之間的領(lǐng)域?qū)τ诮鉀Q問(wèn)題是非常重要的。
界面設(shè)計(jì)是提供給用戶做某件事的能力。通過(guò)它，用戶能真正接觸到那些在結(jié)構(gòu)層中的交互設(shè)計(jì)中的確定的具體功能。
導(dǎo)航設(shè)計(jì)是提供給用戶去某個(gè)地方的能力。通過(guò)它，用戶能因?yàn)榻Y(jié)構(gòu)層中的信息架構(gòu)把一個(gè)結(jié)構(gòu)應(yīng)用到我們?cè)O(shè)定好的內(nèi)容需求列表之中，而自由穿行。
信息設(shè)計(jì)是傳達(dá)想法給用戶。信息設(shè)計(jì)是框架層中范圍最廣的一個(gè)要素，所涉及的事情幾乎是到目前為止我們?cè)诠δ苄秃托畔⑿彤a(chǎn)品兩者都看到過(guò)的全部?jī)?nèi)容。
習(xí)慣和比喻
· 習(xí)慣
習(xí)慣和反射作用是我們與這個(gè)世界交互的各種基礎(chǔ)，它包括天生的應(yīng)激性，也包括后天培養(yǎng)的反射性。我們?nèi)粘５拿恳粋€(gè)動(dòng)作都依賴于大量的、細(xì)小的反射作用的積累。習(xí)慣使我們可以把這些反射作用應(yīng)用到不同的環(huán)境中。
書中用電話按鈕布局的例子來(lái)說(shuō)明習(xí)慣對(duì)于提高操作難度的影響，我們?nèi)粘３Ｒ?jiàn)的電梯按鈕也是令人頭大的一個(gè)例子，幾乎每幢寫字樓、住宅區(qū)的按鈕也都形形色色，布局上上下下。碰巧在網(wǎng)上看到一篇分析《電梯按鈕的交互設(shè)計(jì)》的文章挺有意思，可以為大家提供點(diǎn)思路。
而在熟悉按鈕的那幾秒鐘，用戶是被挫敗感占據(jù)的幾秒鐘。一件“下意識(shí)就能完成的事情”變成“難以忍受的緩慢”，僅僅是因?yàn)橛脩裟_底下的“習(xí)慣魔毯”被人取走了。
對(duì)于用戶的習(xí)慣，我們不一定必須毫無(wú)條件遵循，當(dāng)某種不同的方式有很明顯的益處時(shí)，你反而應(yīng)該試著謹(jǐn)慎地違背一些習(xí)慣。建立一個(gè)成功的用戶體驗(yàn)，要求我們?cè)谧雒恳粋€(gè)決定的時(shí)候都有充分的、明確的理由。
在界面設(shè)計(jì)的過(guò)程中，我們強(qiáng)調(diào)界面之間的一致性。網(wǎng)站特性的概念模型有助于你保持內(nèi)部一致性，當(dāng)兩個(gè)特性都使用了同樣的概念模型，那么可能就需要比較類似的界面要求。當(dāng)兩個(gè)特性的概念模型不同時(shí)，我們就需要在界面處理上進(jìn)行區(qū)分。
在實(shí)際工作中，為了內(nèi)部人員的協(xié)作一致性，我們通常會(huì)通過(guò)創(chuàng)建、規(guī)范控件庫(kù)來(lái)統(tǒng)一界面，還可以讓用戶通過(guò)產(chǎn)品其他部分所了解到的信息，輔助理解當(dāng)前頁(yè)面，這有助于用戶更快地達(dá)到自己的目標(biāo)，更少地犯錯(cuò)。
· 比喻（metaphor）
比喻是產(chǎn)品模仿現(xiàn)實(shí)世界的某個(gè)物體來(lái)設(shè)計(jì)界面。這里需要注意的是要抑制在產(chǎn)品四周建立起比喻的沖動(dòng)。在大部分真實(shí)世界中的界面和導(dǎo)航設(shè)備，是只能在真實(shí)世界使用的：物理的、材料性能等。這點(diǎn)我們?cè)?a href="http://www.lxweimin.com/p/a3b5d10ee0c9" target="_blank">《結(jié)構(gòu)層》的概念模型中也有提到比喻過(guò)度的例子。這種方式往往不能揭示特性的本質(zhì)，反而會(huì)使其更加混淆。
特性和它所表達(dá)的比喻之間的聯(lián)系，對(duì)于設(shè)計(jì)者本身是顯而易見(jiàn)的，但是我們卻不能保證是不是用戶可能聯(lián)想到的，尤其是那些來(lái)自不同文化背景的用戶們。這點(diǎn)出入在icon的使用設(shè)計(jì)上特別明顯，因此我們會(huì)提供一定的上下文，幫助用戶更好地猜測(cè)所采用的比喻試圖代表什么特性。更好更簡(jiǎn)單的辦法就是完全去除猜測(cè)的成分。
有效地使用比喻，就是要減少用戶在“理解和使用你的產(chǎn)品功能”時(shí)對(duì)猜測(cè)的要求。
界面設(shè)計(jì)
界面設(shè)計(jì)要做的事情就是選擇正確的界面元素。這些元素的目的是能幫助用戶完成任務(wù)，還要通過(guò)適當(dāng)?shù)姆绞阶屗鼈內(nèi)菀妆焕斫夂褪褂谩?strong>成功的界面設(shè)計(jì)是主次分明的，能讓用戶一眼就看到“最重要的東西”。
哪個(gè)功能要在哪個(gè)界面上完成，是在結(jié)構(gòu)層的交互設(shè)計(jì)中已經(jīng)決定的；而這些功能在界面上如何被用戶認(rèn)知到，則屬于界面設(shè)計(jì)的范疇。
一個(gè)設(shè)計(jì)良好的界面是要組織好用戶最常采用的行為，同時(shí)讓這些界面元素用最容易的方式獲取和使用。剛剛接觸工作的時(shí)候，我們經(jīng)常會(huì)被程序員的邊緣情況問(wèn)得一愣一愣的，然后出于自己對(duì)情況沒(méi)有考慮全面的愧疚感，把提出的邊緣情況考慮過(guò)重，花了過(guò)多的時(shí)間。作為交互設(shè)計(jì)師，邊緣情況我們需要考慮，但是重點(diǎn)在于把握主線和主要功能的閉環(huán)，不要被程序員牽著走。
界面設(shè)計(jì)可以采用各種各樣的技巧，使用戶完成任務(wù)的過(guò)程變得容易。一個(gè)簡(jiǎn)單的技巧，就是產(chǎn)品可以代替用戶去做一些簡(jiǎn)單的輔助操作，比如在這個(gè)界面第一次呈現(xiàn)給用戶的時(shí)候，仔細(xì)考慮每一個(gè)選項(xiàng)的默認(rèn)值；比如在用戶填寫豐富內(nèi)容的過(guò)程中，自動(dòng)保存。
導(dǎo)航設(shè)計(jì)
導(dǎo)航設(shè)計(jì)就是在每個(gè)頁(yè)面頁(yè)面上放一些允許用戶瀏覽整個(gè)網(wǎng)站的鏈接。
任何一個(gè)產(chǎn)品導(dǎo)航設(shè)計(jì)都必須同時(shí)滿足以下三個(gè)目標(biāo)：
1.首先，必須提供給用戶一種在網(wǎng)站間跳轉(zhuǎn)的方法。導(dǎo)航元素必須選擇那些能促進(jìn)用戶行為的。
2.其次，導(dǎo)航設(shè)計(jì)必須傳達(dá)出這些元素和它們所包含內(nèi)容之間的關(guān)系。比如網(wǎng)站上的面包屑。
3.最后，導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁(yè)面之間的關(guān)系。
產(chǎn)品設(shè)計(jì)中，我們需要用導(dǎo)航來(lái)幫助用戶定位，告訴用戶“從哪里來(lái)”、“現(xiàn)在在哪里”、“可以去哪”，除非產(chǎn)品所有的功能都集中在一個(gè)界面上。
下面是我們?cè)诠ぷ髦谐Ｒ?jiàn)的幾種導(dǎo)航系統(tǒng)（navigation system），包括全局導(dǎo)航、局部導(dǎo)航、輔助導(dǎo)航、上下文導(dǎo)航、友好導(dǎo)航、遠(yuǎn)程導(dǎo)航。：
全局導(dǎo)航（global navigation）：提供了覆蓋整個(gè)網(wǎng)站的通路。全局導(dǎo)航提供的是用戶最有可能需要從網(wǎng)站的最終頁(yè)面到其他什么地方的一組關(guān)鍵點(diǎn)。
局部導(dǎo)航（local navigation）：提供給用戶在這個(gè)架構(gòu)中到“附近地點(diǎn)”的通路。
輔助導(dǎo)航（supplementary navigation）：提供了全局導(dǎo)航或局部導(dǎo)航不能快速達(dá)到的相關(guān)內(nèi)容的快捷途徑。比如幫助中心、首頁(yè)底部、聯(lián)系我們等。
上下文導(dǎo)航（contextual navigation）：有時(shí)也叫“內(nèi)嵌導(dǎo)航”，是嵌入頁(yè)面自身內(nèi)容的一種導(dǎo)航。當(dāng)我們對(duì)用戶和用戶需求理解得越準(zhǔn)確，我們的上下文導(dǎo)航就設(shè)計(jì)得越高效。比如知乎、簡(jiǎn)書都有的字段、名片鏈接等。
友好導(dǎo)航（courtesy navigation）：提供給用戶通常不是主要需要的鏈接，但他們是作為一種便利的途徑來(lái)使用的。比如推薦內(nèi)容、猜你喜歡等。
遠(yuǎn)程導(dǎo)航（remote navigation）：一些導(dǎo)航?jīng)]有包含在頁(yè)面結(jié)構(gòu)中，而是以它們自己的方式存在，獨(dú)立于網(wǎng)站的內(nèi)容或功能。比如網(wǎng)站地圖（site map）給用戶提供一個(gè)簡(jiǎn)明的、單頁(yè)的網(wǎng)站整體結(jié)構(gòu)的快捷瀏覽方式；索引表（index）按照字母順序排列的、鏈接到相關(guān)頁(yè)面的列表。
信息設(shè)計(jì)
信息設(shè)計(jì)是用一種能“反映用戶的思路”和“支持他們的任務(wù)和目標(biāo)”的方式來(lái)分類和排列這些信息元素。這與之前選擇“截面”的概念很相似。
·指示標(biāo)識(shí)（wayfinding）
指示標(biāo)識(shí)用來(lái)幫助用戶理解“他們?cè)谀摹币约啊八麄兡苋ツ摹钡南到y(tǒng)。好的指示標(biāo)識(shí)能使用很快地得到一個(gè)心里圖像，“他們?cè)谀膬骸薄ⅰ澳苋ツ膬骸焙汀澳臈l路能使他們離自己的目標(biāo)更近”。
此外，一些成功的產(chǎn)品還使用了顏色標(biāo)識(shí)、圖標(biāo)、標(biāo)簽系統(tǒng)和排版等方式，輔助用戶進(jìn)行頁(yè)面定位。
線框圖
頁(yè)面布局被納入一個(gè)詳細(xì)的文檔，并稱為頁(yè)面示意圖或線框圖（wire frame）。這個(gè)線框圖是對(duì)一個(gè)頁(yè)面中所有組成部分以及它們?nèi)绾谓Y(jié)合到一起的、最直觀的描述。
線框圖在正式建立網(wǎng)站的視覺(jué)設(shè)計(jì)的流程中是必要的第一步。
線框圖是整合在框架層的全部三種要素（界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、信息設(shè)計(jì)）的方法：
通過(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ì)。
小結(jié)
框架層的內(nèi)容是交互設(shè)計(jì)師的重點(diǎn)輸出物，線框圖是之前所有思考的體現(xiàn)，這里再次重復(fù)一下本層重點(diǎn)圍繞的三個(gè)要素：界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、信息設(shè)計(jì)，我們分別通過(guò)安排和選擇界面元素、識(shí)別和定義核心導(dǎo)航系統(tǒng)、放置和排列信息組成部分的優(yōu)先級(jí)來(lái)整合。
目前市面上的產(chǎn)品，在功能型和信息型的區(qū)分并不明顯，因此這三個(gè)要素我們都應(yīng)該考慮在內(nèi)。在主要功能和目的達(dá)成以后，也要注意情況的全面考慮，比如頁(yè)面出錯(cuò)、弱網(wǎng)、斷網(wǎng)等情況。
《用戶體驗(yàn)要素》閱讀筆記
一、初識(shí)用戶體驗(yàn)
二、網(wǎng)站的用戶體驗(yàn)
三、用戶體驗(yàn)五要素
四、戰(zhàn)略層：產(chǎn)品目標(biāo)和用戶需求
五、范圍層：功能規(guī)格和內(nèi)容需求
六、結(jié)構(gòu)層：交互設(shè)計(jì)與信息架構(gòu)
七、框架層：界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)
九、表現(xiàn)層：感知設(shè)計(jì)
十、用戶體驗(yàn)的應(yīng)用
