親和力的設計花樣─建立導覽框架

從這一期開始，我們要從「設計花樣」的角度開始，來探討網頁親和力的種種實做。

「設計花樣」是我們在做各種設計時所使用的術語，不管是在電腦程式、人機介面、網頁等設計領域，設計師們在溝通要有哪些功能、設計、裝置時，都會用這些「設計花樣」的名詞用來表達那些概念。「花樣」可以是一種模式、一種功能、一項裝置等概念，可以是某種影響整個網站的定位或規範，例如「個人部落格」或「網站商標與識別」，也可以是小範圍的實做如「目前位置指示符」、「動態按鈕」或「網站地圖」等。

藉由設計花樣，設計師們可以便於釐清設計概念、情境，發掘設計障礙或困難，並找出合宜的設計方案。一般來說，當我們在描述一種設計花樣時，除了這個花樣本身的名字外，還會去描述其產生的脈絡背景、所要處理的問題、各種作用在該花樣上的外力影響、解決方案、以及其他可能會有相關的設計花樣。

運用設計花樣來溝通，可以讓設計師們不侷限於技術細節，同時又保有高度的靈活；當我們討論設計花樣時，並不是要給你甚麼成功網站非有不可的「甜蜜點」─真的做過設計的朋友就會知道沒有那種東西存在，隨著時間以及使用族群的演變，許多設計花樣也會跟著演變、消失或出現；經典的設計花樣會持續較久，但並非全然無可取代，另外某些設計花樣則可能僅適用於特定的情境或前提，或者與某些設計花樣一定要共存，但跟其他某些設計花樣互斥。不論是做程式設計或網站設計，見樹不見林或見林不見樹都是致命傷；如果用設計花樣來當作中介橋樑，就不會迷失在多變的設計之中，也將更能靈巧地面對未來的變化。

做為這個子系列的開頭，我們要先從跟「建立導覽框架」有關的親和力設計花樣開始。「導覽」是現代網站首要面對的挑戰之一，因為沒有人能夠預期讀者會從甚麼地方進入你的網站─有可能是從首頁，也有可能是部落格上的某一篇回應；如何建立一個導覽框架，讓讀者不管從哪邊開始，都能夠掌握整個網站的內容，這不但是個親和力議題，也關係著網站的可用性。

跟「建立導覽框架」有關的設計花樣並不少，囿於篇幅關係，在此我們祇先討論一個跟親和力尤其有關的，叫「多重導覽途徑」的設計花樣。基本上不論是哪一種網站，小自個人部落格，大至複雜的電子商務網站，都會需要這個花樣；因為不論是哪一種網站的訪客，都會用各自偏好的方式來瀏覽整個網站，如果有任何關鍵的導覽工具─例如導覽列或導覽側欄等─在某些頁面難以尋得甚至消失不見，那麼訪客們勢必會覺得網站本身難以使用。

更進一步來看，其實訪客們各自的「偏好」取決於他們的意圖跟衝動，也就是理智的目的以及感性的需求；如果網站缺少了意圖性的導覽工具，那麼訪客們會覺得網站的安排很詭異、很沒道理，反之若網站缺少了衝動性的導覽工具，則會變得枯燥乏味。不論是哪一種導覽工具，還要注意不同動機的訪客，也會有其所偏好的導覽風格─例如「搜尋」、「瀏覽」、「下一步」、「精靈」、「關聯」、「推薦」等，都是不同的導覽風格，也都有各自適用的導覽工具。

如果用來實現各種導覽風格的工具被任意安置，那麼訪客也許就無法從中獲得好處─他們根本不會去用！這些導覽工具需要被放在訪客們找得到而且也會去用的位置，這些也是「多重導覽途徑」這個設計花樣所要面對的問題。

解決的方法其實很明顯，也就是任何網站都應該要具備多種不同的導覽途徑，同時滿足意圖型的訪客與衝動型的訪客，而且這些導覽工具的安置應該要有其規律及一致性─運用「頁面模版」及「格線佈局」等設計花樣，將能讓多重導覽途徑兼具理性與感性。

為了讓各種訪客都能完成其來訪目的，通常我們會把搜尋工具及主要的瀏覽型導覽介面放在網頁的一開頭、最上面的位置；如果有需要用到「下一步」這類精靈風格的導覽工具，例如商務網站的結帳流程，則可以同時把他們放在頁面的上方及下方，最後別忘了盡可能加上關聯型的導覽工具，例如相關或推薦的產品／文章，滿足訪客的衝動需求；這些關聯型的導覽工具可以放在網頁文件較後端的位置，才不會搶走主要內容的風采。

讓我們最後再來整理一下「多重導覽途徑」這個設計花樣：

◎ 脈絡背景：任何類型的網站。

◎ 所要處理的問題：訪客會用各種方式瀏覽整個網站，如果有任何關鍵的導覽工具難以尋得甚至消失不見，那麼訪客們勢必會覺得網站本身難以使用。

◎ 相關外力影響：瀏覽網站的方式取決於訪客的意圖跟衝動。不同動機的訪客，會需要不同的導覽風格。

◎ 解決方案：導覽工具需被放置在訪客們找得到而且也會去用的位置。

◎ 其他可能會有相關的設計花樣：頁面模版、具鑑別力的 HTML 標題、網站商標與識別、格線佈局、一致的相關資訊側邊欄、單一瀏覽繼承性、導覽列、頁籤列、目前位置指示符、有意義的錯誤訊息、找不到的網頁、靜態鏈結、跳過選單、網站地圖……。

上述的這個設計花樣，除了適用於任何網站外，同樣地也適用於各種圖形介面的應用程式設計。至於最後所提到的這一堆相關設計花樣，未來我們也會逐一加以說明。

You may be interested in the following articles:

• 親和力的設計花樣─打造有力的首頁 - 2008-01-11