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

唯“简”不破,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

(责编/刘璐璐)

体验至上!移动Web应用JavaScript UI库App.js 专访中国国航:传统行业的“轻应用观” 开发者找众筹,哪些网站更靠谱? 48小时脑力激荡 中美青年创客大赛英特尔北京选拔赛 “微应用+大平台”推动企业软件走向碎片化 浅谈Hive vs. HBase 十款最新的JavaScript开发工具 JavaScript Promise启示录 百度携多位安全专家深入探讨安全人才快速培养机制 卡饭技术代表严佳:引入安全人才,企业应遵循S.L.E.E.P、S.T.A.R法则 百度资深研发工程师周晓波:平台+数据 百度培养安全人才的重要思路 代码审查是如何抹杀开发者积极性的? 事件分析平台EventHub开源 云计算智能交通行业论坛:李德毅院士谈智能车 多家知名企业分享应用实践 我伙呆!CRM生死对手微软及Salesforce或将联手 阿里巴巴曾鸣:数据时代来临 OpenStack企业应用之路技术培训:虚机迁移、HA、VDI、跨Hypervisor管理 云计算技术背后的那些天才程序员:KVM之父Avi Kivity 中国气象局联手阿里云:海量气象数据变“活数据” 浪潮首度公布“I2I计划” 全面接盘IBM X业务 一周消息树:Surface Pro 3想替代笔记本太难,微软正逐渐迷失方向 就是要赚钱!NativeX推自定义原生广告交易 继智能手机后的下一个战场:智能家居 鏖战云端——亚马逊的生存法则 如何保住公司的人才:创造良好的学习氛围 主宰全球的10大算法 专访Google数据科学家彭晨:大数据成为潮流走近各行各业! 强横Metal技术来袭,能否取代OpenGL? Swift横空出世,Xcode 6 Beta有了哪些新变化? 《近匠》GameMei:简单易用、快速开发商用游戏 Gartner:2014年一季度浪潮服务器出货量中国第一 如何查KeyPress中的Key的所有值啊?在BCB5中选中Key按F1就出来了,在BCB6。。。。。 vfp中如何将汉字转为拼音 下面的VB代码如何改成BCB代码?100分!!! 多维数据集? ComboBox.Item选中用什么方法? 大家帮帮忙,又是代码的问题(lotusscript)--应该比较简单 SQL SERVER 7.0 Desktop版支持sp_makewebtask吗? 如何维护一套系统 请帮忙!用cb怎么样控制excle复制一个Sheet到新建的sheet? 关于用户注册信息无法插入access数据库的奇怪问题 热烈欢迎我mm加入csdn灌水乐园!(顶者有分) Jbuilder中可以运行,但在UltraEdit中不行 下面的VB代码如何改成BCB代码?100分!!! 使用LoadRunner进行性能测试的简单步骤 如何在两个数据库之间复制表? 2002 高程的题再讨论 关于网络流量.(高分相谢) php中sql请教 迷失在struts流程中的人,有人能带我出去吗? 一堆简单问题 怎样用ASP判断复选框(checkbox )被选中呢??急~~~~~~~ 我想使得对话框显示在主程序的中央怎样实现?取空格函数是什么? 服务器一重启IIS就不能工作,需要删掉IIS,再重装才行,还原备份都没用,怎么办?(高分求解) PART1:WORD文挡处理问题 对象无效是怎么回事?急,谢谢,马上结贴 有关SQL数据库远程传输及服务器配置及设置影响的问题,敬请高手积极指教!!有请大力!!! 怎样通过DBNavigator实现对DBGrid 中的记录末添加记录? 啊,注册tucows,downloads.com都要收费的?是吗 怎样把任意一个文件读到oracle的blob里,急啊!! 公务贴(八月七日) 野种子 这样可以吗?请高手帮忙。 我要做一个软件,这个软件可以进行光盘(VCD,DVD)的刻录,请问哪里有源代码下载? MSMQ服务器如何安装??? 高分提问,请高手相助! 概念问题:Lun,scsi bus number,host adapter number,scsi id 这些含义如何 如何Copy有损毁的VCD(唐伯虎点秋香)? WebLogic7 的乱码问题??? 与的问题 有人给你送礼希望你能....你会如何? 我该选哪一个?(在线等) 请问如何在word里嵌入一个工具条 我的一台服务器安装的是Win2000 Server版,而客户端安装的是Win98,当通过客户端的Win98系统去访问服务器时,就会弹出一个要求输入网络密 两个问题请教,做过大项目的请来帮忙 傻问题大家帮帮忙 简单问题!请指点(急!在线等!) 讨论:是用全局变量,还是用发送消息? 关于jsp与javascript之间的问题,紧急!!!对高手的挑战 我想写一个窗体,要使它不在任务栏上 如何用php语法进行文件的直接下载,高手请进 Hard as a diamond is ,it is easy to drill a hole in it with laser .为什么要带冠词呢?不是说表语位于句首时省略冠词吗? hard as the diamond is,it is easy to drill a hole on it with laserhard as the diamond is,这里用hard although the diamond is为什么不行 ( )camping site(填入适当的介词) 帮忙解释这句话语法 가 을 에 꼭 가 보 세 요가 을 에 和 가 보 세 요都什么意思啊? 宇宙 最慢 物体宇宙中最慢的物体是什么吖~ 부속동 부동산 是什么意识?刚才看到 부동산 这是做什么的啊? 如何将小班我爱我的幼儿园主题活动与区域活动相结合 주부백일장是什么啊?我想问一下주부 백일장 该怎么翻译好呢?如果直译成 "主妇白日场"根本就让人不明白啊.请问哪位大侠能帮我!不要应该,我要肯定的 如何将小班我爱我的幼儿园区域与主题活动相结合 He has a interesting book 可不可以说interesting是定语 a book是宾语吖 中国海关知识产权保护展示厅正式开放杭州一天发生三起酒后落水事件 23岁杭州发布高层次人才“需求榜” 技术研湖北荆门煤矿透水事故续:第一名被困矿南昌市一人大代表涉嫌工程行贿被采取强孟加拉国一列车脱轨 致两人死亡30余西班牙承认与美国在情报搜集方面存在有韩美启动第六轮防卫费分担会谈 意见分任贤良任国家互联网信息办公室专职副主银泰15周年大庆 抢鲜预购卡首次浙江大型留学网站亦邦留学网正式上线荐号|微信圈里的当红花旦,你捧场了吗男子为盗顾客银行卡信息 到超市应聘收霍华德·马克斯:牛市中别昏头,杠杆是2014欧洲佳片巡礼:50部欧洲电影2015金融创新论坛郑州举行 郑州银在线理财新秀基石在线:互联网金融智慧民用无人机行业研究报告奴隶战详细攻略 炉石传说战士卡组攻略中国首例冷冻胚胎继承权案二审宣判:胚深夜说 | 美好的事物需要代价,比如萌帅萌帅!看看郑大新生军训中的女神连
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘