WEB UI 的幾個黃金法則

本文特約轉載自香港初創企業Oursky 的部落格

如何建造一個專業的網站前端
http://code.oursky.com/web-front-end-basic-styling-practice/ （中文版）
Oursky 的設計師都是 Pixel Lovers（甚至是令 Developer 生怕的 Pixel Hunters ），他們力臻完美，設計最佳體驗的UI。與此同時，當然也要確保工程師能完美地將之呈現。
就此，藉本文分享一下 Oursky 內部給新入職開發員的一份文件，談談我們造好一個專業的網站前端的幾個黃金法則：
#《前端工程師的101清單》按鈕和標籤

Buttons and Labels

• 按鈕/標籤上下的 padding 必須相稱，左右亦然。
• 按鈕文字應置中（除非設計另外有所標示）。
• 按鈕應能跟隨內容大小擴展，也別應設置其最小闊度（ min-width ）。
• 考慮按鈕懸停和按下時的狀態，如果設計未有提及的話，可簡單地用這 JS 使之變亮／變暗。

• 如標籤附有圖示的話，確保兩者垂直置中。
• 標籤圖示和文字應留有適當空位。
• 用 <a> 和 <span> 元素就很容易標示出圖示和標籤。然後就可以自動垂直對齊：<a href="#"><span></span>Run</a>

字型及排版 Typography

• 清晰地定義你的排版風格，明智地使用 em / rem。（使用 em / rem 時請確保自己處於清醒狀態！）
• 檢查行高（ line-height ），確保每行之間看起來不會太緊逼。
• 檢查字距（ letter-spacing ）。
• 以 margin-bottom 來分隔文字內容，例如標題／內文。
• 確保 word-wrap 沒有毀掉你的排版。
• 準備處理過長的文字或句子，用text-overflow: ellipsis 將過長的文字截短。

版面 Layout

• 選用一個合適的框架，我們都在用 Zurb 的 Foundation。
• 用行（row）和欄（column ）來快速地設置版面。但這只適用用於基本佈局，裏面具體的內容則未必能用得上。
• 不要弄亂默認的網格 StyleSheet。
• 以「響應式網頁設計」（ Responsive Layout ）的思維去建構網站。內容、元素都應該能自動移到適合的地方。盡量避免 hard-code 每個元素的位置。

圖片 Images

• 現已踏入高清的世代，確保所有圖片至少有 2x 解析度。
• 如適用，可向 Designer 索取 SVG 圖檔。
• 當網站要處理大量 icon 時，icon font 會是你的救星。（例：Font Awesome）
• 勿讓圖片變形，欲改變圖形大小時應只設置 height 或 width 其中一者，有助保持圖片的比例不變。
• 檢查背景大小和位置（ background size and position ）

小提示 Tips

垂直置中 Vertical Alignment

• 「50% hack」只能在元素高度固定不變時使用：top:50%, margin -50% / transform -50%
• 大部分的情況 Table CSS Hack 也能有效將元素垂直對齊。
• 如果能得知父元素（ parent element ）的高度時，可用 inline-block 和 css:before 來垂直置中。
• 或者砍掉一切，改用 Flexbox 吧。

對齊內容 Content Alignment

• 大部分時候，文字和主要段落皆是靠左排版的，把元素 align-left 就可以了。（如表格、列點、段落等）
• NORMALISE 提供了跨瀏覽器的高度一致性，也讓你在排版時要處理的問題大大減少。

CSS Transition 時的文字搖晃

由於 Webkit 抗鋸齒 ( anti-aliasing ) 的問題，遇發現有此情況，可在出現問題的文字元素上添上：-webkit-font-smoothing: subpixel-antialiased;

如果你也是 Pixel Lover，請勿吝嗇跟我們分享。 考慮加入 Oursky，一同創造世界級的應用程式和網頁！ 詳情： jobs.oursky.com/tw

支持EJ Tech

如欲投稿、報料，發布新聞稿或採訪通知，按這裏聯絡我們。