網(wǎng)站建設扁平和簡(jiǎn)約來(lái)襲發(fā)布者：本站     時(shí)間：2022-03-28 09:03:15

在過(guò)去幾年里，軟件和APP的界面設計風(fēng)格發(fā)生了迅速變化，由3D、擬物發(fā)展到扁平、簡(jiǎn)約。盡管這一趨勢普遍存在，我們還是思考下是如何發(fā)展至此的，以及它對整個(gè)界面設計領(lǐng)域有何影響。另外，我會(huì )分享扁平界面設計的一些技巧和注意問(wèn)題。
 
扁平和簡(jiǎn)約來(lái)襲
 
 Windows Phone 8 和 Apple’s iOS 7的用戶(hù)界面

 
 
發(fā)生了什么？
那么，為什么群體意識從喜愛(ài)帶紋理、有透視和陰影的設計轉變喜愛(ài)扁平色彩和極簡(jiǎn)圖形的設計呢？當然導致這一轉變有很多因素，但是有一些因素更為突出。  

 

信息過(guò)載       

隨著(zhù)世界聯(lián)系越來(lái)越緊密，我們不斷地接受大量信息，一些信息是重要的、相關(guān)的，但大部分不是。我們不斷地評估其價(jià)值，過(guò)濾無(wú)用信息，或創(chuàng )建新的內容，所有這些都使我們精疲力竭。還有，大部分內容消費已轉移到小屏幕設備，更是加劇了超負荷現象。這樣我們就很容易就淹沒(méi)在信息中，砍掉用戶(hù)界面（UI）的繁雜元素才是視覺(jué)設計的王道。

 扁平和簡(jiǎn)約來(lái)襲

擺脫混亂: Geckoboard的設計使關(guān)鍵數據被一目了然呈現，并易于理解   

 

簡(jiǎn)約就是金科玉律       

同樣有個(gè)趨勢就是，顛覆性的網(wǎng)頁(yè)應用和服務(wù)正提供高度專(zhuān)用化的工具，只設計少數功能。雖然傳統軟件開(kāi)發(fā)員傾向于為產(chǎn)品加載過(guò)多功能，以期獲得高價(jià)定位；但目前變化趨勢專(zhuān)注于微應用，偏愛(ài)功能簡(jiǎn)潔。簡(jiǎn)單的應用意味著(zhù)有簡(jiǎn)單的界面。

 扁平和簡(jiǎn)約來(lái)襲

美觀(guān)且精致：  由Oak.設計的 Blue 天氣應用程序  

 

又一次，以?xún)热莺诵?nbsp;      

新設備和新技術(shù)涌入市場(chǎng)時(shí)，常常會(huì )出現這樣的情況，我們熱衷于思考于它們能做什么，我們又怎樣才能提高交互性。但關(guān)注界面設計這一狂熱之后又回歸專(zhuān)注于內容。媒體資源的消費，不論文字、音樂(lè )還是視頻、音視頻，等我們設備上最常用的活動(dòng)，在你樂(lè )享其中時(shí)，肯定不希望被無(wú)關(guān)的界面元素打擾。  

 

技術(shù)水平      

 　　隨著(zhù)智能手機和平板電腦已滲透到千家萬(wàn)戶(hù)，顯性操作正在逐漸減少。過(guò)去，如果彈窗沒(méi)有從屏幕跳出來(lái)，我們曾擔心用戶(hù)會(huì )錯過(guò)操作，而現在，我們更愿意讓用戶(hù)去探索這種細微的交互體驗。鑒于此，很多互聯(lián)網(wǎng)產(chǎn)品已經(jīng)支持沒(méi)有任何視覺(jué)引導的觸碰指令。

  扁平和簡(jiǎn)約來(lái)襲

Fitbit的儀表盤(pán)的視覺(jué)設計清爽,、膽大,和親和力  

 

技術(shù)的影響

大部分軟件受限于運行平臺。屏幕尺寸和像素密度也受限于硬件設備條件。一個(gè)簡(jiǎn)約的界面需要十分有限的設計元素，這意味著(zhù)每一個(gè)元素都要有所發(fā)揮。排版布局和字體粗細在很大程度上決定了扁平設計的美觀(guān)和易用性。

如果你的目標設備不能處理好這方面的細微差別，你就不太幸運了。隨著(zhù)屏幕尺寸和像素密度不斷增加，更細、更小的樣式也能呈現最佳的清晰度。當然，對@font-face屬性的支持，提高了對文字間距的集中處理，也增加了極簡(jiǎn)排版的吸引力。

 

扁平和簡(jiǎn)約來(lái)襲

Wallmob的市場(chǎng)數據監控應用：從任何一個(gè)有一個(gè)瀏覽器的設備上都可以檢測到數據  

 

響應式設計       

隨著(zhù)各種尺寸聯(lián)網(wǎng)設備的普及，交互界面變得更需要強調適配性，響應式設計也就應運而生。雖然響應式設計并不要求特定風(fēng)格，但扁平的交互界面顯然比其它樣式要更容易處理。簡(jiǎn)約設計的另一種優(yōu)勢就是，能見(jiàn)降低頁(yè)面重量和縮短加載時(shí)間。

 

扁平和簡(jiǎn)約來(lái)襲

無(wú)重量的響應設計: OnSite. (大尺寸展示)  

 

勇于實(shí)踐
好了，不嘮叨理論了。讓我們看看實(shí)踐上的操作吧。設計一個(gè)有效的簡(jiǎn)約風(fēng)格很具有挑戰的。當你拋棄界面上那些花哨的裝飾元素（下拉陰影，透視關(guān)系，紋理材質(zhì)等），立馬就會(huì )意識到剩余的元素關(guān)鍵且重要。以下幾個(gè)技巧在設計中普遍很實(shí)用，特別是針對扁平UI設計：

 

開(kāi)始設計之前

任何項目開(kāi)始第一步，就是確保你選對風(fēng)格。深入設計之前，確保風(fēng)格符合目標用戶(hù)的感知需求，適應目標平臺、承載設備和應用類(lèi)型。如果該方案風(fēng)格與項目不匹配，那么接下來(lái)的導向則毫無(wú)意義。

 

流程

設計流程非常重要，無(wú)論選擇何種樣式！簡(jiǎn)約設計時(shí)記住以下幾點(diǎn)：

1.  設計minimal界面時(shí)，我會(huì )從pre-pc時(shí)代尋求靈感，那個(gè)時(shí)候的藝術(shù)大師，用少量的資源做了大量的設計。例如：Josef Müller-Brockmann 和Wim Crouwel，重溫這些大師的作品是很好的學(xué)習機會(huì )。但是有時(shí)我也會(huì )參考minimal畫(huà)家的作品，如Ellsworth  Kelly，建筑師，如Mies van der Rohe 和工業(yè)設計師，如Dieter Rams。

2. 放下工作，休息一下很有幫助。扁平和簡(jiǎn)約設計的一切均關(guān)乎到細節的差異。因此小憩片刻后再回到工作，帶著(zhù)全新的眼光工作，比長(cháng)時(shí)間冥思苦想更有效。

3. 并排比較各個(gè)版式同樣有幫助。哪怕花20分鐘前將一個(gè)線(xiàn)條下移各5個(gè)像素分別保存，對比兩個(gè)版式就能很快分清孰好孰壞。

4. 由于實(shí)物展示的相對比例至關(guān)重要，所以要及早在不同的目標設備上測試。

5.  整個(gè)設計過(guò)程中不斷問(wèn)自己“真的需要嗎？” 。支撐項目時(shí)候，找一些討巧的辦法，例如，添加一些有趣的元素、樣式會(huì )這樣會(huì )很容易也會(huì )很吸引人，但必須始終注意剔除不必要的元素，不斷精簡(jiǎn)。甩掉你費盡心血的部分總是難以割舍，但修改過(guò)程必須挑剔。

   扁平和簡(jiǎn)約來(lái)襲

Global Closet: 由The Workshop為美國地理雜志教育板塊設計的一個(gè)互動(dòng)游戲 

 

  網(wǎng)格      

     網(wǎng)格在界面設計中扮演很重要的角色，這里也不例外。如果你想通過(guò)建立視覺(jué)規范使整個(gè)設計次序化、直觀(guān)化，那么網(wǎng)格就很有幫助。

1. 網(wǎng)格不僅僅能展現視覺(jué)次序。還可以使用網(wǎng)格劃分內容和功能組。你可以不用總是使用直線(xiàn)或框劃分對象組，其實(shí)簡(jiǎn)單的對齊和間距設置也能幫助用戶(hù)理解界面結構。

2. 試著(zhù)打破網(wǎng)格的結構，突出重要的元素來(lái)吸引用戶(hù)眼球。告別虛假的3D元素裝飾后，實(shí)物比例和定位等基本布局原則就是展現視覺(jué)次序的關(guān)鍵。

3. 嘗試一下你不習慣的更密集的網(wǎng)格設計。當你大量減少視覺(jué)配色這些元素時(shí)，又會(huì )發(fā)現這種設計方式可以承載更復雜的結構，也不顯得凌亂。如果你有想表達的額外的內容信息你可以單獨放置。

 

扁平和簡(jiǎn)約來(lái)襲

Rossul 設計的Live School iPad app   

 

顏色 

      當然，顏色在視覺(jué)設計中角色很重要，對minimal界面更為關(guān)鍵。

1. 考慮更寬泛的配色方案。如果你們像我一樣，那么就會(huì )明白相近的配色往往使界面功能性更強。而以強烈的寬泛的配色來(lái)設計就更容易了?，F在是你發(fā)揮的機會(huì )，只用少量的元素，擴展配色方案會(huì )讓你感覺(jué)很好。

2. 設置配色方案時(shí)，測試所選色調要在很寬的色譜內進(jìn)行，才可保證用明暗對比來(lái)表現畫(huà)面。

3.如果你想試試同系配色和鮮明對比。要及早測試配色，以確保微妙變化和高對比度元素都能有足夠的選擇空間。

 扁平和簡(jiǎn)約來(lái)襲

TriplAgent‘的視覺(jué)設計使用了豐富的配色

 

文字排版

    以?xún)热葜鲗У谋馄绞骄W(wǎng)頁(yè)而言，文字排版就是大英雄，功不可沒(méi)。

1.襯線(xiàn)是一種選擇，無(wú)襯線(xiàn)則會(huì )顯得更干凈。

2. 在品種繁多，粗細和樣式各有差別的字體系列查找你需要的字體。當然不是使用全部，而寬泛的選擇幫你更準確的定義出層級關(guān)系，同時(shí)你也會(huì )發(fā)現某些字體會(huì )更適合特定環(huán)境。

3. 不要顧忌把大小和粗細差別懸殊的字體搭配在一起就一定會(huì )造成視覺(jué)凌亂。用超大、超細的字體做標題而用中等粗細的小號字體做正文其實(shí)也是一種嘗試。

4. 要注意字體便于閱讀。我知道聽(tīng)起來(lái)可笑，但人們會(huì )對你選擇的字體產(chǎn)生很多質(zhì)疑，所以確保按任何比例縮放時(shí)均能閱讀

 扁平和簡(jiǎn)約來(lái)襲

Siteleaf的設計，文字呈現干凈且易讀  

 

交互    

在扁平設計中，證明元素的交互性會(huì )顯得很棘手。這是我采用的幾個(gè)方法。

1. 對比很關(guān)鍵。如果構圖留白比較多，你可以給可操作元素一點(diǎn)彩色；如果是文字為主，可以使用簡(jiǎn)單的配圖；如果標題是大號小寫(xiě)字母，鏈接可以用小號大寫(xiě)字母；就是這個(gè)意思。

2. 傳統布局也很有用。如果你要放置一個(gè)返回按鈕，那就將其放置在用戶(hù)期望找到返回按鈕的位置上，左上角。

3. 當頁(yè)面堆疊更多功能時(shí)，把每個(gè)交互元素設計成按鈕沒(méi)意義。界面盡量設計直觀(guān)一些。但如果交互特別復雜或者出乎意料，提供簡(jiǎn)單的錯誤恢復功能。

4.下拉框、模式窗口、彈出框等層級元素在扁平設計中一般比較難處理。而對鮮明的對比、邊框、著(zhù)色的處理，也能從視覺(jué)上區分出交互層級。