在互聯(lián)網(wǎng)發(fā)展早期，很多網(wǎng)站的交互 ??設(shè)計(jì)其實(shí)非常簡(jiǎn)單，往往一個(gè)翻頁(yè)效果、一個(gè)簡(jiǎn)短的動(dòng)畫(huà)就能吸引到很多用戶。如今隨著互聯(lián)網(wǎng)的不斷更新迭代，技術(shù)不斷革新，網(wǎng)站交互也得到了很大程度的加強(qiáng)，可以說(shuō)當(dāng)前網(wǎng)站的交互效果是多種多樣的。交互是一門非常有意思的學(xué)科，它并不高深，它強(qiáng)調(diào)以人為本，關(guān)注的是細(xì)節(jié)和最最人之常情的用戶心理。你可以分析競(jìng)品來(lái)獲取靈感，但我們必須知道，交互的原理就在你自己身上，你身邊的每一個(gè)人都值得研究，需要的只是你的好奇和觀察。所以，在制作網(wǎng)站的時(shí)候一定要注意頁(yè)面的交互設(shè)計(jì)，那么，都有哪些地方要做好交互設(shè)計(jì)才能提高用戶體驗(yàn)?zāi)兀?/p>

網(wǎng)站本身應(yīng)該是很令人驚嘆的，然而網(wǎng)站也應(yīng)該需要正常使用。在進(jìn)行網(wǎng)站交互設(shè)計(jì)時(shí)應(yīng)該遵守某些設(shè)計(jì)慣例，讓網(wǎng)站方便瀏覽和理解，不要為了與眾不同而違背常規(guī)，相反，接受你將需要實(shí)現(xiàn)一定的規(guī)則的事實(shí)，能幫助你的用戶輕松地訪問(wèn)你的網(wǎng)站。對(duì)于任何一個(gè)Web應(yīng)用，與用戶互動(dòng)是最基本的要求。為Web應(yīng)用增加交互性，最常用的方法是 Javascript 或 jQuery、AJAX 了。如果目錄樹(shù)較長(zhǎng)，經(jīng)常需要滾動(dòng)，才能找到想要的內(nèi)容，使用起來(lái)極其不便。一個(gè)很人性化的功能，就是可以全部展開(kāi)和全部收起整個(gè)目錄。dtree 提供了兩個(gè)方法，一個(gè)是 openAll() 方法，用于展開(kāi)所有的節(jié)點(diǎn)，一個(gè)是 closeAll() 方法，用于收起所有的節(jié)點(diǎn)。

我們只需定義兩個(gè)鏈接，當(dāng)點(diǎn)擊鏈接時(shí)，分別調(diào)用調(diào)用 openAll() 和 closeAll() 方法，便可輕松實(shí)現(xiàn)目錄全部展開(kāi)和全部收起功能。map實(shí)現(xiàn)，在圖像上指定區(qū)域提供鏈接，map元素中name屬性的值，與左欄頂部圖像中map屬性的值相對(duì)應(yīng)。增加用戶操作感，用戶往往會(huì)不經(jīng)意選擇錯(cuò)誤的系統(tǒng)功能，那么產(chǎn)品設(shè)計(jì)就需要一個(gè)明確標(biāo)明 “緊急出口”的狀態(tài)或者功能規(guī)避不必要的操作，譬如：支持撤銷和重做。布局的目的是優(yōu)化信息展示結(jié)構(gòu)，讓用戶能更簡(jiǎn)單的理解頁(yè)面內(nèi)容并且能第一眼找到重點(diǎn)。在思考布局時(shí)，尤其需要關(guān)注幾點(diǎn)要素！它是否使用了常見(jiàn)的布局模式，比如ios的返回按鈕。

它是否對(duì)頁(yè)面元素進(jìn)行合理的分類，使相關(guān)的元素更加親密來(lái)加強(qiáng)理解；它是否能讓用戶一眼看到頁(yè)面重點(diǎn)，不會(huì)迷失在元素海洋里；排版是否符合用戶閱讀習(xí)慣，他能從左到右從上到下合理的在元素間移動(dòng)；排版是否符合用戶的操作習(xí)慣，比如最常見(jiàn)的移動(dòng)端右撇子用拇指操作的情景。美與簡(jiǎn)單的設(shè)計(jì)，不應(yīng)該包含不相關(guān)或不常用的信息。重點(diǎn)的內(nèi)容和核心的元素應(yīng)該與其他的信息形成鮮明的區(qū)別。譬如在配色上，可以選擇 1個(gè)主色，2個(gè)以內(nèi)的輔色，構(gòu)成整個(gè)設(shè)計(jì)的骨骼，用主色告知用戶目的與指示。交互的核心思考原則針對(duì)的是用戶行為，用戶在使用產(chǎn)品的過(guò)程里總是有一個(gè)目標(biāo)或者需求正在解決。

因此他開(kāi)始探索一個(gè)頁(yè)面，他不斷的的進(jìn)行一個(gè)又一個(gè)的行為，好的交互設(shè)計(jì)能夠考慮用戶在實(shí)施不同行為時(shí)的心理狀態(tài)并給予合情合理的反饋。交互性按鈕要做到清晰突出，并且點(diǎn)擊后與點(diǎn)擊前要有所區(qū)別。點(diǎn)擊瀏覽過(guò)的信息與未瀏覽過(guò)的信息要不同顏色以示區(qū)分，避免客戶重復(fù)點(diǎn)擊閱讀。當(dāng)頁(yè)面或應(yīng)用下載數(shù)據(jù)較慢時(shí)，載入過(guò)程應(yīng)該有提示。如果我們不考慮載入時(shí)的信息反饋，會(huì)讓頁(yè)面呈現(xiàn)假死的狀態(tài)。售后有保障，網(wǎng)站上要設(shè)置售后電話以及咨詢窗口，方便客戶咨詢產(chǎn)品使用問(wèn)題。搜索框出現(xiàn)的位置要清晰顯眼，并且對(duì)搜索結(jié)果中的相關(guān)字符用不同顏色表示，增加用戶的粘性，搜索結(jié)果頁(yè)一定要與用戶搜索意圖相符。

對(duì)比度是構(gòu)建視覺(jué)層次最重要的手段之一，也是讓視覺(jué)元素吸引用戶的絕佳方式。在網(wǎng)頁(yè)設(shè)計(jì)中，對(duì)比度不僅僅是通過(guò)色彩來(lái)呈現(xiàn)的，尺寸控制、形狀設(shè)計(jì)、位置調(diào)整也都能表現(xiàn)出對(duì)比度。當(dāng)頁(yè)面或應(yīng)用會(huì)向后臺(tái)下載數(shù)據(jù)較慢時(shí)，載入過(guò)程應(yīng)該有提示。如果我們不考慮載入時(shí)的信息反饋，會(huì)讓頁(yè)面呈現(xiàn)假死的狀態(tài)。一般而言用戶希望自己去控制系統(tǒng)交互，在執(zhí)行任務(wù)中，用戶應(yīng)該可以隨時(shí)中止或退出，而不是無(wú)奈的看著系統(tǒng)繼續(xù)。網(wǎng)站建設(shè)越來(lái)越強(qiáng)調(diào)沉浸式的體驗(yàn)，頁(yè)面和頁(yè)面之間切換也需要更加的流暢，轉(zhuǎn)場(chǎng)動(dòng)效需要更加的極致和平滑。偶爾使用的交互式動(dòng)畫(huà)可以提升你的網(wǎng)站內(nèi)容。