藍藍設計( m.0391cbd.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

 

如果你是一個APP狂熱分子，你會花大量的時間在各種APP的嘗鮮中，你會明顯感受到一些APP在采用著某種風格鮮明的設計語言，來標榜自己的獨特之處，行成自己的設計風格，甚至引領設計風向。去年我們關注到隨著Metro設計風格的影響和iOS7的發(fā)布，APP明顯都開始嘗試扁平化的設計語言了，除此之外，還有哪些顯性化的設計語言嶄露頭角呢？

一、唯一主色調 | Simple color schemes

為什么我們要定義一個界面多種顏色？僅僅用一個主色調，是不是就能夠很好的表達界面層次、重要信息，并且能展現(xiàn)良好的視覺效果？事實上也正是如此，隨著iOS7的發(fā)布，我們看到越來越多唯一主色調風格的設計，會采用簡單的色階，配套灰階來展現(xiàn)信息層次，但是絕不采用更多的顏色。

 

卡塔爾航空公司

卡塔爾公司航空就是這樣的設計案例，整個界面采用粉色的主色調，從標題欄到標簽頁，從操作按鈕到提示信息，除了黑白灰之外，全部采用粉色設計，這種簡介的的配色風格，反倒起到了很好的信息傳達效果，也具有良好的視覺表現(xiàn)力，設計師在內容排版上的技巧實在是加分。

 

Readability采用紅色主色調設計，連提示信息背景色、線性按鈕和圖標都采用紅色主色調，界面和LOGO也完全是一個色系的。而Vivino采用藍色主色調設計，信息用深藍、淺藍加以區(qū)隔。Eidetic采用橙色主色調設計，其中的關鍵操作按鈕甚至整個用橙色提亮，信息圖標也用深橙色、淺橙色來表達程度。 可以說唯一主色調設計手法，是真的做到了移動端APP的最小化（Minimal）設計，減少冗余信息的干擾，使用戶專注于主要信息的獲取。

二、多彩色 | Hypercolour

而與唯一主色調形成對照關系的，就是Metro引領的多彩色風格，為什么我一定要給我自己的產品定義一種主色調，多彩色就不能是主色調嗎？于是出現(xiàn)了不同頁面、不同信息組塊采用撞色多彩色的方式來設計的風格，甚至同一個界面的局部都可以采用多彩撞色，也產生了不少優(yōu)秀的設計。

 

優(yōu)衣庫出品的RECIPE，是一個讓人眼前一亮的設計案例，多彩色的設計風格融入到整個APP中，不論是切換標簽頁，還是在內容組塊中滾動，都會變更不同的主題色。色彩切換的時候，還會有淡入淡出的效果，讓切換變得自然而然，完全不生硬。

RECIPE的番茄鐘計時器模塊，會一邊計時一邊播放優(yōu)美的美食背景音樂，同時切換不同的主體顏色，隨著主體顏色的變更，所有的前景文案、圖片也會變更為該色系，加上清晰度極高的美食圖片，真的是視覺+聽覺的雙重享受。RECIPE真的是2013年難得一見的優(yōu)秀設計。

 

而Peek Calendar、EveryWeather和Harmony這三個APP，是列表多彩色的設計案例，這種列表多彩色，不知道是不是從Clear開始再度流行起立的，用鮮亮的多彩色來區(qū)分信息，確實能起到突出的效果，視覺上極其醒目。

 

可是對于一些內容型的APP，也許并不適用，比如GoogleKeep的多彩卡片，確實是在內容閱讀上會起到反效果。百度云記事本第一版設計也是多彩色的，但是后來考慮到文字記事比較多，為提供良好的文字閱讀體驗，還是把多彩色改成灰白色微質感的設計。

三、數(shù)據可視化 | Data Visualization

至于對信息的呈現(xiàn)，越來越多的APP開始嘗試數(shù)據可視化、信息圖表化，讓界面上不僅僅是列表，還有更多直觀的餅圖、扇形圖、折線型、柱狀圖等等豐富的表達方式。表面上看起來也不是很難的事情，但是若真想實現(xiàn)，背后的復雜程度也不容小窺。

 

Nice Weather用曲線圖來表達溫度的變化，Jawbone UP用柱狀圖來表達每天的完成情況，PICOOC用折線圖來表達每天體重、體脂的變化。移動APP利用數(shù)據可視化，可以在更小的屏幕空間內，更立體化的展示內容。

四、卡片化 | Cards

卡片也是一種采用較多的設計語言形式，無法考究這種卡片的設計，是從Metro的tiles流行起來的，還是從Pinterest的瀑布流流行起來的。總之我們可以發(fā)現(xiàn)，Google的移動端產品設計已經全面卡片化了，甚至Web端也沿用了這種統(tǒng)一的設計語言，據說是Google搜索的體驗負責人引領的設計語言統(tǒng)一升級。

luvocracy的卡片流突出信息本身，用大圖和標題文字吸引用戶，強化了無盡瀏覽的體驗，吸引用戶一直滾動下去。Google Now的卡片則更加的定制化、個性化。有的卡片是用來做用戶教育的，有的卡片是用來告知天氣的，有的卡片是呈現(xiàn)聯(lián)系人列表的，有點卡片是顯示待辦事項的。不同的卡片都遵循在一個統(tǒng)一寬度和樣式的卡片內，進行發(fā)揮和設計。既保證了卡片和卡片之間的獨立性，又保證了服務和服務的統(tǒng)一化設計。Shazam則用一種趣味的卡片樣式，呈現(xiàn)專輯和歌曲。

 

五、內容為王 | Content First

APP產品的發(fā)展，最終的路徑勢必會跟web產品一樣，突出內容，內容為王，當繁華褪盡，纖塵不染，再重新去看APP存在的意義，不外乎是給用戶提供更好的服務。與內容相比，所有的設計和包裝，都不外乎是一種表現(xiàn)手法，而真正具有價值的APP，一定是內容取勝的。Facebook用190億美金收購了Whatsapp，這個全是用統(tǒng)控件搭建的APP，并不是因為他的設計多出眾，而是因為他的服務足夠有價值。

 

Artsy的圖片瀑布流，完全沒有用到線和面來區(qū)分信息組塊，而就是用內容本身做排版，用戶可以更加集中注意力于圖片內容上。Prismatic利用字體排版，盡可能的內容前置，弱化圖標和操作，讓用戶更集中注意力于內容閱讀上。而MR Porter則利用商品圖片、名稱和價格直接做設計，讓用戶聚焦于商品本身。

六、圓形的運用 | Circle Design

原形是最容易讓人覺得舒服的形狀，尤其是在充滿各種方框的手機屏幕內，增加一些圓潤的形狀點綴，立刻就會增加活潑的氣息，徒增好感。一個有意思的現(xiàn)象是，iPhone的撥號數(shù)字鍵盤，一開始都是矩形設計，迭代到iOS7，均變成了圓形，可以說是對傳統(tǒng)電話的致敬，也可以說是增強了界面的柔和感。當然相應的，也要處理圓形的實際點觸區(qū)域，不要因為設計成圓形點擊區(qū)域也變小了，導致點擊準確率下降了，美觀度提升易用性受到了影響。

 

Beats Music把選擇喜歡的標簽設計成了圓形，這就比普通的列表、矩形tag的感覺要好很多，更加趣味更具探索性。Movse每天走的步數(shù)、消耗的卡路里均用圓形承載，是數(shù)據可視化、關鍵信息顯性化的最好案例。Tumblr則把要創(chuàng)建的內容的類型選擇，用蒙層+圓形選項按鈕來設計，讓選擇變得專注而明確，又不那么死板。

七、大視野背景圖 | Bigger Vision image background

用通欄的圖片作為背景，也成為今年的一個流行趨勢，或者是作為整個APP的背景，或者是作為內容區(qū)塊的背景，既提升了視覺表現(xiàn)力度，又豐富了APP情感化元素。一些信息或操作，浮動在圖片上。這種設計方法，對字體和排版設計要求更高，難度也更多，但極容易渲染出氛圍。

 

大視野背景圖風格也分為兩種，一種像Secret、The Whole  Pantry這樣的，內容區(qū)塊中采用大視野背景圖，好處是可以利用圖片做區(qū)塊分割，難度是圖片拼接后的效果不一定好看，所以可能還需要配合描邊、留白等設計手段優(yōu)化拼接。另外一種就是想Vsco、Flink、Mindie、Soundwave這樣的，全屏背景圖甚至打通狀態(tài)欄，前景做內容排版、導航、操作。好處是設計非常具有生命了，所有有朋友把這種風格也叫有計劃設計，說的就是回歸大自然的設計手法。但風險也是很明顯的，就是前景的信息排布設計其實是有很大挑戰(zhàn)的，必經花花綠綠的背景太過于干擾注意力，導致前景的文字內容可讀性會變弱。所以需要把重要操作用明確的按鈕區(qū)隔出來，閱讀型文字跟背景圖要用明顯的反色，還是不行的話就把文字浮在半透明蒙層上，解決可讀性問題。

最后總結來說，這是讓我覺得印象深刻的7種設計語言，唯一主色調、多彩色、數(shù)據可視化、卡片化、內容為王、圓形的運用和大視野背景圖。其實設計風格很難有全新的，也是不斷輪回的過程，為凸現(xiàn)內容APP都在往輕薄化方向設計，不過保不準哪天，又顛覆回最開始的重質感擬物話設計呢。