全篇字數(shù)：10816字
閱讀需用：20min
前幾天在部門里做了一次分享瓤的，分享的內容是關于讀過的一本書《web界面設計》碴裙，這是一本不算新的書屉来，書里對于一些知識舉的舉例也還都是雅虎時代的例子蓬抄，但俗話說的好：例糙理不糙务傲，作者對于交互模式的總結凉当、分析和解讀在當下也被許多大企業(yè)借鑒，比如螞蟻的ANTD部分設計原則就是基于此書售葡，所以總的來說看杭，這是一本可以一讀的書。目前網(wǎng)上應該是買不到此書了挟伙，我也是脫朋友從學校圖書館里借閱了一本楼雹，用了一段時間閱讀，這類書說實話尖阔，確實枯燥贮缅，不過對于從事交互設計的同學來說，應該說可以作為一本基礎必讀書目來看介却。
以下讀書筆記：
引子
《web界面設計》是由兩位作者 Bill Scott和Theresa Neil兩位30多年web設計所總結出來的經驗和最佳實踐谴供。
原理：（拉丁語：principium，法語：principe齿坷，德語：Prinzip桂肌，英語：principle）、原則或定律永淌，是存在于某個系統(tǒng)中的一組法律崎场、規(guī)則與基本前提。這個體系中的其他事物仰禀，大體上都可以經由這個基本規(guī)律來推導照雁、解釋與預測；這個體系中的成員答恶，都應該遵守這個基本規(guī)律，在這套規(guī)則下運作萍诱。經由了解這個體系的原理悬嗓，可以了解到整個體系的基本特征，或是反映出這個體系被設計的目的裕坊。如果這個體系下的某個原理被忽略包竹，可能造成體系無法運作，或是這個行為將無法達成其目的。-wiki百科
模式：…當遇到某個反復出現(xiàn)的問題時周瞎，就相應解決方案的核心內容給出的描述…
設計模式：在軟件工程中苗缩，對軟件設計中普遍存在（反復出現(xiàn)）的各種問題，所提出的解決方案声诸。這個屬于是由埃里辖囱龋·伽瑪?shù)热嗽?990年代從建筑設計領域引入到計算機科學的。-wiki百科
本次分享的內容就是web交互設計的模式彼乌，以及這些模式所依托的由作者總結出來的6個設計原理泻肯。
直截了當? 簡化交互? 足不出戶? 提供邀請? 使用變換? 即時反應
這6個設計原理也是目前比較被大家認可的AntDesign所依托的設計原理，所以我們這里也同樣結合Antdesign來看慰照。
Antdesign所依托的設計原理一共10個灶挟，前四個出自《寫給大家看的設計書》、后6個即出自《web界面設計》
直截了當
需要在哪里輸入毒租，就要允許在哪里輸出稚铣。不要為了編輯內容而打開另一個頁面，應該直接在上下文中實現(xiàn)編輯墅垮。目的是能更直接的相應用戶的操作榛泛。
Axure和Sketch的目錄編輯交互模式就符合這個原理，輸入及輸出噩斟，所見即所得曹锨，沒有經過任何其他的頁面過度，在此原理下剃允，我們來介紹三種常見的交互模式：頁內編輯沛简、利于拖放、直接選擇
頁內編輯
故名思意就是在當前頁內完成編輯操作斥废，不用跳轉到其他頁面椒楣。包含了：單字段行內編輯、多字段行內編輯牡肉、覆蓋層編輯捧灰、群組編輯、表格編輯统锤、模塊配置
單字段行內編輯
- ?這里舉知乎編輯個人資料的例子
單字段行內編輯? 就是在行內編輯一個文本字段毛俏，是最簡單的行內編輯形式，這種交互發(fā)生在原地而不是單獨的窗口或者單獨的頁面饲窿。營造所見即所得的狀態(tài)煌寇。
設計這個模式的時候，要考慮到兩個要素：易讀性和易編輯性
我們來看兩個例子：
什么時候選用方案1逾雄、什么時候選用方案2 阀溶？
方案1的優(yōu)點是易讀性較好腻脏，因為頁面中沒有干擾內容本身的其他元素，缺點是編輯模式的易發(fā)現(xiàn)性較差银锻，因為要通過鼠標移動到字段上面才能發(fā)現(xiàn)編輯模式永品；方案2的優(yōu)缺點剛好是相反，所以當易讀性比易發(fā)現(xiàn)性重要時击纬，選用方案1鼎姐，反之，則選擇方案2掉弛。
多字段行內編輯
多字段行內編輯症见，常見于表格的一行多字段編輯
1 視覺割裂感
顯示模式和編輯模式模式之間往往需要不同大小的頁面空間和布局，也會使用不同類型和數(shù)量的控件殃饿，因此顯示模式和編輯模式之間就可能造成用戶視覺上的割裂感谋作。
解決這種視覺割裂感有兩種方式：1 保證顯示模式在切換到編輯模式的時候，顯示模式的元素位置不動乎芳，如下圖遵蚜；2 利用動畫的方式，來緩解這種割裂感奈惑，一般為淡出和淡入吭净。（這個在后面的巧用過過渡的原理里也會提到）
這兩種模式都是在頁面內實現(xiàn)編輯，這樣的好處是可以不脫離上下文肴甸。但有時我們會遇到很復雜的編輯模式寂殉，比如我們要通過日期選擇控件，重新選擇一個入住日期原在，那要在當前頁面內完成的話友扰，且不影響上下文，那就需要把下面的“酒店和關鍵詞 以及搜索庶柿，下移村怪，來給這個控件騰出位置” 這樣會損壞頁面的整體感，這時就可以采用覆蓋層來實現(xiàn)浮庐，這樣雖然會遮擋上下文中的一些元素甚负，不過這些元素對編輯并不顯得那么重要
覆蓋層編輯
使用覆蓋層編輯時，應盡量使用最輕量的樣式审残，以減少顯示和編輯模式切換造成的干擾梭域。覆蓋層編輯一般為一些特殊控件：如日歷控件、日期選擇控件等维苔。
群組編輯
群組編輯這個最經典的例子莫過于iPhone的長按圖標由正常顯示模式進入編輯模式碰辅，但iPhone的這種編輯模式初次使用不易被發(fā)現(xiàn)，有一定的學習成本介时，我們平時也會遇到很多群組編輯的例子，比如剛剛說到的QQ個人資料卡的編輯。
這里我們要提到另一個原則叫 對稱性交互原則沸柔；
對稱性交互原則：進入和退出編輯模式通常應該同樣的交互風格循衰，這樣有助于發(fā)現(xiàn)相反的操作。
我們看iPhone的例子 其實是不符合對稱性交互原則的褐澎，因為它進入編輯模式是通過長按会钝，而退出編輯模式是通過按home鍵，這種交互是不對稱的工三，那按照對稱性交互原則迁酸，編輯模式下，長按圖標應該也會退出編輯模式俭正，那蘋果為什么沒這么做的原因奸鬓，是因為它把按壓home鍵設計成了系統(tǒng)級的返回桌面的交互操作，而這個方式在用戶的使用中也逐漸成為操作習慣掸读。我們再看QQ的個人資料卡串远，其實是個很好的遵循了對稱性交互原則，它進入編輯模式和退出編輯模式的交互位置和方式是相同的儿惫，這樣就很大程度的降低了用戶的認知成本澡罚；平時也會遇到很多的對稱性交互原則的例子：
比如：Axure的目錄編輯，用戶能進行行內編輯肾请，所見即所得留搔，輸入輸出保持了高度一致。
拖放
拖放操作铛铁，在Antdesign里給了兩個示例：1 拖放列表? 2 拖放圖片/文件
但其實我們平時使用計算機的過程中會發(fā)現(xiàn)很多其他的拖放的身影：
拖放模塊：
重新排列頁面上的模塊隔显，注意鼠標移動到畫板上的交互邀請，以及拖動畫板離開原位置的虛線框和觸發(fā)第二塊畫板自動填充第一個虛線框后留下的攻被拖放花瓣放置的虛線框避归，這其實也是一種邀請荣月，這里我們討論一個問題：到底以哪個位置來確定拖動模塊的
- 這里舉花瓣網(wǎng)拖放畫板的例子
在拖放模塊設計的時候，要考慮到拖放的過程中過程瞬間梳毙，根據(jù)不同的場景選擇合適的拖放觸發(fā)位置哺窄，如下圖的：1.被拖放模塊的邊界；2.鼠標的位置账锹；3.被拖放模塊的中心
拖放列表：
重新排列列表項的順序萌业，這里也要注意一些交互邀請。
圖為GIF生年，加載可能會有點慢。
拖放對象：
改變對象間的從屬關系廓奕，拖放目錄到被放置目錄上的交互瞬間抱婉，解釋層級關系的改變档叔。Axure采用的是插入條，道理相同蒸绩，Google Drive沒采用目錄拖放邀請的原型可能是目錄的拖放操作已經培養(yǎng)成用戶喜歡衙四，或者是用戶想去改變目錄結構的時候，給予他正確的反饋患亿。
拖放操作：
在被放置的對象上執(zhí)行操作
拖放集合：
通過拖放操作集合
舉一個不算太合適的例子：eagle
直接選擇
就是允許用戶選擇對象步藕，然后為對象應用操作惦界。我們平時工作比較常見的幾種選擇模式：
切換選擇：
基于復選框的選擇
集合選擇：
跨越多頁的選擇
對象選擇：
直接選擇對象
我這里舉一個例子，大家就知道這三種選擇模式分別代表什么了
左上是對象選擇 咙冗、右上是切換選擇沾歪、下面是集合選擇
我們現(xiàn)在通過三個郵箱客戶端來分別對比一下這三種選擇：QQ郵箱、Gmail乞娄、某企業(yè)郵箱
對于切換選擇和對象選擇瞬逊，這三個系統(tǒng)方式都是相同的，通過切換選擇復選框來選擇多項仪或，對象選擇是打開郵件确镊，這里面我們來看這三個系統(tǒng)在選擇全部集合選擇上差異：
QQ郵是提供一個全選復選框+選擇當前頁還是選擇全部提示；
G郵是提供一個全選復選框+選擇當前頁還是選擇全部提示+全選復選框下拉提示范删；
某企業(yè)郵是提供一個全選復選框+全選復選框下拉提示蕾域；
下拉是一個不易被發(fā)現(xiàn)的交互模式，所以某企業(yè)郵是三個系統(tǒng)里 集合選擇模式上做的最不好的到旦。
簡化交互
簡單點理解就是讓用戶執(zhí)行某個操作時更容易旨巷，這里引用費茨法則，如果用戶鼠標移動距離越少添忘、對象相對目標越大采呐，那么用戶越容易操作。這個法則其實很好理解搁骑。球門越大斧吐，越容易踢進去，距離球門越近仲器，越容易踢進去煤率。
我們首先來看三張圖：桌面客戶端產品、GOOGLE乏冀、QQ郵箱
第一個是最常見的桌面客戶端型產品Word蝶糯，可以看出內容區(qū)和功能菜單是完全分開的兩個區(qū)域，用戶要么先選擇一種工具辆沦，要么先選擇一些內容對象昼捍，然后再用相應的工具來操作數(shù)據(jù)识虚。
（這里我要推薦下Markdown，最近已經完全愛上這種編輯模式端三，有興趣的體驗就就知道了）
早起網(wǎng)站如Google等則是完全以內容為中心舷礼，簡單的瀏覽或鏈接到其他的頁面鹃彻，用不到太多的工具郊闯，而隨著web的成熟，越來越多內容和功能混合的站點涌現(xiàn)蛛株，就如同郵箱系統(tǒng)一樣团赁。
那當前的話題就是要考量這種站點的用戶界面要如何設計？
我們前面說到費茨法則谨履，距離越近欢摄，目標越大操作越容易，那這個近到底近到什么程度才能算近呢笋粟，iPhone的用戶界面給了我們答案怀挠，內容即界面，無需劃分功能區(qū)害捕，每個對象都可以直接操作绿淋。
怎樣才能使功能更貼近內容，從而簡化交互呢尝盼？
這里我們提出一個名詞叫上下文工具
上下文工具
上下文功能其實你可以理解為桌面右鍵菜單的web版吞滞。不過并不是讓用戶通過右鍵顯示菜單，而是可以通過內容在上下文中顯示相關工具
我們首先能想到的第一點是不是把重要的操作直接放到界面中盾沫，并實時可見裁赠。
實時可見工具：
把上下文工具直接顯示在內容中
- 這里舉知乎的例子
這里為什么不把贊同/不贊同 隱藏起來，等到鼠標懸停再出現(xiàn)呢赴精，因為這個功能是知乎這個網(wǎng)站的一個核心功能佩捞，必須始終顯示以明確邀請用戶參與。
實時可見工具的一個最大的好處就是易發(fā)現(xiàn)性蕾哟，但是在另一方面也會導致頁面看起來比較混亂一忱，那我們來看看一些知名的web站點是怎么處理的？
這里主要對比三個郵箱的加星標操作的差異
星標的位置和重要程度的不同渐苏，可能是考慮到用戶群體的差異掀潮，Gmail和163面向的商務群體比較多，星標郵件對于這類群體來說是個很重要的功能琼富，所以將其提至頁面視覺的前部仪吧，而QQ郵箱面向的群體可能偏學生多一點，所以星標郵件功能就不是那么重要的功能鞠眉，所以放在視覺末端去顯示（個人觀點薯鼠，歡迎辟謠）
這里補充一點幾個郵箱的差異：Q郵和163的菜單（刪除操作等）是實時顯示的择诈，而Gmail采用的是選擇后出現(xiàn)，孰優(yōu)孰劣出皇，也要視業(yè)務場景和用戶群體特征去判斷羞芍，單從內容和交互體驗來看，Gmail的方式 我比較喜歡郊艘。
懸停即現(xiàn)工具
如果某個操作不那么重要荷科，或者使用『實時可見工具』過于啰嗦會影響用戶閱讀時，可以在懸停在該對象上時展示操作項纱注。
這個大家再熟悉不過了畏浆，這樣做的目的是為了減少視覺干擾，將非主要操作先隱藏起來狞贱，按需出現(xiàn)刻获。
- 這里舉百度網(wǎng)盤和Google Drive的例子
分析百度網(wǎng)盤懸停即現(xiàn) 下載 分享快捷操作，而Google Drive沒有采取懸停即現(xiàn)的原因瞎嬉？
開關顯示工具
這種模式也很常見蝎毡，如果操作并不是主要目的，但又想用戶直接操作界面來提供方面氧枣，可以通過開關來實現(xiàn)沐兵，某些操作只需要在特定模式時顯示。
這里QQ個人資料卡 是個反例挑胸，雖然保證了編輯和完成編輯交互的對稱痒筒，但兩個模式的切換卻出現(xiàn)了頁面元素的晃動。
級聯(lián)遞進工具
首先拿Gmail舉級聯(lián)遞進的例子茬贵，說明級聯(lián)遞進是什么意思簿透。
下面對比QQ郵箱和百度網(wǎng)盤還有Gmail的例子，選中某一個對象后解藻，才出現(xiàn)相應的操作和相應的操作一直顯示的差異老充。
在可能的情況下，應盡量避免級聯(lián)螟左，因為為了使用下一級菜單而執(zhí)行過多的鼠標操作啡浊，很容易讓用戶反感。
二級菜單
二級菜單就相當于桌面程序的右鍵菜單胶背，當然也不局限于右鍵巷嚣，MAC在DOCK上按住鼠標1秒鐘也會呼出菜單，但在web中要慎重使用钳吟，因為二級菜單以前在web上并不常見廷粒，主要原因是因為會和瀏覽器的右鍵菜單沖突，所以用戶這種操作習慣并沒有被培養(yǎng)出來，所以在使用二級菜單的時候坝茎，應該是把一些替代性命令或者快捷方式放在其中
交互中的工具
如果操作不重要或者可以通過其他途徑完成時涤姊，可以將工具放置在用戶的操作流程中，減少界面元素嗤放，降低認知負擔思喊，給用戶小驚喜。
- 這里對比Antdesign和QQ個人資料卡 復制QQ號的優(yōu)劣
首先用戶想復制一個東西次酌，他首先想到的是系統(tǒng)級的復制恨课，即選中數(shù)字 右鍵復制，當用戶在執(zhí)行這個意圖的過程中和措，你通過一些動態(tài)邀請庄呈，提供給了用戶一個更快捷的操作，會增加用戶對產品的喜愛派阱。而QQ這里的快捷操作，在首次使用時 是有一定的認知門檻的斜纪，用戶如果執(zhí)行傳統(tǒng)的復制操作贫母，則不會發(fā)現(xiàn)此功能，所以在傳統(tǒng)的用戶心智模型的基礎上盒刚，Antdesign的設計方式要更優(yōu)一點腺劣，因為用戶的心智模型彌補了不易發(fā)現(xiàn)性。
可視區(qū)域≠可點擊區(qū)域
這個其實就是擴大可點擊視覺原色的可點擊區(qū)域因块，以此來簡化交互橘原，遵循的費茨法則。
足不出戶
能在這個頁面解決的問題涡上，就不要去其它頁面解決趾断，因為任何頁面刷新和跳轉都會引起變化視盲（Change Blindness），導致用戶心流（Flow）被打斷吩愧。頻繁的頁面刷新和跳轉芋酌，就像在看戲時，演員說完一行臺詞就安排一次謝幕一樣雁佳。
這里說到兩個詞：心流和變化視盲脐帝。
變換盲視（Change Blindness） ：指視覺場景中的某些變化并未被觀察者注意到的心理現(xiàn)象。產生這種現(xiàn)象的原因包括場景中的障礙物糖权，眼球運動堵腹、地點的變化，或者是缺乏注意力等星澳【吻辏——摘自《維基百科》
心流（Flow） ：也有別名以化境 (Zone) 表示，亦有人翻譯為神馳狀態(tài)募判，定義是一種將個人精神力完全投注在某種活動上的感覺荡含；心流產生時同時會有高度的興奮及充實感咒唆。——摘自《維基百科》
運動員要去培養(yǎng)快速進入心流的能力释液。
其實通俗一點講就是：能在這個頁面解決的問題全释，就不要去其它頁面解決，以此能創(chuàng)造連續(xù)視覺感知的心流境界误债，其實就一個詞：視覺連續(xù)性
那為達到這種視覺連續(xù)性浸船，避免頁面的跳轉，有4中我們常見的模式：
覆蓋層寝蹈、嵌入層李命、虛擬頁面、流程處理
覆蓋層
覆蓋層大家再熟悉不過箫老，覆蓋層的好處：
1. 輕量? 不占資源封字、顯示速度快
2. 覆蓋層由web控制而不是瀏覽器控制，這樣設計人員就可以從外觀上使覆蓋層與界面很好的融為一體耍鬓。
我們平時遇到的覆蓋層有：對話框覆蓋層阔籽、詳情覆蓋層、輸入覆蓋層
對話框覆蓋層
先舉例：模態(tài)覆蓋層和非模態(tài)覆蓋層
模態(tài)覆蓋層就是你必須要和當前的覆蓋層進行交互 才能返回應用程序牲蜀；
非模態(tài)則是允許用戶在不處理對話框的情況下 可以操作頁面被的其他內容笆制。
我們從一個簡單的操作：刪除? 來看這兩者的區(qū)別和應用場景
印象筆記的 刪除 ，在刪除筆記時涣达，用戶是需要通過右鍵 選擇刪除操作的在辆，完成這個操作，用戶需要付出一定操作成本度苔，所以這里不需要確認刪除的對話框匆篓。那我們再看印象筆記刪除筆記本的操作，這里印象筆記彈出了一個確認刪除的對話框是為什么林螃？因為刪除一個筆記本對用戶造成的損失要遠遠大于一個刪除一個筆記帶來的損失奕删，所以這里會有二次確認。
我們再看淘寶購物車的刪除疗认，淘寶使用了一個模態(tài)的確認彈窗完残，為啥？
因為你購物車里的東西横漏，會極大可能轉化為交易谨设，所以淘寶當然希望你不刪除購物車里的東西了，這是業(yè)務層面的考慮缎浇。
像刪除這種操作的二次確認的對話框扎拣，應該勇敢的讓用戶去嘗試，給用戶撤銷的機會，當執(zhí)行某些無法撤銷的操作時二蓝，可以使用輕量級的非模態(tài)彈窗誉券，應盡量避免使用模態(tài)的二次確認彈窗。
Antdesign給我們舉了很不錯的例子：
輸入覆蓋層
在覆蓋層上刊愚，讓用戶直接進行少量字段的輸入踊跟。
這個一般用于表格或列表的名稱修改比較多，用戶可以直接通過一個小的氣泡輸入覆蓋層鸥诽，來修改編輯信息商玫，而不是彈出一個帶有亮盒效果的對話框覆蓋層
詳情覆蓋層
一般在列表中，通過用戶『懸湍到瑁』/『點擊』某個區(qū)塊拳昌，在當前頁加載該條列表項的更多詳情信息。
這里我們再對比QQ郵箱钠龙、163郵箱炬藤、Gmail、阿里企業(yè)郵箱俊鱼，其余三者均為點擊郵件跳轉新頁面查看詳情刻像，而阿里企業(yè)郵則是在右側滑出一個覆蓋層用以顯示郵件詳情。這樣的好處顯而易見并闲，可以在顯示部分郵件列表內容的情況下，快速切換查看郵件谷羞；
詳情覆蓋層的例子還有很多帝火，比如豆瓣的電影詳情，鼠標懸停在電影海報上 0.5s會彈出一個詳情頁湃缎，以便用戶快速查看影片信息犀填，這里的重點是0.5的懸停延時，如果沒有這0.5s的懸停延時嗓违，要么用戶無法發(fā)現(xiàn)詳情覆蓋層九巡，要么就是頁面會顯得特別鬧騰。
嵌入層
顧名思義 就是將信息直接嵌在頁面中蹂季，平時比較常見的就是列表嵌入層冕广、詳情嵌入層和標簽頁
列表嵌入層
在列表中，顯示某條列表項的詳情信息偿洁，保持上下文不中斷撒汉。
使用列表嵌入層時，應保證嵌入層的內容高度不要太高涕滋，否則會影響體驗睬辐。
以上為什么QQ閱讀訂閱的嵌入層展開內容高度很多，卻還要采用嵌入層的模式，因為QQ閱讀列表提供的內容已經相對來說比較豐富溯饵，用戶可以判斷是不是對內容感興趣才會打開侵俗，這時候閱讀的視覺連續(xù)性就比較重要，但是也要考慮到用戶誤觸等非意愿打開的情況丰刊，這時我們在交互上要做的就是 提供一種簡單快速的關閉打開模式的交互隘谣，這里我認為QQ訂閱列表的關閉列表的交互熱區(qū)應該可以考慮適當擴大一點，按照費茨法則，這樣可以簡化交互，給用戶帶來方便壹罚。
詳情嵌入層
顧名思義就是把內容詳情直接嵌入頁面中党涕，和前面提到的詳情覆蓋層類似，使用詳情嵌入層也要考慮到內容信息的多少次兆。下面我們來看一個例子：
安居客房子信息列表的頁面，其實可以將房子的照片等能促使用戶對房子發(fā)生興趣的因為嵌入到當前頁面中，以方便用戶快速的對房子有個大體的印象弟晚。
有時候我們可以使用詳情嵌入層在上下文中顯示詳細信息，且不會遮擋其他信息逾苫。
標簽頁
這個大家再熟悉不過卿城，將多個平級的信息進行整理和分類了，一次只顯示一組信息铅搓。
這里需要注意的是瑟押，通常情況下 是使用鼠標單擊來切換標簽，當幾個標簽頁內容同樣都很重要的時候星掰，通過懸停切換多望。
盡量避免在同一個頁面中使用多組標簽頁，如果無法避免氢烘，那就講次級的標簽頁樣式在視覺上設計的更輕量化怀偷。
一般情況下，標簽頁的前兩個用戶點擊率較高播玖，所以要將重要的信息放在前兩個標簽頁椎工。
虛擬頁面
通過內置分頁、滾動加載蜀踏、等方式創(chuàng)建一個看起來很大的頁面维蒙，而不用跳轉頁面。
虛擬頁面的模式主要包括：虛擬滾動脓斩、內置分頁木西、滾動分頁、虛擬搖攝随静、伸縮式用戶界面
這里我們主要來講前兩個：
虛擬滾動
其實就是我們現(xiàn)在講的瀑布流八千。用戶可以通過滾動無限的看到內容吗讶，在一個頁面內面內保證視覺連續(xù)性，查看更多的信息恋捆，比較典型的瀑布流：花瓣網(wǎng)照皆、知乎
內置分頁
其實就是翻頁控件，讓用戶覺得不是頁面切換而只是內容切換沸停，這個太常見膜毁。
這里拋出一個問題：為什么淘寶、百度愤钾、谷歌不采用瀑布流瘟滨？
首先對于淘寶這種電子商務網(wǎng)站采用瀑布流設計，我認為會很大程度的影響到購買成交量能颁，因為用戶會一直被無限的產品誘惑這不斷滾動鼠標杂瘸，而不愿意輕易點擊，浩如煙海的產品雖然會讓用戶感覺到產品很豐富伙菊，但很快用戶將意識到他很難做出選擇败玉，他們會認為最好的還在下面，這實際上破壞了用戶的自我控制和選擇的感受镜硕，反而會導致成交率下降运翼。
因此，電子商務網(wǎng)站應放棄瀑布流布局設計兴枯，并要做好頁面長度的控制血淌，太長反而會讓用戶感到疲憊，并且财剖，請為用戶留下頁碼六剥。
對于像百度和谷歌這中搜索引擎網(wǎng)站，據(jù)調查用戶在首頁找到相關內容就跳轉走的概率是94%峰伙，只有6%的人會翻到第二頁，另外用戶使用搜索引擎是渴望快速找到自己想要的答案该默，而不是渴望看到更多的內容瞳氓，還有就是分頁可以幫助用戶確定最佳搜索結果的位置，而瀑布流就不可以栓袖，用戶再一次尋找最佳答案時匣摘，就會很懵逼。
對于內容的無限加載裹刮，有時也會讓用戶感覺過載音榜，造成視覺疲勞，所以我比較喜歡簡書的處理方式：3頁瀑布流+1頁分頁捧弃，給用戶選擇的權利赠叼，簡書還有個好處擦囊，就是可以在分頁的狀態(tài)的時候，看到頁腳的信息…
滾動分頁 ?虛擬搖攝? 伸縮式用戶界面
走馬燈嘴办、google Maps的地圖拖動瞬场、圖片/頁面等的放大縮小
前者用的比較多，后兩者用的比較少
流程處理
前面幾個話題討論了足不出戶原理的幾種模式涧郊，長期以來贯被，Web 實現(xiàn)流程的方式就是把每個步驟放在一個單獨的頁面上。雖然這種做法是分解問題最簡單的方式妆艘，但并不是最佳解決方案彤灶。對于某些『流程處理』而言，讓用戶始終待在同一個頁面上則更有必要批旺。
下面來實際體驗一下：亞馬遜幌陕、淘寶、京東朱沃、天貓商城苞轿、天貓超市的購物體驗：
（因為錄制的GIF尺寸太大，無法上傳逗物，可以實際操作體驗）
從上我們可以看出搬卒，亞馬遜、淘寶翎卓、京東 三個采用的流程是差不多契邀，將流程步驟分頁展示，這樣用戶購買多件商品的體驗就像折返跑失暴，體驗不好坯门，再看天貓商城和天貓超市采用了講購物車設計成一個嵌入式部件，隨時都可以往里添加商品逗扒，而不會中斷用戶的購買流程古戴；哪種體驗更好：當然是后者，但前者的分頁流程也是有一定的好處矩肩，那就是可以通過推薦其他商品（附加步驟）來增加銷售額现恼。這樣從業(yè)務角度和用戶角度來看，天貓超市的設計是比較合理的黍檩。其次是天貓商城叉袍。
流程處理的方式還有很多，比如交互式單頁刽酱、嵌入式部件喳逛、還有彈出式的覆蓋層，雖然這種方式會打亂用戶的心流棵里，但是有時候在彈出框中使用『步驟條』來管理復雜流程也是可行的润文。
提供邀請姐呐、巧用變換、即時反應转唉、待續(xù)…
以上為《web界面設計》前三個原理的讀書理解皮钠，可能會有一些地方理解不合理的地方，還望批評指正赠法。
文章最先發(fā)布于我的個人博客：xdoupd：一個交互設計師的博客
