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

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

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

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

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

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

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

1.目標(biāo)驅(qū)動設(shè)計（Goal-driven Design)。注重用戶角色、用戶場景劇本及用戶體驗地圖，以保證每一處交互細(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è)計及內(nèi)部資源相一致的界面會更有預(yù)見性，這意味用戶的學(xué)習(xí)成本很低。易學(xué)易懂的界面自然更具可用性，因為這樣的界面認(rèn)知成本就少了很多。

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

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

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

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

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

·視差滾動及效果

·卡片式布局

·Interaction Design Best Practices一書中所描述的視頻與動畫

·需要某些身體動作（如滑動、點擊等）的設(shè)計元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

分享標(biāo)題：網(wǎng)站設(shè)計：交互設(shè)計的未來
新聞來源：http://www.bm7419.com/news37/227387.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站策劃、App開發(fā)、全網(wǎng)營銷推廣、標(biāo)簽優(yōu)化、定制網(wǎng)站

廣告

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