WEB交互設計中的視覺結構如何設計

本篇交互設計教程探討了WEB交互設計中的視覺結構如何設計，希望閱讀本篇文章以后大家有所收獲，幫助大家對交互設計的理解更加深入。

網站的交互設計分2種：流程交互和界面交互(即”單頁面交互”或“小交互”),而界面交互又包含2類：“視覺結構”和“動態(tài)模塊”。

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

何謂視覺結構?

界面信息按邏輯關系、包含關系和先后順序，進行排列、組織后形成的模塊，即為視覺結構。

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

再如Blog的視覺結構

這些大的界面視覺結構都是由一個個小的模塊結構組成(如下圖)：

視覺結構的對比：

以上是2款網頁游戲中關于“農田升級”時的不同表現方式，哪一種視覺結構更易讓用戶接收信息并操作?

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

1. 最常見的情況是公司無交互設計師，產品信息未經過梳理就傳達給UI設計師了，最后產出了一個可用性比較差的產品。 互聯網的一些事

我們常常看到：PM把設計訴求提供給UI，UI也按部就班的完全執(zhí)行，可出來的東西就是感覺有問題，但也說不出到底為什么，于是一版接一版不停的改，最后……這個沉重的負擔壓得UI直不起腰來，這不公平。

此時UI設計師或產品經理要大膽的站出來：“我們需要交互設計師來幫我們梳理信息!”

當然，交互設計師也要積極主動回應一下。

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

這種情況下，交互設計師(或產品經理)的個人魅力和溝通能力尤為重要，既不能打擊UI設計師的積極性，又要確保UI設計師利用其專業(yè)知識在視覺結構內進行充分發(fā)揮，這是一種藝術。

視覺結構對于信息架構的作用：

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

攻守平衡的關隘： 互聯網的一些事

視覺結構，上可攻信息架構，下可守界面設計。一個交互設計師對信息的理解有多深?看看他原型中的視覺結構就知道了。 互聯網的一些事

當前標題：WEB交互設計中的視覺結構如何設計
URL分享：http://m.kartarina.com/news34/317134.html

成都網站建設公司_創(chuàng)新互聯，為您提供手機網站建設、虛擬主機、品牌網站建設、網站策劃、軟件開發(fā)、網站導航

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯