2016即將過去,手機上的設計美學發生了哪些變化?
點擊播放 GIF/1658K
-「刪嗎?」
-「再想想。」
公元 2016 年,人類分辨四季不再靠應季作物,而是只要打開手機,應用們個個都已經和去年大不一樣,這時你一定會感嘆時間飛轉。
Uber、Nike+ Run Club、VSCO,以及全民吐槽的 Instagram,這批用戶眾多的應用,都在今年大張旗鼓地改頭換面。然而和世間大部分改變一樣,老用戶永遠憤憤不平,但新事物需要時間來消化(或習慣),這也是我們帶來這篇推送的原因,建議你在 2016 翻篇前,重新看看它們背後的設計美學,讓世界多一分理解,也為下一次改變做好準備。
VSCO |符號美學
習慣時間:九個月
先說說 VSCO,這款擁躉眾多的圖片編輯應用今年經歷了兩次改動,年初重新設計了 Logo(也作為應用圖標)以及整套視覺體系,六月的更新又將 UI 進一步推向極簡。在視覺團隊對外公布的設計筆記中,VSCO 遵從的符號美學顯露無疑。
三種象徵
「也許會被批輕率,但採用一個完全抽象的 Logo,對 VSCO 來說絕對是場壯舉。」
兩層圓環組成的新 Logo,是代表用戶體驗的三個象徵之一(The Seal),靈感來自基因序列,寓指每人都擁有獨一無二的作品基因。另一個近似笑臉的圖標(The Face),則是由 VSCO 四個字母重構而成,象徵使用 VSCO 的用戶。The Globe則將圓形一分為四,「用戶社區」的概念藉此突顯。
兩層圓環分別代表 A-Z 與 0-9,即最基本的創意元素
VSCO 四個字母不止一種組合方式
解構再造
基於靈感核心的三種象徵,VSCO 的整套視覺由此發散。密碼般的設計語言將 Logo 包含的元素解構,重新排列成一套獨一無二的字母體系,而它們又被廣泛應用於設計細節中。
「我們在想,是不是能創造出一組體系,讓 VSCO 成為一套可視化的語言。」設計團隊在筆記中寫道。
視覺重構的過程,包括將拆分後的元素(它們通常是簡單的幾何形狀)結合到不同的體系當中,這些體系有人為的,也有自然的。
「擴張、壓縮、突變、轉化」代表了四種設計方向,也是設計團隊的試驗重點
「跌落的元素」
字體以及更多
理解重新設計的 VSCO,它在字體上花的功夫是無法繞過的。與 Letters of Sweden 創始人 G?ran S?derstr?m 合作創造的 VSCO Gothic 字體,正是整套設計的基礎。
「VSCO 不是那種隨隨便便賣身給 Facebook 的應用,它正一步步建立自己的帝國。」
「我們希望重新設計後的 VSCO 可以用視覺語言反映人類語言,既可交互替換、使用靈活,又是自然有機地產出的。」因此 VSCO Gothic、新 Logo 的形狀、元素,都被一再拆分解構,成為臉部表情,成為各種象徵意義的符號變體。不止 VSCO,在旗下其他應用與服務中,同樣的視覺也融入其中,可見「體系化」的野心。
不同場景下的字體變體
Uber | 滲透美學
習慣時間:九個月
Uber 最近一次設計變動是 11 月,伴隨界面變化和信息流的內容擴展。而今年早些時候,它其實就擺脫了創業初就沿用的 「U」 字 Logo,轉而大張旗鼓地宣傳起這個「外圓內方」的全新設計。
比特與原子
最初的 Uber Logo 由黑灰作底,中間是大寫的首字母 「U」,當時它的服務也和配色一樣直接——是一群朋友在舊金山聚集而成的私人租車服務。如今 Uber 已經遍及 68 個國家的 400 余座城市,對 Logo 的重新設計顯得合乎時機。
新 Logo 中心的方塊代表一個比特(bit)——象徵 Uber 的科技,而底下的色彩與紋路則暗含構成萬物的原子(atom),象徵 Uber 串聯起的人和事物。
Uber 也配合重新設計了字體,相比原本更聚縮,斜切與增補也加強了辨識度
可能性
「我們在不斷進化,從創始人到整個公司都是,這是重新設計的初衷。」
全程參與設計的 CEO Travis Kalanick,在一篇博文中大談了新設計包含的未來可能性,「最核心就是中間的方塊(the bit),未來其他產品的設計中,都會以此為基礎,辨識度立刻就出來了。」
左:乘客使用的 Uber / 右:司機使用的 Uber
「服務於乘客與司機的兩個 Uber 應用,區別只是底色和紋路,這會作為以後推出其他產品的設計框架。」 Uber 如今已經不止載人,他們送起了食物、貨物,以及更多潛在品類。改變的原因也在於此,好的 Logo 絕不是兩三年就需要回爐重造的,而是為未來的可能性鋪路。
點擊播放 GIF/1539K
11 月的更新中,Uber Feeds 里不止搭車信息,還有音樂、餐廳等,預示非常明顯
差異化定製
取代原本的黑白設計,新 Logo 暗含的心思複雜得多,紋路、配色都根據不同國家而作了定製。這背後是數月的調研,「建築、布料、風景、藝術、時尚以及人,都是靈感來源。」
愛爾蘭地區的圖案來自喬治亞時代建築和高地大片的綠植;墨西哥地區則啟發於經典的「墨西哥粉」,以及當地特色的瓷磚圖樣;在中國,老式建築的牆磚、窗紋構成了由四個圓交疊成的獨特紋理。
點擊播放 GIF/632K
愛爾蘭
點擊播放 GIF/677K
墨西哥
點擊播放 GIF/450K
中國
Nike+ Run Club | 色彩美學
習慣時間:三個月
八月底,在跑者中佔有率相當高的 Nike+ Running 突然大幅更新,不僅改名 Nike+ Run Club,界面、Logo、配色、功能一口氣全部大變。暫且不論功能上受到的詬病,僅從設計角度,背後的一番心思就很值得揣摩。
主色
相比 VSCO 和 Uber 完全推翻重來的 Logo 設計,Nike+ Run Club 的變化主要體現在配色上,原本深入人心且一直未變的紅色主調被熒光綠取代,老用戶紛紛表示不適應,App Store 評分甚至一度被「一星」充斥。
然而 Nike 旗下的應用,又怎麼能脫離 Nike 單看呢?熒光色本就是 Nike 產品的標誌性配色,而提到產品,今年最矚目的自然是 Apple Watch Nike+,此次大更新正是在發布 Nike 合作手錶的蘋果發布會前夕,與同樣熒光色的 Apple Watch Nike+ 統一配色,似乎是為顯示效果鋪墊。
上:Apple Watch Nike+,搭載全新配色的應用
下:舊版 Nike+ Running,平台為三星智能手錶
界面
今年前的 Nike+ Running,版本更新幅度一向細微,最大改變也只是 iOS 7 時順應了一次扁平化大潮。而如今的改變,背後是搭載平台的進化,原本只需考慮手機屏的表現,如今還需要配合運動手錶的配色、材質,改動有理可循。
而那些僅在手機上呈現的界面,設計則向極簡靠攏,為的是配合越來越多的功能類型,購物、社群、活動,內容越豐富,極簡的框架越顯重要。
Nike+ Run Club 已經不止跑步那麼簡單
Instagram | 傳承美學
習慣時間:六個月
Instagram 可能是今年遭受吐槽最多的應用,為此設計主管 Ian Spalter(就是蘋果發布會上演示自拍的黑人小哥)發布了一長篇博客,為看客梳理看似誇張的新 Logo 緣何誕生。
靈感依舊
「品牌 Logo 和產品一起建立與人的聯繫,我們當然不會只為追求革新而去改變。」
最為人熟知的一版圖標,也經歷了多次修改
Instagram 的名字源於柯達的一款便攜傻瓜相機,最初的 Instagram 圖標也是仿照寶麗來相機設計,直至大眾最熟悉的棕色相機 Logo,始終在設計上保持真切感。「我們當時探索的是如何把它變得更現代。」於是多餘的裝飾被移除,整體也逐漸明亮而扁平。
新版 Logo 的起草過程
然而「扁平化」實則讓圖標少了相機應有的質感。「因此我們開始研究用戶到底最喜歡它的哪一點。」設計團隊發現原版 Logo 中的鏡頭和彩虹是接受度最高的視覺元素,因此這兩者成了保留和重構的基礎。
兩種延續
Ian 與團隊意識到,他們不能再抓著「相機」不放,而是「需要一個用途更廣、擴展性更強的圖標」——當需要變化的時候,寫實的相機顯然太笨重了。無數版設計過後,最終的成果依然能使人聯想到相機,又為進一步的元素變化提供了前提。
如果說「鏡頭」是嫁接新舊兩版 Logo 的核心之一,那另一份不容忽視的延續就存在於色彩梯度當中了。「當我們開始想辦法延續彩虹元素,色彩的簡化是繞不過的一步,最終我們決定保留較暖的配色來中和圖形的簡易。」
取色自原版 Logo 中的彩虹,再經色彩簡化,才得出最終的顏色組合
不止 Instagram
這張對比圖應該將 Instagram 的另一番心思表露無遺了。旗下應用 Layout、Boomerang 和 Hyperlapse 自此有了與 Instagram 更統一的圖標,帶有相同的線條粗細和色彩梯度。如果說當時的用戶還無法直觀理解,那新設計推出至今,gif 應用Boomerang 的用戶已經超過 4 億的數字足以說明問題,可見設計布局之必要。
編輯: DaJuan
※單手跨11度 放空整個世界
※說說你的年度辭彙,請你邊吃邊看音樂劇!
※別鬧了,侃爺對川普才是「真愛」
※呵呵新聞:希拉里的「好夢一日游」
TAG:ELLEMEN睿士 |
※2017做到這些,你就離生活美學家不遠了
※這一場籌備了2500年的美學盛會
※175cm曾胖到180斤被群嘲,最後她卻用自己的胖子美學漂亮還擊!
※美學|2017最新家裝流行趨勢來啦!
※90後央美學生,1秒帶你進入外太空
※155cm & 130斤,應該這樣穿呢! | 美學
※175cm的她胖到180斤被群嘲,這個大碼模特卻用自己的胖子美學漂亮還擊!
※17集超18億播放,單是服裝就高達4000套,匠心打磨造就「孤芳美學」
※低調內斂的現代生活美學環球設計1384期
※入秋,30套新搭配,夠你用一個月 | 美學
※回歸自然的當代美學,有靈魂的現代簡約設計【環球設計1305期】
※設計師必去的家居美術館:150萬m2 全球生活美學綜合體【環球設計1498期】
※魅藍Note6上手體驗:1099元/驍龍625 | 科技美學首發
※100套秋天搭配,照著穿就夠美! | 美學
※科技美學測試魅族pro7的p25,跑分70259,p25遭遇瘋狂嘲諷
※2018雷克薩斯LC 500,將設計美學的理想照進位造工程的現實
※Ins圈粉370萬!胖到180斤被群嘲,這個大碼模特卻用自己的胖子美學漂亮還擊!
※當代美學與功能的完美融合,2017米蘭國際傢具展品牌搶先看環球設計1340期
※4K工資怎麼漲到20K,十大設計美學原則幫你填滿那16K