# [網站規劃wireframe(筆記)]
###### tags:`設計`
[wireframe、mockup與prototype的差異？](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 稱為線框圖:功能導向的簡要設計
* 負責：專案經理 (PM)
* 階段目標：功能導向設計，整合產品團隊中的成員意見達到共識。
Wireframe 階段的重點在於釐清此次產品的需求，確認最終版的產品上必須出現的主要功能，故==必須剝除掉所有視覺元素，專注在功能區塊的規劃==。

### Mockup 稱為視覺槁:發揮功能目標的產品最終視覺樣貌
* 負責：UI 視覺設計師 (UI Designer)
* 階段目標：以達到最佳產品功能為目標的視覺呈現。
UI 設計師會根據產品經理確定好的 Wireframe 介面，使用 Illustrator、Photoshop、Sketch 等繪圖軟體進行視覺設計上的配色、動畫特效、版面調整等，以增強使用者體驗產品功能的效果。
下一步就是直接交由工程師根據視覺稿進行開發，所以在 Mockup 階段和最終產品的樣貌會完全一致，只差在這邊==只有單純的圖片設計、還沒有真正能操作的功能==。

### Prototype 稱為原型:同時具備視覺設計與實際的產品功能動態機制
* 負責：前端工程師、後端工程師、iOS工程師、Android工程師…
* 階段目標：實體產品介面與功能開發。

### 測試階段
負責：產品經理、測試工程師
階段目標：確保功能達到產品的設定目標、Debug 問題。

1. 會員系統 (權限管理 or 一般會員)
2. 購物車 (線上購買，訂位，訂房，課程報名.......收藏)
3. 討論區 (開新主題，回覆，檢舉....)
4. 留言板 (回覆，檢舉........)
5. 投票區 (星等，投票....)
6. 聊天機器人
7. 資料撈取 (氣象資料，其他資料.......)
8. 客製化 (顏色，外型，文字，圖片上傳，圖示，塗鴉，縮放旋轉)
9. GPS (距離，店家.......)
10. 小遊戲 (翻牌，撿寶.......)
社群網站結合按讚
產品討論
線上課服
投票
關於

垂直鏈結以前
水平鏈結現在透過資料庫去連結

題目目的
使用者需求
優勢特色
網站架構

[UI設計師 – wireframe是什麼？](https://himydream.me/2017/03/23/ui%E8%A8%AD%E8%A8%88%E5%B8%AB-wireframe%E6%98%AF%E4%BB%80%E9%BA%BC%EF%BC%9F/)線框稿