起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識富有未來感的柏林之夜APP，是這樣設計出來的
本文的分享是針對一個移動端活動類APP來設計UI/UX和相應的動效。enjoy~
有沒有想過，就這樣放下手頭的工作，扔掉一絲不茍的計劃，來一場說走就走的旅行？去一個沒去過的城市，聽一場正在進行的音樂會，或者去看一個從未計劃過的展覽，我想你應該能明白，這是怎樣的感覺。被工作、生活和固定的圈子壓得喘不過氣，讓你有放棄一切，在另外一個地方重新開始的沖動。
不過，這個時候，會存在一個有趣的問題：想要開始一場隨性的旅行，那么旅行的目的地會是哪里？突然之間作出出門的決定，你并不一定立刻能想到要去哪里，也不知道哪里會有有趣的事情發生。這種獨特的需求，促使我們想到設計這樣一個概念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 開始為它制作動效。
這是倒計時的主界面，漸變的背景色彩營造出深夜光影變化的氛圍。
這是活動列表頁的交互動態效果圖。用戶點擊被垂直組織的卡片，點擊開之后可以查看更多的詳細內容。屏幕左上方的按鈕是返回按鈕。
結語
這樣的設計活動，讓我們的設計人員可以在獨特的需求之下，有創造性地制作具有特色的獨特設計作品。活動本身激發了參與者的創造力，在實戰中打磨設計技巧。
原文作者：Tubik Studio
原文地址：uxplanet
譯者：@陳子木
譯文地址：優設網
本文由 @陳子木?授權發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
可以下載么？