網(wǎng)站設(shè)計(jì)：交互設(shè)計(jì)的未來

為了支持新技術(shù)，新的交互形態(tài)日益興起。但是，交互的基本原則是基本不變的。本文將探索交互設(shè)計(jì)在最近幾年的進(jìn)展，以及未來的發(fā)展趨勢。

一、網(wǎng)站設(shè)計(jì)交互的本質(zhì)仍未改變

交互設(shè)計(jì)不單單是指那些有趣的優(yōu)秀案例。美國賓夕法尼亞州立大學(xué)的研究專家稱，用戶更容易被網(wǎng)站中帶有交互特色的信息說服。

“Modality Interactivity對用戶來說更有說服力。因?yàn)檫@使用戶在瀏覽網(wǎng)站的時(shí)候更有趣，更吸引他們，并且?guī)椭脩魧W(wǎng)站信息產(chǎn)生更積極的態(tài)度?！币晃粊碜粤_伯特·莫里斯大學(xué)的通訊系助理教授JeeyunOh如是說，“交互（Interactivity）通過讓用戶更深層次地理解網(wǎng)站信息而更具說服力?！?/p>

交互的本質(zhì)就是參與（engagement）。無論你是哪個(gè)時(shí)代的設(shè)計(jì)師，這一點(diǎn)是不會(huì)變的；唯一不同的是用戶參與時(shí)采取的方法。交互設(shè)計(jì)樣式隨著HTML5、CSS、Javascript、jQuery等技術(shù)的支持而逐漸演變。過去的網(wǎng)站常常被大量內(nèi)部鏈接或圖片集限定——雖然如今依舊流行，但今天的我們需要用更聰明、更具創(chuàng)造力的方式去處理網(wǎng)站的交互設(shè)計(jì)。

無論采用什么樣的技術(shù)，以下5個(gè)核心的交互設(shè)計(jì)原則需牢記。受人類交際和情感的影響，這些原則可以通過技術(shù)來輔助，但不要輕易改變它們：

1.目標(biāo)驅(qū)動(dòng)設(shè)計(jì)（Goal-driven Design)。注重用戶角色、用戶場景劇本及用戶體驗(yàn)地圖，以保證每一處交互細(xì)節(jié)都能讓用戶離欲完成的目標(biāo)更近。

2.可用性（Usability）。網(wǎng)站功能在達(dá)到趣味性之前，應(yīng)先符合用戶直覺、易信賴。只為用戶提供真正需要的內(nèi)容，并努力減少所有的細(xì)節(jié)沖突及認(rèn)知負(fù)擔(dān)。

3.功能可見性和符號（Affordances&Signifiers）。由于視覺是最主要的感官，形式必須反射功能。

4.易學(xué)性（Learnability）。與網(wǎng)站已有設(shè)計(jì)及內(nèi)部資源相一致的界面會(huì)更有預(yù)見性，這意味用戶的學(xué)習(xí)成本很低。易學(xué)易懂的界面自然更具可用性，因?yàn)檫@樣的界面認(rèn)知成本就少了很多。

5.反饋與響應(yīng)時(shí)間（Feedback&Response Time）。界面必須以人性的角度迅速做出響應(yīng)，如此才會(huì)有像真實(shí)的對話一樣逼真的體驗(yàn)。交互設(shè)計(jì)就應(yīng)該像人與人之間的對話，而不是機(jī)器對用戶所言所行的簡單反應(yīng)。

無論是過去、現(xiàn)在、還是將來，這5個(gè)原則始終決定著交互設(shè)計(jì)的演變趨勢以及未來的發(fā)展方向。

二、網(wǎng)站設(shè)計(jì)現(xiàn)代交互設(shè)計(jì)技巧

新的功能性意味著新的交互方式，也算是娛樂用戶的新方法?，F(xiàn)在的用戶已經(jīng)習(xí)慣了通過響應(yīng)式和自適應(yīng)系統(tǒng)所實(shí)現(xiàn)的美好設(shè)計(jì)——響應(yīng)式和自適應(yīng)系統(tǒng)創(chuàng)造的永動(dòng)循環(huán)讓更多的設(shè)計(jì)師不斷地運(yùn)用這樣的設(shè)計(jì)來滿足用戶，讓用戶更加習(xí)慣。

舉例說明，以下幾個(gè)設(shè)計(jì)技巧并非獨(dú)立的設(shè)計(jì)趨勢，它們都是響應(yīng)式和自適應(yīng)設(shè)計(jì)潮流下推動(dòng)交互發(fā)展的因素之一。

·視差滾動(dòng)及效果

·卡片式布局

·Interaction Design Best Practices一書中所描述的視頻與動(dòng)畫

·需要某些身體動(dòng)作（如滑動(dòng)、點(diǎn)擊等）的設(shè)計(jì)元素

·微交互，一種在使用web網(wǎng)站或app過程中出現(xiàn)的獨(dú)特樣式（試想一下鬧鐘響起，或刪除郵件的微交互場景）

·來自網(wǎng)站和app的推送通知及提醒

·個(gè)性化及本地工具，讓用戶感覺到每一款app或網(wǎng)站產(chǎn)品都是為他們定制的、創(chuàng)造讓用戶難忘的使用場景（例如，社交地圖軟件Waze會(huì)根據(jù)用戶的使用習(xí)慣自動(dòng)詢問用戶是否于下午六點(diǎn)開車回家）

·通過點(diǎn)擊或滑動(dòng)快速展開/隱藏內(nèi)容

·通過懸停效果或動(dòng)作呈現(xiàn)次要內(nèi)容

·元素與元素之間的過渡及循環(huán)功能

Net+設(shè)計(jì)的MixPlus是一個(gè)展示交互設(shè)計(jì)藝術(shù)的優(yōu)秀案例，接下來讓我們了解一下它的交互設(shè)計(jì)技巧。

MixPlus是向用戶展示一系列唱片專輯的網(wǎng)站。點(diǎn)擊選擇一款曲風(fēng)，然后在播放列表里滾動(dòng)挑選、并播放歌曲。這一動(dòng)畫過程生動(dòng)有趣，引導(dǎo)用戶從網(wǎng)頁第一屏使用到最后一屏。在網(wǎng)頁底部，用戶可以繼續(xù)瀏覽更長的播放列表，也可以返回到Net+。多種唱片專輯的選擇鼓舞著用戶進(jìn)行交互、或選擇另外一種新的曲風(fēng)重新查找喜歡的歌曲。

整個(gè)交互過程雖然有限，但過程十分流暢。用戶不需要得到過多的解釋即可了解網(wǎng)站的功能。（建議讀者自行到該網(wǎng)站進(jìn)行體驗(yàn)。）

還有一個(gè)選擇，設(shè)計(jì)者本可以把每首歌曲設(shè)計(jì)成卡片的形式，并以懸停的方式進(jìn)行展示播放按鈕，但這種方式相對沒那么迷人有趣。

三、網(wǎng)站設(shè)計(jì)可用性的新視角

移動(dòng)應(yīng)用促使我們重新思考所有的網(wǎng)站體驗(yàn)，不僅僅是產(chǎn)品在不同設(shè)備上的呈現(xiàn)方式。

不久前，設(shè)計(jì)界的關(guān)注點(diǎn)還在“above the

scroll”上，即用戶看到的網(wǎng)站第一屏內(nèi)容。但隨著小屏?xí)r代的到來以及滾動(dòng)重新成為重要的設(shè)計(jì)工具，設(shè)計(jì)師們的想法也隨之改變。蘋果手表的Digital Crown則進(jìn)一步重塑了導(dǎo)航的交互樣式（通過旋轉(zhuǎn)表冠而不是捏合或滑動(dòng)手勢）。

那些認(rèn)為屏幕滾動(dòng)會(huì)抹殺用戶參與度的觀念是用戶體驗(yàn)中得一大謬見，而且這一謬見很難克服。但偉大的UX Myths網(wǎng)站提供的一些數(shù)據(jù)可以消除我們的顧慮。

數(shù)據(jù)分析師Chartbeat分析了20億訪問數(shù)據(jù)后發(fā)現(xiàn)，“一個(gè)正常的網(wǎng)頁中，用戶66%的注意力都放在了折線之下（below the fold，即網(wǎng)頁第一屏以下的內(nèi)容）。

可用性專家Jakob Nielsen的眼動(dòng)研究表明，當(dāng)人們的注意力放在折線之上時(shí)，人們的確會(huì)向下滾動(dòng)屏幕，尤其是網(wǎng)站的設(shè)計(jì)鼓勵(lì)人們這樣做。

在上面的響應(yīng)式網(wǎng)站中，第一屏只有“Hello”一個(gè)信息，但屏幕底部的箭頭鼓勵(lì)用戶對該網(wǎng)站進(jìn)行更深一步的探索，即讓屏幕滾動(dòng)以查看第一屏以下的內(nèi)容。點(diǎn)擊鼠標(biāo)即可實(shí)現(xiàn)屏幕滾動(dòng)，同時(shí)隨著一系列簡潔的動(dòng)效、向用戶展示網(wǎng)站的更多內(nèi)容。

當(dāng)然這個(gè)網(wǎng)站受了mobile-first philosophy（優(yōu)先考慮移動(dòng)端的設(shè)計(jì)哲學(xué)）的影響，但你會(huì)發(fā)現(xiàn)，它在臺(tái)式電腦上的體驗(yàn)也是不錯(cuò)的。

說起滾動(dòng)這一交互樣式，我們發(fā)現(xiàn)：假設(shè)每一屏的內(nèi)容都是吸引人的，長滾動(dòng)便不會(huì)成為可用性的障礙。大量的單頁網(wǎng)站設(shè)計(jì)案例證明，交互設(shè)計(jì)能以線性的形式展示網(wǎng)站內(nèi)容，創(chuàng)造難忘的用戶體驗(yàn)。

作為了不起的交互設(shè)計(jì)前沿之一的移動(dòng)設(shè)計(jì)擁有著豐富的交互樣式，重新定義著用戶與技術(shù)之間的關(guān)系。

大家對比一下移動(dòng)設(shè)備上的tap手指點(diǎn)擊和網(wǎng)站上的click鼠標(biāo)點(diǎn)擊。就在兩年前，由于大多數(shù)的網(wǎng)站仍然需要click模式的點(diǎn)擊動(dòng)作或使用滾動(dòng)條這樣的網(wǎng)站工具，用戶對手機(jī)網(wǎng)站的使用還顯得很笨拙。然而現(xiàn)在，用戶已經(jīng)對滑動(dòng)、點(diǎn)擊、放大縮小之類的手勢操作駕輕就熟，可以輕松獲取小屏設(shè)備上的信息。

考慮到響應(yīng)式和自適應(yīng)設(shè)計(jì)，每一個(gè)網(wǎng)站的交互設(shè)計(jì)不能僅僅局限于臺(tái)式機(jī)的界面，還應(yīng)該考慮app等小屏設(shè)備（包括可穿戴設(shè)備）的交互體驗(yàn)。每一種設(shè)備都需要獨(dú)特的交互設(shè)計(jì)，并影響著用戶在訪問過程中的體驗(yàn)。

值得注意的是，用戶通會(huì)過多種設(shè)備入口訪問所需網(wǎng)站。任意一端的惡劣體驗(yàn)隨時(shí)都會(huì)造成用戶的永久性流失。因此我們的交互設(shè)計(jì)要達(dá)到跨平臺(tái)的一致性，減少用戶在跨平臺(tái)使用中的認(rèn)知負(fù)擔(dān)。

另外，界面設(shè)計(jì)和交互設(shè)計(jì)是自適應(yīng)和響應(yīng)式體驗(yàn)的兩個(gè)重要方面。當(dāng)我們從mobile-first角度考慮屏幕中哪些內(nèi)容該優(yōu)先排列時(shí)，我們也要思索用戶在實(shí)際過程中是如何與這些內(nèi)容互動(dòng)的。

四、網(wǎng)站設(shè)計(jì)放眼未來

技術(shù)的改變使交互設(shè)計(jì)的可能性愈加豐富。畢竟，我們大部分正在進(jìn)行的設(shè)計(jì)都由對不熟悉的設(shè)備迅速熟悉起來的需求所掌控。

你肯定會(huì)說可穿戴設(shè)備的交互設(shè)計(jì)將會(huì)成為下一個(gè)熱門事件。無論接下來的設(shè)備是手表、項(xiàng)鏈，還是鞋子里的芯片，與皮膚接觸的人機(jī)交互將會(huì)越來越受注重，其每一個(gè)細(xì)節(jié)都將起到重要作用。從今往后，設(shè)計(jì)界將更多地關(guān)注如何讓用戶對皮膚上的設(shè)備感覺舒適。

個(gè)性化依舊會(huì)是交互設(shè)計(jì)的一個(gè)目標(biāo)。地理定位軟件已經(jīng)創(chuàng)造了很棒的場景體驗(yàn)，但是像Blossom Type這樣的很多網(wǎng)站變得更加流行，因?yàn)樗鼈冊试S用戶自行輸入信息來創(chuàng)建唯一、可分享的用戶體驗(yàn)。（Blossom Type通過用戶輸入的內(nèi)容為用戶創(chuàng)建有趣的電影。）

隨著技術(shù)的發(fā)展和用戶對新工具的使用，交互設(shè)計(jì)幾乎每天都在發(fā)展變化。盡管我們無法預(yù)見下一個(gè)大事件，但我們可以持續(xù)敏銳地觀察周遭、掌握哪些正在銷售的設(shè)備和工具、了解用戶喜歡以哪種方式獲得數(shù)字信息等，為下一個(gè)大事件的來臨做好準(zhǔn)備。

最后，人類交互的主觀性使交互設(shè)計(jì)更具想象力和趣味性。

網(wǎng)站標(biāo)題：網(wǎng)站設(shè)計(jì)：交互設(shè)計(jì)的未來
網(wǎng)站鏈接：http://muchs.cn/news/227387.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、定制網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站收錄、用戶體驗(yàn)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)