(转)iOS Wow体验 - 第五章 - 利用iOS技术特性打造最佳体验

本文是《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第五章译文精选,其余章节将陆续放出。上一篇:Wow体验 - 第四章 - 为应用的上下文环境而设计

关于本套译文分享的详情及目录结构,请参考iOS Wow体验 - 译文分享说明。

全文由C7210自发翻译(编译),并首发于Beforweb.com,如需转载,请注明译者及出处信息。英文原书版权由Apress所有,中文引进版的版权由相关出版社所有。

iOS是设计师们得以施展技能的绝佳舞台。同时,苹果也向开发者们提供了一系列专业化的技术方法,帮助他们从容应对各种复杂的设计方案所带来的挑战。

伴随着技术的革新与发展,越来越多的交互体验模式正在孕育而生。设计师的创作思路得以扩展,技术开发人员也拥有了更多高效的方法和工具来准确的实现设计方案。设计与开发之间的障碍正在被各种新技术不断的突破,项目中一些职能角色的性质也在发生着变化,越来越多的设计师超越了相对传统的专职领域,开始直接进行开发方面的工作。

对于团队来说,那些同时掌握着设计与开发技能的人员是非常有价值的。我们所说的这种“掌握”不单单是指对于技术概念或术语有基本程度的了解,更重要的是,设计师需要对开发技术在各方面的特性及优缺点做到心中有数,并能针对这些特性来创造最合理的设计方案。

当然,要设计人员或团队完全精通某种开发技能,并且在相关平台中有过大量实战经验,这是不现实的,也没有必要。不过,如果设计师曾经切身实践过开发方面的工作,或是参加过相关的内部培训,那么这些经历通常可以有效地帮助他们打造出更具可行性的设计方案。另外一方面,不妨向更加专业的技术人员进行请教,让他们帮忙找出那些有可能对设计方案的实现与还原造成影响的潜在因素。

接下来,我们将一同了解一些在iOS当中负责实现各种视觉交互表现形式的核心技术,并对它们各自的功能进行分析。这些技术知识会帮助你对设计方案的可行性及相关的开发方式做到心中有数。

除此之外,我们还将了解一些其他方面的话题,包括界面外观的自定义、通用型应用、原生应用与Web应用的差异等。

关键性的图形技术

作为设计人员,你需要对四种关键性的图形技术有所了解。它们可以被分为两大类,第一类是用于支持iOS本地渲染的苹果专有技术,而第二类涉及到OpenGL,这种第三方技术可以有效地利用硬件加速功能渲染复杂的图形。怎样从设计的角度来理解这些概念呢?简单的说,第一类技术用于打造用户界面及相关交互元素的视觉表现形式,而与OpenGL相关的第二类技术的主要作用,则是在游戏或类似的上下文环境中对各种极端复杂的图形和动画效果进行即时渲染。

需要注意的一点是,这些技术虽然各司其职,但并非只能专门用作各自的上下文领域。通过对这些技术的作用加以理解,你就可以对设计方案的实现方式做到心知肚明。特别是当你正在尝试一些独特的交互形式的时候,对于相关实现技术的了解就显得尤为重要了。

UIKit

UIkit是用来打造iOS应用的最重要的图形技术框架,它提供了用于构造触屏设备用户界面的全部工具和资源,并在整个交互体验的塑造过程中扮演着至关重要的角色。

设计方案中的绝大部分内容都需要通过UIKit来实现,因为用户在iOS中所接触到的任何一种用户界面控件都由它来负责定义和输出,包括基本的按钮、滑块、文本域、切换开关等。除了这些标准控件之外,UIKit还提供了很多方法来帮助我们对控件的外观进行自定义。所以在界面元素的视觉表现形式上,我们不必受制于各种控件的默认样式。外观自定义工作还会涉及到我们将要在后文中了解到的其他图形技术,但是相关的解决方案都是由UIKit在整体上控制的。

除了能够使用你所指定的图形文件(例如PNG图片)对界面控件的外观进行自定义之外,UIKit还能够程序化的渲染图形对象,换句话说,它可以按照我们设定好的规则来绘制图形。UIKit在这方面的能力与一些常见的矢量图形绘制技术很相似。在类似的方法中,我们通常需要定义最基础的几何图形或路径,然后为这些路径赋予具体的视觉属性,以实现设计中的目标样式。不过有一点需要提醒一下:这种程序化的绘图方式确实可以对生产效率起到一定的提升作用,然而另外一方面,你却需要花费更多的时间与精力去跟进到接下来开发流程当中,以确保技术人员所定义的图形属性可以精确的还原你的设计方案。在实际项目中,最好能够在开发流程之前与相关的技术人员一同对设计方案中的每一个细节进行充分的评估,确定一套最合理的图形技术方案。

uikit_classes

核心图形 (Core Graphics)

核心图形是用来实现用户界面视觉设计方案的重要技术框架。这套框架的核心是名为Quartz 2D的二维图形渲染引擎,它不仅可以动态地渲染很多不同种类的图形,而且还可以使应用具有创建和编辑图像的能力。

你可以将核心图形理解成一种能够帮助你扩展产品功能的技术框架。相比于UIKit,它更擅长于处理那些较为复杂的图形;不过在必要的时候,也可以用来对普通用户界面元素进行渲染。相比之下,UIKit在界面外观自定义方面的支持能力更强。所以,只有当设计方案涉及到相对复杂的图形变换、队列处理和即时合成等方面的需求时,核心图形技术框架才能真正体现出它的优势与价值。

核心动画(Core Animation)

核心动画向开发者们提供了一套用于创建和渲染动态交互效果的简单易行的解决方案。换句话说,这项技术可以让你的设计方案真正动起来。通过与UIKit的紧密配合,核心动画可以将界面交互对象与动画过渡效果进行完美地整合。

作为一种强大的技术工具,核心动画的能力范围是非常广泛的,它能使开发者在很多不同的层面上创建并控制交互对象的动画属性,而这对于设计师来说,则意味着能够实现的独特而高度定制化的动画效果的可能性几乎是无限的。

OpenGL ES

OpenGL ES与前面几项技术有所不同,它并非苹果所创造并独有的。OpenGL ES是面向嵌入式设备的OpenGL 3D图形应用程序接口(API),它必须与核心动画协同配合,完成2D或3D图形内容的渲染输出。

OpenGL ES可以通过硬件加速功能来渲染那些极端复杂的图形,所以这项技术通常被用来在游戏当中绘制那些需要进行即时渲染的3D图形。不过它的能力不限于此,通过与我们在前面了解到的那些技术的整合,它同样可以被用来渲染普通的元素,甚至还能以全3D的方式打造整个应用的界面环境。

是否有必要在应用的开发中使用这项技术,最终还是取决于设计方案所要求的视觉表现形式。对于那些没有必要通过硬件加速功能来即时快速渲染的2D或3D图形,其他技术同样可以胜任。不过,如果你希望借助强大而复杂的技术工具对那些具有实验性质的视觉交互形式进行探索和挖掘,那么OpenGL ES的强大能力将不会让你失望。

logo-opengl-es

界面外观的自定义

究竟有没有必要对应用的界面外观进行自定义?在打造设计方案的时候,我们通常会在这个问题上产生纠结。特别是在苹果刚刚推出应用商店的时候,这个问题显得尤其普遍与突出。为了能够尽快地将应用发布出去,以占领市场先机,产品决策者们宁愿放弃掉很多至关重要的设计流程,以达到压缩产品开发进度的目的。如今,从整个应用市场的角度来说,这种局面有所改善,人们再也不能忽视设计的重要性了,但是对于一些刚刚试水iOS应用的团队来说,类似的问题依然存在。

很多公司和产品团队总是无法意识到高度定制化的界面外观对于一款应用产品的重要价值。其实道理很简单,如果只使用SDK(开发工具包)提供的默认控件来构筑用户界面,你的应用就会完全处于iOS原生的视觉识别体系当中,在用户体验方面也无法超越苹果制定的范围框架。虽然从本质上讲,这并不是一件坏事,但这种方式显然无法将具有品牌特色的用户体验效应整合到产品当中;无论是视觉表现形式还是交互方式,都难以满足用户对于差异化的渴望。

抛开产品策略方面的因素,界面外观的自定义工作在技术层面不存在任何障碍。正如我们在前文中看到的,苹果在这方面有针对性的为开发者们提供了很多强大的图形技术。从某种程度上说,这项工作本应该成为整个设计开发流程中的一个重要且必要的组成部分。

ios-iphone-UI-Appearance-Customization

有一点需要说明的是,界面外观自定义的设计原则并非是泾渭分明的,实际上你确实不需要对所有的界面组成要素都进行定制化的处理,在很多情况下,使用SDK提供的原生控件反而更加合理。作为设计师,你要做的就是处理好原生控件与自定义样式之间的关系,将它们协调的整合在一起,确保用户不会对这两类元素产生彼此孤立与分化的感知。

除了使用新的图形样式对各种常规界面元素的外观进行自定义之外,你还可以创造出全新类型的的界面交互对象,并为它们赋予独特的交互方式。不过,对于这种明显超出了“换肤”范畴的做法,苹果在用户界面设计规范当中所体现出的态度并不是具有鼓励性的,因为全新类型的交互对象会对用户的认知造成很大的障碍。作为规范,持有相对谨慎的态度是合乎情理的,不过这种具有极高创新性质的做法究竟能否成功,在很大程度上还取决于设计方案本身。过于隐晦的表现形式必然会使用户产生迷惑与挫败的感觉,无论它看上去有多酷;而简单直白、易于理解的方案则具有相当高的可行性。

通用型应用

在过去的几年中,iOS设备种类及规格的扩大发展为应用设计师与开发者带来了不少挑战。从前,我们只需要为一种设备规格打造设计方案;随着iPad的到来,事情开始变得复杂起来,我们必须针对新设备的特性考虑另外一个版本的设计方案。而开发团队也面临着同样的问题,他们必须同时开发和维护两个版本的应用,工作量几乎翻倍。

不久之前,通用型应用的概念出现在了应用商店当中,这种应用可以运行在任何类型的iOS设备当中。它会自动判断当前的设备环境,并在用户体验形式上作出相应的调整,例如可以通过不同的方式对用户界面进行渲染,在功能方面也会根据当前平台的具体情况发生相应的改变。

对技术开发人员来说,通用型应用是个好消息,它可以避免不同版本所带来的重复性工作,极大地提高开发流程的生产效率。不过站在设计师的角度,你仍然需要准确的把握不同设备在用户行为及体验模式上的差异,确保设计方案可以适用于它们各自的系统平台。而这种方式带来的进步也是显而易见的。在必须针对不同设备打造两个独立版本的情况下,你需要对已有的一套设计方案进行改造,在界面元素和交互形式等方面进行全方位的调整,以适应新的设备平台,这必然会导致两个版本的应用在界面外观和操作方式等方面存在显著的差异;而对于通用型应用,你可以在设计过程中预先考虑到两种设备的不同特性,并且能够在同一套设计方案中针对这些差异来定义局部样式或功能的响应式调整规则,从最大程度上确保用户体验的一致性。很多同时拥有两款设备的用户会在不同的需求情景中使用不同的设备来操作同一款应用,在这种情况下,具有高度一致性的界面外观及交互方式就显得尤为重要了。

原生应用与Web应用

如今,关于是否真正有必要开发iOS原生应用的问题,行业中还存在一些争论。在当前复杂纷乱的移动市场中,除非你有足够的资源,否则为每一种设备平台都单独打造一套原生应用确实是不大现实的。在很多情况下,移动版本的网站或是Web应用都可以很好的满足需求。不过,在你着手于Web方向的解决方案之前,有一些重要的问题必须事先了解清楚。

在用户体验方面,Web应用与原生应用之间的差距还是很明显的。如今,有很多前端开发技术框架可以帮助我们打造基于浏览器运行的Web应用。这些应用无论在界面外观还是交互方式上都与原生应用非常相似。然而,在实际的移动设备上下文环境中,它们仍然无法与原生的方式相提并论。正像我们在前文中了解到的,苹果为开发者们提供了很多强大的图形技术工具,作为设计师,我们不仅可以在设计方案中打造高度定制化的界面外观及交互效果,更重要的是,这些视觉表现形式都是在系统级别甚至硬件级别的功的支持下高性能的展现出来的。相比之下,基于浏览器运行的Web应用解决方案通常只能提供数量非常有限的交互效果,而且在性能方面更是无法与原生应用相比。所以,如果你正在考虑使用Web应用的方式来打造产品,至少要确保你的设计方案当中不会涉及到过多的视觉交互效果。

其实,对于这两类应用,我们并不需要争论出一个非此即彼的结果,因为iOS允许这两种形式在同一款应用中兼容并包的存在,一款原生应用当中完全可以同时包括本地化的界面控件与基于Web的页面元素。这种混合型应用可以将两者的优势淋漓尽致地发挥出来,使其自身即能拥有原生应用高性能的表现力以及对硬件功能的访问能力,同时又具备Web应用的动态性与灵活性,并且更加易于维护。

最终,对于解决方案的选择仍然取决于产品自身的功能及用户体验需求。任何关于产品实现方式的讨论都必须从这个角度出发。

总结

苹果为开发者们提供了四种用于渲染界面对象和视觉交互效果的关键性图形技术:

  • UIKit:用于绘制界面元素的最重要的图形技术框架,在整个交互体验的塑造过程中扮演着至关重要的角色。
  • 核心图形(Core Graphics):二维图形渲染引擎, 可以动态地渲染很多不同种类的图形,并能使应用具有创建和编辑图像的能力。在必要的时候,也可以用来对普通用户界面元素进行渲染。
  • 核心动画(Core Animation):可以在UIKit的配合下,为用户界面中的交互对象创建动态的视觉效果。
  • OpenGL ES:面向嵌入式设备的OpenGL 3D图形应用程序接口(API),可以通过硬件加速功能来渲染具有高性能表现的2D或3D图像。

以这些图形技术为后盾,我们可以在设计中大胆地尝试高度定制化的用户界面外观与独特的交互表现形式,甚至可以对交互对象的视觉行为属性进行实验性的探索。

通用型应用的概念可以帮助我们有效的降低开发与维护成本,将iPhone与iPad两种版本的产品需求整合到同一款应用当中。不过,作为设计师,你仍然需要准确的把握两款设备在用户行为及体验模式上的差异,确保设计方案可以适用于它们各自的系统平台。这种方式所带来的进步是,你可以在设计过程中预先考虑到两种设备的不同特性,并在同一套设计方案中针对这些差异来定义局部样式或功能的响应式调整规则,从最大程度上确保用户体验的一致性。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: c7210 - UX玩家、交互设计师、曾经的视觉与前端、猫奴、guitar fucker...现就职于携程无线事业部。

转载于:https://www.cnblogs.com/greywolf/p/3260301.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265713.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

fetch 自动加cookie_WEBUI自动化开发(第五章)

Requests是Python的非常常用的HTTP的库,主要用于网络爬虫和接口自动化测试。下面使用Requests最新版本,通过pip install requests安装。pip install requestsCollecting requests Downloading requests-2.25.0-py2.py3-none-any.whl (61 kB) |███…

结构体对齐计算方式

目录法则一:结构体成员的偏移量必须是成员大小的整数倍(数组除外)法则二:结构体大小必须是所有成员大小的整数倍(数组、结构体除外)带数组的结构体大小计算带结构体的结构体大小计算带联合体的结构体大小计算pragma pack(4)向4对齐对齐方式确实很浪费空间…

【计算机算法设计与分析】——5.4最优二分检索树

(n为结点个数) 为成本差额 转载于:https://www.cnblogs.com/chihaoyuIsnotHere/p/9815498.html

dataframe常用操作_Pandas | Dataframe的merge操作,像数据库一样尽情join

点击上方蓝字,关注并星标,和我一起学技术。今天是pandas数据处理第8篇文章,我们一起来聊聊dataframe的合并。常见的数据合并操作主要有两种,第一种是我们新生成了新的特征,想要把它和旧的特征合并在一起。第二种是我们…

2.空间配置器

SGI 特殊的空间配置器 std::alloc 一般而言,我们习惯的C内存配置操作和释放操作是这样的 class Foo{…..} Foo* pf new Foo; delete pf; new包含两阶段操作 (1)调用 ::operator new 配置内存 (2)调用 Foo::Foo() …

Github的简单使用(网页版)

目录Git和GithubGithub基础概念注册Github账号创建仓库及文件新建仓库新建文件文件的编辑和删除编辑或修改文件删除文件文件的上传文件的查找及下载文件的查找文件的下载IssuesFork开源项目贡献流程Git和Github 什么是Git Git是一个免费、开源的版本控制软件 什么是版本控制…

常用到的正则表达式

2019独角兽企业重金招聘Python工程师标准>>> 常用的正则表达式 1、匹配只含有英文字母和阿拉伯数字 ^[a-zA-Z0-9-]$ 2、匹配电子邮件地址 ^[_a-z0-9-](\.[_a-z0-9-])*[a-z0-9-](\.[a-z0-9-])*$ 3、匹配中文字符 [\u4e00-\u9fa5] 4、匹配国内座机电话号码 (\d{3}-|\d…

CSDN绑定GitHub账号

目录1.点击自己头像进入个人中心2.点击账号设置,选择绑定三方账号3.选择GitHub绑定绑定成功,主页获取勋章1.点击自己头像进入个人中心 2.点击账号设置,选择绑定三方账号 3.选择GitHub绑定 绑定成功,主页获取勋章

My97DatePicker在asp.net项目中的使用

1、去官网下载 My97DatePicker 包 http://www.my97.net/ 2、比如实现如下图所示功能 2.1 先把下载来的包添加到解决方案 2.2 然后在页面引用css文件和js文件 <link href"My97DatePicker/skin/WdatePicker.css" rel"stylesheet" type"text/css"…

机械秒表的使用方法_让console.log()不再是你的唯一选项js日志输出6种方法

几乎所有的javascript开发者最常使用的日志打印调试api都是console.log(),其实还有很多的选项供我们选择&#xff0c;笔者下面就为大家一一介绍.一、console.table()console.table()是我非常建议大家去使用的方法&#xff0c;它可以接受JSON或数组并以表格格式打印&#xff0c;…

Git的安装(附安装包)

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…

【10.20校内测试】【小模拟】【无向图建树判奇偶环】【树上差分】

Solution 和后面两道题难度差距太大了吧&#xff01;&#xff01; 显然就只是个小模拟&#xff0c;注意判0就行了。 Code #include<bits/stdc.h> using namespace std;char s[100005];int main() {freopen("expression.in", "r", stdin);freopen(&qu…

微信(QQ)截图时,无法保留鼠标右键菜单选项内容

问题描述 按下右键后弹出菜单&#xff0c;再按下QQ截图热键"Ctrl&#xff0b;Alt&#xff0b;A"&#xff08;微信"Ctrl&#xff0b;A"&#xff09;时&#xff0c;却发现菜单不见了。 微信的解决方法 先按下"Alt"键不放&#xff0c;再按住&quo…

使用WebClient请求WCF REST服务

2019独角兽企业重金招聘Python工程师标准>>> 接上篇”WCF实现REST服务“&#xff0c;服务端有了&#xff0c;我们看看客户端怎么访问&#xff0c;由于JS跨域的限制&#xff0c;这里通过WebClient做在后台代理来访问&#xff0c;话不多说&#xff0c;直接上代码。 1…

Git的工作流程简介

目录Git的工作区域Git的基本流程1.将工作区的代码添加到暂存区2.将暂存区的文件提交到本地仓库3.将暂存区的文件提交到远程仓库Git的工作区域 Git的基本流程 图形化方式操作 命令行模式&#xff08;Linux系统常用&#xff09;操作 1.将工作区的代码添加到暂存区 查看文件状态使…

git常用配置(指令)

1、配置用户名和邮箱 (1) 指令设置 $ git config --global user.name "username" $ git config --global user.email johndoeexample.com (2) 修改配置文件.gitconfig 2、配置ssh key免密登录 (1) 生成密钥 $ ssh-keygen -t rsa -C 1046407517qq.com (2) 在github添加…

PG git pull

2019独角兽企业重金招聘Python工程师标准>>> remote: Counting objects: 347, done. remote: Compressing objects: 100% (159/159), done. remote: Total 159 (delta 136), reused 0 (delta 0) Receiving objects: 100% (159/159), 23.16 KiB, done. Resolving del…

c51单片机led奇数偶数亮_两STM32单片机串口通讯实验

一、实验思路连接两个STM32单片机的串口引脚&#xff0c;单片机A进行发送&#xff0c;单片机B进行接收。单片机B根据接收到单片机A的指令来点亮或熄灭板载LED灯&#xff0c;通过实验现象来验证是否通讯成功。二、实验器材两套STM32F103C8T6单片机开发板、ST-Link下载器、杜邦线…

Git本地仓库文件的创建、修改和删除

目录基本信息设置1.设置用户名2.设置用户名邮箱Git仓库操作介绍1.创建一个新的文件夹2.在文件内初始化git仓库&#xff08;创建git仓库&#xff09;3.向仓库中添加文件1.创建一个文件2.将文件添加到暂存区3.将暂存区添加到仓库4.修改仓库文件1.修改文件2.然后把文件添加到暂存区…

作业4

一.题目&#xff1a;求一个二维整数数组中最大子数组的和二.设计思想&#xff1a;假如有一个i行j列的二维数组&#xff0c;可以有正有负通过两个子函数实现(一.)通过上次的一位数组求最大值&#xff0c;可以先求出每一行最大连续子数组的和(二.)记下上下边界元素的下标(三.)每一…