Book — 網頁介面設計模式 part3

原則五:善用轉換效果

轉換模式

  • 打亮與轉暗(Brighten and Dim):用於控制user的焦點
    透過「燈箱效果」,讓覆蓋視窗顯示為正常亮度,其餘則較暗,可用於集中user的注意力,確認正在與某項物件互動,且可減少視覺上干擾。
    假如網頁希望可以讓user填完資訊、迅速離開頁面,就別採用燈箱效果!
    - 轉暗模式也應用於「正在載入/尚未備妥」的情況下
  • 展開與折疊(Expend and Collapse):展開或摺疊的面板設計
  • 動畫(Animation):藉由動畫顯示物件的何去何從,可以讓user更加容易找回物件,屬於互動後的回饋。
  • 聚光燈效果(Spotlight):藉由物件短暫的醒目效果讓user知道介面中的變化,當事件完成後,聚光燈效果將會淡出。

轉換的目的

提供據參與感的介面之外,強化與使用者之間的溝通。

  1. 於改變畫面時維持情境
  2. 解釋剛才發生的事
  3. 說明物件間的關係
  4. 集中注意力
  5. 提升知覺效能:如載入時顯示動畫
  6. 打造虛擬空間的假象

原則六:即時反應

查詢模式

  • 自動完成:如輸入mail時,只要打一開始的帳號,後面就會自動顯示對應資訊。
  • 即時建議:如在google搜尋輸入文字後,會提供相關建議。
  • 即時搜尋:再輸入文字後,就立即呈現搜尋結果。
  • 精煉搜尋(Refining Search):限定範圍的搜尋。

回饋模式

  • 即時預覽:
    1. 設定密碼時,user輸入時顯示密碼強度是否足夠。
    2. 也可適用於展示型產品。
    3. 避免頁面轉換。
    優點是不影響頁面流程、使頁面較輕質、提供明確的進度顯示器。
  • 漸進式揭示:
    在使用者需要時再提供說明,讓繁重的程序變較輕質。
  • 進度指示器:隨時告知使用者目前狀況,以增進整體使用經驗。
  • 定期重新整理:新聞網頁、社群網站會使用的方式,時時保持更新狀態。
Like what you read? Give Y.J.L a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.