建站常識
創(chuàng)造設(shè)計中的優(yōu)雅與節(jié)奏
2010-04-10 21:49:00
首先是跑題的部分,最近聽到“交互設(shè)計師的危機”的說法。這個話題已經(jīng)有了不少討論,比如Cooper上的文章“交互設(shè)計前途渺?!保ˋlan Cooper,被譽為交互設(shè)計之父,它的“concept Projects”我認(rèn)為是情景應(yīng)用于設(shè)計表達的一個良好范例)。DavidW同學(xué)做了翻譯,并有感而發(fā)的寫了一些文章如“交互設(shè)計師如何提高自己的能力”其中頗具諷刺的語言風(fēng)格很讓人喜歡。又如Mark Blythe的文章“從鼠標(biāo)到iPod,設(shè)計師之死”,這篇有些文藝性的文章給了我一些關(guān)于設(shè)計師前途的啟發(fā)。
交互設(shè)計師的前途在哪里?DavidW同學(xué)說到,交互設(shè)計師沒什么考核標(biāo)準(zhǔn)。加上所用的工具亂七八糟:十八般觸手可及的東西,就連餐桌上擦嘴的紙巾都可以拿來干活,進一步懷疑那些使用餐巾工作的交互設(shè)計師是從餐飲業(yè)轉(zhuǎn)行過來的,頗具諷刺意味,卻也很坦誠。我想門檻過低,必然導(dǎo)致行業(yè)認(rèn)可度不足,專業(yè)度不夠,工程師就會把設(shè)計師比作美工。這些都值得我們思考,不過一時不至于心灰意冷,Alibaba UED團隊的文章“交互設(shè)計師的專業(yè)度表現(xiàn)”,在一定程度上解決了交互設(shè)計師功課及格的問題,然而看完后讓我更感興趣的是“100分”設(shè)計師該如何煉就。
我想無論Cooper的網(wǎng)站,DavidW,或是Mark Blythe,都試圖給交互設(shè)計找出一條前途光明的道路。他們有著各自不同的前瞻性的思考,值得借鑒。我也想借助這個話題,提供一個相對不同的思路,談一談在現(xiàn)有趨勢下如何創(chuàng)造更好的設(shè)計以緩解“危機”。
先看趨勢。Mark Blythe 提到:“早期計算機界面的設(shè)計者主要關(guān)心一些可測量結(jié)果,人們在不同的界面上需要花費多少時間完成一個任務(wù)。這樣的問題可以通過觀察和實驗來解決,設(shè)計的過程相當(dāng)?shù)那逦该??!边@讓我想起了網(wǎng)頁設(shè)計同學(xué)說到的“網(wǎng)頁端的設(shè)計需要能讓用戶快速定位目標(biāo),點擊,快速響應(yīng)”。不難發(fā)現(xiàn),其實這個過程的量化最終是解決可用性層面的“效率”“效用”問題,作為基本的設(shè)計原則,這些無懈可擊。但值得一提的是,不論瀏覽器的框架或是網(wǎng)頁內(nèi)容本身,這種趨勢正在悄然的發(fā)生變化,比如piovt和google wave。他們越來越“App化”。因為長遠考慮,摩爾定律使得關(guān)于效率效用的問題越發(fā)的退出人們的視線,而當(dāng)搜索引擎都趨向于快速準(zhǔn)確的提供搜索結(jié)果;華麗的用戶界面不再是技術(shù)門檻之時,傳統(tǒng)的用戶體驗雖然依舊是主旋律,卻有些力不從心。交互怎樣才能助力設(shè)計并將其推向一個新的高度?我想主要有兩個方向,其一是新技術(shù)的刺激,VR虛擬現(xiàn)實,AR增強現(xiàn)實,TUI可觸界面等等,前一段知名的MIT學(xué)生的第六感裝置就是AR 技術(shù)的一種變形。另一個方向是提升現(xiàn)有體驗,找出新的設(shè)計點。這里提出我一些自己的體會,我暫時將他們描述為設(shè)計中的優(yōu)雅及節(jié)奏。
舉幾個工業(yè)產(chǎn)品的例子來說明。這樣舉例一個原因是我的工業(yè)設(shè)計專業(yè)背景,另外一個是工業(yè)產(chǎn)品比信息化產(chǎn)品更早的遇到了可用性的瓶頸,用戶已經(jīng)不再關(guān)心他們的效用,效率。而轉(zhuǎn)向了更為高層次的需求。從他們身上我們可以試圖尋找到一些提升現(xiàn)有體驗設(shè)計的靈感。
首先是Apple,Apple的設(shè)計不論硬件還是軟件上都是業(yè)界的領(lǐng)導(dǎo)者,最初認(rèn)識到它的優(yōu)雅可以說是從它的呼吸燈開始的,從powerbook g3和ibook起,只要當(dāng)用戶合上筆記本的時候,位于筆記本前端的睡眠指示燈就會呈呼吸狀的閃動。細細想來,這種親切感仿佛源于人的內(nèi)心,與其說它是視覺效果不如把它比作成一種共鳴。Apple的這種設(shè)計思想貫穿了它產(chǎn)品線的始終。我把它稱為:符合用戶的經(jīng)典思維。所謂經(jīng)典思維,可以看作我們成長過程中(或天性中已存在的)認(rèn)為事物固有的樣子和屬性,一個簡單的例子,物體從A點到B點,經(jīng)典思維認(rèn)為它必定經(jīng)過一個路徑,而不會是在A點消失B點出現(xiàn)。當(dāng)然如果此時恰好是霧天,那么它漸漸消失在A點而后在B點漸漸出現(xiàn)也是符合經(jīng)典思維的。我們再將這個過程細化,從A點到B點,現(xiàn)實世界中的物體必定經(jīng)歷一個先加速后減速的過程。而不是一上來就有固定的速度。這個感覺有點像拉開一個抽屜。我們先來看看Apple是怎么做的。我試著著做了一些非常初步的工作。以下是用相機拍攝下來的iPhone短信程序的屏幕切換動畫,將動畫單幀播放,可以得到以下一系列截圖。因為每個單幀畫面的間隔時間相同。我們把每幀變化的結(jié)果放到坐標(biāo)軸上,試著將“優(yōu)雅”進行一些量化。
#p#
d表示距離,總大小是屏幕的寬度。F是幀數(shù),按30fps這個過程大約0.4秒。我們可以看出,趨勢上是一個先加速后減速的過程,它的背后定對應(yīng)某一函數(shù)曲線,而一般這種運動曲線可以應(yīng)用三角函數(shù)sin實現(xiàn),但這里它更像是sin的平方根(這個猜測應(yīng)該不準(zhǔn)確,還請了解iPhone SDK的同學(xué)指正)。
如果以上可以作為iPhone體驗上優(yōu)雅的一個點,那么iPhone優(yōu)秀的體驗就是有這些點交織出的平面。我們將這部分工作更進一步,來看一下iPhone的主界面交互。iPhone的主界面模擬了一個有彈簧卡扣裝置的物理表面。(想象每個屏幕后方都是一個半圓形凸起,有一個帶彈簧的探針壓在兩個屏幕中間的縫隙上)。它最大限度的貼近物理世界,去符合我們的經(jīng)典思維。
延伸一點,如果你是Apple的交互設(shè)計師,會怎樣定義iPhone主界面的交互呢?“跟隨手指運動,左右滑動切換屏幕,邊緣處反彈”。如果是這樣的命題,我想工程師不可能做出我們今天可以感受到的Apple的用戶體驗。我們排除掉點擊圖標(biāo),調(diào)整位置等等交互點,單就手指切換屏幕一個操作來說:首先手指觸及屏幕,看上去屏幕會同步跟隨手指移動,這并不準(zhǔn)確,實際上手指移動了一定距離后屏幕才開始隨動(有iPhone的同學(xué)可以試用一下,android同理),這個距離在2mm左右,而后,左右滑動,滑動就會切屏?也不盡然,要看手指離開屏幕時的瞬時速度,大于一個值會切換,此時屏幕按釋放時的速度加一個摩擦力繼續(xù)向前,到達邊緣反彈。如果小于這個值(靜止釋放時瞬時速度是0,也在此情況之中)要看當(dāng)前拖動的屏幕是否超過屏幕寬度的二分之一,超過切屏,沒超過彈回,此時都是在釋放速度之上添加加一個加速度,到達邊緣返回。另外還要考慮在兩個最外側(cè)屏幕操作時行為有什么不同,以及釋放后屏幕仍在運動中時再次操作的屏幕行為。想必真正列下來將會是一個相當(dāng)復(fù)雜的流程圖。端木說到,他在Apple工作時并沒有交互設(shè)計師這個職位,工程師做了絕大部分工作,我們便越發(fā)的清楚原因在哪里。
#p#
沒有時間去做iPhone的界面模擬,但先前我用AS3模擬了Hero主界面的一些行為,以下視頻可以作為參考,其中圖形界面是由BLIZZARD同學(xué)完成的。請見以下視頻:
接下來說一下Bang&Olufsen這家丹麥?zhǔn)澜缂壱暵犉放平o我的啟發(fā),macbook pro 右側(cè)是B&O BeoCenter2 cd播放機,發(fā)燒友一定對它耳熟能詳。輕按一下,它光滑的橢圓形表面會展開成兩翼,上蓋張開,cd抬起,仿佛我們記憶中某種靈異的生物。審視它的優(yōu)雅,我們會發(fā)現(xiàn):效率不再是優(yōu)先元素,而儀式感被大大提前了。就純粹的可用性而言,它比不過一般的cd機,而它的體驗更多的集中在它的儀式感之上。相比Apple這種大眾產(chǎn)品所具有的優(yōu)雅,我把B&O歸結(jié)為小眾的優(yōu)雅,因為它可以拋棄效率,并不適用于所有人,感覺這種優(yōu)雅可以應(yīng)用于我們設(shè)計的高端應(yīng)用當(dāng)中。工業(yè)產(chǎn)品的元素也許不容易應(yīng)用到我們現(xiàn)在的工作上,還好B&O同樣提供了一個與其產(chǎn)品風(fēng)格類似的播放器BeoPlayer,有興趣的同學(xué)可以下載來試用,體驗一下B&O式的優(yōu)雅。希望也能從中得到一些靈感。在設(shè)計高端應(yīng)用時,回憶一下B&O的儀式感。
#p#
提到Muji CD機,不得不說到深澤直人(Muji CD機的設(shè)計者,也是我最喜歡的設(shè)計師之一)CDC博客關(guān)于深澤直人的一篇轉(zhuǎn)載文章“意識的核心”讓我們看到了一個真正的設(shè)計師式的思考,在這里,拋開Muji CD機極具創(chuàng)意的外形來看它的播放過程。它只有一個向下拉的操作,極致簡單的設(shè)計美學(xué)。另一方面它,打開開關(guān),它并不會立即啟動,而是間隔一下,音樂隨即開始,設(shè)計師仿佛在營造一種聲音從遠方傳來的意境,親切而舒適。我想這就是節(jié)奏的一個表象,實際上這種稍顯延遲的設(shè)計也同樣出現(xiàn)在07 iPhone發(fā)布時的一個場景,Jobs聽著音樂而此時他的同事打來電話,音樂緩慢落下轉(zhuǎn)換為鈴聲,到通話結(jié)束,一個小的間隔之后,音樂響起。類比前面的兩個例子。Muji CD機的,功能會讓位于設(shè)計,如將曲目切換,音量調(diào)節(jié)被放置在不方便操作的位置,這種強調(diào)設(shè)計意志的產(chǎn)品有時會給人一些設(shè)計師孤芳自賞的感覺,所以可以將這種優(yōu)雅比作是設(shè)計師式的優(yōu)雅,當(dāng)我們的團隊有了足夠和行業(yè)領(lǐng)導(dǎo)力以及頂尖的設(shè)計水平之時,便可以嘗試用這種設(shè)計師式的優(yōu)雅去引領(lǐng)潮流。
順應(yīng)了趨勢,找到了新的設(shè)計點,可設(shè)計師的核心競爭力還是沒有解決,用戶體驗得到重視的結(jié)果就是老板,工程師都過來做交互設(shè)計,交互設(shè)計師怎么辦?既然大家都來搶飯碗,那我們也主動出擊好了,這雖然是調(diào)侃的說法,但卻是我能給出的最切實的建議。這一點啟發(fā)源于我以前的同事及前輩劉穎,在解決產(chǎn)品團隊協(xié)同的問題上,她給出了我認(rèn)為最合理的的方案:去了解團隊中各個角色所作的工作,交互設(shè)計處于產(chǎn)品鏈條的最中央,就更有義務(wù)去做好這樣的工作,試著做一些用戶研究,試著做一些開發(fā)工作,一有助于自身專業(yè)能力的認(rèn)可,二有利于提高團隊效率。當(dāng)交互設(shè)計師成長為中堅力量之時,前途必然一片光明。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計都有哪些新的趨勢?
延伸閱讀
- [2010-10-12 08:24:00] 交互設(shè)計之回歸篇
- [2016-09-05 12:34:00] 網(wǎng)頁設(shè)計模板賞析
- [2009-07-07 08:01:00] 面包屑設(shè)計
- [2009-08-10 08:05:00] 從品牌網(wǎng)站看交互設(shè)計
- [2009-05-13 21:46:00] 誰為用戶買單(1)—電子商務(wù)網(wǎng)站的交互設(shè)計
- [2010-12-17 08:28:00] 關(guān)于WEB登錄注冊系統(tǒng)的下午茶
- [2010-05-05 21:55:00] 頁面表達常用方式
- [2010-03-23 08:35:00] 淺談白社會交互設(shè)計的創(chuàng)新(三)
- [2010-11-25 08:34:00] 兼容心理模型和系統(tǒng)模型的交互設(shè)計
- [2010-12-15 08:37:00] 說說web標(biāo)簽設(shè)計
- [2009-06-12 08:35:00] 交互設(shè)計師容易犯的錯誤:把自己禁錮在解決方
- [2010-01-19 11:11:00] 交互設(shè)計(6)–突出重點,一目了然
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
青島網(wǎng)站SEO 青島網(wǎng)頁設(shè)計 色彩心理學(xué) 空白和簡潔的設(shè)計 青島網(wǎng)頁制作 網(wǎng)站交互設(shè)計 互聯(lián)網(wǎng) 網(wǎng)站動畫 GOOGLE 良好的導(dǎo)航 營銷型網(wǎng)站 集團官網(wǎng) php程序 青島不錯的英文網(wǎng)站建設(shè)公司 膠南網(wǎng)站建設(shè)公司 網(wǎng)站開發(fā) 企業(yè)網(wǎng)站為什么要備案 交互設(shè)計 力圖數(shù)字科技 青島開發(fā)區(qū)建站公司 微信營銷的優(yōu)勢 網(wǎng)站建設(shè),手機網(wǎng)站 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 平面設(shè)計 網(wǎng)站推廣 青島網(wǎng)站建設(shè)基礎(chǔ)知識 青島網(wǎng)站建設(shè)公司哪家好 建站常識 新的元素 程序開發(fā)