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

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

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

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

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

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

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

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

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

1.?最常見的情況是公司無交互設(shè)計師，產(chǎn)品信息未經(jīng)過梳理就傳達給UI設(shè)計師了，最后產(chǎn)出了一個可用性比較差的產(chǎn)品。
我們常?？吹剑篜M把設(shè)計訴求提供給UI，UI也按部就班的完全執(zhí)行，可出來的東西就是感覺有問題，但也說不出到底為什么，于是一版接一版不停的改，最后……這個沉重的負擔(dān)壓得UI直不起腰來，這不公平。
此時UI設(shè)計師或產(chǎn)品經(jīng)理要大膽的站出來：“我們需要交互設(shè)計師來幫我們梳理信息！”
當然，交互設(shè)計師也要積極主動回應(yīng)一下。

2.還有一種情況：由于視覺設(shè)計本身是一種比較主觀的創(chuàng)作性工作，那些已經(jīng)被制定好的視覺結(jié)構(gòu)常常因設(shè)計師的“審美需要”而被剝離、切割。UI設(shè)計師也常常為滿足個人表現(xiàn)欲，加入許多不必要的線條和修飾……諸如此類，很多產(chǎn)品上線后的可用性可想而知。
這種情況下，交互設(shè)計師（或產(chǎn)品經(jīng)理）的個人魅力和溝通能力尤為重要，既不能打擊UI設(shè)計師的積極性，又要確保UI設(shè)計師利用其專業(yè)知識在視覺結(jié)構(gòu)內(nèi)進行充分發(fā)揮，這是一種藝術(shù)。

視覺結(jié)構(gòu)對于信息架構(gòu)的作用：
因為視覺結(jié)構(gòu)中承載著信息，所以在某種程度上它也起到詮釋、部分驗證信息架構(gòu)是否合理的作用。

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

問題和后果：
信息架構(gòu)出了問題(譬如一級導(dǎo)航里缺內(nèi)容，流程走不通等等)，則會導(dǎo)致產(chǎn)品根本不能用。
視覺結(jié)構(gòu)不清晰時，我們接收信息的速度就會變慢，導(dǎo)致產(chǎn)品不易用。

換句話說，信息架構(gòu)如果考慮不明白，視覺結(jié)構(gòu)做得再好也白搭，而UI設(shè)計最終是充當尸體彩繪和替罪羊的角色。
當我們對眾多“尸彩產(chǎn)品”憤怒的時候，是否也該反思一下，到底是什么原因造成的？

來源：http://www.ueui.com.cn/user-experience/interactive-design-vision-frame.html