富有未來感的柏林之夜APP，是這樣設(shè)計出來的

有沒有想過，就這樣放下手頭的工作，扔掉一絲不茍的計劃，來一場說走就走的旅行？去一個沒去過的城市，聽一場正在進行的音樂會，或者去看一個從未計劃過的展覽，我想你應(yīng)該能明白，這是怎樣的感覺。被工作、生活和固定的圈子壓得喘不過氣，讓你有放棄一切，在另外一個地方重新開始的沖動。不過，這個時候，會存在一個有趣的問題：想要開始一場隨性的旅行，那么旅行的目的地會是哪里？突然之間作出出門的決定，你并不一定立刻能想到要去哪里，也不知道哪里會有有趣的事情發(fā)生。這種獨特的需求，促使我們想到設(shè)計這樣一個概念A(yù)PP，柏林之夜（Night in Berlin）。

和之前的“城市指南”網(wǎng)站一樣，柏林之夜APP 也是我們Tubik Studio 的日常設(shè)計活動 UI Fridays 的產(chǎn)物。在這個內(nèi)部活動當中，我們的設(shè)計師會獲得一個特定的需求，有一天的時間來構(gòu)思并輸出設(shè)計。這些需求之下所誕生的設(shè)計作品會擁有相對更高一些的自由度，設(shè)計師可以在應(yīng)對需求同時，注入自己的藝術(shù)創(chuàng)想。這次的設(shè)計實戰(zhàn)當中，我們的設(shè)計師將會按照一般的產(chǎn)品設(shè)計流程，來完成這樣一個非常規(guī)的移動端應(yīng)用。

任務(wù)

針對一個移動端活動類APP來設(shè)計UI/UX和相應(yīng)的動效

UI設(shè)計

在UI Fridays 的活動當中，設(shè)計師會收到和平時不一樣的設(shè)計需求和設(shè)計目標。這樣一來，參與進來的設(shè)計師就有機會創(chuàng)造出絕對獨一無二的設(shè)計。這一次，給設(shè)計師的任務(wù)是設(shè)計出一款未來的移動端應(yīng)用。設(shè)計總監(jiān)給這款應(yīng)用所設(shè)定的使用時間是2019年，他們需要為那些生活在柏林，熱衷于享受夜生活的人們，設(shè)計一款移動端應(yīng)用。明確目標之后，Tubik Studio 的設(shè)計師 Ludmila Shevchenko, Eugene Cameel 和 Olga Popova 開始在總監(jiān)Sergey Valiukh 的指導下，開始了這次的設(shè)計任務(wù)。

經(jīng)過積極的頭腦風暴之后，設(shè)計師團隊對于整個應(yīng)用的概念設(shè)計有了思路。這應(yīng)該是一個簡單直觀的應(yīng)用，將柏林城中所發(fā)生的事情，正在舉辦的活動，進行中的派對，對外開放的展覽，都一一呈現(xiàn)出來，讓喜歡社交并且樂于參與到最新的活動當中的用戶了解它們。由于應(yīng)用的目標用戶是那些臨時決定、說走就走的年輕人，應(yīng)用中的活動列表被設(shè)定為僅在特定時間顯示，或者僅顯示當天的活動。考慮到這個應(yīng)用是為未來的用戶而設(shè)計，它一定是要原創(chuàng)的，并且足夠突出。接下來，讓我們看看設(shè)計團隊是怎么做的。

作為引導新用戶的第一屏，設(shè)計師展現(xiàn)的是展示新的活動列表的倒計時。漸變的色彩呈現(xiàn)出夜晚獨有的氣息，營造出漸入佳境的氛圍。為了強調(diào)整個柏林之夜的特色，背景插畫采用的是柏林市中心著名的電視塔 Fernsehturm，整體色調(diào)和夜晚霓虹燈下的城市相一致，整個設(shè)計看起來都非常的實在。應(yīng)用的名稱位于屏幕的左下方，為了保持整個應(yīng)用的整潔，許多其他的功能都隱藏在左上角的漢堡菜單當中，讓用戶更容易注意到倒計時。

接下來的，是活動列表頁，這個界面為用戶展示了即將開始的柏林夜晚的各色活動。每個活動和事件都是依照卡片來進行組織，用戶可以垂直滾動瀏覽。每個卡片都會承載各種活動的關(guān)鍵細節(jié)：名稱、內(nèi)容、開始時間以及相應(yīng)的主題圖像。有意思的地方在于，用戶還可以在詳細信息中找到優(yōu)惠信息以及其他有用的內(nèi)容。

當用戶點擊事件卡片的時候，卡片擴展至全屏。這個時候，用戶能夠看到整個活動的全貌，設(shè)計師在設(shè)計這個界面的時候，靈感源自于畫廊的藝術(shù)展覽的海報設(shè)計，藝術(shù)家和展覽的名稱位于頁面的中心，詳細信息位于主題內(nèi)容的下方，活動類型標識在右上角，左上角是返回按鈕。背景的圖片設(shè)計則是源自于藝術(shù)家的設(shè)計作品，這樣也能讓用戶更加快速地了解相應(yīng)的藝術(shù)風格。整個信息的呈現(xiàn)讓用戶可以快速地了解活動的特征，并且可以快速地決定要不要參與進來。

動效設(shè)計

當整個靜態(tài)的視覺稿設(shè)計完成之后，動效設(shè)計師 Kirill Erokhin 開始為它制作動效。

這是倒計時的主界面，漸變的背景色彩營造出深夜光影變化的氛圍。

這是活動列表頁的交互動態(tài)效果圖。用戶點擊被垂直組織的卡片，點擊開之后可以查看更多的詳細內(nèi)容。屏幕左上方的按鈕是返回按鈕。

結(jié)語

這樣的設(shè)計活動，讓我們的設(shè)計人員可以在獨特的需求之下，有創(chuàng)造性地制作具有特色的獨特設(shè)計作品。活動本身激發(fā)了參與者的創(chuàng)造力，在實戰(zhàn)中打磨設(shè)計技巧。

【用戶體驗設(shè)計有哪些技巧】

1. 《科普好文！作為UX設(shè)計師你需要知道的52個專業(yè)術(shù)語》
2. 《想讓設(shè)計更走心？你得學會用共情來驅(qū)動設(shè)計》
3. 《跨屏幕的響應(yīng)式設(shè)計，你需要這樣來設(shè)計用戶體驗》
4. 《想轉(zhuǎn)型成為用戶體驗設(shè)計師，只會畫圖遠不夠》

原文地址：uxplanet
原文作者：Tubik Studio
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導航，設(shè)計師必備：http://hao.uisdc.com