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
如欲投稿、報料,發布新聞稿或採訪通知,按這裏聯絡我們。
Related Posts
Latest News
-
山姆襲港|傳於香港開設網上業務
《南華早報》引述深圳倉庫式超市山姆(Sam's Club)的員工指出,將開設香港網上業務,購物逾599元人民幣可獲免費配送。
- Posted May 13, 2024
- 0
-
智能手機之戰|Apple新款iPhone傳設置ChatGPT
彭博引述消息指,Apple即將與OpenAI達成協議,將在新一代iPhone設置ChatGPT。
- Posted May 13, 2024
- 0
-
九巴電動巴士|首輛英國製造雙層電巴投入服務 來往蘇屋邨至北角百福道
九巴首輛英國製造的雙層電動巴士上周六(11日)起正式投入服務。行走來往長沙灣蘇屋邨至北角百福道的112號過海路線,頭班車於當日上午11時50分在蘇屋邨開出,吸引逾百名巴士迷排隊嘗新,排頭位者更在前一晚已經到場。
- Posted May 13, 2024
- 0
-
投資晶片|南韓擬斥570億支持晶片行業
南韓財長崔相穆表示,南韓正制定一項價值超過10萬億韓圜(約570億港元)的針對晶片投資和研究的一攬子支持計劃。
- Posted May 13, 2024
- 0
-
智慧城市所需交通配套(方保僑)
每年2月,我都會到西班牙巴塞隆拿出席世界流動通訊大會(MWC),猶記得疫情前曾打算在巴塞隆拿機場用Uber召車前往酒店,卻發現當地不能使用Uber。其實,Uber在許多國家或地區仍未合法化,而且面對來自政府及業界的抵制。然而,疫情過後Uber勝出西班牙一場官司,現時已獲准於該國合法營運,目前還在起步中,所以Uber在當地仍然不是主流。
- Posted May 13, 2024
- 0
-
燧氏科技|實踐再工業化 盼政府支援用地
特區政府於2020年推出「新型工業化資助計劃」(前稱「再工業化資助計劃」),冀吸引生產商在港設立智能生產線。本地機械人初創燧氏科技(Hestia Technology Limited)聯合創始人及董事長陳冠華認為,機械人一類智能儀器是香港技術優勢之一,本地發展再工業化應該走高科技路線,並充分利用粵港澳大灣區的完整產業鏈及供應鏈,把握香港「出海」方面的優勢。
- Posted May 13, 2024
- 0
-
燧氏科技|自動化廚房助解人手荒 香港設計組裝 攻本地海外中餐廳
近年港人流行北上消費,本地餐飲業要提升競爭力,除了控制成本,亦面對請人困難,引入科技有助分擔壓力。本地機械人初創燧氏科技(Hestia Technology Limited)研發出自動化廚房設備,利用機械人完成執料、調味、炒菜或油炸等一系列烹飪步驟,聲稱食品水準勝過真人廚師。
- Posted May 13, 2024
- 0
EJ Tech Video
POPULAR POSTS
- AI溫書神器|港大醫科生自創 上傳教材內容 速成記憶卡片
- 【特約分享】「城市創科大挑戰」現正接受報名!「SENtoR」夥拍「幼聯」醒你參賽心得
- 中電信手機連衞星 可通訊覆蓋海陸空
- AI之戰|阿里雲AI獲逾9萬企業使用
- 牙齒再生|日本初創研「長牙藥」 臨床測試醫治無齒症
- Microsoft及LinkedIn調查報告|75%知識工作者日常用AI 首要節省時間 多數自備工具
- 智能手機之戰|Apple新款iPhone傳設置ChatGPT
- 虛擬保險2024|虛擬保險同傳統保險有咩分別?5間香港虛擬保險公司介紹
- 中美矛盾|倘美要求 沙特AI基金願撤華投資
- 老友記唔識用電器?|VTC師生開發AR視像程式 教長輩用電器 圖示簡單易溝通