Happy Designer 4 Summary(3):Wireframe, Mockup, Prototype

(本篇內容整理自hlb的演講)

這是一個有趣的漫畫,表達出專案各個環節的人員之間,認知有多大的差異。

how projects really work

prototyping的目的是讓整個專案訊息"deliverable",降低溝通的障礙。

hlb講的內容跟在公司聽到的有很多重疊的部份,可見Communication Design這本書是所有IA的聖經啊。不過hlb對三個階段有比較顯著的分割:

階段1.Wireframe: Function & Layout

Wireframe主要讓使用者知道網頁的功能和項目排列,但無需顯示視覺設計的細節。然後介紹的IA常用的Axure RP。

階段2.Mockup: Form, Design, Visual

Mockup相當於我們創意部做的事情,版面長寬高顏色都要盡量相似,但互動的部分可以先省略。有一個比Axure RP有親切感的軟體叫 Balsamiq Mockups,可以很快畫出UI,然後轉成xml放在wiki上,企劃與PM應該會覺得好用。但對於深度IA的傳達,如sitemap/site structure、page flow、Interactive、還有自動產生document方面,自然跟Axure RP 沒得比囉。

http://www.balsamiq.com/products/mockups

階段3.Prototype

Prototype要可以實際操作,像按鈕要可以按、多媒體要可以播放、下拉選單要可以動作等等。有人用paper prototyping,會寫code的直接用html prototyping,甚至跳過Mockup了。

YouTube上有點驚人的paper prototyping影片 http://tw.youtube.com/watch?v=GrV2SZuRPv0

要用html做prototype,有一個jQuery的library叫做polypage,可以達成一些動態更換頁面的狀態

實例: http://elfcartel.clearleft.com/profile.php
(假的,要寫後端程式才能動。有人問為什麼不直接寫JQuery?也許用polypage的函式會比較快吧。)

polypage的完整說明

http://code.new-bamboo.co.uk/polypage/

http://konigi.com/notebook/polypage-html-prototyping-javascript-library

我的Happy Designer筆記(powerpoint)

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s