扁平風(fēng)格的題目在哪？來(lái)看這個(gè)分析！

Z Yuhan：說(shuō)起界面設(shè)計(jì)里對(duì)扁平設(shè)計(jì)，主流感受都是正面的，好像很少有人提出它有什么題目。扁平風(fēng)格在這個(gè)簡(jiǎn)約至上的時(shí)代表現(xiàn)了吻合潮流的審美，但是它是否真的能夠給用戶體驗(yàn)帶來(lái)價(jià)值？一味的尋求扁平化是否會(huì)對(duì)可用性造成負(fù)面影響？

視覺(jué)風(fēng)格可能對(duì)可用性造成出乎預(yù)料的影響，這是我長(zhǎng)期持有的態(tài)度，之前頗受爭(zhēng)議的無(wú)框界面一文也來(lái)源于此。前段時(shí)間剛好在Nielsen Norman Group上看到有人做出了較為可信的實(shí)驗(yàn)研究，其效果也剛好證實(shí)了我的觀點(diǎn)。

Kate Meyer 的眼動(dòng)實(shí)驗(yàn)

實(shí)驗(yàn)將真實(shí)的網(wǎng)站的網(wǎng)頁(yè)改造成強(qiáng)化版（非扁平化）和輕量版（扁平化）兩個(gè)版本。相對(duì)與輕量版，強(qiáng)化版網(wǎng)頁(yè)用戶使用了更強(qiáng)烈、有深度的視覺(jué)樣式來(lái)強(qiáng)調(diào)可交互元素（按鈕、連接、頁(yè)簽和滑塊）。

例如下面兩個(gè)網(wǎng)頁(yè)分別是一個(gè)旅館網(wǎng)站的強(qiáng)化版和輕量版：

△ 強(qiáng)化版

△ 輕量版

包括上例在內(nèi)，實(shí)驗(yàn)一共選取了九個(gè)相對(duì)不錯(cuò)的網(wǎng)站（都不算分外凸起或分外糟糕的設(shè)計(jì)），涉及六個(gè)行業(yè)：電子商務(wù)（書(shū)本、墨鏡和珠寶販賣(mài)）、非紅利網(wǎng)站、旅館、旅行（汽車(chē)租借和航班查詢(xún)）、科技和金融。

每個(gè)網(wǎng)站都有一個(gè)合適實(shí)驗(yàn)義務(wù)，如許就能夠在用戶實(shí)行義務(wù)的同時(shí)觀察用戶的舉動(dòng)。例如，旅館網(wǎng)站的義務(wù)描述是如許的：

你將看到一個(gè)旅館的網(wǎng)站。你要預(yù)定看見(jiàn)的房間，請(qǐng)告訴我們你決定要點(diǎn)擊的地方。

所有網(wǎng)站的圖片和義務(wù)信息太多，就不放在這里了，感愛(ài)好的人可以去這里看。

一共有71個(gè)通俗的網(wǎng)絡(luò)用戶參與實(shí)驗(yàn)，他們每人都被要求用所提供的悉數(shù)九個(gè)網(wǎng)站（隨機(jī)選取兩個(gè)版本中的一個(gè)）完成響應(yīng)的義務(wù)。

實(shí)驗(yàn)過(guò)程很快，用戶先閱讀義務(wù)，然后掃視看到的網(wǎng)頁(yè)，看到他們想要點(diǎn)擊的目標(biāo)他們就說(shuō)「我找到了」，一組實(shí)驗(yàn)便到此為止。

用戶找到目標(biāo)所花費(fèi)的時(shí)間以及過(guò)程中細(xì)致到的目標(biāo)都會(huì)被記錄下來(lái)（后者用到了眼動(dòng)儀）。

實(shí)驗(yàn)效果

統(tǒng)計(jì)發(fā)現(xiàn)了兩個(gè)關(guān)鍵點(diǎn)：

• 使用輕量版的用戶比使用強(qiáng)化版的多花了22%的時(shí)間找到目標(biāo)。
• 使用輕量版的用戶比使用強(qiáng)化版的多出25%個(gè)視線焦點(diǎn)（原文用詞是 Fixation ，指的是當(dāng)用戶看到網(wǎng)頁(yè)上感愛(ài)好的點(diǎn)是產(chǎn)生的凝視）。

這兩個(gè)關(guān)鍵點(diǎn)意味著，輕量版/扁平化的設(shè)計(jì)讓用戶花費(fèi)更多的時(shí)間來(lái)在網(wǎng)頁(yè)上探求目標(biāo)，并且必要觀察更多的元素才能夠找到目標(biāo)。

這是一個(gè)義務(wù)目標(biāo)特別很是明確的實(shí)驗(yàn)，參與者并不會(huì)覺(jué)得網(wǎng)頁(yè)悅目就停下來(lái)瀏覽。所以花費(fèi)更長(zhǎng)的時(shí)間和觀察更多的東西所代表的不是「沉浸式的體驗(yàn)」，而是探求過(guò)程中更多的努力和找到后的不確定。

扁平化的題目在哪？

一.弱化了信息結(jié)構(gòu)

扁平化出現(xiàn)之前，我們有各種手段來(lái)描述信息之間對(duì)層級(jí)關(guān)系。扁平化出現(xiàn)之后，這些手段都被視為「多余的裝飾」。一味地尋求極簡(jiǎn)，把各個(gè)元素都等同對(duì)待，如許反倒給用戶造成了更大的理解負(fù)擔(dān)。

下面這個(gè)汽車(chē)租賃網(wǎng)站的視線熱點(diǎn)圖可以讓你感受到顯明的區(qū)別。強(qiáng)化版的視線焦點(diǎn)顯明比輕量版的更少一些，也就是說(shuō)用戶在輕量版的網(wǎng)頁(yè)上看了許多地方，才最終找到義務(wù)目標(biāo)。

△ 左為強(qiáng)化版，右為輕量版

他們的差別在哪呢？對(duì)比下圖的兩個(gè)網(wǎng)頁(yè)，你會(huì)發(fā)現(xiàn)相比輕量版，強(qiáng)化版的重要特性是：

• 用陰影強(qiáng)調(diào)了界面之間的層級(jí)：表單卡片、背景圖和右側(cè)列表之間的關(guān)系；表單卡片頂部頁(yè)簽的狀況。
• 用漸變色強(qiáng)調(diào)了界面上的緊張?jiān)兀簩?dǎo)航、按鈕和文本框。

你會(huì)發(fā)現(xiàn)，扁平化雖然讓網(wǎng)頁(yè)看起來(lái)視覺(jué)結(jié)果更清爽了，但是卻更難理解了。

△ 上為強(qiáng)化版，下為是輕量版

二.省略了點(diǎn)擊暗示

歷史上，下拉框/高亮色幾乎是文本鏈接的必備樣式。后來(lái)隨著文本鏈接的使用越來(lái)越廣泛和普遍，許多界面開(kāi)始放棄特別樣式，讓文本鏈接看起來(lái)和通俗筆墨的差別越來(lái)越小。

扁平化鼓起之后，這種趨勢(shì)愈演愈烈，偶然甚至連關(guān)鍵的文本鏈接都被省去了特別樣式。假如是百科類(lèi)網(wǎng)站里的名詞鏈接，做輕量一點(diǎn)確實(shí)可以進(jìn)步可讀性。但是假如是在閱讀信息之外的，功能比較關(guān)鍵的筆墨鏈接，去掉特別樣式之后反倒可能讓用戶以為此處不可點(diǎn)。

下面這個(gè)珠寶販賣(mài)網(wǎng)站的視線熱點(diǎn)圖最大區(qū)別在于底部那兩處視線焦點(diǎn)的對(duì)比。

△ 左為強(qiáng)化版，右為輕量版

下圖是視線焦點(diǎn)相差較大區(qū)域的界面對(duì)比。

△ 左為強(qiáng)化版，右為輕量版

這個(gè)界面的義務(wù)是探求珍珠的相干信息，也就是說(shuō)，用戶的義務(wù)目標(biāo)就是上圖那段話底部的筆墨鏈接。

題目就來(lái)了，從輕量版的視線熱點(diǎn)圖可以看到，用戶在寫(xiě)有“珍珠”的題目上看了很久很久，而在真正的義務(wù)目標(biāo)，即底部的筆墨鏈接上停頓的時(shí)間卻不長(zhǎng)。

扁平化的風(fēng)格讓整個(gè)網(wǎng)頁(yè)的視覺(jué)風(fēng)格更加同一協(xié)調(diào)，但是卻可能一不警惕就把點(diǎn)擊暗示給省略了。用戶可能必要更多次地觀察，并配合鼠標(biāo)的懸停結(jié)果，才能確定哪里是題目、哪里是點(diǎn)擊區(qū)域。

扁平化就肯定不好嗎？

上面的實(shí)驗(yàn)效果是，大部分強(qiáng)化版的可用性都比輕量版好要，除了以下這個(gè)頁(yè)面（左邊是強(qiáng)化版，右邊是輕量版）的相差特別很是小。這兩個(gè)界面的重要差別僅僅是筆墨鏈接的顏色和下劃線。

但是這個(gè)實(shí)驗(yàn)畢竟是有限的，我并不認(rèn)為扁平化就肯定不好。

扁平化的定義

扁平化（Flat Design）作為一種以視覺(jué)為主體的設(shè)計(jì)理念，自己的定義就特別很是模糊和感性，也沒(méi)有制訂任何范圍和限度。這個(gè)理念被傳頌的方法通常是認(rèn)出幾張很悅目的圖，沒(méi)有陰影、層級(jí)和多余的裝飾，大家覺(jué)得悅目便對(duì)扁平化產(chǎn)生了好感。

一個(gè)甚至不能被正確詮釋的東西，顯然就不可能被完全否決了。所以我并不想說(shuō)扁平化不好，但是對(duì)于這種模糊的方向，肯定要把握好輕重，避免過(guò)猶不及。

△ 來(lái)源Jakub Antalík

一.半扁平風(fēng)格

任何東西，太過(guò)了都不好。許多良好的設(shè)計(jì)，雖然大體上也是扁平化的，但都不是純粹的扁平風(fēng)，我這里先用「半扁平」稱(chēng)呼它們（參考：Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users）。

這也不是什么奇怪的風(fēng)格里，比如下面這種圖標(biāo)你一定老早就看過(guò)了。

大廠牌的設(shè)計(jì)，雖然都在潮流中扁平化了，但大多也不是市面上常見(jiàn)的純扁平風(fēng)格。

例如經(jīng)歷過(guò)畫(huà)風(fēng)突變的 iOS 到如今也沒(méi)有毛玻璃和大陰影這種非純粹的扁平樣式。

再比如說(shuō)谷歌的 Material Design 關(guān)鍵特性就在于用真實(shí)世界的陰影素材條理感。

蘋(píng)果和谷歌的設(shè)計(jì)師顯然知道流行趨勢(shì)是什么樣子，但是在可用性和流行趨勢(shì)之間，他們不是一味地跟風(fēng)或是閉門(mén)造車(chē)，而是進(jìn)行了取舍和平衡。

二.可用性的關(guān)鍵仍是交互

理想中，交互樣式?jīng)Q定界面好不好用，視覺(jué)樣式?jīng)Q定界面好不悅目。但是真實(shí)世界特別很是復(fù)雜，許多情況下視覺(jué)樣式會(huì)對(duì)交互樣式產(chǎn)生影響。

扁平化本來(lái)只是一個(gè)視覺(jué)趨勢(shì)，對(duì)界面可用性影響最大的應(yīng)該是交互方案才會(huì)。但是有的設(shè)計(jì)將扁平化用的太過(guò)，盲目地學(xué)習(xí)一些特別很是理想化的扁平化范例，導(dǎo)致對(duì)可用性產(chǎn)生了影響。

但是大體上，對(duì)可用性產(chǎn)生最直接影響的照舊交互設(shè)計(jì)。所以說(shuō)要確保設(shè)計(jì)出來(lái)的網(wǎng)頁(yè)不被過(guò)度的扁平化拖累，首先要在交互設(shè)計(jì)階段打好基礎(chǔ)，然后才是在視覺(jué)設(shè)計(jì)階段把握分寸。

總結(jié)

扁平化作為一種風(fēng)格沒(méi)有題目，但是任何風(fēng)格使用太過(guò)都是題目。面對(duì)這類(lèi)特別很是模糊的設(shè)計(jì)理念，設(shè)計(jì)師應(yīng)該把握分寸，岑寂地將視覺(jué)結(jié)果和可用性區(qū)分對(duì)待。