傳統(tǒng)媒體報(bào)紙是網(wǎng)絡(luò)設(shè)計(jì)的鼻祖。網(wǎng)頁(yè)設(shè)計(jì)是互聯(lián)網(wǎng)上的另一種媒體，其中許多仍然適用。

很多經(jīng)典原則，比如字體設(shè)計(jì)原則，

它仍然在線工作。

本文著重討論了印刷設(shè)計(jì)的幾個(gè)原則，這些原則在網(wǎng)上仍然適用。

您將提高UI和UX設(shè)計(jì)的水平，并創(chuàng)建更好、更易于理解的設(shè)計(jì)。

一、讓讀者集中注意力

印刷設(shè)計(jì)的重點(diǎn)是可讀性，就像在網(wǎng)頁(yè)上一樣：它只是用“用戶”代替“讀者”。

目標(biāo)應(yīng)該是清晰的表達(dá)和簡(jiǎn)單的排版，這樣可以帶來很好的經(jīng)驗(yàn)。傳統(tǒng)印刷業(yè)有哪些值得研究的案例？讓我們看看下面。

排版

就像報(bào)紙一樣，他們不逐字閱讀。掃描頁(yè)面是用戶的標(biāo)準(zhǔn)行為。

設(shè)計(jì)掃描時(shí)需要考慮兩種模式。第一種是f模式。

F模式排版：creative bloq的主頁(yè)

F模式反映了用戶掃描頁(yè)面的最常見方式。他們的視線從上方水平移動(dòng)，然后沿著左側(cè)垂直移動(dòng)，尋找突出的文本。

一旦他們找到感興趣的內(nèi)容，他們就會(huì)開始水平瀏覽頁(yè)面。

和Z模式：

Z模式布局：MailChimp主頁(yè)

Z模式也是一種自然的瀏覽模式，通常用于報(bào)紙和網(wǎng)頁(yè)。用戶在頁(yè)面頂部水平瀏覽，然后向左和向下移動(dòng)，然后向下訪問。根據(jù)用戶的視覺習(xí)慣，他們會(huì)關(guān)注底層

書面文字

與打印一樣，網(wǎng)頁(yè)文本應(yīng)該具有清晰的級(jí)別。選擇合適的大小將有助于突出顯示頁(yè)面上的關(guān)鍵字，并使教程簡(jiǎn)單快捷。

明文級(jí)別：世界烘焙日網(wǎng)站

讓我們看看文本層次結(jié)構(gòu)的一些常見級(jí)別：

主要內(nèi)容：頁(yè)面上最突出的文字更大更閃亮，吸引了用戶的注意。通常用于標(biāo)題和裝飾。

中學(xué)：一切都在中間。這不像標(biāo)題那么明顯。除了文本顯示，還應(yīng)該有顯示。

再次：選定文本的主要內(nèi)容。文本層次結(jié)構(gòu)中的此級(jí)別有助于將用戶沉浸在文本中。

其他：較小的級(jí)別，使用斜體、粗體、下劃線、不同顏色等。

通過文字的使用，可以建立文字的層次來創(chuàng)建秩序，防止用戶迷失。

要測(cè)試頁(yè)面的可讀性，請(qǐng)使用“三秒規(guī)則”：瀏覽頁(yè)面并查看其他地方。亮點(diǎn)是否反映了你的設(shè)計(jì)意圖？如果是的話，那么你的方向是正確的。如果沒有，如果你不按順序，就必須重新設(shè)計(jì)。

二、建立平衡感

無論平衡感來自對(duì)稱、不對(duì)稱還是輻射，都能帶來舒適穩(wěn)定的平和感。游客感到舒適，會(huì)更愿意留下來。

不要對(duì)圖片或文字太過密集：總是考慮元素之間的間隙。排版對(duì)簡(jiǎn)潔和密度的要求是有限度的。眼睛很難接受雜亂無章的東西，讓人們更難接受信息的流動(dòng)。

考慮采用極簡(jiǎn)設(shè)計(jì)，色彩深度漸變，過度會(huì)帶來視覺心理的雙重暗示享受

震撼簡(jiǎn)約設(shè)計(jì)案例：鞋類品牌etq網(wǎng)站

上面顯示的etq網(wǎng)站吸引了人們對(duì)所展示產(chǎn)品的關(guān)注。頁(yè)面底部的黑白對(duì)比色塊允許用戶選擇尺寸或查看產(chǎn)品價(jià)格。

網(wǎng)頁(yè)很少干擾信息，讓用戶專注于事物本身，也希望有助于方便用戶購(gòu)買。

三、創(chuàng)造可靠的設(shè)計(jì)

使您的設(shè)計(jì)對(duì)所有用戶都可靠。不要使用超過兩種字體，確保所有年齡段的用戶都能閱讀。太多的雜亂會(huì)擾亂信息。

如果您在訪問時(shí)沒有任何線索，您的設(shè)計(jì)可能包含太多圖片。

網(wǎng)站的顏色應(yīng)結(jié)合公司類型，淡定柔和；如果受眾是青少年，則適合使用更鮮明的顏色。

加州大學(xué)圣地亞哥分校健康網(wǎng)站

顏色與它的嚴(yán)肅內(nèi)容相符

以下是書籍設(shè)計(jì)中的一些常見錯(cuò)誤，這些錯(cuò)誤也適用于網(wǎng)頁(yè)：

測(cè)試不夠：總是盡可能廣泛地測(cè)試設(shè)計(jì)。內(nèi)容可以跨越多個(gè)媒體（網(wǎng)頁(yè)、電子書、印刷品），使文本具有新的外觀。此外，互聯(lián)網(wǎng)上的一些傳統(tǒng)字體也不適用。結(jié)合網(wǎng)站整體的色調(diào)用一種字體來表達(dá)。目前，移動(dòng)智能設(shè)備發(fā)展迅速。在滿足PC端的情況下，還增加了移動(dòng)端。

不恰當(dāng)?shù)恼Z(yǔ)調(diào)：為每個(gè)頁(yè)面元素選擇正確的語(yǔ)調(diào)。作為字體，標(biāo)題應(yīng)該引起讀者的注意。作為標(biāo)題的澄清或補(bǔ)充，字幕讓用戶感到親切，渴望了解更多的信息。