網頁設計網格系類-無形力量：陣列，方向和焦點

設計充滿了「無形的力量」，所有這些都有助於清晰和清晰的溝通儘管你可能會想要得到正確的字體，或者選擇正確的顏色組合，但如果你不注意這些看不見的力量，你的設計就會失敗。

這是關於這些力量的三部分系列中的第一部分，所以讓我們從對齊，方向和重點開始。

介紹「元素」

要真正思考設計的無形力量，您需要停止將您的設計看作字體，顏色，圖像和文本，並開始將所有這些事情都視為「元素」。

每個標題都是一個「元素」，每個正文文本段落都是一個大「元素」，每個圖片都是一個「元素」。

在這些元素中的每一個元素都是另一個元素 - 你也可以稱它們為「子元素」。您的徽標可能有一個「符號」元素和一個「文本」元素。文本部分中的每個字母都可以被認為是它自己的元素。

所有這些元素的談話都讓我想起化學課（我從來沒有拿過），但實際上這是合適的。當你正確地安排元素時，你會得到一些跳出頁面的爆炸物。當你隨意安排他們時，你會發獃。

對準

設計是具有挑戰性的，因為你必須採取一個無聊的二維空間，並使其變得有趣，同時清晰地溝通。特別是今天，使用微型移動和可穿戴屏幕，儘可能高效地完成這一點非常重要。每個小像素都需要做它的工作。

這就是為什麼對齊如此重要。通過將元素彼此對齊，您可以說很多。

例如，這些正方形都是對齊的。

我們改變他們對齊的方式，它會完全改變構圖。

如果我們打破這種路線，它看起來很混亂。

如果我們不是使用社交媒體圖標的方塊，而是直接看到對齊如何變得有用。如果這些社交媒體圖標如何：

相反看起來像這樣：

方向

當對齊元素時，您會用虛線創建方向感。真的很花哨的設計師把這個想像的線條稱為「軸線」。把它想像成一個輪子上的軸：輪子的所有重量都圍繞該軸旋轉。它必須是平衡的。同樣，一個軸有助於控制構圖的平衡。

查看所有這些排隊的元素？你可以稱它們為這個組合的一個軸。

如果您將該軸附近的其他元素對齊，它仍然支配並控制構圖。

你的祖父是對的：你必須小心你的斧頭。例如，避免將中心對齊的文本與「不對稱」構圖混合。

但是，您可以排列文字：居中，向左平移或向右平移（避免在Web上顯示類型），沿著該對齊方式創建一個軸。

以文本為中心時，您將創建一個軸，並且文本的所有權重都圍繞該軸旋轉。構圖的其餘部分也想圍繞該軸居中。

所以，如果你在中間文字旁邊扔出一些平齊的左邊文本，組合開始變得混亂。現在你有兩個相互對抗的斧頭，這不是一個可怕的想法嗎？

例外情況是，中心對齊的元素跨越合成的寬度，並且左對齊或右對齊元素位於該合成內。然後這些斧頭不會互相爭鬥。

請注意，這兩列內容都設置在左邊。

這是您在移動設計中常見的一種模式。在Yelp應用程序的這個屏幕截圖中，頂部和底部的菜單欄有一個居中的方向，而屏幕的其餘部分設置在左側。

或者，您可以通過將一列向右平齊而將另一列向左平齊，從而創建一條軸線。

焦點

到目前為止，我專註於垂直軸。你也可以有水平軸（或對角線，但在網頁和移動設計中很少見）。

當兩個強軸交叉時，通常會創建一個焦點區域。眼睛自然地跟隨任何強軸，所以如果兩個軸相交，眼睛將在該點花費大量時間。

在網路或移動設計的任何特定時刻，都有可能讓用戶專註於某些事情，因此您可以使用相交的軸來吸引對該位置的關注，例如在此著陸頁中：

齊平的左側文本創建一個軸，「立即購買」按鈕與圖像的對齊會創建另一個軸。它們相交的地方創造了一個重點領域。

結論

通過使用對齊來構建坐標軸，控制方向並建立焦點區域，您可以更好地實現您的設計目標：無論是增強可讀性還是推動轉換。

堅持下一篇文章，我將討論如何調整元素的大小，使設計和諧，美觀，清晰。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！