全篇字?jǐn)?shù)：10816字
閱讀需用：20min
前幾天在部門里做了一次分享，分享的內(nèi)容是關(guān)于讀過的一本書《web界面設(shè)計》，這是一本不算新的書，書里對于一些知識舉的舉例也還都是雅虎時代的例子，但俗話說的好：例糙理不糙，作者對于交互模式的總結(jié)、分析和解讀在當(dāng)下也被許多大企業(yè)借鑒，比如螞蟻的ANTD部分設(shè)計原則就是基于此書，所以總的來說，這是一本可以一讀的書。目前網(wǎng)上應(yīng)該是買不到此書了，我也是脫朋友從學(xué)校圖書館里借閱了一本，用了一段時間閱讀，這類書說實話，確實枯燥，不過對于從事交互設(shè)計的同學(xué)來說，應(yīng)該說可以作為一本基礎(chǔ)必讀書目來看。
以下讀書筆記：
引子
《web界面設(shè)計》是由兩位作者 Bill Scott和Theresa Neil兩位30多年web設(shè)計所總結(jié)出來的經(jīng)驗和最佳實踐。
原理：（拉丁語：principium，法語：principe，德語：Prinzip，英語：principle）、原則或定律，是存在于某個系統(tǒng)中的一組法律、規(guī)則與基本前提。這個體系中的其他事物，大體上都可以經(jīng)由這個基本規(guī)律來推導(dǎo)、解釋與預(yù)測；這個體系中的成員，都應(yīng)該遵守這個基本規(guī)律，在這套規(guī)則下運作。經(jīng)由了解這個體系的原理，可以了解到整個體系的基本特征，或是反映出這個體系被設(shè)計的目的。如果這個體系下的某個原理被忽略，可能造成體系無法運作，或是這個行為將無法達(dá)成其目的。-wiki百科
模式：…當(dāng)遇到某個反復(fù)出現(xiàn)的問題時，就相應(yīng)解決方案的核心內(nèi)容給出的描述…
設(shè)計模式：在軟件工程中，對軟件設(shè)計中普遍存在（反復(fù)出現(xiàn)）的各種問題，所提出的解決方案。這個屬于是由埃里?！べが?shù)热嗽?990年代從建筑設(shè)計領(lǐng)域引入到計算機(jī)科學(xué)的。-wiki百科
本次分享的內(nèi)容就是web交互設(shè)計的模式，以及這些模式所依托的由作者總結(jié)出來的6個設(shè)計原理。
直截了當(dāng)? 簡化交互? 足不出戶? 提供邀請? 使用變換? 即時反應(yīng)
這6個設(shè)計原理也是目前比較被大家認(rèn)可的AntDesign所依托的設(shè)計原理，所以我們這里也同樣結(jié)合Antdesign來看。
Antdesign所依托的設(shè)計原理一共10個，前四個出自《寫給大家看的設(shè)計書》、后6個即出自《web界面設(shè)計》
直截了當(dāng)
需要在哪里輸入，就要允許在哪里輸出。不要為了編輯內(nèi)容而打開另一個頁面，應(yīng)該直接在上下文中實現(xiàn)編輯。目的是能更直接的相應(yīng)用戶的操作。
Axure和Sketch的目錄編輯交互模式就符合這個原理，輸入及輸出，所見即所得，沒有經(jīng)過任何其他的頁面過度，在此原理下，我們來介紹三種常見的交互模式：頁內(nèi)編輯、利于拖放、直接選擇
頁內(nèi)編輯
故名思意就是在當(dāng)前頁內(nèi)完成編輯操作，不用跳轉(zhuǎn)到其他頁面。包含了：單字段行內(nèi)編輯、多字段行內(nèi)編輯、覆蓋層編輯、群組編輯、表格編輯、模塊配置
單字段行內(nèi)編輯
- ?這里舉知乎編輯個人資料的例子
單字段行內(nèi)編輯? 就是在行內(nèi)編輯一個文本字段，是最簡單的行內(nèi)編輯形式，這種交互發(fā)生在原地而不是單獨的窗口或者單獨的頁面。營造所見即所得的狀態(tài)。
設(shè)計這個模式的時候，要考慮到兩個要素：易讀性和易編輯性
我們來看兩個例子：
什么時候選用方案1、什么時候選用方案2 ？
方案1的優(yōu)點是易讀性較好，因為頁面中沒有干擾內(nèi)容本身的其他元素，缺點是編輯模式的易發(fā)現(xiàn)性較差，因為要通過鼠標(biāo)移動到字段上面才能發(fā)現(xiàn)編輯模式；方案2的優(yōu)缺點剛好是相反，所以當(dāng)易讀性比易發(fā)現(xiàn)性重要時，選用方案1，反之，則選擇方案2。
多字段行內(nèi)編輯
多字段行內(nèi)編輯，常見于表格的一行多字段編輯
1 視覺割裂感
顯示模式和編輯模式模式之間往往需要不同大小的頁面空間和布局，也會使用不同類型和數(shù)量的控件，因此顯示模式和編輯模式之間就可能造成用戶視覺上的割裂感。
解決這種視覺割裂感有兩種方式：1 保證顯示模式在切換到編輯模式的時候，顯示模式的元素位置不動，如下圖；2 利用動畫的方式，來緩解這種割裂感，一般為淡出和淡入。（這個在后面的巧用過過渡的原理里也會提到）
這兩種模式都是在頁面內(nèi)實現(xiàn)編輯，這樣的好處是可以不脫離上下文。但有時我們會遇到很復(fù)雜的編輯模式，比如我們要通過日期選擇控件，重新選擇一個入住日期，那要在當(dāng)前頁面內(nèi)完成的話，且不影響上下文，那就需要把下面的“酒店和關(guān)鍵詞 以及搜索，下移，來給這個控件騰出位置” 這樣會損壞頁面的整體感，這時就可以采用覆蓋層來實現(xiàn)，這樣雖然會遮擋上下文中的一些元素，不過這些元素對編輯并不顯得那么重要
覆蓋層編輯
使用覆蓋層編輯時，應(yīng)盡量使用最輕量的樣式，以減少顯示和編輯模式切換造成的干擾。覆蓋層編輯一般為一些特殊控件：如日歷控件、日期選擇控件等。
群組編輯
群組編輯這個最經(jīng)典的例子莫過于iPhone的長按圖標(biāo)由正常顯示模式進(jìn)入編輯模式，但iPhone的這種編輯模式初次使用不易被發(fā)現(xiàn)，有一定的學(xué)習(xí)成本，我們平時也會遇到很多群組編輯的例子，比如剛剛說到的QQ個人資料卡的編輯。
這里我們要提到另一個原則叫 對稱性交互原則；
對稱性交互原則：進(jìn)入和退出編輯模式通常應(yīng)該同樣的交互風(fēng)格，這樣有助于發(fā)現(xiàn)相反的操作。
我們看iPhone的例子 其實是不符合對稱性交互原則的，因為它進(jìn)入編輯模式是通過長按，而退出編輯模式是通過按home鍵，這種交互是不對稱的，那按照對稱性交互原則，編輯模式下，長按圖標(biāo)應(yīng)該也會退出編輯模式，那蘋果為什么沒這么做的原因，是因為它把按壓home鍵設(shè)計成了系統(tǒng)級的返回桌面的交互操作，而這個方式在用戶的使用中也逐漸成為操作習(xí)慣。我們再看QQ的個人資料卡，其實是個很好的遵循了對稱性交互原則，它進(jìn)入編輯模式和退出編輯模式的交互位置和方式是相同的，這樣就很大程度的降低了用戶的認(rèn)知成本；平時也會遇到很多的對稱性交互原則的例子：
比如：Axure的目錄編輯，用戶能進(jìn)行行內(nèi)編輯，所見即所得，輸入輸出保持了高度一致。
拖放
拖放操作，在Antdesign里給了兩個示例：1 拖放列表? 2 拖放圖片/文件
但其實我們平時使用計算機(jī)的過程中會發(fā)現(xiàn)很多其他的拖放的身影：
拖放模塊：
重新排列頁面上的模塊，注意鼠標(biāo)移動到畫板上的交互邀請，以及拖動畫板離開原位置的虛線框和觸發(fā)第二塊畫板自動填充第一個虛線框后留下的攻被拖放花瓣放置的虛線框，這其實也是一種邀請，這里我們討論一個問題：到底以哪個位置來確定拖動模塊的
- 這里舉花瓣網(wǎng)拖放畫板的例子
在拖放模塊設(shè)計的時候，要考慮到拖放的過程中過程瞬間，根據(jù)不同的場景選擇合適的拖放觸發(fā)位置，如下圖的：1.被拖放模塊的邊界；2.鼠標(biāo)的位置；3.被拖放模塊的中心
拖放列表：
重新排列列表項的順序，這里也要注意一些交互邀請。
圖為GIF，加載可能會有點慢。
拖放對象：
改變對象間的從屬關(guān)系，拖放目錄到被放置目錄上的交互瞬間，解釋層級關(guān)系的改變。Axure采用的是插入條，道理相同，Google Drive沒采用目錄拖放邀請的原型可能是目錄的拖放操作已經(jīng)培養(yǎng)成用戶喜歡，或者是用戶想去改變目錄結(jié)構(gòu)的時候，給予他正確的反饋。
拖放操作：
在被放置的對象上執(zhí)行操作
拖放集合：
通過拖放操作集合
舉一個不算太合適的例子：eagle
直接選擇
就是允許用戶選擇對象，然后為對象應(yīng)用操作。我們平時工作比較常見的幾種選擇模式：
切換選擇：
基于復(fù)選框的選擇
集合選擇：
跨越多頁的選擇
對象選擇：
直接選擇對象
我這里舉一個例子，大家就知道這三種選擇模式分別代表什么了
左上是對象選擇 、右上是切換選擇、下面是集合選擇
我們現(xiàn)在通過三個郵箱客戶端來分別對比一下這三種選擇：QQ郵箱、Gmail、某企業(yè)郵箱
對于切換選擇和對象選擇，這三個系統(tǒng)方式都是相同的，通過切換選擇復(fù)選框來選擇多項，對象選擇是打開郵件，這里面我們來看這三個系統(tǒng)在選擇全部集合選擇上差異：
QQ郵是提供一個全選復(fù)選框+選擇當(dāng)前頁還是選擇全部提示；
G郵是提供一個全選復(fù)選框+選擇當(dāng)前頁還是選擇全部提示+全選復(fù)選框下拉提示；
某企業(yè)郵是提供一個全選復(fù)選框+全選復(fù)選框下拉提示；
下拉是一個不易被發(fā)現(xiàn)的交互模式，所以某企業(yè)郵是三個系統(tǒng)里 集合選擇模式上做的最不好的。
簡化交互
簡單點理解就是讓用戶執(zhí)行某個操作時更容易，這里引用費茨法則，如果用戶鼠標(biāo)移動距離越少、對象相對目標(biāo)越大，那么用戶越容易操作。這個法則其實很好理解。球門越大，越容易踢進(jìn)去，距離球門越近，越容易踢進(jìn)去。
我們首先來看三張圖：桌面客戶端產(chǎn)品、GOOGLE、QQ郵箱
第一個是最常見的桌面客戶端型產(chǎn)品Word，可以看出內(nèi)容區(qū)和功能菜單是完全分開的兩個區(qū)域，用戶要么先選擇一種工具，要么先選擇一些內(nèi)容對象，然后再用相應(yīng)的工具來操作數(shù)據(jù)。
（這里我要推薦下Markdown，最近已經(jīng)完全愛上這種編輯模式，有興趣的體驗就就知道了）
早起網(wǎng)站如Google等則是完全以內(nèi)容為中心，簡單的瀏覽或鏈接到其他的頁面，用不到太多的工具，而隨著web的成熟，越來越多內(nèi)容和功能混合的站點涌現(xiàn)，就如同郵箱系統(tǒng)一樣。
那當(dāng)前的話題就是要考量這種站點的用戶界面要如何設(shè)計？
我們前面說到費茨法則，距離越近，目標(biāo)越大操作越容易，那這個近到底近到什么程度才能算近呢，iPhone的用戶界面給了我們答案，內(nèi)容即界面，無需劃分功能區(qū)，每個對象都可以直接操作。
怎樣才能使功能更貼近內(nèi)容，從而簡化交互呢？
這里我們提出一個名詞叫上下文工具
上下文工具
上下文功能其實你可以理解為桌面右鍵菜單的web版。不過并不是讓用戶通過右鍵顯示菜單，而是可以通過內(nèi)容在上下文中顯示相關(guān)工具
我們首先能想到的第一點是不是把重要的操作直接放到界面中，并實時可見。
實時可見工具：
把上下文工具直接顯示在內(nèi)容中
- 這里舉知乎的例子
這里為什么不把贊同/不贊同 隱藏起來，等到鼠標(biāo)懸停再出現(xiàn)呢，因為這個功能是知乎這個網(wǎng)站的一個核心功能，必須始終顯示以明確邀請用戶參與。
實時可見工具的一個最大的好處就是易發(fā)現(xiàn)性，但是在另一方面也會導(dǎo)致頁面看起來比較混亂，那我們來看看一些知名的web站點是怎么處理的？
這里主要對比三個郵箱的加星標(biāo)操作的差異
星標(biāo)的位置和重要程度的不同，可能是考慮到用戶群體的差異，Gmail和163面向的商務(wù)群體比較多，星標(biāo)郵件對于這類群體來說是個很重要的功能，所以將其提至頁面視覺的前部，而QQ郵箱面向的群體可能偏學(xué)生多一點，所以星標(biāo)郵件功能就不是那么重要的功能，所以放在視覺末端去顯示（個人觀點，歡迎辟謠）
這里補(bǔ)充一點幾個郵箱的差異：Q郵和163的菜單（刪除操作等）是實時顯示的，而Gmail采用的是選擇后出現(xiàn)，孰優(yōu)孰劣，也要視業(yè)務(wù)場景和用戶群體特征去判斷，單從內(nèi)容和交互體驗來看，Gmail的方式 我比較喜歡。
懸停即現(xiàn)工具
如果某個操作不那么重要，或者使用『實時可見工具』過于啰嗦會影響用戶閱讀時，可以在懸停在該對象上時展示操作項。
這個大家再熟悉不過了，這樣做的目的是為了減少視覺干擾，將非主要操作先隱藏起來，按需出現(xiàn)。
- 這里舉百度網(wǎng)盤和Google Drive的例子
分析百度網(wǎng)盤懸停即現(xiàn) 下載 分享快捷操作，而Google Drive沒有采取懸停即現(xiàn)的原因？
開關(guān)顯示工具
這種模式也很常見，如果操作并不是主要目的，但又想用戶直接操作界面來提供方面，可以通過開關(guān)來實現(xiàn)，某些操作只需要在特定模式時顯示。
這里QQ個人資料卡 是個反例，雖然保證了編輯和完成編輯交互的對稱，但兩個模式的切換卻出現(xiàn)了頁面元素的晃動。
級聯(lián)遞進(jìn)工具
首先拿Gmail舉級聯(lián)遞進(jìn)的例子，說明級聯(lián)遞進(jìn)是什么意思。
下面對比QQ郵箱和百度網(wǎng)盤還有Gmail的例子，選中某一個對象后，才出現(xiàn)相應(yīng)的操作和相應(yīng)的操作一直顯示的差異。
在可能的情況下，應(yīng)盡量避免級聯(lián)，因為為了使用下一級菜單而執(zhí)行過多的鼠標(biāo)操作，很容易讓用戶反感。
二級菜單
二級菜單就相當(dāng)于桌面程序的右鍵菜單，當(dāng)然也不局限于右鍵，MAC在DOCK上按住鼠標(biāo)1秒鐘也會呼出菜單，但在web中要慎重使用，因為二級菜單以前在web上并不常見，主要原因是因為會和瀏覽器的右鍵菜單沖突，所以用戶這種操作習(xí)慣并沒有被培養(yǎng)出來，所以在使用二級菜單的時候，應(yīng)該是把一些替代性命令或者快捷方式放在其中
交互中的工具
如果操作不重要或者可以通過其他途徑完成時，可以將工具放置在用戶的操作流程中，減少界面元素，降低認(rèn)知負(fù)擔(dān)，給用戶小驚喜。
- 這里對比Antdesign和QQ個人資料卡 復(fù)制QQ號的優(yōu)劣
首先用戶想復(fù)制一個東西，他首先想到的是系統(tǒng)級的復(fù)制，即選中數(shù)字 右鍵復(fù)制，當(dāng)用戶在執(zhí)行這個意圖的過程中，你通過一些動態(tài)邀請，提供給了用戶一個更快捷的操作，會增加用戶對產(chǎn)品的喜愛。而QQ這里的快捷操作，在首次使用時 是有一定的認(rèn)知門檻的，用戶如果執(zhí)行傳統(tǒng)的復(fù)制操作，則不會發(fā)現(xiàn)此功能，所以在傳統(tǒng)的用戶心智模型的基礎(chǔ)上，Antdesign的設(shè)計方式要更優(yōu)一點，因為用戶的心智模型彌補(bǔ)了不易發(fā)現(xiàn)性。
可視區(qū)域≠可點擊區(qū)域
這個其實就是擴(kuò)大可點擊視覺原色的可點擊區(qū)域，以此來簡化交互，遵循的費茨法則。
足不出戶
能在這個頁面解決的問題，就不要去其它頁面解決，因為任何頁面刷新和跳轉(zhuǎn)都會引起變化視盲（Change Blindness），導(dǎo)致用戶心流（Flow）被打斷。頻繁的頁面刷新和跳轉(zhuǎn)，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣。
這里說到兩個詞：心流和變化視盲。
變換盲視（Change Blindness） ：指視覺場景中的某些變化并未被觀察者注意到的心理現(xiàn)象。產(chǎn)生這種現(xiàn)象的原因包括場景中的障礙物，眼球運動、地點的變化，或者是缺乏注意力等。——摘自《維基百科》
心流（Flow） ：也有別名以化境 (Zone) 表示，亦有人翻譯為神馳狀態(tài)，定義是一種將個人精神力完全投注在某種活動上的感覺；心流產(chǎn)生時同時會有高度的興奮及充實感。——摘自《維基百科》
運動員要去培養(yǎng)快速進(jìn)入心流的能力。
其實通俗一點講就是：能在這個頁面解決的問題，就不要去其它頁面解決，以此能創(chuàng)造連續(xù)視覺感知的心流境界，其實就一個詞：視覺連續(xù)性
那為達(dá)到這種視覺連續(xù)性，避免頁面的跳轉(zhuǎn)，有4中我們常見的模式：
覆蓋層、嵌入層、虛擬頁面、流程處理
覆蓋層
覆蓋層大家再熟悉不過，覆蓋層的好處：
1. 輕量? 不占資源、顯示速度快
2. 覆蓋層由web控制而不是瀏覽器控制，這樣設(shè)計人員就可以從外觀上使覆蓋層與界面很好的融為一體。
我們平時遇到的覆蓋層有：對話框覆蓋層、詳情覆蓋層、輸入覆蓋層
對話框覆蓋層
先舉例：模態(tài)覆蓋層和非模態(tài)覆蓋層
模態(tài)覆蓋層就是你必須要和當(dāng)前的覆蓋層進(jìn)行交互 才能返回應(yīng)用程序；
非模態(tài)則是允許用戶在不處理對話框的情況下 可以操作頁面被的其他內(nèi)容。
我們從一個簡單的操作：刪除? 來看這兩者的區(qū)別和應(yīng)用場景
印象筆記的 刪除 ，在刪除筆記時，用戶是需要通過右鍵 選擇刪除操作的，完成這個操作，用戶需要付出一定操作成本，所以這里不需要確認(rèn)刪除的對話框。那我們再看印象筆記刪除筆記本的操作，這里印象筆記彈出了一個確認(rèn)刪除的對話框是為什么？因為刪除一個筆記本對用戶造成的損失要遠(yuǎn)遠(yuǎn)大于一個刪除一個筆記帶來的損失，所以這里會有二次確認(rèn)。
我們再看淘寶購物車的刪除，淘寶使用了一個模態(tài)的確認(rèn)彈窗，為啥？
因為你購物車?yán)锏臇|西，會極大可能轉(zhuǎn)化為交易，所以淘寶當(dāng)然希望你不刪除購物車?yán)锏臇|西了，這是業(yè)務(wù)層面的考慮。
像刪除這種操作的二次確認(rèn)的對話框，應(yīng)該勇敢的讓用戶去嘗試，給用戶撤銷的機(jī)會，當(dāng)執(zhí)行某些無法撤銷的操作時，可以使用輕量級的非模態(tài)彈窗，應(yīng)盡量避免使用模態(tài)的二次確認(rèn)彈窗。
Antdesign給我們舉了很不錯的例子：
輸入覆蓋層
在覆蓋層上，讓用戶直接進(jìn)行少量字段的輸入。
這個一般用于表格或列表的名稱修改比較多，用戶可以直接通過一個小的氣泡輸入覆蓋層，來修改編輯信息，而不是彈出一個帶有亮盒效果的對話框覆蓋層
詳情覆蓋層
一般在列表中，通過用戶『懸?！?『點擊』某個區(qū)塊，在當(dāng)前頁加載該條列表項的更多詳情信息。
這里我們再對比QQ郵箱、163郵箱、Gmail、阿里企業(yè)郵箱，其余三者均為點擊郵件跳轉(zhuǎn)新頁面查看詳情，而阿里企業(yè)郵則是在右側(cè)滑出一個覆蓋層用以顯示郵件詳情。這樣的好處顯而易見，可以在顯示部分郵件列表內(nèi)容的情況下，快速切換查看郵件；
詳情覆蓋層的例子還有很多，比如豆瓣的電影詳情，鼠標(biāo)懸停在電影海報上 0.5s會彈出一個詳情頁，以便用戶快速查看影片信息，這里的重點是0.5的懸停延時，如果沒有這0.5s的懸停延時，要么用戶無法發(fā)現(xiàn)詳情覆蓋層，要么就是頁面會顯得特別鬧騰。
嵌入層
顧名思義 就是將信息直接嵌在頁面中，平時比較常見的就是列表嵌入層、詳情嵌入層和標(biāo)簽頁
列表嵌入層
在列表中，顯示某條列表項的詳情信息，保持上下文不中斷。
使用列表嵌入層時，應(yīng)保證嵌入層的內(nèi)容高度不要太高，否則會影響體驗。
以上為什么QQ閱讀訂閱的嵌入層展開內(nèi)容高度很多，卻還要采用嵌入層的模式，因為QQ閱讀列表提供的內(nèi)容已經(jīng)相對來說比較豐富，用戶可以判斷是不是對內(nèi)容感興趣才會打開，這時候閱讀的視覺連續(xù)性就比較重要，但是也要考慮到用戶誤觸等非意愿打開的情況，這時我們在交互上要做的就是 提供一種簡單快速的關(guān)閉打開模式的交互，這里我認(rèn)為QQ訂閱列表的關(guān)閉列表的交互熱區(qū)應(yīng)該可以考慮適當(dāng)擴(kuò)大一點，按照費茨法則，這樣可以簡化交互，給用戶帶來方便。
詳情嵌入層
顧名思義就是把內(nèi)容詳情直接嵌入頁面中，和前面提到的詳情覆蓋層類似，使用詳情嵌入層也要考慮到內(nèi)容信息的多少。下面我們來看一個例子：
安居客房子信息列表的頁面，其實可以將房子的照片等能促使用戶對房子發(fā)生興趣的因為嵌入到當(dāng)前頁面中，以方便用戶快速的對房子有個大體的印象。
有時候我們可以使用詳情嵌入層在上下文中顯示詳細(xì)信息，且不會遮擋其他信息。
標(biāo)簽頁
這個大家再熟悉不過，將多個平級的信息進(jìn)行整理和分類了，一次只顯示一組信息。
這里需要注意的是，通常情況下 是使用鼠標(biāo)單擊來切換標(biāo)簽，當(dāng)幾個標(biāo)簽頁內(nèi)容同樣都很重要的時候，通過懸停切換。
盡量避免在同一個頁面中使用多組標(biāo)簽頁，如果無法避免，那就講次級的標(biāo)簽頁樣式在視覺上設(shè)計的更輕量化。
一般情況下，標(biāo)簽頁的前兩個用戶點擊率較高，所以要將重要的信息放在前兩個標(biāo)簽頁。
虛擬頁面
通過內(nèi)置分頁、滾動加載、等方式創(chuàng)建一個看起來很大的頁面，而不用跳轉(zhuǎn)頁面。
虛擬頁面的模式主要包括：虛擬滾動、內(nèi)置分頁、滾動分頁、虛擬搖攝、伸縮式用戶界面
這里我們主要來講前兩個：
虛擬滾動
其實就是我們現(xiàn)在講的瀑布流。用戶可以通過滾動無限的看到內(nèi)容，在一個頁面內(nèi)面內(nèi)保證視覺連續(xù)性，查看更多的信息，比較典型的瀑布流：花瓣網(wǎng)、知乎
內(nèi)置分頁
其實就是翻頁控件，讓用戶覺得不是頁面切換而只是內(nèi)容切換，這個太常見。
這里拋出一個問題：為什么淘寶、百度、谷歌不采用瀑布流？
首先對于淘寶這種電子商務(wù)網(wǎng)站采用瀑布流設(shè)計，我認(rèn)為會很大程度的影響到購買成交量，因為用戶會一直被無限的產(chǎn)品誘惑這不斷滾動鼠標(biāo)，而不愿意輕易點擊，浩如煙海的產(chǎn)品雖然會讓用戶感覺到產(chǎn)品很豐富，但很快用戶將意識到他很難做出選擇，他們會認(rèn)為最好的還在下面，這實際上破壞了用戶的自我控制和選擇的感受，反而會導(dǎo)致成交率下降。
因此，電子商務(wù)網(wǎng)站應(yīng)放棄瀑布流布局設(shè)計，并要做好頁面長度的控制，太長反而會讓用戶感到疲憊，并且，請為用戶留下頁碼。
對于像百度和谷歌這中搜索引擎網(wǎng)站，據(jù)調(diào)查用戶在首頁找到相關(guān)內(nèi)容就跳轉(zhuǎn)走的概率是94%，只有6%的人會翻到第二頁，另外用戶使用搜索引擎是渴望快速找到自己想要的答案，而不是渴望看到更多的內(nèi)容，還有就是分頁可以幫助用戶確定最佳搜索結(jié)果的位置，而瀑布流就不可以，用戶再一次尋找最佳答案時，就會很懵逼。
對于內(nèi)容的無限加載，有時也會讓用戶感覺過載，造成視覺疲勞，所以我比較喜歡簡書的處理方式：3頁瀑布流+1頁分頁，給用戶選擇的權(quán)利，簡書還有個好處，就是可以在分頁的狀態(tài)的時候，看到頁腳的信息…
滾動分頁 ?虛擬搖攝? 伸縮式用戶界面
走馬燈、google Maps的地圖拖動、圖片/頁面等的放大縮小
前者用的比較多，后兩者用的比較少
流程處理
前面幾個話題討論了足不出戶原理的幾種模式，長期以來，Web 實現(xiàn)流程的方式就是把每個步驟放在一個單獨的頁面上。雖然這種做法是分解問題最簡單的方式，但并不是最佳解決方案。對于某些『流程處理』而言，讓用戶始終待在同一個頁面上則更有必要。
下面來實際體驗一下：亞馬遜、淘寶、京東、天貓商城、天貓超市的購物體驗：
（因為錄制的GIF尺寸太大，無法上傳，可以實際操作體驗）
從上我們可以看出，亞馬遜、淘寶、京東 三個采用的流程是差不多，將流程步驟分頁展示，這樣用戶購買多件商品的體驗就像折返跑，體驗不好，再看天貓商城和天貓超市采用了講購物車設(shè)計成一個嵌入式部件，隨時都可以往里添加商品，而不會中斷用戶的購買流程；哪種體驗更好：當(dāng)然是后者，但前者的分頁流程也是有一定的好處，那就是可以通過推薦其他商品（附加步驟）來增加銷售額。這樣從業(yè)務(wù)角度和用戶角度來看，天貓超市的設(shè)計是比較合理的。其次是天貓商城。
流程處理的方式還有很多，比如交互式單頁、嵌入式部件、還有彈出式的覆蓋層，雖然這種方式會打亂用戶的心流，但是有時候在彈出框中使用『步驟條』來管理復(fù)雜流程也是可行的。
提供邀請、巧用變換、即時反應(yīng)、待續(xù)…
以上為《web界面設(shè)計》前三個原理的讀書理解，可能會有一些地方理解不合理的地方，還望批評指正。
文章最先發(fā)布于我的個人博客：xdoupd：一個交互設(shè)計師的博客
