網(wǎng)頁(yè)界面該怎么設(shè)計(jì)？看這4種經(jīng)典模式

時(shí)間：2023-10-06 18:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-06 18:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)界面該怎么設(shè)計(jì)？看這4種經(jīng)典模式：如今網(wǎng)站已經(jīng)成為很多企業(yè)的重要展示窗口、信息宣傳渠道，很多企業(yè)創(chuàng)業(yè)開(kāi)始都會(huì)先建設(shè)一個(gè)自己的官方網(wǎng)站。不過(guò)，如果想通過(guò)網(wǎng)頁(yè)吸引更多客戶，那么你就需要對(duì)自己的網(wǎng)頁(yè)做好一個(gè)好的排版，讓網(wǎng)站美觀且吸引人。下面就介紹一下網(wǎng)頁(yè)設(shè)計(jì)教程，以及一些高質(zhì)量的網(wǎng)頁(yè)排版設(shè)計(jì)案例分析。

一般來(lái)講，很多高質(zhì)量的網(wǎng)頁(yè)界面設(shè)計(jì)都有一些相似的布局，通過(guò)這些有規(guī)律的編排設(shè)計(jì)，可以幫助你在網(wǎng)頁(yè)設(shè)計(jì)時(shí)達(dá)到美觀且實(shí)用的效果！你可以參考下面這4種設(shè)計(jì)方案：

一、古登堡結(jié)構(gòu)(Gutenberg Rule)

所謂Gutenberg Rule就是指當(dāng)人們?yōu)g覽一些頁(yè)面時(shí)，大多數(shù)人喜歡從左到右或者是從上往下的方式來(lái)查看內(nèi)容。古登堡圖表主要是把界面分為四個(gè)部分分別為：主視覺(jué)區(qū)（左上角）、最終視覺(jué)區(qū)（右下角）、強(qiáng)閑置區(qū)（右上角）、弱閑置區(qū)（左下角）。這樣的一個(gè)行為習(xí)慣就可以作為你網(wǎng)頁(yè)設(shè)計(jì)時(shí)的參考標(biāo)準(zhǔn)。




主視區(qū)（Primary optical area）：這個(gè)區(qū)域位于網(wǎng)站介面的左上部分，是網(wǎng)頁(yè)訪客的主要瀏覽區(qū)域，你可以將公司Logo或是Slogan等重要內(nèi)容放在這里。

強(qiáng)閑置區(qū)（Strong follow area）：位于網(wǎng)頁(yè)的右上區(qū)域，是讀者閱讀的次要內(nèi)容，對(duì)于大多數(shù)的網(wǎng)頁(yè)訪客來(lái)講，當(dāng)瀏覽了第一個(gè)區(qū)域后就會(huì)查看這個(gè)地方的內(nèi)容，你可以設(shè)置一些圖片在這里。

弱閑置區(qū)(Weak follow area）：這個(gè)區(qū)域位于網(wǎng)頁(yè)的左下角，是讀者比較容易忽略的區(qū)域，所以在網(wǎng)頁(yè)界面排版時(shí)，只需要放一些不重要的內(nèi)容即可。

最終視覺(jué)區(qū)(Final optical area)：右下方，視覺(jué)流程的終點(diǎn)。當(dāng)訪客對(duì)你的網(wǎng)頁(yè)產(chǎn)生興趣時(shí)，你可以在這里放一個(gè)聯(lián)系方式，這樣讀者就可以迅速聯(lián)系到你了。

根據(jù)這個(gè)模型，讀者的視線很自然就會(huì)以從左上方掃到右下方，并且每次掃視都沿著一條方向軸開(kāi)始從左到右看。使用這種設(shè)計(jì)模型來(lái)設(shè)計(jì)網(wǎng)頁(yè)的案例有很多，比如下圖這個(gè)「上線了」建站案例，在左上角主視區(qū)簡(jiǎn)單介紹品牌，吸引客戶；把視頻放在右下角（最終視覺(jué)區(qū)），引導(dǎo)訪客觀看視頻。

二、Z pattern

與古登堡結(jié)構(gòu)相似，這個(gè)視覺(jué)模型的基本概念也是從左往右，不同的是，Z-Pattern認(rèn)為網(wǎng)頁(yè)訪客在瀏覽網(wǎng)頁(yè)內(nèi)容時(shí)，是按照z字母的形狀瀏覽網(wǎng)頁(yè)的。在使用Z模式設(shè)計(jì)時(shí)，應(yīng)遵循以下結(jié)構(gòu)：

1.頂部的水平線應(yīng)該包括醒目的內(nèi)容和元素，比例logo和導(dǎo)航

2.對(duì)角線該向用戶介紹主要內(nèi)容。

3.一條較低的水平線，可以刺激用戶執(zhí)行某些動(dòng)作，比如購(gòu)買、注冊(cè)、電話、訂閱等。

這樣的排版也是比較常見(jiàn)的。同樣你也可以用「上線了」完成這樣的網(wǎng)頁(yè)設(shè)計(jì)與制作。比如下圖這個(gè)案例，就采用了Z-Pattern的排版方式：在網(wǎng)頁(yè)的左上角設(shè)計(jì)好網(wǎng)頁(yè)的Logo、標(biāo)題這些重要的內(nèi)容，然后在右上角添加購(gòu)物車按鈕，在網(wǎng)頁(yè)的中間添加一些核心圖片或文本說(shuō)明，底端右側(cè)引導(dǎo)用戶購(gòu)物下單。

三、F-Pattern

該視覺(jué)模型是由知名的網(wǎng)頁(yè)設(shè)計(jì)師尼爾森在2006年提出，該模型的概念就是當(dāng)網(wǎng)頁(yè)用戶訪客第一次訪問(wèn)一個(gè)網(wǎng)頁(yè)時(shí)，訪客會(huì)按照F字母的形式閱讀內(nèi)容，因此在做網(wǎng)頁(yè)界面排版時(shí)，你就可以利用這個(gè)模型來(lái)填充你的網(wǎng)頁(yè)內(nèi)容。這個(gè)視覺(jué)模型可以用于一些文字較多的網(wǎng)頁(yè)，例如博客、個(gè)人作品集網(wǎng)站以及產(chǎn)品介紹介面。







例如上面的這個(gè)網(wǎng)頁(yè)就是使用了F-Pattern視覺(jué)模型，通過(guò)這樣的方式設(shè)計(jì)自己的網(wǎng)站，有利于讀者快速瀏覽他們想要的資訊，這樣對(duì)你的網(wǎng)站轉(zhuǎn)化率有很大的提升！

四、三欄式編排設(shè)計(jì)

一些知名的電商網(wǎng)頁(yè)有時(shí)會(huì)選擇這個(gè)設(shè)計(jì)方式，這種設(shè)計(jì)方式能夠清晰地展現(xiàn)產(chǎn)品，因?yàn)橥ㄟ^(guò)三欄分布設(shè)計(jì)，讀者能夠在主頁(yè)面看到你的產(chǎn)品圖片以及價(jià)格等信息，這樣他們點(diǎn)擊了解產(chǎn)品的可能性就會(huì)很高了。通常來(lái)講，這個(gè)網(wǎng)頁(yè)界面設(shè)計(jì)包括了三個(gè)部分：

標(biāo)題：通常在網(wǎng)頁(yè)的最上方，可以設(shè)定一些導(dǎo)航按鈕以及公司Logo在上方，讓客戶快速找到他們想要的產(chǎn)品。

側(cè)欄選擇：通常設(shè)定在網(wǎng)頁(yè)的左邊，讓訪客能夠通過(guò)這個(gè)側(cè)欄對(duì)想要的產(chǎn)品進(jìn)行篩選，這個(gè)設(shè)計(jì)能夠讓消費(fèi)者瀏覽更多的產(chǎn)品。

商品主頁(yè)面：通常在標(biāo)題下方以及側(cè)欄右方，需要包含一些產(chǎn)品介紹以及產(chǎn)品圖片，通過(guò)文字加圖片的方式吸引消費(fèi)者。





好了，以上就是關(guān)于網(wǎng)頁(yè)界面設(shè)計(jì)的內(nèi)容了，你可以按照自己需求來(lái)使用不同的設(shè)計(jì)方案，這些排版設(shè)計(jì)方案都能用「上線了」建站系統(tǒng)做到，現(xiàn)在就來(lái)試試吧！

本文章由【上線了】原創(chuàng)，未經(jīng)授權(quán)，禁止轉(zhuǎn)載。歡迎關(guān)注我以及公眾號(hào)上線了（sxl-cn)，如果在使用過(guò)程中有任何疑問(wèn)或建議，你可以隨時(shí)通過(guò)公眾號(hào)后臺(tái)留言哦！