本文的分享是針對一個移動端活動類APP來設(shè)計UI/UX和相應(yīng)的動效。enjoy~

有沒有想過，就這樣放下手頭的工作，扔掉一絲不茍的計劃，來一場說走就走的旅行？去一個沒去過的城市，聽一場正在進(jìn)行的音樂會，或者去看一個從未計劃過的展覽，我想你應(yīng)該能明白，這是怎樣的感覺。被工作、生活和固定的圈子壓得喘不過氣，讓你有放棄一切，在另外一個地方重新開始的沖動。

不過，這個時候，會存在一個有趣的問題：想要開始一場隨性的旅行，那么旅行的目的地會是哪里？突然之間作出出門的決定，你并不一定立刻能想到要去哪里，也不知道哪里會有有趣的事情發(fā)生。這種獨(dú)特的需求，促使我們想到設(shè)計這樣一個概念A(yù)PP，柏林之夜（Night in Berlin）。

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

任務(wù)

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

UI設(shè)計

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

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

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

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

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

動效設(shè)計

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

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

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

結(jié)語

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

原文作者：Tubik Studio

原文地址：uxplanet

譯者：@陳子木

譯文地址：優(yōu)設(shè)網(wǎng)

本文由 @陳子木?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議