Apple Watch应用设计案例-QQ空间

一、初期方案
设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。

QQkongjian1

二、竞品分析
我们对Instagram和Twitter进行了研究,整体上是手机端的简化版,设计风格并无太多的亮点。

QQkongjian2

基于上述分析,我们得出如下结论:
1.手表的尺寸较小,展示内容有所局限,并不适合长时间查看。
2.繁杂的内容不适合在手表上阅读,手表更多的是作为一种提醒的作用。
3. 手表上的操作必须足够简单并且快速。

QQkongjian3

三、空间用户的使用场景
1.小白打开QQ空间Apple Watch版查看一天的好友动态,给好友们点赞和回复大表情,并且可以收到特别关心好友的动态提醒。

QQkongjian4

2. 小白每天在手表上使用QQ空间AppleWatch版进行签到。

QQkongjian5

通过分析手表操作的特性,发现空间手机版中的“签到”功能更符合用户在手表上的使用习惯。

为用户打造一种“轻松、简单、趣味化”的签到模式,更加符合空间用户的使用场景。

四、确定设计方向
我们分析了空间手机版签到的设计风格和Apple Watch原生的UI风格。空间签到:卡通低龄 /图形复杂/静态单调,因此我们需要寻找一个新的突破点,使之更符合Apple Watch的风格设计,而非简单的移植。

QQkongjian6

五、形随意动

  • 简化图形,提炼寓意

化繁为简,放弃手机端的插画风格,采用图形化的表达。图标更能明确表达意思,可帮助用户在使用快速理解不同签到含义,并且符合手表“简单”的要求。

QQkongjian7

  • 异曲同工,延伸与升华

提取元素,从而升华签到的氛围渲染。例如:星座签结合了星盘;天气签结合了古代天文台的元素;黄历签则融入八卦、日晷、12天干地支等元素。利用传统的元素融入现代化的设计风格,升华签到的深层次含义。

QQkongjian8

  • 寓意于色,表达情绪

每种颜色代表着不同的情绪或性格,每个星座拥有不同的性格。我们用不同的颜色来表达不同星座的特征,保证来每个星座的独立性和避免设计过于单调。

qqkongjian9

  • 动之以情

趣味动画,丰富体验的趣味性与层级感,渲染内容本身所蕴含的意义,提升用户使用的愉悦感。

qqkongjian10

六、其他
首页我们设计了一个笑脸来迎接你一天的心情,在首页滑动滚轮可以看到你在好友中的排名,点击即可炫耀。
qqkongjian11

为了增强用户使用Apple Watch签到的特权感,我们全新优化了签到展示的图片,并且带有特权标识。

qqkongjian12

不同的天气除了图标的区别之外,背景也会有差异化的表现,旨在渲染氛围,以提升视觉效果的沉浸感。

qqkongjian13

七、小结
我们通过图形、颜色、动画几个层面来不断优化与打磨设计方案,与此同时,在体验的层面也力求打造一种轻松、简单以及趣味化的签到模式,通过富有品质感的细节来提升设计的吸引力。

转自:腾讯ISUX 

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/7131/

(0)
TinadminTinadmin
上一篇 2015-07-15 08:44
下一篇 2015-07-15

相关推荐

  • 步步为营——记我们是如何将Facebook背后的图标设计的更美好

      Facebook 总部是一个神奇的地方,小吃是免费的,阳光永远明媚,每个人都满脑子好点子。来这里的第一周,我碰到的每一个人都努力让这个世界更美好。同时,我也预见到了,自己将会无比轻松得适应并融入这样的…

    2015-08-19
  • 你热衷艺术,可你知道 2017 年设计的风向标吗?

    设计在生活中无处不在,而设计的趋势也随着时间的推移不断受到来自媒体、技术、时尚等方面的影响。 一个好的设计被认可的周期也许很长,但一个设计趋势流行的生命周期大多不会超过 1-2 年。下面这篇文章整理自著名…

    2017-03-06
  • 泛滥的移动产品设计模式

    如果你是一名移动产品设计师,你可能会同意这样的观点:参考借鉴别人的设计不算抄袭。这不仅是最佳的练习方法,也是一种设计模式,而且还符合业界主流的设计趋势,同时还能确保在用户熟悉的模式下来创建可用性的界…

    2016-10-18
  • 玩转中性灰 轻松调颜色

    数码图像是由红绿蓝(RGB)3种基本颜色构成的;当其中某个颜色数值偏高就会造成偏色现象,这是每个摄影师都会遇到的坏运气。大多数人只凭肉眼来判断、调整图像的偏色问题,其实这是不准确的。对此,小编本期为你着…

    2016-06-21
  • 2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”!

    一时兴起,统计2015年以来新发布的,或是从2015年开始快速崛起的,日活稳定在20万+的APP,一共找到了16款。以下数据为粗暴的估算,不准确很正常,不准确憋找我! ┃视频类 熊猫TV,视频直播平台,CEO王思聪,200万量…

    2016-04-08
  • 深度解析!天猫双11宇宙 H5 的惊艳效果是如何实现的?

    来源:H5广告资讯站 作者:小呆 原创文章,转载请联系本人! 记得在上个月小站推荐万达的第一支一镜到底H5作品时,就有用户曾放下狠话:“你就等着我们的一镜到底吧!” 因为留言的人是圈内的技术大神,自然也就引起…

    2016-10-25
  • 统一图标大小的方法分享

    最近在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。调了很久,也咨询了一些设计师朋友,最后在谷歌的Material Design找到了一种规定的方式,特此来记录一下…

    2016-09-05
  • 如何实现一份设计稿支持多个尺寸?

    移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是…

    2015-11-17
  • 移动端界面中的版式设计原理

    “我总觉得页面不太好看但是我又说不出来”,“我不懂设计,但是我就是觉得不协调”,“你觉得这好看?你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好…

    2016-01-08
  • 【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例

    本次分享给大家展现依然是高保真效果的原型,上一次展现的是iPad版本的,这次是iPhone端版本的原型,和上次一样,我们依然以国际第一时尚品牌VOGUE为例:iPhone端的效果比iPad更复杂,难度更高,我们要做的是抽屉效…

    2016-02-26