網站互動設計理論:導致視覺結構混亂的因素

網站的互動設計分2種：流程互動和介面互動（即"單頁面互動"或“小互動”）,而介面互動又包含2類：“視覺結構”和“動態模組”。

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

何謂視覺結構？
介面資訊按邏輯關係、內含項目關聯性和先後順序，進行排列、組織後形成的模組，即為視覺結構。

這個介面結構可以很大，也可以很小。拿Igoogle的三欄式來舉例,其視覺結構是這樣的：

再如Blog的視覺結構

這些大的介面視覺結構都是由一個個小的模組結構組成（如下圖）：

視覺結構的對比：

以上是2款網頁遊戲中關於“農田升級”時的不同表現方式，哪一種視覺結構更易讓使用者接收資訊並操作？

導致視覺結構混亂的因素有哪些？

1. 最常見的情況是公司無互動設計師，產品資訊未經過梳理就傳達給UI設計師了，最後產出了一個可用性比較差的產品。
我們常常看到：PM把設計訴求提供給UI，UI也按部就班的完全執行，可出來的東西就是感覺有問題，但也說不出到底為什麼，於是一版接一版不停的改，最後……這個沉重的負擔壓得UI直不起腰來，這不公平。
此時UI設計師或產品經理要大膽的站出來：“我們需要互動設計師來幫我們梳理資訊！”
當然，互動設計師也要積極主動回應一下。

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

視覺結構對於資訊架構的作用：
因為視覺結構中承載著資訊，所以在某種程度上它也起到詮釋、部分驗證資訊架構是否合理的作用。

攻守平衡的關隘：
視覺結構，上可攻資訊架構，下可守介面設計。一個互動設計師對資訊的理解有多深？看看他原型中的視覺結構就知道了。

問題和後果：
資訊架構出了問題(譬如一級導航裡缺內容，流程走不通等等)，則會導致產品根本不能用。
視覺結構不清晰時，我們接收資訊的速度就會變慢，導致產品不易用。

換句話說，資訊架構如果考慮不明白，視覺結構做得再好也白搭，而UI設計最終是充當屍體彩繪和替罪羊的角色。
當我們對眾多“屍彩產品”憤怒的時候，是否也該反思一下，到底是什麼原因造成的？