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

營(yíng)銷(xiāo)型網(wǎng)站建設(shè)制作

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

如何在移動(dòng)設(shè)計(jì)中使用空白
盡管在桌面上水平和垂直地處理著陸頁(yè)圖像,版式,線條和其他元素是一件相對(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)電話和臺(tái)式機(jī)通常要處理  一件事,這通常是理所當(dāng)然的:空白。通常,所有這些都?xì)w結(jié)為無(wú)意間將空白視為被動(dòng)的空白畫(huà)布,需要填充文本,圖像,線條等的所有內(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é)上令人滿意并吸引客戶(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),全彩色圖像,線條和幾何形狀以及您的文本。這些元素填滿畫(huà)布后,您將剩下故意留為空白的區(qū)域:裝訂線或小巷(列之間的空白),行高,句子和段落之間的間隔,頂部,底部,左側(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ǔ),但空白不必是白色的。它可以是黑色,棕色,黃色,紅色(您選擇的任何顏色),甚至可以滿足您為網(wǎng)頁(yè)增添功能的任何圖案,紋理和背景圖像。

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

美學(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é)能力只能如此集中,直到它被太多轟炸我們感官的因素所困擾??瞻资鞘谷似届o的因素,這是允許讀者消化要呈現(xiàn)給他們的東西的秘密。
您可能還會(huì)喜歡:關(guān)于空白需要了解的一切。

不同類(lèi)型的空白
如果要通過(guò)移動(dòng)屏幕優(yōu)化頁(yè)面的視覺(jué)效果,則需要了解空白在與內(nèi)容元素保持適當(dāng)平衡方面所起的作用。如果您的讀者猶豫不決地繼續(xù)閱讀,卻大吃一驚,找到了一個(gè)更具視覺(jué)吸引力的網(wǎng)站,您將無(wú)法出售。您需要了解微觀空間或宏空間以及主動(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)觀看而設(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è)備上輕按手指。

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

您的導(dǎo)航甚至可能在特定斷點(diǎn)下返回帶有漢堡菜單的頂部。這是一種具有挑戰(zhàn)性的方法,但會(huì)贏得您的客戶(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ì)吸引滿意的付費(fèi)客戶(hù),他們會(huì)毫不猶豫地返回到您的客戶(hù)的網(wǎng)站來(lái)獲取更多。

當(dāng)前名稱(chēng):營(yíng)銷(xiāo)型網(wǎng)站建設(shè)制作
標(biāo)題網(wǎng)址:http://m.rwnh.cn/news14/183564.html

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

廣告

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

成都網(wǎng)站建設(shè)
柳林县| 扎囊县| 汶川县| 冷水江市| 衡东县| 松江区| 徐闻县| 瑞金市| 楚雄市| 启东市| 马尔康县| 通榆县| 黔西县| 太保市| 白城市| 凤山县| 松滋市| 清水县| 揭东县| 星座| 铁力市| 基隆市| 乳源| 英山县| 青阳县| 迁安市| 新巴尔虎左旗| 景宁| 封开县| 陆川县| 疏附县| 镇远县| 衡阳市| 蛟河市| 永清县| 舒城县| 和平区| 九龙城区| 青神县| 贞丰县| 古交市|