起源于1993年的網(wǎng)絡(luò)瀏覽器，時(shí)至今日依然保持著請(qǐng)求-響應(yīng)的交互機(jī)制。當(dāng)用戶打算瀏覽網(wǎng)頁的時(shí)候，用戶輸入鏈接，瀏覽器便會(huì)將用戶請(qǐng)求的內(nèi)容發(fā)送到服務(wù)器，服務(wù)器收到請(qǐng)求，處理它，并響應(yīng)反饋給瀏覽器。考慮到互聯(lián)網(wǎng)的初衷就是用來查看文檔，所以請(qǐng)求-響應(yīng)機(jī)制還是令人滿意的。可是隨著時(shí)代的發(fā)展，用戶對(duì)于互聯(lián)網(wǎng)的需求和期望都已經(jīng)有所改變。
Ajax技術(shù)是這種演化的第一步。它完善了網(wǎng)絡(luò)體驗(yàn)，允許用戶在無需刷新頁面的情況下加載新的內(nèi)容，不過它的限制在于加載新內(nèi)容依然需要用戶發(fā)出請(qǐng)求才能得到響應(yīng)。單用戶借助這種技術(shù)來瀏覽靜態(tài)文檔體驗(yàn)是很不錯(cuò)的，但是在多用戶環(huán)境下就站不住腳了。并非只有網(wǎng)絡(luò)瀏覽面臨著這樣的問題。現(xiàn)如今，我們?cè)陂_發(fā)APP的時(shí)候，也需要考慮多用戶瀏覽的問題。 我們希望數(shù)據(jù)連接和加載能夠如同實(shí)體一樣被用戶感受到，這是實(shí)時(shí)動(dòng)態(tài)加載技術(shù)令人眼前一亮的地方。
挑戰(zhàn)
諸如Node.js和Meteor這樣用戶友好的異步框架，已經(jīng)開始廣泛地運(yùn)用起這種實(shí)時(shí)網(wǎng)絡(luò)技術(shù)。在這項(xiàng)技術(shù)大規(guī)模推行之前，用戶的操作是非常清晰的。這些操作可以清晰地劃歸到用戶頭上，鏈接、刷新和頁面加載是清晰而明確的。單擊鏈接，頁面跳轉(zhuǎn)，內(nèi)容就biu的一聲在你眼前展現(xiàn)出來了。
當(dāng)新的用戶被加入到整個(gè)系統(tǒng)中來的時(shí)候，在頁面刷新前，他們面對(duì)的系統(tǒng)中的數(shù)據(jù)內(nèi)容是完全一樣的，界面是被動(dòng)的，它會(huì)隨著操作而出現(xiàn)反饋的。想象一下整個(gè)系統(tǒng)合理有效地連通不同的用戶的壓力和難度。在實(shí)時(shí)動(dòng)態(tài)系統(tǒng)中，我們所面臨的不僅僅是創(chuàng)造令人欲罷不能的特性，還得處理大量數(shù)據(jù)和它們之間復(fù)雜的因果關(guān)系。
我們需要將APP以自然而易于理解的方式呈現(xiàn)在用戶面前。在實(shí)際操作中，APP只有能讓用戶易于操作理解，才能與之共鳴，讓他們注冊(cè)，并且與之互動(dòng)。掌控好數(shù)據(jù)與界面之間的因果關(guān)系，不同層級(jí)數(shù)據(jù)與界面之間的交互規(guī)律，才能讓APP更優(yōu)秀。
規(guī)則
開發(fā)者能夠利用實(shí)時(shí)動(dòng)態(tài)設(shè)計(jì)來打造下一代的web用戶體驗(yàn)。而我們也總結(jié)出了一系列實(shí)時(shí)設(shè)計(jì)用戶體驗(yàn)的設(shè)計(jì)規(guī)則。
1、聲明狀態(tài)
用戶理當(dāng)知道系統(tǒng)的狀態(tài)，而系統(tǒng)也應(yīng)該對(duì)用戶操作進(jìn)行確認(rèn)和反饋。
應(yīng)用應(yīng)當(dāng)適當(dāng)?shù)貜?qiáng)化界面結(jié)構(gòu)，否則系統(tǒng)的整體架構(gòu)將不夠明晰。當(dāng)實(shí)時(shí)界面出現(xiàn)變化的時(shí)候，比如頁面刷新，下拉之后頂部的刷新控件能夠適時(shí)地向用戶傳達(dá)列表的連接刷新狀態(tài)。
實(shí)例：連接狀態(tài)
你的連接是否處于連接狀態(tài)?連接失效自然是不可避免的。很多外部因素可能會(huì)導(dǎo)致數(shù)據(jù)交換達(dá)到不符合預(yù)期的結(jié)果，導(dǎo)致連接失效。
style=”float:left”
圖1 修改前：用戶沒有被告知連接丟失，這可能會(huì)影響他們對(duì)APP的預(yù)期。
圖2 修改后：數(shù)據(jù)交換中出現(xiàn)提示，連通斷開，并且系統(tǒng)嘗試去修復(fù)。
實(shí)例：加載
在網(wǎng)速有限的情況下加載大量?jī)?nèi)容時(shí)，就會(huì)很容易讓用戶陷入長(zhǎng)時(shí)間的等待。作為一個(gè)優(yōu)秀的設(shè)計(jì)師，告訴用戶加載時(shí)間是很有必要的。
圖3：修改前：在被打斷之后，在應(yīng)用加載用戶內(nèi)容時(shí)，用戶不會(huì)知道要加載的時(shí)間。
圖4：修改后：進(jìn)程指示器顯示加載的內(nèi)容還有多長(zhǎng)的等待時(shí)間。
實(shí)例：確認(rèn)
對(duì)于用戶行為做出的響應(yīng)，能夠顯示出系統(tǒng)正在聆聽并且關(guān)心用戶。
圖5：修改前：在刪除完成后，用戶并沒有得到反饋
圖6：修改后：在用戶完成刪除達(dá)到新界面時(shí)，會(huì)得到刪除確認(rèn)。
2、預(yù)測(cè)變化
用戶需要知道操作之后接下來的會(huì)是什么。當(dāng)用戶行為發(fā)生時(shí)，產(chǎn)品應(yīng)告知用戶接下來會(huì)出現(xiàn)什么。
在嚴(yán)密的邏輯體系中，意外往往不易讓人接受。比如，汽車要運(yùn)送乘客到目的地，汽車需要保持機(jī)械精度，確保正常運(yùn)行，而在這個(gè)系統(tǒng)中，意外就是爆胎和發(fā)動(dòng)機(jī)故障。與汽車類似的是，一個(gè)應(yīng)用程序要以用戶友好的方式，竭盡全力幫用戶達(dá)成目的。不同于汽車的是，移動(dòng)端應(yīng)用使我們能夠預(yù)見并告知用戶即將到來的變化。
實(shí)例：呈現(xiàn)結(jié)果
當(dāng)可能發(fā)生明顯的界面狀態(tài)變化時(shí)，需要向用戶預(yù)告變化的結(jié)果，給用戶機(jī)會(huì)來處理，并防止將要發(fā)生的意外。
圖7：修改前：當(dāng)新界面出現(xiàn)的時(shí)候，視野中并沒有提示或者反饋。
圖8：修改后：當(dāng)新的界面準(zhǔn)備好加載時(shí)，系統(tǒng)會(huì)做出響應(yīng)，但是不會(huì)通過自動(dòng)響應(yīng)來干擾進(jìn)程。
實(shí)例：框架模板
顯示布局框架預(yù)示著將要跳轉(zhuǎn)到新的界面，提前切換布局填補(bǔ)空白。另外還有個(gè)好處，這可以使得程序看起來更有“響應(yīng)式”的特征。
圖9：修改前：在屏幕加載新界面之前，用戶需要等待所有內(nèi)容加載完，之后界面突然切換過來。
圖10：修改后：頁面加載用占位符指示哪些內(nèi)容是即將出現(xiàn)的。
3、保持上下文
用戶應(yīng)該知道內(nèi)容來自哪里，屬于哪里。
由于用戶無法實(shí)時(shí)監(jiān)測(cè)應(yīng)用內(nèi)具體發(fā)生了什么變化，因此建立并加強(qiáng)應(yīng)用空間感很重要。這里，空間感指的是每個(gè)界面和每個(gè)按鈕與其它部件的相對(duì)空間位置。為此，我們需要?jiǎng)?chuàng)建一些可信賴的標(biāo)志來強(qiáng)化它們的存在。
實(shí)例：一致的位置
新的內(nèi)容應(yīng)該出現(xiàn)在一個(gè)可預(yù)測(cè)的位置。讓用戶習(xí)慣應(yīng)用內(nèi)功能導(dǎo)航的路徑，不要通過提供多種路徑來完成同樣的事情。
圖11：修改前：新的控件和元素出現(xiàn)在不可預(yù)料的位置。
圖12：修改后：內(nèi)容總是出現(xiàn)在一致的位置上。這時(shí)，用戶在視覺上不會(huì)感到新內(nèi)容突兀。
事例：變化過程
讓狀態(tài)的變化更加清晰明了，不要讓條目突兀地出現(xiàn)在不可預(yù)見的位置。動(dòng)畫可能很大的程度上確保這一點(diǎn)，讓新加載的內(nèi)容正與周圍的環(huán)境融為一體。
圖13：修改前：新條目的一閃而入，會(huì)造成相鄰內(nèi)容無過渡地向下移動(dòng)。
圖14：修改后：新的項(xiàng)目和相鄰項(xiàng)目之間有動(dòng)畫過渡，它們的位置隨著時(shí)間的推移而變化，從而給予用戶一段時(shí)間去接受它們的變化。
實(shí)例：保持位置
當(dāng)項(xiàng)目在不同屏幕之間來回移動(dòng)時(shí)，需確保用戶返回時(shí)能回到他們進(jìn)入前的相同位置。
圖15：修改前：滾動(dòng)位會(huì)置重置。用戶要花費(fèi)較多精力去尋找之前的位置，這樣的用戶體驗(yàn)很糟糕。
圖16：修改后：之前的位置被系統(tǒng)儲(chǔ)存，當(dāng)用戶返回時(shí)，能回到最初進(jìn)入的位置。
結(jié)語
以上這些理論可以作為我們起草實(shí)時(shí)體驗(yàn)時(shí)的出發(fā)點(diǎn)。我鼓勵(lì)所有的創(chuàng)作者去發(fā)現(xiàn)這些原理的應(yīng)用范圍，但是，最重要的是要了解狀態(tài)，預(yù)知改變，并且呈現(xiàn)內(nèi)容。