扁平化風(fēng)潮

網(wǎng)頁(yè)理論
2015-3-20 09:25:29 文/倪菁 圖/何雪芬
在過去幾年中,我們見證了軟件和應(yīng)用界面設(shè)計(jì)從3D及擬物化向扁平化和極簡(jiǎn)化的快速轉(zhuǎn)變。盡管這一趨勢(shì)現(xiàn)在已經(jīng)無(wú)所不在,但我們不妨拿出一點(diǎn)時(shí)間來(lái)思考今天的結(jié)果是如何形成的,以及其對(duì)界面設(shè)計(jì)整體有著何種影響。另外,我還會(huì)和大家分享一些有關(guān)設(shè)計(jì)扁平化界面的小技巧和注意事項(xiàng)。
Windows Phone 8 及 Apple iOS 7 界面。
什么情況?
大家怎么就突然從大愛材質(zhì)、斜面和投射陰影突然轉(zhuǎn)向熱衷扁平化顏色和簡(jiǎn)約字體了?這一轉(zhuǎn)變受到了很多因素的推波助瀾,下面是其中比較顯著的幾項(xiàng)。
信息負(fù)荷過度
在當(dāng)今這個(gè)信息延綿不絕的文化背景下,我們每天要不停地接觸各種信息流,有的重要,有的無(wú)關(guān)緊要。我們要不斷地評(píng)估、過濾并且創(chuàng)造各種內(nèi)容,這一切顯然是很費(fèi)神的。此外,我們所攝入的內(nèi)容中有很多都轉(zhuǎn)移到了小屏幕設(shè)備中,從而更加劇了這種負(fù)荷過度的感覺。所以說人們現(xiàn)在很容易對(duì)過量的信息感到應(yīng)接不暇,而減少用戶界面(UI)中的元素則能夠帶來(lái)少許視覺上的寧?kù)o。
雜亂不再:Geckoboard的可視化工具可方便你一眼輕松解讀關(guān)鍵數(shù)據(jù)。
簡(jiǎn)約是金
與上述趨勢(shì)類似,很多具有顛覆意義的Web應(yīng)用和服務(wù)可提供功能高度集中的工具。雖然傳統(tǒng)的軟件開發(fā)商比較喜歡在產(chǎn)品中加入大量功能作為高售價(jià)的借口,但是朝著集中化微應(yīng)用轉(zhuǎn)變的風(fēng)潮卻更傾向于使用簡(jiǎn)單代替多樣化的功能組合。應(yīng)用越簡(jiǎn)單,界面也就越簡(jiǎn)單。
漂亮簡(jiǎn)約:Oak的Blue天氣應(yīng)用。
內(nèi)容為王
每當(dāng)有新設(shè)備和技術(shù)進(jìn)入市場(chǎng)之時(shí),其功能和推動(dòng)交互發(fā)展的程度總會(huì)讓我們?yōu)橹浴@^界面所帶來(lái)的迷亂之后,我們一般都會(huì)將注意力重新集中到內(nèi)容上去。不論是文字、音頻還是視頻,對(duì)媒體內(nèi)容的攝入大概是我們使用設(shè)備時(shí)的最主要活動(dòng),而在這種情況下,我們需要保證界面不會(huì)影響我們的攝入過程。
技術(shù)精通
隨著智能手機(jī)和平板快速普及各種用戶,業(yè)界對(duì)其控制方式顯見性的顧慮日漸消退。盡管一度曾經(jīng)擔(dān)心用戶會(huì)難以看見不顯眼的按鈕,但現(xiàn)在我們卻更愿意探索較為細(xì)微的交互內(nèi)容。Windows 8和Chrome for Android甚至還支持在沒有視覺提示的情況下通過觸摸命令點(diǎn)亮屏幕。
Fitbit的控制面板界面在視覺上表現(xiàn)明亮、大膽而且簡(jiǎn)單好用。
技術(shù)的影響
大部分軟件都會(huì)受限于所運(yùn)行的平臺(tái)。屏幕尺寸和像素密度是硬件方面的限制因素。較小的界面大大限制了設(shè)計(jì)調(diào)色板的范圍,也就意味著界面上的每個(gè)元素都要具有自己的表現(xiàn)力。文字規(guī)模和字體大小將在很大程度上決定扁平化設(shè)計(jì)的美感和可用性。
如果你的目標(biāo)設(shè)備無(wú)法體現(xiàn)出細(xì)微到這種程度的差別,那算你運(yùn)氣好。隨著移動(dòng)設(shè)備的屏幕尺寸和像素密度不斷提高,以后更薄更小的設(shè)備將能實(shí)現(xiàn)更高的清晰度。當(dāng)然,對(duì)@font-face的支持也大大地提升了極簡(jiǎn)化文字核心設(shè)計(jì)的吸引力。
使用Wallmob進(jìn)行實(shí)時(shí)銷售監(jiān)控:記錄所有帶瀏覽器設(shè)備的銷售數(shù)字。
響應(yīng)式設(shè)計(jì)
隨著各種尺寸可聯(lián)網(wǎng)設(shè)備的普及,UI受大勢(shì)所趨而務(wù)求更加流暢,而與之相應(yīng)的,就是響應(yīng)式設(shè)計(jì)風(fēng)潮。盡管響應(yīng)式設(shè)計(jì)不需要特別的美學(xué),但也可以說扁平化UI相比其他風(fēng)格來(lái)說能夠更易于輔助響應(yīng)式設(shè)計(jì)的美觀。最簡(jiǎn)化設(shè)計(jì)的另一優(yōu)勢(shì)在于能夠降低頁(yè)面重量從而減少加載時(shí)間。
簡(jiǎn)單但一點(diǎn)到位:OnSite.(大圖)
最佳實(shí)踐
好了,理論就說到這。下面我們來(lái)看看一下實(shí)際操作上的注意事項(xiàng)。打造有效的最簡(jiǎn)化設(shè)計(jì)難度很高。在層層剝離常規(guī)的一些UI元素(投射陰影、斜面、材質(zhì)等等)的同時(shí),你就會(huì)發(fā)現(xiàn)所剩下的為數(shù)不多的這些元素多么重要。下面的小提示盡管在很大程度上是通用的,但尤其適用于扁平化UI。
開始之前
任何項(xiàng)目都一樣,第一步是先確保自己選定的樣式合理。在開始進(jìn)行扁平化設(shè)計(jì)之前,要先保證自己的設(shè)計(jì)符合目標(biāo)用戶的感覺以及目標(biāo)平臺(tái)、設(shè)備和應(yīng)用類型。如果不適合你的項(xiàng)目情況,那緊跟潮流也沒有意義。
流程
不管你要采用哪種樣式風(fēng)格,遵循流程都是非常重要的。下面的幾個(gè)建議可以幫助你實(shí)現(xiàn)簡(jiǎn)約效果。
· 在設(shè)計(jì)最簡(jiǎn)化界面時(shí),我一般會(huì)從PC機(jī)出現(xiàn)前的時(shí)代尋找靈感,那時(shí)的設(shè)計(jì)師和藝術(shù)家往往需要做到“多快好省”。接這個(gè)機(jī)會(huì)你可以重新探訪一下過去的很多優(yōu)秀設(shè)計(jì),例如Josef Müller-Brockmann 和 Wim Crouwel。另外,我還會(huì)看向Ellsworth Kelly等極簡(jiǎn)主義畫家,Mies van der Rohe等建筑家和Dieter Rams等工業(yè)設(shè)計(jì)師。
· 暫時(shí)脫離工作也很有幫助。扁平化和最簡(jiǎn)化設(shè)計(jì)的核心就在于細(xì)微之處。所以,短暫休息后帶著新的眼光重新回到工作中有時(shí)反而比一味苦心琢磨要更有效用。
· 將不同版本毗鄰比較也很有用。在將一條輸入線上下5個(gè)像素來(lái)回倒騰了20分鐘之后,我會(huì)保留下兩個(gè)不同版本進(jìn)行比較,這樣孰優(yōu)孰劣馬上見分曉。
· 由于物體的相對(duì)大小具有著非常關(guān)鍵的意義,因此你需要盡早開始在不同種類的設(shè)備上檢視設(shè)計(jì)理念,以便確定其是否合適。
· 在工作的同時(shí),經(jīng)常自問:“我是否真的需要這個(gè)?”人總是很容易對(duì)自己鐘意的東西念念不舍,但我們還必須頻繁地找出要砍掉或者簡(jiǎn)化的內(nèi)容。拋棄自己費(fèi)盡心思做出來(lái)的東西不容易,但編輯取舍也是必須的。
Global Closet:一款由The Workshop為國(guó)家地理教育打造的互動(dòng)游戲。
網(wǎng)格
網(wǎng)格在界面設(shè)計(jì)中扮演著非常關(guān)鍵的角色,絕無(wú)例外。在你拿著一套受限制的視覺元素,努力想確定其各自順序并讓使用方式更加直觀時(shí),網(wǎng)格能夠帶來(lái)很大幫助。
· 網(wǎng)格所確定的,不僅僅是