# 10/05 網站企劃概論 - Site map discussion & Wireframe
###### tags: `網站企劃概論` `UI design & Layout` `2021/10/05` `進度筆記` `前端心得`
---

講師: 佘昌霖

# 今日講課 -- 上午的部分 - 網站地圖 - 檢討

# 關於商品網站的範例

> RWD 會在設計的時候有想法, 或是等到設計完成的時候加入
> 格式很棒

- 同學的商品肉桂捲介紹網頁
> 有另外用介紹名詞
> 格式很棒

---

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

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

---

# 介面設計(4hr)

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

---

# 這堂課最終目標

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

----

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

平面設計 VS 介面設計

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

- 介面設計 → ==互動性==

- 像這個, 可以按鈕跟拉門的微波爐都是介面
> 人機介面
> 能按壓的 → 介面
> 螢幕 → 介面
> 投影 → 介面

---

# 互動性

- 螢幕
- 實體產品
- 無形服務

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


---

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


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

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

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

---

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

> UI:

畫面美學 / 使用便利性, color / font / size / layout / User 和 電腦溝通的媒介    


> UX:
- 人有喜歡掌控性質, 如果不能掌控, 無法預期會有使用上的疑慮

User 使用上的感受 / 畫面上的安排與規劃 / 必須符合邏輯 / 實際以真人去做測試

- 以產品的角度上, 先談功能性(才有人用), 再去談美觀

---

# 網站 - 功能或形象為主

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

---

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

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

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


---

# 網站設計 流程


- 大致可分三個
1. 企劃階段: 需求 / 目標 / 架構 / 欄位 / 材料 / 參考資料

開需求 → 專案目標(團隊才能做) → 企劃才能寫文件, 網站資訊架構, 網站欄位 

材料(例如企劃請業主提供的產品照片), 備妥參考資料(業主希望高調大方, 活潑之類的, 方向明確的業主也會提供), 也有使用者文件、情境要注意  

> 企劃還沒結束時不太會開始動設計
> 最怕的是業主希望你提供範例, 先做個三個範例來看看, 然後你的 PM 還答應了

2. 設計階段: Wireframe(Layout) → Mock up

Wireframe(Layout) / prototype: 不包含 color / pic / decoration  

Wireframe ↓

Mock up(design phase): 
平面設計的展示階段, 一個東西好像有印刷出來的 fu 
會有 color / pic / decoration  的製作並完成

Mock up ↓

Prototype ↓

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

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


---

# 一頁式 - 參考資料:
[臺中市政府勞工局 (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 的設計
- [Design - Material Design](https://material.io/design)
> google 的資料很多, 會使用顏色(紅燈停、綠燈行)

- Microsoft 的光與影設計
- [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, 來設計符合給工程師用的圖稿
例如: 實體、框線、懸浮按鈕
> 記得先看元件

---


---

[ハイクオリティな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)

---

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

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

- 例如, 裡面的文案
> 尋找畫面參考, 例如 s5-style, muuuuu 網站參考
> 尋找各區塊的長相參考, 來截圖
> 例如形象區塊的特效參考

---

# RWD / AWD

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

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

- 手繪的 wireframe ↓
- 電繪 wireframe ↓
- 設計稿 mock up

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

---

# 螢幕解析度與 RWD


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 比較貴, 因為要寫/維護 兩個版本


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

---

# 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)

---