iPad界面設(shè)計(jì)案例-圖文

在這里分享一篇《牛壹周》設(shè)計(jì)過程，也許設(shè)計(jì)師和產(chǎn)品經(jīng)理們看了會(huì)更有共鳴。一、學(xué)習(xí)iPad出來不久，我們便覺得這樣的神器簡(jiǎn)直就是為用戶體驗(yàn)設(shè)計(jì)而生——精致的顯示，優(yōu)秀的交互，簡(jiǎn)單的操作，讓使用沒有門檻，充滿無限可能——于是我們決定進(jìn)軍這個(gè)陌生的領(lǐng)域。學(xué)習(xí)是第一步，于是有人開始看Stanford的視頻教程，有人開始安裝xCode，有人開始研究HTML5，而我，則開始學(xué)習(xí)蘋果4月3號(hào)出的那份官方指南《iPadHumanInterfaceGuidelines》。6月27號(hào)的成都UCD書友會(huì)，官方主題正好是《移動(dòng)設(shè)備的交互和設(shè)計(jì)》，于是我把前一陣子的學(xué)習(xí)的心得和領(lǐng)悟做了份演示文稿，跟參會(huì)的書友們進(jìn)行了分享和交流。iPad用戶體驗(yàn)設(shè)計(jì)指導(dǎo)性原則在這份文檔里，蘋果提出了幾個(gè)重要的設(shè)計(jì)原則。首先，在iPad上側(cè)重的是內(nèi)容和交互，而不是UI。作為設(shè)計(jì)師，幾乎我們本能的就會(huì)醉心于一些華麗的UI界面而忘了用戶本身是來干什么的。為了讓用戶關(guān)注內(nèi)容本身并在交互的過程中盡量少受干擾，所以我們需要淡化程序UI，弱化界面控件、讓信息更扁平化(讓上下層級(jí)可以在同一界面中自如切換，限制一個(gè)視圖內(nèi)的任務(wù)復(fù)雜度、淡化文件管理、使用最少的模態(tài)對(duì)話框、只有在需要時(shí)才提醒用戶??然后，是內(nèi)容形式上富有真實(shí)感。iPad上自帶的iBooks、Note以及GoogleMap都是很好的例子。蘋果給出的解釋是：程序顯示和現(xiàn)實(shí)生活越相似，用戶就越容易理解、操作并喜歡。可以使用動(dòng)畫進(jìn)一步增強(qiáng)真實(shí)感覺，東縱的真實(shí)感比外觀更為重要，要符合物理規(guī)律。最后，是充分利用設(shè)備性能和特性。iPad是今年1月27號(hào)才發(fā)布的全新設(shè)備，除了具有普通數(shù)碼設(shè)備的硬件指標(biāo)和性能參數(shù)之外，還具有很多諸如重力和加速度感應(yīng)、多點(diǎn)觸控、手勢(shì)識(shí)別等人機(jī)交互新特性。如何把這些交互手段通過設(shè)計(jì)結(jié)合到你的作品中，會(huì)是個(gè)有趣的挑戰(zhàn)?？傊?，上帝的歸上帝，凱撒的歸凱撒。二、設(shè)計(jì)牛博網(wǎng)閱讀器的想法，6月初就提出來了，但要做成什么樣子，大家腦子里還是一片混沌。6月12號(hào)，競(jìng)總出了份iPad牛博網(wǎng)閱讀器低保真模型，有橫板和豎版兩種模式。它看起來有些象網(wǎng)頁，又有些象RSS閱讀器，還有些象iPad上的Mail程序——大家都是菜鳥，看到這樣的設(shè)計(jì)，也無法判斷這樣的設(shè)計(jì)到底是好，還是壞。后來因?yàn)槠渌?xiàng)目上的事情一忙，這份原型也就沉沒了。競(jìng)總的設(shè)計(jì)原型概覽6月底的時(shí)候，我開始著手設(shè)計(jì)。因?yàn)楸旧砭褪窃O(shè)計(jì)師，視效上沒有障礙，涉及的頁面也不是很多，所以一開始就在PS下面畫圖了。網(wǎng)站設(shè)計(jì)多了，一上來還是傳統(tǒng)思路在作祟，結(jié)果才設(shè)計(jì)了個(gè)開頭就茫然了：心想如果設(shè)計(jì)成這個(gè)樣子，還不如人家直接在iPad上用Safari瀏覽器打開牛博網(wǎng)來看呢??用做網(wǎng)站的思路來設(shè)計(jì)iPad應(yīng)用完全是死路一條好吧，摒棄網(wǎng)站思路，做減法后我設(shè)計(jì)了目錄頁和內(nèi)文頁，設(shè)想應(yīng)該有按文章索引、按人物索引、RSS訂閱和設(shè)置這些功能??顯然，這是個(gè)平庸的設(shè)計(jì)，但其實(shí)沒關(guān)系，很多東西都是這樣，剛開始的時(shí)候很糗，但至少有了討論的基礎(chǔ)。第一版目錄頁第一版內(nèi)文頁團(tuán)隊(duì)的DailyMeeting上，大家給了很多好的建議。S拿出一本《南方人物周刊》，說其實(shí)應(yīng)該做成這個(gè)樣子——首先，它應(yīng)該是一本雜志，閱讀習(xí)慣上應(yīng)該象在閱讀一本書而不是瀏覽一個(gè)網(wǎng)站;然后，它應(yīng)該是一本期刊，時(shí)效性比書本高，但比網(wǎng)站和blog低;內(nèi)容質(zhì)量和閱讀體驗(yàn)和書相當(dāng)，比網(wǎng)站有更多的個(gè)性，更少的噪音。有了這個(gè)定位，設(shè)計(jì)也就有了方向，牛讀器從此變成了《牛壹周》，開始有了典型的雜志封面，開始有了內(nèi)文的兩欄設(shè)計(jì)，交互上也去掉了縱向滾屏而采用了橫向翻頁。第二版封面(我們團(tuán)隊(duì)簡(jiǎn)稱CCW，于是戲稱自己是山寨傳媒CCVV目錄頁設(shè)計(jì)第二版內(nèi)文頁設(shè)計(jì)第二版在視效框架基本定型，代碼上的難點(diǎn)也基本突破的時(shí)候，我和Shawn就好象分別從兩頭開始掘進(jìn)海底隧道的兩只工程隊(duì)，開始合龍——然后，也才尷尬地發(fā)現(xiàn)——有些視效在設(shè)計(jì)的時(shí)候忽略了動(dòng)態(tài)時(shí)候的效果，有些交互則會(huì)消耗太多系統(tǒng)資源導(dǎo)致無法平滑過渡。而且在模擬器中看到的效果和實(shí)際真機(jī)運(yùn)行還是存在一定差距。文章翻頁設(shè)計(jì)中遇到的問題是個(gè)典型的例子?，F(xiàn)在文章翻頁是需要即時(shí)loading的，為避免誤操作，我們需要用戶拖動(dòng)移動(dòng)一定長(zhǎng)度后才確認(rèn)這是翻頁操作。我早期的設(shè)計(jì)中，圖標(biāo)翻轉(zhuǎn)的效果下面還有一句作為噱頭的話。如果你用手指拖動(dòng)頁面，會(huì)先浮現(xiàn)出圖標(biāo)，下面配上提示文字“再拖??”;如果你繼續(xù)拖動(dòng)頁面，圖標(biāo)會(huì)完整顯示，下面的文字是：“再拖??再拖就是下一篇了哦～”，當(dāng)用戶拖到程序設(shè)定的長(zhǎng)度，圖標(biāo)變紅，然后就翻頁了。翻頁提示的設(shè)計(jì)實(shí)際的情況是這個(gè)拖動(dòng)需要滑動(dòng)的距離設(shè)計(jì)得太長(zhǎng)了??如果你緊握iPad邊緣用大拇指完成操作，很可能會(huì)造成韌帶拉傷。當(dāng)然，經(jīng)過實(shí)際真機(jī)調(diào)試后我們決定刪除那些文字，然后問題就解決了。在Shawn的博文中也提到過，更有效的設(shè)計(jì)方法，其實(shí)應(yīng)該是界面的視覺設(shè)計(jì)有個(gè)大概以后就應(yīng)該和交互仿真同時(shí)進(jìn)行并快速迭代，這個(gè)時(shí)候做設(shè)計(jì)的不要考慮太多細(xì)節(jié)上的修飾;做開發(fā)的不要著急實(shí)現(xiàn)后面的功能——做一個(gè)可以運(yùn)行在真機(jī)上的界面原型可以更早地暴露問題并快速改進(jìn)。三、細(xì)節(jié)神在細(xì)節(jié)間，魔鬼也是。團(tuán)隊(duì)奉行37教(我們喜歡37這種精悍的團(tuán)隊(duì)，行事原則就是GetingReal，不過這也讓我們?cè)诳焖俚泻茈y做到細(xì)節(jié)的盡善盡美。就拿牛一周的圖標(biāo)來說吧。7月8號(hào)的時(shí)候，Shawn說：“妖怪，給我個(gè)牛一周的icon吧，我要72X72和256X256兩種大小?！庇谑俏已杆俚厣秸艘粋€(gè)(好吧，你沒猜錯(cuò)，克隆的原型是NBA的芝加哥公牛隊(duì)LOGO，然后繼續(xù)其他的設(shè)計(jì)。費(fèi)總說：Ei~看起來怎么這么眼熟呢?等到7月10號(hào)比較空閑的時(shí)候，我花了些時(shí)間來做icon的精細(xì)化設(shè)計(jì)——在Illustrator下拉漸變網(wǎng)格，并嘗試各種造型組合。當(dāng)大家看到那個(gè)魔爪版的時(shí)候，Mak說：“牛長(zhǎng)的不是蹄子么??”小龍?zhí)嫖医忉尩溃骸把偖嫷钠鋵?shí)是大菠蘿(Diablo?！薄杜Ｒ贾堋穒cons不同版本嘗試牛壹周icon定妝照那幾天正好在看《獨(dú)唱團(tuán)》，用手在封面的牛皮紙和微微泛黃的內(nèi)文紙上摩挲，感覺很有feel——想到iPad設(shè)計(jì)指導(dǎo)中所提到的“內(nèi)容形式上富有真實(shí)感”的設(shè)計(jì)原則，就在封底和內(nèi)頁分別加上了牛皮紙和新聞紙的質(zhì)感。Loading頁和封底內(nèi)文頁設(shè)計(jì)第三版為了讓人有場(chǎng)景代入的真實(shí)感，讓人覺得這就是一本雜志，我也改進(jìn)了橫屏?xí)r的設(shè)計(jì)——修改前兩邊多出的部分本來只是個(gè)背景平鋪;改進(jìn)后加入了桌面、臺(tái)布和咖啡杯——就好象在家，用一本雜志，享受一個(gè)很愜意的下午。封面豎屏設(shè)計(jì)早期的封面橫屏設(shè)計(jì)，只是簡(jiǎn)單的旋轉(zhuǎn)縮放然后居中修改后的設(shè)計(jì)，增強(qiáng)了場(chǎng)景代入感如果你在內(nèi)文頁輕輕點(diǎn)擊一下，下面會(huì)推出一列Preview縮略圖。這個(gè)部分的設(shè)計(jì)其實(shí)也費(fèi)了一番思量和討論，團(tuán)隊(duì)內(nèi)部爭(zhēng)論也比較激烈。最早的想法是拿作者的頭像作為索引，一來這樣區(qū)分度比較明顯，二來其實(shí)我們最關(guān)注的還是人本身。最早的效果，也不過是在下面浮上來一個(gè)半透明的層，然后顯示人像照片。第二版的預(yù)覽模式設(shè)計(jì)后來我們覺得對(duì)于我們這樣的牛博網(wǎng)老用戶來說把人和文章對(duì)應(yīng)起來不是問題，但對(duì)于一些普通讀者來說就是會(huì)比較困惑——他要跳轉(zhuǎn)到自己喜歡的文章，先要把人頭像翻譯成自己對(duì)應(yīng)喜歡的文章或風(fēng)格，這里面經(jīng)歷了一次邏輯轉(zhuǎn)換，會(huì)降低成功率。如果他恰好不認(rèn)識(shí)這位作者，那么失敗率更高。而小的縮略圖雖然可能看不清標(biāo)題和內(nèi)容，但是原樣復(fù)制了色彩和版式，讓人很容易形成視覺上的一一對(duì)應(yīng)。于是我們改成了整個(gè)雜志的界面上推，然后在下面的餐臺(tái)布上顯示預(yù)覽縮略，為了讓你的目光聚焦在這個(gè)區(qū)域，我們?cè)陬A(yù)覽浮出的時(shí)候，把上面主體的部分作了暗化——這就象有點(diǎn)物理基礎(chǔ)的科幻片，讓你感覺真實(shí)，但也有點(diǎn)超現(xiàn)實(shí)。改進(jìn)后的預(yù)覽設(shè)計(jì)如果你再細(xì)心一點(diǎn)，會(huì)發(fā)現(xiàn)不同文章的縮略，厚度是不一樣的——有些是單頁，有些則疊了一兩頁——這樣的設(shè)計(jì)是我們想用不同的厚度來提示讀者這篇文章的長(zhǎng)度——如果你覺得它太長(zhǎng)就可以放棄。進(jìn)入文章后，則會(huì)用蘋果通用的圓點(diǎn)來表示一共有幾頁和你當(dāng)前在第幾頁。提示用戶不同文章的長(zhǎng)度以及現(xiàn)在讀到了當(dāng)前文章的第幾頁不管怎么說，簡(jiǎn)潔是我們?cè)O(shè)計(jì)的第一法則。我們不希望看到任何多余的按鈕，也沒有教程，希望你一上手通過簡(jiǎn)單的嘗試就知道該怎么做——為了達(dá)到這個(gè)目標(biāo)，