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

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

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

但是，平板電腦，移動電話和臺式機通常要處理  一件事，這通常是理所當(dāng)然的：空白。通常，所有這些都?xì)w結(jié)為無意間將空白視為被動的空白畫布，需要填充文本，圖像，線條等的所有內(nèi)容元素。

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

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

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

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

電子郵件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果您的導(dǎo)航足夠小，則甚至不需要三欄圖標(biāo)。

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

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

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

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

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

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

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

當(dāng)前名稱：營銷型網(wǎng)站建設(shè)制作
標(biāo)題網(wǎng)址：http://www.bm7419.com/news14/183564.html

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

廣告

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

成都網(wǎng)站建設(shè)