雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

常見的網(wǎng)頁布局設(shè)計有哪些,網(wǎng)頁布局設(shè)計原則是什么

Time: 2021-11-15

       網(wǎng)頁設(shè)計關(guān)系到產(chǎn)品的展示,關(guān)系到用戶的體驗,因此對網(wǎng)頁的設(shè)計要盡可能站在用戶的角度去思考,看看有哪些網(wǎng)頁布局設(shè)計是用戶接受和喜歡的。今天就讓faceui為大家介紹常見的網(wǎng)頁布局設(shè)計有哪些,網(wǎng)頁布局設(shè)計原則是什么。

  常見的網(wǎng)頁布局設(shè)計有哪些

  1、卡片式網(wǎng)頁布局

  卡片式布局被Pinterest、臉書和推特等網(wǎng)站所使用,它非常適合在新聞網(wǎng)站和博客上使用,因為卡片式布局可以在頁面上放置大量內(nèi)容,同時又保持每部分內(nèi)容各不相同。

  卡片式布局主要有兩種形式:網(wǎng)頁中每個卡片的尺寸相同,卡片的排列非常標準,例如Dribbble的網(wǎng)頁布局;使用不同尺寸的卡片組成頁面的布局,卡片間沒有固定的排序,例如Pinterest、花瓣的頁面布局。

  2、分屏布局

  當兩個元素在頁面上具有相等的權(quán)重時,分屏布局是一種流行的設(shè)計選擇,并且通常用于文本和圖像都需要突出顯示的設(shè)計中。分屏設(shè)計特別適合電子商務(wù)網(wǎng)站上的產(chǎn)品頁面。產(chǎn)品圖片需要在頁面上突出顯示,但價格、規(guī)格、購物車按鈕等信息也要顯示。

網(wǎng)頁布局設(shè)計

  網(wǎng)頁布局設(shè)計

  3、大標題

  隨著移動設(shè)計的盛行,大標題排版變得流行起來。大號字體在標題中特別流行,在一些網(wǎng)站的正文中也能看到。較大的文本更具可讀性,可以改善使用體驗。另外它還提供了強大的視覺效果,因此這種布局在極簡主義設(shè)計中特別受歡迎。

  4、個性化推薦

  個性化算法推薦可以根據(jù)每個人的喜好量身定制數(shù)字體驗。人工智能技術(shù)的發(fā)展讓算法變得更易用,能精確分析用戶的喜好。

  5、網(wǎng)格布局

  網(wǎng)格為設(shè)計提了視覺上的平秩序感,以一種平衡且有組織的方式呈現(xiàn)內(nèi)容,使內(nèi)容更易于人們使用。在網(wǎng)格設(shè)計中使用不同大小的內(nèi)容可以在保持內(nèi)容有序的同時增加視覺吸引力。

  6、雜志版式布局

  雜志和期刊的布局方式影響了網(wǎng)絡(luò)雜志的版面設(shè)計。這些網(wǎng)頁布局很適合有大量內(nèi)容的網(wǎng)站,尤其是每天都需要更新內(nèi)容的網(wǎng)站。

  7、單頁布局

  單頁布局將網(wǎng)站的所有主要內(nèi)容放在一個網(wǎng)頁上,通過滾動完成導(dǎo)航,有時還使用視差滾動效果。對于內(nèi)容稀疏的網(wǎng)站,單頁布局是一個很好的解決方案。同時它也是內(nèi)容敘事的完美選擇,比如交互式兒童讀物。

  8、F型&Z型布局

  F型和Z型布局是指用戶的視線如何在頁面上移動,即用戶如何掃描內(nèi)容。F型布局有非常明確的視覺層次結(jié)構(gòu),因此適合內(nèi)容更多的頁面。Z型布局將視線吸引到頂部,然后沿對角線方向向下延伸到底部,然后再次延伸。

  9、不對稱布局

  在設(shè)計中,不對稱會產(chǎn)生動態(tài)化的視覺沖擊力。大多數(shù)情況下不對稱是由于圖像和文本間無法平衡而造成的。由于不對稱會產(chǎn)生動態(tài)的、充滿活力的視覺印象,因此對那些想要傳達這種形象的品牌來說是非常有用的。

網(wǎng)頁布局設(shè)計

  網(wǎng)頁布局設(shè)計

  10、簡潔布局

  這種布局的優(yōu)點在于完全專注于內(nèi)容,沒有視覺上的混亂。干凈簡單的布局幾乎適用于任何類型的網(wǎng)站。許多優(yōu)雅的網(wǎng)站都可以被認為是“簡潔的”,無論它們包含什么設(shè)計形式。

  11、導(dǎo)航標簽

  導(dǎo)航標簽適合用于包含少數(shù)項目的菜單,否則導(dǎo)航會顯得很混亂。

  12、輪播

  輪播內(nèi)容包含圖像和文本,通常出現(xiàn)在網(wǎng)站的頂部,用來突出顯示內(nèi)容。

  網(wǎng)頁布局設(shè)計原則是什么

  網(wǎng)頁設(shè)計中結(jié)構(gòu)布局就顯得尤為重要,需要注意的以下方面:

  1、視覺美觀原則。如色彩對比,色彩色調(diào)的搭配。

  2、布局清晰,能充分展示網(wǎng)站功能的原則。

  3、布局合理的原則。這個有些不好解釋,如符合大眾用戶的瀏覽習(xí)慣。

  以上就是faceui為大家介紹的關(guān)于網(wǎng)頁布局設(shè)計的相關(guān)內(nèi)容。雖然網(wǎng)頁布局設(shè)計只是網(wǎng)頁設(shè)計中的一個內(nèi)容,但是它往往跟用戶的使用體驗直接相關(guān),所以也是需要重視的。

合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開