zoukankan      html  css  js  c++  java
  • (转)iOS Wow体验

    本文是《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...现就职于携程无线事业部。
  • 相关阅读:
    Sql优化思路
    「网络流随想随记」
    「ZJOI 的部分题解整理」
    「循环矩阵相关的一些东西」
    知识蒸馏
    3D Human Pose Estimation with 2D Marginal Heatmaps
    模型剪枝
    目标检测小网络
    selenium---解决clear方法失效
    selenium---快速跳转到指定元素
  • 原文地址:https://www.cnblogs.com/greywolf/p/3260301.html
Copyright © 2011-2022 走看看