<button id="awefu"><object id="awefu"><input id="awefu"></input></object></button>

  1. <tbody id="awefu"><noscript id="awefu"></noscript></tbody>
  2. <dd id="awefu"></dd>
    <progress id="awefu"></progress>

    <tbody id="awefu"><noscript id="awefu"></noscript></tbody>

    昆明UI培訓
    達內昆明五一路

    188-5191-7064

    扁平化設計里的設計風格有些什么?

    • 時間:2016-07-30 15:05
    • 發布:昆明UI培訓
    • 來源:達內新聞

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

    那么扁平化2.0到底是什么呢?讓我們昆明UI培訓機構的老師來給大家講解一下。

    扁平化設計特質

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

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

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

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

    盡量減少裝飾的極簡設計

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

    扁平化2.0的全新細節

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

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

    一、微陰影

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

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

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

    二、幽靈按鈕

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

    也許你已經在很多扁平化設計風格中見過它們了。它們通常會設計得比普通的按鈕略大,浮動于大圖背景、視頻的上方。你可以在飽覽整張圖片或整個視頻的同時也能看到它的存在,為了讓它獲得聚焦,通常它位于比較顯眼的位置,例如屏幕的中間。

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

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

    三、低調漸變

    談到避免極端的扁平主義,漸變的運用就有回暖之勢。而新的漸變不同以往,它往往是以更為低調的姿態出現的,比如只用于背景色或氛圍色,不再喧兵奪主,并且只在兩種顏色之間漸變過渡。下面是雙色漸變的實例。

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

    四、圓形

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

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

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

    五、雙色搭配

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

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

    六、動態要素

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

    昆明UI培訓機構的老師在最后的時候和同學們說,與其把新趨勢看作是一種方向,不如將其視為過程。扁平化的未來還需要在此基礎上不斷發展新的創意。

    上一篇:UI設計有哪些流程
    下一篇:產品體驗和用戶運營

    馬上預約三天免費體驗課

    姓名:

    電話:

    達內教育集團總裁韓少云:拒絕跟風 做適合自己的教育

    給Flash初學者的幾點建議

    如何讓開發人員按照UI標注還原設計?

    金融危機來了,如何面對?

    • 掃碼領取資料

      回復關鍵字:視頻資料

      免費領取 達內課程視頻學習資料

    • 視頻學習QQ群

      添加QQ群:1143617948

      免費領取達內課程視頻學習資料

    Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

    選擇城市和中心
    江西省

    貴州省

    廣西省

    海南省

    2018最新天堂福视频 2019亚洲福利合集 老司机带带我精品视频 百度 好搜 搜狗
    <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>