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

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

如何在移動(dòng)設(shè)計(jì)中使用空白

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

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

“不過，與只是目標(biāo)網(wǎng)頁的被動(dòng)組成部分相反，空白可能是目標(biāo)網(wǎng)頁難題中的關(guān)鍵部分。”

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

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

模板圖標(biāo)

成長第2卷：成為一名全面的Web設(shè)計(jì)自由職業(yè)者

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

電子郵件

輸入您的電子郵件地址

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

我們的虛擬齒輪正在轉(zhuǎn)動(dòng)。

請(qǐng)注意，

我們的電子郵件最多可能需要15分鐘

才能到達(dá)您的收件箱。

設(shè)計(jì)中的空白是什么？

空的網(wǎng)頁是您的主要空白，是其他所有內(nèi)容和設(shè)計(jì)元素都聚集在其上的畫布：圖標(biāo)，全彩色圖像，線條和幾何形狀以及您的文本。這些元素填滿畫布后，您將剩下故意留為空白的區(qū)域：裝訂線或小巷（列之間的空白），行高，句子和段落之間的間隔，頂部，底部，左側(cè)和右側(cè)的邊距，填充—都是空白。請(qǐng)注意，它們位于設(shè)計(jì)元素之間或位于單個(gè)設(shè)計(jì)元素之內(nèi)，例如您選擇的印刷字形之間的空間。

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

白色空間設(shè)計(jì)

Mathieu Levesque的白色負(fù)空間。

白色空間設(shè)計(jì)院長布拉德肖

Dean Bradshaw的黑色負(fù)空間。

為什么空白很重要

空白在設(shè)計(jì)中可滿足多種目的。它可以用于：

美學(xué)。當(dāng)您考慮如何設(shè)計(jì)目標(biāo)網(wǎng)頁以精美地顯示在移動(dòng)屏幕上時(shí)，空白至關(guān)重要。

有效的溝通?？崭袷且环N重要的工具，可以平衡您在頁面上展示許多項(xiàng)目的需求與在考慮有效的視覺交流體驗(yàn)的同時(shí)放置內(nèi)容的需求。

引導(dǎo)眼睛。我們的視覺能力只能如此集中，直到它被太多轟炸我們感官的因素所困擾?？瞻资鞘谷似届o的因素，這是允許讀者消化要呈現(xiàn)給他們的東西的秘密。

您可能還會(huì)喜歡：關(guān)于空白需要了解的一切。

不同類型的空白

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

微小的空白

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

宏空白

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

“如果要通過移動(dòng)屏幕優(yōu)化頁面的視覺效果，則需要了解空白在使內(nèi)容元素達(dá)到適當(dāng)平衡方面所起的作用。”

大多數(shù)設(shè)計(jì)師會(huì)為您提供有關(guān)實(shí)施宏空白的Google課程。它的標(biāo)志性主頁非常簡單，使用戶免于分心，因此更容易集中精力放在用戶為什么首先出現(xiàn)的地方：進(jìn)行搜索。在沒有任何大塊內(nèi)容的情況下，網(wǎng)頁可以輕松，快速地加載-即使在遙遠(yuǎn)的過去，Internet速度通常令人沮喪地緩慢爬網(wǎng)。

白色空間設(shè)計(jì)Google

Google臭名昭著的空白使用。

設(shè)計(jì)師還將空白視為主動(dòng)或被動(dòng)：

活動(dòng)空白：使用空白可以改善頁面結(jié)構(gòu)的布局，同時(shí)引導(dǎo)用戶瀏覽內(nèi)容。

被動(dòng)空格：空格在不引導(dǎo)讀者的情況下為版面增添了雅致。

空白設(shè)計(jì)樣本

Slideplayer的“基本網(wǎng)站設(shè)計(jì)”中的主動(dòng)和被動(dòng)空白示例。

移動(dòng)空白設(shè)計(jì)的7個(gè)做法

誠然，在移動(dòng)顯示器上擠入太多內(nèi)容的需要限制了您可以使用的空白空間。由于無法使用大量空白空間，因此，智能，平衡的方法是的方法。使用空白，同時(shí)牢記一些實(shí)踐。

1.手指設(shè)計(jì)

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

2.技術(shù)：分配≤15個(gè)用戶關(guān)注點(diǎn)

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

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

3.創(chuàng)造性地使用空白

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

4.重新排列導(dǎo)航菜單空白設(shè)計(jì)響應(yīng)

在處理響應(yīng)式設(shè)計(jì)時(shí)，您將需要為空白設(shè)置不同的斷點(diǎn)，以便為客戶提供持續(xù)的無縫體驗(yàn)。

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

“移到較小的屏幕空間時(shí)，您絕不能與吸引人的設(shè)計(jì)要素（易讀性，簡單性，設(shè)計(jì)基調(diào)和品牌）保持聯(lián)系。”

如果您決定堅(jiān)持使用漢堡包圖標(biāo)，則當(dāng)瀏覽器到達(dá)某個(gè)斷點(diǎn)時(shí)，您會(huì)注意到它彈出來，漢堡包會(huì)丟失您現(xiàn)在丟失的鏈接。當(dāng)漢堡包接管時(shí)，請(qǐng)注意每個(gè)鏈接之間的空白：這是間隔鏈接的好時(shí)機(jī)，因此它們非常適合在移動(dòng)設(shè)備上輕按手指。

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

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

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

5.考慮垂直而不是水平

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

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

6.考慮響應(yīng)式排版

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

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

7.移動(dòng)響應(yīng)圖像？

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

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

空格可移動(dòng)清晰

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

名稱欄目：營銷型網(wǎng)站建設(shè)制作
網(wǎng)址分享：http://www.rwnh.cn/news/183564.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、App開發(fā)、外貿(mào)建站、App設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、虛擬主機(jī)

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

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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