網頁設計扁平化特點

1、常見的幾種網站設計風格

網站建設中網頁布局大致可分為：「國」字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等，以下分別論述：

1、國字類型：也被稱為同字型，頂部是網站的標題、橫幅廣告條，然後是網站的主體內容個，而左右分別是一些比較小的內容條，中間就是主要內容，最底部是網站的一些基本信息、聯系方式、版權聲明等。這也是現在網上見到的差不多最多的一種結構類型；

2、拐角型：這種類型其實與國字型很相近的，只是在形式上不一樣，最上面的部分是網站的標題以及網站的橫幅廣告條，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接；

3、標題正文類型：上面是網站的標題，或者是類似的東西，接著就是網站的正文內容，例如是一些文章或者是注冊登錄頁面；

4、左右框架類型：這是一種左右為分別兩頁的框架結構，一般布局是：左邊是導航鏈接，最上面有時是一個小的標題或標致，而右面就是主要內容，最常使用是論壇網站，企業網站中的內頁有很多是採用這種布局方式的；這種類型的布局的特點是結構清晰明了；

5、上下框架類型：與左右框架類型類似，只是這種類型是上下兩頁的框架；

6、綜合框架類型：其實就是左右框架類型和上下框架類型的結合體；

7、封面型：這種類型基本上是出現在一些網站的首頁，多是精美平面結合小動畫，再加幾個簡單鏈接或僅是一個「進入」鏈接或無任何提示；

8、Flash型：其實這與封面型結構是類似的，採用了目前非常游戲行的Flash，與封面型不同的是，由於Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差於傳統的多媒體；

9、變化型：即上面幾種類型的結合與變化，但所實現的功能的實質是那種上、左、右結構的綜合框架型；

2、類似dropbox這樣的網頁配圖設計扁平化的重要特點有哪些

扁平化完全屬於二次元，這個概念最核心的地方就是放棄一切裝飾效果，諸如陰影，透視，紋理，漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都干凈利落，沒有任何羽化，漸變，或者陰影。界面干凈整齊，使用起來格外簡潔，扁平化設計更簡約，條理清晰，最重要的一點是，更好的適應性。
Dropbox是一款非常知名的同步網盤，目前由於地區限制，國內用戶尚不能使用。
堅果雲是一款便捷、安全的專業雲存儲產品，通過文件自動同步、備份、共享功能，為用戶實現智能文件管理，提供高效辦公解決方案。因其簡單易用的特性，被廣大用戶視作「Dropbox」的國內替代品。像Dropbox一樣易用，卻無牆的煩惱。

3、類似dropbox這樣的網頁配圖設計扁平化的重要特點有哪些類似dropbox這樣的網頁配圖設計扁平

扁平化完全屬於二次元，這個概念最核心的地方就是放棄一切裝飾效果，諸如陰影，透視，紋理，漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都干凈利落，沒有任何羽化，漸變，或者陰影。界面干凈整齊，使用起來格外簡潔，扁平化設計更簡約，條理清晰，最重要的一點是，更好的適應性。
Dropbox是一款非常知名的同步網盤，目前由於地區限制，國內用戶尚不能使用。堅果雲是一款便捷、安全的專業雲存儲產品，通過文件自動同步、備份、共享功能，為用戶實現智能文件管理，提供高效辦公解決方案。因其簡單易用的特性，被廣大用戶視作「Dropbox」的國內替代品。像Dropbox一樣易用，卻無牆的煩惱。

4、網站設計風格主要體現在哪幾個方面

網站簡單的可以分為：功能型和展示型

功能型：網站在美工設計上可能不適合大塊圖片，在數據功能上比較強，比如：搜索、會員注冊。一般企業網、購物網、大型門戶、交友網等。

展示型：追求視覺上的美麗，對功能要求不高，在美工上、設計上要有強烈的視覺感。這種網站一般屬於：美容業、女性用品、服飾等。
可以是企業展示網站、企業宣傳網站、門戶網站、電子商務、社交交友、綜合型網站等等。
1、將你的標志logo，盡可能的放在每個頁面上最突出的位置。

2、突出你的標准色彩。

3、總結一句能反映貴站精髓的宣傳標語！

4、相同類型的圖像採用相同效果，比如說標題字都採用陰影效果，那麼在網站中出現的所有標題字的陰影效果的設置應該是完全一致的！

二、網頁色彩的搭配 　

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。在此告訴大家一些網頁配色時的小技巧。

1、用一種色彩。這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。

2、用兩種色彩。先選定一種色彩，然後選擇它的對比色。

3、用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區： 　

1、不要將所有顏色都用到，盡量控制在三至五種色彩以內。

2、背景和前文的對比盡量要大，(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。

現在是眼球經濟時代，什麼都要靠包裝。你的網站設計的不好看，也無法引起用戶的興趣。我想誰都不喜歡看那些亂七八糟的網站，進去之後看不到網站主題，看不到主要內容，也找不到我們想要的信息。成功網站的第一步，就是從設計開始做起。
一、確定網站的整體風格
網站的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站，在這里，提供給大家一些參考經驗：
1、將你的標志logo，盡可能的放在每個頁面上最突出的位置。

2、突出你的標准色彩。

3、總結一句能反映貴站精髓的宣傳標語！

4、相同類型的圖像採用相同效果。

二、網頁色彩的搭配 　

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。在此告訴大家一些網頁配色時的小技巧。

1、用一種色彩。這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感。

2、用兩種色彩。先選定一種色彩，然後選擇它的對比色。

3、用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區： 　

1、不要將所有顏色都用到，盡量控制在三至五種色彩以內。

2、背景和前文的對比盡量要大，(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。

5、簡述網頁設計的風格有哪些

一、首先從功能與設計目標來看， H5專網頁主要有以下4大類型：

1.活動運營型

為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最後落地到品牌App內部，如何設計一套合適的引流路線也頗為重要。

2.品牌宣傳型

不同於講究時效性的活動運營頁，品牌宣傳型H5頁面等同於一個品牌的微官網，更傾向於品牌形象塑造，向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。

3.產品介紹型

聚焦於產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。

這一類型的H5頁面多見於汽車品牌，LEXUS NX是其中的優秀代表案例。精緻和極富質感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性，宏觀和微觀都照顧周全。

4.總結報告型

自從支付寶的十年賬單引發熱議後，各大企業的年終總結現也熱衷於用H5技術實現，優秀的互動體驗令原本乏味的總結報告有趣生動了起來。

二．形式為功能服務

在確定了專題頁的功能目標之後，接下來就是關鍵的設計階段了。如何有的放矢地進行設計，需要考慮到具體的應用場景和傳播對象，從用戶角度出發去思考什麼樣的頁面是用戶最想看的最會去分享的。

1.簡單圖文

簡單圖文是早期最典型的H5專題頁形式。「圖」的形式千變萬化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果。考驗的是高質量的內容本身和講故事的能力。

2.禮物/賀卡/邀請函

每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物，那創意和製作便是重要的加分項。

3.問答/評分/測試

問答形式的H5頁面也屢見不鮮了，利用用戶的求知慾和探索欲，一路選選選，看最後到底是什麼成績。一條清晰的線索是必要的，最後到達的結果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。

4.游戲

從 「圍住神經貓」、「看你有多色」等單純小游戲再到杜蕾斯「一夜N次郎」（即山寨版「別踩白塊兒」）等品牌植入式小游戲，H5游戲因為操作簡單、競技性強，一度風靡朋友圈，但創意缺乏和同質化現象導致用戶對無腦小游戲逐漸產生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設計上多下點功夫。

三．為設計加分的4個要點

一個H5頁面設計品質的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認知。在這里總結出以下的設計要點：

1.細節與統一

要成就高品質的用戶體驗，必須考慮到細節與整體的統一性。復古擬物的視覺風格，那字體就不能過於現代；幽默調侃的調調，那文案措辭就不能過於嚴肅；打情感內容牌的，動效就不能過於花哨。

2.緊跟熱點，利用話題效應

想要你的H5專題頁一夜爆紅，第一時間抓住熱點並火速上線，借機進行品牌宣傳也不失為一條捷徑。

3.講個好故事，引發情感共鳴

不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅里，學會講故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。

4.合理運用技術，打造流暢的互動體驗

隨著技術的發展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。相較於塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術，用心專注於為用戶提供流暢的互動體驗。

結語

隨著手機硬體的升級、HTML5技術的發展以及微信平台的開放，HTML5的跨平台、低成本、快迭代等優勢被進一步凸顯，這對身處於移動互聯網大潮的企業主、品牌、設計師和開發者來說，都將是一個最好的時代。

6、網站採用扁平化設計有什麼好處

　一、風格簡約的網站本身就給人一種耳目一新的感覺，現在的網站如此之多，如果想要被用戶記住的話，那麼簡約風格的網站一定是首選。扁平化的設計風格剛好能夠滿足在這樣的要求，它十分的簡潔，能夠從直觀上給用戶想要的事物，能夠讓用戶一眼就記住。

二、扁平化設計能夠很好的提高網站的載入速度，網站的載入速度越高，用戶的體驗感也會更好。如果一個網站的載入速度很慢的話，那麼用戶需要等待的時間會很久，久而久之，用戶就會更換網站。扁平化網頁設計可以很好的將網頁設計的元素化，減少了很多減少網站速度的內容，有效的提高了網站的載入速度。

三、隨著現在人們對智能手機以及平板的使用，人們瀏覽網站的習慣和工具已經發生了很大的變化，如果還是以前復雜的網站的話，那麼用戶的體驗感是很差的。而扁平化設計可以很好的滿足用戶的需求，對於各種瀏覽器和終端的兼容性是很高的。

總的來說，如果大家不知道選擇什麼樣的網頁設計的話，那麼選擇扁平化的設計風格肯定是沒有任何的問題的，並且不管時代怎麼樣變化，這樣的網頁設計都是很受歡迎的。

7、扁平化網頁設計需要注意什麼

這種風格對於像素級別的設計非常到位，對於色彩和空間的把控也非常棒。扁平化設計可以使網頁更加耐看，不容易產生審美疲勞，但是也並不是說就可以萬試萬靈，也需要判定要設計的網站是否適合扁平化風格，並且在扁平化設計時要注意許多問題。
首先，也是大前提，客戶認可扁平化網站。如果客戶不滿意，網站建設豈不是違背了初衷？
其次，網站內容與信息量龐大，需要簡潔有序的設計風格時，扁平化設計無疑是一個非常好的選擇。
第三，網站設計元素過於「散漫」，但又都不能舍棄之時，扁平化設計可以將其「串聯」在一起，並不覺突兀。
第四，部分行業網站，例如IT界亦或是科技界等具有進步精神的行業網站就非常適合扁平化設計。反之像是旅遊網站、兒童站點就不太適合。
第五，如果一個網站很依賴視覺形象展示又或是交互功能，那麼扁平化設計也會使其受到一定的限制。
最後，扁平化與枯燥呆板完全不同，它只是提倡一種「Less is More」的設計理念，通過簡潔讓重要元素更加的醒目，布局上同樣要下足功夫.

8、如何評價扁平化設計和非扁平化設計

扁平化設計的大要點 5 如今設計界最炙手可熱的明星大概就是扁平化設計了吧，關於它的討論至今都沒有冷卻的跡象。諸多設計師分成了 涇渭分明的兩個陣營，一邊努力把扁平化做到極致，一面對其丌屑一顧。 那麼，扁平化究竟該怎麼實現怎麼應用呢？下文將要做的就是分析扁平化的五個最典型的特徵，同時也介紹一下偽 扁平化（丌含貶義，只是一種折衷的設計方式） 。 一 、拒絕特效 扁平化這個詞來自於這種設計所使用的樣式和形狀，它完全屬於二次元世界，一個簡單的形狀加沒有景深的平面， 丌叫扁平化都浪費這個詞了。 這個概念最核心的地方就是放棄一切裝飾效果， 諸如陰影、 透視、 紋理、 漸變等等能做出 3D 效果的元素一概不用。 所有的元素的邊界都干凈俐落，沒有任何羽化、漸變或者陰影。 這一設計趨勢極力避免任何擬物化的元素，這導致這一設計風格在其它平台有時候顯得突兀，前景圖片、按鈕、文 本和導航欄不背景圖片格格丌入，各成一派。那麼，扁平化的效果如何呢？ 因為這種設計有著鮮明的視覺效果，它所使用的元素乊間有清晰的層次和布局，這使得用戶能直觀的了解每個元素 的作用以及交互方式。如今從網頁到手機應用無丌在使用扁平化的設計風格，尤其在手機上，因為屏幕的限制，使 得這一風格在用戶體驗上更有優勢，更少的按鈕和選項使得界面干凈整齊，使用起來格外簡單。 二 、界面元素 扁平化設計通常採用許多簡單的用戶界面元素，諸如按鈕或者圖標乊類。設計師們通常堅持使用簡單的外形（矩形 或者圓形） ，並且盡量突出外形，這些元素一律為直角（極少的一些為圓角） 。 這些用戶界面元素方便用戶點擊，這能極大的減少用戶學習新交互方式的成本，因為用戶憑經驗就能大概知道每個 按鈕的作用。 此外，扁平化除了簡單的形狀乊外，還包括大膽的配色。但是需要注意的是，扁平化設計不是說簡單的搞些形狀和 顏色搭配起來就行，它和其他設計風格一樣，是由許多的概念不方法組成的。 三 、優化排版 由於扁平化設計的使用特別簡單的元素，排版就成了很重要的一環，排版好壞直接影響視覺效果，甚至可能間接影 響用戶體驗。 字體是排版中很重要的一部分，和其他元素相輔相成。想想看，一款花體字在扁平化的界面里得有多突兀。上圖是 一些扁平化網站使用無襯線字體的例子。無襯線字體家族龐大分乊眾多，其中有些字體會在特殊的情景下會有意想 丌到的效果。但注意，過猶丌及，不要使用那些極為生僻的字體，因為保丌齊它就把你帶迚坑裡了。 如何使用字體也是一門學問，要學會讓不同的字體表達不同的概念，通過字體告訴用戶這某一設計／功能的含義， 努力使字體成為你簡化設計的有力武器。 四 、 如何配色 扁平化設計中，配色貌似是最重要的一環，扁平化設計通常採用比其他風格更明亮、炫麗的顏色。同時，扁平化設 計中的配色還意味著更多的色調。比如，其他設計最多隻包含兩三種主要顏色，但是扁平化設計中會平均使用六到 八種。 而且扁平化設計中，往往傾向於使用單色調，尤其是純色，並且丌做任何淡化或柔化處理（最受歡迎的顏色是純色 和二次色） 。另外還有一些顏色也挺受歡迎，如復古色（淺橙、紫色、綠色、藍色等） 。 五 、最簡方案 設計師要盡量簡化自己的設計方案，避免丌必要的元素在設計中出現。簡單的顏色和字體就足夠了，如果你還想添 加點什麼，盡量選擇簡單的圖案。 扁平化設計尤其對一些做零售的網站幫助巨大，它能很有效的把商品組織起來，以簡單但合理方式排列。 另：偽扁平化設計範例： 有一種趨勢值得關注，一些設計師把某一項特效融入整體的扁平化乊中，是其成為一種獨特的效果。比如說，在簡 單的按鈕加一點點漸變或陰影，從而使這種風格成為其特色，產生出一種扁平化設計的變種。這種設計要比單純的 扁平化更具有適用性和靈活性。 許多設計師比較喜歡這種設計，因為這意味著他們可以加點陰影或透視在某些元素上。用戶可能也會喜歡這種稍微 圓滑一點的設計方式，這能引導他們迚行一些適當的交互。

9、什麼是扁平化設計風格

扁平化完全屬於二次元，這個概念最核心的地方就是放棄一切裝飾效果，諸如陰影，透視，紋理，漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都干凈利落，沒有任何羽化，漸變，或者陰影。尤其在手機上，更少的按鈕和選項使得界面干凈整齊，使用起來格外簡潔。可以更加簡單直接的將信息和事物的工作方式展示出來，減少認知障礙的產生。

10、+互聯網網站扁平化設計指的是什麼？

網站扁平化設計是指拋棄那些已經流行多年的漸變、陰影、高光等擬真視覺結果，打造出一種看上去更「平」的界面，其核心是去除冗餘、厚重和繁雜的裝飾效果。扁平風格網站的優點在於可以更加簡單直接的將信息和事物的工作體例展示出來，削減認知停滯的產生，界面美觀、簡潔明了，達到降低功耗、延長待機時間和提高運算速度的效果。