说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

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

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

在“为移动而设计值心急架构篇”中,我们看到了设计师在设计移动应用时需要面对的主要挑战。移动端所显示的内容,从观察条件、行为,到情感,这些方面的差异影响着用户。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的时候,从未想象过将有机会为移动互联网设计塑造工具。而今天设计解决方案将成为未来的标准和设计指南。

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

文章来源:UXBooth


Go Mobile沙龙第3期:交互设计

最近在移动互联网业界,出现了一些有趣的现象。在一个应用开发团队中,项目设计、视觉设计、UE用户体验的角色被重视起来。那些扁平化设计、交互式设 计、响应式设计,也一度成为我们谈论最多的关键词。交互设计师不仅仅是画图的,更要关注信息架构、界面交互等方面。如何做好交互设计呢?
本期Go Mobile将在6月22日于杭州举行,届时将邀请中央美术学院交互设计工作室负责人 彦风 、创新工场用户体验总监 吴卓浩 、前三星研究院用户体验部负责人 林敏 、Ark Design创新顾问/联合创始人 张文新 、欧朋浏览器产品总监 冯嘉彬 、DailyCost设计师/开发者 梁国鹏 ,与各位开发者、设计师聊聊移动交互设计那些事。【报名请戳】

(编译/翟方庆 责编/张宁)

久违的iOS,新鲜的SDK,豌豆荚发布云相册 喜大普奔:谷歌15岁了,生日快乐! 传福特CEO Alan Mulally目前最有希望执掌微软 微软计划将WP8和Win8应用商店合并?太好了! 响应开发者要求:Kinect for Windows SDK 1.8发布 OpenStack基金会BD总监:希望有更多的中国公司加入 CTO如何避免决策失控(三):从CEO角度看CTO的应对能力 IT界需求最旺的16项技能 PMC发布8系列RAID卡 找准国内互联网企业需求 早Google一步,eBay数据中心率先搭载了火星上使用的技术 目标专利2000,技术研发人员占55%,斐讯的厚积薄发 SwiftStack CEO:分布式存储的未来 触控陈昊芝:“好声音”标王对移动游戏未来的预测 Office将更强大:微软正开发Office Reader和Office Lens 百度技术专家详解Clouda 并称计划推出相应UI解决方案 少年才俊:看IT界8个不到20岁的科技公司创始人 Oracle与Freescale展开深度合作,Java或将一统物联网? 探秘Google新搜索引擎算法Hummingbird的16个疑惑 如何在开发项目里进行自我激励! 或许很受用:苹果、谷歌和亚马逊等公司的14个怪异面试题 12款不容错过的新款jQuery插件 技术开发者如何看实时Web App开发框架? 高薪技术排行:大数据居首,苹果相关次之,Java、C等相去甚远 谷歌开发网络跟踪新技术:AdID将取代第三方Cookie 穿在脚上的苹果?苹果聘用Nike设计主管Ben Shaffer 七款Debug工具推荐:iOS开发必备的调试利器 六年亲历,见证中国大数据技术与应用时代的到来 Mailbox:日支撑过亿信息数据库的性能调优及集群迁移 PayPal前CTO 在美国改变世界的乌克兰犹太人 放弃Bootstrap&Foundation,迎接Semantic UI? 一键分享:iOS版Google+发布SDK zju1222的数据是不是有错误呀? 哪里有2002年高程试题 关于控件 请教:在SQL SERVER2000里面怎样让值显示为******? B/S下如何使用.css?--答对加分,谢谢 200分,ASP.NET如何访问COM+组件?????? JBuider 6 的问题?-->小问题,用过的进来看看!!! 感情问题,请各位帮帮我!!!!!! (校园网)门户网站的设计与组建 关于如何动态分配内存的一个问题,请指教(50分) 在winForm下可以用session 吗? 跟网页下的有什么不同呢? 用orcle搭建一个客户服务器平台,该如何搭建?(通过vc的应用程序在客户端访问)--都有分给的. 初学websnanp,请教几个小问题? 问一个基础问题? 怎样在MDI框架下,显示一个CFORMVIEW类的子窗口? AUTOCAD图形打印驱动程序设计 AUTOCAD图形打印驱动程序设计 情帮忙(50分) 一个水晶报表的问题 有人真正使用过XML开发程序么? 我想买书 pb7.0哪里可以下载? AUTOCAD图形打印驱动程序设计 贺猪猪成星,散分给水友,天下皆欢颜!!! WinRAR的压缩密码怎么取消啊?快,快,急需!!! 没有权限打开names.nsf的问题? 复选框的问题,在线等待!!! 没有权限打开names.nsf的问题? IE浏览器显示的字体不是默认的,变成了空心字体。如何改成系统默认的字体?(win98+IE5.0) 寻找高手 关于协议的问题 求助!能把一个字段内容分解的函数? Servlet问题?(急等,立结) oleconnection 支不支持sybase的连接,不通过odbc如何连接Sybase高手请进!急啊!!! 关于return的问题 为何内存消耗在不断增长? 浏览器类型 求文件长度? 用DELPHI 开发过ORACLE数据库的高手帮忙,我现在遇到个问题, BCB消息机制问题, 关于MFC 请教:jar问题 零为什么不能做为除数。 菜单资源ID得问题 请问高手,实验室局域网内部下载速度很慢,会是什么原因造成的? 如何利用Datareport做出好看一点的报表? Grid的列怎么来调整? GDI+类使用new操作符问题 有人在吗? 请看看这一样个SQL语句 页面上有两个相连的表格时,中间的边框变得很粗,能否做到和一个表格的效果? 帮我写一个简单的和SERVER2000查询的例子50分相送!! 在率先由民主主义者转变为共产主义者的过程中,李大钊讴歌十月革命的代表作有A. 《法俄革命之比较观》 B. 《马克思主义》 C. 《庶民的胜利》 D. 《Bolshevism的胜利》 A点的坐标为X=0 Y=10 Z=0 求作A点的三面投影图拜托了各位 让人积极向上的句子 1918年,李大钊在 新青年 上连续发表了什么和什么文章,颂... 有谁可以给“爱”“情”下个定义吗? 一个棱长为20cm的正方体的某个面平行于投影面时,这个面的正投影的面积为___cm2 为什么化学中的放热反应,就是反应物的总能量大于生成物的总能量,这是怎么理解 爱情的定义?有谁可以给我定义一下?谢谢 在投影面垂直面中,于v面垂直且于h,w面倾斜的平面是什么 化学反应中,反应物和生成物是吸收能量还是放出能量?我想知道的是为什么反应物是放出能量而生成物是吸收能量都没有解决我的问题 练习书答案是C,原因是146由一种图形组成,235由两种图形组成.看不懂T_T求解答. 指纹的图案分几类 爱情如何来解释? 凯恩斯学派、新古典经济学派、真实经济周期学派分别认为经济周期的原因是什么,对经 济政策有何建议 人的指纹的图案大致可分哪几类? 爱究竟如何来解释爱? 简述正统凯恩斯主义,货币主义与理性预期学派关于菲利普斯曲线的不同观点 为什么当直线与投影面倾斜时,则直线的投影小于直线的实长.具体是什么原因造成投影变短的?是投影有重合的还是要考虑点的大小?还是别的什么原因?虽然这是个常识但我想知道具体的解释. 爱究竟如何来解释爱?拜托了各位 谢谢 钙离子和氢氧根离子能共存吗 正交直线在投影面是否也垂直 (1)写出李大钊宣传十月革命和马克思主义的重要文献 (2)据材料和所学知识,分析“三个代表”(1)写出李大钊宣传十月革命和马克思主义的重要文献(2)据材料和所学知识,分析“三个 西瓜爆炸有具体点的真相描述吗? 判断对错,并说明理由:水平面再其垂直的投影面上的投影集聚为直线. 爱情,谁来解释解释.? 男女之间的爱,该怎么解释 人的指纹有几种? 爱情究竟该如何解释? 请问什么是西瓜 爆炸 翻译英语“你手机的电池还没有充满/已经充满了" 炭黑N220 N330 N550 N660 N234 哪个用于印染纺织 西瓜“爆炸”事件引关注 膨大剂滥用疑危害健康? 电池翻译为英文 炭黑的检验报告里面只写了灰分0.20%,请问这个怎么判断炭黑的质量呢?有人说炭黑N326,N330可以满足,是么?有懂得么? (2011·莱芜)2011年5月西瓜"爆炸"事件发生后,西瓜膨大剂进入民众视野.有人将健康状况良好的小白鼠平均分为两组,其中一组喂食西瓜膨大剂以探究其对动物有无影响.这种方法属于A、观察法 B、 为什么加入电解质会破坏溶胶,使溶胶聚沉 蝌蚪是什么动物? 作文 西瓜爆炸 感想 要400字 急今天就要 当我们勉励别人要积极向上进取努力的时候可以用上( ,)这一千古名句 这是什么动物?看样子像是长出两条腿的蝌蚪,可是比平时看到的蝌蚪大了好多。河里捞的黑色蝌蚪就算4条腿都出来,尾巴没有了也只有5毫米左右,这个才出了两条腿就有5、6厘米长了。 标况下VL氯气与过量消石灰完全反应所得漂白粉中有效成分次氯酸钙的质量为 当我勉励别人要积极向上进取努力的时候,可以用上哪句千古名言 哪些动物吃蝌蚪 标准状况下11.2L 氯气通入足量石灰乳中制备漂白粉,转移电子数目为NA 为什么错? 当我们勉励别人要积极向上进去努力的时候,可以引用哪一句千古名句? 现代人的爱情曾几何时,在那个懵懂的孩提时代,自己曾昂着头,插着腰说过这么一句话:“哼,男人没有一个好东西,我是不会嫁人的!”就因为这句话我一直解不开我心中的阴霾.我不敢去亵渎爱 低等植物细胞有丝分裂形成细胞板吗还有除了末期是不是都和动物细胞一样? 当我勉励别人要积极向上进取努力的时候用哪一千古名句 无籽西瓜是转基因水果吗?吃了有害吗? 氮气等离子处理炭黑能增强导电性吗现在我需要增加炭黑的导电性.我用氧等离子处理过,但是没有效果.下一步打算用氮气处理试试.我想问有没有对等离子工艺熟悉的,氮气处理炭黑能不能提 氢氧根离子与钙离子能不能共存? 无籽西瓜是转基因食品么? 演示交变电流随时间的变化规律时,应采用直流电流表?演示交变电流随时间的变化规律时,应采用直流电流表. 如图第11题,求大神解答 设NA为阿伏加德罗常数,则5.6克铁与足量稀硫酸反应失去电子数为多少NA?为什么?请详细一点说 已知点的坐标为A(5,10,15)B(10,10,15),求做点的三面投影 一氯代丁醇如何生成环醚,书上是氢氧化钠加热,是否由于醇的酸性与强碱反应呢?是否是脱去氯化钠成环?醇有酸性的啊~它会和碱金属反应啊~有比水弱的酸性啊 李大钊在《新青年》上发表的文章是? 根据点的坐标,作点的三面投影.(15,20,10)请把它画出啦展开图 (2S,3S)-3-氯-2-丁醇结构式 14岁小驴友遗骸没有外伤 小温爸爸作广西一米粉店夫妇被枪击一死一伤 行凶第二季中国好声音总决赛短信中奖观众信巴西强盗入室抢漫画美国:电视仍占据儿童一半屏幕时间转基因食品争论 英法态度迥相异美一男子喝红牛饮料后死于心脏病 家人卢浮宫藏品首次来华公开展览 现地中海奥尔布赖特:中美关系发展至关键期应抓茶党加速美国政坛裂变 抓住政府软肋屡韩国9月经常项目收支连续20个月保持利比亚运钞车遭抢 劫匪抢走总计数千万英国广播公司被指诽谤英皇室哈里王子吸日本孤独人群增多朋友租赁登场 每小时澳民众海外旅游担忧多 三成以上担心厕艺术家将住“蛋壳屋”内 旨在警示气候埃及一运动员因支持穆尔西而被剥夺比赛美国纽约城市马拉松将开赛 安全预算比美情报委员会主席:白宫已承诺停止监听男子喝红牛后死于心脏病 家人索赔85美国纽约城市马拉松将开赛 安全预算比佟丽娅王姬婆媳宣战日本人的“地狱船”部分区域11日无线电管制S.H.E师妹团甜美歌舞巴黎管弦献理查·施特劳斯精华回家首秀 砸锅北京门头沟万佛堂佛像文物被盗文化节目该服务更广泛观众敦煌旅游局推优惠套餐五岁娃爱美痴迷“范爷”跨界钢琴家带来波罗的海风“舞娘”淘汰齐布娃明年赛程公布闰九月 没有第二个重阳节护士“斗气”州长揭幕战 首钢平常心全市范围禁售孔明灯博乐先生邀请微笑大使电视节目雾散霾消 风吹添寒帕帕诺带来“全班”首席
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘