SPARKFUL
真抱歉,这个页面尚未被翻译成你的语言,但是我们正在努力中了!

Blog

SPARKFUL 团队心得与生活点滴

導覽原則:任務導向與階層導向

Wei-Fan Chenuser-interface-design
name

本文有圖檔遺失,我們正在努力恢復中了!

把能夠讓使用者快速完成任務的任務導覽放在頁首,瞭解網站架構的分類放在頁尾,完美的利用螢幕上的所有像素。使用者能使用的螢幕就這麼大,螢幕上的每一個像素對網站設計師來說都必須斤斤計較。一般網站設計可以將主要的介面由上而下區分成三個部分:頁首(Header)、主要內容(Content or Stage)和頁尾(Footer)。

位於最上面的頁首是一個網站最重要的部份,也是整個最吸引使用者的目光的地方,因此,頁首上的每個連結都必須要仔細設計放置。放置在頁首的導覽項目必須要是「任務導向」的。如此一來,第一次來到網站的使用者、或是常用客戶,都可以輕鬆的完成他們到達這個網站的目的。例如,提供購買車票服務的網站,就應該讓「購買車票」這個選項清楚的出現在頁首上。

相對而言,頁尾的重要性就沒有頁首那麼高了。我們可以盡情的利用頁尾來提供使用者更多的網站功能,或是讓使用者擁有這個網站的整體架構感與方向感。設計頁尾的導覽項目應該要是「階層導向」的。但設計頁尾導覽的時候也必須注意,不是一古腦的將整個網站的網站地圖直接放置在頁尾就完成了,必須依照不同的分類項目仔細區分,並仔細的命名不同分類的項目名稱。如果你在替項目名稱命名的時候,不能輕易的想出標題,那可能就是分類的方式不夠清楚,還可以在做調整。

最近許多的網站都開始流行採用一種稱為「胖尾巴(Fat Tail)」或「網站地圖頁尾(Sitemap Footer)」的設計模式,這種設計模式就是將一個網站的主要架構放置在頁尾的部份,取代一些關於我們、條款、版權等等的連結。讓使用者瀏覽到頁尾的時候,可以一口氣瀏覽到整個網站的結構,快速的選取想要去的地方,以免在網站上迷路而離開。

頁首導覽和頁尾導覽因為出現在畫面上的位置不同、出現的順序不同,因此也有非常不同的設計導向。頁首的「任務導向」和頁尾的「階層導向」是設計導覽的大原則,讓我們的使用者再也不會在網站上迷失方向了!


Reference

  1. Photo by David Chuan-En Lin on Unsplash
Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
喜歡開發與創作各種有意義且有目的的遊戲以改變社會。 《玩心設計》作者、偶爾寫部落客與擔任講師。樂於參與大學和行業活動,興趣涵蓋遊戲設計、遊戲理論、行為設計、人機介面和交互設計。熱衷於雲端運算,同時也是一個活躍的獨立遊戲開發者 🎉
divider
相关文章
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...阅读更多
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...阅读更多
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...阅读更多