版式設(shè)計(jì)入門篇!四個(gè)超實(shí)用的網(wǎng)頁設(shè)計(jì)構(gòu)圖原則

游某
1 評論 12771 瀏覽 4 收藏 5 分鐘

編者按:四個(gè)經(jīng)典構(gòu)圖原則幫你入門版式設(shè)計(jì)!今天聊一聊常見的幾類構(gòu)圖方式:對稱平衡、不對稱平衡、水平平衡以及垂直平衡,有分析有案例,強(qiáng)烈推薦學(xué)習(xí),來感受下 。

對稱平衡

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

Mount Barker High School?

Wonder Bread Ballon

visual-balance-web-design-2

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

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

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

不對稱平衡

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

Orangina European Site

visual-balance-web-design-4

The Enterprise Foundation

visual-balance-web-design-5

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

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

水平平衡

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

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

Business Accessorie

visual-balance-web-design-6

垂直平衡

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

Portfolio by Ryan M. Stryker

visual-balance-web-design-7

Paradox Labs

visual-balance-web-design-8

結(jié)論

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

原文地址:blog.enqoo

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!
专题
15309人已学习13篇文章
本专题的文章分享了数据分析报告写作指南。
专题
17336人已学习13篇文章
出于文本易读性方面的考虑许多app都做了深色模式,本专题的文章分享了深色模式的设计指南。
专题
53498人已学习14篇文章
标题党,又爱又恨。但是如果你是运营,连标题都起不好,那就呵呵哒了。
专题
11651人已学习12篇文章
2023年双十一逐渐临近,各个电商平台也摩拳擦掌开始准备。本专题的文章分享了双十一营销玩法。
专题
12363人已学习14篇文章
近年来,盲盒大量出现在公众视野,引起了一波又一波消费热潮。本专题的文章分享了解读盲盒营销。
专题
12185人已学习12篇文章
LLM=Large Language Model 大语言模型,是一种基于深度学习的自然语言处理模型。它能够学习到自然语言的语法和语义,从而可以生成人类可读的文本。本专题的文章分享了大语言模型的知识。