一聚教程網︰一個值得你收藏的教程網站

最新下載

秒速赛车-秒速赛车官方网站「秒速赛车开奖查询」-「平安彩票网」

時間︰2017-10-23 19:58:58 編輯︰ 來源︰轉載

對于網站的界面,相信很多人都會有一種感覺,感覺下來網站都是正面的,沒什麼問題,那麼其實它的真實面是怎麼樣的?相信一個經常停留在界面的人都會有或多或少的疑問,下面文章就具體給大家分享下關于網站界面。

說起,主流感受都是正面的,似乎很少有人提出它有什麼問題。扁平風格在這個簡約至上的時代體現了符合潮流的審美,但是它是否真的能夠給用戶體驗帶來價值?一味的追求扁平化是否會對可用性造成負面影響?

視覺風格可能對可用性造成出乎預料的影響,這是我長期持有的態度,之前頗受爭議的無框界面一文也來源于此。前段時間剛好在Nielsen Norman Group上看到有人做出了較為可信的實驗研究,其結果也剛好證明了我的觀點。

Kate Meyer 的眼動實驗

實驗將真實的網站的頁面改造成強化版(非扁平化)和輕量版(扁平化)兩個版本。相對與輕量版,強化版頁面用戶使用了更強烈、有深度的視覺樣式來強調可交互元素(按鈕、連接、頁簽和滑塊)。

例如下面兩個頁面分別是一個旅館網站的強化版和輕量版︰

網站界面扁平化問題分析

△ 強化版

網站界面扁平化問題分析

△ 輕量版

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

每個網站都有一個合適實驗任務,這樣就能夠在用戶執行任務的同時觀察用戶的行為。例如,旅館網站的任務描述是這樣的︰

你將看到一個旅館的網站。你要預定看見的房間,請告訴我們你決定要點擊的地方。

所有網站的圖片和任務信息太多,就不放在這里了,感興趣的人可以去這里看。

一共有71個普通的網絡用戶參與實驗,他們每人都被要求用所提供的全部九個網站(隨機選取兩個版本中的一個)完成相應的任務。

實驗過程很快,用戶先閱讀任務,然後掃視看到的頁面,看到他們想要點擊的目標他們就說「我找到了」,一組實驗便到此為止。

用戶找到目標所花費的時間以及過程中注意到的目標都會被記錄下來(後者用到了眼動儀)。

實驗結果

統計發現了兩個關鍵點︰

使用輕量版的用戶比使用強化版的多花了22%的時間找到目標。使用輕量版的用戶比使用強化版的多出25%個視線焦點(原文用詞是 Fixation ,指的是當用戶看到頁面上感興趣的點是產生的凝視)。

這兩個關鍵點意味著,輕量版/扁平化的設計讓用戶花費更多的時間來在頁面上尋找目標,並且需要觀察更多的元素才能夠找到目標。

這是一個任務目標非常明確的實驗,參與者並不會覺得頁面好看就停下來欣賞。所以花費更長的時間和觀察更多的東西所代表的不是「沉浸式的體驗」,而是尋找過程中更多的努力和找到後的不確定。

扁平化的問題在哪?

一.弱化了信息結構

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

下面這個汽車租賃網站的視線熱點圖可以讓你感受到明顯的區別。強化版的視線焦點明顯比輕量版的更少一些,也就是說用戶在輕量版的頁面上看了很多地方,才最終找到任務目標。

網站界面扁平化問題分析

△ 左為強化版,右為輕量版

他們的差別在哪呢?對比下圖的兩個頁面,你會發現相比輕量版,強化版的主要特征是︰

用陰影強調了界面之間的層級︰表單卡片、背景圖和右側列表之間的關系;表單卡片頂部頁簽的狀態。用漸變色強調了界面上的重要元素︰導航、按鈕和文本框。

你會發現,扁平化雖然讓頁面看起來視覺效果更清爽了,但是卻更難理解了。

網站界面扁平化問題分析

網站界面扁平化問題分析

△ 上為強化版,下為是輕量版

二.省略了點擊暗示

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

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

下面這個珠寶銷售網站的視線熱點圖最大區別在于底部那兩處視線焦點的對比。

網站界面扁平化問題分析

△ 左為強化版,右為輕量版

下圖是視線焦點相差較大區域的界面對比。

網站界面扁平化問題分析

△ 左為強化版,右為輕量版

這個界面的任務是尋找珍珠的相關信息,也就是說,用戶的任務目標就是上圖那段話底部的文字鏈接。

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

扁平化的風格讓整個頁面的視覺風格更加統一和諧,但是卻可能一不小心就把點擊暗示給省略了。用戶可能需要更多次地觀察,並配合鼠標的懸停效果,才能確定哪里是標題、哪里是點擊區域。

扁平化就一定不好嗎?

上面的實驗結果是,大部分強化版的可用性都比輕量版好要,除了以下這個網頁(左邊是強化版,右邊是輕量版)的相差非常小。這兩個界面的主要差別僅僅是文字鏈接的顏色和下劃線。

網站界面扁平化問題分析

但是這個實驗畢竟是有限的,我並不認為扁平化就一定不好。

扁平化的定義

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

一個甚至不能被準確解釋的東西,顯然就不可能被完全否決了。所以我並不想說扁平化不好,但是對于這種︰姆較,一定要把握好輕重,避免過猶不及。

網站界面扁平化問題分析

△ 來源Jakub Antal k

一.半扁平風格

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

這也不是什麼新鮮的風格里,比如下面這種圖標你肯定老早就看過了。

網站界面扁平化問題分析

大廠牌的設計,雖然都在潮流中扁平化了,但大多也不是市面上常見的純扁平風格。

例如經歷過畫風突變的 iOS 到現在也沒有毛玻璃和大陰影這種非純粹的扁平樣式。

網站界面扁平化問題分析

網站界面扁平化問題分析

再比如說谷歌的 Material Design 關鍵特征就在于用真實世界的陰影素材層次感。

網站界面扁平化問題分析

網站界面扁平化問題分析

隻果和谷歌的設計師顯然知道流行趨勢是什麼樣子,但是在可用性和流行趨勢之間,他們不是一味地跟風或是閉門造車,而是進行了取舍和平衡。

二.可用性的關鍵仍是交互

理想中,交互樣式決定界面好不好用,視覺樣式決定界面好不好看。但是真實世界非常復雜,很多情況下視覺樣式會對交互樣式產生影響。

扁平化原本只是一個視覺趨勢,對界面可用性影響最大的應該是交互方案才會。但是有的設計將扁平化用的太過,盲目地學習一些非常理想化的扁平化範例,導致對可用性產生了影響。

但是大體上,對可用性產生最直接影響的還是交互設計。所以說要確保設計出來的頁面不被過度的扁平化拖累,首先要在交互設計階段打好基。 緩蟛攀竊謔泳跎杓平錐偉鹽輾執。

總結

扁平化作為一種風格沒有問題,但是任何風格使用太過都是問題。面對這類非常︰納杓評砟,設計師應該把握分寸,冷靜地將視覺效果和可用性區分對待。

文章評論

熱門欄目