最美APP—视觉如何提升产品价值|UED流程深度剖析

用户头像
北京/平面设计师/10年前/81589浏览
最美APP—视觉如何提升产品价值|UED流程深度剖析
玩吧是一款游戏社交APP,在过去的一年多凭借优秀的功能架构和游戏创新已经获得了众多粉丝,实现盈利。2015年玩吧希望突破下一个瓶颈——交互与UI设计。经过36氪的推介,玩吧邀请到了北京灵鹿设计团队,展开了一次深入的UED设计之旅,玩吧从游戏功能阶段到UED完成了华丽的变身!
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA3NzY=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDAzMDg=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
灵鹿设计 X 玩吧APP UED设计案例分享与解析

项目背景
玩吧是一款游戏社交APP,在过去的一年多凭借优秀的功能架构和游戏创新已经获得了众多粉丝,实现盈利。2015年玩吧希望突破下一个瓶颈——交互与UI设计。经过36氪的推介,玩吧邀请到了北京灵鹿设计团队,展开了一次深入的UED设计之旅,玩吧从游戏功能阶段到UED完成了华丽的变身!

设计解析
1、设计定位
作为一款游戏社交APP,兼具游戏的趣味场景和社交的沟通与分享。我们应该以怎样的视觉风格切入呢?这是我们面对产品第一个思考的问题。我们并没有单方面从行业竞品分析入手,而是绘制出了一个社交APP与游戏APP的矩阵,横轴为“社交性-游戏性”,纵轴为“个性(试听沉浸式)-大众(简洁)”把具有视觉代表性的社交app和游戏app进行罗列分布。最终根据玩吧产品定位确定出了玩吧的视觉定位。
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDAzNDA=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
其实产品内容与视觉风格息息相关:
A、英雄联盟表达了一个世界,极具角色和故事性,整个视觉以3D的CG插画风格为主,以更好的让用户深度沉浸入游戏中;泡泡卡丁车表达了一个简单的故事,相对英雄联盟的“一个世界”,泡泡卡丁车的游戏情节相对简单,因此视觉上也清爽明快很多,同样3D的风格,但没有采用CG插画风格,而是抽象的卡通风格;再看“开心消消乐”的游戏就基本只在一个界面中就完成了,没有纵深的游戏故事,因此视觉上更加简练。
B 、再看偏社交一些的APP。same视觉极具趣味性;nice以时尚品味的视觉呈现;微信以大众的简洁风格以应对更多其他产品的接入和极其大众的用户(小学生-老人)喜好。
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDAzNDQ=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
从以上的产品特征到视觉风格,我们能够看到视觉从沉浸式的CG插画-简洁的卡通-扁平的趣味表达-时尚的气质呈现-简洁大众,视觉的个性化一直在递减,同时我们也看到产品特征的游戏娱乐性也在递减。而根据玩吧的游戏内容,我们的位置和视觉风格就显而易见了,我们的视觉风格确定为:趣味个性化的扁平设计风格。

2、设计挑战
A、原app的界面设计为普通模版的堆砌,没有任何产品自身个性和趣味可言。因此我们需要找到一个鲜明的图形符号,以此代表玩吧,并把此符号延展为一个系统的视觉元素,贯穿于整个产品和游戏环节当中。让用户对产品产生独特的印记和喜好。
B、产品界面里有两个性质差别比较大的板块:游戏板块和社交板块。我们怎么处理好两个板块自身的独特性和作为同一个产品的共性,是我们视觉上的一个挑战。

3、产品进阶
UED的设计是一件跟着产品发展阶段不断变换任务方向的事情:
A、在产品初期,UED需要为功能服务,以完美的交互和视觉层级的引导,让用户易于操作,完成任务;
B、在产品发展期,我们需要慢慢建立自己的产品形象,以产品气质和用户品味为基准。因此我们的视觉和交互都需要独具特质,以让我们的产品脱颖而出,优化用户的体验,让用户记住并喜爱上产品;
C、在产品成熟期,我们需要设计的体验就不应该只仅仅局限在产品环节了,而品牌的全触点分析和设计成为了我们的设计主方向。我们需要从品牌整体入手,塑造完整的品牌视觉体验系统。
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDAzNjQ=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
回到玩吧产品,我们产品目前处于的是第二个阶段,因此我们除了解决第二阶段的问题以外,还为玩吧分析在下一个阶段我们应该做好的准备和方向。

好了,废话不多说,上图。
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDI1MDQ=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA0Mjg=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA0ODA=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA1MDQ=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA1MTI=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA1MTY=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA1MjA=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA1MjQ=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA1Mjg=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA1MzI=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
最美APP—视觉如何提升产品价值|UED流程深度剖析(图ZNDUwNDA1MzY=) - APP界面 - 站酷设计师上游彭林原创素材 - 站酷ZCOOL
收藏
1582
|
举报
|
1483
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
APP界面/空状态页面
我的钱包-UI界面设计-app
高级感深色极光流体渐变背景 科技感UI界面素材
地图图标
八角
消息图标
订单页面图标
松茸汤
手机,扫码,支付,手机付款,检查,插画 , 扁平 , 引导页,开屏页,开机动画 , app , 可爱风格 , 漂亮插画 , 界面 , 山 , 月亮 , 风景插画,互联网 , 互联网插画 , 商务 , 项目 ,  网页插画 ,
黑暗森林法则
户外旅行飞机情侣假日出行
以笔为剑,纵情挥洒的东方气韵|御林铭心 颜体
APP界面/暂无网络页面/成功失败页面
2.5d插画
APP界面//暂无数据页面/暂无收藏页面
巧克力
户外旅行女孩行李地图出发
手机交互概念素材
户外旅行驴友探险社媒照片
秋葵
户外旅行露营野外体验玩乐
App界面设计/UI设计展板
坚果
积分图标
app界面插画(欢迎界面)
你可能喜欢
相关收藏夹
ui
ui
ui
ui
ui
24
大家都在看
登录注册