框架層

在充滿(mǎn)概念的結(jié)構(gòu)層中，其實(shí)是形成了大量的需求姜贡，這些需求都是來(lái)自我們的戰(zhàn)略目標(biāo)的需求试吁。

在框架層，我們要更進(jìn)一步地提煉這些結(jié)構(gòu)楼咳，確定很詳細(xì)的界面外觀(guān)熄捍、導(dǎo)航和信息設(shè)計(jì)，這能讓晦澀的結(jié)構(gòu)變得更實(shí)在母怜。

結(jié)構(gòu)層界定了我們的產(chǎn)品將用什么方式來(lái)運(yùn)作；框架層則用于確定用什么樣的功能和形式來(lái)實(shí)現(xiàn)苹熏。

在結(jié)構(gòu)層碟贾，我們看到一個(gè)較大的架構(gòu)和交互的設(shè)計(jì)；在框架層轨域，我們的關(guān)注點(diǎn)幾乎全部在獨(dú)立的組件以及它們之間的相互關(guān)系上袱耽。

框架層，很容易理解干发。用我們現(xiàn)在畫(huà)的原型圖來(lái)解釋一下朱巨， 就是首頁(yè)的各個(gè)按鈕，都放哪里枉长。第二頁(yè)的功能按鈕冀续，都放哪里。

對(duì)于功能型產(chǎn)品必峰，我們通過(guò)界面設(shè)計(jì)（interface design）來(lái)確定框架—一個(gè)大家所熟知的洪唐、“按鈕、輸入框和其他界面控件”的領(lǐng)域吼蚁。

但是對(duì)于信息型產(chǎn)品凭需，要解決的是一個(gè)獨(dú)一無(wú)二的問(wèn)題：導(dǎo)航設(shè)計(jì)（navigation design），這是專(zhuān)門(mén)用于呈現(xiàn)信息的一種界面形式。

最后功炮，信息設(shè)計(jì)（information design）是功能和信息兩方面都必須要做的，它用于呈現(xiàn)有效的信息溝通术唬。

如果這涉及提供給用戶(hù)做某些事的能力薪伏，則屬于“界面設(shè)計(jì)”。界面的意思是說(shuō)粗仓，通過(guò)它嫁怀，用戶(hù)能真正接觸到那些“在結(jié)構(gòu)層的交互設(shè)計(jì)中”確定的“具體功能”。

如果是傳達(dá)想法給用戶(hù)的話(huà)借浊，那就是“信息設(shè)計(jì)”塘淑。信息設(shè)計(jì)是這個(gè)層面中范圍最廣的一個(gè)要素，所涉及的事情幾乎是到目前為止我們?cè)诠δ苄秃托畔⑿彤a(chǎn)品兩者都看到過(guò)的全部?jī)?nèi)容蚂斤。

信息設(shè)計(jì)跨越了“以任務(wù)為導(dǎo)向”的功能型產(chǎn)品和“以信息為導(dǎo)向”的信息型產(chǎn)品的邊界存捺，因?yàn)闊o(wú)論是界面設(shè)計(jì)還是導(dǎo)航設(shè)計(jì)，都不可能在沒(méi)有“一個(gè)良好的信息設(shè)計(jì)的支持”的前提下取得成功曙蒸。

一般在這種設(shè)計(jì)的時(shí)候捌治，要照顧到兩個(gè)用戶(hù)層面的特性，習(xí)慣和比喻纽窟。

習(xí)慣肖油，就是設(shè)計(jì)不應(yīng)該違背用戶(hù)的使用習(xí)慣。而比喻則是臂港，我們可以用很多的設(shè)計(jì)來(lái)比喻現(xiàn)實(shí)中的事情森枪，比如購(gòu)物車(chē)就用了一個(gè)小框表示。??

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

界面設(shè)計(jì)要做的全部事情就是選擇正確的界面元素审孽。哪個(gè)功能要在哪個(gè)界面上完成县袱，是我們?cè)诮Y(jié)構(gòu)層的交互設(shè)計(jì)中已經(jīng)決定的；而這些功能在界面上如何被用戶(hù)認(rèn)知到瓷胧，則屬于界面設(shè)計(jì)的范疇显拳。

界面設(shè)計(jì)里，提供了很多方法搓萧，復(fù)選框杂数、下拉菜單等等，這些都是在設(shè)計(jì)網(wǎng)頁(yè)或APP時(shí)候瘸洛，使用到的元件揍移。

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

任何一個(gè)網(wǎng)站的導(dǎo)航設(shè)計(jì)都必須同時(shí)完成以下三個(gè)目標(biāo)：?

首先，它必須提供給用戶(hù)一種在網(wǎng)站間跳轉(zhuǎn)的方法反肋。

其次那伐，導(dǎo)航設(shè)計(jì)必須傳達(dá)出這些元素和它們所包含內(nèi)容之間的關(guān)系。

第三，導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶(hù)當(dāng)前瀏覽頁(yè)面之間的關(guān)系罕邀。

導(dǎo)航一般有以下幾種畅形，全局導(dǎo)航、局部導(dǎo)航诉探、輔助導(dǎo)航日熬、上下文導(dǎo)航、友好導(dǎo)航肾胯、遠(yuǎn)程導(dǎo)航竖席、網(wǎng)站地圖和索引表。

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

由于界面不僅僅只是用來(lái)收集用戶(hù)的信息敬肚，它還需要向用戶(hù)呈現(xiàn)信息毕荐，所以信息設(shè)計(jì)在解決界面設(shè)計(jì)的問(wèn)題中扮演了重要角色。系統(tǒng)應(yīng)該給用戶(hù)提供能正確使用系統(tǒng)的信息（無(wú)論是用戶(hù)出現(xiàn)了錯(cuò)誤還是剛剛開(kāi)始使用）艳馒，這些都是信息設(shè)計(jì)的工作范疇憎亚。

指示標(biāo)識(shí)

將信息設(shè)計(jì)和導(dǎo)航設(shè)計(jì)結(jié)合到一起，有一個(gè)重要的作用：支持指示標(biāo)識(shí)（wayfinding）鹰溜，這是用來(lái)幫助用戶(hù)理解“他們?cè)谀摹币约啊八麄兡苋ツ摹钡南到y(tǒng)虽填。

線(xiàn)框圖

頁(yè)面布局是將信息設(shè)計(jì)、界面設(shè)計(jì)和導(dǎo)航設(shè)計(jì)放置到一起曹动，形成一個(gè)統(tǒng)一的斋日、有內(nèi)在凝聚力的架構(gòu)的地方。

線(xiàn)框圖是整合在結(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ì)。把這三者放到一個(gè)文檔中贡必，線(xiàn)框圖就可以確定一個(gè)建立在基本概念結(jié)構(gòu)上的架構(gòu)兔港，同時(shí)指出了表現(xiàn)層的設(shè)計(jì)應(yīng)該前進(jìn)的方向。

而這個(gè)東西仔拟，實(shí)際上就是我們今天所說(shuō)的低保真原型圖衫樊。

表現(xiàn)層

這里，內(nèi)容利花、功能和美學(xué)匯集到一起來(lái)產(chǎn)生一個(gè)最終設(shè)計(jì)科侈，完成其他四個(gè)層面的所有目標(biāo)，并同時(shí)滿(mǎn)足用戶(hù)的感官感受炒事。

在框架層臀栈，我們主要解決放置的事情。界面設(shè)計(jì)考慮可交互元素的布局挠乳，導(dǎo)航設(shè)計(jì)考慮在產(chǎn)品中引導(dǎo)用戶(hù)移動(dòng)的元素的安排权薯，而信息設(shè)計(jì)考慮傳達(dá)給用戶(hù)的信息要素的排布姑躲。

而表現(xiàn)層，則是要解決并彌補(bǔ)“產(chǎn)品框架層的邏輯排布”的感知呈現(xiàn)問(wèn)題盟蚣。舉個(gè)例子來(lái)說(shuō)黍析，通過(guò)關(guān)注信息設(shè)計(jì)，我們決定了這些信息元素應(yīng)該如何分組和排列屎开；通過(guò)關(guān)注視覺(jué)設(shè)計(jì)橄仍，我們決定這種安排在視覺(jué)上應(yīng)該如何呈現(xiàn)。

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

決定我們的設(shè)計(jì)最后要如何被人類(lèi)的感覺(jué)器官感受到牍戚。這些感受由五個(gè)方面組成：視覺(jué)、聽(tīng)覺(jué)虑粥、觸覺(jué)如孝、嗅覺(jué)和味覺(jué)。哪些感受將被納入設(shè)計(jì)是由我們的產(chǎn)品類(lèi)型決定的娩贷。

視覺(jué)

由于我們互聯(lián)網(wǎng)產(chǎn)品第晰，主要是視覺(jué)上的。這也是用戶(hù)體驗(yàn)設(shè)計(jì)師最得心應(yīng)手的領(lǐng)域彬祖。

因?yàn)閹缀跛械幕ヂ?lián)網(wǎng)上的產(chǎn)品都會(huì)涉及視覺(jué)設(shè)計(jì)茁瘦。出于這個(gè)原因，這本書(shū)储笑，主要就講的是視覺(jué)設(shè)計(jì)如何支持用戶(hù)體驗(yàn)的甜熔。

忠于眼鏡

評(píng)估一個(gè)產(chǎn)品視覺(jué)設(shè)計(jì)的簡(jiǎn)單方法之一，是提出這樣的問(wèn)題：你的視線(xiàn)首先落在什么地方突倍？哪個(gè)設(shè)計(jì)要素在第一時(shí)間吸引了用戶(hù)的注意力腔稀？它們是對(duì)于戰(zhàn)略目標(biāo)來(lái)講很重要的東西嗎？或者用戶(hù)第一時(shí)間注意到的東西與他們的（或你的）目標(biāo)是背道而馳的嗎羽历？

有人會(huì)使用眼球追蹤來(lái)看用戶(hù)在看什么焊虏，也就是眼動(dòng)儀。但在手機(jī)時(shí)代秕磷，不管用了诵闭。

如果你的設(shè)計(jì)是成功的，用戶(hù)眼睛的移動(dòng)軌跡的模式應(yīng)該有以下兩個(gè)重要的特點(diǎn)：

首先澎嚣，它們遵循的是一條流暢的路徑疏尿。

其次，在不需要用太多細(xì)節(jié)來(lái)嚇倒用戶(hù)的前提下币叹，它為用戶(hù)提供有效選擇的润歉、某種可能的“引導(dǎo)”。

對(duì)比和一致性

當(dāng)一個(gè)元素在設(shè)計(jì)中的顯得與眾不同時(shí)颈抚，用戶(hù)就會(huì)注意到踩衩。這就是對(duì)比嚼鹉。

而我們整體頁(yè)面的設(shè)計(jì)風(fēng)格、元件使用驱富、文案設(shè)計(jì)等锚赤，是否一致，這個(gè)說(shuō)的就是一致性褐鸥，它能使你的設(shè)計(jì)有效地傳達(dá)信息线脚，而不會(huì)導(dǎo)致用戶(hù)迷惑或焦慮。

基于柵格線(xiàn)（grid-based layout）的布局是來(lái)自平面設(shè)計(jì)的一種技術(shù)叫榕，是一種對(duì)網(wǎng)頁(yè)也同樣有效的技術(shù)浑侥。這個(gè)方法通過(guò)使用“母版”來(lái)確保設(shè)計(jì)的一致性，各種布局都是根據(jù)這個(gè)模板來(lái)創(chuàng)建的晰绎。

一般在A(yíng)xure里面寓落，會(huì)有一個(gè)小控件8px 16px這種，這就是基于柵格線(xiàn)設(shè)計(jì)的荞下。

內(nèi)部和外部的一致性

內(nèi)部一致性的問(wèn)題伶选。這是說(shuō)，在產(chǎn)品的兩個(gè)不同的地方反映了不同的設(shè)計(jì)方法尖昏。

?外部一致性的問(wèn)題仰税。這是說(shuō)，這個(gè)產(chǎn)品沒(méi)有在同一個(gè)企業(yè)的其他產(chǎn)品中抽诉，反映出被使用的陨簇、相同的設(shè)計(jì)方法。

配色方案和排版

最后迹淌，在表現(xiàn)層塞帐，最讓人直觀(guān)感受的，就是配色和排版了巍沙。這也是用戶(hù)最直接感受到的葵姥。顏色是什么，排版怎么樣句携。視覺(jué)第一個(gè)感知的就是這兩個(gè)了榔幸。

當(dāng)我們采用以上的方法，或者原則做完工作之后矮嫉，最后削咆，要做的是，形成視覺(jué)模型和風(fēng)格指南蠢笋。比如螞蟻金服做的那套廣為流傳的設(shè)計(jì)拨齐。這個(gè)可以稱(chēng)之為互聯(lián)網(wǎng)設(shè)計(jì)界的典范。

有了風(fēng)格指南昨寞，設(shè)計(jì)就有了一套唯一且高效的方法瞻惋，讓我們的產(chǎn)品看起來(lái)是一個(gè)協(xié)調(diào)一致的整體厦滤，而不是一堆亂七八糟的碎片。

最后歼狼，這五層怎么用呢掏导？

書(shū)里面介紹了它的方法∮鸱澹總結(jié)一下趟咆，我的理解，實(shí)際上這五層梅屉，就是我們很多產(chǎn)品經(jīng)理做事的工作流程值纱。

戰(zhàn)略層，確定產(chǎn)品目標(biāo)和用戶(hù)需求坯汤，這是PM設(shè)計(jì)產(chǎn)品的來(lái)源计雌。也是做一個(gè)產(chǎn)品的開(kāi)端。

范圍層玫霎，當(dāng)我們獲取到用戶(hù)需求、明確好產(chǎn)品目標(biāo)后妈橄，PM就會(huì)想庶近，我們可以提供給用戶(hù)什么解決方案，來(lái)實(shí)現(xiàn)用戶(hù)的需求眷蚓。這時(shí)候鼻种，我們會(huì)寫(xiě)需求文檔，記錄下我們提供的解決方案沙热。

當(dāng)文檔完成后叉钥，PM會(huì)兼職做UE的工作，也可以找UE一起來(lái)做篙贸。開(kāi)始進(jìn)入了結(jié)構(gòu)層的設(shè)計(jì)投队。這些解決方案，要做幾個(gè)頁(yè)面爵川，在哪個(gè)頁(yè)面呈現(xiàn)敷鸦。

然后UE就去設(shè)計(jì)去了，這個(gè)東西用按鈕表示寝贡，這個(gè)東西用文本框表示扒披，按鈕放在這里，表示可以點(diǎn)擊圃泡，可以確認(rèn)碟案，文本框放在那里，用戶(hù)一眼能看到說(shuō)明等等颇蜡。這都是UE的工作价说。而這就是框架層的工作辆亏。

我們一個(gè)產(chǎn)品交付給用戶(hù)，去掉開(kāi)發(fā)的工作之后熔任，這五層褒链，實(shí)際上，就是PM在把一個(gè)用戶(hù)需求疑苔，或者一個(gè)點(diǎn)子甫匹，變成最終產(chǎn)品，交付給用戶(hù)使用的一套流程惦费。每一層兵迅，都涉及到各種決策，我們做什么薪贫，不做什么恍箭。用什么元件，不用什么元件瞧省。什么位置扯夭，什么顏色。

每一個(gè)流程上的每一個(gè)決策鞍匾，最終交洗，交付到用戶(hù)那里，當(dāng)用戶(hù)使用一次之后橡淑，產(chǎn)生用戶(hù)體驗(yàn)构拳。