DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 交互設計實例:創造設計中的優雅與節奏
交互設計實例:創造設計中的優雅與節奏
編輯:關於網頁技巧     

  首先是跑題的部分,最近聽到“交互設計師的危機”的說法。這個話題已經有了不少討論,比如Cooper上的文章“交互設計前途渺茫”(Alan Cooper,被譽為交互設計之父,見www.cooper.com,它的“concept Projects”我認為是情景應用於設計表達的一個良好范例)。DavidW同學做了翻譯,並有感而發的寫了一些文章如“交互設計師如何提高自己的能力”其中頗具諷刺的語言風格很讓人喜歡。又如Mark Blythe的文章“從鼠標到iPod,設計師之死”,這篇有些文藝性的文章給了我一些關於設計師前途的啟發。


  交互設計師的前途在哪裡?DavidW同學說到,交互設計師沒什麼考核標准。加上所用的工具亂七八糟:十八般觸手可及的東西,就連餐桌上擦嘴的紙巾都可以拿來干活,進一步懷疑那些使用餐巾工作的交互設計師是從餐飲業轉行過來的,頗具諷刺意味,卻也很坦誠。我想門檻過低,必然導致行業認可度不足,專業度不夠,工程師就會把設計師比作美工。這些都值得我們思考,不過一時不至於心灰意冷,Alibaba UED團隊的文章“交互設計師的專業度表現”,在一定程度上解決了交互設計師功課及格的問題,然而看完後讓我更感興趣的是“100分”設計師該如何煉就。

  我想無論Cooper的網站,DavidW,或是Mark Blythe,都試圖給交互設計找出一條前途光明的道路。他們有著各自不同的前瞻性的思考,值得借鑒。我也想借助這個話題,提供一個相對不同的思路,談一談在現有趨勢下如何創造更好的設計以緩解“危機”。

  先看趨勢。Mark Blythe 提到:“早期計算機界面的設計者主要關心一些可測量結果,人們在不同的界面上需要花費多少時間完成一個任務。這樣的問題可以通過觀察和實驗來解決,設計的過程相當的清晰透明。”這讓我想起了網頁設計同學說到的“網頁端的設計需要能讓用戶快速定位目標,點擊,快速響應”。不難發現,其實這個過程的量化最終是解決可用性層面的“效率”“效用”問題,作為基本的設計原則,這些無懈可擊。但值得一提的是,不論浏覽器的框架或是網頁內容本身,這種趨勢正在悄然的發生變化,比如piovt和google wave。他們越來越“App化”。因為長遠考慮,摩爾定律使得關於效率效用的問題越發的退出人們的視線,而當搜索引擎都趨向於快速准確的提供搜索結果;華麗的用戶界面不再是技術門檻之時,傳統的用戶體驗雖然依舊是主旋律,卻有些力不從心。交互怎樣才能助力設計並將其推向一個新的高度?我想主要有兩個方向,其一是新技術的刺激,VR虛擬現實,AR增強現實,TUI可觸界面等等,前一段知名的MIT學生的第六感裝置就是AR 技術的一種變形。另一個方向是提升現有體驗,找出新的設計點。這裡提出我一些自己的體會,我暫時將他們描述為設計中的優雅及節奏。

  舉幾個工業產品的例子來說明。這樣舉例一個原因是我的工業設計專業背景,另外一個是工業產品比信息化產品更早的遇到了可用性的瓶頸,用戶已經不再關心他們的效用,效率。而轉向了更為高層次的需求。從他們身上我們可以試圖尋找到一些提升現有體驗設計的靈感。

  首先是Apple,Apple的設計不論硬件還是軟件上都是業界的領導者,最初認識到它的優雅可以說是從它的呼吸燈開始的,從powerbook g3和ibook起,只要當用戶合上筆記本的時候,位於筆記本前端的睡眠指示燈就會呈呼吸狀的閃動。細細想來,這種親切感仿佛源於人的內心,與其說它是視覺效果不如把它比作成一種共鳴。Apple的這種設計思想貫穿了它產品線的始終。我把它稱為:符合用戶的經典思維。所謂經典思維,可以看作我們成長過程中(或天性中已存在的)認為事物固有的樣子和屬性,一個簡單的例子,物體從A點到B點,經典思維認為它必定經過一個路徑,而不會是在A點消失B點出現。當然如果此時恰好是霧天,那麼它漸漸消失在A點而後在B點漸漸出現也是符合經典思維的。我們再將這個過程細化,從A點到B點,現實世界中的物體必定經歷一個先加速後減速的過程。而不是一上來就有固定的速度。這個感覺有點像拉開一個抽屜。我們先來看看Apple是怎麼做的。我試著著做了一些非常初步的工作。以下是用相機拍攝下來的iPhone短信程序的屏幕切換動畫,將動畫單幀播放,可以得到以下一系列截圖。因為每個單幀畫面的間隔時間相同。我們把每幀變化的結果放到坐標軸上,試著將“優雅”進行一些量化。

  d表示距離,總大小是屏幕的寬度。F是幀數,按30fps這個過程大約0.4秒。我們可以看出,趨勢上是一個先加速後減速的過程,它的背後定對應某一函數曲線,而一般這種運動曲線可以應用三角函數sin實現,但這裡它更像是sin的平方根(這個猜測應該不准確,還請了解iPhone SDK的同學指正)。

  如果以上可以作為iPhone體驗上優雅的一個點,那麼iPhone優秀的體驗就是有這些點交織出的平面。我們將這部分工作更進一步,來看一下iPhone的主界面交互。iPhone的主界面模擬了一個有彈簧卡扣裝置的物理表面。(想象每個屏幕後方都是一個半圓形凸起,有一個帶彈簧的探針壓在兩個屏幕中間的縫隙上)。它最大限度的貼近物理世界,去符合我們的經典思維。

  延伸一點,如果你是Apple的交互設計師,會怎樣定義iPhone主界面的交互呢?“跟隨手指運動,左右滑動切換屏幕,邊緣處反彈”。如果是這樣的命題,我想工程師不可能做出我們今天可以感受到的Apple的用戶體驗。我們排除掉點擊圖標,調整位置等等交互點,單就手指切換屏幕一個操作來說:首先手指觸及屏幕,看上去屏幕會同步跟隨手指移動,這並不准確,實際上手指移動了一定距離後屏幕才開始隨動(有iPhone的同學可以試用一下,android同理),這個距離在2mm左右,而後,左右滑動,滑動就會切屏?也不盡然,要看手指離開屏幕時的瞬時速度,大於一個值會切換,此時屏幕按釋放時的速度加一個摩擦力繼續向前,到達邊緣反彈。如果小於這個值(靜止釋放時瞬時速度是0,也在此情況之中)要看當前拖動的屏幕是否超過屏幕寬度的二分之一,超過切屏,沒超過彈回,此時都是在釋放速度之上添加加一個加速度,到達邊緣返回。另外還要考慮在兩個最外側屏幕操作時行為有什麼不同,以及釋放後屏幕仍在運動中時再次操作的屏幕行為。想必真正列下來將會是一個相當復雜的流程圖。端木說到,他在Apple工作時並沒有交互設計師這個職位,工程師做了絕大部分工作,我們便越發的清楚原因在哪裡。

  沒有時間去做iPhone的界面模擬,但先前我用AS3模擬了Hero主界面的一些行為,以下視頻可以作為參考,其中圖形界面是由BLIZZARD同學完成的。請見以下視頻:

http://cgi.video.qq.com/v1/videopl?v=6OyBwxNBkSj

  接下來說一下Bang&Olufsen這家丹麥世界級視聽品牌給我的啟發,macbook pro 右側是B&O BeoCenter2 cd播放機,發燒友一定對它耳熟能詳。輕按一下,它光滑的橢圓形表面會展開成兩翼,上蓋張開,cd抬起,仿佛我們記憶中某種靈異的生物。審視它的優雅,我們會發現:效率不再是優先元素,而儀式感被大大提前了。就純粹的可用性而言,它比不過一般的cd機,而它的體驗更多的集中在它的儀式感之上。相比Apple這種大眾產品所具有的優雅,我把B&O歸結為小眾的優雅,因為它可以拋棄效率,並不適用於所有人,感覺這種優雅可以應用於我們設計的高端應用當中。工業產品的元素也許不容易應用到我們現在的工作上,還好B&O同樣提供了一個與其產品風格類似的播放器BeoPlayer,有興趣的同學可以下載來試用,體驗一下B&O式的優雅。希望也能從中得到一些靈感。在設計高端應用時,回憶一下B&O的儀式感。

  提到Muji CD機,不得不說到深澤直人(Muji CD機的設計者,也是我最喜歡的設計師之一)CDC博客關於深澤直人的一篇轉載文章“意識的核心”讓我們看到了一個真正的設計師式的思考,在這裡,拋開Muji CD機極具創意的外形來看它的播放過程。它只有一個向下拉的操作,極致簡單的設計美學。另一方面它,打開開關,它並不會立即啟動,而是間隔一下,音樂隨即開始,設計師仿佛在營造一種聲音從遠方傳來的意境,親切而舒適。我想這就是節奏的一個表象,實際上這種稍顯延遲的設計也同樣出現在07 iPhone發布時的一個場景,Jobs聽著音樂而此時他的同事打來電話,音樂緩慢落下轉換為鈴聲,到通話結束,一個小的間隔之後,音樂響起。類比前面的兩個例子。Muji CD機的,功能會讓位於設計,如將曲目切換,音量調節被放置在不方便操作的位置,這種強調設計意志的產品有時會給人一些設計師孤芳自賞的感覺,所以可以將這種優雅比作是設計師式的優雅,當我們的團隊有了足夠和行業領導力以及頂尖的設計水平之時,便可以嘗試用這種設計師式的優雅去引領潮流。

  順應了趨勢,找到了新的設計點,可設計師的核心競爭力還是沒有解決,用戶體驗得到重視的結果就是老板,工程師都過來做交互設計,交互設計師怎麼辦?既然大家都來搶飯碗,那我們也主動出擊好了,這雖然是調侃的說法,但卻是我能給出的最切實的建議。這一點啟發源於我以前的同事及前輩劉穎,在解決產品團隊協同的問題上,她給出了我認為最合理的的方案:去了解團隊中各個角色所作的工作,交互設計處於產品鏈條的最中央,就更有義務去做好這樣的工作,試著做一些用戶研究,試著做一些開發工作,一有助於自身專業能力的認可,二有利於提高團隊效率。當交互設計師成長為中堅力量之時,前途必然一片光明。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved