框架層

在充滿概念的結構層中，其實是形成了大量的需求，這些需求都是來自我們的戰(zhàn)略目標的需求。

在框架層，我們要更進一步地提煉這些結構，確定很詳細的界面外觀、導航和信息設計，這能讓晦澀的結構變得更實在。

結構層界定了我們的產品將用什么方式來運作；框架層則用于確定用什么樣的功能和形式來實現。

在結構層，我們看到一個較大的架構和交互的設計；在框架層，我們的關注點幾乎全部在獨立的組件以及它們之間的相互關系上。

框架層，很容易理解。用我們現在畫的原型圖來解釋一下， 就是首頁的各個按鈕，都放哪里。第二頁的功能按鈕，都放哪里。

對于功能型產品，我們通過界面設計（interface design）來確定框架—一個大家所熟知的、“按鈕、輸入框和其他界面控件”的領域。

但是對于信息型產品，要解決的是一個獨一無二的問題：導航設計（navigation design），這是專門用于呈現信息的一種界面形式。

最后，信息設計（information design）是功能和信息兩方面都必須要做的，它用于呈現有效的信息溝通。

如果這涉及提供給用戶做某些事的能力，則屬于“界面設計”。界面的意思是說，通過它，用戶能真正接觸到那些“在結構層的交互設計中”確定的“具體功能”。

如果是傳達想法給用戶的話，那就是“信息設計”。信息設計是這個層面中范圍最廣的一個要素，所涉及的事情幾乎是到目前為止我們在功能型和信息型產品兩者都看到過的全部內容。

信息設計跨越了“以任務為導向”的功能型產品和“以信息為導向”的信息型產品的邊界，因為無論是界面設計還是導航設計，都不可能在沒有“一個良好的信息設計的支持”的前提下取得成功。

一般在這種設計的時候，要照顧到兩個用戶層面的特性，習慣和比喻。

習慣，就是設計不應該違背用戶的使用習慣。而比喻則是，我們可以用很多的設計來比喻現實中的事情，比如購物車就用了一個小框表示。??

界面設計

界面設計要做的全部事情就是選擇正確的界面元素。哪個功能要在哪個界面上完成，是我們在結構層的交互設計中已經決定的；而這些功能在界面上如何被用戶認知到，則屬于界面設計的范疇。

界面設計里，提供了很多方法，復選框、下拉菜單等等，這些都是在設計網頁或APP時候，使用到的元件。

導航設計

任何一個網站的導航設計都必須同時完成以下三個目標：?

首先，它必須提供給用戶一種在網站間跳轉的方法。

其次，導航設計必須傳達出這些元素和它們所包含內容之間的關系。

第三，導航設計必須傳達出它的內容和用戶當前瀏覽頁面之間的關系。

導航一般有以下幾種，全局導航、局部導航、輔助導航、上下文導航、友好導航、遠程導航、網站地圖和索引表。

信息設計

由于界面不僅僅只是用來收集用戶的信息，它還需要向用戶呈現信息，所以信息設計在解決界面設計的問題中扮演了重要角色。系統應該給用戶提供能正確使用系統的信息（無論是用戶出現了錯誤還是剛剛開始使用），這些都是信息設計的工作范疇。

指示標識

將信息設計和導航設計結合到一起，有一個重要的作用：支持指示標識（wayfinding），這是用來幫助用戶理解“他們在哪”以及“他們能去哪”的系統。

線框圖

頁面布局是將信息設計、界面設計和導航設計放置到一起，形成一個統一的、有內在凝聚力的架構的地方。

線框圖是整合在結構層的全部三種要素的方法：通過安排和選擇界面元素來整合界面設計；通過識別和定義核心導航系統來整合導航設計；通過放置和排列信息組成部分的優(yōu)先級來整合信息設計。把這三者放到一個文檔中，線框圖就可以確定一個建立在基本概念結構上的架構，同時指出了表現層的設計應該前進的方向。

而這個東西，實際上就是我們今天所說的低保真原型圖。

表現層

這里，內容、功能和美學匯集到一起來產生一個最終設計，完成其他四個層面的所有目標，并同時滿足用戶的感官感受。

在框架層，我們主要解決放置的事情。界面設計考慮可交互元素的布局，導航設計考慮在產品中引導用戶移動的元素的安排，而信息設計考慮傳達給用戶的信息要素的排布。

而表現層，則是要解決并彌補“產品框架層的邏輯排布”的感知呈現問題。舉個例子來說，通過關注信息設計，我們決定了這些信息元素應該如何分組和排列；通過關注視覺設計，我們決定這種安排在視覺上應該如何呈現。

合理設計感知

決定我們的設計最后要如何被人類的感覺器官感受到。這些感受由五個方面組成：視覺、聽覺、觸覺、嗅覺和味覺。哪些感受將被納入設計是由我們的產品類型決定的。

視覺

由于我們互聯網產品，主要是視覺上的。這也是用戶體驗設計師最得心應手的領域。

因為幾乎所有的互聯網上的產品都會涉及視覺設計。出于這個原因，這本書，主要就講的是視覺設計如何支持用戶體驗的。

忠于眼鏡

評估一個產品視覺設計的簡單方法之一，是提出這樣的問題：你的視線首先落在什么地方？哪個設計要素在第一時間吸引了用戶的注意力？它們是對于戰(zhàn)略目標來講很重要的東西嗎？或者用戶第一時間注意到的東西與他們的（或你的）目標是背道而馳的嗎？

有人會使用眼球追蹤來看用戶在看什么，也就是眼動儀。但在手機時代，不管用了。

如果你的設計是成功的，用戶眼睛的移動軌跡的模式應該有以下兩個重要的特點：

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

其次，在不需要用太多細節(jié)來嚇倒用戶的前提下，它為用戶提供有效選擇的、某種可能的“引導”。

對比和一致性

當一個元素在設計中的顯得與眾不同時，用戶就會注意到。這就是對比。

而我們整體頁面的設計風格、元件使用、文案設計等，是否一致，這個說的就是一致性，它能使你的設計有效地傳達信息，而不會導致用戶迷惑或焦慮。

基于柵格線（grid-based layout）的布局是來自平面設計的一種技術，是一種對網頁也同樣有效的技術。這個方法通過使用“母版”來確保設計的一致性，各種布局都是根據這個模板來創(chuàng)建的。

一般在Axure里面，會有一個小控件8px 16px這種，這就是基于柵格線設計的。

內部和外部的一致性

內部一致性的問題。這是說，在產品的兩個不同的地方反映了不同的設計方法。

?外部一致性的問題。這是說，這個產品沒有在同一個企業(yè)的其他產品中，反映出被使用的、相同的設計方法。

配色方案和排版

最后，在表現層，最讓人直觀感受的，就是配色和排版了。這也是用戶最直接感受到的。顏色是什么，排版怎么樣。視覺第一個感知的就是這兩個了。

當我們采用以上的方法，或者原則做完工作之后，最后，要做的是，形成視覺模型和風格指南。比如螞蟻金服做的那套廣為流傳的設計。這個可以稱之為互聯網設計界的典范。

有了風格指南，設計就有了一套唯一且高效的方法，讓我們的產品看起來是一個協調一致的整體，而不是一堆亂七八糟的碎片。

最后，這五層怎么用呢？

書里面介紹了它的方法?？偨Y一下，我的理解，實際上這五層，就是我們很多產品經理做事的工作流程。

戰(zhàn)略層，確定產品目標和用戶需求，這是PM設計產品的來源。也是做一個產品的開端。

范圍層，當我們獲取到用戶需求、明確好產品目標后，PM就會想，我們可以提供給用戶什么解決方案，來實現用戶的需求。這時候，我們會寫需求文檔，記錄下我們提供的解決方案。

當文檔完成后，PM會兼職做UE的工作，也可以找UE一起來做。開始進入了結構層的設計。這些解決方案，要做幾個頁面，在哪個頁面呈現。

然后UE就去設計去了，這個東西用按鈕表示，這個東西用文本框表示，按鈕放在這里，表示可以點擊，可以確認，文本框放在那里，用戶一眼能看到說明等等。這都是UE的工作。而這就是框架層的工作。

我們一個產品交付給用戶，去掉開發(fā)的工作之后，這五層，實際上，就是PM在把一個用戶需求，或者一個點子，變成最終產品，交付給用戶使用的一套流程。每一層，都涉及到各種決策，我們做什么，不做什么。用什么元件，不用什么元件。什么位置，什么顏色。

每一個流程上的每一個決策，最終，交付到用戶那里，當用戶使用一次之后，產生用戶體驗。