[核心提示] 在過去幾年里,軟件和 APP 的界面設(shè)計(jì)風(fēng)格發(fā)生了迅速變化,由 3D、擬物發(fā)展到扁平、簡約。盡管這一趨勢普遍存在,我們還是思考下是如何發(fā)展至此的,以及它對整個界面設(shè)計(jì)領(lǐng)域有何影響。
在過去幾年里,軟件和 APP 的界面設(shè)計(jì)風(fēng)格發(fā)生了迅速變化,由 3D、擬物發(fā)展到扁平、簡約。盡管這一趨勢普遍存在,我們還是思考下是如何發(fā)展至此的,以及它對整個界面設(shè)計(jì)領(lǐng)域有何影響。另外,我會分享扁平界面設(shè)計(jì)的一些技巧和注意問題。
Windows Phone 8 和 Apple iOS 7 的用戶界面
發(fā)生了什么?
那么,為什么群體意識從喜愛帶紋理、有透視和陰影的設(shè)計(jì)轉(zhuǎn)變喜愛扁平色彩和極簡圖形的設(shè)計(jì)呢?當(dāng)然導(dǎo)致這一轉(zhuǎn)變有很多因素,但是有一些因素更為突出。
信息過載
隨著世界聯(lián)系越來越緊密,我們不斷地接受大量信息,一些信息是重要的、相關(guān)的,但大部分不是。我們不斷地評估其價值,過濾無用信息,或創(chuàng)建新的內(nèi)容,所有這些都使我們精疲力竭。還有,大部分內(nèi)容消費(fèi)已轉(zhuǎn)移到小屏幕設(shè)備,更是加劇了超負(fù)荷現(xiàn)象。這樣我們就很容易就淹沒在信息中,砍掉用戶界面(UI)的繁雜元素才是視覺設(shè)計(jì)的王道。
擺脫混亂:?Geckoboard?的設(shè)計(jì)使關(guān)鍵數(shù)據(jù)被一目了然呈現(xiàn),并易于理解
簡約就是金科玉律
同樣有個趨勢就是,顛覆性的網(wǎng)頁應(yīng)用和服務(wù)正提供高度專用化的工具,只設(shè)計(jì)少數(shù)功能。雖然傳統(tǒng)軟件開發(fā)員傾向于為產(chǎn)品加載過多功能,以期獲得高價定位;但目前變化趨勢專注于微應(yīng)用,偏愛功能簡潔。簡單的應(yīng)用意味著有簡單的界面。
美觀且精致:由 Oak.設(shè)計(jì)的?Blue?天氣應(yīng)用程序
又一次,以內(nèi)容核心
新設(shè)備和新技術(shù)涌入市場時,常常會出現(xiàn)這樣的情況,我們熱衷于思考于它們能做什么,我們又怎樣才能提高交互性。但關(guān)注界面設(shè)計(jì)這一狂熱之后又回歸專注于內(nèi)容。媒體資源的消費(fèi),不論文字、音樂還是視頻、音視頻,等我們設(shè)備上最常用的活動,在你樂享其中時,肯定不希望被無關(guān)的界面元素打擾。
技術(shù)水平
隨著智能手機(jī)和平板電腦已滲透到千家萬戶,顯性操作正在逐漸減少。過去,如果彈窗沒有從屏幕跳出來,我們曾擔(dān)心用戶會錯過操作,而現(xiàn)在,我們更愿意讓用戶去探索這種細(xì)微的交互體驗(yàn)。鑒于此,很多互聯(lián)網(wǎng)產(chǎn)品已經(jīng)支持沒有任何視覺引導(dǎo)的觸碰指令。
Fitbit?的儀表盤的視覺設(shè)計(jì)清爽、膽大, 和親和力
技術(shù)的影響
大部分軟件受限于運(yùn)行平臺。屏幕尺寸和像素密度也受限于硬件設(shè)備條件。一個簡約的界面需要十分有限的設(shè)計(jì)元素,這意味著每一個元素都要有所發(fā)揮。排版布局和字體粗細(xì)在很大程度上決定了扁平設(shè)計(jì)的美觀和易用性。
如果你的目標(biāo)設(shè)備不能處理好這方面的細(xì)微差別,你就不太幸運(yùn)了。隨著屏幕尺寸和像素密度不斷增加,更細(xì)、更小的樣式也能呈現(xiàn)最佳的清晰度。當(dāng)然,對?@font-face?屬性的支持,提高了對文字間距的集中處理,也增加了極簡排版的吸引力。
Wallmob?的市場數(shù)據(jù)監(jiān)控應(yīng)用:從任何一個有一個瀏覽器的設(shè)備上都可以檢測到數(shù)據(jù)
響應(yīng)式設(shè)計(jì)
隨著各種尺寸聯(lián)網(wǎng)設(shè)備的普及,交互界面變得更需要強(qiáng)調(diào)適配性,響應(yīng)式設(shè)計(jì)也就應(yīng)運(yùn)而生。雖然響應(yīng)式設(shè)計(jì)并不要求特定風(fēng)格,但扁平的交互界面顯然比其它樣式要更容易處理。簡約設(shè)計(jì)的另一種優(yōu)勢就是,能見降低頁面重量和縮短加載時間。
無重量的響應(yīng)設(shè)計(jì):OnSite
勇于實(shí)踐
好了,不嘮叨理論了。讓我們看看實(shí)踐上的操作吧。設(shè)計(jì)一個有效的簡約風(fēng)格很具有挑戰(zhàn)的。當(dāng)你拋棄界面上那些花哨的裝飾元素(下拉陰影,透視關(guān)系,紋理材質(zhì)等),立馬就會意識到剩余的元素關(guān)鍵且重要。以下幾個技巧在設(shè)計(jì)中普遍很實(shí)用,特別是針對扁平 UI 設(shè)計(jì):
開始設(shè)計(jì)之前
任何項(xiàng)目開始第一步,就是確保你選對風(fēng)格。深入設(shè)計(jì)之前,確保風(fēng)格符合目標(biāo)用戶的感知需求,適應(yīng)目標(biāo)平臺、承載設(shè)備和應(yīng)用類型。如果該方案風(fēng)格與項(xiàng)目不匹配,那么接下來的導(dǎo)向則毫無意義。
流程
設(shè)計(jì)流程非常重要,無論選擇何種樣式!簡約設(shè)計(jì)時記住以下幾點(diǎn):
- 設(shè)計(jì) minimal 界面時,我會從 pre-pc 時代尋求靈感,那個時候的藝術(shù)大師,用少量的資源做了大量的設(shè)計(jì)。例如:Josef Müller-Brockmann 和 Wim Crouwel,重溫這些大師的作品是很好的學(xué)習(xí)機(jī)會。但是有時我也會參考 minimal 畫家的作品,如 Ellsworth Kelly,建筑師,如 Mies van der Rohe 和工業(yè)設(shè)計(jì)師,如 Dieter Rams。
- 放下工作,休息一下很有幫助。扁平和簡約設(shè)計(jì)的一切均關(guān)乎到細(xì)節(jié)的差異。因此小憩片刻后再回到工作,帶著全新的眼光工作,比長時間冥思苦想更有效。
- 并排比較各個版式同樣有幫助。哪怕花 20 分鐘前將一個線條下移各 5 個像素分別保存,對比兩個版式就能很快分清孰好孰壞。
- 由于實(shí)物展示的相對比例至關(guān)重要,所以要及早在不同的目標(biāo)設(shè)備上測試。
- 整個設(shè)計(jì)過程中不斷問自己“真的需要嗎?”。支撐項(xiàng)目時候,找一些討巧的辦法,例如,添加一些有趣的元素、樣式會這樣會很容易也會很吸引人,但必須始終注意剔除不必要的元素,不斷精簡。甩掉你費(fèi)盡心血的部分總是難以割舍,但修改過程必須挑剔。
Global Closet: 由?The Workshop?為美國地理雜志教育板塊設(shè)計(jì)的一個互動游戲
網(wǎng)格
網(wǎng)格在界面設(shè)計(jì)中扮演很重要的角色,這里也不例外。如果你想通過建立視覺規(guī)范使整個設(shè)計(jì)次序化、直觀化,那么網(wǎng)格就很有幫助。
- 網(wǎng)格不僅僅能展現(xiàn)視覺次序。還可以使用網(wǎng)格劃分內(nèi)容和功能組。你可以不用總是使用直線或框劃分對象組,其實(shí)簡單的對齊和間距設(shè)置也能幫助用戶理解界面結(jié)構(gòu)。
- 試著打破網(wǎng)格的結(jié)構(gòu),突出重要的元素來吸引用戶眼球。告別虛假的 3D 元素裝飾后,實(shí)物比例和定位等基本布局原則就是展現(xiàn)視覺次序的關(guān)鍵。
- 嘗試一下你不習(xí)慣的更密集的網(wǎng)格設(shè)計(jì)。當(dāng)你大量減少視覺配色這些元素時,又會發(fā)現(xiàn)這種設(shè)計(jì)方式可以承載更復(fù)雜的結(jié)構(gòu),也不顯得凌亂。如果你有想表達(dá)的額外的內(nèi)容信息你可以單獨(dú)放置。
Rossul 設(shè)計(jì)的?Live School?iPad App
顏色
當(dāng)然,顏色在視覺設(shè)計(jì)中角色很重要,對 minimal 界面更為關(guān)鍵。
- 考慮更寬泛的配色方案。如果你們像我一樣,那么就會明白相近的配色往往使界面功能性更強(qiáng)。而以強(qiáng)烈的寬泛的配色來設(shè)計(jì)就更容易了?,F(xiàn)在是你發(fā)揮的機(jī)會,只用少量的元素,擴(kuò)展配色方案會讓你感覺很好。
- 設(shè)置配色方案時,測試所選色調(diào)要在很寬的色譜內(nèi)進(jìn)行,才可保證用明暗對比來表現(xiàn)畫面。
- 如果你想試試同系配色和鮮明對比。要及早測試配色,以確保微妙變化和高對比度元素都能有足夠的選擇空間。
TriplAgent?的視覺設(shè)計(jì)使用了豐富的配色
文字排版
以內(nèi)容主導(dǎo)的扁平式網(wǎng)頁而言,文字排版就是大英雄,功不可沒。
- 襯線是一種選擇,無襯線則會顯得更干凈。
- 在品種繁多,粗細(xì)和樣式各有差別的字體系列查找你需要的字體。當(dāng)然不是使用全部,而寬泛的選擇幫你更準(zhǔn)確的定義出層級關(guān)系,同時你也會發(fā)現(xiàn)某些字體會更適合特定環(huán)境。
- 不要顧忌把大小和粗細(xì)差別懸殊的字體搭配在一起就一定會造成視覺凌亂。用超大、超細(xì)的字體做標(biāo)題而用中等粗細(xì)的小號字體做正文其實(shí)也是一種嘗試。
- 要注意字體便于閱讀。我知道聽起來可笑,但人們會對你選擇的字體產(chǎn)生很多質(zhì)疑,所以確保按任何比例縮放時均能閱讀
Siteleaf?的設(shè)計(jì),文字呈現(xiàn)干凈且易讀
交互
在扁平設(shè)計(jì)中,證明元素的交互性會顯得很棘手。這是我采用的幾個方法。
- 對比很關(guān)鍵。如果構(gòu)圖留白比較多,你可以給可操作元素一點(diǎn)彩色;如果是文字為主,可以使用簡單的配圖;如果標(biāo)題是大號小寫字母,鏈接可以用小號大寫字母;就是這個意思。
- 傳統(tǒng)布局也很有用。如果你要放置一個返回按鈕,那就將其放置在用戶期望找到返回按鈕的位置上,左上角。
- 當(dāng)頁面堆疊更多功能時,把每個交互元素設(shè)計(jì)成按鈕沒意義。界面盡量設(shè)計(jì)直觀一些。但如果交互特別復(fù)雜或者出乎意料,提供簡單的錯誤恢復(fù)功能。
- 下拉框、模式窗口、彈出框等層級元素在扁平設(shè)計(jì)中一般比較難處理。而對鮮明的對比、邊框、著色的處理,也能從視覺上區(qū)分出交互層級。
簡潔的構(gòu)圖和鮮明的對比:Taasky
總結(jié)
我不相信設(shè)計(jì)有固定規(guī)則可循??吹皆O(shè)計(jì)師嘔心瀝血只為構(gòu)建干凈、簡潔的用戶界面,實(shí)在令人嘆服。扁平就真的不需要漸變和陰影了嗎?當(dāng)然不是。實(shí)際上我見過最引人興趣的工作,是那種能明智的呈現(xiàn)內(nèi)容、同時能夠保持交互直觀性和平衡維度。
在我們這個高度聯(lián)系、資訊豐富和功能齊全的數(shù)字世界里,簡約設(shè)計(jì)又重新廣泛興起。而它并不能解決一切,但如果考慮周全、應(yīng)用得當(dāng),也同樣能給我?guī)硪子煤陀鋹偟臄?shù)字體驗(yàn)。
本文轉(zhuǎn)自騰訊 CDC,作者 Adrian Taylor