4.2 App UI設(shè)計(jì)風(fēng)格

我們常說某個App很有設(shè)計(jì)感，那么，什么叫設(shè)計(jì)感呢？設(shè)計(jì)感即設(shè)計(jì)風(fēng)格。我們將設(shè)計(jì)風(fēng)格拆分為設(shè)計(jì)和風(fēng)格來進(jìn)行解釋，設(shè)計(jì)是運(yùn)用合理的規(guī)劃把一種設(shè)想通過各種感覺形式傳達(dá)出來的過程；風(fēng)格則是指藝術(shù)作品在整體上呈現(xiàn)出來的一種具有代表性的面貌。通俗地講，設(shè)計(jì)風(fēng)格就是經(jīng)過縝密思考和精心雕琢后的能夠反映內(nèi)在氣質(zhì)的個性特征。一個好的設(shè)計(jì)風(fēng)格能夠反映出產(chǎn)品的氣質(zhì)，瞬間打動用戶，給他們留下深刻的印象；而平庸的設(shè)計(jì)不能帶給用戶視覺感官上的享受，即使卸載也不可惜。設(shè)計(jì)風(fēng)格如此重要，本篇就來重點(diǎn)講解目前主流的5種App UI設(shè)計(jì)風(fēng)格，它們分別是極簡主義、扁平化、Material design、擬物化和Metro UI。

極簡主義

極簡主義設(shè)計(jì)風(fēng)格也被稱為“無”設(shè)計(jì)，它追求的是“少即是多”，即用最簡單的形式和最理性的設(shè)計(jì)手段創(chuàng)造最深入人心的藝術(shù)感受。在設(shè)計(jì)方法論上，極簡主義設(shè)計(jì)風(fēng)格是減法，是去偽存真，反映出道家“有無相生”的設(shè)計(jì)哲學(xué)。極簡主義設(shè)計(jì)風(fēng)格的目的是突出內(nèi)容本身，讓重要的信息及功能更容易被關(guān)注，從而讓用戶更加直觀地進(jìn)行操作。大面積的留白、嚴(yán)格的配色和精簡的內(nèi)容等，使圖、文、背景主次分明，具有強(qiáng)烈的視覺沖擊力。

柴扉App采用全局白色的背景，不通欄的大圖片保持較大的邊距，使得界面的呼吸感更好，并利用左右對齊和字體的變化排版，產(chǎn)生對稱和對比的美感。把用戶操作的按鈕放置在界面中間，既能方便用戶單手操作，又能讓功能更加聚焦，一分一寸之間都蘊(yùn)含著潤物細(xì)無聲的人文關(guān)懷。就像它的介紹一樣：柴扉是一款打動人心事物的App，一首歌，一則語錄，一篇文章，每天用十分鐘的細(xì)碎時光，點(diǎn)燃內(nèi)心的光明。

輕芒閱讀App聚合了超過500個應(yīng)用的最新內(nèi)容，它采用大面積的白色背景，并利用較大的間距、字重和顏色的變化排版，既能讓這么多的五花八門的應(yīng)用圖標(biāo)和諧共處，又能保持每一個應(yīng)用清晰可見的良好體驗(yàn)。大量的留白將更多空間留給了每天更新的10000多條內(nèi)容，讓用戶沉浸在閱讀的世界里。在輕芒閱讀的界面中，幾乎看不到任何分割線，精致的圖標(biāo)、嚴(yán)格的字體變化和配色，向用戶傳遞一種明亮、清晰、精致的感覺。

白色，干凈、優(yōu)雅、平和而簡單，在自然界象征著極致的純凈與貞潔，它沒有強(qiáng)烈的個性，被稱為“無色”。因而在極簡主義設(shè)計(jì)風(fēng)格中，白色是最常被運(yùn)用的主色調(diào)。但是，極簡主義設(shè)計(jì)風(fēng)格中的“留白”絕對不是指白色，而是空間。

開眼App采用通欄的大圖設(shè)計(jì)，圖片之間沒有任何分隔的視覺元素，字重的對比排版讓內(nèi)容產(chǎn)生主次之分，最大限度地減少視覺噪音的干擾。極簡不是簡陋，它的每一處細(xì)節(jié)都經(jīng)過反復(fù)推敲。在發(fā)現(xiàn)頁面，分類標(biāo)簽的“熱門”“分類”“作者”加粗字重并在文字中間留有空格，既能讓標(biāo)簽分布更加勻稱，又能讓標(biāo)簽不過分單薄。這種精致而又冷靜的界面設(shè)計(jì)，也與開眼定位優(yōu)質(zhì)內(nèi)容的產(chǎn)品理念相契合。

極簡主義設(shè)計(jì)風(fēng)格對產(chǎn)品構(gòu)架產(chǎn)生了重大的影響，進(jìn)而決定產(chǎn)品界面的可用性與易用性，它可以降低界面信息的承載量，并能讓用戶體驗(yàn)達(dá)到最佳。極簡主義設(shè)計(jì)風(fēng)格展現(xiàn)一種用最直接、最簡單的方式將功能和內(nèi)容呈現(xiàn)出來，剔除與內(nèi)容和功能無關(guān)的干擾元素，將思想帶回本真。

Rise App是一款鬧鐘應(yīng)用，它將極簡主義設(shè)計(jì)風(fēng)格發(fā)揮到了極致。打開Rise的界面用戶看不到任何信息，沒有狀態(tài)欄，沒有導(dǎo)航欄，沒有標(biāo)簽欄，什么都沒有，空無一物，只有界面中心的當(dāng)前時間和頂部的表示亮度的圖標(biāo)。極簡的界面中隱藏著許多簡單的手勢操作，點(diǎn)擊屏幕任何地方進(jìn)入設(shè)置鬧鐘，按住“小太陽”向下滑屏調(diào)節(jié)界面暗度，向左滑切換純黑背景，向右滑同時查看鬧鐘時間。

在Rise的界面中，背景不再是默默無聞的配角，而是設(shè)計(jì)的核心。進(jìn)入鬧鐘設(shè)置界面，按住時間向上或向下推移可以調(diào)節(jié)鬧鐘時間，漸變的背景色隨著時間的推移呈現(xiàn)出凌晨、日出、正午、日落等的顏色變換，使得用戶不僅可以從數(shù)字上體驗(yàn)時間的變換，更可以通過背景色的漸變感受時光的流逝。Rise極致流暢的用戶體驗(yàn)，遵循著人與自然的規(guī)律，在無形之中就喚醒了用戶的美好情緒。

扁平化

扁平化設(shè)計(jì)風(fēng)格的核心意義是，去除冗余、厚重和繁雜的裝飾效果，具體表現(xiàn)為去掉了多余的透視、紋理、漸變以及立體效果的元素。在設(shè)計(jì)元素上，則強(qiáng)調(diào)了抽象、極簡和符號化，并突出內(nèi)容本身，更好地表達(dá)視覺層次，讓用戶更快地找到交互重點(diǎn)，剝離出不同層次的信息成為設(shè)計(jì)的中心，于是扁平化的設(shè)計(jì)就減輕了視覺壓力，突出了重點(diǎn)，從而提升用戶體驗(yàn)。

從iOS 7開始，蘋果就已經(jīng)拋棄了擬物化設(shè)計(jì)風(fēng)格，走向扁平化的設(shè)計(jì)，原先的玻璃質(zhì)感、高光、紋理、投影沒有了，取而代之的是平面、銳利的抽象圖形，這樣使得UI界面變得更加干凈整齊，使用起來格外簡潔，從而帶給用戶更加良好的操作體驗(yàn)。

現(xiàn)在我們看到的大多數(shù)的iOS應(yīng)用都已經(jīng)完全扁平化了，但扁平化并不是完全平面化，它只是對界面進(jìn)行了扁平化的處理，是為了讓元素更加簡潔易于辨識，避免用戶因?yàn)榻缑娣比叨鵁o所適從。我們隨便打開一個iOS應(yīng)用，它的導(dǎo)航欄和標(biāo)簽欄雖然與界面背景同處一個平面，但我們?nèi)匀荒芨惺艹鰧?dǎo)航欄和標(biāo)簽欄與界面背景是處于兩個不同的操作層級。

種子習(xí)慣App采用卡片式的列表設(shè)計(jì)，沒有增加任何質(zhì)感和投影，而是利用與背景色的對比讓操作列表的層級清晰可見。在種子習(xí)慣的界面設(shè)計(jì)中，看不出一絲多余的裝飾元素，柔和的配色、精致的小圖標(biāo)和素色的文字，一切都是那么剛剛好，構(gòu)成了一個安安靜靜的小清新應(yīng)用。

Material design

Material design設(shè)計(jì)風(fēng)格是Google在Android 5.0推出的全新UI設(shè)計(jì)語言，旨在解決Android平臺設(shè)計(jì)風(fēng)格不統(tǒng)一、碎片化的問題。Material design的核心理念“材質(zhì)化”是基于擬物與扁平之間的設(shè)計(jì)，提取自卡片的材質(zhì)和真實(shí)的光影，符合現(xiàn)實(shí)世界元素的物理規(guī)律與空間關(guān)系，只保留物理特效、光影和層次，既避免了擬物設(shè)計(jì)的低效問題，又解決了太扁平帶來的交互層級困惑。通俗地講，Material design是一種隱喻式的、類似于紙張的扁平化設(shè)計(jì)，懸浮在背景之上并帶有投影，一旦移動它們的時候，“紙張”就會產(chǎn)生被劃走而不是憑空消失的動畫效果。

Material design的核心設(shè)計(jì)元素是卡片，通過不同卡片層級來體現(xiàn)信息重要度和交互層級。Material design還規(guī)范了Android的運(yùn)動元素，讓按鈕的彈入彈出、卡片的滑入滑出以及從一個界面變化成另一個界面的方法，都是秩序的、深思熟慮過的。對于現(xiàn)實(shí)世界中的隱喻，Material design更加傾向于用色彩來提示，當(dāng)我們按下屏幕當(dāng)中的按鈕時，可以看到按鈕顏色迅速發(fā)生變化，向石子投入湖面一樣，產(chǎn)生了一波漣漪，以此來向用戶表明交互的反饋。Material design所展示的模板當(dāng)中，最顯眼的是它的小圓點(diǎn)FAB（Floating action button，浮動操作按鈕）既是快捷功能入口，又是視覺上有趣的點(diǎn)綴。

雖然Material design自2014年推出至今已有兩年多，但在國內(nèi)并沒有被大量推行起來，很多大公司Android平臺的應(yīng)用直接復(fù)用iOS的設(shè)計(jì)，即使小部分應(yīng)用采用了Material design設(shè)計(jì)規(guī)范，其設(shè)計(jì)水準(zhǔn)還停留在套用官方色表再加一個FAB上。究其原因，其中有歷史因素也有市場因素：Material design推出的時間太晚了，iPhone牢牢占據(jù)了一半的手機(jī)市場，iOS早已深入人心；因?yàn)锳ndroid的開放性，國內(nèi)手機(jī)廠商為了爭奪市場紛紛各自研發(fā)了自己的UI系統(tǒng)；千萬用戶量級的應(yīng)用不敢輕易改變用戶的使用習(xí)慣，導(dǎo)致只能選擇一個設(shè)計(jì)規(guī)范即iOS，同時也為了降低開發(fā)成本。

擬物化

擬物化設(shè)計(jì)風(fēng)格是模擬現(xiàn)實(shí)物品的造型、質(zhì)感、材質(zhì)、紋理、光亮等，進(jìn)行適當(dāng)程度的變形和夸張的描繪再現(xiàn)。例如，電話就繪制成老式的聽筒電話，設(shè)置則繪制成立體的齒輪。最初擬物化的設(shè)計(jì)出現(xiàn)在數(shù)碼設(shè)備上，是為了降低學(xué)習(xí)成本，讓用戶一看就知道怎么使用它。因此最早、最常見的擬物化設(shè)計(jì)，或許就是按鈕了，突起的表示可以按壓，凹陷的表示已經(jīng)被按了。

雖然扁平化設(shè)計(jì)風(fēng)格已經(jīng)成為流行趨勢，擬物化設(shè)計(jì)風(fēng)格也越來越邊緣化，但仍然有一些工具類應(yīng)用堅(jiān)持?jǐn)M物化的設(shè)計(jì)，因?yàn)楣ぞ弑旧砭褪乾F(xiàn)實(shí)世界里真實(shí)存在的東西，能喚起用戶對現(xiàn)實(shí)物品的情感聯(lián)結(jié)。錘子便簽采用擬物化的設(shè)計(jì)，精致的木紋和米黃色的紙張，再加上細(xì)膩的質(zhì)感，傳遞給用戶一種溫暖的情緒。

擬物化設(shè)計(jì)不應(yīng)停留在視覺表現(xiàn)層面，而應(yīng)該是一種交互方式。一些設(shè)計(jì)師為了擬物而擬物，忙著描繪各種逼真的細(xì)節(jié)，而忽略了擬物化的核心。例如，設(shè)計(jì)一款記事本應(yīng)用非得加上皮紋的封面，難道記事本不加皮紋封面就認(rèn)不出是記事本嗎？當(dāng)然不是。它的擬物化應(yīng)表現(xiàn)在記事本的特性——翻頁，即使是純白的背景，只要給予了翻頁的效果，用戶也能感知出這是一頁紙張，它和寫字有關(guān)。

Metro UI

Metro UI是微軟在Windows Phone 7中正式引入的一種基于排版的設(shè)計(jì)語言（Typography-based design language），強(qiáng)調(diào)信息本身，有利于以文字為主的界面導(dǎo)航。這一設(shè)計(jì)理念來源于交通局巴士站站牌、機(jī)場和地鐵的指示牌——位于美國華盛頓州金縣都會交通局（King County Metro）的標(biāo)識設(shè)計(jì)，給了微軟設(shè)計(jì)團(tuán)隊(duì)靈感，其風(fēng)格大量采用大字體，能吸引人們的注意力。

Metro UI的設(shè)計(jì)核心是光滑、快、現(xiàn)代，可以令用戶獲取一個美觀、快捷、流暢的使用體驗(yàn)。Metro UI是真正意義上的扁平化設(shè)計(jì)，將所有的信息都展示在一塊塊的色塊上，讓用戶更多地關(guān)注內(nèi)容而不是質(zhì)感，保障每個Metro界面元素都是干凈的、輕量的、開放的，以及快速的。Metro UI是一種界面展示技術(shù)，和iOS、Android界面最大的區(qū)別在于，后兩種都是以應(yīng)用為主要呈現(xiàn)對象，而Metro UI強(qiáng)調(diào)的是以信息為主要呈現(xiàn)對象，而不是冗余的界面元素。

早幾年前在iOS上仍有一些Metro UI設(shè)計(jì)風(fēng)格的應(yīng)用，最令國內(nèi)用戶熟悉的當(dāng)屬Zaker，其簡潔新穎的展示方式也引起了一陣Metro風(fēng)潮，但隨著iOS 7的盛行，這類應(yīng)用再也難覓蹤跡了。即便這樣，它們也并沒有抓住Metro UI的精髓，Metro不只是幾大片色塊而已，它強(qiáng)調(diào)帶給用戶一種直觀、動態(tài)的視覺體驗(yàn)，就像機(jī)場信息牌的動態(tài)展示，隨著動態(tài)的更新而隨時變化。例如，Stezza就是偽Metro UI設(shè)計(jì)風(fēng)格，只模仿了Metro UI的外衣，甚至在信息布局上都是非常糟糕的設(shè)計(jì)。