JS作品實戰-Week7

「如何讓設計不難看」(學習筆記)

C.R.A.P. 設計準則

是由平面設計延伸出來的設計準則，運用於介面設計的視覺與動線，達到優化使用者體驗的效果。

對比（Contrast）

• 用來呈現重要性
• 透過大小、顏色、形狀來呈現差異性
• 過多無謂的對比會導致使用者分心，無法掌握重點

重複（Repetition）

• 一致性，重複使用相似的設計讓使用者更快進入狀況，且能建立介面的整體感。
• 字形、顏色、排版、間距等邏輯
• 重複不太表單調，元件的一致性會使畫面更具整體感。

對齊（Alignment）

• 引導使用者的視覺動向，可以順暢的瀏覽並操作介面。
• 格線系統
• 善用垂直與水平對齊

相近（Proximity）

• 當元件的距離越靠近，就會被認為是同一個群體，藉此幫助使用者掌握介面的操作。
• 透過間距大小為功能相關的元件分組
• 大至區塊、小至原件都需要分組

主題發想

電商網站類型

1. 實體產品：資源較好蒐集、流程相對成熟。
2. 虛擬產品：資源不易蒐集、流程較為複雜。（線上課程、授權圖片、音樂、軟體、服務類型、訂房網、旅遊網）

主體選擇小撇步

1. 授權圖片：挑選免費授權、且風格一致的圖片（拍攝手法，顏色、角度、大小構圖等）。（如 unsplash）。 選擇素材好取得的。避免使用到未經授權的圖片。圖片授權資料整理。
2. 文案發想：挑選有興趣的主題。文案撰寫上會比較順暢。

常見問題

文字

1. 建議統一語系（全英文或全中文，避免中英混雜）
2. 內容使用真實內容，避免使用假字，網站的完整性才會提昇。
3. 中文單行 20～40 字元，英文32～80 字元，較好閱讀。（IBM 英文段落字元數比較）
4. 標點符號用全形。

版型

1. 竟量自己設計版型，而非套現成版型。
2. 陰影部份避免重複疊加或顏色過深。
3. 頁面內容少時，footer 仍需保持貼齊在頁面底部。（可使用 Sticky footer 來改善）
4. 畫面避免出現水平捲軸。

Sticky Footer

色彩

1. 需訂出網站標準色，盡量不要使用預設顏色。
2. 網頁使用的顏色盡可能達到 AA 級的對比度。可使用 chrome 檢視。

可使用 chrome 檢視顏色的對比度

無障礙網頁指南 WCAG

規範了許多優化身障人士操作網站的建議與準則，每項準則都分三個等級，分別為最簡易的 A 級，建議要達到的 AA 級，和最為嚴格的 AAA 級（政府網站多為 AAA 級）。

1. 檢查方法一： chrome 開發者工具
2. 檢查方法一： color review

鐵人賽：色彩運用(1) - 你的網頁文字是否足夠清楚呢？

Colors that look and work great for everyone

配色方式

1. 重要動作：標準色填滿按鈕。
2. 一般動作：標準色外框按鈕，或無色系（灰階）填滿按鈕。
3. 次要動作：無色系外框按鈕，或文字按鈕。
4. 配色網站推薦：

Color Tool - Material Design

Pigment by ShapeFactory | Simple Color Palette Generator

免費圖片資源整理

• https://www.pexels.com/zh-tw
• https://cc0.wfublog.com/
• https://pixabay.com/
• https://unsplash.com/
• https://stocksnap.io/
• https://www.photock.jp/