设计师可以在应对需求同时,注入自己的艺术创想,按照一般的产品设计流程,来完成这样一个非常规的移动端应用。今天小编主要给大家分享移动端活动界面ui设计,希望对你们有帮助!
任务
针对一个移动端活动类APP来设计ui和相应的动效。
ui设计
在ui Fridays的活动中,设计师需要为那些生活在柏林、热衷于享受夜生活的人设计一款移动端应用程序。
这是一个简单直观的应用程序,展示柏林发生的所有事件、正在举行的活动、正在进行的聚会以及对外开放的展览,以便那些喜欢社交和参与最新活动的用户能够了解到它们。因为应用程序的目标用户是那些临时做决定并离开的年轻人,所以应用程序中的活动列表被设定为仅在特定时间显示,或者仅显示一天中的活动。考虑到这个应用程序是为将来的用户设计的,所以必须足够新颖和优秀。
如上所述,指导新用户的第一屏,设计师会显示新活动列表的倒计时。渐变的颜色在夜晚呈现出独特的气氛,并创造出渐入佳境的气氛。为了强调整个柏林夜晚的特点,背景插图使用了柏林市中心著名的电视塔Fernsehturm。整体色调与夜晚霓虹灯下的城市一致。整个设计看起来非常真实。应用程序的名称位于屏幕的左下方。为了保持整个应用程序整洁,左上角的汉堡包菜单中隐藏了许多功能,使用户更容易注意到倒计时。
接下来是活动列表页面,显示了柏林之夜将要开始的各种活动,每个活动和事件都是根据卡片进行组织的,用户可以垂直滚动浏览。每张卡片将承载各种活动的关键细节:名称、内容、开始时间和相应的主题图像。有趣的是,用户也可以在详细信息中找到优惠信息和其它有用的内容。
当用户点击事件卡片时,该卡片会扩展到全屏,此时,用户可以看到整个活动的画面。设计这个界面时,设计师受到画廊艺术展的海报设计启发,艺术家和展览的名称位于页面的中心,详细信息位于主题内容的下方,活动类型标记在右上角,返回按钮位于左上角。图片设计的背景来源于艺术家的设计作品,这样用户可以更快地理解相应的艺术风格。整个信息的呈现使用户能够快速理解活动的特征,并快速决定是否参与。
动效设计
在整个静态视觉手稿的设计完成后,动效设计师基里尔·埃罗钦开始为其制作动效。
倒计时的主要界面采用渐变的背景颜色,营造了夜晚光影变化的氛围。
活动列表页面的交互式动态效果图,用户可以点击垂直组织的卡片,查看更多详细信息,屏幕左上角的按钮是返回按钮。