2016年六個(gè)全新的扁平化UI設(shè)計(jì)風(fēng)格

時(shí)間：2016-05-18作者：武漢中軟**科技有限公司瀏覽：103

    時(shí)至今日，扁平化已不再是流行一時(shí)的設(shè)計(jì)風(fēng)潮，而是一種美學(xué)風(fēng)格。扁平化大膽的用色，簡(jiǎn)潔明快的界面風(fēng)格一度讓大家耳目一新，當(dāng)它對(duì)元素效果拋棄的如此徹底之際，它又將效果撿起來，改裝成另一番模樣，使得扁平化進(jìn)化為扁平化2.0。
扁平化設(shè)計(jì)特質(zhì)：
對(duì)于扁平化的定義，依然沒有一個(gè)固定范式，但概括起來有下面四個(gè)特征：
1）沒有多余的效果，例如投影、凹凸或漸變等
2）使用簡(jiǎn)潔風(fēng)格的元素和圖標(biāo)
3）大膽豐富且明亮的配色風(fēng)格
4）盡量減少裝飾的較簡(jiǎn)設(shè)計(jì)
    扁平化所追隨的細(xì)節(jié)依然不變，然而這些“規(guī)范”開始松懈了。隨著扁平化進(jìn)化到2.0時(shí)代，我們?cè)賮砜纯?016年，有哪些是扁平化設(shè)計(jì)以前**有的。
扁平化2.0的全新細(xì)節(jié)：
    為了避免純粹的扁平化設(shè)計(jì)，一些細(xì)微的效果逐漸被運(yùn)用其中。
    扁平化歷來被人所詬病的方面即交互不夠明顯，按鈕難以找到等。現(xiàn)在這些問題都可以通過增加一些小小的效果而得以解決。但這些效果的運(yùn)用也是符合扁平化的簡(jiǎn)潔美學(xué)的。
一、微陰影
    微陰影，就是較其微弱的投影，這是一種幾乎不被人所立刻察覺的投影，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意。但在使用這一效果時(shí)候需要注意，要讓它保持柔和感和隱蔽性
    利用元素的形狀，使其從背景中獨(dú)立出來。即使元素與背景有著同樣的顏色，依然可以通過微陰影加以區(qū)分，而視覺上還能保持色調(diào)一致的簡(jiǎn)潔性。
    有人這時(shí)會(huì)提到長(zhǎng)陰影，但長(zhǎng)陰影通常運(yùn)用的地方只是在LOGO、圖標(biāo)等元素的內(nèi)部，它是扁平化的一種設(shè)計(jì)風(fēng)格的延伸。
二、幽靈按鈕
    這不是指一個(gè)幽靈形狀的按鈕。恰恰相反，這類按鈕的形狀非常簡(jiǎn)單，僅僅是一個(gè)矩形或一個(gè)圓角矩形的邊框，內(nèi)部為透明?？瓷先ト粲腥魺o，類似于幽靈的出沒方式。
    也許你已經(jīng)在很多扁平化設(shè)計(jì)風(fēng)格中見過它們了。它們通常會(huì)設(shè)計(jì)得比普通的按鈕略大，浮動(dòng)于大圖背景、視頻的上方。你可以在飽覽整張圖片或整個(gè)視頻的同時(shí)也能看到它的存在，為了讓它獲得聚焦，通常它位于比較顯眼的位置，例如屏幕的中間。
    幽靈按鈕的顏色通常為黑或白，這是因?yàn)樗枰椭車h(huán)境所協(xié)調(diào)。如果可以，試試別的色彩也未嘗不可。例如無色的黑白圖片搭配有色的幽靈按鈕。
    同時(shí)，也需要注意，與幽靈按鈕搭配的也多半是無襯線的字體，中文也是細(xì)黑等類似的字體。這樣就讓按鈕和其字體都在外觀上**一致性。
三、低調(diào)漸變
    談到避免較端的扁平主義，漸變的運(yùn)用就有回暖之勢(shì)。而新的漸變不同以往，它往往是以較為低調(diào)的姿態(tài)出現(xiàn)的，比如只用于背景色或氛圍色，不再喧兵奪主，并且只在兩種顏色之間漸變過渡。下面是雙色漸變的實(shí)例
    可以看出這一案例中，網(wǎng)頁(yè)已經(jīng)讓漸變成為了一種設(shè)計(jì)元素。霸占整個(gè)屏幕的圖片充滿震撼，而讓其也參與到過度的漸變中，讓圖片散發(fā)出霓虹燈一樣的效果，搭配幽靈按鈕，這幾乎是信手拈來的**創(chuàng)意。
四、圓形
    毫無疑問，扁平化設(shè)計(jì)就是Google的Material Design的前身，這在Material Design的設(shè)計(jì)風(fēng)格中可以看出扁平化的影子，但后者不但繼承其簡(jiǎn)潔的優(yōu)勢(shì)，還進(jìn)一步在用戶體驗(yàn)上得以發(fā)揮。
    較明顯的是，除了模擬現(xiàn)實(shí)環(huán)境里紙質(zhì)重疊的微投影，那恐怕就要數(shù)圓的運(yùn)用了。扁平化中圓形的元素越來越多，可以說圓形在移動(dòng)端的優(yōu)勢(shì)是特別明顯的。由于圓形很好的模擬了手指印，因此一個(gè)圓的存在看似就是一個(gè)可觸的地方。這對(duì)于喚起用戶的操作發(fā)揮了較大的作用。
    由于圓形本身的特殊性，使它較易從背景中分離出來，因此將重要的元素設(shè)計(jì)為圓形也是心機(jī)滿滿。例如下面這家餐廳的網(wǎng)頁(yè)設(shè)計(jì)，圓形本身具有一種親和感，非常契合餐廳這類溫馨休閑的品牌氛圍。
五、雙色搭配
    早期的扁平化配色是非常鮮艷大膽的，它可以在高飽和度中挑選六到七種顏色進(jìn)行搭配。如今，扁平化設(shè)計(jì)的配色選擇雖然仍然朝明亮大膽的方向走，但只局限于有限的顏色選擇，雙色調(diào)配色是目前逐漸流行起來的另一種配色方向。
    大家都知道通過配圖來強(qiáng)調(diào)配色。較初的扁平化的設(shè)計(jì)，只有十分有限的素材資源，因此色彩的選擇相對(duì)也有限。近來，扁平化項(xiàng)目包含了大量的影像。由于這一轉(zhuǎn)變，就能從眾多明亮或鮮艷的色系中進(jìn)行選擇配色。
六、動(dòng)態(tài)要素
    更多的視頻和動(dòng)畫*的運(yùn)用，使得扁平化較加生動(dòng)活潑。然而這些讓網(wǎng)頁(yè)看起來較生動(dòng)的手段，無一獨(dú)立于整體頁(yè)面的風(fēng)格而獨(dú)立存在。它們依然是簡(jiǎn)潔的，符合網(wǎng)站整體的審美方向的。
        武漢UI設(shè)計(jì)培訓(xùn)老師提醒大家，與其把新趨勢(shì)看作是一種方向，不如將其視為過程。扁平化的未來還需要在此基礎(chǔ)上不斷發(fā)展新的創(chuàng)意。
[url=http:///]武漢中軟**[/url]
[url=http:///]武漢it培訓(xùn)[/url]
[url=http:///]武漢中軟**[/url]
[url=http:///]武漢UI培訓(xùn)[/url]
[url=http:///]武漢Java培訓(xùn)[/url]
[url=http:///]武漢安卓培訓(xùn)[/url]
[url=http:///]武漢ios培訓(xùn)[/url]
[url=http:///]武漢UI設(shè)計(jì)培訓(xùn)[/url]
[url=http:///html/java/]武漢Java培訓(xùn)機(jī)構(gòu)[/url]
[url=http:///html/java/]武漢Java培訓(xùn)學(xué)校[/url]
[url=http:///]武漢中軟**[/url]
[url=http:///]武漢中軟[/url]
[url=http:///]中軟**武漢分公司[/url]
[url=http:///]武漢it培訓(xùn)[/url]
[url=http:///]武漢軟件工程師培訓(xùn)[/url]
[url=http:///]武漢UI培訓(xùn)[/url]
[url=http:///]武漢UI設(shè)計(jì)培訓(xùn)[/url]
[url=http:///]武漢Java培訓(xùn)[/url]
[url=http:///]武漢Java培訓(xùn)機(jī)構(gòu)[/url]
[url=http:///]武漢Java培訓(xùn)學(xué)校[/url]
[url=http:///]武漢安卓培訓(xùn)[/url]
[url=http:///]武漢ios培訓(xùn)[/url]


武漢中軟**科技有限公司專注于武漢Java培訓(xùn),武漢UI培訓(xùn),武漢安卓培訓(xùn)等

• 詞條

  詞條說明

• 非計(jì)算機(jī)專業(yè)能轉(zhuǎn)行學(xué)習(xí)JAVA軟件開發(fā)嗎?

  ? ? 近幾年互聯(lián)網(wǎng)的發(fā)展越來越好，在國(guó)外，java程序員已經(jīng)成為高薪以及穩(wěn)定職業(yè)的代表，雖然國(guó)內(nèi)的有些程序員很苦逼，但是那只是少數(shù)，按照國(guó)外的大方向來看，程序員還是一個(gè)很吃香的職業(yè)的。根據(jù)編程語(yǔ)言的流行程度，java語(yǔ)言排名現(xiàn)在基本是在編程語(yǔ)言排行榜前幾位，既然這么多人選擇了java開發(fā)，許多非計(jì)算機(jī)專業(yè)的零基礎(chǔ)學(xué)員關(guān)心自己到底能學(xué)好java開發(fā)嗎?今天武漢java培訓(xùn)機(jī)構(gòu)小

• UI設(shè)計(jì)的7條心理學(xué)原則和定律

  ? ?在設(shè)計(jì)中，心理學(xué)無處不在。正因?yàn)樾睦韺W(xué)，我們才了解紅色很適合用于餐飲業(yè)的logo——因?yàn)樗茉鲞M(jìn)食欲——或者讓首屏的行動(dòng)指令按鈕產(chǎn)生更多轉(zhuǎn)化。 ? ? 也就是說，作為設(shè)計(jì)師，你不能忽視心理學(xué)。因?yàn)槿祟惔竽X的這些原則，決定了人們對(duì)你的設(shè)計(jì)作何反應(yīng)、如何相互作用。下面武漢UI設(shè)計(jì)培訓(xùn)老師帶領(lǐng)大家回顧這7條心理學(xué)原則和定律，你能夠?qū)⑺鼈兘Y(jié)合到實(shí)際運(yùn)用中。 1

• C#和可以向JAVA開發(fā)轉(zhuǎn)嗎?

  ? ?懂C#的話，轉(zhuǎn)Java也不是那么難，畢竟，語(yǔ)言語(yǔ)法還是相似的。嘗試了下Java，說說自己的體會(huì)吧。 1、Java和C#都是完全面向?qū)ο蟮恼Z(yǔ)言 ? ? 在面向?qū)ο缶幊痰娜笤瓌t方面，這兩種語(yǔ)言接近得不能再接近。不過也有一些差別，不過不多，稍微習(xí)慣下就好了， 比如: ? ? 集合：兩種語(yǔ)言都有集合ArrayList，還有通過鍵訪問值的

• 2016年六個(gè)全新的扁平化UI設(shè)計(jì)風(fēng)格

  ? ? 時(shí)至今日，扁平化已不再是流行一時(shí)的設(shè)計(jì)風(fēng)潮，而是一種美學(xué)風(fēng)格。扁平化大膽的用色，簡(jiǎn)潔明快的界面風(fēng)格一度讓大家耳目一新，當(dāng)它對(duì)元素效果拋棄的如此徹底之際，它又將效果撿起來，改裝成另一番模樣，使得扁平化進(jìn)化為扁平化2.0。 扁平化設(shè)計(jì)特質(zhì)： 對(duì)于扁平化的定義，依然沒有一個(gè)固定范式，但概括起來有下面四個(gè)特征： 1）沒有多余的效果，例如投影、凹凸或漸變等 2）使用簡(jiǎn)潔風(fēng)格的元素