用過wp7的metro，感覺系統色彩跟其他系統差很多。

---

Flat Design 是一種極簡和實用主義的風潮。 Windows Phone 純色無修飾的背景和大塊的內容直接貼在上面就是例子。去掉多餘的一切，只為了內容和功能服務。

而 Ive 顯然不會重複扁平化。實際上蘋果官方的 iOS 設計說明頁上，壓根就沒有提 Flat 這個詞。而下面這句話簡直就是在打「 Flat Design 」的臉。

Yet true simplicity is so much more than just the absence of clutter or the removal of decoration.

媒體編輯們學會了擬物和扁平這兩個新詞就興奮不已，而且還自己為這是兩個反義詞。可設計有無數種風格和可能性，遠遠不是非此即彼的二極體關係。

Ive 在 iOS7 上示範的是一個一流的設計師要如何顛覆現有概念，不僅僅是「擬物化」，更是風頭正勁的「扁平化」。

豐富的色彩，圓角，漸變全都為他所用。同時又在一起呈現出統一的風格。不是「扁平化」，而是「 Ive 化」。

另一方面， Ive 又給 iOS7 注入了豐富的情感。為什麼不能用圓角修飾？ iOS7 不僅僅為了內容和功能服務，他還要照顧你的情感。

主屏鮮艷的色彩，飽受批評但是特別又蠢蠢欲動的圖標，細緻到死的動畫。這些都是 iOS7 團隊對用戶愛的流露。讓你在使用中感動，在感動中掏出信用卡。

而透視效果的引入又讓 iOS7 成為有史以來最「立體」的系統。並且這個效果不僅僅為了酷而已，他自然的在解釋系統的功能。很多毛玻璃和透明效果，其實都是為了配合透視而出現的 － 說是因為 Ive 偏愛這種材質的人沒有好好體會 iOS7 的分層和上層的透明／毛玻璃效果的含義。

最後，網格又讓理性在背後支撐整個系統的尺度。理性最終確保美感。

iOS7 將奠定今後多年 iOS 的基礎風格。這遠非 dribbble 設計師畫幾個討好的圖標就可以完成的事情。 Ive 在視覺上的工作從表面到基礎，做的很完整。

iOS7 是 Ive 化的，是充滿感情的，是立體的，是理性的。而偏偏，就不是 Flat Design 。

而 iOS7 的交互問題就很多。。。這個不細說了。

---

iOS 7新的用戶面設計，並非以「風格」去作出發點，反之是要將用戶帶進與硬體溝通的世界，這是Johnathan Ive統合硬體與軟體設計部門後最重要作出的一部，如日後出現「風格」則是後話，兩者的先後要搞清楚。

在設計領域中，最高水平產品、用戶面設計就是透過affordance去進行設計。甚麼叫利用了affordance的設計？就例如：拿起刀子，你就可以想像到它可以拿來切東西或捅人；看見椅子你就想坐在上面，看見筷子就會拿起它來夾東西，或看見鏡子就會想照照。這一類例子都是經人類生活文化多年累積下產生的最高水平的設計，用戶只要透過人類直覺便可以好好使用它們。

iPhone推出六年後已成為很多人的必備手機。即使在iPhone以外，Android、WM陣營也不斷在教育電話用戶與觸控營幕操作。在最初的時間，由於這類觸控式手機還算新穎，在介面設計上便需要加入大量擬物化圖像，如高光、陰影、立體、摸擬現實等設計，是將現實中的生活感受帶進這屏幕上，用戶也用得很好，可惜只利用了屏幕的顯示功能，卻沒能夠發揮屏幕作為一種硬體的最大優勢，就像一張紙拿來鋪桌子，或將狗隻拿來吃，沒有好好發揮物種的功效。

iOS 7新的用戶面設計就是從Johnathan Ive熟知屏幕特性之下去重新構想iOS 7世界與用戶的接觸該如何：一層一層、像一塊塊膠片顯示資訊就是充份發揮屏幕的特性。用戶在六年間已完全學會觸控式屏幕的操控，所以接下來只需花點時間適應操作，適應下來後必定會比原先更順心。就如你的汽車一直用方形駕駛盤，一下次轉成圓形的情況。初初總有不慣，但圓形的駕駛盤在作轉動的動作時要比任何其他造形都適合，長遠對用戶有利得多了。

這是繼往開來的一步，大家應該要萬分期待、看到機會而非批評才是王道。

---

這裡我想先擱置問題中的"扁平化"這個概念, 因為我覺得用這個字來概括新系統的設計, 有失焦點.

當然樓主的問題其實請 Jonathan Ive 老師來回答最好, 可惜他不上知乎. 不過, 在由他親任旁白的 iOS 7 介紹視頻里, 應該能找到答案, 這也是我對所謂"扁平化"不太認同的原因. 來看看他是怎麼說的. (英文是聽來的, 參考了網路資料, 錯漏難免, 還請指正)

蘋果正式發布iOS 7操作系統官方介紹視頻視頻

We"ve always saw a design as being so much more than just the way something looks.

緣起, 設計往往比事物表象更具內涵. 這裡, 畫面里用了 iPad Smart Cover 的兩個功能來傳達這個意思.

It"s a whole thing. The way something actually works on so many different levels.

Ultimately of cause, design defines so much our experience.

不似想像中那麼簡單, 世事, 往往有許多層次.

I think there is a profound and enduring beauty in simplicity, in clarity, in efficiency.

True simplicity is derived from so much more than just the absence of clutter and ornamentation. It"s about bringing order to complexity.

但貫穿其間的, 有一種beauty! 明確闡述了他的追求 --- beauty in simplicity, in clarity, in efficiency.

(理想著實偉大, 怎麼做, 能不能做好呢?) True simplicity, 不是簡單的減法, 而是賦予紛繁的事物以條理. 這裡並結合下面的文本, 逐漸明晰, 被賦予條理的是"content (data/data flow)", 是"context", 是這些對用戶真正有意義的東西!

&<以上歸為"設計初衷".&>

iOS 7 is a clear representation of these goals.

如何實現上面的初衷.

It has a whole new structure, that is coherent. And it is applied across the entire system.

強調"條理". 並強調其貫穿整個系統.

We"ve consider the tinniest details like refining the typography to much larger ones like redesigning all the icons.

為了實現目標, 我們做了什麼.

And developing a grid system allowed us to achieve a much more harmonious relationship between individual elements.

失去了錨 (擬物的元素, 穩定的背景, 清晰的layout), 我們如何用網格組織一切.

We"ve also incorporated a whole new palliative colors.

你們吐槽最多的圖標的來由......

Distinct functional layers help us establish hierarchy and order.

"層次" 和 "秩序".

And the use of translucency gives you a sense of your context.

懸浮於桌面的毛玻璃的來由

These planes combined with new approaches to animation and motion create senses of depth and vitality.

全新的動畫, 帶來 "深度" 和 "活力".

The iPhone responding to your movements drives the parallax to create a whole new experience of depth.

由運動感測器驅動的動態桌面視差效果, 帶來深度的全新體驗, 還是深度.

In many ways, we try to create an interface that is unintrusive and deferential. One where the design recedes and in doing so actually elevates your content.

這也是上文palliative colors的初衷? 一切是為了提升系統中你的實質內容和你對實質內容的體驗.

Even the simple act of changing your wallpaper has a very noticeable effect on the way your iPhone looks and feels across the entire system.

半透明帶來另一種深度和層次的體驗, 並影響整個系統的觀感.

&<深度, 層次, 條理, 是不是更接近 iOS 7的進化實質? 在數小時的beta體驗之後, 似有更清晰的認識. 而所謂 "扁平化", 不過在移動終端日益繁雜的信息流中組織數據所必經的一個界面變化趨勢. 可不可以這樣說, "扁平化"不是因, 是果, 是整個系統設計思想的實施條件和一個方面的表象.&>

While iOS 7 is completely new, it was important to us to make it instantly familiar.

即便沒有了像計算器的計算器, 但教主強調的東西, 我們怎麼會忘記.

We wanted to take an experience the people know very well and actually add to it to make it more useful, to make it more enjoyable.

我們希望你能保持熟悉的體驗, 並發現手中的東西更有用, 更令人愉悅.

iOS 7 brings with the most significant changes we"ve made to user interface since the introduction of the very first iOS.

七, 是個坎.

To create it, we brought together a broad range of expertise from designing to engineering.

With what we"ve been able to achieve together, we see iOS 7 as defining an important new direction, and in many ways a beginning.

我們為 iOS (或許是所有mobile os?) 建立了全新的參照系和演進方向.

&<對了, 體驗優勢, 不用再說了吧? 理想都是美好的, 新系統是否真如他描述的那樣臻臻至至, 每個人會有自己那桿秤. 但日益繁雜的用戶數據下, 尊重用戶的數據, 呵護用戶的數據體驗, 應該是明智的方向 (也應該是順應市場的方向). Apps 開發者更重要, 如果他們只是停留在所謂 "扁平化" 討論之上, 會讓人很傷感. 至於用戶, 還是教主的那句話, 你懂的.&>

說到數據和數據體驗, 最偉大的公司都是誰? 是網路目錄的Y!, office和win的M$, 搜索引擎的G, sex的F, career的L, 政經的Reuters. 當然還有評論的163和一團亂碼的weibo.

---

詳解 iOS 7 中的動態焦點設計思想

本文由 eico design 創意總監張卷益撰寫。從專業設計師的角度，解讀剛剛正式發布的 iOS 7 中的動態焦點設計思想。eico design 的動態設計們還對 iOS 7 的全新動態設計進行了高速模擬和分解，將 Parallax 空間動態中的速率曲線進行了分析整理，以幫助設計師和產品人員更好的理解其中的設計思想和改變。

正如我們在大多數雷同的寫字樓中很容易迷失方向，但在很多全新設計的 Shopping Mall 或古代庭院中卻很容易辨識自己的位置和目的地，優秀的建築室內設計不僅採用指示標識對人們進行引導，還能夠通過空間結構以及獨特的「韻律」來讓人們與建築產生空間共鳴。

與之相似的是在產品界面的設計中，隨著功能和界面數量級的不斷增加，用戶是否能理解自己所處的「位置」並且清楚的判斷下一個「十字路口」該如何行進，是作為產品易用性設計的重要評價標準。換句話說，容易使用戶「迷路」的界面產品是具有很大缺陷的。

作為界面體驗的重要組成部分，產品界面的動態設計也不僅僅是用來增加視覺方面的感官刺激，而更多的是影響用戶對產品的感知和理解。iOS 平台的動態設計，從第一代 iPhone 發布起即通過產品的動態表現，體現了界面在 X、Y、Z 軸之間的空間層級關係。通過 iOS 平台的動態表現，用戶可以輕鬆地理解屏幕中所存在的「世界」，以及「我」在這其中所處的位置座標。而良好的動態設計和表現也是 2007 年 iPhone 誕生時，讓用戶和全世界為之驚嘆的原因之一。

在 iOS 7 beta 版本發布後，我們就開始對新版本進行解構和研究。作為全世界最受關注的操作系統平台，iOS 7 對未來產品設計的影響是不言而喻的，因此這樣的研究學習對於產品設計而言是不無裨益的。

在動態設計方面，我與 eico 動態設計師白燁飛對已經發布的多個 beta 版本進行了分解和模擬。今天可以看到由 beta 版到正式發布的產品中，一種新的動態設計思維被加入到 iOS 7 的平台，其中主要包括兩個方面：其一為以操作焦點為中心的動態切換，其二是以「Parallax」結構為基礎的空間速率變化。

操作焦點為中心

在 iOS 7 的桌面系統及自帶應用中，正式採用了被稱為集合視圖轉換（UI Collection View Transition Layout）的界面切換效果。此前 iOS 系統中不同層級間的界面切換，幾乎都是通過單一推箱子式進行的。

而在 iOS 7 中的集合視圖轉換，大都採用了這種以用戶操作焦點為中心的運動方式。其特點為：集合視圖界面的運動基準點或線，不再單一為過去的屏幕中心或邊緣，而是將用戶的操作點或軸，作為界面切換運動的基準點或線。運動路徑也從過去固定路徑的運動，轉變為根據操作點和軸進行移動的動態模式。其意義在於進一步將用戶的操作與界面切換過渡動態進行銜接，引導用戶在不同界面的切換過程中移動視覺焦點。而在過去的大多數界面切換動態中，用戶不得不在每次界面切換完成後，再重新定位自己的視覺焦點。

首先可以看到，在桌面層級中，無論是點擊某個圖標打開 APP 的啟動動態，還是打開 APP 文件夾的展開效果，都是以用戶的操作點為放大中心進行的。然而每個區域點擊後的效果速率也是不同的，並且這樣的速率規則貫穿於所有的同類動態中，後文中會進行詳解。

同樣的規則也體現在 iOS 7 的其他自帶應用中。在全新設計過的日曆中，由年視圖到月視圖的切換動態，以用戶所點擊的具體日期為中心進行動態放大切換，由月視圖到日視圖的過程，則是以所點擊的日期所在行，進行 Y 軸的縱向提升。

在全新的相冊界面中，由年度 -&> 精選 -&> 時刻的切換動態中，照片縮略圖在不同尺寸上的的放大直至全屏查看的效果，其動態運動軌跡也取決於用戶在屏幕上的觸摸點。

對於新版 Safari 的設計，操作焦點引導的設計思想主要體現在多窗口選擇的切換方式上。相較舊版本，新版 Safari 採用縱向層疊瀏覽窗口的設計方式，使用立體透視的層疊效果以更好地利用豎向屏幕空間。同時，在點擊選擇窗口至放大的切換效果時，以點擊位置作為基準線進行立體透視運動。

實際上，以操作焦點為基準的動態運動，並不是 iOS 7 才出現的新鮮產物，包括在如 Clear、Evernote 等 APP 以及 iOS 5 的部分設計中，早已採用了類似的設計方式。但對 iOS 來說，從系統級別開始就全面引入這樣的設計理念，可以算作其誕生 6 年以來一次很大的進步。

「Parallax」空間速率

以上談到的根據操作焦點的切換模式，是從運動的方位軌跡上來進行分解。而對於動態設計來說，運動速率則是影響用戶感知的另一維度。就像是同樣的音樂曲譜，用不同的節拍速度進行演奏，可能會出現催眠曲和電子舞曲這樣截然不同的效果。

iOS 7 的應用啟動動態設計中，運動時間不僅比 iOS 6 多出了 80%，而且在速率曲線上也有了較大的差異。下圖中的 X 軸代表了動態運動的時長，Y 軸則代表了運動的速率，可以看出 iOS 6 的動態運動由開始至結束過程中，其加速和減速都是較為平均的。而在 iOS 7 中，應用啟動動態以更高加速度開始，到達極速後以非常平緩的減速度直至結束。這樣的運動速率給用戶更為舒緩和放鬆的感受，但對於此前 6 年的 iOS 系統用戶來說意味著一次感知習慣的挑戰。

但除了時間和加速度曲線的變化外，iOS 7 的動態速率還包含了一個全新維度，就是與其全新「Parallax」解構相呼應的空間速率。在 WWDC 2013 大會上，Apple 已經介紹了「Parallax」的界面視差空間結構，也在整個系統中加入了許多針對性的設計要素。而在動態設計中，則是通過運動速率的特殊計算模式進行體現。

以下是我們的動態設計師對 iOS 7 的全新動態設計進行了高速模擬和分解：

在模擬視頻中可以看出，雖然 iOS 7 中大多數的集合視圖動態速率曲線是相似的，但是由不同所操作點引發的界面動態，其速率曲線間也有著細微差異。規律是在同樣的界面動態時長下，以屏幕中心點作為原點，越靠近屏幕邊緣的操作焦點，越以更高的啟動速度開啟界面動態過程。

這樣差異化的動態速率方式，相對全部一致化的動態效果，會給人中心點內容離操作者更近，屏幕邊緣離操作者相對較遠的感覺。通過動態速率在用戶的感知潛意識中，構建出一個界面中的速率空間。這樣的設計方式常見於一些縱版射擊遊戲中，但在界面產品的設計中確實不多見。

結語

通過進一步分析和理解，我們可以看到 iOS 7 設計團隊開始從更多新的維度和深度思考界面產品設計。全新的 iOS 系統產品在未來幾年內對用戶、產品以及行業都會帶來不同程度的影響。其中很多改變都讓人感到激動，特別是在許多方面的全新轉變，也將過去很多未能實現的設計方案變為現實。對於未來產品而言，在帶來新挑戰的同時，實際上也提供了全新的想像和施展空間。

---

都在吐槽iOS 7 beta版，但準確的說，這是一個developer preview版。本來就是給開發者預覽的，UI方面一定存在各種問題。

我個人認為，扁平化的本意是體現＂效率＂型，Metro就是這個思想，而擬物設計是最初智能手機必經階段，用戶對智能手機最初的認識是＂酷炫美＂，所以擬物設計可以很好的突出這一需求。

而扁平化，則把用戶的視覺重點在設計本身上來弱化了，減少認知障礙，體現最簡約的美，更多是把智能手機當作一個高效工具。

就算說學習Android和Metro也沒什麼，很正常，或者說這是必然發展趨勢。很多實物的工業設計也是由追求美學浮誇漸變為樸實實用。

只不過目前iOS 7 這個beta版也太著急放出，可能出於一些市場因素考慮，或是為了收集用戶反饋。比如icon上不統一的高光方向，但這很有可能是內部幾個小team的作品，沒有整合好。

我相信正式版的iOS 7不會這麼糟糕。

我不是蘋果腦殘粉。

---

蘋果終於意識到（我以為）：再怎麼擬物，用戶摸到的還是一塊玻璃。於是就有了磨砂玻璃。

---

難道大家沒發現目前的設計可以在橫向無限拉升嘛？！蘋果很快會出大屏幕手機了，為橫向拉升做足準備吧

---

華為（上海）終端交互設計主管 朱斌老師 的分享實錄哦，希望有所幫助

觀看更多精彩內容和直播視頻，請關注微信公眾號：創意發聲

「扁平化設計」的使用正逐漸成為網頁和UI設計近期的大趨勢，同時也是時下的一個熱門話題，各種探討和學習研究紛至沓來。這篇文章將要和大家分享的是華為（上海）終端交互設計主管 朱斌老師所演講的《扁平與擬物之爭：手機界面越來越好看，是因為擬物化》。

究竟是扁平化好？還是擬物化好？

今天我要和大家分享的主題是手機界面的設計，大家都知道我們經歷了兩個時代，一個是擬物化的時代，一個是現在的扁平化時代，那麼站在設計的角度，究竟是擬物好，還是扁平好？很多做產品和做設計的都想我給出一個兩元的答案，究竟是好，還是不好。但問題遠遠沒那麼簡單。

大家可能有做過圖標、扁平化設計的，也有做過一些擬物嘗試的，包括一些招貼、海報，那麼扁平是什麼？擬物是什麼？它們帶來各自的特性是什麼？我們先來看一個小遊戲。遊戲的內容很簡單，類似我畫你猜的形式，用儘可能短的時間，記住所有你在圖片上看到的信息。大概10秒鐘一個圖標。

1.滴滴打車

作為設計師，我們的眼光都是比較毒辣的，所以從左邊來看，我們能看出一個圖標的特性。首先這是一輛車，並且是咧著嘴在笑的一種情緒，再仔細看還有taxi的字樣，所以這是一輛計程車，給人感覺比較友好、開心的狀態。作為設計師，我們肯定還會觀察到它的顏色，所以在右邊看到的是我們能夠記錄下來的顏色。其實就是幾個主色調，橙色、黃色和藍色。

第二個圖標，我們也用10秒的記憶來記住它。其實5秒就夠了。這是滴滴打車和快滴合併後的一個新Logo，每天我都要使用很多次。圖標設計很簡單，而且記憶難度也很低，讓普通用戶一看，就能聯想到大寫的D。那麼從設計師的角度，我們能看出它有一個orange的顏色，橙色。

我們把滴滴的圖標和這個圖標放在一起，看能傳達出什麼信息。從圖標看出，在早期，滴滴處於一種拓展市場的階段，給用戶傳達的是一種非常友好、易用、以計程車為主的模式，但是在和快滴合併後，已經形成了一種大型的叫車服務，包含專車和拼車服務體系，所以形成了一個商業化的標誌，比較簡潔，是一種扁平化的Logo。

我們先不去評價哪一個好，哪一個不好。因為100個讀者的眼中有100個哈姆雷特。我們主要需要關注的是它背後傳遞的內容，以及設計師和商家希望傳遞給最終用戶的內容。

2.INSTAGRAM

我們來看下一個圖標。這個圖標，做設計的一定知道，INSTAGRAM。它是一台照相機，從直觀的、感性的、細節的角度來看，我們能看到它有一個很大的鏡頭，皮質的材質，還有INSTA字樣。這是在這個圖標上非常明顯的信息和內容。同時在色彩上，從設計的角度可以看到它的色彩也很豐富，有彩虹色，橙色和一些高光的顏色，凸顯在它的鏡頭和玻璃材質上。是我非常喜歡的圖標，他們也用了5年沒有變。

下一個圖標就是INSTAGRAM的新Logo。這次我去矽谷，正好遇到這個設計上的公案，大家都在熱烈地討論INSTAGRAM這次換圖標究竟代表了什麼樣的意義，是一個劃時代的信息？還是設計師們腦子壞了？這個3秒鐘就可以記住的圖標，其實就傳遞了兩個信息，一個是camera，一個是colorful。這也是我們在和美國同行交流時提到的。

其實這個上面出現了東西方文化認知上的差異，在我認識的東方設計師們更喜歡左邊的圖標，比較符合東方人的審美，因為它有細節和情感在裡面。但在西方的同行卻十分贊同INSTAGRAM這次換圖標的行為，他們認為這次INSTAGRAM終於跟上了時代，從圖片分享的網站前進了一步，成為了一個傳遞、分享、營造社區氛圍的APP應用。雖然我不是完全認同，但是卻能明顯體會到東西方文化的碰撞。這裡我們也不說哪一個圖標更優秀，因為這是沒有答案的。

通過這四個小測試，我們能夠看到左邊擬物化的圖標和右邊扁平化的圖標分別傳遞給了用戶不同的信息和情感。所以擬物化和扁平化究竟是處在一個不可調和的對立狀態，還是分別在UX設計中承擔了各自的角色，有各自的任務和意義呢？

論扁平化和擬物化的不同意義

其實說到意義，扁平化就是要給用戶最關鍵的信息，而且第一眼就能看到。這是扁平化設計最大的優勢和特點。擬物化設計則除了核心信息，還附加了許多情感化的元素。

像滴滴圖標的微笑，INSTAGRAM的皮質、很好的鏡頭，這些都給人一種開心和很高檔的感覺。這些其實就是我們講扁平化和擬物化的前提，我們不應該簡單地理解扁平化，就是把陰影、色彩去掉，然後融合成了一個非常簡單的圖形來傳遞一些信息。這不是扁平化。扁平化主要是我要傳遞給別人什麼樣的信息，用戶接收到的是什麼信息。而擬物化是我要傳遞什麼樣的情感，用戶接觸到的是什麼樣的情感。然後再去討論扁平化和擬物化才有意義。

扁平化設計的優勢及案例分析

我是做UX設計的，這10年從擬物化到扁平化，作為一個UX設計師，我是非常喜歡扁平化設計的，因為給了用戶非常關鍵的引導、傳遞信息的作用。

扁平化設計的好處：

1.簡單易用。只給你想要的信息，弱化掉了其他信息。

2.界面清晰乾淨。不影響在手機上的使用效率。

3.是理性的產物。通過理性的思維方式和邏輯，把次要的信息進行了有效的屏蔽。

結合了這三點，我們能看出扁平化設計的功能是執行、完成任務的一個路徑和工具。

扁平化是現在十分流行的趨勢，不管是做UX設計、產品設計還是其他，扁平化設計都需要我們好好學習研究。但我們看市面上很多扁平化的設計做得並不好。我今天其實是要黑那些做的不好的扁平化設計。世界上最大的互聯網公司谷歌，集合了世界上最聰明的頭腦，最強的軟體團隊，結果做出的扁平化設計是這樣。

這個原生的操作系統，在國內很少見到，因為我們看到的都是國內的廠商灌裝的OS，已經非常地符合了中國人的口味。但是在西方，安卓原生的操作系統，還是有很大的市場，我真的認為這個扁平化設計做的還不夠。

還有微軟，從windows7開始做的扁平化設計界面，我從windows7開始，就堅定地成為了mac用戶。這兩個都是扁平化設計被廠商、設計團隊用壞了的案例。

下面我們要討論為什麼他們做的扁平化不是我們想要的？要怎麼做才能讓用戶覺得更好看呢？我們看最新的穿戴式設備，像APPLE WATCH，ANDROID WEAR這樣的設計方案，結果出來的扁平化設計一點也沒有make sense。市場上的反饋也一樣，即使再加上色彩，最多也只能做成這樣。

看起來和我們20年前買的電子錶沒什麼區別。這是時代進步了還是倒退了？真的不好說。那我們來看一些其他例子。我們的團隊做了一些什麼嘗試。你們看了有什麼感覺？

擬物化設計的優勢及案例分析

和前面的WATCH對比，會有什麼樣的比較？這個是華為WATCH和施華洛世奇合作的水晶手錶，售價很高，但是在歐美和中國高端市場供不應求。我們對錶盤採取的是純粹的擬物設計。當然在施華洛斯奇定製版上是合適的，因為水晶本身就承載了一些美學因素。

那看一下我們的通用版本，我們在華為WATCH上沒有做扁平化的設計，全是採用擬物化的錶盤設計，同樣在市場上的反饋非常好。

還有這是我們為華為設計的一部分的錶盤，毫無例外，所有的都有許多擬物化的，擬真的元素在裡面。為什麼我們要這樣做，是不是帶來了商業價值的提升？答案是肯定的。至少在華為WATCH上是這樣。所以這背後的道理和邏輯是什麼呢？

其實擬物化設計帶給用戶的感覺是：

1.真實。這是一塊真正的手錶。而不是扁平化設計給人感覺不像是手錶。

2.非常精細的細節。

3.帶給人一種情緒和情感。

在我的團隊，不強調教條化的扁平和擬物，我們需要在做設計的時候，考慮它的扁平和擬物特性的融合，或者在某個特定的場景之下，我們要怎樣去做扁平和擬物的設計。我們現在的設計方法是：在做扁平設計之前，儘可能地用擬物的方法去嘗試、去設計、去實現，在做了足夠多的擬物化設計方案之後，再看哪些可以精簡，哪些可以扁平，哪些場景需要擬物或扁平。在這個基礎之上，才能有機地把擬物和扁平結合起來。

譬如說在手錶上，我們有兩個設計方案，一個是真正的數字，理念是為了讓用戶在最短的時間內獲得最準確的時間。但其實在用戶調研的數據中顯示，許多華為或APPLE WATCH的用戶在展示錶盤時，更多是想和周邊的人分享這個智能手錶有很多的可能性。隨著每一次點亮屏幕，都有一個不同的錶盤呈現。這個需求反而超過了對確切時間的要求。因為人是一個有時間觀念的動物，基本上不會對時間的認知有很大的偏差，這就是場景決定了設計。通過這個場景分析，我們知道在設計上不用做太多的扁平設計，反而是做一些讓用戶覺得有噱頭，能夠拿出去分享的設計。所以最後能得到很好的反饋。

做扁平化設計之前，先做好擬物化

所以在我們團隊有一個很重要的訓練，就是怎樣將扁平和擬物相結合。其實方法也很簡單。

1.講究設計的造型。在扁平化的時代，我們已經不用太care造型，哪怕是一個CAMERA或者手機，只要幾根線條，幾個幾何形，幾個稜角，做成一定的弧度就能完成這個造型。其實就算這是在扁平化的時代也是不對的。我們首先要了解它的造型，它的主要形體，然後才能把這個形體抽象出來，成為一個獨特的特徵。

2.對色彩的把握。這在扁平化設計要比擬物化設計更難，因為扁平化設計的色彩元素太少，就是幾個顏色的搭配。有一個好的色彩感覺，對扁平化設計是非常有幫助的。我們現在回想一下，windows的操作系統，它就吃虧在色彩上。

3.材質。回想INSTAGRAM的第一個圖標，有皮質、玻璃鏡頭，它的材質的反饋能非常好地提升自己的檔次和品質。

那麼我們什麼時候該體現材質，什麼時候要放棄它呢？可以參考剛才分享給大家的華為WATCH的設計，我們對材質的要求可以說是苛刻的。非常苛刻地要求材質的還原度，但後面我們會看到別的華為手錶的設計。我們對材質又是完全放棄，完全扁平的設計。要做到收放自如的材質設計首先要掌握材質的設計方案。只有先掌握好擬物設計，才能更好地在扁平化設計上發揮。

做扁平化設計之前，要做好擬物化。做好擬物化設計的設計師再轉過來做扁平化設計，要比一直在做扁平化設計的要設計的好看。這就是為什麼我說，手機界面或者APP的設計好看是因為擬物化的原因。其實扁平是需要藉助擬物化的特徵和特性的來彌補它欠缺的情感上和信息傳遞上的需求。我們看做得比較好的扁平化設計，蘋果手機裡面的圖標。都是通過擬物來做的扁平化設計。

比如：記事本。完全是用擬物的方式，但同時卻又非常的扁平。再看蘋果的錢包，現在有新的版本了。但是元素還是一樣的，設計的理念和邏輯也沒有變。依然是擬物卡槽。卡槽的擬物化設計拍扁了放在了擬物化設計，然後形成了婦孺皆知的扁平化設計。那音樂和圖庫的圖標也是一樣的。音樂用了世界公認的音樂符號，但是背景沒有用單一的顏色，依然保留了漸變色和顏色變化的特性。從圖庫的圖標上可以看出現在的圖庫標示是從花朵的變形轉變過來的。這都是在擬物上做的扁平設計，也是蘋果的高明之處。所以蘋果一直處在設計領先、體驗領先、銷量領先、和利潤最高的level是有它的道理的。

什麼場景用扁平化或擬物化？

擬物化的設計要在適合的場景去做，譬如手錶的錶盤。很多人會問，那你怎麼去區分什麼樣的場景用扁平或擬物呢？我們可以從使用的場景去反推。如果更多的是分享和吸引其他用戶的關注，那麼更推薦用擬物；如果是為了達到某個目標，目的，線性的操作，那麼更推薦UX扁平化的設計。用最短的路徑，最簡單的方法去達到用戶的目的。

人都有虛榮心，也都是愛美的，為了讓更多人感受到我們的存在。所以在做視覺分享為主的界面，我要求我們的團隊在擬物化設計上多加一些元素，但如果是一些既定的操作，譬如打電話發簡訊，那我們會更注重一個扁平化的流程。讓用戶在最短的時間去完成一個任務。所以再次強調，扁平化的設計要基於擬物來設計。

最後一個例子，在純粹的扁平化設計，我們的擬物難道只局限在設計手法上嗎？肯定不是。因為擬物有很多狀態，比如華為的雜誌解鎖，在MATE7得到了巨大的成功，現在已經成為國內OS的標配。所有的廠商都有這麼一個雜誌解鎖。其實你看雜誌解鎖的設計非常扁平，除了一張雜誌圖片，就是邊上的一些小設計。但是其實我們是把一本雜誌搬到了我們的解鎖界面上。難道這不是一個擬物嗎？把一個真實的物件搬到了使用場景中來，這也是一種擬物。

所以在扁平化時代要做擬物的地方非常多，我們希望越來越多的擬物化設計能夠在扁平化的時代里凸現出來，然後得到大家的認可，幫助公司獲得商業成功。

---

之前一直在黑 我現在很自責

我決定為ios7的UI正名

我認為扁平化設計最大的優點就是從此一以後設計師出icon的時候只需要出一套了！

---

從宣傳片中看到了webOS, Win8, Andriod的絲絲影子。

---

基於信息學裡面的信息傳遞。革除其中的垃圾信息，使信息的傳遞更為快捷和有效。對於用戶體驗來說，減少用戶的視覺負載，提高用戶注意力，使用戶可以更為快捷的理解並執行目標操作。

---

推薦閱讀：