
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 上(一個電子商務網站),有三個圖示在頂端︰
一輛購物車、一個人的頭與肩膀、和一個放大鏡。
購物車圖示相當普遍,在小螢幕上點擊它(如圖 ...