網(wǎng)頁交互設(shè)計(jì)的那些事兒發(fā)布者：本站 時(shí)間：2022-01-05 12:01:15
網(wǎng)頁設(shè)計(jì)年代，大概是從2004年開始熱起來了，等到我畢業(yè)的2006年，滿大街都已經(jīng)是電腦培訓(xùn)機(jī)構(gòu)，記得當(dāng)時(shí)北大青鳥的百日千才培訓(xùn)就在我每日下班必經(jīng)的十字路口。
網(wǎng)頁設(shè)計(jì)年代重視的是特效，說白了就是特效背后的技術(shù)，君不見當(dāng)時(shí)的網(wǎng)頁是讓人看得眼花繚亂啊，這里bling bling閃閃的，漂浮框亂跳的。然后就是套各種網(wǎng)頁設(shè)計(jì)模版，做出很多復(fù)雜的類似于右邊這種典型的政府網(wǎng)站出來。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
美工時(shí)代：
網(wǎng)頁設(shè)計(jì)時(shí)代，大批的”美工”涌現(xiàn)。顯然人們有了更高的追求，光是bling bling的眼花繚亂的動(dòng)畫效果已經(jīng)看厭了，網(wǎng)頁也是需要裝飾美化的。雖然網(wǎng)頁設(shè)計(jì)論壇當(dāng)時(shí)很火，但是網(wǎng)頁設(shè)計(jì)師這個(gè)頭銜仍然是一廂情愿的叫法。大多數(shù)時(shí)候，仍然是老板和客戶嘴里的”美工”。
美工時(shí)代重視的是：視覺效果。并且，原來對(duì)網(wǎng)頁設(shè)計(jì)一竅不通的老板們紛紛成了資深的視覺鑒賞家。美工時(shí)代”美工”很痛苦——單純靠視覺效果去評(píng)價(jià)作品好壞，太主觀，太隨意。于是他們通常會(huì)做N個(gè)版本，反復(fù)修改，直至美工崩潰或者老板崩潰。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
歷史邁入了偉大的UI年代
大概是在2005年，我崇拜的網(wǎng)絡(luò)名人從擅長(zhǎng)鼠繪的小非變成了圖標(biāo)達(dá)人Rokey(時(shí)光倒流到2005年，我正在看這篇文章：靈感來源于生活-微軟亞洲工程院移動(dòng)設(shè)備組UI設(shè)計(jì)師張偉)。也自學(xué)了關(guān)于UI的若干知識(shí)，開始迷戀起PS像素級(jí)的奇妙世界。
UI=User Interface. 已經(jīng)將User即用戶納入界面設(shè)計(jì)考慮的重要要素。但是對(duì)于精致、質(zhì)感的無極限的追求，依然會(huì)讓人顧此失彼，忘記了從用戶的視角去審視一個(gè)UI的作品。于是，經(jīng)常會(huì)看到雖然很精致，但是很難用的軟件界面。
用戶看到的部份，無可挑剔。但是實(shí)際上，使用的感受并不好。而感受部份，可以從幾個(gè)角度去闡釋：
他們知道不知道這個(gè)是什么東西?他們感覺到迷惑嗎?
他們是否清楚能夠通過此物做什么?
是否清楚如何做到?
當(dāng)他們有興趣去嘗試時(shí)，他們知道如何開始嗎?
當(dāng)他們開始后，知道如何進(jìn)行下一步嗎?
當(dāng)不想要使用時(shí)，能夠快速明白如何退出嗎?
當(dāng)他們退出后，下次來用，是否需要重新去學(xué)習(xí)掌握如何操作?
每一步操作時(shí)，他們心理會(huì)感覺到愉悅還是枯燥乏味?
當(dāng)然，我們崇尚軟件操作過程中的效率，但是若用戶感覺到愉悅，也許就不會(huì)覺得效率太低，其實(shí)，效率是個(gè)相對(duì)的說法。歸根結(jié)底，這就是用戶體驗(yàn)。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
UED時(shí)代——用戶體驗(yàn)制勝我們不缺技術(shù)，我們不缺另人震撼的視覺，這些雖然過去是我們孜孜追求的東西，如今已經(jīng)不足為奇。但是我們?nèi)庇脩魜碛茫覀內(nèi)庇脩舫掷m(xù)來關(guān)注，我們?nèi)庇脩趔w驗(yàn)。用戶體驗(yàn)過去一直在產(chǎn)生影響，但是未能得到足夠的重視。
2007年，開始關(guān)注ucdchina，UED是套方法論，UCD是指導(dǎo)思想——User-centered Design. 不再是BCD-Boss-Centered Design.老板說了算，除非老板能夠代表目標(biāo)客戶。這和市場(chǎng)營(yíng)銷學(xué)發(fā)展的歷程有點(diǎn)像，從生產(chǎn)主導(dǎo)到市場(chǎng)主導(dǎo)。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
WEB2.0后，用戶的參與度越來越高，用戶從被動(dòng)的接受者變成了主筆，主編，攝影師，作家……他們是主角，使用中遇到問題，當(dāng)然不可能靠網(wǎng)站的客服電話或幫助教程搞定，他們需要自助，所以，降低使用門檻，消除使用障礙，吸引他們重復(fù)使用，是每個(gè)網(wǎng)站致力的方向。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
從廣義來講，一個(gè)網(wǎng)站的任何部門都是在為用戶體驗(yàn)服務(wù)，從戰(zhàn)略層的布局開始，用戶體驗(yàn)已經(jīng)開始。而狹義的用戶體驗(yàn)設(shè)計(jì)，也就是UED部門做的事情，大部分是圍繞到結(jié)構(gòu)、框架以及表面層。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
UED部門的組織架構(gòu)基本如下，解決用戶易用(交互、文案)，以及想用(視覺，交互)的問題。而用戶研究是幫我們看清用戶特征、洞察及挖掘用戶需求，前端是偉大的實(shí)現(xiàn)者。
文案對(duì)于用戶體驗(yàn)的重要性經(jīng)常被忽視，所以，文案撰寫在UED團(tuán)隊(duì)是很稀缺的資源。目前據(jù)我了解，只有支付寶的UED團(tuán)隊(duì)有此配置，其他團(tuán)隊(duì)大部分是由產(chǎn)品經(jīng)理擔(dān)任此職。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
那么，交互設(shè)計(jì)到底是什么呢?
我們不缺技術(shù)，我們不缺另人震撼的視覺，這些雖然過去是我們孜孜追求的東西，如今已經(jīng)不足為奇。但是我們?nèi)庇脩魜碛?，我們?nèi)庇脩舫掷m(xù)來關(guān)注，我們?nèi)庇脩趔w驗(yàn)。用戶體驗(yàn)過去一直在產(chǎn)生影響，但是未能得到足夠的重視。
我突然打了一下你，你肯定會(huì)有一定的反應(yīng)。首先，你的表現(xiàn)會(huì)吃驚或者生氣，你的吃驚或者生氣的程度也會(huì)受我下手的輕重和方式影響。
我呢，對(duì)你的反應(yīng)會(huì)有一定的預(yù)期，下手的時(shí)候，沒有期望你會(huì)突然哈哈大笑——這就是人與人之間的交互。
人和物也是一樣，我按下電視的開關(guān)鍵，我預(yù)期電視會(huì)打開，并且電視如期望發(fā)生運(yùn)轉(zhuǎn)。若我按下電視的開關(guān)鍵，突然電視成了靜音，這就是非期望的交互行為。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
二. 為什么需要交互設(shè)計(jì)?
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
人和物也是一樣，我按下電視的開關(guān)鍵，我預(yù)期電視會(huì)打開，并且電視如期望發(fā)生運(yùn)轉(zhuǎn)。若我按下電視的開關(guān)鍵，突然電視成了靜音，這就是非期望的交互行為。
人可以經(jīng)由訓(xùn)練，改變自己對(duì)于行為的反饋，比如，媽媽教育嬰兒對(duì)于他人的禮物回報(bào)以”謝謝”和微笑，不要跟著陌生叔叔走等。如果你送一個(gè)小孩子禮物，他卻對(duì)于大罵，你會(huì)覺得這個(gè)小子怎么這么沒教養(yǎng)。
機(jī)器、系統(tǒng)沒有生命力，則需要被賦予對(duì)于各種行為的反饋機(jī)制。將用戶的期望賦予給它，讓它給出合理的反饋行為。
然而不幸的是，我們的生活里，沒有教養(yǎng)的產(chǎn)品實(shí)在太多太多…
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
上圖左側(cè)是一個(gè)杯子。我讓現(xiàn)場(chǎng)的同學(xué)猜這個(gè)杯子的成本價(jià)，答案集中在10元左右。但是不幸的是，我為這個(gè)杯子花費(fèi)了不下600元。原因正在于不良交互。
杯子的把手處僅容兩個(gè)手指塞入，當(dāng)?shù)谷霟岵韬?，我端起此杯，把手上部是光滑無比的玻璃，而手指又被杯壁燙了一下，結(jié)果杯子傾斜，將熱茶倒入了筆記本電腦鍵盤里——修鍵盤花費(fèi)了580元。
考慮到這里，設(shè)計(jì)杯子的設(shè)計(jì)師可以考慮把把手做成磨砂玻璃，增加賣點(diǎn)。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
上圖是公司內(nèi)部的門?；旧先€(gè)衛(wèi)生間都要從此門經(jīng)過，那么基本上每個(gè)員工每天進(jìn)出此門不下6次吧。
在場(chǎng)的同學(xué)聲稱每次都很緊張——為什么?怕被撞啊。你看不到對(duì)面有沒有人，怕推門撞別人。自己也擔(dān)心被人撞。所以，途徑此門，瞳孔會(huì)不會(huì)由于緊張放大呢?還有，此門推也可拉也可，上面的”拉”字其實(shí)形同虛設(shè)。
每天反復(fù)扇動(dòng)，座位靠近此門的同學(xué)們夏天感覺到熱，冬天感覺到冷。嚴(yán)重不低碳環(huán)保。
原因也是不良交互設(shè)計(jì)。
改進(jìn)此門，可以設(shè)置透明的玻璃窗?；蛘哂米詣?dòng)開啟的推拉門代替。
詳細(xì)解析網(wǎng)頁交互設(shè)計(jì)的那些事兒,PS教程,
上面是一個(gè)電梯事件。要知道電梯是個(gè)最講究習(xí)慣統(tǒng)一的地方。你要經(jīng)常在不同的大樓用不同的電梯。若A電梯用這種按鍵，B電梯用那種按鍵，基本上你都要重新適應(yīng)。然而這個(gè)適應(yīng)你又無法持續(xù)，因?yàn)槟愕搅薈電梯，仍然要重新學(xué)習(xí)。所以電梯的按鍵設(shè)計(jì)，基本上要有行業(yè)標(biāo)準(zhǔn)的。
然而華星路的創(chuàng)業(yè)大廈就是特立獨(dú)行的。大多數(shù)電梯將開門、關(guān)門的按鍵放到了數(shù)字鍵的上部。而創(chuàng)業(yè)大廈則是將報(bào)警按鍵放到此處，開門關(guān)門則放到了數(shù)字鍵的最下方。
我2008年到阿里巴巴上班(當(dāng)時(shí)公司就在創(chuàng)業(yè)大廈)，覺得這里的同事很不友好。好幾次晚到一步，電梯門即將合上，我大步向前，邊跑邊叫等一下。里面的人面帶笑容，靠門的MM伸手一按鍵，電梯門無情地關(guān)上了。
這里的人都太不友好了——我一直懷抱如此惡念。直到有一次我上了電梯，電梯門即將關(guān)閉時(shí)，有幾個(gè)遲到的同事飛奔過來，我二話不說，直接按開門鍵——叮呤呤，居然響起了鈴聲，有個(gè)聲音問：什么事?我定睛一看，原來本以為是開門鍵的地方，是個(gè)報(bào)警的按鍵!原來如此!
上圖右下方我寫了一個(gè)HISTORY, 歷史。這是開個(gè)玩笑。假設(shè)某人暗戀已久的人向TA飛奔過來，希望電梯等一下，結(jié)果由于此不良設(shè)計(jì)，讓這個(gè)暗戀的人心存糾結(jié)，錯(cuò)過美好姻緣。本來兩個(gè)人結(jié)合有可能生出一個(gè)能夠改變歷史的天才，結(jié)果錯(cuò)失了。
去年11月底我再去創(chuàng)業(yè)大廈，發(fā)現(xiàn)此電梯的故事還在繼續(xù)——畢竟更換電梯成本太高了!而且在報(bào)警的按鈕下方，被保安貼了一張醒目的即時(shí)貼，上面寫著幾個(gè)大字：這是報(bào)警用的!哈哈，看來保安也不堪忍受”假報(bào)警”。但是沒用，貼著這個(gè)提示并不能有效阻止錯(cuò)誤發(fā)生——用戶首先是憑借習(xí)慣，其次才是認(rèn)知和學(xué)習(xí)。
原因正是不良交互設(shè)計(jì)。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)