产品使用的第一印象是至关重要的,因为使用者在意的是产品使用过程中是否和当初的 First Impression 一样的令人乐不释手。这种观念我很是认同,因为 2012 年时我大部份时间都在进行项目相关的项目开发,当时偶然下拜读了 Ivo Weevers 在他的 Blog 分享移动产品UI的设计观点,虽然已是一年多前的看法,但相较于现今的移动设计及市场发展其实大同小异。

       Ivo 强调的是设计上的原则,而原则是基于团队在开发移动产品时的经验累积,严格来说这些并不是 Design Guideline,但我认为这些观点很值得提供给移动产品开发者自我省思,重新思考产品的用户体验。

       七大UI设计经验法则

       自过去四年来,Mobility 上发生了很大的变化(例如UI、Screen、Processors 和输入模式等)。但是移动产品设计的任务究竟是?相信就产品设计而言,建立产品与终端用户间的关联性,从而实现对产品或品牌的支持,是大家一致认同的目标。然而最困难的就是如何满足使用者的全部要求,因此确定产品特色中的 Key Driver 就显得特别重要(例如性能有助于品牌的差异化)。

       让我们来看看有着高度经验的 Ivo 团队,所归纳出来的这七项 UI 设计经验,能否带给我们一些不同的行动设计体验。

       经验一:定义 UI 的品牌特征(Define UI Brand Signatures)

       一个 App 的 UI 应该优先反映出“品牌”,再进一步提高“忠诚度”和“满意度”。首要工作就是确定 UI 布局中哪些元素是最有助于品牌形象的(例如:功能、视觉效果、字体或动画)。再将这些元素统一收纳到 UI 模组之中,将有助于后续相关 App 产品的复用,延续品牌形象(例如:概念上类似软件工程中的建构管理,进行 Configuration Item 的定义)。

       但要如何定义 UI 的构成元素呢?要如何去发展产品的 UI 特征呢?例如 Microsoft 的 Metro UI 字体、布局和互动方式,就是一种明确的 UI 特征。

       寻找您的 UI 特征,有三种建议做法:

       1、发现 -- app 的独特性:也就是着重在 app 产品的主要需求,加强产品的独特性,例如“Path”这个 app 兼具 Instagram 的拍照特色以及 Facebook 的讯息功能,呈现出 UI 独特性之“照片墙/讯息墙”。                   

       2、呈现 -- app 的主要功能:假如您的产品是购物 app,则如何快速简单的进行线上订购付款,这个功能的重要性应该优于其他。

       3、设置 -- app 的 UI 语言:UI 就像是文字语言一般,会建立起使用者的品牌意识,例如:Win8 的动态砖样式,看过后很容易记住那个形态就是 Win8 的长相,故核心的代表元素是最直观的,因为他们将不断的被使用者在操作过程中体验到。

       经验二:聚焦于产品组合(Focus the Portfolio of Products)

       简单说就是在有限的开发资源及时间下,针对“优先矩阵”中最重要的部份先进行设计和优化,确定有效聚焦于这些功能上,才可以帮助我们获得最佳回报。

移动应用七大UI设计经验

       “优先矩阵”的设定范例如上图,主要在表达应该优先投入的设计工作。例如您预期客户使用 Android 手机为主,而竞争对手也以他们为目标时,优先投入这个 Android 客群,以具有 UI 特征及效能的 Android app 进入市场,这将比把开发资源平均分配在每个行动平台上更有价值。

       经验三:确定主要使用环境(Identify the Core User Stories)

       每个开发团队都面临着同时进行多个项目的超人任务,要功能突出又要在时限内完成,这种场景应该是开发人员连做梦都会发生的。但企业往往会忽视一个事实,即客户其实只是在找寻方法,一种能帮助他们解决特殊需要的解决方案。例如开发一个购物 app(无论是游戏、音乐或优惠券),主要功能应该是让使用者寻找和购买所要找的东西。虽然有着绚丽功能可以使购物更有趣,但是核心目标“寻找和购买”千万不能变成配角。要让使用者能够快速寻找和购买。

       如下范例中有两个 Shopping app 的设计,左边的 app 拥有进阶的购物功能(如赠送、相关产品和注册送白菜网),右侧 app 则注重于购买行为以实现 User Story 为主轴。简单来说在 app 的表现上并无严格的对错,只在于是否已确定主要使用环境并且优化核心功能,后续改善再以不妨碍使用体验为前提,进行功能的丰富化。

移动应用七大UI设计经验

       经验四:优化 UI 的流量和元素(Optimize UI Flows and Elements)

       使用者最无法忍受的就是等待,所以针对各画面、流程、UI 元素进行优化将有效减少等待时间,让使用者不会认为他们在浪费时间(例如:在 Google UX Principle 中也提出“Every Millisecond Counts”的想法,也就是要把优化层次精确到毫秒)。

       身为产品设计人员,我们充份了解“性能表现”是无法完全控制的。因为网络可能是造成缓慢的原因之一,或是某些操作需要大量的计算等。所以设计的重心在于“性能感知”,也就是尽可能的让使用者察觉到他们没有失去过多时间,进而对 app 产生良好的印象。但如何具备“性能感知”的设计?

       1.第一步是识别流程中,可能会发生延迟的环节(例如:获取后台资料、运行特定的计算等)

       2.第二步是引入额外的步骤,使使用者认为这些程序是必要的,进而降低延迟的强烈感(例如:显示资料载入的动画、显示这个步骤的提示等)。

       3.第三步是优化个别的 UI 元素:任一个 UI 元素都有可能对性能造成影响,因此所有的 UI 元素应该一并考虑,主要方向是在

       屏幕上的元素数量和类型(例如:媒体元素包括音频、影片、地图等影响力将大于简单的文字元素或静态图像等)。而图像元素的分辨率及 Image Depth 也会影响绘制时间;而其次是 app 的 UI 绘制技巧,也会影响在屏幕上的载入时间(例如:绘制在屏幕的整个背景,或是分解成小的区块等等)。

       经验五:定义 UI 缩放规则(Define UI Scaling Rules)

       有些 UI 元素是极重要的,因为有助于彰显品牌身份;而有些 UI 元素即使在某些显示条件下被去除其影响相对小,这个原则如何拿捏可以自三个方向来思考:

       1.品牌核心:产品的 UI 品牌核心是必须被保持的(例如:应用程序的标题头,如下图的图示一)。

       2.替代品:有些替代性方式很实用而且不会造成性能上的负担(例如:以不透明的元素来取代透明,如下图的图示二)。

       3.选项:有些 UI 元素虽然可以增强使用体验,但却是可以被删除以维持性能(例如:减少列表的搜索结果,从 25 行降为 10 行,如下图的图示三)。

移动应用七大UI设计经验

       经验六:使用性能仪表板(Use a Performance Dashboard)

       良好的团队沟通,对造就一个成功的产品非常重要。市场人员,设计人员和开发人员对于期望的产品表现皆不尽相同。因此藉由 Performance Dashboard 来帮助衡量,监测和设置目标产品的当前状态、期望和发展重点,是一个有用的沟通方法;而 Dashboard 内的重要因素如下:

       1.核心User Story:确保认知上的用户体验方向是一致的

       2.比较基准:产品之主要竞争对手的比较数据

       3.实际测量数值:显示目前产品的执行性能数据

       4.目标数值:设定产品的目标性能数据

       5.性能状态:目前产品表现相对于目标的状态

       对于 Dashboard 上的数据,开发团队可以进行主观上的手动测量及记录,或是客观上的利用工具来测量呈现(例如:Android 的 TraceView)。

       经验七:专而精的 UI 工程技能(Champion Dedicated UI Engineering Skills)

       优秀的移动应用开发团队,必须能编写高性能的使用者体验,这表示对于前端的程序开发及产品设计,要同时具备 Engineering 技能和 UI 设计的经验,也因为要考虑的事很多,简单提供两个思考方向:

       1.智能负载(Smart Loading):这个机制常见的方式是延迟载入(Lazy Loading),预载主体及轻量的内容,然后再继续载入较影响性能的内容。这种技术降低了使用者的等待时间,营造了流畅的体验感受。

       2.背景加载(Background Loading):这是一个开发人员皆知的方法,重点在于应用上是否真的发挥效果。如果性能影响因子是在于一张背景图时,那是要载入一个大的图像,还是通过算法去合并单独的小图像?其实最好的解决方法要视情况而定。

       七大UI设计经验分享,只是传达一个设计思维,即产品设计的选择将会影响性能表现,但不幸的是通常我们想要作产品改善时,早已造成部份使用者用户体验的负面印象。记得 Yammer 创办人 David Sacks 曾发表过一段话:“当我看到使用者界面上缺了东西时,会感觉像是商店地面上有垃圾。”他承认曾与一名工程师争执,原因是画面少了几个像素。身为 CEO 的人却极度重视用户体验,恰好与一些产品经理们对移动用户体验的漠不关心,呈现出强烈对比。

除非特别注明,鸡啄米文章均为原创
转载请标明本文地址:http://www.teaching4real.com/digital/327.html
2013年5月17日
作者:鸡啄米 分类:数码生活 浏览: 注册送白菜网:4