用一篇文章,帶你了解12種常見的網頁布局設計

2020-12-05 騰訊網

原文地址：

toptal.com/designers/ui/web-layout-best-practices

譯文地址：Clip設計夾（公眾號）

作者：Cameron Chapman

譯者：Clippp

為什麼了解網頁布局很重要？網頁布局在很大程度上決定了網站的訪問者將如何與網頁內容進行交互。

這裡將介紹一些常見的網頁布局形式，例如卡片式、分屏布局、網格布局……一起來看看吧！

一、卡片式網頁布局

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

卡片式布局主要有兩種形式：

1.網頁中每個卡片的尺寸相同，卡片的排列非常標準，例如dribbble、UI中國的網頁布局；

2.使用不同尺寸的卡片組成頁面的布局，卡片間沒有固定的排序，例如Pinterest、花瓣的頁面布局。

二、分屏布局

當兩個元素在頁面上具有相等的權重時，分屏布局是一種流行的設計選擇，並且通常用於文本和圖像都需要突出顯示的設計中。

分屏設計特別適合電子商務網站上的產品頁面。產品圖片需要在頁面上突出顯示，但價格、規格、購物車按鈕等信息也要顯示。

三、大標題

隨著移動設計的盛行，大標題排版變得流行起來。大號字體在標題中特別流行，在一些網站的正文中也能看到。

較大的文本更具可讀性，可以改善使用體驗。另外它還提供了強大的視覺效果，因此這種布局在極簡主義設計中特別受歡迎。

四、個性化推薦

個性化算法推薦可以根據每個人的喜好量身定製數字體驗。人工智慧技術的發展讓算法變得更易用，能精確分析用戶的喜好。

根據用戶之前的訂閱習慣，Netflix可以為用戶個性化推薦他們最有可能觀看的電影。

像Medium這樣的網站會基於用戶以前閱讀和喜歡的內容，向他們展示很多同類型的文章。

五、網格布局

網格為設計提了視覺上的平秩序感，以一種平衡且有組織的方式呈現內容，使內容更易於人們使用。

在網格設計中使用不同大小的內容可以在保持內容有序的同時增加視覺吸引力。

六、雜誌版式布局

雜誌和期刊的布局方式影響了網絡雜誌的版面設計。這些網頁布局很適合有大量內容的網站，尤其是每天都需要更新內容的網站。

七、單頁布局

單頁布局將網站的所有主要內容放在一個網頁上，通過滾動完成導航，有時還使用視差滾動效果。

對於內容稀疏的網站，單頁布局是一個很好的解決方案。同時它也是內容敘事的完美選擇，比如交互式兒童讀物。

八、F型&Z型布局

F型和Z型布局是指用戶的視線如何在頁面上移動，即用戶如何掃描內容。F型布局有非常明確的視覺層次結構，因此適合內容更多的頁面。

Z型布局將視線吸引到頂部，然後沿對角線方向向下延伸到底部，然後再次延伸。

九、不對稱布局

在設計中，不對稱會產生動態化的視覺衝擊力。大多數情況下不對稱是由於圖像和文本間無法平衡而造成的。

由於不對稱會產生動態的、充滿活力的視覺印象，因此對那些想要傳達這種形象的品牌來說是非常有用的。

十、簡潔布局

這種布局的優點在於完全專注於內容，沒有視覺上的混亂。

乾淨簡單的布局幾乎適用於任何類型的網站。許多優雅的網站都可以被認為是「簡潔的」，無論它們包含什麼設計形式。

十一、導航標籤

導航標籤適合用於包含少數項目的菜單，否則導航會顯得很混亂。

十二、輪播

輪播內容包含圖像和文本，通常出現在網站的頂部，用來突出顯示內容。

總結

好的網頁設計具有很強的適應性並且對用戶來說始終是友好的。

遵循網頁布局的最佳實踐，能夠帶來全新的數字體驗，靈活地調整不斷變化的技術和設計趨勢，進一步實現品牌目標。

可愛的你請把可愛的我設為「星標」。

相關焦點

  • 一篇文章帶你了解Shopify的全部網頁設計
    站內優化其中很重要的一個點就是著陸頁的設計，一個好的著陸頁體現的是更多的是高轉化或者好的活動設計，現在就給大家分享幾個shopify店鋪中典型的幾種著陸頁的用法。一般來說，新手剛開始推廣的時候，會選用shopify的產品頁，類目頁，或者直接店鋪首頁，今天介紹的是使用shopify page頁自定義的著陸頁。
  • 網頁設計布局包括哪些類型?
    建站離不開網頁設計，而網頁布局則是重中之重，其實布局可以說是一個網站的基礎，網頁設計布局是為了吸引用戶和提高網站的用戶體驗。在進行網頁設計布局時網頁內容是需要進行有機整合和分布的，以此來達到某種視覺效果。而設計網頁的目的不同，就有不同的網頁布局，那麼網頁設計布局都包括哪些類型呢？
  • 網頁布局設計與色彩搭配
    網頁是網站構成的基本元素，精彩的網頁離不開網頁設計。在網頁設計的眾多環節中，頁面布局和色彩搭配是重要的環節之一。 1. 網頁的布局類型。 在網上瀏覽能看到許多精美的主頁和布局。
  • 一篇文章搞懂原子設計
    這種設計就好像一次性的碗筷，用後即扔，非常非常得低效，它不僅沒有辦法復用，而且無體系、非模塊的處理方式非常摧殘設計師的精力。這是導致很多朋友淪為作圖機器的罪魁禍首之一。原子設計這門學問覆蓋面極為龐大，我不想用一篇沒營養的文章草草了事，那樣對自己、對大家都沒什麼實際意義上的幫助。目前的計劃是將它分為幾類。今天先主要搬出理論，後續的實踐我會結合實際案例來進行分享！
  • 網頁設計的黃金比例
    ，雖然現在很多人傾向使用Grid css框架（如960，blueprint），但有時也需要設計一些獨特的布局本文我們要探討如何將黃金分割理論運用到網頁設計中，大部分涉及到的技術也同樣適用於其他的設計或藝術類工作，當然主要還是針對於網站設計布局。
  • 網頁製作的布局方法
    在製作網頁前，可以先設計出網頁的草圖。網頁布局的方法有兩種：一種為紙上布局，另一種為軟體布局。紙上布局法許多網頁設計人員喜歡先畫出頁面布局的草圖，然後在網頁編輯工具裡根據草圖進行布局。軟體布局法如果不喜歡用紙來畫出布局示意圖，那麼可以利用 Photoshop、 Fireworks等軟體來。完成這些工作。這樣可以方便地使用顏色、圖形，並且可以利用圖層的功能設計出用紙張無法實現的布局意念。
  • 流程圖設計一篇文章看懂!
    是當下使用率比較高的一種圖表，能夠清楚地反映出複雜流程脫離於繁多文字能夠一眼就幫助你梳理邏輯，理清思路，客觀直接地了解大概流程的一種圖表。數據流程圖包括外部實體、處理過程、數據存儲和系統中的數據流這四個部分。1)外部流程指在系統外與之有聯繫的事物。通俗來說就是指數據的輸入與輸出。在數據流程圖中一般用正方形框表示，框裡寫上其名稱。
  • 一篇文章搞懂原子設計 - 視覺同盟(VisionUnion.com)
    這種設計就好像一次性的碗筷，用後即扔，非常非常得低效，它不僅沒有辦法復用，而且無體系、非模塊的處理方式非常摧殘設計師的精力。這是導致很多朋友淪為作圖機器的罪魁禍首之一。原子設計這門學問覆蓋面極為龐大，我不想用一篇沒營養的文章草草了事，那樣對自己、對大家都沒什麼實際意義上的幫助。目前的計劃是將它分為幾類。今天先主要搬出理論，後續的實踐我會結合實際案例來進行分享！
  • 高端定製網站設計常見的五大布局
    那麼高端定製網站設計與模板化網站在布局上有什麼不同呢？本期深圳網站設計Angle就為大家分享高端定製網站設計常見的五大布局。這樣做的好處就是整個屏幕的內容不受其他因素影響，同時也能給用戶更強的視覺體驗感，讓用戶專注於想要了解的內容。而且這樣處理方式還能顯得網站更加大氣、簡潔自然些。2、響應式隨著代碼技術的成熟，響應式也成了網站的基本要求的，這個也是高端定製網站設計所必須具備的。
  • 企業網站設計合理的布局方式
    網站頁面布局彰顯個性當下大部分網站的布局設計和內容都是千篇一律的，而用對於這些大同小異的網站很容易產生審美疲勞，從而徹底失去瀏覽的興趣。如果在頁面布局當中體現出個性化的設計，就會讓用戶感覺到這個網站的與眾不同和新奇之處，同時就會產生強烈的好奇心，吸引用戶去瀏覽網站。
  • 一篇文章帶你了解MIPI
    MIPI (Mobile Industry Processor Interface)移動行業處理器接口聯盟是 2003年由ARM, Nokia, ST（意法半導體），TI（美國德州儀器）四家公司成立的一個聯盟，目的是把手機內部的接口如攝像頭、顯示屏接口、射頻/基帶接口等標準化，從而減少手機設計的複雜程度和增加設計靈活性。
  • 20款適合初學者的網頁設計工具
    因此，網頁設計也成為了企業在網站建設過程中非常關注的要素，畢竟好的網頁作用在於吸引用戶、留住用戶和提升轉化率。 那如何設計出優秀的網頁呢？今天我們就給大家分享20款好用的網頁設計工具（上篇），讓企業的網站在無形中對用戶產生巨大的吸引力。
  • CSS網頁布局基礎教程
    網頁布局基礎教程網頁的布局有很多種方式，一般分為以下幾個部分：頭部區域部分菜單導航區域部分內容區域部分底部區域部分- 網頁布局教程</p> </div> <div> <h2>主區域內容</h2> <p>網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程
  • iPad網頁設計類應用軟體推薦
    本文是來自mobiweb20.com的一篇文章，介紹了20個iPad網頁設計類的應用程式，尤其適合於使用iPad進行UI設計的程式設計師。iMockupsiMockups 可以讓你直接在 iPad 上進行 Web 網頁設計。
  • 用一篇文章帶你深入了解!
    對於這一點，我以前寫過一篇非常詳細的文章03Facebook常見問題1Facebook廣告應該如何設定受眾？首先，避免受眾重疊。如果同一受眾需要設置多個廣告組，建議不要超過三個。如果超過三個，廣告組可能會出現跑不動的情況。2廣告受眾有哪些？
  • title是什麼意思_HTML網頁標籤_SEO標題優化
    （解決需求、獨特新穎、描述吸引）一、title含義title常見於網站源文件head頭部中，出現方式成對出現<title></title>作為計算機語言的><body>內容</body></html>二、title形式tltle標籤成對出現在網站源文件內保存網站網頁出現的文件名就是網站title標籤內的文字顯示在瀏覽器的標題欄搜尋引擎抓取頁面，了解頁面信息，
  • 一篇文章帶你全面了解蛋白粉!
    上上篇文章給大家分享了成年人需要每天攝入多少蛋白質，成年人究竟需要多少蛋白質？其中對蛋白粉簡單一筆帶過，那麼今天就跟大家科普下蛋白粉。今天這一期主要講講蛋白粉的分類以及相關介紹，明天咱們再詳細聊聊蛋白粉的是是非非。
  • 在網頁設計中,圖片常用的五點技巧
    作為最常見也是最早使用的網頁多媒體，圖片對於網頁設計師而言至關重要。如何用好圖片已經成為了一項成熟、完善而又講究的技巧，而在高清屏幕無處不在的今天，稍有瑕疵的圖片都在高密度的像素下無所遁形，而不合理的圖片設計也不會逃過訪客的雙眼。
  • 加速全球化布局,保利威推出網頁直播英文版
    作為國內領先的企業級視頻雲服務商，保利威致力於以視頻賦能客戶全球化布局，洞察到這個海外企業的需求缺口，保利威迅速上線了網頁開播英文版，依託領先的視頻雲技術，為客戶提供更友好、更便捷的視頻直播解決方案，助力中國企業更好地開拓海外市場，為全球企業提供抗疫支持。
  • Web設計教程:網頁設計中的對比原則
    網頁設計是由很多個不同的元素構成的, 而這些元素的重要性都不同, 並且有些元素還需要尤為的突出.有些元素彼此之間存在著聯繫,而另外的元素之間則 一點關聯性都沒有.比較難辦的部分就是如何有效的在視覺上來傳遞元素之間的關係.這就該用到對比原則了.