Apple watch端视觉设计

cyin

2015-12-04

原创文章

418

1

3

经验分类:经验/观点/原创文章

Apple watch已然高调的进入了我们的视野,面对全新的设备类型,我们大多数人都没有在实际生活与工作情景中进行体验,一个全新的平台,应该怎样从产品和设计的角度去探索和理解?借助这次qq彩票watch端的设计体验心得,希望能为大家带来一些探索方向及思考框架! 


Apple watch特性简要介绍

Apple watch是面向穿戴而设计的,且运作离不开iphone,抬起手腕的动作可以显示时间以及重要的通知信息。在Apple watch上我们可以发现几个比较明显的特性。

由于是在手腕上且受显示面积的限制,又只是iPhone应用的补充,用户停留的时间更短,所以整体的设计都非常轻量化,信息的获取与移除都非常的快捷,所以在设计app应用时要符合使用者的体验情景,注重快速简洁的交互流程。

在色彩上我们可以看到整体的用色以及品牌的传播都极具个性且非常的简洁。色彩运用鲜明活泼,由于整个表盘是以黑色调为主,且软硬件的边界都被虚化了,统一了,所以高对比度的色彩能在有限的空间里更加突出,可读性与认知性更强烈,更凸显个人色彩与时尚感。


QQ彩票为了覆盖新的苹果设备,增强用户粘性且适配ios新功能,提升applestroe渠道曝光,急需watch端的应用设计,这里有幸负责这次的设计,那么下面围绕设计的展开与思路进行解析。


首先,对Apple watch上已有应用的竞品500W、网易彩票进行分析。


1.启动页设计 

500W彩票的启动页设计,logo与广告语的简单静态呈现,而网易彩票则没有启动页,直接进入主界面。启动页的设计是一个重要的入口,它有利于品牌传播以及加强用户对品牌认知度。

Image title

2.主界面内容与设计展示 
500W  内容呈现上主要以足球、篮球以及个人关注为主,分3个板块。视觉呈现也主要以列表的形式。由于内容相对比较多,在较小的区域内要显示赛事时间及球队信息,为了达到设计的规整化,这是一个不错的选择,但在一个有限的区域内要纵横向展示信息,会有内容过于拥挤以及无法完全显示完字符等问题。

Image title

Image title

3.二级页面
 500W  在点击赛事列表进入赛事比分详情页面,在内容的陈列上依旧是三大块的横向展示形式,球队名称加上球队图标的上下展示以及中间占位过大的比分时间信息,在内容的陈列上还是有过于拥挤,且信息展示不全。足球篮球的板块设计在内容一样的前提下,版式没有统一。

Image title


网易彩票  网易彩票则没有二级页面,或许在产品的定位上只是单纯的彩票内容消息提醒。 
 
以上,就是对竞品主要板块的详细分析,提炼优劣势,接下来就是确定设计方向与思路的阶段了,由于屏幕尺寸更小,又始终佩戴在手腕上,交互方式又有所不同,要在这个新的设备上创造一个美观、舒适的体验,需要新的设计方法且要拉开与竞品之间的差异化。
在有竞品分析的基础上,找到设计的突破点,需要解决以下几个问题:
1.如何带出QQ彩票的品牌标识,使之VI更鲜明,与竞品拉开距离?
2.在彩票双色球大乐斗板块是否还有更好的设计形式能让产品特性更加鲜明,彩票氛围更加浓厚?
3.在竞足与竞篮模块有没有除了简单的底色列表形式之外更能体现其运动竞足彩的特点?
4.是否有新的表现形式,使之更加活泼动感?

带着目的开展设计以及在设计中要规避的问题 :
QQ彩票品牌传递:
市场上app如此之多,竞品也不在少数,那么如何增强品牌辨识度,拉开与竞品之间的差异化是我们要去做的事情。上文的竞品分析也有这块的内容,500W是简单的静态logo传递,网易彩票甚至没有logo启动页面,那么,qq彩票应该要如何加强品牌辨识度呢?还是也只简单的出现logo就可以了?
Apple watch整体的ui设计个性鲜明,用色活泼,高对比度色系,在黑色底盘上尤为突出,加之软硬件边缘黑色调的统一,会使要出现的内容更加突出,所以logo的呈现方式在视觉上应该与其对齐。

根据彩票APP ui上的视觉风格进行选色,确定4个板块的色彩方向,用色上也以高对比度为主,与设备风格一致,以达到整体视觉的统一性! 

Image title



启动页设计
以球体作为主要的方向进行延展,4个颜色的小球意为4个板块,加强用户对各板块的视觉识别性,以动画的形式去呈现,跳动的球体就像是抽奖机里滚动的小球,使彩票特性更加明显,拉开与竞品只展示静态logo的距离

Image title


大乐透、双色球板块设计
一次设计尝试与方向探索:
优势:列表的形式阅读起来相对清晰,也比较简单,与黑色底盘融合比较和谐。
劣势:与竞品差异不大,特色不明显,设计过于简单。
Image title

二次设计尝试和风格定位:
在一次设计的基础上取长补短,如何优化视觉表现、让彩票氛围更重,设计层次更多是要解决的问题。
优势:主次关系较上一版明显,氛围也相对比较足。
劣势:视觉切割相对严重
Image title

找准方向定稿设计:
在比较合理的设计方案中选择一版,进行优化,解决氛围的问题以及视觉上的切割,最重要的是让体验更加完整如何在一屏的情况下用户能快速阅读主要信息而不需要下拉,那就需将产品需求次重点进行合理布局。

Image title

足球篮球板块设计
足球、篮球主要以比分列表的展示形式为主,在信息量大且空间有限等条件限制下,如何能打破打破常规,突破性设计是主要解决的问题!
方向尝试:尝试几种设计形式,简单比分字体突出方向、比分模块色调强化方向
方向定位:圆形的比分板是个不错的方向,形状与球型相似,是设计的突破口,怎样与球形巧妙结合是既能渲染氛围又能增添设计趣味性的关键。
Image title设计定稿:最终选择圆形比分板,再加以优化,通过动画翻转的形式带出比分板,增加设计趣味且拉大与竞品的差距。

Image title


竞足、竞篮比分列表设计
方向尝试:比分列表信息量大,且有球队名字符长短不可控等问题,如何规整设计,保持版面视觉统一,是主要解决的问题
优势:比分信息突出
劣势:时间线相对弱化,球队名字符长短不可控问题没有解决

Image title

设计定稿:
在与产品反复沟通后,再次整理信息次重点,强调时间线、相对削弱比分,重新合理布局,文字字符不可控问题得到合理的解决。

Image title

设计完整呈现

Image title



以上是qq彩票在applewatch上视觉设计的推导过程,对于全新的设备,在设计上也是处于探索和尝试的阶段~不足之处欢迎大家交流指正,总之,是一次充满挑战有非常有趣的设计经验!


全部评论:1

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消