说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

唯“简”不破,Apple Watch App的设计之道

HTML文档下载 WORD文档下载 PDF文档下载
不同于其他智能穿戴设备,Apple Watch的特殊性向设计者提出了完全不同的要求。本文详细分析了在Apple Watch上可被利用的交互方式和注意事项,比官方用户手册更通俗。读完此文,你会了解更多如何为它的界面进行设计。

我很肯定那些看过Apple Watch功能的人对其有多么的失望,但是我想写的正是为你展示功能局限的好处。起先,当我研究Apple Watch的时候,想在它身上做的很多事情都不能实现。后来我意识到Apple Watch的关键在于瞥一眼某个应用,它应该配合某个应用而不是替代它。当我这样思考后才意识到Apple Watch能够真正被应用到的,不仅仅是通知,更重要的是使人们能够方便地使用最常用的那些App的核心功能。


我将让你通过几个关键的功能重新树立观点,借此我们会把Apple Watch视为真正的尤物。

保持简化

在我所有的设计里我都崇尚简化。你可以有一个复杂的想法但必须把它简化到使每个人都可以使用它。截止到目前为止苹果已经持续推行着这个理念——内容是关键,而Apple Watch通过确保用户使用一个非常轻量级的界面去实现有限的功能,在这一理念上践行得更远。

想像一下我们会怎么去设计一个模板?答案是创造一些功能有限但灵活的东西在各种设备上可以被使用。我们这么做的原因是这样一来就没有人能使用这个模板去创造完全不同的,一般的,丑陋的东西。苹果已经这样做了,但不要以为是为了让所有的应用看起来都是苹果出品,仔细想想,他们似乎是想要确保所有的应用为Apple Watch而生并简单易用,没有复杂的屏幕或不必要的组件,只是回到了我们真正需要的。

看看你手中的一个应用,想想它的核心功能,人们最常用的是什么?那个功能在Apple Watch上要怎么正确地被使用?你怎样针对这个核心功能去简化这个app,从而使人们愿意在Apple Watch上使用它而不是在iPhone上呢?

音乐软件可能是一个比较好的例子。它的主要功能一般是播放音乐、切换曲目和调节音量。此刻我们仅仅调节一下耳机上的装置就可以改变曲目和音量,但有件事情被忽视了:现在在播放什么曲目?怎样快速切换专辑而不是曲目?Apple Watch的第一屏应该负责这些主要功能,我们可以轻击屏幕显示当前播放曲目并选择另一个,或使用上下菜单从我们最常播放的前四个专辑中去选择。

功能至上

对于新屏幕我们能够使用的切换方式转场效果都是非常有限制的,因此在这里一切都变得非常简约。

模态界面

在每天使用的应用中我们已经习惯了这种模拟情景的交互方式,它同样也可以被利用在Apple Watch上作为在我们设备的主屏幕之外设置或控制其他的东西时。需要过渡的是之前我们已经习惯于当前屏幕上从下往上的移动方式。

旋转

根据屏幕底部显示的页码我们会通过简单地轻击去切换页面,但是不要被炫酷的视觉效果所迷惑,因为在AppleWatch每个页面在显示时都需要静态地呈现,炫酷的视觉效果没有意义。

推出

就像手机里的iOS应用一样,当我们选择去访问一个新的页面时,可以依然让它从左到右地显示出来。

层级菜单

这是Apple Watch上一个非常有趣的新功能,访问菜单的唯一办法就是长按界面。这个菜单的设计关键是呈现它与你当前页面的上下的层级联系,因此叫层级菜单。思考一下它作为一个菜单选项去改变你当前的环境,无论是切换一个模式还是从你的乐库中选择一个新的播放列表。关于层级菜单你可以在Apple Watch上使用更多的例子,只要保证它们总是与你要访问的页面相关联。

UI设计


为Apple Watch做设计最大的难点在于可供设计的界面区域非常有限。想象一下每个页面都是一个表盘,每个元件即一个元素,一切都不可重叠。设计一个HTML邮件有时也会如此,与Apple Watch在屏幕上的局限非常相似。

尽可能给你的按钮更多区域,至少从触摸最小区域标准44px开始设计,而且因为我们旨在让Apple Watch上的界面更简洁,你可能会使用更多的空间。

试着让屏幕上的元素保持最小,你要尽量尝试并避免因为各种用户行为而去滚动屏幕。通常我们应该只在阅读内容或选择一个项目列表(比如专辑列表)时需要滚动屏幕。

关于界面,苹果在非常努力地试图呼吁背景色保持黑色。而色彩只用于屏幕中的元素,这会促使设计中使用最少的颜色,在应用里只对屏幕上的关键信息进行着重强调从而引导用户使用。我收到一个关于Apple的评论说这样会帮助节省电池损耗,作为回应我只想说最好苹果能够改善硬件来确保我们可以自由设计。然而苹果保证设备上的应用在他们设定的标准之内,而不允许人们去创造他们任何想做的东西,那样可能会破坏人们的愿景。还有一个挑战,如果所有的Apple Watch应用都是黑色背景,你要怎么通过界面的元素让你的界面与众不同?如何让用户能够正确识别他们正在使用的应用?

最后一件和布局有关的趣事是苹果建议所有的元素都延伸到边界。原因是由于黑色的表身和建议使用的黑色背景,这两个表面形成了一个完整的屏幕,因此在设计时显示屏边缘的物理边框也被考虑在内。当然如果你打算使用一个背景色,可以像往常一样延伸到边缘的。(译者注:应该是为了达到无形边界的全屏UI视觉效果,这样有利于模糊软件与硬件之间的差别,带来更整体性的使用体验。)

图像

为提高设备的电池效率建议你尽可能地少用图片,但是如果你仍然要使用它们,可以用下面的这些方法。

背景图

整个屏幕的背景图是填充的,不会随着内容滚动,因此保证它简洁尽可能只有一种颜色,苹果最希望是黑色。

区域内容背景

另外一个使用背景图的例子是一个区域(类似容器)的视觉效果,背景图像上可能会被内容覆盖。这种情况下把你的内容作为一块区域来考虑,图像也只在这个特定的区域出现作为背景并保持静止(译者注:这个容器的背景可以是纯色也可以是背景图片,是Apple Watch布局的重要工具)。

独立图片

像往常一样,使用图片即简单又容易理解,但是为了提高电池效率依然尽量少地使用。

动画效果

我们都喜欢应用里的动效,不管是一个新的元素出现在屏幕上的动效,还是一些点击的反馈动效。在Apple Watch这里我们受到的局限是,展示动效的唯一方式是使用GIF动图。这意味着我们只能将动效运用在现有屏幕的元素上。使用动效的好处是用户与界面中元素发生交互行为时获得了反馈。以按钮为例,我们可能需要为轻击按钮设计一个弹起效果,或使用一连串的动画表达填完某项内容。

只要记住动效只能被用于某个元素被触发而设计相关的反馈就可以了。如果你的组件充满了动效,通过点击很多步,每一次点击都将会触发组件自身的动效。因此如果你有一整个100帧的动画和10个点击动作,每一次点击都会播放一次动画,你会发现快速地点击4次会使动画跳过前3次直接转到第4次的动效,想想有点可怕。这时可能要确保每个操作有少量的帧动画,以便在点击动作之间有时间去展示平滑的动效过渡。

手势

这是Apple Watch最大的局限之一。除了滑动旋转,我们不能使用其他任何类型的触摸手势。查看层级菜单我们可以使用的有滑动滚动、轻击、长按。实际上解除按钮让我们以一种更简单的方式思考用户如何浏览我们的应用程序,尤其是,这里只有一个手表,我们所设计的的一切交互方式都必须小、快速和简单。

一些资源


Apple Watch GUI PSD供大家下载研究

Apple Watch Free Template PSD设计模板

希望这篇文章能够阐明如何设计一个可行并完美的Apple Watch App。

英文文章来源:Medium,译文出自:简书网,译者:Smallneinei

(责编/刘璐璐)

运营商上阵OTT “一笑泯恩仇”后路在何方 [企业开源系列]后起之秀Facebook凭什么挑战互联网霸主Google? 谷歌推出免费标签管理应用Tag Manager McAfee CTO Phyllis Schneck被任命为NPPD副部长 Bootstrap 3.0发布 更好地支持移动端和响应式开发 国内创业公司QingCloud的魄力:做一个世界级的IaaS服务 从毫秒到微妙,纯硬的闪存阵列IBM Flash System来了! 中科创达邹鹏程:黑客精神逐渐被人遗忘 有点让人感伤 通过讲故事的方式来设计优秀网站 “肮脏的”IT工作排行榜 Clank:带有SCSS的高效率移动应用原型框架 欧朋 CTO 罗志宇:谈Sphinx游戏引擎的前世今生 John Carmack大神亲手操刀,Oculus Rift SDK即将发布 从南极之争谈软件架构十个技巧,及成功团队具备的气质 Imation重拳出击,推出新型混合存储平台 张建华:FusionSphere不是简单的OpenStack发行版 Chrome 29来了:地址栏变得更“兼容” Android版增WebRTC 工程师谈在Facebook工作最糟糕的事情 用Scala重构19楼——SDCC 2013讲师王治专访 10款最新且超实用的开发框架 创业公司为什么应该写博客? 向iOS SDK看齐:Facebook Android SDK迎来重大更新 闯向海外:对话AppFlood产品总监陈霄 高手爱跨界:联想智能桌面,27寸大Pad抢先试玩 惠普第三季度收入272亿美元同比下降8% 高管重新布局 原来我们会出这个价钱购买“廉价”iPhone Web设计过程中该做和不该做的 新细节披露:通过电信合作 美国75%网络遭NSA监控 实时Bug检测工具Bugsnag发布API更新 【观察】一大三小:亚马逊,微软、谷歌、IBM ,IaaS四足鼎立 “化云为雨”一小滴:北京,3G手机+蓝牙打印机实现智能抄表 请教高手:怎样在程序的toolbar中显示使用edit,command控件 新手上路 恳请指教 98下在局域网内实现Win2000的分布式文件管理的方法? 如何破还原卡? 如何从ADOQuery控件中,取得值? 菜鸟求教一句代码的含义 请高手来看一下! 有关密码保存的问题! 为什么我的表单中放上热点按钮后,在onclick事件中写lotusScript,当用web浏览时,按钮不显示 如何让程序只能在一个机器上运行 影音文件格转换问题! http://expert.csdn.net/Expert/topic/1712/1712032.xml?temp=.3572351 紧急,写入文件 百分送上 五只角了,虽然我的可用分只有可怜巴巴的一千多分,但是,偶还是要散,同时希望SARS早点消失 聊天帖~~~~冒着信誉分被减请chiprobot(芯片宝贝)(把神经接到CSDN上烧录)到至一述~~~ installshield如何把bde环境包括进去呢? 我的程序在A服务器是好的在B服务器发现客户端验证有问题,请赐教! 关于变量?快进来看看,在线等待!sql server 2000怪问题 如何实现Access数据库的数据完整性问题 一个关于tag的使用问题(救急) PB8的window和dw插件怎么无法实现?我都要气疯了! 字符串 如何在web页上弹出对话框,要求在此对话框中可以有文本框,还有按扭? 将OPENGL转换到WINDOWS中有没有方法? 如何用C实现对网站的登陆 如何让SQL数据库里面的图片和相应的图片号(数字)这样显示:图片在上面,图片号在下面? 我想在在数据库这个方面发展,我应该怎么学????????? 关于名字空间的问题. Office WORLD中操作一问(急)成功后送给50分 被老板诬陷偷钱,要赔偿,怎么办? 今天我女朋友出门了,,我好担心。。。。。。可恶的非典 看看这是什么错误,在线等!立刻给分 Java in a Nutshell,2nd Edition 的电子版何处可以download?(英文的也可以) gtk2,书中例题出错:2.2节,快捷菜单 请教高人:如何将Access中的表table的全部内容转换到word的表格中? Java虚拟机与浏览器的关系? 关于loadmovie的问题 请问在网页表格中如何把数据读取后在一行中横向排列? 我用IE6.0菜单中的 编辑→查找 出现以下错误 问一个关于类引用的问题(新手) 关于参数的问题,棘手啊 今天我女朋友出门了,,我好担心。。。。。。可恶的非典 学习《Visual C++技术内幕》遇到的几个问题1 一个玩游戏玩出的问题 如何控制for语句的执行时间?? 简单sql查询,高手请近来点拨一下,多谢 redhat 7.2下如何绑定多个IP地址?????急!!! 调试 莲塘光之流因特网实时交互媒体系统 如何静态连接到msvcrt?(100分!!!) 多用户问题 这个问题怎么解决? In the UK ,nothing goes down quite ( ) a bag of takeaway fish and chips.A.as well as B.as soon asC.as often as D.as fast as 设x∈[0,2π],则使函数y=sinx和y=cosx同时递减的区间是 求大神写一篇作文 半命题的 假如我的语文老师( ) 关于气体可逆反应平衡条件设反应前后化学计量数不等:“混合气体相对分子质量不变时,就平衡” 这句话是为什么?还有定容的反应,n=V/22.4不适用是么?因为如果使用n浓度C=n/V,连个公式换算 一艘轮船从a港出发沿被偏东70度方向航行,航行到播出转向北偏西30度方向,到达c处需把航向恢复到出发时的航向,应该如何调整航向?1.5小时内加20悬赏 急球c语言!矩阵直接分解法(lu分解法) 某原子最外层电子排布式为3S23S4,则最外层未成对电子数是几个 如图,B港在A港的北偏东70°方向,甲乙两船分别从A,B两港出发,甲船的航向为为北偏东20°,如图,B港在A港的北偏东70°方向,甲乙两船分别从A,B两港出发,甲船的航向乙船的航向为北偏西30°,两船在C 用红色石蕊试纸检验铵盐和碱反应放出氨气时,为什么要把试纸悬放在试管口上,而不应把试纸贴于试管口上? 天作孽犹可恕自作孽不可活是谁说的? 最外层电子数相同的原子,未成对电子数也相同 并说明为什么 天做孽犹可恕,自作孽不可活?如何改正我真的错了我之错误 知道是欲望太多 我真的错了 你能原谅我么?刚开始我本单纯 但进入了漩涡中心 为了名利 逐渐丧失了自我 逐日钩心斗角 蝇营狗苟 下列原子的核外电子排布中,未成对电子数最多的是A.B B.F C.P D.cl 神舟六号返回舱的容积是多少? 甲午中日战争和八国联军侵华 they eat twice as much fish as their closest 一条船向北偏东60°方向航行到某地,然后依原航线返回,船返回时航行的正确方向是 天作孽犹可恕自作孽不可活 They often eat in a local r________ 一条船向北偏东50度方向航行到某地,然后依原航线返回,船返回航行的正确方向是?一条船向北偏东50度方向航行到某地,然后依原航线返回,船返回航行的正确方向是( )A.南偏西40度 B.南偏西50 问下while有没有表示转折“然而”的意思?谢谢I like to paly guitar while David likes to play chess.这么可以表达然而的意思么? 八国联军侵华战对中国社会最严重的危害八国联军侵华战争对中国社会最严重的危害是什么?(最严重的) 不是《辛丑条约》里的 最好不要讲《辛丑条约》,就当正在发生中 还不知后面的事 TC棉布(90%的T+10%的C)的耐热温度?温度达到多少开始会起火燃烧? 天作孽,犹可 违;自作孽,不可活是谁在什么里面写给谁的!为什么要这么说?表达了他什么想法? 第二次鸦片战争和八国联军侵华战争对中国近代社会生产的共同影响? while当做“但是,然后”转折的作用是不是一定是用在一个句子里如果是用在介绍两个东西中间,先定义了一个东西,然后在定义另外一个东西,while能不能放在定义第二个东西的句首?就这一个词 除二氧化碳之外有什么气体能使氢氧化钡用也变浑浊?能使品红退色的气体是什么 一条船向北偏东30゜的方向航行到某地,然后从原航线返回,船返回时,航行的正确方向应是( ) while 表转折 能不能接短暂性动词 常见的可使红石蕊试纸变蓝的气体有什么?属于碱性还是酸性?还有什么颜色的石蕊或品红验酸碱的例子吗 一条船沿北偏东六十度的方向航行至某地然后一原航线返回船返回时正确的方向是? 可逆反应达到平衡时的表现 元世祖曾经采取了怎样的重农政策 生物对外界的刺激能产生相应的反应,这在生物学上叫应激性,比如地面生长的植物,根向地生长,茎背地生长,这是对重力的适应.若在飞船上也有一颗树,猜想树的根将怎样生长? 铵盐的检验铵盐可以通过加入氢氧化钠溶液共热来检验,那一定必须加溶液吗?加氢氧化钠固体共热可以吗?加其他碱是否可以呢?还是一定要是强碱? 上海市建设机械检测中心的电话多少 能对外界刺激产生反射的最低等的生物是 天作孽,犹可违,自作孽,不可活. 晶体有固定熔点可以由生活中哪个实例来证明? 反射是通过( ),对外界或内部的各种刺激所发生的有规律的反应 “天作孽,犹可违,自作孽,不可活”的意思 下列函数中既是奇函数,又在区间(-1,1)上是增函数的是 A.y=|x| B.y=sinx下列函数中既是奇函数,又在区间(-1,1)上是增函数的是 A.y=|x| B.y=sinx C.y=e^x+e^-x D.y=-x^3 京杭大运河分为四段那四段(自北向南) 用括号内的适当形式填空:Look at the boys.They------(boat)on the lake. 微生物基因定向进化有哪些方法 水笼头的英语怎么拼 ——Look at the people in the lake .They are playing happily .Let's ___,too.——Good idea!A.go hiking B.go camping C.go skating D.go boating ,为什么? 运筹学在医学有什么应用 京杭运河自北向南经过哪六个省, 可逆反应达到平衡根本原因 函数y=sinx(0≤x≤2π)的递减区间是 下令开凿的南北大运河,以 为中心,由北向南依次分为 四段 天作孽犹可违,自作孽不可活是出自那里? 如图,一艘轮船从A港出发沿北偏东65°方向航行,行驶到B处转向北偏西35°方向,到达C处需要把航向恢复到出发时的航向,应如何调整航向?(求图中∠PCN的度数) 帝时期,开凿了一条贯通南北的大运河.大运河以 为中心,北抵 ,南至 ,自北向南分为 、 、 和 四段,连接帝时期,开凿了一条贯通南北的大运河.大运河以 为中心,北抵 ,南至 ,自北向南分为 、 、 This kind of pants_well and soon they_第二个空为什么填were sold out 不是可以用主动表被动么 一艘轮船从A港出发沿北偏东65°方向航行,行驶到B处转向北偏西35°方向,到达C处需要把航向恢复到出发时的航向,应如何调整航向?(即求图中∠PCD的度数) 甲城市为世界最大的麻纺织工业中心,分析甲城市发展麻纺织业的有利条件 以色列军方与武装分子在加沙地带交火 卜拉希米:日内瓦会议不能缺少叙反对派韩政府再次敦促日方删除主张争议岛屿主德国成欧洲首个允许出生登记性别栏空白奥巴马出席投资美国峰会 承诺加强吸引叙利亚已完成销毁化学武器第一阶段任务全球首辆太阳能家用车亮相 未来或大量日媒:缓解眼睛疲劳的食物有哪些?澳男子将宠物店名犬藏入裤裆内带走接受以色列批准在定居点新建1500套住房奥巴马幕僚曾考虑用克林顿替换拜登法著名导演吕克·贝松出席《LUCY》非洲部落男子比胖大赛:最胖者获封“英哈佛大学肯尼迪政府学院创院院长:高效安倍护卫车连续两日发生交通事故 日媒德国纳粹盖世太保头子被证实已误葬入犹日本学者发现有助改善糖尿病和肥胖症的俄建议叙政府与反对派在莫斯科举行非正日本警官爱用枪对准下属遭停职 称只为卜拉希米:日内瓦会议不能缺少叙反对派奥巴马出席投资美国峰会 承诺加强吸引“犀利爷”爆红 有人千里来认亲等DN疑似哈马斯武装人员被以色列士兵俘获照男子帮环卫工妻子捡垃圾多年 突遇车祸非凡卡地亚呈现奇妙时间艺术之旅法院直播\"唐慧女儿案\" 专家:核习近平结束拉美之行回到北京甲午战争120周年:走进李鸿章故居潘基文祝贺马里内部包容性对话达成路线台风“威马逊”造成中国62人死亡21卖空购物卡诈骗钱财 缓刑期女子二度获台股25日收盘跌88点 为9439点15岁华裔乒乓球手代表英格兰参加英联哈佛大学称SOHO中国助学金是“慷慨朴槿惠接见东京都知事 强调日本需努力乘邮轮 游世界对楼市的疑心别再扩大去医院睡眠病房“睡”几天原是更换阀门爱跑先要爱自己马布里准备演“北漂”“小白”梦想成“梅西”
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘