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

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

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设计师/开发者 梁国鹏 ,与各位开发者、设计师聊聊移动交互设计那些事。【报名请戳】

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

程序员的十大烦恼 兼顾性能和兼容体验:HTML5时代的浏览器全面测试 Lisp的本质 Amazon工作环境恶劣员工高流失率 为何却依然能持续成功和创新? 对几个软件开发传统观点的质疑和反驳 [实战分析] 编写高效的JavaScript程序 Twitter的系统编程 百度高通达成合作 为Android终端提供云服务 EasyHadoop技术沙龙在北京、广州两地齐发 CloudStack技术沙龙:committer李学辉及中航信分享 思科为什么愿意花12亿美元收购云计算网络初创公司Meraki? 谷歌有麻烦了!联邦贸易委员会正调查其搜索业务 当数据中心遭遇污水 微软新能源数据中心的诞生 2012vForum:更加注重开发者 腾讯赵伟:Hive在腾讯分布式数据仓库的实践 Apple将在2013年启动香港数据中心的建设 顶级域名扩张受阻:ICANN透露部分域名存争议 硅谷创业教父Paul Graham:如何获得创业好点子? GDC2012特别报道:中西方游戏开发思想在这里融合 应用示例和对象是编程的未来吗? 为什么2012年HTML5发展远未达预期 当程序不再工作时,程序员说 独立游戏开发者易犯的9大致命错误 “Do Not Track”的前世今生 《Warcraft是怎样炼成的(三)》:从Demo到游戏 无限强大的超级马里奥AI 以Google第二代数据库产品MegaStore为理论模式 探索HBase系统 传Google明年推Chrome OS触摸屏上网本 下载自己过去的Tweets?用户准备好了吗? 微软任命研究部门新副总裁 负责北京等实验室 欧朋首席标准官:HTML5将在2014年成熟 怎样动态增加表格? 有人解决了jive的中文问题吗?? 报表就是查询结果吗?用VB很难做吗?为什么这么多人讨论,请问设计报表难点是什么? 请问我的VC地ClassView无法打开,有什么快速的方法可以打开 一个关于tomcat中servlet的棘手问题..... 谁可以帮我提供一个PHP的站内目录管理程序! 请问c++中,函数重载和虚函数有什么区别,在实现多态性方面有差别吗? 现有一个小项目: 如何对多个按钮的BN_ClICK进行映射 SQLserver备份与恢复 Delphi中怎样声明一个类?怎样实现多态?如果要在类库的一个类中添加一个方法又怎么做? 然后怎样封装它?是不是封装以后维护就非常简单? 可 计算机网络--〉清华大学出版社,作者:Andrew S Tanenbaum哪里有电子版下载 把播放F4的时间上《我们程序员都是活雷锋》 随便问问:VC能不能调用Access中的Form,Report 用ADO在线程中打不开数据库,请帮忙 如何在VB中动态的加载Dll,并使用其加载的函数??? 高手们看过来 Oracle初学,兄弟们多帮忙了! 怎么打开一个.txt文件,然后一行一行读取? 请问大家知道一个局域网里的IP在因特网上如何表示的呢。 请问各位,如何在我的程序中用代码生成Access数据库? 神啊,救救我吧,我想要含笑半步喋=== 请教NT4。0下的IE2。0怎样升级到IE6。0或IE5。0? 我要在程序中重载CBitmap类的一个函数,请问如何做 为什么我在bcb的new中找不到multitier(就是多层)选项页 请问如何知道数据库中有哪些表存在?在线等待 向各位大侠求救中 这是数据库的缺点吗? Choice.asp?VehicleType=a+&VehicleColor=Red + 传不到Choice.asp 如何获取文件扩展名关联信息 急!应选择什么样的服务器? 请问哪里有关于DOS和BIOS的系统功能调用的e书籍下载?谢谢指点 想用bcb的DirectX编一个显示器(第二个)的独占程序!希望专家指点!也欢迎大家来交流! 你碰到过这样的问题吗? What is meaning "$1 $2 " in perl? 配置支持ISAPI调用的 apache 服务器 怎样判断内存有没有被释放? window2000的安装和IE的问题 像我這樣的Boy,是否可以找到GF??? Oracle816连接问题,急 小妹有一事相求,请问哪里有SQL Server 7.0 的虚拟光盘下载啊?急!!! 谢了! Delphi的枚举类型是怎么用的?如果它的元素是字符串,怎样判断它和某个字符串相等? 我以前是用Delphi的,现在新找了家公司,是用C++Builder的,请帮忙推荐本C++Builder的书,谢谢 请问如何实现多媒体数据库??? SQL Server 7.0作为后台,它主要完成什么功能??!!求救!!!!!!! 请教WebUIValidation.js'的作用 2000 server 的 IE 的非法操作?(如果是非技术的,也请斑竹手下留情。) 求助:开发一个小型数据库,使用那种哈希函数适宜 如何调用IE的缓存 如何获取文件扩展名关联信息 小妹有一事相求,请问哪里有SQL Server 7.0 的虚拟光盘下载啊?急!!! 谢了! 中世纪的西欧为什么与黑暗联系在一起? 怎样鉴别Na2CO3和K2CO3两瓶无色溶液?做好焰色反应的关键是什么? 实行人民代表大会制度有什么意义 在物理学中,物理量之间的关系可以用----------表示,也可以用--------表示高一物理之直线运动练习题 为什么要坚持人民代表大会制度? 中世纪西欧的城市以当时的中国城市最大的不同是什么? 物理学中为了比较运动的快慢引进了一个重要的物理量是什么 碳酸氢钠与过量、少量氢氧化钠【aq】反应的方程式, NaOH溶液中同时混有NaCl Na2SO4 Na2CO3怎么除去杂质?什么银?氢氧化银?有氢氧化银这种东西?为啥书上说没有 在阿司匹林的制备中为什么要使用醋酐来代替醋酸? 为什么中国要坚持人民代表大会制度 全国人民代表大会和人民代表大会制度在我国的政治生活中分别占什么地位?注意!是地位 醋豆是怎样做的?用什么材料做?有什么作用? 中国为什么要实行全国人民代表大会制度? 全国人民代表大会在我国的政治制度中具有怎样的地位 水杨醛和醋酐在碳酸钠作用下的反应方程式 KCl和NaCl的焰色反应是什么来区分他们 碳酸钠,碳酸氢钠,过氧化钠怎样分辨 为啥醋酐管制啊? 利用焰色反应区别下列物质:NaCL溶液、KCL溶液、稀盐酸 请问人民代表大会制度能使人民在国家政治生活中直接行使民主权利,这句话对吗? 黑暗的西欧中世纪 字数100~500 如何正确减速减档 过氧化钠,碳酸钠和碳酸氢钠的物理,化学性质和用途. 高中历史论文黑暗的西欧中世纪 1000字左右 如何减档减速 为什么说人民代表大会制度是我国的根本政治制度?法律硕士的题目 怎么区分碳酸钾和碳酸钠具体点 不要说的太麻烦 谢谢!~ 什么食物可以排汞和铅? 中世纪西欧城市兴起的背景,特点,如题. 汞有挥发性吗?它能怎样到人体内? 在初中范围内如何鉴别碳酸钾与碳酸钠不用焰色反应 人民代表大会制度是适应我国的国情的,这一国情指的是什么 汞有挥发性吗 当闭合开学S1时,L1是否短路怎么判断的?如何判断用电器短路(电流没有经过用电器)?感激不尽是闭合“开关” 结点?就是交点吗?对不起...正负极画反了...明天放学我再来给分吧 为什么人民代表大会制度适合我国国情的根本政治制度 质量和速度谁对物体动能影响大 ===初中物理问题===关于短路到底有哪几种情况下电路会短路呢?请列举一下,顺便稍微解释..当然简单的可以不用.还有就是该怎么区别电路是否短路呢? 等量的钠,氧化钠,过氧化钠,氢氧化钠,碳酸钠晶体露置在空气中,最后质量由小到大是怎样排列的? 物体运动速度越快,其分子动能越大 为什么不对 短路!虽然说短路是导线直接连接在电源的正极或负极,或者说是导线直接连在用电器上这个乙是错误的是短路疑问:那么第一个图算不算短路 与钠 氧化钠 过氧化钠 氢氧化钠 碳酸钠 碳酸氢钠 都能反应的东西是什么? 速度一定情况下为什么质量越大动能越大? 如何分辨串联电路中是否出现局部短路是指在电路图中如何看出是否有短路现象出现 NaOH 过氧化钠 氧化钠 Na2CO3-10H2O在空气中质量会减轻NaOH 过氧化钠 氧化钠 Na2CO3-10H2O在空气中质量会减轻的是? 为什么动能和质量和速度都有关如果一个物体相对另一个物体是静止的.那么则此物体动能为0.所谓的动能就是一个物体运动时所具备的能量...我们所生存的空间是一个虚无的东西?那么我们人 该说灯泡短路还是线路短路 氯化铵与硫酸钠的混合溶液如何结晶氯化铵?并且对温度有什么要求.谢谢! 怎样测试纯净水、花生油、酱油是导体还是绝缘体? 如何鉴别碳酸钾和碳酸钠溶液? 中世纪西欧城市的兴起有何历史意义?同志们不要懒哈!说全面一点啊!谢了! 说西欧中世纪黑暗这个想法全面吗? 我国改革开放30年来取得的成果,有目共睹.发展是会注意民主政治,最根本的是把坚持党的领导、人民当家做主和依法治国有机统一起来.结合所学政治生活说明我国为什么要坚持人民代表大会 人民代表大会制度、人民代表大会、全国人民代表大会三者的区别是什么? 黑暗的西欧中世纪形成历史、背景、原因 如何鉴别两种无色溶液碳酸钠溶液和碳酸钾溶液? 人民代表大会制度与全国人民代表大会制度的区别与联系急 求黑暗的西欧中世纪感悟(1500字)要感悟,不要内容~1500字,多点也没事~少的不要!就是有讲西欧中世纪的一些介绍的,那个就是内容,我不要的~我要的是感悟,对于黑暗的西欧中世纪的你的看法, 为什么要坚持和完善人民代表大会制度? 高中有机中关于溴乙烷+氢氧化钠水溶液反应CH3CH2Br + H2O = 氢氧化钠催化 = CH3CH2OH + HBrCH3CH2Br + NaOH = 水 = CH3CH2OH + NaBr这两个方程貌似都是溴乙烷与氢氧化钠共热的方程式·· 请问这两个方程有什
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘