網(wǎng)站的交互設(shè)計(jì)分2種：流程交互和界面交互（即“單頁(yè)面交互”或“小交互”），而界面交互又包含2類(lèi)：“視覺(jué)結(jié)構(gòu)”和“動(dòng)態(tài)模塊”。

牟定網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái)到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專(zhuān)注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

何謂動(dòng)態(tài)模塊？簡(jiǎn)單的說(shuō)就是“AJAX”，它有幾種視覺(jué)呈現(xiàn)方式：彈出的浮動(dòng)層、Tab切換、展開(kāi) （側(cè)邊展開(kāi)或下拉展開(kāi)）

何謂視覺(jué)結(jié)構(gòu)？

界面信息按邏輯關(guān)系、包含關(guān)系和先后順序，進(jìn)行排列、組織后形成的模塊，即為視覺(jué)結(jié)構(gòu)。

這個(gè)界面結(jié)構(gòu)可以很大，也可以很小。拿Igoogle的三欄式來(lái)舉例，其視覺(jué)結(jié)構(gòu)是這樣的：

再如Blog的視覺(jué)結(jié)構(gòu)

這些大的界面視覺(jué)結(jié)構(gòu)都是由一個(gè)個(gè)小的模塊結(jié)構(gòu)組成（如下圖）：

視覺(jué)結(jié)構(gòu)的對(duì)比：

以上是2款網(wǎng)頁(yè)游戲中關(guān)于“農(nóng)田升級(jí)”時(shí)的不同表現(xiàn)方式，哪一種視覺(jué)結(jié)構(gòu)更易讓用戶(hù)接收信息并操作？

導(dǎo)致視覺(jué)結(jié)構(gòu)混亂的因素有哪些？

1. 最常見(jiàn)的情況是公司無(wú)交互設(shè)計(jì)師，產(chǎn)品信息未經(jīng)過(guò)梳理就傳達(dá)給UI設(shè)計(jì)師了，最后產(chǎn)出了一個(gè)可用性比較差的產(chǎn)品。

我們常?？吹剑篜M把設(shè)計(jì)訴求提供給UI，UI也按部就班的完全執(zhí)行，可出來(lái)的東西就是感覺(jué)有問(wèn)題，但也說(shuō)不出到底為什么，于是一版接一版不停的改，最后……這個(gè)沉重的負(fù)擔(dān)壓得UI直不起腰來(lái)，這不公平。

此時(shí)UI設(shè)計(jì)師或產(chǎn)品經(jīng)理要大膽的站出來(lái)：“我們需要交互設(shè)計(jì)師來(lái)幫我們梳理信息！”

當(dāng)然，交互設(shè)計(jì)師也要積極主動(dòng)回應(yīng)一下。

2.還有一種情況：由于視覺(jué)設(shè)計(jì)本身是一種比較主觀的創(chuàng)作性工作，那些已經(jīng)被制定好的視覺(jué)結(jié)構(gòu)常常因設(shè)計(jì)師的“審美需要”而被剝離、切割。UI設(shè)計(jì)師也常常為滿足個(gè)人表現(xiàn)欲，加入許多不必要的線條和修飾……諸如此類(lèi)，很多產(chǎn)品上線后的可用性可想而知。

這種情況下，交互設(shè)計(jì)師（或產(chǎn)品經(jīng)理）的個(gè)人魅力和溝通能力尤為重要，既不能打擊UI設(shè)計(jì)師的積極性，又要確保UI設(shè)計(jì)師利用其專(zhuān)業(yè)知識(shí)在視覺(jué)結(jié)構(gòu)內(nèi)進(jìn)行充分發(fā)揮，這是一種藝術(shù)。

視覺(jué)結(jié)構(gòu)對(duì)于信息架構(gòu)的作用：

因?yàn)橐曈X(jué)結(jié)構(gòu)中承載著信息，所以在某種程度上它也起到詮釋、部分驗(yàn)證信息架構(gòu)是否合理的作用。

攻守平衡的關(guān)隘：

視覺(jué)結(jié)構(gòu)，上可攻信息架構(gòu)，下可守界面設(shè)計(jì)。一個(gè)交互設(shè)計(jì)師對(duì)信息的理解有多深？看看他原型中的視覺(jué)結(jié)構(gòu)就知道了。

問(wèn)題和后果：

信息架構(gòu)出了問(wèn)題（譬如一級(jí)導(dǎo)航里缺內(nèi)容，流程走不通等等），則會(huì)導(dǎo)致產(chǎn)品根本不能用。

視覺(jué)結(jié)構(gòu)不清晰時(shí)，我們接收信息的速度就會(huì)變慢，導(dǎo)致產(chǎn)品不易用。

換句話說(shuō)，信息架構(gòu)如果考慮不明白，視覺(jué)結(jié)構(gòu)做得再好也白搭，而UI設(shè)計(jì)最終是充當(dāng)尸體彩繪和替罪羊的角色。

當(dāng)我們對(duì)眾多“尸彩產(chǎn)品”憤怒的時(shí)候，是否也該反思一下，到底是什么原因造成的？

當(dāng)前名稱(chēng)：交互設(shè)計(jì)中的視覺(jué)結(jié)構(gòu)
本文鏈接：http://weahome.cn/article/chohod.html