Paper Prototyping for User Interface

手邊有一個正在進行中的「小小」的軟體專案,和外部的程式設計師溝通了許久,終於還是跳下來去做 flow design 和 user interface design。原因只有一個:

他們真的不知道該怎麼設計 user experience!

辦公室座位後面有一塊空著的區域,那一天晚上,趁著同事回家之後,一個人安靜地把程式會用到的 screen 一張一張畫出來,重組、排列、模擬,

5B11_Papaer Prototyping for User Interface-01

剪剪貼貼,很快的,整個架構輪廓就出來了!

5B11_Papaer Prototyping for User Interface-02

隔天拿著這幾張 paper prototype 和程式設計師討論的時候,終於有了「共同」的視覺語言 ,因而可以更快速的找到共同點與差異點。而且可以經由快速地移動各個 paper screen,更快的知道哪個流程遺漏了,哪個流程重複了,哪個畫面的文字需要修改,哪個步驟需要等待使用者的回應。

Paper Prototype 真的是一個好的「思考」工具。試著去做你的 prototype 吧!

在〈Paper Prototyping for User Interface〉中有 2 則留言

  1. Avatar
    在學習使用者介面設計的學生 回覆

    前輩您好~
    在下是一個正在學習什麼是使用者介面的學生,請想請教前輩您,如何畫出flow design以及user interface design,這二者有何不同?
    flow design是否是把功能整個串起來,或是說使用者在操作要提供功能的操作流程。
    另外user interface design是否需要把flow design的流程,一一按照順序對應畫出來呢?
    還請前輩指導學生。

  2. 曾憲鈺
    曾憲鈺 文章作者回覆

    以下是我的經驗:

    1.
    要畫 Flow 或 UI 的工具很多,PowerPoint, Excel, Visio, Photoshop, Illustrator,Fireworks… 不勝枚舉,看你習慣用哪一個。
    重點是畫出來之後要幹嘛?自己要先知道。

    2.
    另外,與其說 flow design,我比較喜歡用 interaction design 這個詞兒,就是把「人」和「機」的互動勾勒出來。

    flow 很有用,尤其是在溝通的時候,但我覺得,只看 flow 就開始設計的設計師,會缺少一種「人味」,因為 flow 很難看到 interaction。

    3.
    最好把所有的東西都視覺化,但這是大工程,看你的目的。如果要交作業,你只能照做;如果有 programmer 可以天天和你討論,那免了吧,快快 prototyping 吧!

    4.
    最後,想要多瞭解,請 google:
    1. iOS UI Element Usage Guideline
    2. iOS User Experience Guideline
    3. Android Design, http://developer.android.com/design/index.html

發表迴響