怎樣用扁平化的界面設計吸引用戶

2016-10-11 1510 0 編輯:深色多郎 來源:網站設計書籍

扁平化風格的逐漸盛行固然有它的道理,但本質上它只是設計美學當中的一種;與仿古、高光、金屬質感、木質等視覺效果相同,對視覺風格的選擇必須以良好的信息架構及交互模式為基礎。深圳網站設計深正互聯,專業從事扁平化網站設計。

在傳統的網頁開發乃至現在針對移動設備所做的設計,復雜炫目的效果對產品而言未必是一個好的選擇。

尤其在移動設備上,過于復雜的效果非但很少能為應用吸引用戶,反而時常讓用戶在視覺上產生疲勞,對產品界面中最基本的功能產生認知上的障礙。因此我們在設計中就需要參考“扁平化”的美學。

什么是扁平化設計

在實際當中,“扁平化設計”一詞所指的是拋棄那些已經流行多年的漸變、陰影、高光等擬真視覺效果,從而打造出一種看上去更“平”的界面。

Layervault的設計師Allen Grinshtein曾經在HackerNews的一篇文章當中說:

“長久以來,網站的界面風格似乎都在遵從著同一種設計美學,大家都在用斜面、漸變、陰影一類的效果來突出界面元素的質感。對于設計師們來說,制作這類‘可愛’的元素簡直變成了行規甚至是榮譽。不過對于我們,以及為數不多的其他一些設計師來說,這種慣用的方式并非一定正確。”

對擬物化的逆襲

正如20世紀建筑界當中的極簡主義運動,扁平化設計風格的逐漸興起也可以被看作是對多年以來過度設計、過度雕琢的界面風格的逆襲;尤其是最近一段時間,蘋果一直以來的擬物風格被詬病的蠻犀利的。

Wikipedia對擬物化(“仿制品”、“Skeuomorph”)的定義是:

原有物件中某些必需的形式在新的設計中已不再必要,但新設計仍模仿舊有形式,以使新的外觀讓人感覺熟悉和親切。

舉個例子,我們通常會為界面當中的按鈕添加漸變和投影效果,因為現實當中的按鈕就是具有這些視覺特征的,即使這些效果對于界面元素的功能來說沒有任何實際意義。又譬如有些天氣方面的應用會使用溫度計的形式來展示氣溫;在現實世界中,這種實體的存在是必需的,而在應用軟件當中,溫度計的形象則純粹是裝飾性的。

日歷應用當中皮革質地的設計元素是必需的嗎?如果按鈕上不使用3D質感,用戶是否還知道它們可以被點擊?有多少裝飾性的元素是真正必要的?

“在現實生活中,當按鈕被按下時,你可以清楚的感受到它的彈性,但在桌面設備或移動設備的顯示屏上,你無法感覺到這種物理回饋。看上去是實體的東西卻無法讓人感受到實體本該具有的反饋效應,至少對我來說這是一種很蹩腳的、不符合預期的體驗。” – Allan Yu (svpply / eBay)

形式服務于功能

20世紀建筑界的極簡主義運動當中提出了一些著名的口號,包括“形式服務于功能(form follows function)”、“少即是多(less is more)”等等,直到今天我們依然會談到這些。此外,我個人非常喜歡米開朗基羅在被問到他是怎樣創作大衛雕像時回答的:

“很簡單。我只要鑿去多余的石頭,留下有用的。”

對于界面設計來說,也是同樣的道理;37signals的家伙們在這方面的本事是有目共睹的。要在實際當中卓有成效的實現扁平化風格的設計美學,作為設計師,我們本質上最需要關注的是產品功能如何運作,而不僅僅是考慮視覺呈現方面的問題。

扁平還是擬物?只是個選擇的問題

至少我沒有見到任何研究報告表明擬物風格的按鈕會帶來更多的點擊量。的確,有足夠多的理論和實踐結論可以證明在視覺上能產生更強對比效果的交互元素可以更好的引起用戶的注意,但我相信,在某些上下文環境中,一個扁平化的橘色按鈕所帶來的對比效應會高于具有凸起質感的按鈕。所以,上下文,也就是具體產品的具體界面環境,是這里的一個關鍵要素。我們來看看其他設計師的一些看法:

“這件事和時裝時尚有些類似。當某種風格被全面普及之后,作為設計師,要想脫穎而出,你就得反其道而行之。” – Cemre Güng?r (Branch)

“如果有人告訴你‘擬物化是不好的設計’,這就相當于在說‘紫色是丑陋的顏色’,沒有任何意義。” – Sacha Greif

“為什么要在沒有任何實際證據的情況下貶低某種設計風格,同時抬高另外一種?忽略產品的實際功能與整體體驗而單純追求某種設計風格,這并不是一件令人興奮和愉悅的事。” – Geoff Steams (YouTube)

設計的好壞不是“美學”可以決定的

對設計風格的選取最終還是要取決于具體產品的實際情況。在我個人看來,相比于擬物化而言,扁平風格的一個優勢就在于它可以更加簡單直接的將信息和事物的工作方式展示出來,減少認知障礙的產生。

無論采用怎樣的風格,優秀的界面設計都需要遵從一些共通的設計原則:

一致性

通過具有一致性的設計模式及視覺風格,為用戶建立起完整一致的心智模型,使產品更加易用,提升整體體驗。

對比

通過對配色、尺寸和布局的調整,使可點擊的界面元素在視覺上與其他元素形成鮮明的對比。

布局

可以嘗試使用960gs一類的網格布局為界面設定視覺規范,使用戶的視線可以跟隨內容本身所界定出的路徑自然的移動,增強界面的視覺平衡。

層級化

最重要的東西要比相對次要的東西更容易被看到。關于這個話題我可以寫一整篇文章出來,簡單的說,就是在界面設計中著重突出那些與核心功能與常見用例相關的交互元素,而將其他操作元素置于次要位置,這可以使界面得到最有針對性的優化和簡化。

“我個人的經驗是,無論扁平化還是擬物化都沒什么所謂,最重要的是界面能夠讓用戶在最短的時間內清楚的識別出信息和功能的層級關系,并且很容易的知道接下來應該做什么。” – Caroline Keem

目標用戶

不同類型的用戶所青睞的界面風格也有所不同。建筑、設計、時尚等領域的用戶可以更好的擁抱扁平化風格,而其他更加“普通”的用戶則更容易接受相對傳統的擬物化界面。

反饋

當點擊行為發生時,要立刻向用戶提供清晰明確的視覺反饋。動畫過渡效果就是一種比較常見的反饋方式,例如在用戶執行操作后,使用旋轉圖標提示用戶系統正在進行響應。

降低“摩擦力”

無論采用怎樣的視覺風格,都要使界面盡量簡化,減少用戶完成目標所需執行的操作,打造更加流暢的交互體驗。任何一點障礙或額外的步驟都會提高操作成本,增加功能的復雜度,進而降低轉化率。

鼓勵探索

了解目標用戶有可能對產品進行哪些方面的探索。一旦他們習慣了產品的界面與基礎功能,并開始向“高級用戶”的階段進發時,要為他們的探索和學習行為進行必要的指引與“獎勵”回饋。

原型

無論風格如何,界面形式都取決于實際的功能。好的設計方案離不開產品前期的規劃工作,特別是通過草圖或線框原型進行的探索。識別出最核心的用例需求,使用原型不斷嘗試和驗證,為接下來的界面設計工作打下堅實的基礎。

“扁平化風格的逐漸盛行固然有它的道理,但本質上它只是設計美學當中的一種;與仿古、高光、金屬質感、木質等視覺效果相同,對視覺風格的選擇必須以良好的信息架構及交互模式為基礎。

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 北碚水土工业园区开餐馆赚钱吗 万利彩群 众乐彩票苹果 有没有好的赚钱app 滴滴彩票网址 快男去赚钱 微信捕鱼红包的游戏 在淘宝开店能赚钱吗 彩票直通车安卓 现在犯罪最赚钱的是什么意思 98彩票群 怎样卖小家电才赚钱 猫旅馆赚钱吗 博悦彩票群 第一调查网可以赚钱的模块 皮球麻将客户端