Responsive Web Design – Note10. 導覽與動作模式 - Benjamin Says So ......

字體：小中大

Responsive Web Design – Note10. 導覽與動作模式

2014/06/19 12:21:59瀏覽417｜回應0｜推薦1

Navigation(導覽) 與 Action (動作) 的設計模式，不只是在Responsive Web Design中會使用到，其實行動化的設計，也大致脫離不了這個細節，只是寫到一系列Responsive Web Design相關的內容，在快收尾時，也大略提一下這個主題，希望大家在設計頁面的時候，也別忘了方面的考量。這一篇會四種關於Navigation(導覽) 與 Action (動作)上的模式 1. App Bar 2. Tab Bar 3. Navigation Drawer 4. Bottom Bar 【1. App Bar】 大部份的使用者會很習慣在桌機的瀏覽器介面中找尋上方的Header導覽，但在行動裝置介面上，或許該稍微改一下習慣，讓自己習慣一下針對行動裝置而設計出來的使用模式。

在App Bar這種導覽與動作的模式，如上圖的顯示效果，基本的設計原則如下：

必須包含Logo及主要動作設計，而Menu的設計與否不一定必要。

Logo置放於最上方，以利使用者點擊後可回到首頁。

要注意的是，要觸發行為的動作點，應該都要設計在這個App Bar裡。

如果你要導入選單的功能，請將其放置於該條列的最左或最右，而且請將其設計為hamburger icon的樣式(三條水平線)，並請確保它在所有頁下都會乖乖的在同一個地方。

以上是針對App Bar這個導覽與動作的模式的說明；這樣的設計只是一個原則，當然，你可以讓你的ICON更活潑或有設計感一些，以達到更佳的視覺效果。 【2. Tab Bar】 會使用Tab Bar來當行動化裝置導覽與動作的模式時，通常面對的是相對小的裝置，目的在於讓使用者在您的網站裡一目瞭然那裡有什麼或可以去哪裡？不過利用這個方法的基本原則是，您要提供的行為區塊大概在5個以下，過多的Tab可能造成過小的點擊區，反而會造成使用者經驗的扣分。

在Tab Bar這種導覽與動作的模式，如上圖的顯示效果，基本的設計原則如下：

主要行為區塊最好在5個以內。

Tab可置放於上方或下方。

每一個Tab的設計原則要清楚明白的傳達該功能給使用者。

以上是針對App Bar這個導覽與動作的模式的說明；這樣的設計的一個優點在於使用者會可以塑造出一個固定的使用模式，可以讓使用者更快而直覺的在這個網站中來往。 【3. Navigation Drawer】 關於Navigation Drawer的設計，大概是廷伸第一個App Bar中導入選單的功能要去思考的面向。Navigation Drawer通常在是兩側以滑出的模式來展示網站想要提供的內容導覽列，觸發的時機在於使用者點擊hamburger icon(三條水平線)時。使用這種模式的優點在於可以將原來放不下的一些結構先藏在這裡，待使用者去點擊才出現相關的內容給使用者。當然，運用這種模式就會需要使用者花一點時間來適應，所以滑出來的內容，一定要十分的清晰易懂，而且那個hamburger icon(三條水平線)的置放點選擇，最好是依循大多數人的習慣。而另一個使用這個模式的優點在於，不少使用者會對可以互動的設計存在新鮮感，所以可以吸引使用者目光久一點。

在Navigation Drawer這種導覽與動作的模式，如上兩圖的顯示效果，基本的設計原則如下：

要讓使用者簡單的找到hamburger icon(三條水平線)

每個區塊儘量別設計得過大，以免造成使用者的反感。

如果是主要的功能區塊，儘量別藏在Navigation Drawer裡，以免使用者找不到。

【4. Bottom Bar】 最後一種的Bottom Bar其實與Tab Bar有點異曲同工的效果，不過它的顯示效果不是依一般習慣的Tab來做顯示，而是透過功能符號來取代。而使用這種設計模式的介面，通常的使用者多是已經熟稔該站的符號代表什麼意思了，所以無所多做解釋就可以直接進行操作。

在Bottom Bar這種導覽與動作的模式，如上圖的顯示效果，基本的設計原則其實與Tab Bar也很雷同如下：

當您不使用Tab Bar時，您才考慮這種樣式

主要行為區塊最好在5個以內。

可以將在App Bar納不進去的功能點放在這個設計模式裡，有一點hybrid的味道。

以上四種Navigation(導覽) 與 Action (動作) 的設計模式，大家都學會了吧！？

( 知識學習｜隨堂筆記 )