本文作者張悅是PICOOC公司創(chuàng)始人，PICOOC研發(fā)的第一款將于近期上市的智能設(shè)備是名叫Latin的智能秤，具體可見我們之前的報(bào)道。張悅之前還創(chuàng)辦過移動(dòng)應(yīng)用開發(fā)培訓(xùn)公司博看文思。

前幾天iOS 7正式版終于發(fā)布， 用戶對其扁平化設(shè)計(jì)風(fēng)格褒貶不一。其實(shí)我們早在三個(gè)月前就在 PICOOC 的 APP 上率先“痛苦地”決定了采用“類扁平化設(shè)計(jì)”(稍后會給出解釋)?；?PICOOC 系列產(chǎn)品的特性，當(dāng)時(shí)整個(gè) App 的 GUI 上遇到了很多的問題和挑戰(zhàn)。

比如Latin健康秤所采集的紛雜的體征數(shù)據(jù)流如何能以易懂的圖形化形式，讓用戶明白自己的身體健康狀況;那些北漂、廣漂一族通過 Latin 如何異地查看、管理家人、朋友的健康信息，因?yàn)榫薮蟮男畔⒘饕魅氲讲煌愋偷挠脩艚缑嫔?在如今的多屏世界里，如何才能滿足他們在 (如手機(jī) / 手表 /iPad/ 電視) 中隨意切換和查看自己健康信息的需求。這些都是我們要解決的問題，我們團(tuán)隊(duì)也歷經(jīng)了無數(shù)次的嘗試和迭代。以下便是我們對扁平化和擬物化的思考：

“扁平化設(shè)計(jì)”與“擬物化設(shè)計(jì)” 孰是孰非?

關(guān)于蘋果的這次大膽的嘗試，業(yè)界一直對于“擬物化設(shè)計(jì)”和“扁平化設(shè)計(jì)”褒貶不一，有些則比較偏頗;所謂偏頗，也就是片面表達(dá)某種風(fēng)格一定比某種風(fēng)格更 好，以及好在哪里。我先闡述幾個(gè)概念，并分析蘋果為什么這么做，以及我們?yōu)槭裁催@么做!而我認(rèn)為二者并不是非黑即白的對立關(guān)系，因?yàn)樵O(shè)計(jì)并無好壞之分，存 在即合理。拖離開產(chǎn)品以及用戶, 那些誰對誰錯(cuò)的判斷都是顯得毫無底氣。況且蘋果根本就沒有否定并且取消“擬物化設(shè)計(jì)”，而且之前老喬時(shí)代，iOS 界面里 同樣有扁平化的影子，比如圖表菜單等。

何為“擬物化設(shè)計(jì)” ?

擬物化設(shè)計(jì)的概念就不再這里闡述了，簡單的理解就是“模擬現(xiàn)實(shí)對象”，按照蘋果的說法，應(yīng)用程序的外觀看起來與現(xiàn)實(shí)生活中的對應(yīng)物越接近，使用起來就越簡單，相應(yīng)的也有利于改善應(yīng)用程序的用戶體驗(yàn)。

而 人類最早的語言“象形文字”便是擬物化，人類幾乎所有的文字一開始都是象形文字，用擬物的方式來描繪現(xiàn)實(shí)世界中的東西，學(xué)習(xí)成本低，易記。老喬對界面設(shè)計(jì) 的一個(gè)理想是，任何年齡的人，任何經(jīng)歷的人，都可以在拿到設(shè)備后的幾分鐘內(nèi)輕松的掌握它的用法。于是 Apple 通過利用人們的日常經(jīng)驗(yàn)， 做出擬物化的界面，從而降低用戶的學(xué)習(xí)成本以及理解難度。

想像一下，當(dāng)你應(yīng)用中的可視化對象和操作按照現(xiàn)實(shí)世界中的對象與操作仿造，用戶就能快速領(lǐng)會如何使用它( iOS Human Interface Guidelines)”。模擬實(shí)物的視覺設(shè)計(jì)和交互體驗(yàn)，讓用戶完全不用去抽象的理解就可以直觀的認(rèn)知和使用。當(dāng)你到三里屯的 Apple Store 里面，你會發(fā)現(xiàn)很多的小孩，兒童，老人在操作 iPhone、iPad 的時(shí)候，根本不需要?jiǎng)e人去教，自己玩幾分鐘即可以流暢的使用他們。

蘋果之所以形成了如今的界面風(fēng)格，是因?yàn)槔蠁虒Φ蛯W(xué)習(xí)成本的極大的重視，因而才會在界面中大量使用隱喻和模仿;而如今的扁平化設(shè)計(jì)也沒有從本質(zhì)上脫離這個(gè)根本的軌道。

何為“扁平化設(shè)計(jì)”?

扁平化設(shè)計(jì)(Flat design)完全屬于二次元，這個(gè)概念最核心的地方就是放棄一切裝飾效果，諸如陰影，透視，紋理，漸變等等能做出 3D 效果的元素一概不用。所有的元素的邊界都干凈利落，沒有任何羽化，漸變，或者陰影。

扁平化設(shè)計(jì)其實(shí)是一門古老的 UI 設(shè)計(jì)，早在 Windows 95 時(shí)代開始，我們在 PC 上看到的 BIOS 設(shè)置界面就是非常典型的扁平化設(shè)計(jì)，他當(dāng)時(shí)不美觀，但是并不難學(xué)，而且扁平化界面很是清晰明了!

“扁平化設(shè)計(jì)”有著鮮明的視覺效果, 整個(gè)界面的配色平均會采用到 6-8 種顏色 (這個(gè)對于開發(fā)團(tuán)隊(duì)的挑戰(zhàn)極大)，頁面效果更加絢麗、明亮。它所使用的元素之 間有著清晰的層次和布局，這使得用戶能直觀的了解每個(gè)元素的作用以及交互方式。在需要展現(xiàn)強(qiáng)大信息流的界面內(nèi)，它讓用戶最大程度地減少學(xué)習(xí)使用成本。僅僅 憑借用戶的直覺就大概能夠明白每個(gè)對象、按鈕的作用。

　　微軟在Win8 Metro界面中，使用了完全的扁平化設(shè)計(jì);在蘋果產(chǎn)品及 iOS 系統(tǒng)中，看到了部分扁平化設(shè)計(jì)影子，在Google中，我們也同樣看到了準(zhǔn)扁平化設(shè)計(jì)模式。

蘋果這一次徹底否定了什么?

我拋出“類扁平化設(shè)計(jì)”概念，就是因?yàn)閺倪壿嬌现v，蘋果并未拋棄“擬物化設(shè)計(jì)”，同樣也并未完全追求所謂的“扁平化設(shè)計(jì)”，而是擬物化的扁平化設(shè)計(jì)這種兼容并包的嘗試。蘋果這次徹底拋棄了“浮雕化設(shè)計(jì)”。所以，蘋果的這種“類扁平化設(shè)計(jì)”的邏輯出發(fā)點(diǎn)是“ 為觸摸優(yōu)化”。

浮雕化其實(shí)是鼠標(biāo)時(shí)代的產(chǎn)物，它需要配合各種光標(biāo)浮動(dòng)和光影來給用戶明確的提醒和引導(dǎo)。而觸屏?xí)r代之初，這種浮雕化也留存下來，但其意義已經(jīng)不大。因?yàn)橛|屏?xí)r代所觸即所得而不需要光影等來做方向指引了。

何為浮雕化設(shè)計(jì)?

鼠標(biāo)時(shí)代的開始，“富有智慧”的“浮雕化設(shè)計(jì)”作為新生事物便開始躍躍欲試，記得從 Mac OS 6 和 Windows 3.1 開始，PC 的界面開始大膽使用浮雕效果?！髽?biāo)的光標(biāo)點(diǎn)擊動(dòng)作在屏幕上得到確認(rèn)，設(shè)計(jì)者使用了“浮雕效果”讓按鈕能夠清晰地展現(xiàn)“選中、按下、彈 起“狀態(tài)，整個(gè)鼠標(biāo)主導(dǎo)下的 GUI 的風(fēng)格都是以此為出發(fā)點(diǎn)，并且沿用至今。

記得 08 年底，我剛剛籌劃博看文思的那個(gè)時(shí)候，連我自己都沒有相信，移動(dòng)互聯(lián)網(wǎng)僅僅用了 4、5 年的時(shí)間幾乎把互聯(lián)網(wǎng) 10 多年發(fā)展的內(nèi)容全部做了一遍，而且移動(dòng)智能終端的 SoLoMO 的特性又開始把互聯(lián)網(wǎng)做不到的內(nèi)容和服務(wù)又做了一遍。

鼠標(biāo)的興起成就了“浮雕化設(shè)計(jì)”的輝煌?，F(xiàn)在，千元智能手機(jī)也都已經(jīng)成為了各家手機(jī)廠商喊殺價(jià)格戰(zhàn)的“紅海”, 蘋果這次大膽的取消了浮雕效果，基本就是觸摸操控興起和鼠標(biāo)沒落的結(jié)果，因?yàn)槊倏氐臅r(shí)代已經(jīng)開始了。

類扁平化設(shè)計(jì)時(shí)代到來

我這里說 “類扁平化設(shè)計(jì)”指的是擬物化的扁平化設(shè)計(jì)。它并未徹底拋棄擬物化的優(yōu)勢，但是，從另一個(gè)維度，它在 “扁平化設(shè)計(jì)”方面進(jìn)行了大膽的嘗試：如取消了浮雕效果。在觸摸的時(shí)代，浮雕效果的必要性大大減弱了，它變成了一種偏重裝飾性的多余的設(shè)計(jì)。 “類扁平化設(shè)計(jì)”風(fēng)格本質(zhì)上把良好的體驗(yàn)給了用戶，把挑戰(zhàn)留給了開發(fā)者。比如上文已提到整個(gè)界面的配色平均會采用到 6-8 種顏色，這個(gè)就對于開發(fā)團(tuán)隊(duì)的挑 戰(zhàn)極大。

“類扁平化設(shè)計(jì)”成為一種必然的趨勢，并不是單純的因?yàn)閷徝榔趯?dǎo)致的為了變化而變化，而有以下幾個(gè)原因：

“類扁平化設(shè)計(jì)”具備非常好的兼容性，而單純的擬物化設(shè)計(jì)既繁瑣又費(fèi)時(shí)?，F(xiàn)在是一個(gè)多屏的時(shí)代，不同尺寸和分辨率的的智能終端，PC 顯示器、智能電視、以及所謂的智能手表等等，你會發(fā)現(xiàn)，類扁平化設(shè)計(jì)都能很好的適配到不同的終端上。

“類扁平化設(shè)計(jì)“具備優(yōu)秀的組織和展現(xiàn)信息的能力。現(xiàn)在是一個(gè)信息紛雜的時(shí)代，扁平化設(shè)計(jì)可以把紛繁復(fù)雜的內(nèi)容和功能有效的組織起來，以簡單但合理的方式排列，使得最終的用戶界面變得如此的簡單易用。

“類扁平化設(shè)計(jì)”更適合屏幕較小的智能終端，它有更少的按鈕和選項(xiàng)，使整個(gè)界面干凈整潔、條理清晰，讓用戶減少認(rèn)知障礙，降低用戶的學(xué)習(xí)成本。

完美的設(shè)計(jì)的終極目的就是用戶拿到產(chǎn)品后沒有學(xué)習(xí)成本，易用，好用，愛用!不管白貓黑貓，用戶喜歡的就是好的產(chǎn)品，我們可以采用任何方式，其中包括所謂的 扁平化設(shè)計(jì)、擬物化設(shè)計(jì)。沒有任何公司能夠把所有的生意都做完，也沒有任何的商人能夠把全世界所有的錢都能賺完。同樣，也沒有任何的設(shè)計(jì)風(fēng)格能夠包打天 下。但是我認(rèn)為，泛濫的數(shù)據(jù)、紛雜交叉的信息流、PC時(shí)代網(wǎng)頁當(dāng)在前多屏?xí)r代就要憑借 “類扁平化設(shè)計(jì)”呈現(xiàn)給用戶。 “類扁平化設(shè)計(jì)”才剛剛開始。

文章來源：產(chǎn)品中國