Paper prototyping for iPhone apps

iPhone apps 的 Paper prototypes 會包含整個裝置、組合的螢幕、重疊浮出視窗、和一些操作控制項目等。要畫一個 Paper prototypes 可以簡單分為三個步驟：

1. 準備原料和素材：當我們要在腦力激盪討論場合用、當我們要把設計草稿畫出來時候，這些素材項目對於畫 Paper prototype 是很有幫助的。如果可以話也包含重複用的紙卡、可以反覆貼的膠帶、膠水和剪刀等等。
2. 辨別整體版面形式：有時候可以畫跟真實 iPhone 畫面解析度一樣 320 x 480 pixels (iPhone 4 是 640 x 960)，當然 paper prototypes 可以不用那麼確切。如果考量畫比原來更大的表格畫面，可以在跟別人互動設計上更方便。
3. 開始畫 prototype：Prototype 會包含整個裝置形式、螢幕和使用者介面的控制項目等。可以做出些被選取 highlighted 和沒被選取到 non-highlighted 的版本樣式。如果還沒決定好要放的 icon 也可以先用文字代替。

點圖放大

素材方面，使用者介面常用的控制項目可以準備哪些？

• Keyboard：可以自己手繪鍵盤樣式或者拍照下來。沒有必要一定要把每一個按鈕畫出來，但是把焦點放在特殊鍵和專門給 email 輸入或者純數字輸入的表達地方。 
• Sliders：可以畫出使用者在操作上選擇到的大約位置。 
• Text entry：對於文字輸入地方，使用者可以先寫在 Post-its 或者反覆貼上，再將這貼到 Prototype，這樣可以不影響到既有的畫面。 
• Navigation bar：這在對於使用者現在所在的頁面位置很重要，上一頁到哪，按下另外的按鈕可以有哪些特性，都可以表現出來。
• Search Bar：對於大量的列表資料可以讓使用者輸入做搜尋與過濾所需。
• Image View：可以表達出個人的圖像或是應用程式要呈現商品的圖示。
• Segmented controls：使用者可以點選出幾種選項，做出些切換的效果。 
• Loading page indicator：當程式在運作會有等待的時候，顯示出等待轉圈圈的 Indicator 讓使用者知道請稍候。 
• On/off switches：做出類似啓動關閉的按鈕，讓使用者可以做開關的選擇。 
• Check mark：當使用者做出選擇了，表現出勾選的樣式。
• ......還有更多控制項元素。

Paper prototypes 好處只有在快速的畫出與概念表達出來時候，才能達到提升協同討論和降低開發成本。 畫的太細緻是沒有那個必要的，使用者通常知道細節部份，所以我們只要可以表現出使用者看可以想像的出來即可。一樣的如果在準備 prototype 來做研究，不用擔心是否把介面元素畫夠仔細，反而的漂亮的 Paper prototype 是隨意畫出整個樣貌，添加控制項有如像飛的速度般在進行。
照片上是在 UI Stencils 購買的 iPhone Stencil Kit，仔細的瞧瞧它包含了我們設計上所需要常用的控制項與 icon，甚至它把畫 Prototype 所需要的等距都有明確定位出來。如果有興趣可以參考官網 http://www.uistencils.com/products/iphone-stencil-kit