ㄧ些設計跟前端該知道的事情

設計基礎

文字相關 、 尺寸秘密 、 設計排版 、 色彩應用 、 畫面佈局 、 動畫體驗

基礎 設計X前端

文字相關

應當要注意跨平台時的文字變化,

使用範圍
主標題,次標題,小標題,內文,輔助文字,失效文字,鏈接文字。

中文字體:
PingFang SC 蘋方體( IOS )、Hiragino Sans GB 儷黑Pro ( 次要 )、Microsoft JhengHei 微軟正黑體 (次次要)

英文字體:
Helvetica Neue ( 優先 )、Helvetica ( 次要 )、Arial (次次要)

CSS :
font-family:”Helvetica Neue”,Helvetica,”PingFang SC”,”Hiragino Sans GB”, “Microsoft JhengHei”,Arial,sans-serif;

尺寸秘密

網頁尺寸設置與螢幕分辨率和瀏覽器相關,雖然不能滿足所有用戶的最佳尺寸,但能做的是讓絕大多數用戶在體驗上是舒適的。

瀏覽器使用尺寸
360px / 750px / 960px / 980px / 1000px / 1190px / 1200px

螢幕分辨調查 2016.4 ~ 2017.4
1920x1080 (6.78%)
1366x768 (12.56%)
768x1024 (2.94%)
720x1280 (3.89%)
375x667 (4.71%)
360x640 (20.01%) 最多

mobile terminal (移動端配備)
移動端 字體大小使用 rem 單位,可以用在不同尺寸的螢幕大小上,保持整體縮放。移動端適配原則:文字流式,控件彈性,圖片等比縮放。

Retina
LOGO、圖標,固定位圖片等圖片需 2 倍大小提供給前端,前端利用瀏覽器判斷 來判斷 Retina 的螢幕。

設計排版

行高、段落、標點符號、空格、對齊、文案長度、層級引導。

行高和段
行高默認為字號的 1.6 倍,段落間距一般為字號的一倍寬。

CSS :
行高 line-height:1.6;
段落 margin:1em 0;

標點符號 和 空格
1.使用中文時標點符號使用全形的標點符號
2.遇到完整的英文整句、特殊名詞,內容使用半形,數字使用半形字符
3.不重複使用標點符號
4.中文和英文間需要空格,數字與單位之間需要增加空格,例外:度,百分比與數字之間不需要增加空格
5.中文鏈接之間增加空格

對齊
1. 中文 / 英文居左對齊
2. 數字 / 小數點對齊
3. 冒號對齊

資料參考 https://github.com/sparanoid/chinese-copywriting-guidelines

色彩應用

最好以自有品牌主色為主,色彩的運用應達到訊息傳遞、動作指引、互動性、強化和凸現某一個元素的目的。

建造屬於網站的 Style Guide

資料參考 https://dribbble.com/shots/3044430-UI-Style-Guide

畫面佈局

在規劃網站的時候最好遵循尺寸規則、交互和視覺原則,建議使用網格系統 ( Grid System ) 進行佈局。

網格系統 ( Grid System )
使用過熱門前端框架 Twitter Bootstrap 或是 Zurb Foundation, 其實就已經使用過了 Grid System ,最常見的是 12 列柵格系統,將一行分成 1 列、2 列、3 列、4 列、6 列等,並提供了強大的響應式佈局方案。

整個 Grid System 的計算公式如下:
Total width = grid padding × 2 + ( column width + gutter width )× number of column — gutter width

套用公式的結果: 960 = 10 × 2 + ( 60 +20 ) × 12–20

動畫體驗

設計需了解一些常見動畫效果、實現手法、和 JS 動效庫,使用者是否可藉由真實世界的行為或現象聯結產品的操作行為,如:慣性、速率(speed)、彈性或速度(velocity)。

透過動畫效果傳達脈絡
搖頭, say No

資料來源:https://dribbble.com/

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store