search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

數據交互的常見方式及案例

交互設計師作為整個項目貫穿始終的一根線,除了有自身對需求的理解把控以及對頁面布局的拿捏以外,充分吸取各種不同的思維方式,才能讓我們在打怪升級的路上越走越遠。

特別是新人設計師,有沒有這樣的感覺,在有技術同學加入的交互評審中,常會被問及一些原來沒有思考全面的細枝末節以及極端情況處理方案,比如「這個列表一次載入多少條?」「如果同時有2個用戶在爭奪最後一個名額該怎樣處理?」等等。

技術大大們的思維普遍縝密,因為他們是最終實現一切數據交互的執行者。而作為交互設計師,我們很容易只注重產品需求和界面布局這些展現在用戶眼前的有形的內容,而由於數據交互而引發的一些問題就容易被忽略。

什麼是數據交互

目前,除了一些特別簡單非聯網類應用(比如計算器、鬧鐘等),幾乎所有的應用都是聯網應用,而其app客戶端基本都只是負責用戶的交互與數據收集與展示,真正的數據和服務均存儲在雲端。

客戶端數據交互原理示意

如圖所示,在設計具體方案時,我們會更多的注重用戶和客戶端本身的交互,至於客戶端和後端的交互則容易被認為是只需要技術去解決的問題。

確實數據交互是技術問題,但如果作為交互設計師能有意識的在方案中思考這些問題,能夠幫助我們使方案更符合技術實現的需求,體驗更流暢。

數據交互在app頁面中的直接體現既是頁面內容的載入方式,下面我們來了解一下主要的幾種數據載入方式:

1. 整頁載入

整頁載入 數據交互示意

整頁載入很好理解,就是在載入一個頁面時,客戶端發送一個請求,伺服器返回一次數據,其特點就是一次性載入完全部數據再顯示。常運用於一些H5活動頁面、遊戲、簡單網頁

整頁載入案例

整頁載入失敗時,常見的處理方式有以下幾種:

案例1 彈窗

以彈窗方式來提示用戶數據交互的錯誤,因為需要用戶點擊操作才能關閉,所以重點在於讓用戶明確的知道頁面載入失敗的原因,比如因為用戶操作不妥而導致的取不到數據等。

案例2 toast

雖然用toast形式做整頁載入失敗的回應方式是可行的,但是筆者認為最好應用在頁面還有其他內容可操作的情況下的輕量提醒更合適,因為比如右圖所示,toast提示停留時間短暫,消失後面對空蕩蕩的頁面,用戶會不知所措。

案例3 頁面提示

在頁面上直接顯示無數據展示的原因以及解決辦法是很提倡的處理方案,優點無需贅述。

2. 分區域載入

分區域載入 數據交互示意

分區域載入即把需要載入的內容分成不同線程同時向後端發送請求,後端也分不同線程同時/依次返回數據。

其特點是能逐步展示內容,在這個漸進的過程中降低用戶的焦慮心理

同時模塊間可以有關聯性,先載入父內容,再載入子內容。我們來看看以下案例的處理:

案例1

方案1的兩個案例都是優先載入格式和文本等信息,消耗大且不影響頁面基本功能的圖片信息次要載入。

案例2

通過方案2我們能看到對於頁面內容載入更細緻的處理過程:格式——文本和占點陣圖——圖片,每一個階段的處理都賞心悅目,絲毫沒有反感。

案例3

方案3同樣也是逐步載入,但是首先載入出的格式可以讓用戶對頁面即將呈現的內容有初步了解,也是增加美感,降低焦慮的一種方式。

案例4

前文提到過模塊間的關聯性,我們可以通過案例4清晰的看到數據展示上被設計過的載入順序:首先是格式,然後是用戶發布的內容,其次是用戶信息。

藉助以上案例對分區域載入方式的理解和啟發,在頁面內容的呈現上有很多細節值得我們去更多的推敲。我們也可以主動和技術商討載入方案,以得到更好的體驗。

3. 自動載入

自動載入 數據交互示意

自動載入並不是後台自動的傳輸數據,實質上也是用戶的一些行為觸發客戶端給後端發送請求。通常運用於2種場景:

  • 頻繁更新的內容、有時效性的內容
  • 相對穩定,數據不會經常變化的頁面

案例1

最簡單的案例就是例如推特這樣,上滑頁面看到一定位置的時候,自動提前載入後續內容。

案例2

案例3

另外,例如開眼精選、Hyper等內容穩定的頁面,在進入時,或者有數據更新時,也會採用自動載入。

4. 智能載入

智能載入 數據交互示意

智能載入的特點在於預載入,通過用戶的某個行為,或者已有的通用數據分析來預測用戶行為,並提前載入。這一點顯然是產品和數據挖掘的大大們需要研究的事情。作為交互能利用智能載入的另一個特點,就是根據不同網路條件下載展示不同素材。

案例1

例如Pinterest從列表頁點擊進入正文頁的過渡動畫,是將列表的小圖直接拉大成大圖,如果網路環境優,則會進一步載入大圖並展示,如果網路環境欠佳,則保持用小圖拉大的低質量圖,以此節省資源。

案例2

如案例2所示,在Pinterest查看圖片詳情時,也會根據載入狀況先顯示低質圖,等載入完畢後用高質量圖替代,如此既保證了頁面功能的完整性,體驗上也不會有明顯的跳動。

案例3

同樣處理的如此細緻的還有Mars,頁面跳轉很流暢,但是仔細觀察會發現處於不同階段的3張圖,圖片的質量是遞進的。

以上,為大家淺略的解讀了一下數據交互的常見方式及案例。作為交互設計師,在實際工作中並不需要對技術知識了解的多麼深入,但是如果我們能夠知道技術在實現時的基礎原理,那麼在實際方案中就能考慮的更加細緻和全面,並且更加符合技術實現時的實際情況,能盡量避免交互方案與技術方案的衝突。

其實,不僅是對於技術環節,包括在與產品和視覺,每一個角色都有著自己不同的思維方式,正因為這些不同才能一步步將一個個縹緲的概念落為現實,到達用戶手中。交互設計師作為整個項目貫穿始終的一根線,除了有自身對需求的理解把控以及對頁面布局的拿捏以外,充分吸取各種不同的思維方式,才能讓我們在打怪升級的路上越走越遠。

作者:傑克蝶



熱門推薦

本文由 yidianzixun 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦