網頁布局都有哪種?一般都用什麼布局?

像優酷、知乎這樣的網站在pc端用什麼布局?在移動端又用什麼布局?


謝謝邀請啦。感覺你說的有點籠統。布局可以是編碼方面的,也可以是視覺方面的。編碼方面的涉及到語義化標籤(也包含了div+css)布局、iframe框架(特殊地方使用)布局和表格布局(只用於一些特殊的地方,不推薦全站使用),具體你可以百度下了解學習下相關知識。

如果是視覺交互方面的,就比較多了,每年都會有新的設計布局,高級一點的比如視差類型布局,全屏布局,瀑布流,無縫拼圖布局等,這些都不局限於傳統的布局方式;傳統電子商務、信息類的大多採用單欄、兩欄或者三欄布局,還有更多欄布局;解析度相關的寬屏布局和窄屏布局,感應式布局。太多的選擇了,要學習的東西也比較多,要慢慢了解啦。還有更多的布局需要慢慢摸索和體驗。我把我知道的說了。

至於手機端,例舉一些:豎排列表、橫排方塊、九宮格、TAB切換式、手風琴布局(有多個分類及其內容同時展示)、抽屜/側邊欄、標籤場景式),因為屏幕小,要增加用戶體驗都可以根據具體情況用不同的布局方式。具體的可以多搜索看點教程了解了解

說得都是直白語,自己總結的,某些詞是術語可以搜索查詢下,希望你能看懂啦

最後,自己在一次視頻公開課中詳細講了關於web設計中的很多東西哈,希望對你有幫助

WEB UI(網頁界面設計)基礎+進階免費視頻公開課2016完整版


【不一樣的網頁布局】

使用方塊布局的目的是什麼?

或許這對你而言有點哲學和理論化,我們來看看別人選擇方塊布局的原因。(順便提一句,我所指的方塊也包括矩形,有些案例也使用矩形。)使用這種元素有兩大原因。首先也是最重要的,它有助於組織內容。其次,它也能打造特殊的樣式。它們是展現內心渴望和需求的完美元素。

看看Dennis Adelmann的作品集,顯而易見,方塊元素被用來組織排列他的作品。這是組織排列任意數量內容的簡單途徑,讓事物保持簡潔。

Dennisadelmann

不過再看看We Love Noise這個網站,它就完全不同!是的,到處都是方塊,移動滑鼠時還有個有趣的動畫效果。不過除了組織內容之外,你會發現方塊元素也成為了設計風格的一部分。它是這種風格關鍵的決定性元素。

Welovenoise

怎樣用好它們?

我不覺得使用方塊元素是什麼難事。尤其是網頁,自從誕生之初就開始使用方塊形狀來設計界面。但是你若想更有效地使用它,請遵循以下幾個步驟。

制定希望達成的目標

根據你所要達成的目標,頁面和區塊會有很大的不同。一旦你確定了,方塊元素就能幫助你完成目標。你是用它來組織內容?還是想為頁面增添一點樂趣?

看看Paper and Paint。他們使用方塊元素保持頁面井井有條,並且突出了頁面特有的流動性。隨著滑鼠向下滾動,每個方塊中的不同內容都在進行著視覺差滾動——這是個非常酷的效果——每個方塊都向你講述獨特的故事,匯聚成整個頁面。這些方塊元素的作用,就是保持各部分對齊,形成一種整潔的時尚,同時也為各個頁面營造不同的故事氛圍。

Paperandpaint

Anthonyjohngroup

Anthony John Group使用方塊來展示他們創作的各個項目,還有關鍵的公司信息,比如「幕後團隊」。主頁的規劃與構建很棒,但也結合緊密。很明顯,他們致力於創造像這個頁面一樣優雅的高端建築設計,如果沒有這些方塊,可達不到這樣的效果。

使用方塊來組織內容

既然了解了你所追求的目標——儘管那幾乎就是整合現有的信息——你會接觸到內容組織的。你得把內容編成目錄。要如何在各個方塊中組織信息——某些方塊內容會比其他的更多嗎?這對組織內容很有幫助,你會來回擺弄,看看哪些有用哪些沒用,發現哪些內容太多,哪些內容太少。我保證這不是什麼高超技巧,實際上它不太需要憑直覺,大多時候都很簡單——坐下來去完成它就是了。

Blocklevel

注意到上面這個網站沒有,Block Level,方塊和方塊中的圖標就是全部了,只有圖標。這就是我所指的組織內容,Block Level的設計者故意在每個方塊中只留下一個圖標。下一步就是要考慮如何將調整過的內容放在令人愉悅的設計中,這正是我們下面要講的。

調整這些方塊,或者乾脆不動它!

既然組織內容的工作讓你了解一組組信息看起來是什麼樣,你就要思考應該怎麼處理這些方塊。這是讓你打磨內容塊大小的一步,可能你希望它們都保持一致——又或者你決定讓它們錯落雜亂排布。這還是得取決於你的具體目標。

從Nedd中可以看出,方塊元素都非常巨大,它們有著近似的寬度和相等的高度,讓網站看起來井井有條。我希望你注意的是,雖然這是偏向於內容組織的用法,網站的樣式仍然非常有趣輕快,這主要得益於它的顏色、矢量元素、圓形的應用、字體等等。

Nedd

另一方面,我們還有像Banana Café這樣元素散亂的網站——如果你想,也可以這樣優美地亂序排列。這個網站看起來也很好玩,得益於它的字體、顏色的選用等等。方塊的這種特殊用法其實沒什麼,只是一種特定的設計手段。

Bananacafe

點綴樣式

有千萬種設計方法,可以為你下個項目中的方塊元素打造特殊風格。你可以將它們與其他元素自由組合,比如圓形,或者採用貫穿始終的矩形或正方形來營造網站的視覺焦點。最後兩個例子中,你會再次見識如何將方塊良好地應用於設計中,希望對你有所啟發,並能在你下個項目中發揮作用。

Janfinnesand

Jan Finnesand用了全屏的寬度與高度來放置方塊,每一塊都有特殊作用,大多展示了他以往的項目案例。充滿整個瀏覽器窗口的方塊造就了一件非常酷的設計。

Thenewdesignproject

這家公司無處不用方塊!主頁上可以看到,他們也展示不同的案例。通過不同尺寸的正方形引導用戶視線。我最喜歡的一點是,他們用兩個正方形來組成一張更大的圖片,但每一張都指向一個獨特的項目——我覺得這很酷。

文章來源:http://www.51rgb.com

更多好文章:


剛接觸網頁不久 如有不對請指出改正

整理了一下資料如下

1.「國字」型布局

「國」字型布局由「同」字型布局進化而來,因布局結構與漢字「國」相似而得名。其頁面的最上部分一般放置網站的標誌和導航欄或Banner廣告,頁面中間主要放置網站的主要內容,最下部分一般放置網站的版權信息和聯繫方式等。

2.T型布局

T型布局結構因與英文大寫字母T相似而得名。其頁面的頂部一般放置橫網站的標誌或Banner廣告,下方左側是導航欄菜單,下方右側則用於放置網頁正文等主要內容。

3.標題正文型

標題正文型布局的布局結構一般用於顯示文章頁面、新聞頁面和一些註冊頁面等。

4.左右框架型布局

左右框架型布局結構是一些大型論壇和企業經常使用的一種布局結構。其布局結構主要分為左右兩側的頁面。左側一般主要為導航欄鏈接,右側則放置網站的主要內容

5.上下框架型

上下框架型布局與前面的左右框架型布局類似。其區別僅在於是一種上下分為兩頁的框架。

6. 綜合框架型

綜合框架型布局是結合左右框架型布局和上下框架型布局的頁面布局技術

7.POP布局

POP布局是一種頗具藝術感和時尚感的網頁布局方式。頁面設計通常以一張精美的海報畫面為布局的主體。

8.FLASH布局

FLASH布局是指網頁頁面以一個或多個Flash作為頁面主體的布局方式。在這種布局中,大部分甚至整個頁面都是Flash。


相關問題

  • 960px 寬度的網格布局過時了嗎? 13 個回答
  • 在 CSS 布局中,用 float 好還是用 position 好?分別有什麼優勢? 21 個回答
  • 寫 CSS 的為什麼要叫網頁重構? 13 個回答
  • HTML 標籤 & 和 & 在網頁顯示中有什麼區別? 4 個回答
  • 英文網站的布局、樣式設計有什麼標準或技巧?


互聯網終端多元化對網頁布局結構與配色帶來新挑戰

網頁布局誰來定?

當蘋果公司已故前 CEO 史蒂夫·喬布斯提出「後 PC 時代」這個概念之時,我們已經能夠預感到,網站建設未來接入互聯網的設備將不僅僅只有 PC,上面的數據也清晰的印證了這一點。隨著手機、平板電腦等移動終端產品的迅速普及,接入互聯網的設備也進入了多元化的時代。這些各種各樣接入互聯網的設備帶來的新問題就是,顯示的解析度千差萬別。億企建站從小尺寸的手機屏幕的 480*320 的解析度,到 7 寸平板電腦 1024*600 的解析度,再到新款 iPad 的 Retina 顯示屏擁有 2048×1536解析度,千差萬別的屏幕解析度給網頁設計師的設計帶來新的挑戰。如何將完美的頁面顯示效果呈現在這些不同的終端屏幕上,就需要設計師的精心布局與考量。


除了這些還有什麼布局呢?怎麼學起來


三型布局網頁 有哪些?


推薦閱讀:

CSS布局,為什麼英文會撐破容器不會自動換行而中文不會?
如何學網頁界面設計?
流布局與響應式網頁設計有什麼區別?
網頁的 Table 布局和 DIV+CSS 布局從哪裡可以看出來?Table 布局已經過時了嗎?
一般用什麼軟體來設計網站的頁面?

TAG:網頁設計 | 前端開發 | CSS | 網頁布局 |