UI即時動態設計技巧

 

　　起源於1993年的網路瀏覽器，時至今日依然保持著要求-回應的互動機制。當使用者打算瀏覽網頁的時候，使用者輸入連結，瀏覽器便會將使用者請求的內容發送到伺服器，伺服器收到請求，處理它，並響應反饋給瀏覽器。考慮到互連網的初衷就是用來查看文檔，所以要求-回應機制還是令人滿意的。可是隨著時代的發展，使用者對於互連網的需求和期望都已經有所改變。

　　Ajax技術是這種演化的第一步。它完善了網路體驗，允許使用者在無需重新整理頁面的情況下載入新的內容，不過它的限制在於載入新內容依然需要使用者發出請求才能得到響應。單使用者藉助這種技術來瀏覽靜態文檔體驗是很不錯的，但是在多使用者環境下就站不住腳了。並非只有網路瀏覽面臨著這樣的問題。現如今，我們在開發APP的時候，也需要考慮多使用者瀏覽的問題。 我們希望資料連線和載入能夠如同實體一樣被使用者感受到，這是即時動態載入技術令人眼前一亮的地方。

　　挑戰

　　諸如Node.js和Meteor這樣方便使用的非同步架構，已經開始廣泛地運用起這種即時網路技術。在這項技術大規模推行之前，使用者的操作是非常清晰的。這些操作可以清晰地劃歸到使用者頭上，連結、重新整理和頁面載入是清晰而明確的。單擊連結，頁面跳轉，內容就biu的一聲在你眼前展現出來了。

　　當新的使用者被加入到整個系統中來的時候，在頁面重新整理前，他們面對的系統中的資料內容是完全一樣的，介面是被動的，它會隨著操作而出現反饋的。想象一下整個系統合理有效地連通不同的使用者的壓力和難度。在即時動態系統中，我們所面臨的不僅僅是創造令人慾罷不能的特性，還得處理大量資料和它們之間複雜的因果關係。

　　我們需要將APP以自然而易於理解的方式呈現在使用者面前。在實際操作中，APP只有能讓使用者易於操作理解，才能與之共鳴，讓他們註冊，並且與之互動。掌控好資料與介面之間的因果關係，不同層級資料與介面之間的互動規律，才能讓APP更優秀。

　　規則

　　開發人員能夠利用即時動態設計來打造下一代的web使用者體驗。而我們也總結出了一系列即時設計使用者體驗的設計規則。

　　1、聲明狀態

　　使用者理當知道系統的狀態，而系統也應該對使用者操作進行確認和反饋。

　　應用應當適當地強化介面結構，否則系統的整體架構將不夠明晰。當即時介面出現變化的時候，比如頁面重新整理，下拉之後頂部的重新整理控制項能夠適時地向使用者傳達列表的串連重新整理狀態。

　　執行個體：串連狀態

　　你的串連是否處於串連狀態?串連失效自然是不可避免的。很多外部因素可能會導致資料交換達到不符合預期的結果，導致串連失效。

　　style=”float:left”

 

　　圖1 修改前：使用者沒有被告知串連丟失，這可能會影響他們對APP的預期。

　　圖2 修改後：資料交換中出現提示，連通斷開，並且系統嘗試去修複。

　　執行個體：載入

　　在網速有限的情況下載入大量內容時，就會很容易讓使用者陷入長時間的等待。作為一個優秀的設計師，告訴使用者載入時間是很有必要的。

 

　　圖3：修改前：在被打斷之後，在應用載入使用者內容時，使用者不會知道要載入的時間。

　　圖4：修改後：進程指標顯示載入的內容還有多長的等待時間。

　　執行個體：確認

　　對於使用者行為做出的響應，能夠顯示出系統正在聆聽並且關心使用者。

 

　　圖5：修改前：在刪除完成後，使用者並沒有得到反饋

　　圖6：修改後：在使用者完成刪除達到新介面時，會得到刪除確認。

　　2、預測變化

　　使用者需要知道操作之後接下來的會是什麼。當使用者行為發生時，產品應告知使用者接下來會出現什麼。

　　在嚴密的邏輯體系中，意外往往不易讓人接受。比如，汽車要運送乘客到目的地，汽車需要保持機械精度，確保正常運行，而在這個系統中，意外就是爆胎和發動機故障。與汽車類似的是，一個應用程式要以方便使用的方式，竭盡全力幫使用者達成目的。不同於汽車的是，移動端應用使我們能夠預見並告知使用者即將到來的變化。

　　執行個體：呈現結果

　　當可能發生明顯的介面狀態變化時，需要向使用者預告變化的結果，給使用者機會來處理，並防止將要發生的意外。

 

　　圖7：修改前：當新介面出現的時候，視野中並沒有提示或者反饋。

　　圖8：修改後：當新的介面準備好載入時，系統會做出響應，但是不會通過自動響應來幹擾進程。

　　執行個體：架構模板

　　顯示布局架構預示著將要跳轉到新的介面，提前切換布局填補空白。另外還有個好處，這可以使得程式看起來更有“響應式”的特徵。

 

　　圖9：修改前：在螢幕載入新介面之前，使用者需要等待所有內容載入完，之後介面突然切換過來。

　　圖10：修改後：頁面載入用預留位置指示哪些內容是即將出現的。

　　3、保持上下文

　　使用者應該知道內容來自哪裡，屬於哪裡。

　　由於使用者無法即時監測應用內具體發生了什麼變化，因此建立並加強應用空間感很重要。這裡，空間感指的是每個介面和每個按鈕與其它組件的相對空間位置。為此，我們需要建立一些可信賴的標誌來強化它們的存在。

　　執行個體：一致的位置

　　新的內容應該出現在一個可預測的位置。讓使用者習慣應用內功能導航的路徑，不要通過提供多種路徑來完成同樣的事情。

 

　　圖11：修改前：新的控制項和元素出現在不可預料的位置。

　　圖12：修改後：內容總是出現在一致的位置上。這時，使用者在視覺上不會感到新內容突兀。

　　案例：變化過程

　　讓狀態的變化更加清晰明了，不要讓條目突兀地出現在不可預見的位置。動畫可能很大的程度上確保這一點，讓新載入的內容正與周圍的環境融為一體。

 

　　圖13：修改前：新條目的一閃而入，會造成相鄰內容無過渡地向下移動。

　　圖14：修改後：新的項目和相鄰項目之間有動畫過渡，它們的位置隨著時間的推移而變化，從而給予使用者一段時間去接受它們的變化。

　　執行個體：保持位置

　　當項目在不同螢幕之間來回移動時，需確保使用者返回時能回到他們進入前的相同位置。

 

　　圖15：修改前：滾動位會置重設。使用者要花費較多精力去尋找之前的位置，這樣的使用者體驗很糟糕。

　　圖16：修改後：之前的位置被系統儲存，當使用者返回時，能回到最初進入的位置。

　　結語

　　以上這些理論可以作為我們起草即時體驗時的出發點。我鼓勵所有的創作者去發現這些原理的應用範圍，但是，最重要的是要瞭解狀態，預知改變，並且呈現內容。