南順網絡

新手做(zuò)網頁設計？這9款經典網頁布局設計了解下

現在，越來越多的(de)人想要建立自(zì)己的(de)網站，通過自(zì)助建站系統就可(kě)以自(zì)己進行網頁制作了。這無疑是一(yī)件好事，但是，很多設計師，尤其是新手設計師或者壓根兒就不是設計師的(de)小白，都在網頁設計上走過不少彎路。

網頁制作最重要的(de)就是網頁布局，先布局，後細節，隻有在選擇了合适的(de)網站布局以後，才可(kě)以順利的(de)進行接下來的(de)工作。你要問網站布局有哪些？今天，Mockplus為(wèi)你精選了 9 款不同的(de)經典網站布局設計案例，希望給你靈感。

1.Diker Bau網站

網站布局思路：精選圖片展示品牌标識

Diker是一(yī)家位于德國柏林的(de)建築規劃集團。設計師突出了以精選圖來概述品牌标識的(de)主要特征和(hé)屬性。精選圖被用作整個網站結構和(hé)架構的(de)基礎。由于此布局中缺少其他元素，精選圖會引起用戶對産品的(de)完全關注。

如(rú)果你想設計一(yī)個可(kě)以快速銷售産品的(de)網站，那麽就可(kě)以使用這種布局。精選圖可(kě)以與訪客建立情感聯系，一(yī)張大而得體的(de)照片或插圖會産生強烈的(de)共鳴并創造出令人難忘的(de)第一(yī)印象。當你隻需展示一(yī)種産品或服務，并将用戶的(de)全部注意力集中在其上時，此布局非常有用。

訪問網站：https://www.behance.net/gallery/22105949/Diker-Bau...

2. Chekhov

網站布局思路：分屏布局

該網站使用了分屏布局，這種布局可(kě)以同時展示兩個同等重要的(de)內(nèi)容信息。此外，設計師将兩種信息相互對立，創造出完美的(de)對比，以吸引更多訪客的(de)目光。分屏布局，再加上呼應的(de)動畫，該網站創建出更加精緻的(de)體驗。

如(rú)果你的(de)網站需要提供兩種截然不同的(de)用戶旅程變體，那麽使用拆分屏幕的(de)布局吧(ba)。但是要避免在拆分部分添加太多內(nèi)容。如(rú)果內(nèi)容過長(cháng)過多，分屏設計不能很好地(dì)擴展，會影響體驗。因此，如(rú)果你需要在拆分部分提供大量文本或視(shì)覺信息，則不适合這種布局。

訪問網站：https://chekhov.withgoogle.com/alive#home

3. Timothee Roussilhe

網站布局思路：視(shì)差滾動布局

該網站是設計師Timothee Roussilhe的(de)一(yī)個簡單而富有創意的(de)簡曆網站。他增加了視(shì)差效果，為(wèi)訪客提供更愉快和(hé)令人印象深刻的(de)體驗。向下滾動時，會有很多個盒子(zǐ)移入和(hé)移出。令人驚奇的(de)是，所有的(de)盒子(zǐ)都增加了視(shì)差效果，你會覺得你正在看一(yī)場電影。

摹客設計系統上線了！三大福利送不停！

領取福利

如(rú)果你想設計一(yī)個看起來很酷，富有創意和(hé)令人印象深刻的(de)網站，那就添加一(yī)個視(shì)差效果。但是不要把它搞得一(yī)團糟，保持布局簡單并使用更幹淨的(de)配色方案。

訪問網站：http://timroussilhe.com/

4. Happiness Abscissa

網站布局思路：側邊欄導航

該網站使用了一(yī)個固定的(de)側邊欄導航來顯示整個布局。導航無疑是任何網站的(de)關鍵部分，主菜單是大多數用戶在導航時首先要查找的(de)內(nèi)容。除了頂部水平導航外，你還可(kě)以通過将菜單選項放在固定的(de)側邊欄中來布局。側邊欄應該選擇頁面左側或右側的(de)垂直列。對于此布局，側邊欄保持靜止并始終保持可(kě)見，而其餘頁面随着用戶向下滾動頁面而更改。還要确保這種導航具有可(kě)訪問性。

此布局适用于導航選項數量相對有限的(de)網站。當用戶進入頁面時，所有選項最好都在視(shì)線範圍內(nèi)。側邊欄還可(kě)以包含菜單以外的(de)內(nèi)容，例如(rú)社交媒體鏈接，聯系信息或你希望訪問者輕松查找的(de)任何內(nèi)容。

編輯:--ns868