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