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

相关推荐

  • 从智能手机说起,看设计风格演变的趋势

    长期以来,大多数人对 UI设计趋势的理解,都是扁平化。可这容易引来两种误解:一群人理解扁平化,是一股潮流,这潮流就像流行时尚一样,会不断更替,原来的拟物风会重出江湖;另一群人,认为扁平化就是平,对设计的理解局限在表达手法上。

    2017-05-17
  • 【译文】移动应用界面设计7宗罪

    本文是移动原型工具Proto.io的设计团队8月份在自家博客上发表的一篇“软文”,通过与移动设计界大牛们的对话,帮助大家了解在进行移动设计时应该特别注意的禁忌,顺便推了一下Proto这个工具。大家可以回顾一下自己团队的应用正在触犯哪些禁忌,想必会有点意思。读完本文,相信你能找到优化自家移动应用设计的方向。

    2017-06-02
  • 极简主义风格:要讲究四大设计要点

    极简风并不是简单的做减法,这也是极简设计最棘手的地方。想必设计师都明白“少即是多”这个概念,但是要怎么在实际设计中践行这种极简设计的理念呢?今天的文章,就帮你梳理一下基本的法则,帮你在设计之前就理顺思路。“完美的设计是可以实现的,也许你还可以向其中加入更多的东西,但如果想从中移除某些元素,就完全不可能了。”

    2017-05-11
  • 有奖励的互动提高用户参与性

    奖励点燃我们的动力。奖励让我们知道我们正在做正确的事情,并使我们继续探索学习新东西或者实现一个目标。 用户收到的一个不经意的变量奖励会更有效,因为人类渴望可预测性。 我们到处寻找规律,试图理解这个世界。 …

    2015-01-12
  • 从“注意力”的角度谈体验设计如何避免入坑

    作者:挪小辣(用户体验设计师 @UIMax公司)   前段时间UIMAX团队在做“新浪新闻客户端用户画像项目”时,用研人员访谈用户的过程中,发现一个这样的问题:多数用户完全没注意到过页面上的“长按可排序或删除”这段文字…

    交互专题 2023-03-03
  • 减少返工!如何发现交互设计中的思维盲区?

    作为入行不久的交互设计师,我发现自己在交互设计的实践中无法顾及到方方面面,是存在思维盲区的。其中有欠缺经验的原因,也有自身知识局限的问题。进入开发阶段后,每次需要修改交互时,心里都会有些惭愧,感觉为…

    交互设计 2015-11-03
  • 用户体验丨有一点,我特别不服:我一向健康,这本“生命说明书”却告诉我,风险无处不在!

    我与优福的故事聚 集 幸 福 之 因[图片]癌症,是人们的恐惧中心。很多人平时身体棒棒,突然就倒下了,永远的离开。比如我婆家的姑爷,发现时已经晚了,无力回天[图片][图片][图片]。2013年,安吉丽娜·朱莉检测了自己的基因,发现乳腺癌症易感基因患癌率是87%!她提前知道,提前预

    微信热点 2018-02-01
  • App收银台交互设计思考

    数十万互联网从业者的共同关注!作者:柒0。作者授权早读课转载。来源:简书编辑:Juvae最近完成了“app收银台设计重构”的需求(一期为“账户充值”),作为一个刚毕业的交互新人,踩了一些坑,总结了这次思考的过程与…

    2017-08-01
  • 交互基本功:如何设计一个好用的搜索框?

    搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点,希望大家从中可以有所收获。

    2017-05-04