一種新的底欄交互方式嘗試

3 評論 6340 瀏覽 31 收藏 5 分鐘

隨著手機屏幕尺寸增大、操控性降低,不少應用回歸到了 Tab Bar 設計——這是一種功能板塊清晰明了的方式,也相對便于單手操控。有人專門進行過同一應用下 Tab Bar 和 Side Bar 的使用頻率測試,雖然不能一概而論,但 Tab Bar 無疑還是在 iOS 中使用頻率、功能轉化率很高的交互方式。

Tab Bar 與 Bottom Toolbar 是 iOS 中兩種重要的交互方式,前者適用于有多個主要功能板塊的應用,后者適用于有高頻功能操作的頁面。不同產品有不同的功能框架,應用也不會完全依此去設計、而是根據場景和具體需求來調整。因此,這兩種交互方式并不能滿足所有情況,于是有的應用在 Tab Bar 和 Bottom Toolbar 的基礎上針對自身的特點有所優化。

 

1

2

Path 的 Tab Bar 是擁有 Super Tab 的例子,它像是 Tab Bar 和 Bottom Toolbar 的合體,快捷的內容發布按鈕有利于降低發布內容的難度、提高活躍度。Super Tab 多見于社交應用。

在重新設計后的第一方音樂應用中,當前播放狀態以及呼出按鈕以 Activity Sheet 的形式常駐 Tab Bar 上方,出現略為尷尬的雙底欄的情況,但人機語義并無沖突。而SoundCloud 則在 Tab Bar 中將呼出當前播放頁的按鈕設計成一致于選項卡的形式,點擊后需要退出頁面才可切換選項卡。

1

2

3

如何讓 Tab Bar 和 Bottom Toolbar 承載更多的功能操作?這是我希望探討的問題。上述的幾個案例給出了它們的解決方案,有的堅持人機語義而使界面稍顯臃腫、有的追求簡潔但放棄了人機語義、有的則直接采用可見性很高的混合解決方案。

智能手機的普及、擬物化的放棄也帶來很多交互方式上的新嘗試,手機操作系統從以往的全局點擊逐漸加入了輕掃、滑動、拖拽等專屬于觸摸屏的交互方式。并且,人們開始熟知這些方式。

新的底欄交互方式嘗試

Tab Bar 和 Bottom Toolbar 的區域不大,位于屏幕底部。這個位置可以在全局范圍內上滑呼出 Control Center,而其本身也有點擊的交互操作。因此,新增的交互操作必須不能與原有交互操作接近,并且容易被用戶理解。

當我們左右拖拽 Tab Bar 或 Bottom Toolbar 時,能觸發一些界面操作或跳轉到其它的體驗更沉浸的頁面。例如:在 Safari 中,可以利用這個交互操作快速關閉當前頁面和打開新標簽頁;在音樂播放器應用中,可以利用這個交互操作進入當前播放頁。

我制作了一張動態圖來演示這個交互操作:

1

的確,這種交互方式的可見性較差,需要一定的學習成本。然而在尊重人機語義與承載更多功能操作的權衡中,或在提供快捷操作與優化用戶體驗上,不失為一種值得嘗試的方式。

作者:劉英滕

來源:簡書

 

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問動態圖是用什么軟件做的?

    來自本機地址 回復
  2. 這種做法以前看見過,適合次主要功能,給用戶一種驚喜的感覺,但確實需要引導、

    來自上海 回復
  3. 教學成本太高啊- – 而且容易產生誤操作

    來自安徽 回復