結(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)境中。
書(shū)中用電話按鈕布局的例子來(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.reibang.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)書(shū)都有的字段、名片鏈接等奔滑。
友好導(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)用
