網(wǎng)頁(yè)設(shè)計(jì)由95%的排版組成。網(wǎng)頁(yè)排版設(shè)計(jì)使圖形的放置栩栩如生，讓用戶保持愉悅，容易被用戶視覺(jué)感知。在這個(gè)過(guò)程中，網(wǎng)頁(yè)排版設(shè)計(jì)需要考慮很多因素:款式、大小、字體顏色等。此外，設(shè)計(jì)師通過(guò)網(wǎng)頁(yè)排版，讓文字增加設(shè)計(jì)的美感和獨(dú)特性，喚起獨(dú)特的情感。本文實(shí)時(shí)設(shè)計(jì)總結(jié)了9種常見(jiàn)的網(wǎng)頁(yè)排版設(shè)計(jì)原則，希望能給大家?guī)?lái)靈感！
以目標(biāo)為導(dǎo)向
網(wǎng)頁(yè)排版設(shè)計(jì)仍然應(yīng)該高度以目標(biāo)為導(dǎo)向。一個(gè)典型的例子是電子商務(wù)網(wǎng)站。設(shè)計(jì)師有很大的空間來(lái)營(yíng)造氛圍，捕捉商店靈魂的視覺(jué)傳達(dá)。然而，最終目標(biāo)總是一樣的：銷售。
這個(gè)目標(biāo)將決定設(shè)計(jì)師如何處理網(wǎng)頁(yè)排版設(shè)計(jì)過(guò)程中的一些關(guān)鍵決策，重點(diǎn)是幫助用戶搜索商店，輕松找到特定的商品。如即時(shí)設(shè)計(jì)社區(qū)的電子商務(wù)登錄頁(yè)所示，在產(chǎn)品展示上投入了大量精力，突出了產(chǎn)品的紋理和細(xì)節(jié)，訪問(wèn)者幾乎不需要思考就可以購(gòu)買商品。
視覺(jué)元素平衡
設(shè)計(jì)師經(jīng)常設(shè)計(jì)一些顯示視覺(jué)能力的元素，使其獨(dú)特而難忘。但關(guān)鍵的網(wǎng)頁(yè)排版設(shè)計(jì)原則是平衡和諧，使用更少的視覺(jué)元素可以使整個(gè)設(shè)計(jì)更加協(xié)調(diào)，使用戶更加專注?；靵y的元素會(huì)削弱設(shè)計(jì)，使用戶更難識(shí)別內(nèi)容。
一個(gè)好的結(jié)構(gòu)可以讓用戶立即知道他們?cè)诳词裁础Ｈ缂磿r(shí)設(shè)計(jì)社區(qū)中的食品網(wǎng)頁(yè)設(shè)計(jì)所示，層次結(jié)構(gòu)清楚地顯示了哪些元素是相關(guān)的，并突出了重要的區(qū)域?？瞻卓梢跃徑庖曈X(jué)，并幫助引導(dǎo)用戶的視覺(jué)。
比例、位置和間距合理
網(wǎng)頁(yè)設(shè)計(jì)師必須熟悉設(shè)計(jì)規(guī)范。格式塔理論定義了六種感知視覺(jué)事物的不同認(rèn)知規(guī)則，特別是所涉及的元素組。以合理的標(biāo)準(zhǔn)排版元素可以幫助用戶從整體上理解設(shè)計(jì)體現(xiàn)在比例、位置和間距上。在定義網(wǎng)頁(yè)布局時(shí)，有效的空間分配是網(wǎng)頁(yè)設(shè)計(jì)師的本能。
使用即時(shí)設(shè)計(jì)的自動(dòng)布局可以添加到畫板和組件的屬性中。它允許您創(chuàng)建一個(gè)可以填充或縮小以適應(yīng)的設(shè)計(jì)，并隨著內(nèi)容的變化而重新排列。當(dāng)需要添加新層，容納更長(zhǎng)的文本字符串或與設(shè)計(jì)的發(fā)展保持對(duì)齊時(shí)，這對(duì)網(wǎng)頁(yè)排版設(shè)計(jì)非常有用。
了解設(shè)計(jì)對(duì)象
網(wǎng)頁(yè)設(shè)計(jì)師還需要準(zhǔn)確地知道網(wǎng)頁(yè)訪問(wèn)者是誰(shuí)，他們想要什么，他們需要解決什么問(wèn)題，以及他們的想法。最終用戶的肖像越清晰，就越有可能創(chuàng)建一個(gè)良好的用戶體驗(yàn)設(shè)計(jì)。在網(wǎng)頁(yè)排版設(shè)計(jì)中，細(xì)節(jié)可能取決于最終用戶，而不是設(shè)計(jì)師。理解設(shè)計(jì)對(duì)象是用戶體驗(yàn)研究的活動(dòng)分支，需要努力理解用戶的感受和思維方式。
選擇合適的字體
毫無(wú)疑問(wèn)，使用合適的字體可以完全改變網(wǎng)頁(yè)排版設(shè)計(jì)的感覺(jué)。可讀的文本字體和引人注目的標(biāo)題字體都會(huì)影響網(wǎng)頁(yè)的整體氛圍。字體可以幫助品牌推廣，創(chuàng)建視覺(jué)識(shí)別或簡(jiǎn)單地集成和支持其他視覺(jué)元素。
即時(shí)設(shè)計(jì)內(nèi)置各種免費(fèi)商業(yè)中文網(wǎng)頁(yè)字體，無(wú)需手動(dòng)安裝即可使用，商業(yè)設(shè)計(jì)項(xiàng)目無(wú)侵權(quán)風(fēng)險(xiǎn)。如果即時(shí)云字體庫(kù)不能滿足您的需求，您還可以安裝“字體助理”，從本地導(dǎo)入安裝在計(jì)算機(jī)上的網(wǎng)頁(yè)字體，為您的設(shè)計(jì)提供更多樣化的選擇。
即時(shí)設(shè)計(jì)中的文本風(fēng)格包括：網(wǎng)頁(yè)字體大小、網(wǎng)頁(yè)字體厚度、行高和字距調(diào)整。在設(shè)計(jì)中，通常需要為不同的文本設(shè)置不同的屬性。使用文本風(fēng)格將大大提高設(shè)計(jì)效率。我們可以將文本風(fēng)格應(yīng)用于整個(gè)文本層，也可以僅用于圖層中的一些文本。
保持網(wǎng)頁(yè)設(shè)計(jì)移動(dòng)友好
基于移動(dòng)設(shè)備的設(shè)計(jì)已經(jīng)發(fā)展成為網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵組成部分。移動(dòng)友好設(shè)計(jì)的原則不再是錦上添花，而是隨著移動(dòng)設(shè)備使用日益增長(zhǎng)的必要性。
從布局開始，設(shè)計(jì)師將分配空間，優(yōu)先考慮必要的部分，其他次要內(nèi)容可以隱藏起來(lái)。一個(gè)典型的網(wǎng)頁(yè)排版設(shè)計(jì)例子是漢堡菜單，它總是在導(dǎo)航的視線范圍內(nèi)，但占用的空間很小。
導(dǎo)航設(shè)計(jì)及信息架構(gòu)
導(dǎo)航設(shè)計(jì)和信息架構(gòu)共同構(gòu)成了產(chǎn)品的支柱，使用戶能夠理解產(chǎn)品和移動(dòng)功能，并找到他們需要的特定信息。首先，規(guī)劃信息架構(gòu)包括視覺(jué)元素、信息和主要功能，有助于在產(chǎn)品中創(chuàng)建邏輯結(jié)構(gòu)，無(wú)論信息有多小或多短，用戶都能找到信息。其次，導(dǎo)航需要反映信息架構(gòu)，這樣用戶就可以很容易地找到主要的信息和功能。如果用戶無(wú)法達(dá)到一個(gè)重要的功能，那么整個(gè)體驗(yàn)就會(huì)受到影響。
將認(rèn)知努力保持在低限度
認(rèn)知努力只是用戶理解設(shè)計(jì)所需的腦力勞動(dòng)的另一個(gè)術(shù)語(yǔ)。正如我們之前提到的，如果需要付出太多的認(rèn)知努力，用戶很可能會(huì)變得不知所措、沮喪和疲憊。優(yōu)秀的網(wǎng)頁(yè)排版設(shè)計(jì)往往是直觀的，毫不費(fèi)力的。那么，我們?nèi)绾伪M量減少認(rèn)知努力呢？保持空白網(wǎng)頁(yè)排版設(shè)計(jì)。擁有適量的空白空間也可以提高可讀性，讓用戶可以自由專注于設(shè)計(jì)師為他們開發(fā)的視覺(jué)道路。
如即時(shí)設(shè)計(jì)社區(qū)中的Travel 如goo旅游網(wǎng)站所示，暗黑色背景圖片可視為大空白，用戶的目光將集中在中間的文案和CTA按鈕上，引導(dǎo)用戶閱讀更多信息。
了解可用性測(cè)試的基礎(chǔ)知識(shí)
可用性測(cè)試是任何設(shè)計(jì)過(guò)程的關(guān)鍵組成部分，這是一個(gè)眾所周知的網(wǎng)頁(yè)排版設(shè)計(jì)原則，致力于向我們展示設(shè)計(jì)團(tuán)隊(duì)認(rèn)為用戶想要什么和現(xiàn)實(shí)之間的差距。用戶測(cè)試的三種主要類型：
探索性測(cè)試。這是指在項(xiàng)目開始時(shí)進(jìn)行的一輪測(cè)試，旨在了解用戶的行為，驗(yàn)證設(shè)計(jì)的主要支柱：導(dǎo)航和信息架構(gòu)。
評(píng)估測(cè)試。通常在項(xiàng)目中間進(jìn)行，衡量可用性，指導(dǎo)團(tuán)隊(duì)改進(jìn)。
比較測(cè)試。通常，一種產(chǎn)品是團(tuán)隊(duì)設(shè)計(jì)，另一種是競(jìng)爭(zhēng)對(duì)手。這可以向我們展示競(jìng)爭(zhēng)對(duì)手的設(shè)計(jì)缺陷，并幫助我們避免同樣的錯(cuò)誤。
推薦使用在線協(xié)同網(wǎng)頁(yè)設(shè)計(jì)工具即時(shí)設(shè)計(jì)工具
看完以上分享，相信你對(duì)網(wǎng)頁(yè)排版設(shè)計(jì)有自己的想法和想法！不妨打開即時(shí)設(shè)計(jì)工作臺(tái)，自己試試！如果您想了解更多關(guān)于網(wǎng)頁(yè)排版設(shè)計(jì)規(guī)范的信息，歡迎您進(jìn)入即時(shí)設(shè)計(jì)技巧進(jìn)行交流和學(xué)習(xí)。對(duì)于企業(yè)和設(shè)計(jì)團(tuán)隊(duì)來(lái)說(shuō)，好的技術(shù)和網(wǎng)頁(yè)設(shè)計(jì)工具可以幫助他們突破組織和制度的局限性。在線協(xié)作網(wǎng)頁(yè)UI設(shè)計(jì)工具即時(shí)設(shè)計(jì)是一款功能齊全、易用、團(tuán)隊(duì)功能強(qiáng)大的免費(fèi)網(wǎng)頁(yè)設(shè)計(jì)工具，非常適合個(gè)人設(shè)計(jì)和團(tuán)隊(duì)設(shè)計(jì)。從推出到現(xiàn)在，短時(shí)間內(nèi)，即時(shí)設(shè)計(jì)以飽滿的誠(chéng)意和毋庸置疑的實(shí)力，成為中國(guó)最具發(fā)展?jié)摿Φ拿赓M(fèi)網(wǎng)頁(yè)設(shè)計(jì)工具。我們有理由相信即時(shí)設(shè)計(jì)在未來(lái)是可以期待的。
浙公網(wǎng)安備33059102000194號(hào)