富有未來感的柏林之夜APP,是這樣設計出來的
有沒有想過,就這樣放下手頭的工作,扔掉一絲不苟的計劃,來一場說走就走的旅行?去一個沒去過的城市,聽一場正在進行的音樂會,或者去看一個從未計划過的展覽,我想你應該能明白,這是怎樣的感覺。被工作、生活和固定的圈子壓得喘不過氣,讓你有放棄一切,在另外一個地方重新開始的衝動。不過,這個時候,會存在一個有趣的問題:想要開始一場隨性的旅行,那麼旅行的目的地會是哪裡?突然之間作出出門的決定,你並不一定立刻能想到要去哪裡,也不知道哪裡會有有趣的事情發生。這種獨特的需求,促使我們想到設計這樣一個概念APP,柏林之夜(Night in Berlin)。
和之前的「城市指南」網站一樣,柏林之夜APP 也是我們Tubik Studio 的日常設計活動 UI Fridays 的產物。在這個內部活動當中,我們的設計師會獲得一個特定的需求,有一天的時間來構思並輸出設計。這些需求之下所誕生的設計作品會擁有相對更高一些的自由度,設計師可以在應對需求同時,注入自己的藝術創想。這次的設計實戰當中,我們的設計師將會按照一般的產品設計流程,來完成這樣一個非常規的移動端應用。
任務
針對一個移動端活動類APP來設計UI/UX和相應的動效
UI設計
在UI Fridays 的活動當中,設計師會收到和平時不一樣的設計需求和設計目標。這樣一來,參與進來的設計師就有機會創造出絕對獨一無二的設計。這一次,給設計師的任務是設計出一款未來的移動端應用。設計總監給這款應用所設定的使用時間是2019年,他們需要為那些生活在柏林,熱衷於享受夜生活的人們,設計一款移動端應用。明確目標之後,Tubik Studio 的設計師 Ludmila Shevchenko, Eugene Cameel 和 Olga Popova 開始在總監Sergey Valiukh 的指導下,開始了這次的設計任務。
經過積極的頭腦風暴之後,設計師團隊對於整個應用的概念設計有了思路。這應該是一個簡單直觀的應用,將柏林城中所發生的事情,正在舉辦的活動,進行中的派對,對外開放的展覽,都一一呈現出來,讓喜歡社交並且樂於參與到最新的活動當中的用戶了解它們。由於應用的目標用戶是那些臨時決定、說走就走的年輕人,應用中的活動列表被設定為僅在特定時間顯示,或者僅顯示當天的活動。考慮到這個應用是為未來的用戶而設計,它一定是要原創的,並且足夠突出。接下來,讓我們看看設計團隊是怎麼做的。
作為引導新用戶的第一屏,設計師展現的是展示新的活動列表的倒計時。漸變的色彩呈現出夜晚獨有的氣息,營造出漸入佳境的氛圍。為了強調整個柏林之夜的特色,背景插畫採用的是柏林市中心著名的電視塔 Fernsehturm,整體色調和夜晚霓虹燈下的城市相一致,整個設計看起來都非常的實在。應用的名稱位於屏幕的左下方,為了保持整個應用的整潔,許多其他的功能都隱藏在左上角的漢堡菜單當中,讓用戶更容易注意到倒計時。
接下來的,是活動列表頁,這個界面為用戶展示了即將開始的柏林夜晚的各色活動。每個活動和事件都是依照卡片來進行組織,用戶可以垂直滾動瀏覽。每個卡片都會承載各種活動的關鍵細節:名稱、內容、開始時間以及相應的主題圖像。有意思的地方在於,用戶還可以在詳細信息中找到優惠信息以及其他有用的內容。
當用戶點擊事件卡片的時候,卡片擴展至全屏。這個時候,用戶能夠看到整個活動的全貌,設計師在設計這個界面的時候,靈感源自於畫廊的藝術展覽的海報設計,藝術家和展覽的名稱位於頁面的中心,詳細信息位於主題內容的下方,活動類型標識在右上角,左上角是返回按鈕。背景的圖片設計則是源自於藝術家的設計作品,這樣也能讓用戶更加快速地了解相應的藝術風格。整個信息的呈現讓用戶可以快速地了解活動的特徵,並且可以快速地決定要不要參與進來。
動效設計
當整個靜態的視覺稿設計完成之後,動效設計師 Kirill Erokhin 開始為它製作動效。
GIF/6162K
這是倒計時的主界面,漸變的背景色彩營造出深夜光影變化的氛圍。
GIF/7260K
這是活動列表頁的交互動態效果圖。用戶點擊被垂直組織的卡片,點擊開之後可以查看更多的詳細內容。屏幕左上方的按鈕是返回按鈕。
結語
這樣的設計活動,讓我們的設計人員可以在獨特的需求之下,有創造性地製作具有特色的獨特設計作品。活動本身激發了參與者的創造力,在實戰中打磨設計技巧。
點擊展開全文


※神器兩連發!谷歌出品的SKETCH2AE 視覺化查看網頁樣式及標註的
※偏執的工匠:寫給每一個正在奮鬥的設計師朋友們
※這10項技能,應該是每個UX設計師的基本功
※又一個大殺器!你們為什麼不能對設計師好點?
TAG:搖星 |
※這樣牛X的設計,一般人是想不出來的!
※原來這樣,才是最出色的珠寶設計
※今年最流行的「故障效果」原來是這樣設計出來的,只需幾步
※疑似新奧特曼的誕生,這個設計有點前衛,還是可以期待一下
※這是我見過設計最巧妙的智能手錶,沒有之一
※狗血的奇葩設計,簡直不是人設計出來的!
※這些大牌的設計,我真的以為是假貨……
※原來,豪華而不感到壓迫的酒店是這樣設計的啊
※看完這些戶型,你就知道了,設計師的設計,都是中看不中用的
※這些傘的設計都是怎麼想出來的?看起來很有趣為什麼幾乎沒人用?
※他是蘇聯輕武器的巨頭,設計的這款步槍我國曾仿製,現在還在用
※一直以來都存在的錯誤,至今你還在犯,航母戰機原來要這樣設計
※能做出這麼「野蠻」的設計,我也是服氣的……
※鹿晗的時尚真是被看不懂,這樣的毛衣也會有人設計
※未來幾年UI設計的發展方向是怎樣的呢?
※秋瓷炫遇上桂綸鎂,都是大v設計,網友:一個撐爆,一個看不出
※世界上最有錢的車長得什麼樣子?全部都是柵欄的設計,看來這樣的設計太六了
※早春穿上這麼有設計感的衛衣,真是潮爆了!活脫脫就是一個美少女
※頭一次見家裡這樣裝門檻石的,佩服他們的設計,真是太有才了!
※看完這些一流的設計,再去買燈具,突然發現品味降不下來了