網(wǎng)頁(yè)交互設計的那些事兒發(fā)布者：本站     時(shí)間：2022-01-05 12:01:15

網(wǎng)頁(yè)設計年代，大概是從2004年開(kāi)始熱起來(lái)了，等到我畢業(yè)的2006年，滿(mǎn)大街都已經(jīng)是電腦培訓機構，記得當時(shí)北大青鳥(niǎo)的百日千才培訓就在我每日下班必經(jīng)的十字路口。

網(wǎng)頁(yè)設計年代重視的是特效，說(shuō)白了就是特效背后的技術(shù)，君不見(jiàn)當時(shí)的網(wǎng)頁(yè)是讓人看得眼花繚亂啊，這里bling bling閃閃的，漂浮框亂跳的。然后就是套各種網(wǎng)頁(yè)設計模版，做出很多復雜的類(lèi)似于右邊這種典型的政府網(wǎng)站出來(lái)。

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

美工時(shí)代：

網(wǎng)頁(yè)設計時(shí)代，大批的”美工”涌現。顯然人們有了更高的追求，光是bling bling的眼花繚亂的動(dòng)畫(huà)效果已經(jīng)看厭了，網(wǎng)頁(yè)也是需要裝飾美化的。雖然網(wǎng)頁(yè)設計論壇當時(shí)很火，但是網(wǎng)頁(yè)設計師這個(gè)頭銜仍然是一廂情愿的叫法。大多數時(shí)候，仍然是老板和客戶(hù)嘴里的”美工”。

美工時(shí)代重視的是：視覺(jué)效果。并且，原來(lái)對網(wǎng)頁(yè)設計一竅不通的老板們紛紛成了資深的視覺(jué)鑒賞家。美工時(shí)代”美工”很痛苦——單純靠視覺(jué)效果去評價(jià)作品好壞，太主觀(guān)，太隨意。于是他們通常會(huì )做N個(gè)版本，反復修改，直至美工崩潰或者老板崩潰。

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

歷史邁入了偉大的UI年代

大概是在2005年，我崇拜的網(wǎng)絡(luò )名人從擅長(cháng)鼠繪的小非變成了圖標達人Rokey(時(shí)光倒流到2005年，我正在看這篇文章：靈感來(lái)源于生活-微軟亞洲工程院移動(dòng)設備組UI設計師張偉)。也自學(xué)了關(guān)于UI的若干知識，開(kāi)始迷戀起PS像素級的奇妙世界。

UI=User Interface. 已經(jīng)將User即用戶(hù)納入界面設計考慮的重要要素。但是對于精致、質(zhì)感的無(wú)極限的追求，依然會(huì )讓人顧此失彼，忘記了從用戶(hù)的視角去審視一個(gè)UI的作品。于是，經(jīng)常會(huì )看到雖然很精致，但是很難用的軟件界面。

用戶(hù)看到的部份，無(wú)可挑剔。但是實(shí)際上，使用的感受并不好。而感受部份，可以從幾個(gè)角度去闡釋?zhuān)?br />
他們知道不知道這個(gè)是什么東西?他們感覺(jué)到迷惑嗎?

他們是否清楚能夠通過(guò)此物做什么?

是否清楚如何做到?

當他們有興趣去嘗試時(shí)，他們知道如何開(kāi)始嗎?

當他們開(kāi)始后，知道如何進(jìn)行下一步嗎?

當不想要使用時(shí)，能夠快速明白如何退出嗎?

當他們退出后，下次來(lái)用，是否需要重新去學(xué)習掌握如何操作?

每一步操作時(shí)，他們心理會(huì )感覺(jué)到愉悅還是枯燥乏味?

當然，我們崇尚軟件操作過(guò)程中的效率，但是若用戶(hù)感覺(jué)到愉悅，也許就不會(huì )覺(jué)得效率太低，其實(shí)，效率是個(gè)相對的說(shuō)法。歸根結底，這就是用戶(hù)體驗。

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

UED時(shí)代——用戶(hù)體驗制勝我們不缺技術(shù)，我們不缺另人震撼的視覺(jué)，這些雖然過(guò)去是我們孜孜追求的東西，如今已經(jīng)不足為奇。但是我們缺用戶(hù)來(lái)用，我們缺用戶(hù)持續來(lái)關(guān)注，我們缺用戶(hù)體驗。用戶(hù)體驗過(guò)去一直在產(chǎn)生影響，但是未能得到足夠的重視。

2007年，開(kāi)始關(guān)注ucdchina，UED是套方法論，UCD是指導思想——User-centered Design. 不再是BCD-Boss-Centered Design.老板說(shuō)了算，除非老板能夠代表目標客戶(hù)。這和市場(chǎng)營(yíng)銷(xiāo)學(xué)發(fā)展的歷程有點(diǎn)像，從生產(chǎn)主導到市場(chǎng)主導。

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

WEB2.0后，用戶(hù)的參與度越來(lái)越高，用戶(hù)從被動(dòng)的接受者變成了主筆，主編，攝影師，作家……他們是主角，使用中遇到問(wèn)題，當然不可能靠網(wǎng)站的客服電話(huà)或幫助教程搞定，他們需要自助，所以，降低使用門(mén)檻，消除使用障礙，吸引他們重復使用，是每個(gè)網(wǎng)站致力的方向。

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

從廣義來(lái)講，一個(gè)網(wǎng)站的任何部門(mén)都是在為用戶(hù)體驗服務(wù)，從戰略層的布局開(kāi)始，用戶(hù)體驗已經(jīng)開(kāi)始。而狹義的用戶(hù)體驗設計，也就是UED部門(mén)做的事情，大部分是圍繞到結構、框架以及表面層。

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

UED部門(mén)的組織架構基本如下，解決用戶(hù)易用(交互、文案)，以及想用(視覺(jué)，交互)的問(wèn)題。而用戶(hù)研究是幫我們看清用戶(hù)特征、洞察及挖掘用戶(hù)需求，前端是偉大的實(shí)現者。

文案對于用戶(hù)體驗的重要性經(jīng)常被忽視，所以，文案撰寫(xiě)在UED團隊是很稀缺的資源。目前據我了解，只有支付寶的UED團隊有此配置，其他團隊大部分是由產(chǎn)品經(jīng)理?yè)未寺殹?br />
詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

那么，交互設計到底是什么呢?

我們不缺技術(shù)，我們不缺另人震撼的視覺(jué)，這些雖然過(guò)去是我們孜孜追求的東西，如今已經(jīng)不足為奇。但是我們缺用戶(hù)來(lái)用，我們缺用戶(hù)持續來(lái)關(guān)注，我們缺用戶(hù)體驗。用戶(hù)體驗過(guò)去一直在產(chǎn)生影響，但是未能得到足夠的重視。

我突然打了一下你，你肯定會(huì )有一定的反應。首先，你的表現會(huì )吃驚或者生氣，你的吃驚或者生氣的程度也會(huì )受我下手的輕重和方式影響。

我呢，對你的反應會(huì )有一定的預期，下手的時(shí)候，沒(méi)有期望你會(huì )突然哈哈大笑——這就是人與人之間的交互。

人和物也是一樣，我按下電視的開(kāi)關(guān)鍵，我預期電視會(huì )打開(kāi)，并且電視如期望發(fā)生運轉。若我按下電視的開(kāi)關(guān)鍵，突然電視成了靜音，這就是非期望的交互行為。

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

二. 為什么需要交互設計?

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

人和物也是一樣，我按下電視的開(kāi)關(guān)鍵，我預期電視會(huì )打開(kāi)，并且電視如期望發(fā)生運轉。若我按下電視的開(kāi)關(guān)鍵，突然電視成了靜音，這就是非期望的交互行為。

人可以經(jīng)由訓練，改變自己對于行為的反饋，比如，媽媽教育嬰兒對于他人的禮物回報以”謝謝”和微笑，不要跟著(zhù)陌生叔叔走等。如果你送一個(gè)小孩子禮物，他卻對于大罵，你會(huì )覺(jué)得這個(gè)小子怎么這么沒(méi)教養。

機器、系統沒(méi)有生命力，則需要被賦予對于各種行為的反饋機制。將用戶(hù)的期望賦予給它，讓它給出合理的反饋行為。

然而不幸的是，我們的生活里，沒(méi)有教養的產(chǎn)品實(shí)在太多太多…

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

上圖左側是一個(gè)杯子。我讓現場(chǎng)的同學(xué)猜這個(gè)杯子的成本價(jià)，答案集中在10元左右。但是不幸的是，我為這個(gè)杯子花費了不下600元。原因正在于不良交互。

杯子的把手處僅容兩個(gè)手指塞入，當倒入熱茶后，我端起此杯，把手上部是光滑無(wú)比的玻璃，而手指又被杯壁燙了一下，結果杯子傾斜，將熱茶倒入了筆記本電腦鍵盤(pán)里——修鍵盤(pán)花費了580元。

考慮到這里，設計杯子的設計師可以考慮把把手做成磨砂玻璃，增加賣(mài)點(diǎn)。

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

上圖是公司內部的門(mén)?；旧先€(gè)衛生間都要從此門(mén)經(jīng)過(guò)，那么基本上每個(gè)員工每天進(jìn)出此門(mén)不下6次吧。

在場(chǎng)的同學(xué)聲稱(chēng)每次都很緊張——為什么?怕被撞啊。你看不到對面有沒(méi)有人，怕推門(mén)撞別人。自己也擔心被人撞。所以，途徑此門(mén)，瞳孔會(huì )不會(huì )由于緊張放大呢?還有，此門(mén)推也可拉也可，上面的”拉”字其實(shí)形同虛設。

每天反復扇動(dòng)，座位靠近此門(mén)的同學(xué)們夏天感覺(jué)到熱，冬天感覺(jué)到冷。嚴重不低碳環(huán)保。

原因也是不良交互設計。

改進(jìn)此門(mén)，可以設置透明的玻璃窗?；蛘哂米詣?dòng)開(kāi)啟的推拉門(mén)代替。

詳細解析網(wǎng)頁(yè)交互設計的那些事兒,PS教程,

上面是一個(gè)電梯事件。要知道電梯是個(gè)最講究習慣統一的地方。你要經(jīng)常在不同的大樓用不同的電梯。若A電梯用這種按鍵，B電梯用那種按鍵，基本上你都要重新適應。然而這個(gè)適應你又無(wú)法持續，因為你到了C電梯，仍然要重新學(xué)習。所以電梯的按鍵設計，基本上要有行業(yè)標準的。

然而華星路的創(chuàng )業(yè)大廈就是特立獨行的。大多數電梯將開(kāi)門(mén)、關(guān)門(mén)的按鍵放到了數字鍵的上部。而創(chuàng )業(yè)大廈則是將報警按鍵放到此處，開(kāi)門(mén)關(guān)門(mén)則放到了數字鍵的最下方。

我2008年到阿里巴巴上班(當時(shí)公司就在創(chuàng )業(yè)大廈)，覺(jué)得這里的同事很不友好。好幾次晚到一步，電梯門(mén)即將合上，我大步向前，邊跑邊叫等一下。里面的人面帶笑容，靠門(mén)的MM伸手一按鍵，電梯門(mén)無(wú)情地關(guān)上了。

這里的人都太不友好了——我一直懷抱如此惡念。直到有一次我上了電梯，電梯門(mén)即將關(guān)閉時(shí)，有幾個(gè)遲到的同事飛奔過(guò)來(lái)，我二話(huà)不說(shuō)，直接按開(kāi)門(mén)鍵——叮呤呤，居然響起了鈴聲，有個(gè)聲音問(wèn)：什么事?我定睛一看，原來(lái)本以為是開(kāi)門(mén)鍵的地方，是個(gè)報警的按鍵!原來(lái)如此!

上圖右下方我寫(xiě)了一個(gè)HISTORY, 歷史。這是開(kāi)個(gè)玩笑。假設某人暗戀已久的人向TA飛奔過(guò)來(lái)，希望電梯等一下，結果由于此不良設計，讓這個(gè)暗戀的人心存糾結，錯過(guò)美好姻緣。本來(lái)兩個(gè)人結合有可能生出一個(gè)能夠改變歷史的天才，結果錯失了。

去年11月底我再去創(chuàng )業(yè)大廈，發(fā)現此電梯的故事還在繼續——畢竟更換電梯成本太高了!而且在報警的按鈕下方，被保安貼了一張醒目的即時(shí)貼，上面寫(xiě)著(zhù)幾個(gè)大字：這是報警用的!哈哈，看來(lái)保安也不堪忍受”假報警”。但是沒(méi)用，貼著(zhù)這個(gè)提示并不能有效阻止錯誤發(fā)生——用戶(hù)首先是憑借習慣，其次才是認知和學(xué)習。

原因正是不良交互設計。