章節定位#

設計元素（design elements）形態各異，有些反映潮流（例如徽章），有些則出於實用需求。每個元素都有其用途——關鍵在於設計師是否帶著意圖使用它。

即便是看似微不足道的元素（如預設的日曆控制項），若被忽視，會反過來拖垮整體設計。設計師必須統一所有元素的美學基調。

各元素的核心觀察#

圖示（Icons）#

圖示存在的唯一目的，就是用最簡單的方式傳達大量資訊。在注意力短暫、選擇繁多的網路環境中，它們扮演視覺指引的角色。

兩種主要用途：

• 建立焦點：作為首頁主視覺（如 Elixir Graphics 的三大圖示）
• 切割雜訊：在內容繁多的頁面中協助掃描（如 E-junkie）

整合要點：

• 配合配色：必要時自製或重新著色既有圖組
• 配合風格：圓潤閃亮的網站需搭配同調圖示

日期與行事曆（Dates & Calendars）#

對細節的執著，是區分平庸與優秀設計師的關鍵。

• 日期可以是無聊的文字串，也可以變成設計亮點（如 Kev Adamson 的螺旋裝訂日曆樣式）
• 視日期在層級中的重要性決定樣式強弱
• 反向案例：Nclud 把行事曆設計到完全融入背景——重點是功能不打擾

圓角（Rounded Corners）#

圓角從網路出現之初就是常見元素。設計師常為了「隨便」的理由使用圓角，但每個元素都該有歸位之處。

• 配合風格：當網站本身有有機曲線時最合理（如 Scott Saw）
• 打破網格感：圓角讓版面跳脫表格化的方塊感
• 整體統一：透過重複圓角讓整個版面成為單一視覺實體（如 Mobaito）

折角（Folded Corners）#

折角讓頁面（或元素）看起來像被掀起或折起，最基本的作用是與「印刷物」產生連結。

• 直譯主題：Ungarbage 用折頁角呼應網路頁面的「回收」概念
• 戲劇性焦點：Miingle 用巨大捲頁吸引注意，引導訪客採取行動
• 純粹美感：Webstruments 把折角當裝飾——只要與整體融洽就成立

光芒（Rays）#

放射狀光芒可以低調點綴 logo，也可以建立整個網站的氛圍。

• 為靜態頁面注入動感（如 Royale Vibes 為標題加深度）
• 強化既有的動勢（如 Guilago 與大型插畫人物）
• 營造誇張、戲劇化的玩味感（如 DJ Timbo）

標籤吊牌（Tags）#

吊牌（hanging price tags）是低調吸引注意的方式。

• 角度傾斜：本身就會吸引目光（如 SimoneStudio）
• 化為主題：當吊牌成為設計核心時，整個網站變成一場體驗（如 Big Sweater Design）

徽章（Crests）#

徽章原本是王室的歸屬象徵，現代用法千變萬化：

• 嚴肅專業：為專業服務增加權威感（如 Golf Medic 結合醫療與高爾夫）
• 趣味親民：用童趣徽章傳達團隊個性（如 Small Farm Design 的雞蛋公雞）
• 時尚潮流：作為設計師美感的點綴（如 Waetzig Design）

圓形徽章（Badges）#

徽章常被視為瑣碎裝飾，其實它是純粹的「注意力工具」：

• 設計來搶眼，承載最關鍵的訊息
• 通常用於「行動呼籲」（call-to-action）（如 Simon Wiffen 的「下載音樂」）
• 不一定要高對比配色，柔和色也能融入設計（如 Plushie Corner 的導覽）

徽章必然吸引大量注意力。把無意義的內容放進徽章，等於浪費版面上最強的視覺位置。

條紋（Stripes）#

條紋雖小卻不可忽視，最常作為背景元素：

• 大膽且粗的條紋能為頁面增添視覺深度（如 Firstflash）
• 透過顏色與其他元素呼應，達成統一感
• 統一性是條紋元素的核心原則——條紋必須屬於整體設計

華麗元素（Ornate Elements）#

華麗裝飾不會過時，只會以新形式重生：

• 結合像素質感與古典華麗（如 DigitalKick）能避開老派感
• 配合非典型色彩與現代光澤可帶來新鮮感（如 Brainfood）
• 重點是讓華麗元素「服務」當代設計，而非主導懷舊氛圍

華麗背景（Ornate Backgrounds）#

重複的華麗圖案（pattern）已成趨勢，但極易誤用。要點：

• 配色必須協調：不要害怕修改原始圖案的色彩
• 意涵要對主題：手作、優雅、女性、粗獷——華麗圖案橫跨多種調性
• 不該是設計起點：應在主視覺與調性確立後再考慮加入
• 適不適合：高冷企業 IT 公司可能不適合，但服務頂級客戶的網路工程公司可能正好

漸層（Gradients）#

漸層幾乎存在於所有設計中。它幾乎不承載意涵，主要作用是視覺感受：

• 創造柔和、安全、舒適感（如 Pure Volume 的音樂氛圍）
• 與圓角搭配能加強柔軟調性
• 風格彈性大：可走溫暖（Nitram+Nunca），也可走科技感（Pioneer10）

光澤（Shine）#

蘋果（Apple）的果凍式分頁帶起這股風潮。要做出真正的光澤感，需要兩個關鍵：

• 高對比與高飽和色：想想閃亮新車——飽和的紅色才能撐起光澤；數位設計同理
• 大量漸層：常以白色漸層覆蓋出反光錯覺；輔助元素也用較柔和的漸層維持統一感

像 Defrost 這樣較克制的範例，靠的是整體頁面的漸層支援——讓真正閃亮的按鈕與分頁有合適的舞台。

跨元素的共通課題#

• 每個元素都該服務一個目的，而非裝飾
• 元素必須與整體設計風格統一
• 即使是最小的細節，也能決定設計的精緻度