營銷型網(wǎng)站建設制作

2022-07-30    分類： 網(wǎng)站建設

如何在移動設計中使用空白
盡管在桌面上水平和垂直地處理著陸頁圖像，版式，線條和其他元素是一件相對簡單的事情，但在移動平臺上做到這一點卻比較棘手。平板電腦和手機的屏幕尺寸不同，如果您不遵循現(xiàn)代設計原則和隨之而來的圖形設計工具，則很容易隨意亂扔文字和圖像。由于客戶的電子商務成功取決于其頁面的可顯示性，因此很容易使您的業(yè)務潛在收入損失。

但是，平板電腦，移動電話和臺式機通常要處理  一件事，這通常是理所當然的：空白。通常，所有這些都歸結為無意間將空白視為被動的空白畫布，需要填充文本，圖像，線條等的所有內容元素。

“不過，與只是目標網(wǎng)頁的被動組成部分相反，空白可能是目標網(wǎng)頁難題中的關鍵部分。”
但是與空白只是登錄頁面的被動組成部分相反，空白可能是登錄頁面難題的關鍵部分。它可以將頁面上的所有內容緊密結合在一起，從而創(chuàng)建一個引人注目的，引人注目的網(wǎng)站，從美學上令人滿意并吸引客戶的客戶，從而創(chuàng)造一種使他們有充分理由回到客戶網(wǎng)站的理由。空白在布局中與內容本身一樣有效，并且有助于定義正向空間的邊界并為布局帶來平衡。

在本文中，我們將研究臺式機和移動設備上不同類型的空白，并深入研究在移動設備上使用空白的實踐。

模板圖標
成長第2卷：成為一名全面的Web設計自由職業(yè)者

獲得免費的《成長第2卷：成為一名全棧Web設計自由職業(yè)者》副本，該副本已發(fā)送到您的收件箱。

電子郵件

輸入您的電子郵件地址
輸入您的電子郵件-我們還將向您發(fā)送與Shopify相關的營銷電子郵件。您可以隨時取消訂閱。注意：該指南不會發(fā)送到基于角色的電子郵件，例如info @，developer @等。

我們的虛擬齒輪正在轉動。
請注意，
我們的電子郵件最多可能需要15分鐘
才能到達您的收件箱。
設計中的空白是什么？
空的網(wǎng)頁是您的主要空白，是其他所有內容和設計元素都聚集在其上的畫布：圖標，全彩色圖像，線條和幾何形狀以及您的文本。這些元素填滿畫布后，您將剩下故意留為空白的區(qū)域：裝訂線或小巷（列之間的空白），行高，句子和段落之間的間隔，頂部，底部，左側和右側的邊距，填充—都是空白。請注意，它們位于設計元素之間或位于單個設計元素之內，例如您選擇的印刷字形之間的空間。

用技術術語來說，設計者將空白稱為負空間。該技術定義消除了對空白的常見誤解：盡管使用了術語，但空白不必是白色的。它可以是黑色，棕色，黃色，紅色（您選擇的任何顏色），甚至可以滿足您為網(wǎng)頁增添功能的任何圖案，紋理和背景圖像。

白色空間設計
Mathieu Levesque的白色負空間。
白色空間設計院長布拉德肖
Dean Bradshaw的黑色負空間。
為什么空白很重要
空白在設計中可滿足多種目的。它可以用于：

美學。當您考慮如何設計目標網(wǎng)頁以精美地顯示在移動屏幕上時，空白至關重要。
有效的溝通。空格是一種重要的工具，可以平衡您在頁面上展示許多項目的需求與在考慮有效的視覺交流體驗的同時放置內容的需求。
引導眼睛。我們的視覺能力只能如此集中，直到它被太多轟炸我們感官的因素所困擾?？瞻资鞘谷似届o的因素，這是允許讀者消化要呈現(xiàn)給他們的東西的秘密。
您可能還會喜歡：關于空白需要了解的一切。

不同類型的空白
如果要通過移動屏幕優(yōu)化頁面的視覺效果，則需要了解空白在與內容元素保持適當平衡方面所起的作用。如果您的讀者猶豫不決地繼續(xù)閱讀，卻大吃一驚，找到了一個更具視覺吸引力的網(wǎng)站，您將無法出售。您需要了解微觀空間或宏空間以及主動或被動空白如何協(xié)同工作，以使讀者決定繼續(xù)使用頁面還是繼續(xù)前進。

微小的空白
微小的空白是內容元素之間的小空間：行和段落之間的空間以及網(wǎng)格圖像之間的空間，以便分隔菜單鏈接。微空白會直接影響您內容的可讀性，用戶的閱讀速度和理解力。

宏空白 
宏空白是您的大圖空白，畫布和所有頁面內容元素的容器。這是圍繞您的設計布局的空間。您可以在網(wǎng)站的右側和左側以及內容塊之間找到它。

“如果要通過移動屏幕優(yōu)化頁面的視覺效果，則需要了解空白在使內容元素達到適當平衡方面所起的作用。”
大多數(shù)設計師會為您提供有關實施宏空白的Google課程。它的標志性主頁非常簡單，使用戶免于分心，因此更容易集中精力放在用戶為什么首先出現(xiàn)的地方：進行搜索。在沒有任何大塊內容的情況下，網(wǎng)頁可以輕松，快速地加載-即使在遙遠的過去，Internet速度通常令人沮喪地緩慢爬網(wǎng)。

白色空間設計Google
Google臭名昭著的空白使用。
設計師還將空白視為主動或被動：

活動空白：使用空白可以改善頁面結構的布局，同時引導用戶瀏覽內容。
被動空格：空格在不引導讀者的情況下為版面增添了雅致。
空白設計樣本
Slideplayer的“基本網(wǎng)站設計”中的主動和被動空白示例。
移動空白設計的7個做法
誠然，在移動顯示器上擠入太多內容的需要限制了您可以使用的空白空間。由于無法使用大量空白空間，因此，智能，平衡的方法是的方法。使用空白，同時牢記一些實踐。

1.手指設計
為優(yōu)化移動觀看而設計時，首先要考慮的是將點擊目標限制為至少30到40像素，這是MIT觸摸實驗室（PDF）進行的一項研究，這是觸摸目標尺寸的理想范圍。除了尺寸，當然，您還需要在觸摸目標之間添加空白，以便用戶能夠達到他們想要的目標。

2.技術：分配≤15個用戶關注點
當您被迫在頁面上推送更多內容時，設計師Paul Boag建議您為自己分配15個用戶關注點。讓您添加到步伐成本中的每個項目1點。

如果一個屏幕比另一個屏幕更重要，則需要為其分配其他點以使其突出。由于只有有限的點可供使用，很明顯您不能將空白排除在等式之外。

3.創(chuàng)造性地使用空白
您可以考慮使用對比鮮明的顏色，形狀，字體大小和不對稱的負空間來為布局提供更多功能。作為一個活躍的設計元素，空白空間與周圍元素的感知息息相關。

4.重新排列導航菜單空白設計響應
在處理響應式設計時，您將需要為空白設置不同的斷點，以便為客戶提供持續(xù)的無縫體驗。

如果您的網(wǎng)站支持多個鏈接，則別無選擇，只能使用三欄式漢堡包圖標選擇隱藏菜單。不喜歡漢堡包圖標，并覺得看不見了什么？然后轉到標簽欄，就像Facebook一樣，放棄漢堡包，使用標簽。請記住，F(xiàn)acebook的內容比那里的許多網(wǎng)站都要多，因此您很可能也不會因此而迷失。

“移到較小的屏幕空間時，您絕不能與吸引人的設計要素（易讀性，簡單性，設計基調和品牌）保持聯(lián)系。”
如果您決定堅持使用漢堡包圖標，則當瀏覽器到達某個斷點時，您會注意到它彈出來，漢堡包會丟失您現(xiàn)在丟失的鏈接。當漢堡包接管時，請注意每個鏈接之間的空白：這是間隔鏈接的好時機，因此它們非常適合在移動設備上輕按手指。

如果您愿意的話，還可以在將其放置在漢堡包圖標上之前重新排列導航菜單。例如，您可以定義一個斷點，然后將導航面板從上到下重新配置。

您的導航甚至可能在特定斷點下返回帶有漢堡菜單的頂部。這是一種具有挑戰(zhàn)性的方法，但會贏得您的客戶的好評。

如果您的導航足夠小，則甚至不需要三欄圖標。

5.考慮垂直而不是水平
桌面為您提供了選擇垂直和水平元素的便利。但是，移動設備的局限性使它們陷入了困境，而不是跨頁面。同樣，在這里，您需要勤奮地使用空格來拆分多個內容元素，即使它們相互之間也是如此。始終追求簡潔，清晰，讓讀者呼吸。

同樣要記住，如果您在網(wǎng)頁設計中遵循良好的白色內務管理，則Shopify的響應式移動工具將這些呼吸空間平穩(wěn)地過渡到您的移動界面，如這些令人驚嘆的Shopify主題所示。

6.考慮響應式排版
始終在標題和正文段落之間找到適當?shù)钠胶?，這樣它們就不會看起來像放錯了科學怪人的正文部分。使用一些自適應的排版幫助自己，并注意行高，字距，字距，文本塊之間的邊距，甚至字體的顏色。

您可能沒有臺式機版本的空白，但是在處理最適合移動設備的排版時，可以使用不同的組合，因此空白仍然是使讀者保持專注于頁面的積極因素。

7.移動響應圖像？
誠然，這是一個要解決的難題，但是，如果您可以設法使自己的圖像縮放以適應更好的垂直查看，并留有合理的空白空間，那么這可能是您成功實現(xiàn)電子商務的圣杯。您甚至可以決定在不犧牲讀者對您的網(wǎng)站的期望的情況下，可以完全刪除設計元素的哪些部分。

您可能還會喜歡：黑暗面的力量：黑暗用戶界面。

空格可移動清晰
空白是網(wǎng)站設計不可或缺的一部分，尤其是在為移動受眾群體設計時。轉移到較小的屏幕空間時，您絕不能與引人注目的設計（易讀，簡單，設計基調和品牌）失去聯(lián)系。如果您不用擔心自己提供的服務，那么接下來的事情應該會吸引滿意的付費客戶，他們會毫不猶豫地返回到您的客戶的網(wǎng)站來獲取更多。

當前名稱：營銷型網(wǎng)站建設制作
標題網(wǎng)址：http://www.muchs.cn/news14/183564.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站設計、面包屑導航、軟件開發(fā)、云服務器、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設