Pages

Sunday, April 10, 2011

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

No comments:

Post a Comment