---
# System prepended metadata

title: Untitled
tags: [RWD]

---

## <font class="h2">UI設計響應式網頁應注意的細節</font>

###### tags: `RWD`
<style>
.h2 {
  background: linear-gradient(135deg,#fff,#537479) ;
  color: #537479;
  display:block;
  padding: 6px 5px;
  border-radius: 4px;
}
.h3 {
  background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
  color: #537479;
  display:block;
  padding: 6px 5px;
  border-bottom: 3px solid #537479;
}
.h4 {
  color: #537479;
  font-weight:bold;
  font-size:1.1em;
}
</style>


### <font class="h3">動線設計：並非所有內容都要全部塞到網頁內容</font>
![](https://i.imgur.com/hvhQ2DI.jpg =500x)
不重要內容可以隱藏
<br><br><br><br><br><br>

### <font class="h3">斷點時機：設計多欄式佈局的必要觀念</font>
![](https://i.imgur.com/JUMMhV9.jpg)

文字行數寬度不要太長，左右可以做留白，視覺上比較舒適
:::info
- 中文內文單行字元 30～40 會比較好閱讀
- 英文則是 32～80 個字元數
:::
<br><br><br><br><br><br>

### <font class="h3">點擊範圍：設計讓人好點選的元素 </font>
![](https://i.imgur.com/vk73izP.jpg =300x)

手指點選範圍高度至少44px
<br><br><br><br><br><br>

### <font class="h3">載具特性：使用者行為 touch、hover </font>

![](https://i.imgur.com/clLYNUc.jpg)
PC上滑鼠移開(hover)提示就會消失，
手機的點擊(touch)後不能讓它消失
<br>

![](https://i.imgur.com/7W861lD.jpg)
下拉式選單PC上滑鼠滑過(hover)就會出現選單，
手機上是點擊(touch)出現選單
<br><br><br><br><br><br>

### <font class="h3">斷點元素：只有手機才會顯示的功能與Layout切換</font>
Layout 是網頁的通用版型的意思
### <font class="h4">➤PC版</font>
![](https://i.imgur.com/uT0gZYt.jpg)
選單為水平排列
<br>

![](https://i.imgur.com/VIS7Oy3.jpg)
隱藏漢堡選單
<br><br><br><br><br>

### <font class="h4">➤手機版</font>
![](https://i.imgur.com/26FAJV5.jpg)
顯示漢堡選單
<br>

![](https://i.imgur.com/BkUCQkA.jpg)

![](https://i.imgur.com/nHSiH1R.jpg)
