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-01-29
  • 从「令人发指」的苹果来看所谓的细节设计

    什么是细节设计?在讨论这个问题前先来看个案例。如果你手里恰巧有 iPhone 4s / 5 / 5s,请随便打开一个可以调出虚拟键盘的应用「比如短信」。注意观察键盘的最后一行,相信看这篇文章的人都是中文用户,所以在你的…

    IxD案例 2014-10-10
  • 未来的汽车UI将惊艳世界

    今天多数汽车UI的设计,由于不直观、过时和缺乏美学表现力,一直饱受诟病。其他行业都将设计的品质奉为标准,汽车生产商在这方面则动作迟缓。所以,许多设计师抓住了这个机会,思考未来的汽车界面会如何改变我们的…

    2016-10-18
  • 淘宝天猫个性化推荐技术演进史

    小编说:个性化推荐技术直面用户,可以说是站在最前线的那个。如今,从用户打开手机淘宝客户端(简称“手淘”)或是手机天猫客户端(简称“猫客”)的那一刻起,个性化推荐技术就已经启动,为你我带来一场个性化的购物…

    2017-05-09
  • 分享:神级广告,100人同时交换名片~

    100人如何同时交换名片?

    IxD案例 2016-06-16
  • 设计规范如何写,这20个精选案例让你大开眼界

    一篇干货贴,开篇必须来点镇楼的。 如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。 1. Brand Style Guide Examples http://saijogeorge.com/brand-style-guide-examples/ 从中大致可以总结出规范的分类: …

    2015-11-09
  • 网页的交互设计and界面与用户体验案例:Nike Tech Pack in store app

    第一段是动效的视频,请注意观看交互效果与配色设计。 图片都可以点击放大,更清楚哦。 原文地址:https://www.behance.net/gallery/26097251/Nike-Tech-Pack-in-store-app 多个作者: Shakir Dzheyranov / Detail …

    2016-01-10
  • 如何为弱势群体做包容性设计之视力篇

    作为设计师,我们总说:我要让我的设计更漂亮和高大上,要完成老板的业务目标,要让多数用户的体验顺畅。我们总是优先考虑大多数人和强者的利益,然而世界是多样和公平的,除了这些我们眼中的“目标用户”和“大多数人…

    2016-12-02
  • UI界面中搜索入口的设计

    写在前面: 我以前是学空间设计的,所以对引导性的感知比其他学设计的要更早。其实,设计总就还是一个“万法归宗”的东西。“吸引”——“引导”——“持续”——“欲罢不能”用用户的这种思维去检验自己的作品(交互/UI)是比较客…

    2016-11-07
  • 社交APP-Same的产品和交互设计体验总结

    手机里总有一些app是下载试用了之后不会卸载的app,而same这款app在我的手机中是呆的时间最长的一款,我并不经常打开它,即使在其体验出现各种问题时,比如闪退,引导页进不去app(需杀掉进程进入,偶尔一次可进去…

    2016-03-14