Responsive Web Design 響應式網頁設計學習手冊

340

|

響應式網頁設計學習手冊

有些網站使用其他符號，例如，圖 10-51 的齒輪符號。使用者可能

瞭解這是導覽，因為它是頁面頂端唯一可以點擊的東西；但是因為

齒輪符號與設定有關，特別是在行動裝置上，將它應用在不同的目

的，很可能把使用者給弄糊塗。

圖 10-51 Nathan Sawaya 網站使用齒輪圖示，那可能會讓使用者感到困惑，

因為齒輪圖示經常用在應用程式的設定，而不是選單

雖然有許多方式可以展示導覽圖示，就像其他圖像一樣 — 圖示字

型、SVG 圖像、簡單 CSS 或甚至 Unicode 字元 — 事實上，這對網

站來說是非常小的資產（asset），因為這種圖像可以被載入一次，而

在網站的每個頁面上被展示，可能不像網站上的其他資產對效能有

那麼大的影響。

如果你想要更仔細地瞭解展示導覽圖示的不同方式，請參考

Smashing Magazine 網站上 Jordan Moore 的〈The Semantic, Responsive

Navicon〉（

http://mobile.smashingmagazine.com/2012/10/08/the-

semantic-responsive-design-navicon/

）。

其他圖示

因為小螢幕設計的空間有限，圖示經常被用來代替選單選項的文字，

或者展示隱藏的元件。

例如，在 Skinny Ties 上（一個電子商務網站），有三個圖示在頂端︰

一輛購物車、一個人的頭與肩膀、和一個放大鏡。

購物車圖示相當普遍，在小螢幕上點擊它（如圖 ...