在小妹來到Monospace之前，完全沒有聽過這些專有名詞
與隔壁工程師團合作專案時，剛開始完全聽不懂他們在說些什麼
有種來到另一個國家，在學第三語言的感覺XD

Wireframe、Mockup與Prototype，
在網頁設計中是很重要的三個觀念。
在這邊跟大家分享一篇寫得很棒的文章！
WIREFRAME、MOCKUP與PROTOTYPE的差異？來看看完整的產品UI設計流程

它寫得非常清楚！
包含執行各個階段該由誰來負責？（PM專案經理、UI設計師、前端、後端工程師…等等）
以及可能會遇到上的哪些問題？（客戶突然改設計、要求增加功能…等等各式各樣的意外）
並且它用比較視覺化的方式在說明Wireframe、Mockup與Prototype之間的差異。

小妹用很視傳系的方式來理解與比喻：

Wireframe　→　草稿

初步對於畫面的構想草稿，大概哪個位置想擺放什麼。

Mockup　→　線稿+初步定色

將草稿上線稿、並且加上初步構想的顏色，看看整體和諧度。

Prototype　→　整體修細與上色完稿

色彩確定後就開始大範圍的精細繪圖、上陰影與環境色等等，一邊觀察整體視覺感，最後完稿。

小妹用我很喜歡的一位P網繪師的過程繪來比喻XD
這裡也附上他的P網與作品Id！
phantania
水色【メイキング】と最近の落書き

視傳系動物真的得用比較圖像化的方式來理解與說明，
不知道這樣的比喻有沒有比較好理解一些>_<