網(wǎng)頁設(shè)計(jì)設(shè)計(jì)理論（純干貨），看這一篇就夠了

時(shí)間：2023-10-03 20:36:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-03 20:36:01 來源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁設(shè)計(jì)設(shè)計(jì)理論（純干貨），看這一篇就夠了：

這兩天正好接了一私單，鉆研了一下網(wǎng)頁設(shè)計(jì)，也和業(yè)內(nèi)大佬做了很多探討，得出以下結(jié)論，分享出來（有點(diǎn)長(zhǎng)，請(qǐng)耐心看完）：

看不見的力：間距和形狀（排版及結(jié)構(gòu)）

您的“數(shù)據(jù)/墨水”比率

留意使用空白越多，“數(shù)據(jù)/墨水比率”越高。這是信息設(shè)計(jì)大師Edward Tufte提出的概念。這是每滴墨水（或者在移動(dòng)和網(wǎng)頁設(shè)計(jì)的情況下）每一個(gè)像素傳遞多少信息的函數(shù)。

左側(cè)的圖形比右側(cè)的圖形具有更高的數(shù)據(jù)/墨水比。圖形是否真的需要用“墨水”填充？不，它可以與點(diǎn)和線很好地通信。

如果您更進(jìn)一步，然后刪除線，只留下點(diǎn)，該怎么辦？

現(xiàn)在，溝通破裂了。是的，您可以看到所有數(shù)據(jù)點(diǎn)，但是現(xiàn)在您已經(jīng)失去了有關(guān)數(shù)據(jù)如何隨時(shí)間變化的“故事”。另外，很難與簡(jiǎn)單的散點(diǎn)圖區(qū)分開來，在散點(diǎn)圖中，“時(shí)間”不是變量之一，數(shù)據(jù)也不是線性的。

認(rèn)為更接近的項(xiàng)目是相關(guān)的

我們了解了元素的對(duì)齊方式如何暗示這些元素之間的關(guān)系。同樣重要的是這些元素之間的距離如何。

這只是一個(gè)簡(jiǎn)單的正方形網(wǎng)格，就像地板上的瓷磚一樣。

但是，如果在正方形的垂直行之間創(chuàng)建更寬的水平間距，則現(xiàn)在有一系列。

因此，當(dāng)上圖中的數(shù)據(jù)發(fā)生急劇變化時(shí)，大腦可能會(huì)想以錯(cuò)誤的順序連接點(diǎn)，因?yàn)橐粋€(gè)點(diǎn)與另一個(gè)點(diǎn)更近。

將空白用于干凈的布局

這些原理超越了線形圖。它們存在于您設(shè)計(jì)的所有內(nèi)容中。尤其是在為小屏幕設(shè)計(jì)時(shí)，您不希望浪費(fèi)像素，而是要設(shè)計(jì)具有高數(shù)據(jù)/墨水比的設(shè)計(jì)。

設(shè)計(jì)人員傾向于使用網(wǎng)格來幫助組織布局中的信息。網(wǎng)格有助于對(duì)齊元素（例如文本行），然后創(chuàng)建彼此相關(guān)的信息區(qū)域。

這是在網(wǎng)格上設(shè)計(jì)的基本布局。左側(cè)是導(dǎo)航，較大的區(qū)域包含主要內(nèi)容。

這種布局很好，但是請(qǐng)注意導(dǎo)航之間的空白與主要內(nèi)容區(qū)域內(nèi)的文本列之間的空白是相同的。

稍微擴(kuò)大導(dǎo)航區(qū)域和主要內(nèi)容區(qū)域之間的裝訂線是有意義的。

現(xiàn)在，導(dǎo)航和主要內(nèi)容之間有了更清晰的界限，我們要做的就是添加一些空白。

使用空格進(jìn)行清晰的排版

我們了解了大小調(diào)整是可用于創(chuàng)建印刷層次結(jié)構(gòu)的眾多因素之一?？崭褚部梢詭椭M織排版。

例如，查看此標(biāo)頭，元數(shù)據(jù)和正文。

由于它們的尺寸是從不同的比例中選擇的，因此它們之間具有和諧的尺寸關(guān)系，但是它們看起來很草率！

問題是沒有考慮這些元素之間的負(fù)空間。

元數(shù)據(jù)行已經(jīng)與標(biāo)頭很好地區(qū)分了：它的大小不同，大小寫都大，甚至間隔很小。

一個(gè)很棒的技巧是使用元數(shù)據(jù)類型的高度來確定它與標(biāo)頭之間應(yīng)該有多少空間。像這樣：

通常，您會(huì)用眼球找出此間距。沒有數(shù)學(xué)方法可以準(zhǔn)確地告訴您多少間距。它是行高，使用的邊距或填充量以及特定字體的特征的函數(shù)。

現(xiàn)在，那個(gè)身體副本怎么樣？

元數(shù)據(jù)確實(shí)非?？拷鼧?biāo)頭是有意義的，但是標(biāo)頭不必太靠近正文副本。實(shí)際上，標(biāo)頭和元數(shù)據(jù)可以是它們自己的單元。

您可以使用從標(biāo)題頂部到元數(shù)據(jù)底部的距離作為指導(dǎo)，并將該距離的一半放在元數(shù)據(jù)和正文之間。

結(jié)論

通過考慮如何塑造布局并與空白空間進(jìn)行交流，您的設(shè)計(jì)將看起來更清晰，更清晰，同時(shí)更加實(shí)用，并且轉(zhuǎn)換效果更好。

---

看不見的力：大小，對(duì)比度和平衡

更大的東西看起來更重要

顯而易見，當(dāng)您將元素放大時(shí)，它看起來比較小的元素更重要。

但是，這需要與影響視覺層次的其他因素一起考慮。例如，這兩個(gè)元素具有相同的重要性級(jí)別，因?yàn)樗鼈兊拇笮∠嗤?br>
如果有的話，您將在看到底部元素之前先看到頂部元素。

但是，如果將底部元素設(shè)置為大于頂部元素，它將顯得更為重要。

但是，其他因素，例如視覺重量（您使用的是粗體還是淺色字體）或顏色對(duì)比，可能會(huì)逆轉(zhuǎn)較大尺寸的效果。

在此插圖中，較輕的元素看起來不那么重要，即使它更大。

但是，僅通過給相同的插圖提供深色背景，現(xiàn)在，較輕（和較大）的元素就占了主導(dǎo)地位，這要?dú)w功于它與較小元素相比對(duì)背景的反差更大。

進(jìn)行有意義的尺寸更改

尤其是在設(shè)計(jì)當(dāng)今時(shí)代的小屏幕時(shí)，您應(yīng)該有目的地使用尺寸更改。如果沒有必要的話，將字體變大（從而占用寶貴的屏幕空間）毫無意義。

只要有可能，您都可以使用上述因素來更改視覺層次，但是遲早需要使一件事比另一件事大。只是不要隨便做。

看一下這些不同的元素，每個(gè)元素都比前一個(gè)更大。

現(xiàn)在，對(duì)您來說更清晰地讀：是該布局還是該布局？

第二個(gè)示例中的元素是根據(jù)變化的比例來確定大小的。每個(gè)字體大小都與下一個(gè)最小大小相關(guān)，并且與較大字體具有相同的數(shù)學(xué)關(guān)系。

可變比例的字體大小彼此之間成比例關(guān)系。比例有助于使設(shè)計(jì)的各個(gè)部分看起來像它們屬于一起。

您可以在MailChimp徽標(biāo)中看到實(shí)際的比例。

構(gòu)成黑猩猩特征的每個(gè)圓圈彼此之間的相關(guān)系數(shù)是0.75。例如，組成腹部的圓是組成身體的圓的0.75。設(shè)計(jì)此徽標(biāo)的公司Hicks Design是故意這樣做的！

不要一味崇拜黃金比

你們中的許多人可能正在考慮所謂的“黃金比例”，該比例大肆宣傳。黃金比率約為1：1.618。是的，如果黑猩猩建立在黃金分割率的基礎(chǔ)上，它仍然會(huì)很有吸引力，但是從客觀上講，它不會(huì)更具吸引力。盡管進(jìn)行了大肆宣傳，但沒有證據(jù)表明“黃金比例”比其他受歡迎的比例（例如.75或.67）更具吸引力。

為了說明這一點(diǎn)，我曾經(jīng)對(duì)我的電子郵件列表進(jìn)行過調(diào)查，以了解他們發(fā)現(xiàn)上述哪個(gè)矩形更具吸引力。其中一個(gè)是正方形，另一個(gè)是0.75矩形，另一個(gè)是0.67矩形，另一個(gè)是“金色”矩形。哪個(gè)矩形對(duì)您最有吸引力？

以下是民意調(diào)查結(jié)果：

• 左上（平方）：8％
• 右上角（3：4矩形）：29％
• 左下角（2：3矩形）：37％
• 右下角（“黃金”比例）：25％

如您所見，所謂的金色矩形效果非常好，但它并不是最吸引人的矩形。

在這種情況下，2：3矩形會(huì)獲勝，但請(qǐng)不要過多閱讀。關(guān)鍵是，從黃金分割率到3：4的任何事物都將比正方形更具吸引力。

您可以使用這方面的知識(shí)，讓您排版美觀，而且節(jié)省時(shí)間，如果你與你的排版預(yù)先設(shè)置不同的規(guī)模運(yùn)行。

例如，這些是我一直使用的字體大小。每個(gè)尺寸大約是先前尺寸的0.75（略有四舍五入）。

使用.75刻度而不是黃金分割比例的附帶好處是，數(shù)學(xué)在您的腦海中變得容易得多：16％的75％是多少？簡(jiǎn)單！16的61.8％是多少？嗯

結(jié)論

通過考慮您所做的尺寸更改，您的設(shè)計(jì)將變得更清晰，更清晰，同時(shí)更加實(shí)用，并且轉(zhuǎn)換效果更好。如果使用不同的比例，實(shí)際上可以更快地進(jìn)行出色的設(shè)計(jì)！

---

隱形力：對(duì)齊，方向和焦點(diǎn)

設(shè)計(jì)充滿了“無形的力量”，所有這些都有助于進(jìn)行清晰清晰的溝通。如果您不愿意只獲得正確的字體或只選擇正確的顏色組合，那么如果您不注意這些看不見的力量，您的設(shè)計(jì)就會(huì)慘敗。

這是關(guān)于這些力的由三部分組成的系列文章中的第一篇，因此讓我們從對(duì)齊，方向和聚焦開始。

介紹“元素”

要真正地通過設(shè)計(jì)的無形力量來思考，您需要停止將設(shè)計(jì)視為字體，顏色，圖像和文本，而開始將所有這些事物視為“元素”。

您的每個(gè)標(biāo)題都是一個(gè)“元素”，正文的每個(gè)段落都是一個(gè)大的“元素”，每個(gè)圖像都是一個(gè)“元素”。

在每個(gè)元素中都有另一個(gè)元素-您也可以將它們稱為“子元素”。您的徽標(biāo)可能具有“符號(hào)”元素和“文本”元素。文本部分中的每個(gè)字母都可以視為自己的元素。

所有這些元素討論都讓我想到了化學(xué)課（我從沒參加過），但這實(shí)際上是適當(dāng)?shù)?。?dāng)您正確排列元素時(shí)，您會(huì)從頁面跳出爆炸性的東西。當(dāng)您隨意安排它們時(shí)，您會(huì)感到很傻。

對(duì)準(zhǔn)

設(shè)計(jì)具有挑戰(zhàn)性，因?yàn)槟仨氄加脽o聊的二維空間，并使其有趣，同時(shí)還要清晰地進(jìn)行交流。尤其是在今天，對(duì)于微小的可移動(dòng)屏幕和可穿戴屏幕，盡可能高效地執(zhí)行此操作很重要。每個(gè)小像素都需要做好工作。

這就是為什么對(duì)齊如此重要的原因。通過使元素彼此對(duì)齊，您可以說很多話。

例如，這些正方形全部對(duì)齊。

而且，如果我們改變對(duì)齊方式，則會(huì)完全改變構(gòu)圖。

而且，如果我們打破這種一致，那就顯得混亂了。

如果我們使用社交媒體圖標(biāo)代替正方形，則可以直接看到對(duì)齊方式如何變得有用。

方向

對(duì)齊元素時(shí)，可以用假想線創(chuàng)建方向感。真正的幻想設(shè)計(jì)師將這條假想線稱為“軸”?？梢詫⑵湟暈檐囕喩系妮S：車輪的所有重量都圍繞該軸旋轉(zhuǎn)。必須保持平衡。同樣，軸有助于控制合成物的平衡。

看到所有排列的元素了嗎？您可以將它們稱為此合成的軸。

如果在該軸附近對(duì)齊其他元素，它仍將主導(dǎo)并控制構(gòu)圖。

您可以排列文本：居中，向左齊平或向右齊平（避免在Web上對(duì)齊字體），然后沿該對(duì)齊方式創(chuàng)建一個(gè)軸。

將文本居中時(shí)，將創(chuàng)建一個(gè)軸，文本的所有粗細(xì)都圍繞該軸旋轉(zhuǎn)。其余的構(gòu)圖也希望以該軸為中心。

因此，如果您在居中的文本旁邊扔一些齊平的左文本，則該組合開始變得混亂。現(xiàn)在您有兩個(gè)互相對(duì)抗的軸，這不是一個(gè)可怕的想法嗎？

例外情況是居中對(duì)齊的元素跨構(gòu)圖的寬度，并且向左平移或向右平移元素在該構(gòu)圖內(nèi)。這樣，軸就不會(huì)互相打架了。

請(qǐng)注意，兩列內(nèi)容都設(shè)置為向左對(duì)齊。

或者，您可以通過使一列向右平移而另一列向左平移來在排水溝外創(chuàng)建軸。

焦點(diǎn)

到目前為止，我一直專注于垂直軸。您也可以有水平軸（或?qū)蔷€，但這在Web和移動(dòng)設(shè)計(jì)中很少見）。

當(dāng)兩個(gè)強(qiáng)軸相交時(shí)，通常會(huì)創(chuàng)建一個(gè)焦點(diǎn)區(qū)域。眼睛自然會(huì)跟隨任何強(qiáng)軸，因此如果兩個(gè)軸相交，則眼睛將在該位置花費(fèi)大量時(shí)間。

在網(wǎng)絡(luò)或移動(dòng)設(shè)計(jì)中的任何給定時(shí)刻，您可能都希望用戶集中精力，因此您可以使用相交的軸來吸引對(duì)該點(diǎn)的關(guān)注

結(jié)論

通過使用對(duì)齊來構(gòu)建軸，控制方向并建立焦點(diǎn)區(qū)域，您可以更好地實(shí)現(xiàn)您的設(shè)計(jì)目標(biāo)：是提高可讀性還是推動(dòng)轉(zhuǎn)換。

---

這便是網(wǎng)頁設(shè)計(jì)關(guān)于排版的理論，希望能助您一臂之力~奧利給