在IPAD平板電腦上進行界面設計的規范與技巧
在IPAD平板電腦上進行界面設計的規范與技巧-移動閱讀二維碼

2010年7月30號,《牛壹周》在App Store上架,截止到我寫這篇blog,下載量破千,排名暫列中國地區免費程序TOP榜第11位,新聞類第2位。

幾天前,Shawn寫了篇超有愛的blog――《牛壹周》順產記,從開發的角度跟大家分享了《牛壹周》的生產過程,比較適合程序員和開發者閱讀;在這里我想寫一寫《牛壹周》設計過程,也許設計師和產品經理們看了會更有共鳴。

 

一、學習

iPad出來不久,我們便覺得這樣的神器簡直就是為用戶體驗設計而生——精致的顯示,優秀的交互,簡單的操作,讓使用沒有門檻,充滿無限可能——于是我們決定進軍這個陌生的領域。

學習是第一步,于是有人開始看Stanford的視頻教程,有人開始安裝xCode,有人開始研究HTML5,而我,則開始學習蘋果4月3號出的那份官方指南《iPad Human Interface Guidelines》。

6月27號的成都UCD書友會,官方主題正好是《移動設備的交互和設計》,于是我把前一陣子的學習的心得和領悟做了份演示文稿,跟參會的書友們進行了分享和交流。


iPad用戶體驗設計指導性原則

在這份文檔里,蘋果提出了幾個重要的設計原則。

首先,在iPad上側重的是內容和交互,而不是UI。

作為設計師,幾乎我們本能的就會醉心于一些華麗的UI界面而忘了用戶本身是來干什么的。為了讓用戶關注內容本身并在交互的過程中盡量少受干擾,所以我們需要淡化程序UI,弱化界面控件、讓信息更扁平化(讓上下層級可以在同一界面中自如切換),限制一個視圖內的任務復雜度、淡化文件管理、使用最少的模態對話框、只有在需要時才提醒用戶??

然后,是內容形式上富有真實感。

iPad上自帶的iBooks、Note以及Google Map都是很好的例子。蘋果給出的解釋是:程序顯示和現實生活越相似,用戶就越容易理解、操作并喜歡??梢允褂脛赢嬤M一步增強真實感覺,動作的真實感比外觀更為重要,要符合物理規律。

最后,是充分利用設備性能和特性。

iPad是今年1月27號才發布的全新設備,除了具有普通數碼設備的硬件指標和性能參數之外,還具有很多諸如重力和加速度感應、多點觸控、手勢識別等人機交互新特性。如何把這些交互手段通過設計結合到你的作品中,會是個有趣的挑戰。

總之,上帝的歸上帝,凱撒的歸凱撒。

二、設計

牛博網閱讀器的想法,6月初就提出來了,但要做成什么樣子,大家腦子里還是一片混沌。

6月12號,競總出了份iPad牛博網閱讀器低保真模型,有橫板和豎版兩種模式。它看起來有些象網頁,又有些象RSS閱讀器,還有些象iPad上的Mail程序——大家都是菜鳥,看到這樣的設計,也無法判斷這樣的設計到底是好,還是壞。后來因為其他項目上的事情一忙,這份原型也就沉沒了。

競總的設計原型概覽

6月底的時候,我開始著手設計。因為本身就是設計師,視效上沒有障礙,涉及的頁面也不是很多,所以一開始就在PS下面畫圖了。

網站設計多了,一上來還是傳統思路在作祟,結果才設計了個開頭就茫然了:心想如果設計成這個樣子,還不如人家直接在iPad上用Safari瀏覽器打開牛博網來看呢??

用做網站的思路來設計iPad應用完全是死路一條

好吧,摒棄網站思路,做減法后我設計了目錄頁和內文頁,設想應該有按文章索引、按人物索引、RSS訂閱和設置這些功能??顯然,這是個平庸的設計,但其實沒關系,很多東西都是這樣,剛開始的時候很糗,但至少有了討論的基礎。

目錄頁

第一版目錄頁

內文頁

第一版內文頁

團隊的Daily Meeting上,大家給了很多好的建議。S拿出一本《南方人物周刊》,說其實應該做成這個樣子——首先,它應該是一本雜志,閱讀習慣上應該象在閱讀一本書而不是瀏覽一個網站;然后,它應該是一本期刊,時效性比書本高,但比網站和blog低;內容質量和閱讀體驗和書相當,比網站有更多的個性,更少的噪音。

有了這個定位,設計也就有了方向,牛讀器從此變成了《牛壹周》,開始有了典型的雜志封面,開始有了內文的兩欄設計,交互上也去掉了縱向滾屏而采用了橫向翻頁。

第二版封面

第二版封面(我們團隊簡稱CCW,于是戲稱自己是山寨傳媒CCVV)

目錄頁設計第二版

目錄頁設計第二版

內文頁設計第二版

內文頁設計第二版

在視效框架基本定型,代碼上的難點也基本突破的時候,我和Shawn就好象分別從兩頭開始掘進海底隧道的兩只工程隊,開始合龍——然后,也才尷尬地發現——有些視效在設計的時候忽略了動態時候的效果,有些交互則會消耗太多系統資源導致無法平滑過渡。而且在模擬器中看到的效果和實際真機運行還是存在一定差距。

文章翻頁設計中遇到的問題是個典型的例子?,F在文章翻頁是需要即時loading的,為避免誤操作,我們需要用戶拖動移動一定長度后才確認這是翻頁操作。我早期的設計中,圖標翻轉的效果下面還有一句作為噱頭的話。如果你用手指拖動頁面,會先浮現出圖標,下面配上提示文字”再拖??”;如果你繼續拖動頁面,圖標會完整顯示,下面的文字是:”再拖??再拖就是下一篇了哦~”,當用戶拖到程序設定的長度,圖標變紅,然后就翻頁了。

翻頁提示的設計

翻頁提示的設計

實際的情況是這個拖動需要滑動的距離設計得太長了??如果你緊握iPad邊緣用大拇指完成操作,很可能會造成韌帶拉傷。當然,經過實際真機調試后我們決定刪除那些文字,然后問題就解決了。

在Shawn的博文中也提到過,更有效的設計方法,其實應該是界面的視覺設計有個大概以后就應該和交互仿真同時進行并快速迭代,這個時候做設計的不要考慮太多細節上的修飾;做開發的不要著急實現后面的功能——做一個可以運行在真機上的界面原型可以更早地暴露問題并快速改進。

頁碼: 1 2 下一頁

本文鏈接:http://www.casaleticia.com/ipad-tablet-computer-interface-design-and-standardize-the-skills.html
本文標簽: , , ,