設(shè)計實時響應(yīng)的用戶體驗時可能有用的幾個基本原則：

1磷醋、狀態(tài)清晰

用戶應(yīng)該清楚系統(tǒng)當前所處的狀態(tài)银觅，任何時候攒砖，程序應(yīng)該向用戶傳達清楚當前發(fā)生了什么并針對用戶的每一步操作給出清晰的反饋夯膀。

應(yīng)用程序本身建立在一個非結(jié)構(gòu)化的系統(tǒng)之上继蜡，其試圖向用戶提供結(jié)構(gòu)化的數(shù)據(jù)回俐。雖然實時響應(yīng)的界面并不使用類似于頁面刷新器這樣的固定標識符逛腿，但它同樣可以使用恰當?shù)男盘杹順俗R狀態(tài)的改變。

實例：網(wǎng)絡(luò)連接狀態(tài)

在我們使用移動設(shè)備的時候仅颇，難免會碰到網(wǎng)絡(luò)掉線的情況单默，這時候最好告訴用戶是由于超出程序控制的某種因素導致了這種意外情況。

不好：網(wǎng)絡(luò)掉線后并沒有告訴用戶

好：出現(xiàn)清楚的通知告訴用戶網(wǎng)絡(luò)掉線忘瓦，系統(tǒng)正在嘗試重新連接

實例：加載狀態(tài)

低帶寬（網(wǎng)絡(luò)環(huán)境差）搁廓、加載數(shù)據(jù)量大、多點連接等諸多因素都可能引起用戶在使用你的程序過程中需要花費一定時間等待耕皮。應(yīng)對這種情況的方法是你要培養(yǎng)自己成為一個具有前瞻性的設(shè)計師境蜕，通過一定的方法凸顯出系統(tǒng)正在響應(yīng)用戶行為并嘗試加載新數(shù)據(jù)，好讓用戶意識到這一過程凌停。

不好：系統(tǒng)沒有告知用戶他在與列表項交互后粱年，系統(tǒng)就開始加載內(nèi)容了

好：頭部的進度指示器向用戶標明了加載過程，以及需要等待的時間

實例：確認狀態(tài)

應(yīng)該積極響應(yīng)用戶的操作罚拟，并給出結(jié)果的反饋台诗，讓用戶意識到系統(tǒng)對其行為目標的狀態(tài)是關(guān)心的。

不好：用戶到新頁面后赐俗，系統(tǒng)并沒有告知其前面的刪除操作是否成功了

好：使用一個提示強化了系統(tǒng)對刪除操作的響應(yīng)

2拉队、有預(yù)期的改變

用戶應(yīng)該清楚預(yù)期效果是怎樣的，就是說程序應(yīng)該向用戶表明在他們操作就將發(fā)生什么阻逮。

在一套邏輯嚴謹（按部就班粱快，模式固定）的系統(tǒng)里，出現(xiàn)一些驚喜（意外）并不會令人愉悅夺鲜。對于一輛負責運送乘客的普通汽車皆尔，如果你關(guān)心的是其精密的機械結(jié)構(gòu)，那么爆胎和發(fā)動機歇火就是在你的關(guān)注點之外的意外驚喜币励。 跟汽車類似的是，一個應(yīng)用程序通過其精細的設(shè)計（相比于汽車通過其精密的機械結(jié)構(gòu)滿足人們的需要）來滿足用戶的某種需求珊拼，然而不同于汽車的是食呻，現(xiàn)在的數(shù)字媒體（應(yīng)用程序）允許我們預(yù)料到將要發(fā)生的變化并提前告訴用戶。

實例：（1）傳達結(jié)果

當系統(tǒng)可能出現(xiàn)較強烈的狀態(tài)變化時澎现，應(yīng)該提前向用戶預(yù)示其行為操作所將帶來的結(jié)果仅胞，這樣也就給了用戶自己來把控即將發(fā)生的事情的機會，進而避免發(fā)生出其不意的“驚喜”剑辫。

不好：沒有任何跡象或動作干旧，新的信息就出現(xiàn)在列表中

好：當新的信息準備好加載后，系統(tǒng)出現(xiàn)提示妹蔽，用戶與之交互后方插入到列表中

實例：（2）使用骨骼框架

為了緩解用戶在等待數(shù)據(jù)加載時的長耗時椎眯，并讓頁面間的轉(zhuǎn)換過渡更為流暢挠将，可以考慮在數(shù)據(jù)加載出來之前先向用戶顯示一個內(nèi)容框架，讓用戶能夠預(yù)期到新頁面將要填充的數(shù)據(jù)類型和復(fù)雜度编整。這樣做帶來的另一個好處就是會讓用戶感覺到你的程序在響應(yīng)用戶操作時還是相對及時的舔稀。

不好：在頁面內(nèi)容未加載完全之前，用戶不得不在第一個頁面一直等待

好：在頁面內(nèi)容未加載完全之前掌测，頁面便跳轉(zhuǎn)内贮，使用占位符向用戶標明即將加載的數(shù)據(jù)類型和復(fù)雜度

3. 保持上下文環(huán)境統(tǒng)一協(xié)調(diào)

用戶應(yīng)該清楚他們看到的內(nèi)容從何而來，是屬于哪里的汞斧。

在實時響應(yīng)類型的應(yīng)用程序中夜郁，通常情況下我們不可能看到系統(tǒng)的所有響應(yīng)變化（有一些中間態(tài)可能在某些條件下才能觸發(fā)），這時候粘勒，我們設(shè)定并強調(diào)一條緩沖帶就顯得非常重要竞端，它用來揭示每個頁面和按鈕跟其他元素的關(guān)系。這種做法就意味著我們創(chuàng)建了很多個標示仲义，用戶依賴它可以在這些關(guān)聯(lián)的頁面婶熬、元素間流暢切換。

實例：（1）保持布局一致

所有新的內(nèi)容應(yīng)該出現(xiàn)在一個可預(yù)期的位置埃撵，要讓用戶習慣于在程序中特定的關(guān)鍵位置點間穿梭轉(zhuǎn)換赵颅，盡量避免提供多種方式給用戶來做同一件事情的做法，這會稀釋用戶對各個行為路徑的關(guān)注度和適應(yīng)性暂刘。

不好：新的信息出現(xiàn)在不可預(yù)期的位置

好：新信息自當前列表頂部插入饺谬。用戶便漸漸意識到新信息出現(xiàn)在列表上部

實例：（2）保持良好的狀態(tài)變化姿勢

如果關(guān)聯(lián)信息間的狀態(tài)改變出現(xiàn)在一個不可預(yù)期的位置， 可以使用設(shè)計精巧的動效來向用戶傳達新內(nèi)容的出現(xiàn)及對周圍信息的影響谣拣。這種做法一定程度上延緩了用戶的體驗過程募寨，但能使得狀態(tài)的變化過程非常清晰明了。

不好：一條信息插入列表后導致相鄰的信息依次移位

好：使用一個精細的動畫效果凸顯新內(nèi)容的出現(xiàn)和相鄰內(nèi)容的動位森缠，給用戶一定的反應(yīng)時間

實例：（3）記錄保存滾動位置

當在兩屏內(nèi)容間來回切換時拔鹰，要確保用戶回到的是返回前在當前頁面的最后瀏覽位置。

不好：滾動位置并未保存贵涵，用戶要花時間重新定位上次的瀏覽位置

好：保存了瀏覽位置列肢，使用戶能在頁面間放心切換

譯自：http://blog.percolatestudio.com/design/design-for-realtime/