如何在移動(dòng)設(shè)計(jì)中使用空白
盡管在桌面上水平和垂直地處理著陸頁(yè)圖像，版式，線(xiàn)條和其他元素是一件相對(duì)簡(jiǎn)單的事情，但在移動(dòng)平臺(tái)上做到這一點(diǎn)卻比較棘手。平板電腦和手機(jī)的屏幕尺寸不同，如果您不遵循現(xiàn)代設(shè)計(jì)原則和隨之而來(lái)的圖形設(shè)計(jì)工具，則很容易隨意亂扔文字和圖像。由于客戶(hù)的電子商務(wù)成功取決于其頁(yè)面的可顯示性，因此很容易使您的業(yè)務(wù)潛在收入損失。
但是，平板電腦，移動(dòng)電話(huà)和臺(tái)式機(jī)通常要處理 一件事，這通常是理所當(dāng)然的：空白。通常，所有這些都?xì)w結(jié)為無(wú)意間將空白視為被動(dòng)的空白畫(huà)布，需要填充文本，圖像，線(xiàn)條等的所有內(nèi)容元素。
“不過(guò)，與只是目標(biāo)網(wǎng)頁(yè)的被動(dòng)組成部分相反，空白可能是目標(biāo)網(wǎng)頁(yè)難題中的關(guān)鍵部分。”
但是與空白只是登錄頁(yè)面的被動(dòng)組成部分相反，空白可能是登錄頁(yè)面難題的關(guān)鍵部分。它可以將頁(yè)面上的所有內(nèi)容緊密結(jié)合在一起，從而創(chuàng)建一個(gè)引人注目的，引人注目的網(wǎng)站，從美學(xué)上令人滿(mǎn)意并吸引客戶(hù)的客戶(hù)，從而創(chuàng)造一種使他們有充分理由回到客戶(hù)網(wǎng)站的理由?？瞻自诓季种信c內(nèi)容本身一樣有效，并且有助于定義正向空間的邊界并為布局帶來(lái)平衡。
在本文中，我們將研究臺(tái)式機(jī)和移動(dòng)設(shè)備上不同類(lèi)型的空白，并深入研究在移動(dòng)設(shè)備上使用空白的最佳實(shí)踐。
模板圖標(biāo)
成長(zhǎng)第2卷：成為一名全面的Web設(shè)計(jì)自由職業(yè)者
獲得免費(fèi)的《成長(zhǎng)第2卷：成為一名全棧Web設(shè)計(jì)自由職業(yè)者》副本，該副本已發(fā)送到您的收件箱。
電子郵件
輸入您的電子郵件地址
輸入您的電子郵件-我們還將向您發(fā)送與Shopify相關(guān)的營(yíng)銷(xiāo)電子郵件。您可以隨時(shí)取消訂閱。注意：該指南不會(huì)發(fā)送到基于角色的電子郵件，例如info @，developer @等。
我們的虛擬齒輪正在轉(zhuǎn)動(dòng)。
請(qǐng)注意，
我們的電子郵件最多可能需要15分鐘
才能到達(dá)您的收件箱。
設(shè)計(jì)中的空白是什么？
空的網(wǎng)頁(yè)是您的主要空白，是其他所有內(nèi)容和設(shè)計(jì)元素都聚集在其上的畫(huà)布：圖標(biāo)，全彩色圖像，線(xiàn)條和幾何形狀以及您的文本。這些元素填滿(mǎn)畫(huà)布后，您將剩下故意留為空白的區(qū)域：裝訂線(xiàn)或小巷（列之間的空白），行高，句子和段落之間的間隔，頂部，底部，左側(cè)和右側(cè)的邊距，填充—都是空白。請(qǐng)注意，它們位于設(shè)計(jì)元素之間或位于單個(gè)設(shè)計(jì)元素之內(nèi)，例如您選擇的印刷字形之間的空間。
用技術(shù)術(shù)語(yǔ)來(lái)說(shuō)，設(shè)計(jì)者將空白稱(chēng)為負(fù)空間。該技術(shù)定義消除了對(duì)空白的常見(jiàn)誤解：盡管使用了術(shù)語(yǔ)，但空白不必是白色的。它可以是黑色，棕色，黃色，紅色（您選擇的任何顏色），甚至可以滿(mǎn)足您為網(wǎng)頁(yè)增添功能的任何圖案，紋理和背景圖像。
白色空間設(shè)計(jì)
Mathieu Levesque的白色負(fù)空間。
白色空間設(shè)計(jì)院長(zhǎng)布拉德肖
Dean Bradshaw的黑色負(fù)空間。
為什么空白很重要
空白在設(shè)計(jì)中可滿(mǎn)足多種目的。它可以用于：
美學(xué)。當(dāng)您考慮如何設(shè)計(jì)目標(biāo)網(wǎng)頁(yè)以精美地顯示在移動(dòng)屏幕上時(shí)，空白至關(guān)重要。
有效的溝通?？崭袷且环N重要的工具，可以平衡您在頁(yè)面上展示許多項(xiàng)目的需求與在考慮有效的視覺(jué)交流體驗(yàn)的同時(shí)放置內(nèi)容的需求。
引導(dǎo)眼睛。我們的視覺(jué)能力只能如此集中，直到它被太多轟炸我們感官的因素所困擾。空白是使人平靜的因素，這是允許讀者消化要呈現(xiàn)給他們的東西的秘密。
您可能還會(huì)喜歡：關(guān)于空白需要了解的一切。
不同類(lèi)型的空白
如果要通過(guò)移動(dòng)屏幕優(yōu)化頁(yè)面的視覺(jué)效果，則需要了解空白在與內(nèi)容元素保持適當(dāng)平衡方面所起的作用。如果您的讀者猶豫不決地繼續(xù)閱讀，卻大吃一驚，找到了一個(gè)更具視覺(jué)吸引力的網(wǎng)站，您將無(wú)法出售。您需要了解微觀(guān)空間或宏空間以及主動(dòng)或被動(dòng)空白如何協(xié)同工作，以使讀者決定繼續(xù)使用頁(yè)面還是繼續(xù)前進(jìn)。
微小的空白
微小的空白是內(nèi)容元素之間的小空間：行和段落之間的空間以及網(wǎng)格圖像之間的空間，以便分隔菜單鏈接。微空白會(huì)直接影響您內(nèi)容的可讀性，用戶(hù)的閱讀速度和理解力。
宏空白
宏空白是您的大圖空白，畫(huà)布和所有頁(yè)面內(nèi)容元素的容器。這是圍繞您的設(shè)計(jì)布局的空間。您可以在網(wǎng)站的右側(cè)和左側(cè)以及內(nèi)容塊之間找到它。
“如果要通過(guò)移動(dòng)屏幕優(yōu)化頁(yè)面的視覺(jué)效果，則需要了解空白在使內(nèi)容元素達(dá)到適當(dāng)平衡方面所起的作用。”
大多數(shù)設(shè)計(jì)師會(huì)為您提供有關(guān)實(shí)施宏空白的Google課程。它的標(biāo)志性主頁(yè)非常簡(jiǎn)單，使用戶(hù)免于分心，因此更容易集中精力放在用戶(hù)為什么首先出現(xiàn)的地方：進(jìn)行搜索。在沒(méi)有任何大塊內(nèi)容的情況下，網(wǎng)頁(yè)可以輕松，快速地加載-即使在遙遠(yuǎn)的過(guò)去，Internet速度通常令人沮喪地緩慢爬網(wǎng)。
白色空間設(shè)計(jì)Google
Google臭名昭著的空白使用。
設(shè)計(jì)師還將空白視為主動(dòng)或被動(dòng)：
活動(dòng)空白：使用空白可以改善頁(yè)面結(jié)構(gòu)的布局，同時(shí)引導(dǎo)用戶(hù)瀏覽內(nèi)容。
被動(dòng)空格：空格在不引導(dǎo)讀者的情況下為版面增添了雅致。
空白設(shè)計(jì)樣本
Slideplayer的“基本網(wǎng)站設(shè)計(jì)”中的主動(dòng)和被動(dòng)空白示例。
移動(dòng)空白設(shè)計(jì)的7個(gè)最佳做法
誠(chéng)然，在移動(dòng)顯示器上擠入太多內(nèi)容的需要限制了您可以使用的空白空間。由于無(wú)法使用大量空白空間，因此，智能，平衡的方法是唯一的方法。使用空白，同時(shí)牢記一些最佳實(shí)踐。
1.手指設(shè)計(jì)
為優(yōu)化移動(dòng)觀(guān)看而設(shè)計(jì)時(shí)，首先要考慮的是將點(diǎn)擊目標(biāo)限制為至少30到40像素，這是MIT觸摸實(shí)驗(yàn)室（PDF）進(jìn)行的一項(xiàng)研究，這是觸摸目標(biāo)尺寸的理想范圍。除了尺寸，當(dāng)然，您還需要在觸摸目標(biāo)之間添加空白，以便用戶(hù)能夠達(dá)到他們想要的目標(biāo)。
2.技術(shù)：分配≤15個(gè)用戶(hù)關(guān)注點(diǎn)
當(dāng)您被迫在頁(yè)面上推送更多內(nèi)容時(shí)，設(shè)計(jì)師Paul Boag建議您為自己分配15個(gè)用戶(hù)關(guān)注點(diǎn)。讓您添加到步伐成本中的每個(gè)項(xiàng)目1點(diǎn)。
如果一個(gè)屏幕比另一個(gè)屏幕更重要，則需要為其分配其他點(diǎn)以使其突出。由于只有有限的點(diǎn)可供使用，很明顯您不能將空白排除在等式之外。
3.創(chuàng)造性地使用空白
您可以考慮使用對(duì)比鮮明的顏色，形狀，字體大小和不對(duì)稱(chēng)的負(fù)空間來(lái)為布局提供更多功能。作為一個(gè)活躍的設(shè)計(jì)元素，空白空間與周?chē)氐母兄⑾⑾嚓P(guān)。
4.重新排列導(dǎo)航菜單空白設(shè)計(jì)響應(yīng)
在處理響應(yīng)式設(shè)計(jì)時(shí)，您將需要為空白設(shè)置不同的斷點(diǎn)，以便為客戶(hù)提供持續(xù)的無(wú)縫體驗(yàn)。
如果您的網(wǎng)站支持多個(gè)鏈接，則別無(wú)選擇，只能使用三欄式漢堡包圖標(biāo)選擇隱藏菜單。不喜歡漢堡包圖標(biāo)，并覺(jué)得看不見(jiàn)了什么？然后轉(zhuǎn)到標(biāo)簽欄，就像Facebook一樣，放棄漢堡包，使用標(biāo)簽。請(qǐng)記住，F(xiàn)acebook的內(nèi)容比那里的許多網(wǎng)站都要多，因此您很可能也不會(huì)因此而迷失。
“移到較小的屏幕空間時(shí)，您絕不能與吸引人的設(shè)計(jì)要素（易讀性，簡(jiǎn)單性，設(shè)計(jì)基調(diào)和品牌）保持聯(lián)系。”
如果您決定堅(jiān)持使用漢堡包圖標(biāo)，則當(dāng)瀏覽器到達(dá)某個(gè)斷點(diǎn)時(shí)，您會(huì)注意到它彈出來(lái)，漢堡包會(huì)丟失您現(xiàn)在丟失的鏈接。當(dāng)漢堡包接管時(shí)，請(qǐng)注意每個(gè)鏈接之間的空白：這是間隔鏈接的好時(shí)機(jī)，因此它們非常適合在移動(dòng)設(shè)備上輕按手指。
如果您愿意的話(huà)，還可以在將其放置在漢堡包圖標(biāo)上之前重新排列導(dǎo)航菜單。例如，您可以定義一個(gè)斷點(diǎn)，然后將導(dǎo)航面板從上到下重新配置。
您的導(dǎo)航甚至可能在特定斷點(diǎn)下返回帶有漢堡菜單的頂部。這是一種具有挑戰(zhàn)性的方法，但會(huì)贏(yíng)得您的客戶(hù)的好評(píng)。
如果您的導(dǎo)航足夠小，則甚至不需要三欄圖標(biāo)。
5.考慮垂直而不是水平
桌面為您提供了選擇垂直和水平元素的便利。但是，移動(dòng)設(shè)備的局限性使它們陷入了困境，而不是跨頁(yè)面。同樣，在這里，您需要勤奮地使用空格來(lái)拆分多個(gè)內(nèi)容元素，即使它們相互之間也是如此。始終追求簡(jiǎn)潔，清晰，讓讀者呼吸。
同樣要記住，如果您在網(wǎng)頁(yè)設(shè)計(jì)中遵循良好的白色內(nèi)務(wù)管理，則Shopify的響應(yīng)式移動(dòng)工具將這些呼吸空間平穩(wěn)地過(guò)渡到您的移動(dòng)界面，如這些令人驚嘆的Shopify主題所示。
6.考慮響應(yīng)式排版
始終在標(biāo)題和正文段落之間找到適當(dāng)?shù)钠胶?，這樣它們就不會(huì)看起來(lái)像放錯(cuò)了科學(xué)怪人的正文部分。使用一些自適應(yīng)的排版幫助自己，并注意行高，字距，字距，文本塊之間的邊距，甚至字體的顏色。
您可能沒(méi)有臺(tái)式機(jī)版本的空白，但是在處理最適合移動(dòng)設(shè)備的排版時(shí)，可以使用不同的組合，因此空白仍然是使讀者保持專(zhuān)注于頁(yè)面的積極因素。
7.移動(dòng)響應(yīng)圖像？
誠(chéng)然，這是一個(gè)要解決的難題，但是，如果您可以設(shè)法使自己的圖像縮放以適應(yīng)更好的垂直查看，并留有合理的空白空間，那么這可能是您成功實(shí)現(xiàn)電子商務(wù)的圣杯。您甚至可以決定在不犧牲讀者對(duì)您的網(wǎng)站的期望的情況下，可以完全刪除設(shè)計(jì)元素的哪些部分。
您可能還會(huì)喜歡：黑暗面的力量：黑暗用戶(hù)界面。
空格可移動(dòng)清晰
空白是網(wǎng)站設(shè)計(jì)不可或缺的一部分，尤其是在為移動(dòng)受眾群體設(shè)計(jì)時(shí)。轉(zhuǎn)移到較小的屏幕空間時(shí)，您絕不能與引人注目的設(shè)計(jì)（易讀，簡(jiǎn)單，設(shè)計(jì)基調(diào)和品牌）失去聯(lián)系。如果您不用擔(dān)心自己提供的服務(wù)，那么接下來(lái)的事情應(yīng)該會(huì)吸引滿(mǎn)意的付費(fèi)客戶(hù)，他們會(huì)毫不猶豫地返回到您的客戶(hù)的網(wǎng)站來(lái)獲取更多。
