版式設計入門篇!四個超實用的網頁設計構圖原則

編者按:四個經典構圖原則幫你入門版式設計!今天聊一聊常見的幾類構圖方式:對稱平衡、不對稱平衡、水平平衡以及垂直平衡,有分析有案例,強烈推薦學習,來感受下 >>>

手把手帶你掌握構圖:

對稱平衡

如果你想在你的網頁看上去美觀和優雅,那么你應該做一個網站對稱。這種效果很容易通過將類似的對象上的中心軸線的任一側來實現。這可以通過相同的尺寸,基于網格的文本段落,或具有匹配文本相片的圖像進行說明。這里有一對遵循這一格式的網站設計實例。

Mount Barker High School?

版式設計入門篇!四個超實用的網頁設計構圖原則

Wonder Bread Ballon

版式設計入門篇!四個超實用的網頁設計構圖原則

您可以輕松地在網上找到各地的許多中心的布局,實際上,對稱性設計被認為是最賞心悅目的設計。這也是大多數人的典型思維模式。

當然,當你準備采用對稱性設計的時候,更多的時候它并沒有你想象中那么膚淺簡單??紤]到這點,你不妨以平面配色方案開始。如果你是新手,可以盡量多運用白色,直到你有足夠的能力創造你自己的設計。

畢竟這樣的設計最賞心悅目,所以大多數人都喜歡干凈簡潔并且完美對稱的網頁。但是更多別出心裁的設計師會采用一些更加新穎的一些更復雜的設計布局。

不對稱平衡

不對稱平衡帶來一種自由隨意的感覺。盡管有時候看上去不是那么自然,但是它還是經常在網頁設計中得到實用。你可以看到不對稱平衡常常運用在一些大的高清圖片作為頁面背景,主體遠離了中心軸線的情況,目的是為了把更醒目的標題留在中間。

Orangina European Site

版式設計入門篇!四個超實用的網頁設計構圖原則

The Enterprise Foundation

版式設計入門篇!四個超實用的網頁設計構圖原則

它的設計的主要目的是移位到左邊或右邊(或頂部或底部)。因此,如果您決定要用不對稱功能,你應該準備好多次的試驗,以避免混淆網站的訪問者。

無論什么類型的對稱,核心就是你要讓整體平衡。

水平平衡

水平平衡是網頁最經典的頁面布局。大部分人都習慣從左向右閱讀,所以左右布局也是最自然的一種布局方式。

這是最經典的一種布局設計,如果你的客戶比較傳統,那么你的設計也應該簡單明了。這里有個案例。

Business Accessorie

版式設計入門篇!四個超實用的網頁設計構圖原則

垂直平衡

垂直結構用于頭部和底部的元素非常相似的情形。這樣的布局往往運用于小圖片的展示,比如下面的例子:

Portfolio by Ryan M. Stryker

版式設計入門篇!四個超實用的網頁設計構圖原則

Paradox Labs

版式設計入門篇!四個超實用的網頁設計構圖原則

結論

平衡是網頁設計中最重要也是最容易忽略的東西。視覺上的平衡可以通過對界面元素的布局來調和,比如選擇最合適的配合,元素的大小和位置。有的時候,也需要大膽創新,不要拘泥于傳統。

【一年一度的好萊塢專題】

分分鐘創造勁爆場面的免費筆刷打包!
《好萊塢大片范兒!12組逼真的爆炸特效筆刷免費打包》

全手工打造好萊塢品質海報教程!
《PS教程!教你創建好萊塢品質的電影海報字體》

人氣超高的好萊塢光暈濾鏡!
《好萊塢特效PS光暈濾鏡下載(KNOLL LIGHT FACTORY 3.2)》

原文地址:blog.enqoo

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量90萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
官方微信:想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎?添加優設哥微信號:youshege

版式設計入門篇!四個超實用的網頁設計構圖原則

收藏 10
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。