網(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.目標驅(qū)動設(shè)計（Goal-driven Design)。注重用戶角色、用戶場景劇本及用戶體驗地圖，以保證每一處交互細節(jié)都能讓用戶離欲完成的目標更近。

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

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

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

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)表冠而不是捏合或滑動手勢）。

那些認為屏幕滾動會抹殺用戶參與度的觀念是用戶體驗中得一大謬見，而且這一謬見很難克服。但偉大的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)容。點擊鼠標即可實現(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鼠標點擊。就在兩年前，由于大多數(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ā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è)備是手表、項鏈，還是鞋子里的芯片，與皮膚接觸的人機交互將會越來越受注重，其每一個細節(jié)都將起到重要作用。從今往后，設(shè)計界將更多地關(guān)注如何讓用戶對皮膚上的設(shè)備感覺舒適。

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

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

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

分享標題：網(wǎng)站設(shè)計：交互設(shè)計的未來
新聞來源：http://muchs.cn/news37/227387.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站策劃、App開發(fā)、全網(wǎng)營銷推廣、標簽優(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)