人機

iPad擬物化設計的博弈

字號+ 作者/錄入:3d3d 來源:tencent 2010-04-20 [在線反饋] 我要評論

320X480是iPhone的屏幕分辨率,而1024X768是新發布的平板設備iPad的屏幕分辨率。憑著這組分辨率的變化以及初窺iPad的外觀,會feeliPad可是只“放大版”的iPad touch,一致的做工藝,連“Home”鍵未做調節原封不動擺在了屏幕下方,似乎又被“戲謔”了一把。

320X480是iPhone的屏幕分辨率,而1024X768是新發布的平板設備iPad的屏幕分辨率。憑著這組分辨率的變化以及初窺iPad的外觀,會feeliPad可是只“放大版”的iPad touch,一致的做工藝,連“Home”鍵未做調節原封不動擺在了屏幕下方,似乎又被“戲謔”了一把。LeB大灣區工業設計網
 LeB大灣區工業設計網

LeB大灣區工業設計網

1024X768 VS 320X480LeB大灣區工業設計網
  320X480是iPhone的屏幕分辨率,而1024X768是新發布的平板設備iPad的屏幕分辨率。憑著這組分辨率的變化以及初窺iPad的外觀,會感覺iPad可是只“放大版”的iPad touch,一致的做工藝,連“Home”鍵未做調節原封不動擺在了屏幕下方,似乎又被“戲謔”了一把。然而深入到界面設計的變化,iPad程序的界面并未做輕易的放大處理(如下圖:iPhone和iPad上日歷軟件界面的對比)LeB大灣區工業設計網
LeB大灣區工業設計網
LeB大灣區工業設計網

  相同是日歷軟件,iPad上日歷程序通過紙張肌理,布局調整等變化,整體給人的視覺印象是一本可翻動的“記事本”。相同類似的擬物化設計被大范圍運用到iPad程序上,給界面帶來了全新的面貌和革新。談起擬物化界面設計,一直有在使用,而且伴隨著圖形化界面的產生發展過程,諸如界面圖形語意,質感,肌理都是擬物化的體現,一最輕易直白的例子就是按鈕往往被設計成中間凸起的樣子去引導用戶去“按”。LeB大灣區工業設計網

 LeB大灣區工業設計網

iPhone/iPad界面的空間感LeB大灣區工業設計網
  廣義地說,整個iPhoneOS也是被擬物的,觸摸屏幕是平,但我們從觸摸屏看到是凹凸有致的一桌面世界,或者說更像是一房間(如下圖),這個房間有一套自己光照系統。延續Macos界面的光源系統,主光源是垂直方向90度的光照,它決定了這個空間里物體的陰影方向、倒影、反光面等等;LeB大灣區工業設計網

 LeB大灣區工業設計網

LeB大灣區工業設計網

 當中不得不提房間中的物體-桌面圖標,這些圓角小方塊起到了很重要的角色。相比一般操作系統桌圖標處理方式的五花八門。iPhone os為了統一各圖標風格,下了“狠招”:統一圓角化處理,垂直90度陰影,還有頭部一道反射高光。而這些樣式默認是通過程序來強制實現的,這樣也就看到了具有相對統一光照環境的房間。由于這些樣式是默認開啟的,這樣也就方便了一般開發者花少量的功夫就能讓程序擁有相對美觀的程序圖標,(附注:當然你實在feel應該讓自己的程序圖標不同凡響,也是可自定義樣式的。具體見iPhone人機界面指南如何自定義桌面圖標章節。)iPhoneOS這套光照系統的影響是無處不在的(在運行Apple平臺相關設計時務必留意:)),這里抓個實際例子-按鈕中的文字效果:淺色和深色按鈕,在里面文字的處理效果是不一樣的,統一的是文字是被凹刻在按鈕上的。在淺色按鈕上,文字90度向下方向有一道白色反光;而在深色按鈕上,文字90度向上方向有一道陰影。對比如下圖:LeB大灣區工業設計網

LeB大灣區工業設計網

 LeB大灣區工業設計網

擬物到擬真LeB大灣區工業設計網
  相同使用的是iPhoneOS,iPad在擬物化設計上表現的更強烈,更使用了擬真的動畫過程,一典型的例子即是iBook程序的使用,模擬了用戶從書架上選取一本書,打開書本,閱讀文字,翻動頁碼…整個過程隨意自然。iPad不是“變形金剛”,受到本身硬件的局限,它不能真的變成一本書來翻閱,而可通過軟件的優勢來解決硬件上的這個局限,使用虛擬的操作體驗來縮小閱讀體驗的差異。日常生活已經積累了大量的使用操作習慣,擬物化可方便的運行體驗移植,一看到界面,就知道大約該怎么用了。LeB大灣區工業設計網

 LeB大灣區工業設計網

IM如何擬物?LeB大灣區工業設計網
  在實際QQforiPad版本的界面設計中,一開始的疑問就是,可聯系到IM聊天軟件的實際物體是什么?把聊天記錄作為文字材料積累下來,可做成一本回憶錄,這倒也是一種擬物,但有時即時通訊強調的卻是即時聊天的過程,做成一本回憶錄還有待商榷,前期也只是以概念稿子做了嘗試;在最終浮出水面的主界面設計中,為了營造相對愜意的聊天環境,在細節處理上運行了一些擬物嘗試,例如聊天的多tab,保留了常用書本標簽方式;發送相片時相片的邊框處理使相片更像是呈這個時候面前的照片等。如下圖:QQ for iPad版本的主界面設計LeB大灣區工業設計網

LeB大灣區工業設計網

擬物與現實LeB大灣區工業設計網
  相信隨著多點觸摸技術的發展以及大觸摸屏相關產品的面世,擬物化的設計會被運用得更廣,但同時應該保留一種清醒:不管如何的擬物,虛擬的體驗終究還是來源于真實生活的實際體驗的積累。傳統書籍到這個時候還被保留,也是有一定存在的道理:)LeB大灣區工業設計網

參考文獻:蘋果iPhone人機界面設計指南在線版LeB大灣區工業設計網
http://developer.apple.com/iPhone/library/documentation/UserExperience/Conceptual/MobileHIG/LeB大灣區工業設計網

  文  /  茂哥

轉載請注明出處。

轉載此文是出于傳遞更多信息之目的。若有來源標注錯誤或侵犯了您的合法權益,請作者持權屬證明與本網聯系,我們將及時更正、刪除,謝謝。

相關文章
網友點評
排列三走势 云南时时彩走势图表 13271排列5开奖结果 浙江十一选五开奖历史 11选5无死角每期必中 北京快三开奖预测 吉林11选5开奖结果爱乐彩 重庆幸运农场定胆计划 有15万存款怎么理财 江西快3走势图360 山东11选5遗漏号 一分钟一开的快3平台 福建快3网上买 福建11选5百度 湖南赛车今日开奖结果 2018活期理财排名 辽宁体彩11选五一天多少期