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

來源:互聯網
上載者:User

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

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

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

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

再如Blog的視覺結構

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

視覺結構的對比

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

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

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

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

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

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

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

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



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。