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

相关推荐

  • 超越触控的手势交互

    手势通常被认为是与屏幕和物体交互的自然方式,我们会谈论在移动设备屏幕上双指缩放地图,还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗?

    2016-07-18
  • 交互式网站UI设计指南

      Web开发社区有着大量的交互式设计轻松解决方案。虽然现在大多数网站都能够做到交互性了,但是我们需要不断向前、创新。我们很容易将注意力集中到编码方面,但是有时候不同屏幕尺寸的实际设计考虑却往往被忽视。 …

    2014-12-23
  • 设计并不仅仅关乎视觉和感受,它要呈现的是事物运作的规律。

    动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过,动效的目标并不是单纯的娱乐用户,而是帮助用户了解交互的效果和界面中发生的变化,让用户更为有效地使用你的APP。

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

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

    2015-08-19
  • 交互设计案例视频展示

    一款APP的交互原型演示,有能力的话自己动手做个视频吧! [hana-flv-player video=" http://jhxt.org/wp-content/uploads/2015/07/ixdshow.flv" width="640" height="auto" description="Ta APP 交互简介" player="…

    2015-07-01
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 微信网页设计样式库发布

    微信网页设计样式库发布 为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。 该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dial…

    2016-01-24
  • Coding Nap:迭代式体感交互设计分享

    CodingNap是为程序员设计的一款办公室睡眠闹钟。程序员是一个不分昼夜工作的群体,十分需要短暂而高质量的睡眠。当程序员十分疲惫需要休息时,按下Coding Nap的按钮,它便为程序员设定了9分钟的睡眠之旅。同时Codin…

    2015-11-18
  • 移动端搜索功能研究

    搜索功能无论在web端还是移动端,都是产品中十分重要的功能。文章主要从用户体验和产品功能、策略角度来分析,提出一些对应的设计方法。 搜索能够帮助用户快速精确找到想要的结果,其中两个重要目标是提高搜索结果…

    2016-10-28