---
tags: rwd
---
# 3. 以UI設計角度切入響應式設計該注意的細節
## 動線設計: 並非所有內容都要全部塞到網頁內容
注意瀏覽動線，例如廣告手機版可刪除

## 斷點時機: 設計多欄式佈局的必要觀念

以文字行數為例: 文字閱讀可視範圍
* 中文內文單行字元 30～40 會比較好閱讀，
* 英文則是 32～80 個字元數
* 更詳細一點的規範與說明，請看[參考連結](https://www.ibm.com/design/language/typography/type-basics/)

## 點擊範圍: 設計讓人好點選的元素

## 少即是多: 避免資訊量爆炸

## 載具特性: 使用者行為touch、hover傻傻分不清楚

* 手機用手指點擊要用touch
* 手機版只有使用者點擊事件並沒有滑鼠滑過，
* 範例手機版時提示文字手指移開就不見了

## 斷點元素：只有手機才會顯示的功能與Layout切換

* 桌面版
-選單為水平排列
-隱藏漢堡選單

* 行動版
-選單為垂直排列(預設隱藏)
-顯示漢堡選單

* Layout是什麼
Layout 是網頁的通用版型的意思，舉例來講，你在逛網頁時往往會有一些地方是相同的，通常是 header (頁首) 與 footer (頁尾)，但只有中間的內容(content)會隨著使用者切換，而這個 header 與 footer 就是 Layout 唷。