---
# System prepended metadata

title: 10/05 UI design & Layout - Introduction
tags: [UI design & Layout, 進度筆記, 前端心得]

---

# 10/05 UI design & Layout - Introduction  
###### tags: `UI design & Layout` `進度筆記` `前端心得`  
---

---

# 下午的部分 - 介面設計 (UI design & Layout - 4hr)    

講師: 盧政憲   
視覺設計 / 介面設計  

---

# 介面設計(4hr)  

- 甚麼是介面設計?  
- 要怎麼處理專案?  
- 要怎麼應用在個人專題?  

---

# 這堂課最終目標   

- One page website **User** interface design, UI   

----

# 平面設計 - what is UI ?   
- 課堂結尾時, 有海報要做?   

平面設計 VS 介面設計   

- 平面設計, 從平的到立體的   
> 名片, 海報, 書, 菜單, DM, 衣服...等   

- 介面設計 → ==互動性==   
![](https://i.imgur.com/zL16qb0.png)   

- 像這個, 可以按鈕跟拉門的微波爐都是介面   
![](https://i.imgur.com/J71S9wD.png)  
> 人機介面   
> 能按壓的 → 介面   
> 螢幕 → 介面      
> 投影 → 介面      

---

# 互動性   

- 螢幕  
- 實體產品   
- 無形服務   
```
例如: google meet  
實體產品 → 出現在螢幕上   
無形服務 → 聊天室, 直播上課   
```

![](https://i.imgur.com/59vvpHx.png)   

---

# 平面與介面設計的差異   
例如海報 → 要傳達主題、文字、意涵   

![](https://i.imgur.com/TxFkY5j.png)   


- Graphic design → 不能出錯 / 設計師會被電飛QQ  

- 使用者介面(UI design / User Interface /   Human Machine Interface) ↓  
> 讓人理解   
> 讓人融入(符合直覺反應)  
> 可以進階 / 改款, 更好操作   

測試人員: UX 研究員 / UX 測試人員  
> 去加以修正產品   

---

# 使用者經驗(體驗)   
- UX, User Experience  
- UI /UX 形影不離, 互相影響, 例如: 視覺引導    
- 很多視覺/平面設計會轉介面設計  
- 任何情況下幾乎都會發生   

> UI: 
```
畫面美學 / 使用便利性, color / font / size / layout / User 和 電腦溝通的媒介    
```
![](https://i.imgur.com/PSeYAie.png)   

> UX: 
- 人有喜歡掌控性質, 如果不能掌控, 無法預期會有使用上的疑慮   
```
User 使用上的感受 / 畫面上的安排與規劃 / 必須符合邏輯 / 實際以真人去做測試
```
- 以產品的角度上, 先談功能性(才有人用), 再去談美觀  

---

# 網站 - 功能或形象為主  

# 一頁式網站  
- 選單作為定位用  



---

# 一頁式和多頁式網站區別   

- 一頁式   
> 優點: 閱讀快速 / 好維護(程式碼少) / 便宜  
> 缺點: 資訊少 / 不易受信任   
- 多頁式  
> 優點: 好擴展(分頁) / 良好的使用者體驗(UX)(很好的運用空間)  
> 缺點: 容量需求空間大 / 維護不易  / 貴  

甚麼時候用一頁(資訊少適用)或多頁(資訊多), 取決訊息量多寡(主要), 預算  

![](https://i.imgur.com/7h8hURd.png)   

---

# 網站設計 流程  

![](https://i.imgur.com/UCbVv48.png)  

- 大致可分三個  
1. 企劃階段: 需求 / 目標 / 架構 / 欄位 / 材料 / 參考資料  
```
開需求 → 專案目標(團隊才能做) → 企劃才能寫文件, 網站資訊架構, 網站欄位 

材料(例如企劃請業主提供的產品照片), 備妥參考資料(業主希望高調大方, 活潑之類的, 方向明確的業主也會提供), 也有使用者文件、情境要注意  
```
> 企劃還沒結束時不太會開始動設計  
> 最怕的是業主希望你提供範例, 先做個三個範例來看看, 然後你的 PM 還答應了   

2. 設計階段: Wireframe(Layout) → Mock up  
```
Wireframe(Layout) / prototype: 不包含 color / pic / decoration  
```
Wireframe ↓  
![](https://i.imgur.com/pAbQ2pK.png)   
```
Mock up(design phase): 
平面設計的展示階段, 一個東西好像有印刷出來的 fu 
會有 color / pic / decoration  的製作並完成
```
Mock up ↓  
![](https://i.imgur.com/kC3agxG.png)  

Prototype ↓  
```
完成的雛形, 要有可以點擊的樣子, 一個偽網站
```

3. 程式技術: 前端 / 後端技術  

![](https://i.imgur.com/wwAqf4y.png)   


---

# 一頁式 - 參考資料:  
[臺中市政府勞工局 (taichung.gov.tw)](https://laborepaper.taichung.gov.tw/1263084/1270357/1878056/)   

[iPhone 13 與 iPhone 13 mini - Apple (台灣)](https://www.apple.com/tw/iphone-13/)   

[unicornplus](https://kids.unicornplus.co.jp/)   

# 多頁式 - 參考資料:  
[全球災害事件簿-首頁 (nat.gov.tw)](https://den.ncdr.nat.gov.tw/)  

----

# 設計階段 - 參考資料  

- 大多人閱讀習慣從上到下、左到右 

- google 的設計  
![](https://i.imgur.com/mvTIh1C.png)   
- [Design - Material Design](https://material.io/design)   
> google 的資料很多, 會使用顏色(紅燈停、綠燈行)  
![](https://i.imgur.com/vu8JmPb.png)  

- Microsoft 的光與影設計  
![](https://i.imgur.com/PJNCiaV.png)   
- [Microsoft Design](https://www.microsoft.com/design/fluent/#/)   

- 前端 CSS 框架(!important)  
- [Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)](https://getbootstrap.com/)  
> 本身要懂 html 架構, CSS 設定, JS 特效, 才能運用框架   
> 設計師也會看 Bootstrap, 來設計符合給工程師用的圖稿  
例如: 實體、框線、懸浮按鈕   
> 記得先看元件  

---

![](https://i.imgur.com/VLHAFRR.png)   

---

[ハイクオリティなWebサイトを探すなら Webデザインギャラリー | S5-Style](https://bm.s5-style.com/)   
> 見紅休   
> 日系網站  
> 比較下面的網站會被替代  / 被消失   

[縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG](https://muuuuu.org/)  
> 跟 s5 交替著看, 可以看到互補   
> 日系網站   

[Awwwards - Website Awards - Best Web Design Trends](https://www.awwwards.com/)   
> 國際介面設計的競賽網站  
> 每天都有投稿, 每年都有評審團, 會選當日最佳網站  
> 投稿價格不便宜  
> 美系網站  

----
----
---

# 參考資料  

[設計 wireframe 篇 - 案例分享 | W3HexSchool](https://w3c.hexschool.com/-30-/8e2004af)   

[分類：Wireframe - 部落格 - internet、app、maker - ez2o Studio](https://www.ez2o.com/Blog/Cat/Wireframe)  

[什麼是 Wireframe ? · 嫁給 RD 的 UI Designer (akanelee.me)](https://blog.akanelee.me/posts/159788-what-is-wireframe/)  

[線框圖(Wireframe) 跟樣張(Mockup)跟原型(Prototype)有什麼不同？ - 部落格 - internet、app、maker - ez2o Studio](https://www.ez2o.com/Blog/Post/Web-Design-Wireframe-Mockup-Prototype)

  [Wireframe、Mockup與Prototype的差異？來看看完整的產品UI設計流程 - 寫點科普 Kopuchat](https://kopu.chat/2017/06/22/wireframe%e3%80%81mockup%e8%88%87prototype%e7%9a%84%e5%b7%ae%e7%95%b0%ef%bc%9f%e4%be%86%e7%9c%8b%e7%9c%8b%e5%ae%8c%e6%95%b4%e7%9a%84%e7%94%a2%e5%93%81ui%e8%a8%ad%e8%a8%88%e6%b5%81%e7%a8%8b/)   
  
[【Day20】Wireframe、Mockup與Prototype的差異？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10196513)   

[Functional Map > UI Flow > Wireframe > Mockup > Prototype 之間的差異 | by Chialin Chou | cultivate-my-design-insight | Medium](https://medium.com/cultivate-your-design-insight/functional-map-ui-flow-wireframe-mockup-prototype-%E4%B9%8B%E9%96%93%E7%9A%84%E5%B7%AE%E7%95%B0-5dcbc5b05eea)   

[給受委屈的 PM 們：不會程式也不代表你很蠢，直接和 RD 開口討論你的目的吧 | TechOrange 科技報橘 (buzzorange.com)](https://buzzorange.com/techorange/2016/03/21/there-are-no-problem-to-pm-having-no-programming-skill/)   

[【設計 wireframe 篇】我們用溝通協作，打造出 400,000+ 瀏覽數平台 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10221078)   

---

# 完成個人專題的網站地圖後, 看項目內容

- 企劃真的很重要, 地基打越穩, 後面做網站越輕鬆  

- 例如, 裡面的文案  
![](https://i.imgur.com/VwgDY9p.png)   
> 尋找畫面參考, 例如 s5-style, muuuuu 網站參考     
> 尋找各區塊的長相參考, 來截圖   
> 例如形象區塊的特效參考  

---

# RWD / AWD  

**用哪種好呢? → 看需求**  

- RWD → 響應式網站設計  
- AWD → 自適應式網站設計   

- 手繪的 wireframe ↓    
![](https://i.imgur.com/BjUIF2e.png)   
- 電繪 wireframe ↓  
![](https://i.imgur.com/bykhqxx.png)   
- 設計稿 mock up  
![](https://i.imgur.com/IC83AE7.png)   

- 手機板 / 平板版  的 RWD  
> 時間很趕的情況下通常是 手機板跟 PC 版   
![](https://i.imgur.com/xWLQWRf.png)   
> 同一套 CSS 和圖片(除非有做效能優化, 用 picture tag 減少圖片尺寸...等)
> 也因為用同一套 CSS 和圖片,  比較耗流量  
> 在同一個區塊維護  

---

# 螢幕解析度與 RWD  

![](https://i.imgur.com/5DcgzmY.png)   

1920 → PC  
1600 → Pad  
1366 → Laptop  
1366x1024 4:3(平板 / 早期 TV)  
---BP1200--- 斷點
1280x720 (平板)  
768x1024 (平板最窄的邊)  
375 → 之後可能會替代 320
320x568 (最小的手機, iPhone 5s) → 再來可能會淘汰  
> 滿足最小的版面的情況下, 我們就能滿足需求  

- 如果是這種特殊規格   
[Galaxy Z Fold3 5G Folding Smartphone | Samsung US](https://www.samsung.com/us/smartphones/galaxy-z-fold3-5g/)  
> 可能會等到有一定市場, 再去對這規格做 RWD  

---

# 手機與 AWD  
- 手機與 PC 版網站分開製作  
- 例如:  
> 常見的購物網站, 畫面複雜的如蝦皮, Pinkoi, 露天, 博客來...等, 來減少畫面複雜程度   
> 如果畫面少的像是 FB, 像是一堆人用, 流量大量在用的情況下  
> 因此會透過 AWD來分散流量, PC 導至 PC 頁面, 手機去手機頁面   
> 因為有兩個版本, 所以可以針對各版本優化   
> AWD 比較貴, 因為要寫/維護 兩個版本   

![](https://i.imgur.com/WmVdRZd.png)   

# 參考資料  
[RWD比較好還是AWD?-達文西數位科技 (da-vinci.com.tw)](https://www.da-vinci.com.tw/tw/blog/detail/47)   

---

# 課外 - 參考   

[你才糙 code !!你全家都糙 code - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10209818)


---

# Wireframe 和 Bootstrap(10/6 提)  

# 參考資料   
[Wireframe.cc | The go-to free, online wireframing tool.](https://wireframe.cc/)   
[Wireframe是什麼？認識網站UI設計排版草圖與資訊架構｜ALPHA Camp Blog](https://tw.alphacamp.co/blog/wireframe)   
[什麼是 Wireframe ? · 嫁給 RD 的 UI Designer (akanelee.me)](https://blog.akanelee.me/posts/159788-what-is-wireframe/)   
[Wireframe、Mockup與Prototype的差異？來看看完整的產品UI設計流程 - 寫點科普 Kopuchat](https://kopu.chat/2017/06/22/wireframe%E3%80%81mockup%E8%88%87prototype%E7%9A%84%E5%B7%AE%E7%95%B0%EF%BC%9F%E4%BE%86%E7%9C%8B%E7%9C%8B%E5%AE%8C%E6%95%B4%E7%9A%84%E7%94%A2%E5%93%81ui%E8%A8%AD%E8%A8%88%E6%B5%81%E7%A8%8B/)   
[設計師必懂 (一) \- Wireframe 與 Prototype 的不同 | 設計大舌頭 (designtongue.me)](https://designtongue.me/%E8%A8%AD%E8%A8%88%E5%B8%AB%E5%BF%85%E6%87%82-wireframe-prototype-%E7%9A%84%E4%B8%8D%E5%90%8C/)   
[Wireframe 誰都會畫？. Wireframe (線框圖)… | by Ted Deng | Medium](https://medium.com/@teddeng/wireframe-%E8%AA%B0%E9%83%BD%E6%9C%83%E7%95%AB-466b671d82b4)   
[Wireframe是什麼？認識網站UI設計排版草圖與資訊架構｜ALPHA Camp Blog](https://tw.alphacamp.co/blog/wireframe)   
[製作 Wireframe 設計圖的免費工具整理 - G. T. Wang (gtwang.org)](https://blog.gtwang.org/useful-tools/free-wireframe-tool/)   
[使用者介面設計｜WireFrame (mepopedia.com)](http://jinjin.mepopedia.com/~jinjin/ui/ui-05.html)   

---