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

相关推荐

  • 手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇…

    2017-08-03
  • 音乐社交的本质——从云音乐引发的产品思考

    社交虽常见,但音乐真的适合社交吗?音乐社交存在哪些特殊性?如何利用音乐来社交?可能你常常使用云音乐,却不曾想过这些问题。现在来看看作者对这些问题的思考吧。

    2017-05-22
  • 【用户体验】机器人教练:第三季!

    【本文转自:哈尔滨腾达集团驾校】WELCOME TO TENGDA我们的腾达欢迎来到腾达驾校机器人教学活动已经举办了两期,机器人教学俨然已经成为了一种时尚热潮,同时也在学员中树立了良好的口碑,学员反响热烈,有越来越多的学员通过此次活动认识了机器人教练,并且想来体验一下机器人教练的庐山真面目。近一周的科二学习,可累坏了学员们、也累坏了教练。在此对大家说一句:大家辛苦了!经过几天风吹日晒,我们的科二学习已经正式接近尾声,本周最后一个科目的练...

    2018-04-23
  • 以文本框为例,了解交互设计师在工作中的逻辑思考方法

    文本框是设计工作中常见的组件之一,无论是PC还是无线,大多仅是样式上的不同,它们的交互行为上是可以相互参照的。本文想从这一简单的组件出发,让大家看到交互设计师在工作中的逻辑思考方法,从而达到见微知著的直观感受。

    2017-05-17
  • 只会简单的Axure操作?6周5次实战,让你做出能拿去面试的原型

    昨天跟一位自学Axure、产品工作半年的朋友聊天,蛮感慨的。她遇到的问题,也是蛮多自学Axure的朋友遇到的问题。你是否也有同样的问题?除了原型图不标准不美观,还深受效率低、交互弱的困扰你也有这位同学的困扰,想快速提升axure能力,做出标准原型、高保真原型?推荐起点学院&腾讯课堂联合打造给产品经理的Axure课程已有2000多位同学学习,学习效果显著Axure零基础也能学,学完画出规范原型产品思维和交互贯穿全程,学完告别画图经理如果你...

    2018-05-07
  • 交互设计笔记整理

    PC与手机对比使用环境pc:固定位置,干扰少,注意力集中,输入方式强大。手机:任何地方,干扰多,注意力难集中,输入方式单一。交互媒介pc:操作精准快速,桌面大显示内容多,过大屏幕会有视觉盲点。手机:手指操作,精准度低、速度慢。使用特点pc:需处理复杂任务,多任务切换,讲究效率和强互动,没有电池流量问题。手机:适合处理简单任务,多任务切换困难,适合各种姿势使用,电池流量问题严重。web与APP界面对比web是书架,内容繁多,一目了然。更直...

    微信热点 2018-04-07
  • Axure rp视频教程36集,免费!

    1-36集,免费学习~~~点击“阅读原文”或长按下面二维码立即观看视频。对教程有疑问,请咨询微信:13388182428

    2018-04-09
  • 新零售下的智能终端设备全链路用户体验设计分析

    作者:阿里UED/丹妮2017年被称作是新零售的元年,阿里巴巴集团CEO张勇提出的“新零售”概念,提出通过大数据、互联网重新构造“人、货、场”场景,数字化技术已被逐渐应用在传统实体零售的每一个环节。在小店业态中,智能终端设备成为收集大数据的唯一通道,被互联网行业视为重中之重,而在纷杂的POS市场中,绝大部分都是沉重的桌面式收银POS机器,这时智能移动POS机作为收银POS机器的补充设备应运而生,智能移动POS机以移动便捷、功能齐全等优势...

    2018-01-31
  • 做好用户体验,掌握这些要素就够(一)

    我在人人都是产品经理这个平台上,没看到更全面概括原则与思想的文章,所以我想在这系统的说说。考虑到篇幅太长,用户看的可能会比较费劲,所以我会分成几篇文章来讲。

    2017-05-19