如果你是一個APP狂熱分子,你會花大量的時間在各種APP的嚐鮮中,你會明顯感受到一些APP採用某種風格鮮明的設計語言,來標榜自己的獨特之處,行成自己的設計風格,甚至引領設計風向。
百度雲UE負責人@elya妞 :如果你是一個APP狂熱分子,你會花大量的時間在各種APP的嚐鮮中,你會明顯感受到一些APP在採用著某種風格鮮明的設計語言,來標榜自己的獨特之處,形成自己的設計風格,甚至引領設計風向。去年我們關注到隨著Metro設計風格的影響和iOS7的釋出,APP明顯都開始嘗試扁平化的設計語言了,除此之外,還有哪些顯性化的設計語言嶄露頭角呢?
APP總結類好文推薦:
《超讚!高大上的動效設計方法及流程總結》
《向優美互動致敬!移動端APP動畫設計總結》
在這篇文章裡,我想分享一些日益顯性的設計語言,讓人一眼就記住它的風格,有一些已經隨著優秀設計師的摸索,融入到國內移動產品設計裡了,而有一些,確實是剛剛在萌芽階段,需要更進一步的摸索和嘗試。
一、唯一主色調 | Simple color schemes
為什麼我們要定義一個介面多種顏色?僅僅用一個主色調,是不是就能夠很好的表達介面層次、重要資訊,並且能展現良好的視覺效果?事實上也正是如此,隨著iOS7的釋出,我們看到越來越多唯一主色調風格的設計,會採用簡單的色階,配套灰階來展現資訊層次,但是絕不採用更多的顏色。
卡達航空公司
卡達公司航空就是這樣的設計案例,整個介面採用粉色的主色調,從標題欄到標籤頁,從操作按鈕到提示資訊,除了黑白灰之外,全部採用粉色設計,這種簡介的的配色風格,反倒起到了很好的資訊傳達效果,也具有良好的視覺表現力,設計師在內容排版上的技巧實在是加分。
Readability採用紅色主色調設計,連提示資訊背景色、線性按鈕和圖示都採用紅色主色調,介面和LOGO也完全是一個色系的。而Vivino採用藍色主色調設計,資訊用深藍、淺藍加以區隔。Eidetic採用橙色主色調設計,其中的關鍵操作按鈕甚至整個用橙色提亮,資訊圖示也用深橙色、淺橙色來表達程度。
可以說唯一主色調設計手法,是真的做到了移動端APP的最小化(Minimal)設計,減少冗餘資訊的干擾,使使用者專注於主要資訊的獲取。
二、多彩色 | Hypercolour
而與唯一主色調形成對照關係的,就是Metro引領的多彩色風格,為什麼我一定要給我自己的產品定義一種主色調,多彩色就不能是主色調嗎?於是出現了不同頁面、不同資訊組塊採用撞色多彩色的方式來設計的風格,甚至同一個介面的區域性都可以採用多彩撞色,也產生了不少優秀的設計。
優衣庫出品的RECIPE,是一個讓人眼前一亮的設計案例,多彩色的設計風格融入到整個APP中,不論是切換標籤頁,還是在內容組塊中滾動,都會變更不同的主題色。色彩切換的時候,還會有淡入淡出的效果,讓切換變得自然而然,完全不生硬。RECIPE的番茄鍾計時器模組,會一邊計時一邊播放優美的美食背景音樂,同時切換不同的主體顏色,隨著主體顏色的變更,所有的前景文案、圖片也會變更為該色系,加上清晰度極高的美食圖片,真的是視覺+聽覺的雙重享受。RECIPE真的是2013年難得一見的優秀設計。
而Peek Calendar、EveryWeather和Harmony這三個APP,是列表多彩色的設計案例,這種列表多彩色,不知道是不是從Clear開始再度流行起立的,用鮮亮的多彩色來區分資訊,確實能起到突出的效果,視覺上極其醒目。
可是對於一些內容型的APP,也許並不適用,比如GoogleKeep的多彩卡片,確實是在內容閱讀上會起到反效果。百度雲記事本第一版設計也是多彩色的,但是後來考慮到文字記事比較多,為提供良好的文字閱讀體驗,還是把多彩色改成灰白色微質感的設計。
三、資料視覺化 | Data Visualization
至於對資訊的呈現,越來越多的APP開始嘗試資料視覺化、資訊圖表化,讓介面上不僅僅是列表,還有更多直觀的餅圖、扇形圖、折線型、柱狀圖等等豐富的表達方式。表面上看起來也不是很難的事情,但是若真想實現,背後的複雜程度也不容小窺。
Nice Weather用曲線圖來表達溫度的變化,Jawbone UP用柱狀圖來表達每天的完成情況,PICOOC用折線圖來表達每天體重、體脂的變化。移動APP利用資料視覺化,可以在更小的螢幕空間內,更立體化的展示內容。
四、卡片化 | Cards
卡片也是一種採用較多的設計語言形式,無法考究這種卡片的設計,是從Metro的tiles流行起來的,還是從Pinterest的瀑布流流行起來的。總之我們可以發現,Google的移動端產品設計已經全面卡片化了,甚至Web端也沿用了這種統一的設計語言,據說是Google搜尋的體驗負責人引領的設計語言統一升級。
luvocracy的卡片流突出資訊本身,用大圖和標題文字吸引使用者,強化了無盡瀏覽的體驗,吸引使用者一直滾動下去。Google Now的卡片則更加的定製化、個性化。有的卡片是用來做使用者教育的,有的卡片是用來告知天氣的,有的卡片是呈現聯絡人列表的,有點卡片是顯示待辦事項的。不同的卡片都遵循在一個統一寬度和樣式的卡片內,進行發揮和設計。既保證了卡片和卡片之間的獨立性,又保證了服務和服務的統一化設計。Shazam則用一種趣味的卡片樣式,呈現專輯和歌曲。
五、內容為王 | Content First
APP產品的發展,最終的路徑勢必會跟web產品一樣,突出內容,內容為王,當繁華褪盡,纖塵不染,再重新去看APP存在的意義,不外乎是給使用者提供更好的服務。與內容相比,所有的設計和包裝,都不外乎是一種表現手法,而真正具有價值的APP,一定是內容取勝的。Facebook用190億美金收購了Whatsapp,這個全是用統控制元件搭建的APP,並不是因為他的設計多出眾,而是因為他的服務足夠有價值。
Artsy的圖片瀑布流,完全沒有用到線和麵來區分資訊組塊,而就是用內容本身做排版,使用者可以更加集中注意力於圖片內容上。Prismatic利用字型排版,儘可能的內容前置,弱化圖示和操作,讓使用者更集中注意力於內容閱讀上。而MR Porter則利用商品圖片、名稱和價格直接做設計,讓使用者聚焦於商品本身。
六、圓形的運用 | Circle Design
園形是最容易讓人覺得舒服的形狀,尤其是在充滿各種方框的手機螢幕內,增加一些圓潤的形狀點綴,立刻就會增加活潑的氣息,徒增好感。一個有意思的現象是,iPhone的撥號數字鍵盤,一開始都是矩形設計,迭代到iOS7,均變成了圓形,可以說是對傳統電話的致敬,也可以說是增強了介面的柔和感。當然相應的,也要處理圓形的實際點觸區域,不要因為設計成圓形點選區域也變小了,導致點選準確率下降了,美觀度提升易用性受到了影響。
Beats Music把選擇喜歡的標籤設計成了圓形,這就比普通的列表、矩形tag的感覺要好很多,更加趣味更具探索性。Movse每天走的步數、消耗的卡路里均用圓形承載,是資料視覺化、關鍵資訊顯性化的最好案例。Tumblr則把要建立的內容的型別選擇,用蒙層+圓形選項按鈕來設計,讓選擇變得專注而明確,又不那麼死板。
七、大視野背景圖 | Bigger Vision image background
用通欄的圖片作為背景,也成為今年的一個流行趨勢,或者是作為整個APP的背景,或者是作為內容區塊的背景,既提升了視覺表現力度,又豐富了APP情感化元素。一些資訊或操作,浮動在圖片上。這種設計方法,對字型和排版設計要求更高,難度也更多,但極容易渲染出氛圍。
大視野背景圖風格也分為兩種,一種像Secret、The Whole Pantry這樣的,內容區塊中採用大視野背景圖,好處是可以利用圖片做區塊分割,難度是圖片拼接後的效果不一定好看,所以可能還需要配合描邊、留白等設計手段優化拼接。另外一種就是想Vsco、Flink、Mindie、Soundwave這樣的,全屏背景圖甚至打通狀態列,前景做內容排版、導航、操作。
好處是設計非常具有生命了,所以有朋友把這種風格也叫有計劃設計,說的就是迴歸大自然的設計手法。但風險也是很明顯的,就是前景的資訊排佈設計其實是有很大挑戰的,必經花花綠綠的背景太過於干擾注意力,導致前景的文字內容可讀性會變弱。所以需要把重要操作用明確的按鈕區隔出來,閱讀型文字跟背景圖要用明顯的反色,還是不行的話就把文字浮在半透明蒙層上,解決可讀性問題。
最後總結來說,2014年讓我覺得印象深刻的7種設計語言,唯一主色調、多彩色、資料視覺化、卡片化、內容為王、圓形的運用和大視野背景圖。其實設計風格很難有全新的,也是不斷輪迴的過程,為凸現內容APP都在往輕薄化方向設計,不過保不準哪天,又顛覆回最開始的重質感擬物話設計呢。
原文地址:elya.cc
作者:@elya妞