# 網頁設計與效能

### 流水式排版
> 這類排版較適合於不同手機寬度下的瀏覽網頁設計
> 但流水式的排版並非圖片式視覺等比縮放，比較可以說是元素固定的向右延伸

### 同類型排版的一致性
> 落差不大的同類型排版，盡可能設計成一致性；如：各頁條列標題、摘要及 hvoer
> 如同 CIS 表準化，避免各頁面喪失系統一致性的整體感覺
> 如有特殊異類的美術排版，則需特別註明樣式說明

### 圖片比例
> 套後端的常態為 3:2 比例
> 無後端的案子，可選擇的有 4:3、16:9、1:1 等 ... 常見比例
> 避免其他比例或奇數單位，如 4:2.5 (200x75) 之類 (奇數無法被整除，等比縮放)

### 跳脫框架版面規劃
> 因版型當RWD時，原本在A容器內的子區塊，跳到另一個B容器內，強烈不建議這樣的設計方式，CSS 無法跨躍移動至別的容器區塊，需用 javascript 解決！但卻犧牲效能

### 周全的網頁設計
> 預想各種瀏覽平台、不確定的內容所呈現的視覺結果 (直圖、橫圖、方圖、小圖、大圖在同一個位置的呈現)
> 製圖的意義是在於提供給客戶各種環境下，最直接的視覺感受
> 可盡量避免只用口訴排版時，等切完板後的成品大家觀感不一
>
### 瀏覽器閱讀限制
> 某些瀏覽器的文字最小字級為 12px
> 因為視覺美觀的設計，以往 Desktop 都喜歡採用文壓圖的方式設計
> 但時代精進！多元載具的普及，隨著瀏覽網頁方式一直在改變
> 文壓圖的設計是必須有所限制性
> 無論文壓圖排版或者條列式文字內容，都雖可設計限制行數末端 "..."
> 但因為設計時的喜歡排版方式，卻嚴重忽略使用者行為
> 深深阻礙瀏覽時的理解程度，不可不重視

### 標示設計
> 同類繼承、對齊、均分、偶數
> 可用工具 specKing，https://blog.akanelee.me/posts/233508-marking-files-artifact-specking/