UI設計技巧:網頁結構清晰明了的結構設計

來源:互聯網
上載者:User

文章描述:在介面設計的三大元素中,結構是基礎,值得深入研究,再配合顏色和尺寸的運用,才能設計出友好的介面。

構建介面視覺層級的元素有顏色的顯著程度,圖片、文字的尺寸大小,還有最基礎的,內容的組織圖。

結構設計是指對介面內容進行分組,對介面中的資訊、資料進行設計使之結構化呈現的過程。

好的結構設計能使介面資訊傳達更加清晰、快捷。那麼,如果進行結構設計呢?

結構設計———內容的分組

使用線、框、背景色來分組

這是最常見的分組方式,在UI設計中曆史悠久。

使用線來分組

使用框來分組

使用背景色分組

不管是線、框,還是背景色,都是可見的邊界,本來引入這些可見邊界的目的就是為了使資訊的呈現更加清晰,但是這些視覺元素的加入也在一定程度上增加了介面的淩亂感。所以,現在越來越多的會利用空間的遠近來對介面內容進行分組。

利用空間的遠近來對介面內容進行分組

從XP到win7,變化很明顯。

網頁設計中也是一樣,越來越多的新介面採用極簡主義的思路,只保留了極少的線和背景色,更多時候是通過拉大區塊之間的距離來分組。

喜歡深究的人也許會問,為何沒有可見邊界,我們也能清楚的根據距離的遠近來對資訊進行分組呢?

關於這一現象,在20世紀早期,一個德國的心理學家研究小組就進行過研究,試圖解釋人類視覺的工作原理。他們觀察了許多視覺現象,並提出了格式塔(Gestalt)原理。針對這一現象,是其中的"接近性"原理。

[1] [2]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。