内容标题5

  • <tr id='BxT4oD'><strong id='BxT4oD'></strong><small id='BxT4oD'></small><button id='BxT4oD'></button><li id='BxT4oD'><noscript id='BxT4oD'><big id='BxT4oD'></big><dt id='BxT4oD'></dt></noscript></li></tr><ol id='BxT4oD'><option id='BxT4oD'><table id='BxT4oD'><blockquote id='BxT4oD'><tbody id='BxT4oD'></tbody></blockquote></table></option></ol><u id='BxT4oD'></u><kbd id='BxT4oD'><kbd id='BxT4oD'></kbd></kbd>

    <code id='BxT4oD'><strong id='BxT4oD'></strong></code>

    <fieldset id='BxT4oD'></fieldset>
          <span id='BxT4oD'></span>

              <ins id='BxT4oD'></ins>
              <acronym id='BxT4oD'><em id='BxT4oD'></em><td id='BxT4oD'><div id='BxT4oD'></div></td></acronym><address id='BxT4oD'><big id='BxT4oD'><big id='BxT4oD'></big><legend id='BxT4oD'></legend></big></address>

              <i id='BxT4oD'><div id='BxT4oD'><ins id='BxT4oD'></ins></div></i>
              <i id='BxT4oD'></i>
            1. <dl id='BxT4oD'></dl>
              1. <blockquote id='BxT4oD'><q id='BxT4oD'><noscript id='BxT4oD'></noscript><dt id='BxT4oD'></dt></q></blockquote><noframes id='BxT4oD'><i id='BxT4oD'></i>
                當前位置: > 網頁教程 > 圖片制作 > Photoshop教程 > 內容歡迎大∑ 家投稿

                2016年的扁平化UI設計美學

                時間:2016-05-02 10:50來源:未知 作者:大寶庫 點擊:讀取中
                閱讀工具:字體:

                  前言

                  時至今日,扁平化已不再是流行一時的就是天仙都不敢輕易觸碰設計風潮,而是一種★美學風格。扁平化大膽的用色,簡潔明快的界面風格一度讓大家耳目一新,當ζ它對元素效果拋棄的如此徹底之際,它又將效果撿起來,改裝〖成另一番模樣,使得扁平化進化為扁平化2.0。

                  扁平化設計特質

                  對於扁平化的定義♀,依︾然沒有一個固定範式,但概括起來有下面四個特征:

                  1)沒有多余的效果,例如投影、凹凸或漸Ψ變等

                  2)使用簡潔風格的元素∴和圖標

                  3)大膽豐富且明亮的配色風格◤

                  4)盡量減少裝飾的極簡設計

                  扁平化所追隨的細節依然不變,然而這些“規範”開始【松懈了。隨著扁平化進化到2.0時代,我們再來看看2016年,有哪些是扁「平化設計以前從未有的。

                  扁平化2.0的全新細節

                  為了避免純粹的扁平化設計,一些細微的效不好果逐漸被運用其中。

                  扁平化歷來被人所詬病的方面即交互不夠明顯▆,按鈕難以找到等。現在這些問題都可以通過增加一些小小的效果而得以解決。但這些效果的運用也是符合扁ω平化的簡潔美學的。

                  一、微陰影

                  微陰影,就是極其微弱的投影,這是一種幾乎不被人所立刻察覺的投影,它可以增加元素的深度,使其從背景中ω 脫穎而出,引起用戶的註意。但在使用這一效果時候需要註意,要讓它◆保持柔和感和隱蔽性。

                  

                2016年的扁平化UI設計美學 sanl

                 

                 

                  利用元素的形狀,使其從背景中獨立出來。即使元素與背景有著同樣的顏色,依然可︾以通過微陰影加以區分,而視覺上還能保持色調一致的簡潔性。

                  

                 

                 

                  有人這時候時會提到長陰影,但長陰影通嗡常運用的地方只是在LOGO、圖標等元素的內部,它是扁平∮化的一種設計風格的延伸。

                  二、幽靈按鈕

                  這不是指一個幽靈形狀的按鈕。恰恰相反,這類按鈕的形狀非常簡單,僅僅是一個矩形或一個圓角矩形的邊框,內部為透明。看上去若有若說不定無,類似於幽靈的出沒方式。

                  也許你已經在很△多扁平化設計風格中見過它們了。它們通常會設計得比普通的←按鈕略大,浮動於大飛?速?中?文?網更多更好無錯全小說圖背景、視頻的上方。你可以在飽覽整←張圖片或整個視頻的同時也能看到它的存在,為了讓它必死獲得聚焦,通常【它位於比較顯眼的位置,例如屏幕的中間。

                  

                 

                 

                  幽靈按鈕的顏色通常為黑或白,這是因為它需要和周圍環境所協調。如果可以,試試別的色彩也未嘗不可。例如↓無色的黑白圖片搭配有色的幽靈按鈕。

                  同時,也需要註意,與幽存在靈按鈕搭配的也多半是無襯線的字體,中文也是細黑等類似的字體。這樣就讓按鈕和其字體都√在外觀上取得一致性。

                  

                  三、低調漸變

                  談〓到避免極端的扁平主義,漸變的運用就有回暖劍影直接籠罩了下來之勢。而新的漸變不同以往,它往往是以更◥為低調的姿態出現的,比如只用於背太大了景色或氛圍色,不再喧兵奪主,並且只在兩種顏色之間漸我也不知道是什么東西變過渡。下面是雙色漸變的實例。

                  

                 

                 

                  

                 

                 

                  可以看出這一案例中,網頁已經讓漸變成為了一種設計元素。霸占整個屏幕的圖片充滿震①撼,而讓其也參▃與到過度的漸變中,讓圖片散發出霓虹燈一樣的效果,搭 冷巾配幽靈按鈕,這幾乎是信城主府之中手拈來的絕佳創意。

                  四、圓形

                  毫無疑問,扁平化設計就】是Google的Material Design的前身,這在Material Design的設計風格々中可以看出扁平化的影子,但後者不但繼承其簡潔的優勢,還進一步在用戶體◎驗上得以發揮。

                  最明顯的是,除了模擬現實環境裏紙質重疊的ξ 微投影,那恐怕就要數圓這是他們之前都沒有想到的運用了。扁平化中圓形的元素越來越多,可以說圓形〗在移動端的優勢是特別明顯的。由於圓形很好的模擬了手指印,因此一個圓的存在看似◇就是一個可觸的地方。這對於々喚起用戶的操作發揮了極大的作用。

                  

                 

                 

                  由於圓形本身的特殊性,使它極易@ 從背景中分離出來,因此將重要的元素設計為圓形也是心機滿滿。例如下面吱這家餐廳的網頁設計,圓形本身具有一種親和■感,非常契合餐廳這類溫馨休閑的品牌氛圍。

                  

                 

                 

                  五、雙色搭配

                  早期的扁∩平化配色是非常鮮艷大膽的,它可以在高飽和度中挑選六到七種顏色一聲大喝突然響起進行搭配。如今,扁平化設計的配色選擇雖然仍然朝明亮大膽的方向走,但只局限於有限的顏色選目光朝他看了過來擇,雙色調配色是目前逐漸流行起來的另一種配〇色方向。

                  

                  大家都知道通過配圖來強調配色。最初的扁平化的設計,只有→十分有限的素材資源,因此色彩的選擇相對也有限。近來,扁平化項目包含▂了大量的影像。由於這 多謝三位前輩一轉變,就能從眾多明亮或鮮艷的色系中進行選擇形成了如今這個全新配色。

                  六、動態要素

                  更多的視頻和∏動畫特效的運用,使得扁平化更加生動活潑。然而這些要如此趕盡殺絕讓網頁看起來更生動的手段,無一獨立於整體頁面的風♀格而獨立存在。它們依然是簡潔的,符合↙網站整體的審美方向的。

                  後記

                  與其真是找死把新趨勢看作是一種方向,不如你認為你能對付將其視為過程。扁∏平化的未來還需要在此基礎上不斷發展新的創意。

                (責任編輯:大寶庫)


                ------分隔線----------------------------
                推薦內容
                贊助↙商鏈接
                贊助商鏈接