幫助

[交互基礎]系列之移動端頁面加載詳解

2018-04-26 18:32 優(yōu)化推廣

注:鑒于目前交互設計的知識體系較為混亂,我寫了這個[交互基礎]系列專題,旨在整理移動端交互設計基礎知識。鞏固自己的知識體系,也與大家共勉,打好基礎,才能飛得更高!

一、人機交互

交互設計是定義、設計人造系統(tǒng)行為的設計領域。這是一個非常廣的領域,我們在這里,只探討IT產(chǎn)品的人機界面交互。舉一個例子,用戶點擊一個確定按鈕,完成了表單的提交,此時APP提示用戶“提交成功”,這是用戶與APP之間的一個交互過程。從點擊按鈕到彈出提示,這個過程發(fā)生了?在交互層面又需要考慮哪些問題呢?

二、用戶——客戶端——服務器

用戶與客戶端進行人機交互,如上述的例子,點擊確定按鈕,客戶端將用戶的操作轉化為相應的指令,向服務器請求數(shù)據(jù),若網(wǎng)絡和服務器正常,服務器返還數(shù)據(jù)到客戶端,用戶看到自己操作所引發(fā)的結果。在這個過程中,涉及到用戶與客戶端之間的交互客戶端與服務端之間的數(shù)據(jù)傳輸這兩個部分。

從用戶點擊確定按鈕后到服務器返回數(shù)據(jù)到客戶端,這個過程中需要耗費一定的時間,我們需要呈現(xiàn)一個加載的過程來告訴用戶APP正在做什么,以緩解用戶的焦慮情緒。當服務器返回數(shù)據(jù)以后,客戶端需要提示用戶”提交成功”,以告知用戶操作的結果。當然,還會有異常的情況,客戶端與服務器之間傳輸數(shù)據(jù)的過程中,可能遭遇網(wǎng)絡不穩(wěn)定、服務器異常等情況,這也需要及時告知用戶,以避免用戶不知所措、產(chǎn)生焦慮,影響體驗。

加載發(fā)生的原理都是一致的,即用戶與客戶端發(fā)生人機交互以后,請求數(shù)據(jù)與返回數(shù)據(jù)的過程。但是在不同的場景下,需要考慮不同的加載處理方式。

三、加載模式

頁面加載的兩種模式:同步加載異步加載。

1.同步加載

  • 定義:同步加載請求執(zhí)行某一任務,在該請求返回數(shù)據(jù)之前,請求端什么也不干就在等待,直至該請求返回數(shù)據(jù),再執(zhí)行下一步操作。(例如產(chǎn)品設計完成之后才能交付給開發(fā)。)

  • 場景:登錄注冊、掃碼支付、提交訂單、上傳資料、修改資料等需要驗證、提交信息的情況或下一步的結果走向與當前操作相關的情況,也稱順序操作。(例如登錄需驗證賬號信息,成功了就進入應用主頁,失敗則仍停留在登錄界面)

  • 特點:及時性,加載完成/失敗會立即得到反饋結果,上下步操作的關聯(lián)性強,更易于實現(xiàn)。但是如果加載速度太慢,很可能長時間停留在加載頁面,使用戶產(chǎn)生煩躁的負面等待情緒。

2.異步加載

  • 定義:異步加載請求執(zhí)行某一任務的同時,可以繼續(xù)執(zhí)行下一操作,等到收到返回數(shù)據(jù),再處理該任務。(例如你要燒水和掃地,為了提高效率,先燒水,再在燒水的過程中掃地,等水燒開了,再去處理開水。)

  • 場景:不涉及重要資料和順序操作的數(shù)據(jù)加載都適合異步加載。如大量圖片、視頻的頁面,長列表數(shù)據(jù)的列表頁,內容的詳情頁面等。

  • 特點:有效得提升了用戶體驗,頁面的跳轉和加載動畫讓用戶覺得反饋很及時,增強了操作的流暢度。但是需要處理好操作之間的關聯(lián)性,否則用戶容易產(chǎn)生疑惑。

四、加載策略及表現(xiàn)形式

運用加載模式的兩種原理,可以延伸出多種加載策略以對應不同的場景需要。加載策略是方法,加載模式是原理。需要注意的是,不同的加載策略運用了不同的加載模式,并不是簡單的一對一的關系,要學會配合使用。

1.啟動頁加載

打開APP有一個加載的過程,在這個過程中,可能對同步加載和異步加載均有涉及。

  • 同步加載時的常用策略:加載完某些數(shù)據(jù)才能進入應用,適合對某些關鍵數(shù)據(jù)進行檢查,例如檢查用戶的身份信息,此種策略是為了保證一些關鍵數(shù)據(jù)的可控性。

  • 異步加載的常用策略:進入應用內再加載使用的數(shù)據(jù),例如進入應用再加載首頁,可以提高進入應用的速度。

APP啟動頁顯示的長短取決于需要加載的內容的多少。一些APP在啟動頁之后還設置了廣告頁面(一般可跳過),則考慮更多的是廣告營銷等商業(yè)目的。


相關推薦

QQ在線咨詢