網(wǎng)頁設(shè)計,四個實用的網(wǎng)頁設(shè)計構(gòu)圖原則

來源:blog.enqoo 作者:blog.enqoo 學(xué)習:1894人次

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

Mount Barker High School

網(wǎng)頁設(shè)計,四個實用的網(wǎng)頁設(shè)計構(gòu)圖原則

Wonder Bread Ballon

網(wǎng)頁設(shè)計,四個實用的網(wǎng)頁設(shè)計構(gòu)圖原則

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

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

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

不對稱平衡

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

Orangina European Site

網(wǎng)頁設(shè)計,四個實用的網(wǎng)頁設(shè)計構(gòu)圖原則

The Enterprise Foundation

網(wǎng)頁設(shè)計,四個實用的網(wǎng)頁設(shè)計構(gòu)圖原則

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

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

水平平衡

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

這是最經(jīng)典的一種布局設(shè)計,如果你的客戶比較傳統(tǒng),那么你的設(shè)計也應(yīng)該簡單明了。這里有個案例。

Business Accessorie

網(wǎng)頁設(shè)計,四個實用的網(wǎng)頁設(shè)計構(gòu)圖原則

垂直平衡

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

Portfolio by Ryan M. Stryker

網(wǎng)頁設(shè)計,四個實用的網(wǎng)頁設(shè)計構(gòu)圖原則

Paradox Labs

網(wǎng)頁設(shè)計,四個實用的網(wǎng)頁設(shè)計構(gòu)圖原則

結(jié)論

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

學(xué)習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!