iPad擬物化設(shè)計的博弈
1024X768 VS 320X480
320X480是iPhone的屏幕分辨率,而1024X768是新發(fā)布的平板設(shè)備iPad的屏幕分辨率。憑著這組分辨率的變化以及初窺iPad的外觀,會覺得iPad不過是只“放大版”的iPod-touch,一致的制作工藝,連“Home”鍵未做改變原封不動擺在了屏幕下方,似乎又被“戲謔”了一把。然而深入到界面設(shè)計的變化,iPad程序的界面并未做簡單的放大處理(如下圖:iPhone和iPad上日歷軟件界面的對比)
同樣是日歷軟件,iPad上日歷程序通過紙張肌理,布局調(diào)整等變化,整體給人的視覺印象是一本可以翻動的“記事本”。同樣類似的擬物化設(shè)計被大范圍運用到iPad程序上,給界面帶來了全新的面貌和革新。談起擬物化界面設(shè)計,一直有在使用,而且伴隨著圖形化界面的產(chǎn)生發(fā)展過程,諸如界面圖形語意,質(zhì)感,肌理都是擬物化的體現(xiàn),一個最簡單直白的例子就是按鈕往往被設(shè)計成中間凸起的樣子去引導(dǎo)用戶去“按”。
iPhone/iPad界面的空間感
廣義地說,整個iPhoneOS也是被擬物的,觸摸屏幕是平,但我們從觸摸屏看到是凹凸有致的一個桌面世界,或者說更像是一個房間(如下圖),這個房間有一套自己光照系統(tǒng)。延續(xù)Macos界面的光源系統(tǒng),主光源是垂直方向90度的光照,它決定了這個空間里物體的陰影方向、倒影、反光面等等;
當(dāng)中不得不提房間中的物體-桌面圖標(biāo),這些圓角小方塊起到了很重要的角色。相比一般操作系統(tǒng)桌圖標(biāo)處理方式的五花八門。iPhone os為了統(tǒng)一各圖標(biāo)風(fēng)格,下了“狠招”:統(tǒng)一圓角化處理,垂直90度陰影,還有頭部一道反射高光。而這些樣式默認(rèn)是通過程序來強制實現(xiàn)的,這樣也就看到了具有相對統(tǒng)一光照環(huán)境的房間。由于這些樣式是默認(rèn)開啟的,這樣也就方便了一般開發(fā)者花少量的功夫就能讓程序擁有相對美觀的程序圖標(biāo),(附注:當(dāng)然你實在覺得應(yīng)該讓自己的程序圖標(biāo)不同凡響,也是可以自定義樣式的。具體見iPhone人機界面指南如何自定義桌面圖標(biāo)章節(jié)。)iPhoneOS這套光照系統(tǒng)的影響是無處不在的(在進(jìn)行Apple平臺相關(guān)設(shè)計時務(wù)必留意:)),這里抓個實際例子-按鈕中的文字效果:淺色和深色按鈕,在里面文字的處理效果是不一樣的,統(tǒng)一的是文字是被凹刻在按鈕上的。在淺色按鈕上,文字90度向下方向有一道白色反光;而在深色按鈕上,文字90度向上方向有一道陰影。對比如下圖:
擬物到擬真
同樣使用的是iPhoneOS,iPad在擬物化設(shè)計上表現(xiàn)的更強烈,更使用了擬真的動畫過程,一個典型的例子即是iBook程序的使用,模擬了用戶從書架上選取一本書,打開書本,閱讀文字,翻動頁碼…整個過程隨意自然。iPad不是“變形金剛”,受到本身硬件的局限,它不能真的變成一本書來翻閱,而可以通過軟件的優(yōu)勢來解決硬件上的這個局限,使用虛擬的操作體驗來縮小閱讀體驗的差異。日常生活已經(jīng)積累了大量的使用操作習(xí)慣,擬物化可以方便的進(jìn)行體驗移植,一看到界面,就知道大致該怎么用了。
IM如何擬物?
在實際QQforiPad版本的界面設(shè)計中,一開始的疑問就是,可以聯(lián)系到IM聊天軟件的實際物體是什么?把聊天記錄作為文字材料積累下來,可以做成一本回憶錄,這倒也是一種擬物,但有時即時通訊強調(diào)的卻是即時聊天的過程,做成一本回憶錄還有待商榷,前期也只是以概念稿子做了嘗試;在最終浮出水面的主界面設(shè)計中,為了營造相對愜意的聊天環(huán)境,在細(xì)節(jié)處理上進(jìn)行了一些擬物嘗試,例如聊天的多tab,保留了常用書本標(biāo)簽方式;發(fā)送圖片時圖片的邊框處理使圖片更像是呈現(xiàn)在面前的照片等。如下圖:QQ for iPad版本的主界面設(shè)計
擬物與現(xiàn)實
相信隨著多點觸摸技術(shù)的發(fā)展以及大觸摸屏相關(guān)產(chǎn)品的面世,擬物化的設(shè)計會被運用得更廣,但同時應(yīng)該保留一種清醒:不管如何的擬物,虛擬的體驗終究還是來源于真實生活的實際體驗的積累。傳統(tǒng)書籍到現(xiàn)在還被保留,也是有一定存在的道理:)
參考文獻(xiàn):蘋果iPhone人機界面設(shè)計指南在線版
http://developer.apple.com/iPhone/library/documentation/UserExperience/Conceptual/MobileHIG/
來源:http://cdc.tencent.com/?p=2418
- 目前還沒評論,等你發(fā)揮!