“扁平化”這詞在最近瘋狂的流行，但扁平化風(fēng)格設(shè)計(jì)不意味著設(shè)計(jì)工作本身可以得到簡(jiǎn)化，更不意味著界面可用性的衡量標(biāo)準(zhǔn)可以被降低。Jeffrey Zeldman 說(shuō)過(guò)一句話：“內(nèi)容應(yīng)當(dāng)先于設(shè)計(jì)，缺乏內(nèi)容的設(shè)計(jì)算不上設(shè)計(jì)，最多算裝飾。”由此可見(jiàn)，可用性的重要，本文將與各位分享一些tips，希望可以幫助你在打造扁平化設(shè)計(jì)方案的同時(shí)提升界面的可用性。
Exposure只用了很細(xì)的線框來(lái)界定首頁(yè)上兩個(gè)最重要的Call to Action，但在鼠標(biāo)懸停時(shí)提供了足夠強(qiáng)大的對(duì)比反饋來(lái)提示元素的可交互性。
Focus Labs通過(guò)配色和元素布局關(guān)系來(lái)提升交互元素的對(duì)比度；鼠標(biāo)懸停時(shí)還會(huì)有CSS動(dòng)效來(lái)增強(qiáng)視覺(jué)反饋。
將模糊化的照片作為背景，在扁平環(huán)境中有效的創(chuàng)建出了縱深。
一、定義信息架構(gòu)
扁平化風(fēng)格最讓我欣賞的一點(diǎn)就是對(duì)內(nèi)容的突出。曾幾何時(shí)，我們過(guò)分聚焦在界面元素的擬真風(fēng)格上，內(nèi)容反而成為次要。在扁平化風(fēng)格的界面中，那些零七八碎的會(huì)牽扯用戶注意力的元素被去除，這很好，但你必須當(dāng)心，不要使其成為破壞信息結(jié)構(gòu)的雙刃劍。
要確保扁平界面的可用性，你首先要梳理清楚內(nèi)容的層級(jí)結(jié)構(gòu)，尤其是在網(wǎng)站的前期規(guī)劃及線框稿階段。拋開(kāi)界面元素風(fēng)格不談，你的內(nèi)容本身是否有著易于視線掃描的結(jié)構(gòu)？用戶可以找到最重要的交互對(duì)象嗎？無(wú)論視覺(jué)風(fēng)格是扁平還是擬物，堅(jiān)實(shí)的信息架構(gòu)都是最重要的基礎(chǔ)。
二、強(qiáng)化交互性
說(shuō)到扁平化界面的可用性，一個(gè)比較關(guān)鍵的設(shè)計(jì)挑戰(zhàn)就是怎樣讓可交互元素看上去是“可交互”的。扁平風(fēng)格意味著視覺(jué)表現(xiàn)形式上通常只有兩個(gè)維度可以使用，以往用來(lái)構(gòu)建“可點(diǎn)擊”效果的漸變與陰影成為了歷史。
扁平風(fēng)格并不意味著簡(jiǎn)單粗暴的將原先的擬真元素拍平然后丟到界面當(dāng)中。扁平化與擬物化各自擅長(zhǎng)解決的問(wèn)題是不同的，如果你決定使用扁平風(fēng)格打造產(chǎn)品界面，那么必須以新的思路來(lái)解決設(shè)計(jì)上的問(wèn)題。
試著通過(guò)提升對(duì)比度來(lái)增強(qiáng)交互元素的表現(xiàn)力。這里所說(shuō)的對(duì)比度包括配色、字號(hào)、位置布局等方面的要素。另外，要為交互元素提供必要的視覺(jué)線索及反饋效果，幫助用戶建立認(rèn)知，例如當(dāng)鼠標(biāo)懸停在元素上，或是用戶點(diǎn)擊、觸摸這些元素的時(shí)候，其視覺(jué)形式需要有所變化，以體現(xiàn)出元素的交互特性以及用戶行為所產(chǎn)生的結(jié)果。
Exposure只用了很細(xì)的線框來(lái)界定首頁(yè)上兩個(gè)最重要的Call to Action，但在鼠標(biāo)懸停時(shí)提供了足夠強(qiáng)大的對(duì)比反饋來(lái)提示元素的可交互性。
Focus Labs通過(guò)配色和元素布局關(guān)系來(lái)提升交互元素的對(duì)比度；鼠標(biāo)懸停時(shí)還會(huì)有CSS動(dòng)效來(lái)增強(qiáng)視覺(jué)反饋。
三、加強(qiáng)人性化
由于那些非內(nèi)容性的、模仿現(xiàn)實(shí)物體的元素被剝離，所以在設(shè)計(jì)扁平化界面時(shí)常會(huì)讓人感覺(jué)冰冷而無(wú)趣，缺乏親切感及品牌個(gè)性。雖然這不會(huì)直接降低界面的可用性，但對(duì)于產(chǎn)品的整體體驗(yàn)來(lái)說(shuō)依然有著重要影響作用。
要讓扁平化界面帶來(lái)更加積極的體驗(yàn)，你需要在設(shè)計(jì)中與用戶建立起情感和人性上的關(guān)聯(lián)。試著使用更多的圖片作為“有機(jī)”內(nèi)容，來(lái)抵消掉扁平化元素的“數(shù)字感”。圖片——無(wú)論是圖標(biāo)、插畫還是照片，都可以在扁平化環(huán)境中創(chuàng)造出更具“人性”和“深度”的氛圍。
將模糊化的照片作為背景，在扁平環(huán)境中有效的創(chuàng)建出了縱深。
小結(jié)：扁平化風(fēng)格絕不僅是從現(xiàn)有界面中抽掉一個(gè)維度那么簡(jiǎn)單，面對(duì)它所帶來(lái)的一些可用性方面的問(wèn)題，從用戶體驗(yàn)中設(shè)計(jì)出它每一個(gè)小細(xì)節(jié)，包括構(gòu)造良好的信息架構(gòu)、強(qiáng)化交互元素的視覺(jué)特性、為界面增加人性化元素等。
如沒(méi)特殊注明，文章均為啟創(chuàng)網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來(lái)自：http://m.black-fleet.com/site/42.html
