4个方法帮你零基础快速完成Apple Watch的项目

这会可以不用慌张,我们先给自己一天或者半天时间去了解它,最快捷的办法是开动大家的脑洞,然后再用自己的脑洞想办法,三个臭皮匠顶一个诸葛亮,联 系你认识的设计群体人脉,询问做过类似项目的设计师,最后总会有惊喜的收获。记得罗胖讲过,在这个时代,我们应该善于运用我的网状关系链,我就是从朋友那 里在短短的一个小时之内了解了手表项目的大概(虽然人家并不是做的苹果手表),他大致陈述了一下手表的特性还给我几个手表相关的网站进行浏览。给我的网站 可以推荐给你们,这里当然包括苹果官网,你可以在苹果官网上看到成熟的上线产品的模样,另外一个网站相对概念,可以参考一些简单的操作动效。

这会可以不用慌张,我们先给自己一天或者半天时间去了解它,最快捷的办法是开动大家的脑洞,然后再用自己的脑洞想办法,三个臭皮匠顶一个诸葛亮,联 系你认识的设计群体人脉,询问做过类似项目的设计师,最后总会有惊喜的收获。记得罗胖讲过,在这个时代,我们应该善于运用我的网状关系链,我就是从朋友那 里在短短的一个小时之内了解了手表项目的大概(虽然人家并不是做的苹果手表),他大致陈述了一下手表的特性还给我几个手表相关的网站进行浏览。给我的网站 可以推荐给你们,这里当然包括苹果官网,你可以在苹果官网上看到成熟的上线产品的模样,另外一个网站相对概念,可以参考一些简单的操作动效。

  1. http://www.apple.com/Watch/apps/
  2. http://watchaware.com/watch-apps

面对一个不熟悉的产品产品我们可以从产品的规范还有简单了解它的交互结构开始。

1、规范

尺寸:苹果手表的设计尺寸分为两个,分别是38mm:272*340 和42mm:312*390像素。

字体:苹果手表用的是默认的洛杉矶字体。

字体用色技巧:用鲜亮的颜色,辅助的灰色文字不能太暗,要不会看不清。

首先是找到苹果手表的规范图,这个图看似很难懂,但是没有关系,在实际操作遇到了问题以后,这些规范图的解读就迎刃而解了。不明白的时候可以多问前端这些图是怎么解读的。

4个方法帮你零基础快速完成Apple Watch的项目

不同的设备都是有不同的属性,比如网页端还有手机端就会有不同的限制性,手表的规范限制性很多,比如它在某些页面是分块组合的,所以不能用一张完整 的背景图给它做背景填充,以下是我一开始做的设计初稿,我做了一个圆形的进度条……但前端却告诉我不能实现,原因是进度条太大了,再参考上面的规范图,原 来我的进度条只能放在标红色的区域内设计,所以进度条要做得很小,但是这样的话,进度条里面的关于飞机的到达时间之类的文字信息就没地方放了,所以我们可 以针对这个问题来解读上面的规范。

4个方法帮你零基础快速完成Apple Watch的项目

以下是上图适用的规范结构……因为规范的限制,像设计师钟爱的这类能高表现的进度条样式可能就要放弃了,具体情况还是根据不同产品的内容特性来定,苹果手表能常见进度条样式的主要还是出现在运动类,健康类APP为主。

4个方法帮你零基础快速完成Apple Watch的项目

白色为文字区块,红色区域可以放图片类的素材,基本分为上下结构,设计的时候找到适合你设计的结构图按照规范设计就可以了。

4个方法帮你零基础快速完成Apple Watch的项目 4个方法帮你零基础快速完成Apple Watch的项目

以下图片要注意的地方是右上角红色的区域块,文字不管如何的排版,你都要给这个区域块留位置,这是一个固定放loading的地方,文字可以空出这个区域的高度,也可以在末尾端留出一定的位置。

4个方法帮你零基础快速完成Apple Watch的项目

下图是我针对上图做的效果图,我直接空了红色区域的高度来迎合。

4个方法帮你零基础快速完成Apple Watch的项目

作为苹果手表的特性,我们尽量少用色块或者图片来局限你的界面大小,因为手表除了固定的设计大小以外,它的外部还包含着黑色,只要不运用局限性块面来局限它,这些外部的黑色背景就自然而然的融入到你的画面当中,这样看起来你的界面会显得更延展更大气……

4个方法帮你零基础快速完成Apple Watch的项目

再次强调苹果手表是黑色背景,在用色技巧这块,大多数APP会运用高饱和鲜亮的颜色,这样不仅仅视觉上好看,并且用户在远距离的情况下也能看清楚屏幕上的内容,以下是部分APP的视觉截图……

4个方法帮你零基础快速完成Apple Watch的项目

2、简单的交互动作

iPhone Watch主要分为三大板块,分别是APP,notification,glance。

APP:就是我们手机端的首页,它可以通过手表的首页图标点击进入,也可以通过notification点击进入。

notification:是一种提醒功能,比如我的飞机过几天要起飞了,它会出现在notification里面,并且各个APP的提醒是平行的,向左滑动可以浏览到所有重要的提醒。

glance:它算是一种紧急的推送,如我的飞机还有一个小时就起飞了,它会弹出在页面,点击它就能看见内容详情。

3、如何和前端高效合作

由于iPhone Watch的界面较少,因为它的主要功能还是作为提醒的作用,它的页面不会像手机端出现那么多界面。所以提供给大家一个个人觉得非常高效的开发手段,等前 端把所有结构都做出来进入视觉调整的时候,你可以花一到两个晚上陪他加班进行视觉调整和适配,要是你还是个可爱颜值高的妹子这个事情会更加顺利,你可以在 前端身边运用你的像素眼来目测调节内容的排布,这样比前端按你的标注来做要高效几倍,毕竟能省去他发给你有差距的图,你来回和他沟通的时间。一气呵成,前 端也会非常乐意。

适配的技巧还是先调整小界面再适配大界面。要是有时间的话,单独开发尺寸比适配尺寸做出来要更精细一些,但是会加大开发的工作量……

 

4、全局思考

设计前最好把交互稿牢记于心,对全局有个把控性,优先做几个重要的界面进行风格设定,然后再进行颜色,字体,控件的整体统一,建议设计的过程中自己整理一下交互稿,可以画一个流程图。这样可以避免风格不统一的问题出现……

4个方法帮你零基础快速完成Apple Watch的项目

 

原文来自:优设

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

(0)
CatherineCatherine
上一篇 2017-05-31
下一篇 2017-05-31

相关推荐

  • 实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19
  • 圣诞节恶搞阳狮集团首席执行官

    嘿,节日里,当别人家的领导都在台上长篇大论,又是回顾又是展望为全体员工注射一波又一波的鸡血,你猜......广告公司的大佬们都在干嘛?事实上从2013年开始,阳狮集团的CEO莫里斯,都会找点乐子,不只是和idea漫天飞的创意人,更拉拢网友们,玩一场High翻天的游戏。

    2014-12-28
  • 实例分析:关于上传照片交互逻辑的思考

    最近在重新设计公司APP上传照片的组件,研究了很多移动端上传照片的组件,下面来简单单谈谈自己的总结。

    2017-05-12
  • 如何平衡用户体验和商业变现

    互联网公司往往会面对怎样平衡用户体验和商业变现的问题。其中最常见也是最典型的代表就是,作为互联网公司商业模式之一的广告,某种程度上会影响用户体验。比如广告数量过多、与用户需求根本不相关等,这都会引起用户的反感。而在Facebook看来,这并非是一个无解的问题。在1月21日举办的2018极客公园创新大会上,Facebook工程总监范鹏分享了Facebook平衡用户体验与商业变现问题的4个原则。范鹏认为,用户体验与商业变现之间产生的问题其实...

    2018-02-10
  • 阿里UED双11组织文化传播-为每位阿里小二制造快乐

    这个组织,从创意策划、设计体验方案、执行落地再到传播推广,各种角色无缝衔接。下面带大家探秘这个神秘组织—UED双11品牌传播团队。印象里…双11阿里组织文化传播设计不就是内部宣传么(简称内宣)。Too young Too simple,一次成功的双11背后,内宣就好比阿里小二的精神鼓励师,支(bi)撑(po)着大家不断创造新的历史(走过最长的路,就是内宣人的套路,此处应有掌声)。那么,今年内宣设计的策略和体验核心是什么呢?今年双11品牌...

    2018-02-02
  • AxureUX企业及通用型网站WEB端原型模板发布

    01作品信息作品名称:AxureUX企业及通用型网站WEB端原型模板作品类型:模板类发布日期:2018-04-02最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:1.5MB作品编号:TEM007作品售价:¥19.00详细介绍及演示:http://www.axureux.com/home/templateswebgp.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本...

    2018-04-05
  • 与经典艺术交互体验,迪士尼推出AR博物馆,“篡改”世界画作

    ——映维网——国际影响力VR信息数据平台文章相关引用及参考:vrscout怎样做到?用户能够通过移动设备扫描博物馆中的任何2D艺术品或者是书籍,然后实时更改颜色和色调。例如,你可以把《蒙娜丽莎》变成紫色的皮肤(映维网 2017年09月02日)迪士尼在2015年开发了一种可以通过实时纹理来创建彩色书籍的AR技术(一种捕获2D绘图来实时创建3D增强现实图像的过程)。自那以后,迪士尼将实时纹理技术发展成一个名为AR Museum的新AR应用程...

    2018-01-30
  • 《2017中国设计行业价格报告》——交互设计

    《2017中国设计行业价格报告》——交互设计创意点亮生活设计美好人生创意设计一个有温度有格调的公众号合作、投稿:cda-zj@vip.163.com微信:13777850472微博:@浙江省创意设计协会

    2018-02-14
  • Axure RP - 专业的原型设计工具

    俗话说的好,不会画原型的设计师不是好的产品经理。产品经理的一大技能就是可以熟练使用原型工具,画出优秀的产品原型。Axure RP是一个专业的快速原型设计工具,是美国 Axure Software Solution 公司旗舰的产品。产品经理能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。它比一般创建静态原型的工具如 Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver...

    2018-03-16
  • Sketch强大新技能: 支持多个设计师之间同步组件啦!

    ▵优设品牌号,旗下新品及内测邀请码资格均在此号,关注推送掌握动态,有机会第一时间获取。封面设计:Graphéine团队里多个设计师之间经常需要共用一些设计组件和元素,如果可以有一个包含这些组件的 Symbol 库,并且自动和所有人保持同步就好了。现在 Sketch47 就搞定了这个问题, 再也不用像过去一样通过发邮件、QQ 来同步了。如果你的团队需要多人共享一个 Sketch 组件库, 只需把这个包含公共 Symbol 的文件在你的 S...

    2018-03-02