`
jishublog
  • 浏览: 862146 次
文章分类
社区版块
存档分类
最新评论

为移动而设计:交互设计篇

 
阅读更多

在“为移动而设计:信息架构篇”中,我们看到了设计师在设计移动应用时需要面对的主要挑战。移动端所显示的内容,从观察条件、行为,到情感,这些方面的差异影响着用户。Elaine McVicar有12年的设计经验,目前在伦敦Flow Interactive任职视觉设计主管,从事视觉设计、界面设计工作。

以下为译文:

 

我的手机是一款Nokia5110(1998年入手的),只具备很少的功能,比如打电话、发短信,或玩一玩贪吃蛇。更重要的是,这些交互方式都由手机制造商掌控。随着智能手机、触摸屏和App Store的出现,它们给设计师们带来了数不胜数的机会。同时,尽快熟悉这个尚且年轻的设计领域,也是我们这些设计师的责任。

交互设计

现在的移动设备都采用触摸屏,这不仅带来了许多机遇,也存在诸多制约。我们在通过它们浏览内容的同时,也在与内容进行交互。这迫使设计师开始对人体工程学、手势操作、过渡特效,以及针对移动端的交互模式进行思考。

人体工程学

由于在设计移动应用时涉及人体工程学,这要求我们要关注设备的尺寸以及触摸屏的实际问题。例如,用户握持设备和触摸屏幕的方式,直接影响到用户能否轻松触摸到屏幕的某一区域。

热点区域,或称其为“用户激活某些功能时需要触摸的区域”需要有足够的尺寸,让用户确信自己可以准确地点击到。指尖面积平均有1至2厘米宽,在标准屏幕上所占空间大致结余44px只57px,在高清屏(如Retina)上大约占88px到114px。诺基亚、苹果、微软,为更好诠释触摸屏的特性,各家公司使用的尺寸都存在细微差别。

然而,目前并没有关于以上设计尺寸的硬性规定。与其以各种设计规范为标尺,不如单纯地去考虑用户希望通过触屏操作得到什么,用户的操作目的有多重要,以及他们需要在多短时间内达成,并依此进行设计。

手势操作

除了显示内容以外,触摸屏的每一部分都能被用于实现任何功能,这让手势操作成为移动交互设计的重要构成元素。所有触屏操作系统都采用了该操作,包括Android、iOS、Windows 8。

我们用一张表格简单汇总一下各平台:

 

 

此外,目前涌现了许多设计标准和模式,用于指导开发手势操作。设计师能够并且应该依照自身产品所需,跨越这些“标准和模式”的界限。

过渡效果

在应用切换于不同显示状态时,过渡效果可以让这个过程显得更加平滑。更多情况下,过渡效果便于用户撤销操作,并防止用户在切换界面过程中“找不着北”。

基本的过渡效果包括:

常见模式

正如我们在第一篇文章中所讲的,相对于PC来说,移动设备留给设计师更少的用户添加菜单和导航提示的空间。结合环境因素来看,例如复杂的视觉环境和干扰条件,通常情况下,我们很难将最好的内容结构提供给用户。

然而,有几种通用的交互模式值得去尝试去挑战,其中一些用于改善导航、选择内容、登录注册和导航的交互设计非常有价值。

 

主导航菜单

主导航菜单是展示网页或手机应用信息架构的视觉表现形式。以下是一些值得思考的案例。

扩展菜单(Expanding Menu):

许多移动应用和响应式网页都使用扩展菜单来进入主导航。一个被放置在顶部的菜单按钮,在点击之后会显示主菜单列表。

星巴克采用了扩展式菜单的网页

 

  • 适合于:响应式网页。
  • 注意项:过多的菜单选项和子菜单会让列表过长过于复杂,这将带来操作上的不便。

 

侧滑菜单(Side menu):

一些应用和网页使用的是侧滑菜单,正如我们在Facebook应用中所看到的。与扩展菜单相似,侧滑菜单会在屏幕一侧以垂直表单的形式显示出菜单选项。

Facebook客户端

 

  • 适合于:拥有大量菜单选项的应用。为用户导航开辟了一个独立的区域,而不用在显示内容和功能的界面中占用大量空间。
  • 注意项:确保不会与其他导航或交互模式冲突。例如,如果扩展菜单或选项卡式菜单和侧滑菜单同时出现在一个应用里,当用户需要找某一特定功能时或选项时,这种设计会导致用户产生困惑,不利于操作。

 

标签菜单(Tabbed Menu):

这种设计我们曾在上一篇文章中提到过。它是一个永久显示在界面顶部或底部的工具栏,便于用户在不同界面之间快速切换。

亚马逊客户端底部的标签式菜单

 

  • 适合于:菜单选项更少的应用。这取决于移动设备屏幕在水平方向上可用宽度。通常采用这种菜单的iOS应用都会设置5个选项。
  • 注意项:底部标签设计与Android和Windows 8的标准交互不相称。

 

辐射式菜单(Hub and spoke menu):

一个集中化更高的主界面,用户可以直接从中找到所需菜单选项。当用户点击选项,进入另一个界面时,该界面可以采用另一种完全不同的设计模式。用户则可以通过激活返回功能(点击按钮、滑动或其他操作)回到主界面。

Linkedin

 

  • 适用于:快速展现一个应用的功能特性。
  • 注意项:如果用户需要在不同功能间切换,那么他就不得不先返回主界面。

 

选择内容

点击链接显示内容,在设计这一交互过程时,需要让它便于用户快速地单手进行操作。如果设计得当,也可以在一定程度上提升用户体验。

点击(Press to move forward):

用户在浏览内容时通常会选择类别、子类,然后点击浏览内容。同时,用户还进行在浏览内容时,通过点击其中的链接跳转到新的界面中。BBC的客户端就是一个很好的例子,递进式的导航,引导用户点击查看不同分类的内容。

BBC

 

  • 适用于:以文章为主要内容的应用,并能持续激励用户。
  • 注意项:用户很可能无法确定正在浏览的界面是属于哪个子类。

 

滚动效果(Coverflow):

用户可以滚动浏览内容,然后从中选择一个选项。这种水平滚动的设计方式,是Windows 8 Metro风格应用固有的。当然,类似的设计我们在iPhone上也见过,就是比较常用的App Store。

App Store

 

  • 适用于:你有许多希望用户自己去发掘的视觉化内容,而用户也可以在选择前进行预览。
  • 注意项:如果用户希望浏览他们经常访问的内容,可能需要不停地重复滚动操作。

 

翻页效果(Flip over / Peel back):

如果你想进一步了解你正在浏览的内容,或你正要进行的设置,那么翻页效果是很好的选择。

苹果地图

 

  • 适用于:两个相关的内容,比如进行设置或查看信息详情。
  • 注意项:会让你的交互方式过于复杂,用户也容易对导航结构感到困惑。

 

登录注册

输入姓名、邮箱和密码是一个必不可少的过程,作为设计师,我们应该让这个过程更加轻松。

自动登录:

用户输入的登录信息全部保存在应用内,在初始化应用时自动登录,并显示新的信息。这是许多社交应用所采用的登录方式,比如Facebook、Instagram、Twitter。

Instagram

 

  • 适用于:应用需要登录才能显示个人信息,但是安全要求并不高。
  • 注意项:只适合那些对信息安全性要求并不苛刻的应用。

 

保存登录信息:

与网站支持保持用户登录信息一样,在移动端也可以采用类似的设计,让其保持用户的邮箱、用户名等,帮助用户快速登录。

在网页中登录Google账户

 

  • 适用于:需要登录的移动版网页。
  • 注意项:尽量避免不必要的登录操作。

 

PIN码:

创建一个用于登录快捷方式,而无需用户输入繁冗的登录信息,是一个非常好的方案。以PayPal为例,它支持用户创建一个PIN码,让登录操作变得简便快捷。

PayPal

 

  • 适用于:对用户信息安全性有要求的应用,同时这些应用也支持与用户的设备进行绑定。
  • 注意项:仍然需要注意应用的安全级别。

 

关于表单

曾有调查显示,应用被下载后,26%的应用只被打开过一次!辛辛苦苦做了一款App,好不容易有人下载安装了,首屏注册表单却吓跑了一众用户。在移动设备上填写表单是一件让人头疼的工作,尤其是在那些未针对移动端进行优化的网页中。

保存用户信息

保存用户的的登录信息可以节省时间、减少成本,让你的应用和网站更易于使用。交互设计师Luke Wroblewski曾对于注册表单给出过三点建议:一、最好不要在App首屏出现注册界面;二、先体验,后注册;三、因为注册界面繁琐,所以更要优化。

 

  • 适用于:需要用户添加个人信息的网站或应用,比如在购物过程中填写个人资料。
  • 注意项:给予适当的安全性。

 

显示对应键盘

确保在适当的时候显示对应的键盘,这是一个让填表工作变得更加流畅的方法,比如在是输入电话号码时调用数字键盘,而在设置或输入密码时显示全键盘。

 

  • 适用于:所有形式的表格。
  • 注意项:无。

 

进度条

在Web网页中显示进度条是一种非常明智的方法,它可以提示用户所处的输入阶段,还有几项表格需要填写。不过由于屏幕的局限性,如果需要在移动设备上添加这种进度条,需要考虑设置在界面的什么位置,以何种方式显示。

 

  • 适用于:购物清单或长表单。
  • 注意项:由于它可能成为快速访问内容的一个障碍,在设计时需要考虑其所占空间。

 

下一步:

过去的标准和设计指南为创新培植了根基。当我还在使用诺基亚5110的时候,从未想象过将有机会为移动互联网设计塑造工具。而今天设计解决方案将成为未来的标准和设计指南。

交互是移动设备必不可少的重要组成部分。但是想要创造一个真正深入人心的交互体验,网站和移动应用的视觉设计需要更加生动、吸引人。

1
6
分享到:
评论

相关推荐

    移动设计 完整版 PDF

    转变交互设计思维 特征 应用的使用情景特征 移动网络的特性 设备的物理特性 触摸手势交互特性 原则 主流移动操作系统的基本原则 移动设计八原则 框架 框架的深度和广度 移动应用导航的设计模式 模式之外的因素 细节 ...

    产品经理必须了解:三大移动平台上的交互设计差异

    今天在本篇文章中总结了一下这三个平台之间交互设计上的差异性,在开展交互设计的过程中,必须要注意的问题:在iOS应用内如果要切换不同的模块,或者页面内要切换不同的栏目,往往都会用到“tabbar”这一形式的控件...

    《ASP交互网页设计篇》书中源代码

    此书中有几个常用实例系统 option explicit response.buffer=true %> <!--#include file="Connections/connSoft.asp" --> Dim Rs1__MMColParam Rs1__MMColParam = "False" If (Request("MM_EmptyValue") <> "") ...

    如何进行AR交互设计?

    关于AR交互设计,这篇文章展开较为具体深入的分析,相信它一定对你有所帮助的。AR类产品的出现,可能是第一次实现虚拟世界与现实世相互“融合”,完成屏幕的“跨越”,人机交互设计也开始从二维平面迈向三维世界。...

    设计匠艺-第四期

    《设计匠艺》设计匠艺是推酷网旗下的周刊,每周三发布,并且同步发布pdf离线版本,内容以产品设计,用户体验,潮流技术产品分析,视觉交互等为主,每篇文章都由人工整理筛选!周刊地址...

    产品经理必读:5项提高产品设计的交互模式

    本文是关于比较经典的几种交互模式的注意事项和讲解(其实就是时间比较早的文章啦),适合入门级的交互设计师和产品经理。作为移动端设计模式系列文章的终篇,我将为大家概括性地介绍5种流行移动应用中常见的界面设计...

    Android移动应用开发(第3版)卷Ⅰ基础篇 (Shane Conder, Lauren Darcey) PDF扫描版

     《Android移动应用开发(第3版)卷Ⅰ:基础篇》涵盖了Android开发从概念、技术到市场推广应用的全部主题,内容包括Android平台概览、Android应用程序设计精髓、Android用户界面设计精髓、Android应用程序设计精髓、...

    设计一个移动应用的本地缓存机制

    在手机应用程序开发中,为了减少与服务端的交互次数,加快用户的响应速度,一般都会在iOS设备中加一个缓存的机制,前面一篇文章介绍了iOS设备的内存缓存,这篇文章将设计一个本地缓存的机制。

    Android手机交互应用开发创意之钥 源代码

    第1篇 创意的“真空”  第1章 关于创意的浅谈  1.1 创意是如何诞生的  1.2 创意该如何发展  1.3 从作品到产品  第2章 当创意遇上“机器人”  2.1 “机器人”的诞生  2.3 创意移动应用  第3章 创意的商机  ...

    matlab使用百例

    33-66是:界面设计篇 67-84是:图形处理篇 85-100是:数值分析篇 实例1:三角函数曲线(1) 实例2:三角函数曲线(2) 实例3:图形的叠加 实例4:双y轴图形的绘制 实例5:单个轴窗口显示多个图形 实例6:图形标注...

    Android和IOS在交互细节上的差异

    iOS和Android已经霸占着移动互联网80%以上的市场,越来越多的应用需要在两个平台上保持设计的协同。而在交互细节上,两者有那些区别呢?希望看了这篇文章对你有些启示。

    JS代码和OC代码的交互小案例

    作者DXSmile,源码JS-OC,随着应用开发技术的日渐更新迭代, 特别是HTML5出来之后, 现在很多的移动端应用开发也越来越趋向于使用HTML5的技术来设计和完成相对复杂的UI页面设计和交互, 就像之前我又一篇文章写的一样, ...

    创建更好的移动Demo:工具篇

    什么是Demo?Demo是Demonstration的缩写,表示“示范”、“展示”,常指具有示范或展示功能及意味的事物。本文中Demo的含义更接近与维基百科中的这个解释:一种原型,主要用来展示想法、...交互/设计走查-设计师、产

    如何在移动APP中设计输入框

    交互设计在移动设备上遇到了许多挑战。其中一个最具挑战的问题是:在用户输入时如何利用有限的屏幕空间,其关键在于产品设计师、开发者和产品经理需要理解对于用户来说怎么样输入是最为简单的。这篇文章列出了三个...

    如何设计移动应用引导页

    来自设计网站的龙头老大Smashingmagazine,专业全面,条理性强,一篇文章几乎包括了移动应用引导页的全部设计方式,还分析了知名APP的反面例子,可以说是搞定引导页的最实用指南,赶紧来学习下!如今,移动应用对...

    matlab应用百例-matlab实用程序百例.rar

    33-66是:界面设计篇 67-84是:图形处理篇 85-100是:数值分析篇 实例1:三角函数曲线(1) 实例2:三角函数曲线(2) 实例3:图形的叠加 实例4:双y轴图形的绘制 实例5:单个轴窗口显示多个图形 实例6:...

Global site tag (gtag.js) - Google Analytics