網(wǎng)頁界面設(shè)計(jì)中的組建空間設(shè)計(jì)要領(lǐng)

時(shí)間：2022-08-14 06:45:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2022-08-14 06:45:01 來源：網(wǎng)站運(yùn)營

細(xì)心及資深的網(wǎng)頁設(shè)計(jì)師應(yīng)該都知道，但凡被大家公認(rèn)為比較好的經(jīng)典網(wǎng)站設(shè)計(jì)作品都帶有一點(diǎn)“組件化”的味道。而作為視覺設(shè)計(jì)師對(duì)“組件化”的更多關(guān)注，不是前端框架的重復(fù)使用而高效，而是作為品牌應(yīng)該具有的視覺元素高度統(tǒng)一性。





一個(gè)功能及視覺均健全且用戶使用體驗(yàn)友好的網(wǎng)站或者互聯(lián)網(wǎng)產(chǎn)品，理應(yīng)在網(wǎng)站的各種細(xì)節(jié)組件上做到高度統(tǒng)一，今天我們談的各種細(xì)節(jié)，有點(diǎn)組件化的味道。就是我們每做一個(gè)網(wǎng)站設(shè)計(jì)時(shí)必須重點(diǎn)考慮到的一些標(biāo)配元素——Web導(dǎo)航欄設(shè)計(jì)、底欄設(shè)計(jì)、表單設(shè)計(jì)、FAB(浮動(dòng)操作按鈕)等等。




今天，我們深入梳理一下互聯(lián)網(wǎng)上曾出現(xiàn)過的各種Web導(dǎo)航欄設(shè)計(jì)（nav）、底欄設(shè)計(jì)(footer)、表單設(shè)計(jì)(form)、主題布局(body)、形象海報(bào)(banner)等等模式，以便于大家在工作中，能夠高效地使用。





web導(dǎo)航設(shè)計(jì)模式——nav





用戶在使用你的網(wǎng)站或web應(yīng)用時(shí)，需要清楚自己應(yīng)當(dāng)何去何從。如果你的應(yīng)用無法提供方便的導(dǎo)航，用戶將快速流失。網(wǎng)站主導(dǎo)航通常位于網(wǎng)站最上面，通常網(wǎng)站的主導(dǎo)航主要包括網(wǎng)站的首頁和產(chǎn)品欄目及各個(gè)單頁面的導(dǎo)入鏈接。方便用戶以最快，最簡單的到達(dá)不同的網(wǎng)頁！同時(shí)也方便用戶一目了然的發(fā)現(xiàn)網(wǎng)站的主要信息，而不用費(fèi)力的尋找！




從用戶體驗(yàn)度的角度來看：一般情況下，導(dǎo)航上的欄目或單頁面，是這個(gè)網(wǎng)站中最主要的、必不可少的內(nèi)容，也是站長希望除了首頁外，最希望別人點(diǎn)擊進(jìn)入的一些頁面或想要?jiǎng)e人了解的一些信息。




從搜索引擎優(yōu)化的角度來看，網(wǎng)站的主導(dǎo)航位于優(yōu)化網(wǎng)站中F區(qū)的最重要的部位，是搜索引擎蜘蛛檢索最看重、權(quán)重較高的一個(gè)位置，同時(shí)在網(wǎng)站的主導(dǎo)航上還布局了產(chǎn)品新聞欄目及各個(gè)單頁面的導(dǎo)入鏈接(各個(gè)二級(jí)欄目間的回流設(shè)置)，是設(shè)置整個(gè)網(wǎng)站回流的最核心的部分。




所以不管是從用戶體驗(yàn)度上考慮還是從搜索引擎優(yōu)化的角度考慮,網(wǎng)站的主導(dǎo)航都是一個(gè)網(wǎng)站中必不可缺少的一部分。所以說，為web應(yīng)用設(shè)計(jì)出有效的導(dǎo)航功能具有至關(guān)重要的意義。




下面就梳理了，web設(shè)計(jì)中常用的導(dǎo)航設(shè)計(jì)模式，基本上涵蓋了所有能見到的情況，當(dāng)然采用怎樣的導(dǎo)航模式，還需要根據(jù)具體的需求來定。我想下面的這些導(dǎo)航設(shè)計(jì)模式，會(huì)給大家工作帶來不少靈感哦




















































web底欄設(shè)計(jì)模式——footer




一般情況下，footer會(huì)包含網(wǎng)站創(chuàng)作者的名稱和聯(lián)系方式，以及版權(quán)所屬、工商局備案信息，以方便瀏覽者快速找到需要的內(nèi)容。




隨著互聯(lián)網(wǎng)網(wǎng)站設(shè)計(jì)用途和需求的變化，現(xiàn)在的網(wǎng)站，首頁大多數(shù)是多屏信息展示，當(dāng)用戶訪問到底部，再想要方便用戶跳轉(zhuǎn)到別的頁面，底部會(huì)適當(dāng)?shù)脑黾虞o助性的菜單導(dǎo)航。




底欄設(shè)計(jì)增加菜單導(dǎo)航，一方面有利于提高首頁，以及其他頁導(dǎo)航關(guān)鍵詞密度，更多的鏈接指向內(nèi)容頁面，有利于提高內(nèi)容頁面的權(quán)重，有利于搜索引擎優(yōu)化;另一方面，有利于用戶體驗(yàn)，讓用戶隨時(shí)都能找到重要導(dǎo)航的鏈接。




然而，網(wǎng)頁的footer設(shè)計(jì)，是很容易被大家忽略的部分，下面梳理了我們常見的底欄設(shè)計(jì)模式，希望大家能給每一個(gè)作品設(shè)計(jì)出一個(gè)漂亮的“結(jié)尾”。


































web表單設(shè)計(jì)模式--form




表單是99.999%的網(wǎng)頁、APP都要涉及到的部分，最常見的網(wǎng)頁表單有注冊、登錄、商品及信息搜索、意見反饋等等，所以表單設(shè)計(jì)重要性也不容忽視，至關(guān)重要哦，下面梳理的同樣也是常見的表單設(shè)計(jì)模式，不一定非常全面，不過也是涵蓋大部分情況哦~~




















































Floating Action Button (FAB)浮動(dòng)操作按鈕




Floating Action Button (FAB)（FAB）是浮動(dòng)在用戶界面上方的圖標(biāo)。它的形狀，位置和顏色使它與界面的其余部分明顯區(qū)分開來。在2014年Google推出了Material Design之后，F(xiàn)AB作為一個(gè)用戶界面元素，被廣泛應(yīng)用于網(wǎng)站設(shè)計(jì)和移動(dòng)設(shè)計(jì)中。雖然FAB可能被視為一個(gè)微小的，無關(guān)緊要的UI組件，但其效果是至關(guān)重要的。如能精心策劃和設(shè)計(jì)，將能大大提升用戶體驗(yàn)。網(wǎng)頁