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

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

它仍然在線工作。

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

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

一、讓讀者集中注意力

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

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

排版

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

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

F模式排版：creative bloq的主頁

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

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

和Z模式：

Z模式布局：MailChimp主頁

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

書面文字

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

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

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

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

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

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

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

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

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

二、建立平衡感

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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