書目：《用戶體驗(yàn)要素》

框架層（Skeleton）定義：按鈕，控件，照片和文本區(qū)域的位置?？蚣軐佑糜趦?yōu)化設(shè)計(jì)布局，以達(dá)到這些元素的最大的效果和效率。

框架層的設(shè)計(jì)工作由三部分組成：

1. 信息設(shè)計(jì)（information design）

不管是功能型產(chǎn)品還是信息型產(chǎn)品，我們都必須完成信息設(shè)計(jì)。出現(xiàn)在用戶眼前的所有文字信息都是信息設(shè)計(jì)的范疇。在信息設(shè)計(jì)時(shí)最需要注意的問題是不要?jiǎng)?chuàng)造認(rèn)識摩擦，購物網(wǎng)站的“購物車”是非常容易被用戶理解和接受的一個(gè)詞，因?yàn)樗腔钴S在現(xiàn)實(shí)生活中的一個(gè)詞，直接使用它要比另外創(chuàng)造一個(gè)詞要好上無數(shù)倍。關(guān)于認(rèn)識摩擦，大家可參考我的另外一篇文章：蒸汽房里的認(rèn)識摩擦

2. 界面設(shè)計(jì)（interface design）

界面設(shè)計(jì)的設(shè)計(jì)對象是按鈕，輸入框等等界面控件，這些控件的組合能讓用戶與系統(tǒng)的功能產(chǎn)生互動(dòng)。所以界面設(shè)計(jì)也常被叫做交互設(shè)計(jì)，它主要針對功能型產(chǎn)品而言，功能型產(chǎn)品主要關(guān)注的是“任務(wù)”。就像你選擇某個(gè)商品后點(diǎn)擊“購物車”按鈕，此時(shí)你是向購物網(wǎng)站喊話，“幫我把這東西放我購物車?yán)铮　?，接著你?huì)在網(wǎng)站頁面上看到一句提示，“商品已被加入您的購物車，請前往購物車查看?！边@是購物網(wǎng)站對你的回答，以上這一來一往就叫做一個(gè)交互。我們?nèi)粘Ｉ钪谐Ｓ玫膸讉€(gè)大產(chǎn)品，微信，淘寶，網(wǎng)易云音樂等等等，交互做的都不錯(cuò)，導(dǎo)致大家往往不知道交互差是一種什么體驗(yàn)。（當(dāng)然，我舉例的這幾個(gè)產(chǎn)品的用戶已經(jīng)被“教育”出來了，對產(chǎn)品操作早已產(chǎn)生慣性。有機(jī)會(huì)我再寫寫用戶教育的事兒~）

什么叫差的交互？產(chǎn)品就在你面前，你卻一臉懵逼不知道怎么用?！罢O？現(xiàn)在我該點(diǎn)什么了？”“呀？我這成功沒成功？” 想體驗(yàn)差的交互，請找國企做的網(wǎng)站點(diǎn)一點(diǎn)，什么12*06啊，什么航空公司官網(wǎng)啊，你懂的。

3. 導(dǎo)航設(shè)計(jì) （navigation design）

信息型的產(chǎn)品，通常必須要將屏幕上的一些元素進(jìn)行組合，以提供給用戶在信息架構(gòu)中自由穿行的能力。最典型的信息型產(chǎn)品就是公司網(wǎng)站，學(xué)校網(wǎng)站等等，以提供，傳遞信息為主要目的的產(chǎn)品。學(xué)院-美術(shù)學(xué)院-教授-油畫教授-王老師， 學(xué)院-美術(shù)學(xué)院-課程介紹-油畫-王老師。大家可以看到，我舉例的兩條路徑可以到達(dá)同樣的終點(diǎn)，這是在做導(dǎo)航設(shè)計(jì)時(shí)要考慮的事情：用戶比較喜歡走哪條路呢？

以上三個(gè)設(shè)計(jì)工作往往是緊密結(jié)合在一起的，如，“好的導(dǎo)航設(shè)計(jì)”并不能糾正“不好的信息設(shè)計(jì)”，所以他們之間的邊界就很容易變得模糊。這里有一個(gè)簡單的方法能夠幫助大家區(qū)分：

--傳達(dá)某個(gè)想法給用戶：信息設(shè)計(jì)；

--提供給用戶做某些事的能力：界面設(shè)計(jì)（交互設(shè)計(jì)）；

--提供給用戶去某個(gè)地方的能力：導(dǎo)航設(shè)計(jì)；

想?yún)⒖肌队脩趔w驗(yàn)要素》部分思維導(dǎo)圖請?jiān)L問：思維導(dǎo)圖