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
-
電動車耗電|夏天熱會耗電?下雨天充電會漏電?一文看清夏季使用電動車的注意事項
炎夏將至,相信大家都會擔憂電動車會否特別耗電,或因雨季而釀成安全問題;EJTech早前跟大家介紹過電動車充電和安全問題,那現在和大家分享一下在夏季和雨季駕駛電動車的注意事項吧!
- Posted May 10, 2024
- 0
-
虛擬保險2024|虛擬保險同傳統保險有咩分別?5間香港虛擬保險公司介紹
虛擬保險對很多人來說也許比較陌生,究竟什麼是虛擬保險呢?有別於傳統保險,虛擬保險完全透過網上平台提供保險服務。即毋需跟保險代理、經紀等打交道,亦沒有「Fancy」的實體辦公室。在香港來說,大致上有Avo Insurance、Blue Insuranc、Bowtie、OneDegree及ZA Insure這五間虛擬保險公司。下面就讓小編詳細講講,到底什麼是虛擬保險,它跟傳統保險有什麼分別,並介紹香港5間虛擬保險公司。
- Posted May 10, 2024
- 0
-
AI之戰|阿里雲AI獲逾9萬企業使用
阿里巴巴(09988)旗下阿里雲宣布,推出大語言模型「通義千問2.5」,以滿足企業用戶不斷增長的AI需求。
- Posted May 10, 2024
- 0
-
本地創科動態|港大研究:新型流體系統朝向人造血管
料自組裝技術,開發一種名為VasFluidics的新型流體系統(圖),當中具備復刻血管組織功能的潛力,有望與細胞工程相結合,用於開發人造血管,進一步應用於生物醫學,例如器官晶片及人造組織,論文發表在科學期刊《自然通訊》。
- Posted May 10, 2024
- 0
-
科幻歷史共冶一爐的九龍城寨(黃岳永)
近日九龍城寨成為城中熱話。這個已經消失的寨城再次受到關注,不只是因為電影熱播。事實上,九龍城寨是極少數受到西方學術界關注的建築,因其違反所有常規建築模式,但又神奇地應付了居民所有的生存需要,才是這座特殊小城市多年來仍令人難忘之處。
- Posted May 10, 2024
- 0
-
分辨真假應用程式(林國誠)
智能手機是每一個人最貼身的隨身工具,從社交媒體、網上購物到個人財務管理,一機在手即能解決日常生活問題。因應不同用途,各人的手機內都安裝了大量應用程式。可是,原來手機應用程式也有「造假」情況,一些會魚目混珠,假冒同類著名的手機應用程式。
- Posted May 10, 2024
- 0
-
AI預測生物分子結構|DeepMind AI模型新突破 準確率最高76%
谷歌(Google)子企DeepMind在期刊《自然》介紹人工智能(AI)模型AlphaFold 3,指該模型可預測蛋白質、DNA(脫氧核糖核酸)、RNA(核糖核酸)等生物分子結構,以及它們如何相互作用,準確度介乎62%至76%不等,為食品安全、新藥及疫苗研究帶來新突破。
- Posted May 10, 2024
- 0
EJ Tech Video
POPULAR POSTS
- AI溫書神器|港大醫科生自創 上傳教材內容 速成記憶卡片
- 中電信手機連衞星 可通訊覆蓋海陸空
- Apple 發布會2024|新代iPad 即將登場!一文看清新品、iPad尺寸、規格、價格預測
- 【特約分享】「城市創科大挑戰」現正接受報名!「SENtoR」夥拍「幼聯」醒你參賽心得
- Decathlon採Adyen方案|引入一站式支付管理平台 加快交易減出錯
- 老友記唔識用電器?|VTC師生開發AR視像程式 教長輩用電器 圖示簡單易溝通
- 馬斯克發攻|Tesla 上海儲能超級工廠項目獲批
- 機械人醫生|港初創研內窺鏡手術機械人
- 研究月球|港大研嫦六着陸區 採月球土壤地質樣本
- AI技術如何識別感冒(葉文瀚博士)