浮動動作按鈕

  在材質化設計中,浮動操作按鈕 (FAB) 是在 App 螢幕上顯示主要操作的按鈕。通常,它是一個視覺位置高於其他頁面內容的圓形圖示按鈕。這個按鈕通常可以讓多使用者立即訪問多使用者對 App 所做的重要或高頻的操作。根據移動 App 的設計和資訊架構,FAB 可以:
 
  ●執行一個典型的核心操作 (開啟新郵件螢幕,開啟新增照片或影片內容的螢幕,在相簿中搜尋需要的內容,等等) 。
 
  ●展示額外的動作選項
 
  ●彈出其他介面 UI 元件
 
  FAB 在螢幕上的位置通常是由高可視性因素決定的,可能會根據 WordPress 網站製作及 App 螢幕的總體設計理念而有所不同。最重要的經驗法則是:每個螢幕只使用一個 FAB,而不是更多,以避免多使用者注意力的分散。
 
  設計高效按鈕的要素:

  1. 尺寸

  尺寸是告知多使用者佈局元素的重要性和 UI 元件層次結構的核心方法之一。一個吸引人且高效的行動按鈕需要足夠大,以便快速找到,但又不能太大,以免破壞佈局結構。營銷或市場管理者者通常會在他們的指導方針中提供關於按鈕大小的建議。例如, 蘋果在移動裝置 UI 中行動按鈕應該至少 44Х44 畫素, 而微軟建議 34Х26 畫素。如果您是為手機設計 UI 介面,對不同型別的按鈕的要求可能會非常嚴格,所以要仔細研究這些設計規範,將因糟糕的 UI 按鈕設計而導致的 App 不良的多使用者體驗的風險降到最低。
 
  2. 顏色

  為了讓一些按鈕容易被注意到,而另一些按鈕是次要的,選擇合適的顏色是至關重要的。問題是人類的情緒和行為與視覺環境顏色高度相關,而色彩是這方面最有力的工具之一。在為行動按鈕選擇顏色時,一定要記住: 按鈕顏色和背景顏色必須產生明顯對比度,才能使按鈕快速地從其他 UI 元件中脫穎而出。
 
  3. 形狀

  至於行動按鈕的形狀,它們通常看起來像水平矩形。原因是這種形狀的按鈕看起來是可點選和可互動的,人們習慣於把這個形狀看作一個按鈕。此外,建議設計圓角矩形的形狀按鈕,因為當視線指向按鈕內部時,多使用者更容易將注意力轉移到按鈕文字上。當然,這麼做有時也是為了使按鈕形狀與 Web 製作或移動 App 面選擇的風格等概念和諧結合。那更多相關內容,可以結合《UI 設計中,多使用者介面按鈕的幾種基本型別(二)》詳細瞭解。
 
  4. 位置

  按鈕的位置對於構建堅實的可視層次結構和清晰的導航非常重要。如果它們位於多使用者眼睛無法捕捉到的區域,其他視覺要素,如顏色和大小,可能無法有效運作。設計師必須明確哪裡是最佳視覺中心,並將核心功能的按鈕放置在那裡。
 
  5. 文字

  功能強大的按鈕文字通常很簡練,且語調規範統一,因此可以迅速吸引多使用者的注意。它通常使用白色等與按鈕對比強烈但和諧的顏色。儘管如此,這並不是必須的,決策是根據具體的設計概念、排版和文字內容等綜合因素決定的。