精品久久久久久无码中文字幕,亚洲精品自偷自拍无码,中文字幕一区二区人妻

搜索

APP

起點(diǎn)課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

設(shè)計思考：扁平風(fēng)格的問題在哪？

體驗(yàn)進(jìn)階的ZoeYZ

2017-10-19

3 評論 7043 瀏覽 29 收藏

13 分鐘

扁平化作為一種風(fēng)格沒有問題，但是任何風(fēng)格使用太過都是問題。

說起界面設(shè)計里對扁平設(shè)計，主流感受都是正面的，似乎很少有人提出它有什么問題。扁平風(fēng)格在這個簡約至上的時代體現(xiàn)了符合潮流的審美，但是它是否真的能夠給用戶體驗(yàn)帶來價值？一味的追求扁平化是否會對可用性造成負(fù)面影響？

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

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

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

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

強(qiáng)化版

輕量版

包括上例在內(nèi)，實(shí)驗(yàn)一共選取了九個相對不錯的網(wǎng)站（都不算特別突出或特別糟糕的設(shè)計），涉及六個行業(yè)：電子商務(wù)（書本、墨鏡和珠寶銷售）、非盈利網(wǎng)站、旅館、旅行（汽車租借和航班查詢）、科技和金融。

每個網(wǎng)站都有一個合適實(shí)驗(yàn)任務(wù)，這樣就能夠在用戶執(zhí)行任務(wù)的同時觀察用戶的行為。例如，旅館網(wǎng)站的任務(wù)描述是這樣的：

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

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

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

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

用戶找到目標(biāo)所花費(fèi)的時間以及過程中注意到的目標(biāo)都會被記錄下來（后者用到了眼動儀）。

實(shí)驗(yàn)結(jié)果

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

使用輕量版的用戶比使用強(qiáng)化版的多花了22%的時間找到目標(biāo)。
使用輕量版的用戶比使用強(qiáng)化版的多出25%個視線焦點(diǎn)（原文用詞是 Fixation ，指的是當(dāng)用戶看到頁面上感興趣的點(diǎn)是產(chǎn)生的凝視）。

這兩個關(guān)鍵點(diǎn)意味著，輕量版/扁平化的設(shè)計讓用戶花費(fèi)更多的時間來在頁面上尋找目標(biāo)，并且需要觀察更多的元素才能夠找到目標(biāo)。

這是一個任務(wù)目標(biāo)非常明確的實(shí)驗(yàn)，參與者并不會覺得頁面好看就停下來欣賞。所以花費(fèi)更長的時間和觀察更多的東西所代表的不是「沉浸式的體驗(yàn)」，而是尋找過程中更多的努力和找到后的不確定。

扁平化的問題在哪？

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

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

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

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

他們的差別在哪呢？對比下圖的兩個頁面，你會發(fā)現(xiàn)相比輕量版，強(qiáng)化版的主要特征是：

用陰影強(qiáng)調(diào)了界面之間的層級：表單卡片、背景圖和右側(cè)列表之間的關(guān)系；表單卡片頂部頁簽的狀態(tài)。
用漸變色強(qiáng)調(diào)了界面上的重要元素：導(dǎo)航、按鈕和文本框。

你會發(fā)現(xiàn)，扁平化雖然讓頁面看起來視覺效果更清爽了，但是卻更難理解了。

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

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

歷史上，下拉框/高亮色幾乎是文本鏈接的必備樣式。后來隨著文本鏈接的使用越來越廣泛和普遍，很多界面開始摒棄特殊樣式，讓文本鏈接看起來和普通文字的差別越來越小。

扁平化興起之后，這種趨勢愈演愈烈，有時甚至連關(guān)鍵的文本鏈接都被省去了特殊樣式。如果是百科類網(wǎng)站里的名詞鏈接，做輕量一點(diǎn)確實(shí)可以提高可讀性。但是如果是在閱讀信息之外的，功能比較關(guān)鍵的文字鏈接，去掉特殊樣式之后反倒可能讓用戶以為此處不可點(diǎn)。

下面這個珠寶銷售網(wǎng)站的視線熱點(diǎn)圖最大區(qū)別在于底部那兩處視線焦點(diǎn)的對比。

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

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

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

這個界面的任務(wù)是尋找珍珠的相關(guān)信息，也就是說，用戶的任務(wù)目標(biāo)就是上圖那段話底部的文字鏈接。

問題就來了，從輕量版的視線熱點(diǎn)圖可以看到，用戶在寫有“珍珠”的標(biāo)題上看了很久很久，而在真正的任務(wù)目標(biāo)，即底部的文字鏈接上停留的時間卻不長。

扁平化的風(fēng)格讓整個頁面的視覺風(fēng)格更加統(tǒng)一和諧，但是卻可能一不小心就把點(diǎn)擊暗示給省略了。用戶可能需要更多次地觀察，并配合鼠標(biāo)的懸停效果，才能確定哪里是標(biāo)題、哪里是點(diǎn)擊區(qū)域。

扁平化就一定不好嗎？

上面的實(shí)驗(yàn)結(jié)果是，大部分強(qiáng)化版的可用性都比輕量版好要，除了以下這個網(wǎng)頁（左邊是強(qiáng)化版，右邊是輕量版）的相差非常小。這兩個界面的主要差別僅僅是文字鏈接的顏色和下劃線。

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

扁平化的定義

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

一個甚至不能被準(zhǔn)確解釋的東西，顯然就不可能被完全否決了。所以我并不想說扁平化不好，但是對于這種模糊的方向，一定要把握好輕重，避免過猶不及。

來源Jakub Antalík

半扁平風(fēng)格

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

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