数极客首页

怎样打造高性能的移动用户体验

在新家一点点布置

了下来,不过心里还是缺乏踏实的方向感;猫猫们也都有些瞻前顾后风声鹤唳
的样子,有待继续习气
;希望大家都好好的。话说眼前的这篇候选文章貌似已然有同行做过译文,不过正像 “关于BeForWeb”中所说的,我只挑那些我喜欢的 、对我自己

有学习和珍藏

价值的内容来做译文,其他方面的要素
和我没有半毛钱的关系。不多说,直接进入正题。

在人际关系中,良好的第一印象是十分

重要的,人们愿意在彼此身上寻求信任与诚实

,并希冀
在接下来的阅历
中重现和增强

这些好感。同样的道理也体往常

移动

应用或互联网产品中。在打造良好的品牌信誉及其与终端用户之间耐久
信任关系的过程中,“设计”扮演着极端
重要的角色。

在用户的希冀
中,移动

应用应该是精确

、友好和高效的。但是
,移动

设备自身

的局限性的确

为产品的设计带来了不少应战
。要打造值得信任
的移动

应用用户体验,产品在性能方面的表现是极端
重要的关键要素

本文中,我们将对移动

应用的设计与性能表现之间的关系中止

讨论,并了解

七个相关的设计准绳

。这些准绳

都是我们(英文原文作者)团队在各类移动

应用理论

项目中逐步

总结归结
出来的 ;希望它们同样能够

辅佐

大家在落产品实需求的同时,从性能的角度愈加
合理的规划设计计划

移动

应用的性能表现

人们需求
经过
移动

应用在某种场景中完成一定的需求目的
,例如提升效率、温馨
度,或是单纯的找找乐子。“效果

”是移动

应用的一个中心
要素
,它们必需
够快够稳定,才干
在各种充溢
变数的运用
场景中有效的提供功用
与价值。

但是
,在理想
中我们经常
发现,关于
很多移动

应用来说,设计和开发周期却始于对视觉外观的猛烈

诉求:“ 它看上去必需
很棒!” 诚然,出色的视觉作风
能够

经过
优秀的第一印象来吸收
用户,但是要想让一款应用得到用户耐久

的喜欢

,每个方面的质量和表现都含糊

不得,特别
是在性能方面。中看不中用的产品只会破坏

它自己

的信誉,用户很快就会察觉

其迟缓

的运转
速度,致使

会因尴尬

以忍耐

的加载时间或频繁的解体

而以为
这款应用基本

无法运用
;这对产品的可用性和品牌感知都是极大的损伤
。在用户的希冀
中,一款应用必需
第一
具有快速的响应性,否则,最直接的结果
就是在App Store中得到差评,装置

率少的不幸

下图是Twier与Cookmate两款应用的界面对比

;抛开用户基础

方面的要素
,即便

具有
炫目的视觉效果, Cookmate的用户打分和评价也无法超越界面简约
朴素的Twier客户端。

怎样打造高性能的移动用户体验

性能表现与品牌差别

产品的每个方面都会影响品牌感知。通常状况

下,用户的央求

很简单,他们只想找到最合适

的工具,来辅佐

他们真实

改善生活中的某些方面。要使自己

的产品在缤纷的市场中脱颖而出,树立起品牌,并真正的吸收
用户,你的应用必需
在某些方面强于对手,或是具有
其他应用所不具备的特征
。作为移动

用户体验中的重要元素,优秀

的性能表现会直接辅佐

你的应用在品牌层面超越其他同类产品。进一步说,假定

你能攻克某些技术应战
, 使相关的特征
功用
能够

流利
稳定的运转
,那么这绝对会成为你的产品中难以被复制的共同
卖点。

关于这一点,Flickr的iPhone应用是个不错的例子。Flickr曾经在他的主站中宣称

,他们的应用有两大目的
:一方面辅佐

用户展示

他们照片,另外还会提供全新的组织照片与视频的方式。他们的应用的确

很好的做到了这两点,有效的提升了品牌信誉度。

怎样打造高性能的移动用户体验

所以,在规划你的应用产品时,有必要第一
对市场中止

剖析

,并问自己

两个问题:

  • 我们的应用与竞争对手相比有哪些不同?
  • 我们能够

    在哪些方面做的比竞争对手更好?

明白
了这些方向性的问题之后,再将留意
力放在产品的设计与开发上。

性能表现与设计

无论打造怎样的产品,正确的方式办法

都是至关重要的,这也是人们制定设计与工程准绳

的初衷。一款汽车的设计会影响到它的空气动力表现;一座桥梁,除了要有漂亮的外观,对风力及交通负载的接受

才干

也是在设计过程中必需
思索
的中心
要素
。同样的道理也体往常

移动

应用的设计当中。对设计计划

的选择会影响到应用的各个方面,包括内容呈现、交互性、视觉外观,以及最重要的一点——性能表现。

我们能够

发现,很多产品团队会将性能表现方面的义务
丢给技术开发人员;这种传统观念所构成

的最直接的结果,就是很多触及
到性能方面的潜在问题只需

在设计流程的序幕
、开发环节的初期才会暴显露
来。理论

上,技术开发方面的相关角色应该在产品创意初期就适度的介入到项目中来,坚持
对设计计划

的技术可行性评审。

接下来要提到的一些与用户界面性能表现相关的要素,以及本文后半部分

将要引见
到的七个设计准绳

,会辅佐

大家一点点认识到,移动

应用的性能表现绝不只
是技术人员需求
思索
的问题,它与设计之间关联也是相当密切

的。

移动

应用用户界面中的性能要素

用户对移动

应用的性能表现的感知来自多方面,包括启动速度、界面加载时间、动画效果的流利
水平

、对交互行为的响应时间、出错状况

等。下面的表示
图向我们展示

了这样一些要素:应用(包括视觉图像、交互方式、内容、功用
、代码算法等)在一定的硬件条件下(CPU、屏幕尺寸等)运转
在某个系统平台(iOS或Android) 的移动

设备中。关于
很多应用来说,它们还需求
经过
网络(LTE、3G、2G)与效劳
器端中止

后台衔接
。图中上面 两块红色区域所代表的,是一款移动

应用产品中最容易遭到
设计与开发决策影响的部分

。下面两块灰色区域,属于产品设计过程中需求
思索
的牵制性要素

怎样打造高性能的移动用户体验

关于
图中所示的每项要素
的决策,都会影响到最终产品的性能表现。任何方式
的组合、增强

(例如高级的 视觉效果)或限制(例如糟糕的网络衔接
状况

)都会增加产品复杂度,降低性能,破坏

用户体验。举例来说,假定

为了增强

视觉效果,应用必需
在迟缓

的网速状况

下,衔接
后台效劳
器以获取更多的资源文件——这就是一种势必会降低产品性能的条件组合。

七个设计准绳

在过去的几年中,移动

范畴
呈现
了很多变化。一些新的UI设计作风
开端
涌现,设备屏幕尺寸及处置
器性能规格都在逐步

向桌面设备靠拢,输入方式也发作
了反动
性的改动

在这种状况

下,设计师们需求
不时

努力去尝试愈加
先锐的、特征
鲜明、性能出色

的设计计划

。我们所说的设计与性能的关系,并非单纯的指降低图片尺寸一类;在设计流程的不同阶段和不同层面中的各种决策,都会对产品的性能和效果

构成

影响。下面,就让我们一同
来了解

一些能够

在实战中有效辅佐

我们打造高性能移动

用户体验的设计准绳

1.定义用户界面的品牌特征

移动

应用中的每一个能够

与用户产生互动的中央
,无论是单一的交互元素,还是功用
模块整体,都应该有助于提升产品的品牌认知度、用户忠实
度及称心

度;设计人员应该有才干

辨认

出它们当中最关键的那些,例如特征
功用
、视觉作风
、文案、字体或动画效果等。我们的团队经手过很多不同的产品,固然
从整体角度讲,它们具有各自的品牌作风
,但这些设计计划

大多是由同一套基础

UI元素衍生展开

出来的。我们能够

将基础

UI元素组合成为界面模块,而组件化、可复用的中心
界面模块,则能够

进一步构成整个用户界面。

所以,经由对这些UI元素的作风
设定,我们就能够

逐步

为界面整体打造出能够

表现
品牌作风
的独有特质。在概念阶段,试着将那些在以下几个方面发挥关键作用的UI元素辨认

出来:

  • 有助于提升产品差别

    化竞争力的功用
    (例如Path中的照片检视等)。

  • 产品中心
    功用
    (例如在线购物类应用中的结帐功用
    )。
  • 方式

    化的设计言语
    。Windows Phone 7的Metro UI是一个典型的例子:具有猛烈

    作风
    的字体、规划
    和交互等方面的方式

    ,构成了其共同
    的设计基因。

怎样打造高性能的移动用户体验

这些能够

表现
品牌特征
的中心
要素,自身

要具有很强的响应性。它们会被用户不时
的看到、用到,而且会在产品不同的功用
界面中被复用;它们的性能将直接决议
一款应用的整体表现。将设计与开发的留意
力放在这些关键要素上,将会是一件事半功倍的事情。

2.判定

产品优先级

对“效果

”一词的了解

能够

上升到整个产品研发周期及市场的层面上。很多时分
,公司会希望快速上线一款新产品,或是开发一个产品系列(例如基于一个平台的多款同类产品,或面向不同平台的单一产品),亦或是出于时间和资源的限制,必需
从多个产品当选

择一款来优先完成。在这类状况

下,设计与优化的工作力气
就必需
集中在那些最重要的产品上。优先级矩阵能够

有效的辅佐

我们理清头绪

怎样打造高性能的移动用户体验

上图所示的抉择要素
包括系统平台、当前用户量、预期用户量、竞争对手状况

;当然,我们还能够

从其他更适合

自己

项目的角度来中止

权衡。假定

产品受众多数是Android用户,而且你的竞争对手也在盯紧他们,那么与其将肉体

分摊在各个平台当中,倒不如集中资源打造一款简约
高效的Android应用并尽快投入市场。

3.认清用户需求

我们团队阅历
过的很多项目,在刚刚启动时都面临着一些相似

的问题:功用
需求列表过于冗长,焦点不明白
,难以在项目截止时间之前搞定…客户或需求方通常会对产品功用
中止

天马行空般的想象,却常常
忽视

了用户的真正需求。

举例说,无论你是在一个小城镇,还是牛津大街,或是在互联网中,血拼的实质

目的,都是寻觅
合适

的商品并中止

置办

。良好的用户体验能够

为购物过程带来更多的乐趣,但绝不能破坏

这件事的中心
目的
。用户希望经过
购物类的应用来快速的找到某种商品,并顺利完成置办

;他们致使

会忽视

那些用于增强

体验和乐趣的额外功用

下图展示

了一款购物应用的商品详情页面的两种设计计划

。左边的原型中包含了一些“高级”购物功用
,例如赠礼、相关商品和用户评价;而右侧的原型简化了很多:去掉了赠礼功用
;只显现
该商品的整体打分状况

,假定

用户需求
,能够

点击链接查看全部点评;省出的空间用以显现
商品引见
的全文,用户无需进一步点击就能够

完好
阅读

怎样打造高性能的移动用户体验

显然,右侧的计划

能够

让团队将设计与开发的留意
力放在中心
功用
上;从产品的角度,这也是最契合
用户的直接需求、最具性能效果

的计划

。那些“如虎添翼
”性质的内容和功用
,即便

真的有必要存在,也应该是在我们对产品中心
功用
做了最充沛

的优化和最合理的设计之后,才陆续退场
,并且不能影响中心
功用
的可用性及性能表现。

4.优化用户界面流程和元素

用户不喜欢等候
。在Google的用户体验十大内在准绳
中,时间方面的要素
紧随“用户需求”排在第二位。对应用的每一个界面流程及其构成元素的优化,都能够

不同水平

的降低加载及响应时间。

A.增强

可感知性

在很多状况

下,设计师和开发者的确

无法控制产品性能:网速或许
会很慢,系统后台或许
正运转
着多任务,某个功用
或许
需求
大量系统资源来支持运算等等。无论怎样,在延迟发作
的时分
,我们至少应该让用户感知到应用仍处于运转
状态。即便

在无法预料

的坏状况

中,合理的设计计划

也能够

起到良好沟通作用。

第一步是要辨认

出哪些功用
流程有可能构成

延迟,例如那些需求
获取后台数据或是执行大量运算的运转
过程。接下来,在这些关键流程中添加必要的状态反响

标识,例如loading动画效果,或是一些文案小提示。

下图演示一个比较

典型的内容搜索流程:

怎样打造高性能的移动用户体验

用户在这个流程中阅历
了四个步骤:

  1. 点击搜索按钮。
  2. 看到loading动画提示。
  3. 看到了搜索结果中的文字内容;这时图片还在加载。
  4. 看到全部图文内容。

显而易见,比起从第一屏开端
阅历
一段等候
时间然后突兀的直接进入第四屏,将流程分为几个短暂的步骤并给予状态反响

的用户体验要好的多。即便

中间耗费

了同样的时间,分步的设计计划

也能够

使应用的性能在觉得
上愈加
流利
高效。

另外一个典型的情形
是应用刚刚启动的时分
。第一
显现
一张适合

该应用作风
和规划
的图片,会降低用户对加载时间的感知;同时配合loading动画提示一同
运用
的话,效果会更好。

B.优化UI元素

任何一个UI元素都会影响到产品整体的性能表现,每个点滴之处的优化工作都能够

对性能的提升起到推进
作用。能够

重点关注以下几个方面:

  • 元素的类型:不同类型的UI元素对产品性能的影响水平

    也不同;优化工作能够

    依照

    一定的优先级中止

    ,例如能够

    集中资源第一
    处置
    那些音频、视频、地图等类型的媒体文件。

  • 元素的规格特性:拿图片文件来说,分辨率或色深会对渲染时间构成

    影响。在Android中,任何可绘制资源(jpg、png)都会被解码为位图格式。所以,每一张在分辨率或色深方面经过优化处置
    的图片都能够

    俭省
    出几KB的样子。

  • 元素的输出方式:这方面能够

    针对细致

    状况

    做不同的处置
    ,例如关于
    需求
    一整张图片作为背景的应用来说,假定

    主要内容部分

    有自己

    的非半透明背景样式

    ,那么大背景图片就没有必要全部输出了。

5.定义界面元素的权重规则

精心打造设计计划

的过程,就似乎

在一片充溢
障碍物的陆地上中止

探求

;我们必需
时辰
对功用
、外观、可用性、性能表现等方面的要素
中止

权衡和取舍。关于
某些系统平台来说,设计师要做更多的妥协。但是
,无论系统方面具有怎样的限制,产品都必需
坚持
自身

的品牌特征

我们能够

经过
一定的办法

来判别
UI元素之间的重要水平

关系。有些元素关于
品牌效应的贡献

水平

是很大的,而合理的移除那些相对次要的元素,也是提升产品性能的有效方式。我们的团队从这个角度对UI元素中止

了如下分类:

  • 必不可少的:最能表现
    品牌特征的中心
    UI元素,例如包含了logo和产品称号
    的标题栏。
  • 具有可替代性的:在相对高端的设计计划

    中,这类元素能够

    由性能负载相对较低的输出方式替代
    。例如去掉标题栏的半透明效果。

  • 非必要的:这类元素通常用来增强

    用户体验,在必要的时分
    能够

    简化或移除。例如将搜索结果条目的数据量
    由25个减为10个。

怎样打造高性能的移动用户体验

6.运用
信息面板

团队之间的信息沟通,关于
打构成

功的产品来说是必不可少的。我们阅历
过的很多项目中,设计、开发、市场等部门的相关人员对同一款产品的了解

有着很大的不同。从不同职能角度动身
的各种功用
需求与资源限制都会影响到最终产品的性能表现,所以坚持
信息沟通的顺畅是很重要的。

信息面板是一种用于增强

团队间交流沟通的处置

计划

。它能够

辅佐

我们对产品当前的状态中止

度量和监测,并设定下一阶段的目的
;了如指掌
的呈现方式愈加
便于团队之间对产品状态、功用
预期和设计开发重点等方面的信息中止

及时的交流。

我们通常在信息面板中标识以下几个方面的要素

  • 中心
    功用
    需求
    :列出用户在运用
    产品时将要阅历
    到的中心
    功用
  • 基准评分:列出重点竞争对手的同类产品在这些中心
    功用
    方面的性能表现数据。
  • 当前完成度:列出自己

    的产品在当前阶段中在这些中心
    功用
    方面的性能表现数据。

  • 目的
    :列出自己

    的产品在这些中心
    功用
    方面的目的
    希冀

  • 停顿
    状态
    :标明产品的当前状态能否
    曾经
    抵达

    了目的
    希冀

怎样打造高性能的移动用户体验

相似

的办法

和工具还有很多,包括Android SDK自身

,或是TraceView等。

7.UI工程技术

将优秀的设计计划

经过
相应的技术办法

完成
出来,也不是一件易事。除了忠实的恢复

设计计划

之外,要使代码同时能够

带来高效的性能表现,通常需求
专家级别的技术才干

,特别
关于
移动

应用产品来说,需求
相关人员具有
丰厚
的前后台开发阅历

,同时对视觉及交互设计等方面具有深化

的了解

规划
、图像、动画的输出和完成
方式都会牵扯到效果

方面的问题;在选择完成
计划

时,最好从一些细致

的方面中止

思索
,例如:

  • 智能化的内容加载:能够

    在合适

    的中央
    运用
    例如lazy loading这样的方式,第一
    加载当前可视部分

    的内容,并经过
    用户的阅读
    行为触发其他内容的加载。这种方式能够

    很有效的提升界面效果

    ,使体验愈加
    流利

  • 背景图形的加载:背景的完成
    方式对界面性能的影响也是很关键的;通常状况

    下,背景图形能够

    经过
    整张大图、小图重复

    平铺或纯样式

    代码等方式完成
    。关于
    不同类型的界面,需求
    采用最合适

    的完成
    方式。

某些项目中,设计和开发等相关部门关于
一款产品的义务
是分别

的;这种状况

下,最终产品的用户界面在外观及性能等方面的表现必然也是缺乏统一性的。由于
每个团队都有他们各自的目的
,所以在那些必需
通力配合的中央
,例如用户界面性能优化等方面,执行力气
常常
无法集中。关于
这样的状况

,我们的一种处置

办法

是,将前端开发方面的职能角色并入设计团队,这能够

让触及
到界面恢复

和前端效能等方面的开发工作愈加
契合
用户体验设计的工作思绪

总结

经过
本文,我们能够

了解

到,每个层面的设计工作都会对产品的性能表现构成

不同水平

的影响。所以在设计流程中,效果

方面的要素
是不时

需求
被思索
到的。否则,在随后的相关流程中,性能方面的潜在问题会越来越多的暴显露
来。

关于
这七个设计准绳

,我们曾经
胜利

的在很多产品的设计过程中中加以贯彻,并真实

提升了产品在性能体验方面的表现,使它们看上去、用起来都很棒!

本站原创编译文章。如需转载,请注明:本文来自Be For Web

英文原文:

http://www.smashingmagazine.com/2011/07/18/seven-g…

译者信息: C7210 – Web设计与前端玩家,现就职于大众

点评网产品部用户体验设计组(UED)

 

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章