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

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

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

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

Swift语言那些鲜为人知的特性 《开源者说》08期:聊聊Java那些事儿 专访唐成:从小工到专家,PostgreSQL的修炼之道 《瞬间之美》作者Robert Hoekman Jr:如何成长为UX领袖人物? TIOBE 2015年6月编程语言排行榜:Swift份额上升,Objective-C成自由落体 【CTO讲堂】Box首位华人核心工程师的回国创业之路 【探秘ES6】系列专栏:ES6简介 专访《Javascript设计模式与开发实践》作者曾探:爱编程 爱生活 【探秘ES6】系列专栏:迭代器和for-of循环 【CTO讲堂】UCloud联合创始人兼CTO莫显峰:如何成长为技术合伙人? 【探秘ES6】系列专栏:生成器 iKair转型传感器及SaaS厂商,发布Maxense平台与9款“云传感器” 免费jQuery幻灯片图片轮播插件Galleriffic的使用方法 专访IBM中国研究院院长沈晓卫博士:全新的物联网来了 《近匠》GYENNO CEO任康:用“勺子”敲开一片新市场 Horde3D——基于C++编写的3D渲染引擎 Maker Faire 2015在深圳正式开幕,关注创客生态系统 Arduino与Seeed Studio达成战略合作——专访Arduino联合创始人Massimo Banzi 免费开源的Bootstrap富文本编辑器bootstrap-wysiwyg使用方法 CCAI2015:首届中国人工智能大会将于7月26-27日在京举行 拥抱互联网+ 用友NC6助力集团企业蜕变数据驱动型公司 《近匠》融云,自主研发真正“不丢消息”的IM云服务 【CTO讲堂】听云CTO Wood:APM实现原理及对IT和产品运营的价值 从7个维度浅析虚拟现实Alpha年 Maker Faire上的微软:将技术与工具带给Maker才是关键 友盟2015年Q1移动互联网报告:车联网App崛起 多面编程语言Scala NEC高可用集群软件EXPRESSCLUSTER X3.3面向中国市场正式发布 【探秘ES6】系列专栏:模版字符串 专访图书作者祁宇:C++11让程序更简洁、更现代、更强大 滴滴打车CTO张博:生死战役,技术和时间赛跑 谁有完整的MPEG2、MPEG4标准 vc中有没有处理ini文件的类,或请介绍处理ini文件的代码与函数.谢谢(最好有例程)!!! 初次接触lotus不知道从什么地方下手,请赐教 哪里有好的学习JAVA的网站或书. 问个送分的问题, 快来帮助,再线等待,高分相送 多文档中怎样写子窗口的OnSize()消息 关于报表的一个小问题? ??如何调用COM+对象? 微软专家:教我如何理解.Net的跨平台? 我真的想问,不精通编程就一定不能成为计算机人才吗? 如何在单文档工程的CMainFrame中得到CView指针阿? 哪位大侠使用VC和数据库比较完美地做过管理系统?交流一下,要分您说话。 各位大侠请进来提点意见把:关于统一认证平台的问题。 怎样设置多文档中子窗口的OnSize()消息 ?有关COM自动化类型Variant传递安全数组的一个问题 请问foreach这样的语句怎么转换成for或while语句? 请教高手,VB可否打开unix服务器上的数据文件,如何实现?谢谢!(无内容) CHOTKEY控件改变的消息如何得到? 请问哪里有关于c/s和b/s构架讨论,简介 等的文章?? 50分!!! 如何拆分一个字符串 SOS!!! 使用showModalDialog问题 有这么一个问题.... 栈的一个典型操作(计算表达式) 在PB65自带的installshield5中,怎么在开始菜单添加快捷方式阿? 多文档中怎样写子窗口的OnSize()消息 急啊!!!!!从ibm下载的websphere studio siteDev和appDev安装启动程序时,都出现The trial version license cannot be found!!!!!!! win2000自动关机的问题 为什么不上网也能登录域? 如何捕获键盘事件 谁能告诉我,我的程序错在哪里? 请问各位大如何通过javaScript得到文件的大小??谢谢各位急 打开word文档的问题 一个库结构能否直接在连接的两台微机之间相互拷贝? textbox属性textmode为MultiLine时,如何设定maxlength限制用户输入字符数 关于VC类型转换的问题!! 如何在没有使用MFC就是(Set->NO Using MFC)的程序下使用CDC类呀? 如何执行.bat文件 那里可以找到,apache+oracle+unix+java的资料? 还有1个小问题请都各位高手 请教:如何在退出form(含多个textbox)时,知道fomr内的哪个textbox的内容改变了?(立刻给分) 请教一个access的错误提示 在view里使用order by 之后为何一定要用top啊,如:top 100 percent 什么原因? 删除某个表中的前1000条记录的SQL语句怎么写? sql语句中"&"和"+"到底有啥区别?这个语句怎么写?50分! 谁知道在ie中怎么打开excel文件(嵌入式),即excel的菜单,单元格都嵌在ie里面 计算机考试 TTreeNode Question! Microsoft VBScript 运行时错误 (0x800A000D) xiaolun(小懒)进来拿分,呵呵……不好意思,刚考试完的,真不好意思啦! SQL SERVER2000高手才能回答的问题!问题若能得到解决,绝对给分,给分高限100 球阀阀杆最小直径怎么确定啊查哪个标准,GB /T12237怎么没给定? 电磁铁的吸引力是怎么计算的? 云南过桥米线的由来?为什么叫过桥米线? GB/T2363⑴990同等于德国的甚么标准 半径为r的金属圆环绕通过其直径的轴OO’以角速度ω作匀速转动,其周围存在磁感应强度为B的匀强磁场方向垂直OO’.从金属环的平面与磁场方向平行开始计时,则在环转过30°角的过程中,环中产 关于2008年高中物理竞赛实验听说今年的初赛也要以笔答的方式考高中要求的几个试验,不知是否属实,有知情的高手麻烦告诉一下. 云南过桥米线的配料是什么! 如右图所示,N匝矩形导线框以角速度ω在磁感应强度为B的匀强磁场中绕轴OO′匀速转动,线框面积为S,线框的电阻、电感均不计,外电路接有电阻R、理想电流表和二极管D.二极管D具有单向导电性, 高中物理竞赛实验辅导 用棋子等距离地围成一个空心的正方形,每边有16粒棋子,四个顶点上都有一粒棋子,求小刚共用了多少粒棋子? 如图,圆线圈100匝,半径r=0.1m,在匀强磁场绕轴OO'匀速转动角速度w=300/π rad/s题目答案也是用nBSω,但是有效切割长度不是相当于直径的长度吗,那么不是Em=BLV=B·2r·ωr 乘起来也没能算到恰巧有圆的 电荷和电子区别 2片玻璃中间胶合一片塑胶,有气泡,怎么办 过桥米线 作文要注意突出它的“色,香,味,形.” 好的加分! 匀变速直线运动的位移与时间关系公式 的变式?公式是x=v0t+1/2at² v0是初速度,t是时间,a是加速度,x是位移.我要这个公式的变式.就是v0=?t=?a=?就像通过公式得出 v0=x/t - 1/2at把t=?和a=?说出来 压强的大小相同时,压力的作用效果一定相同吗? 电荷和电子的区别是什么? 由理想二极管组成的电路如题图1所示,试求图中标注的电压V和电流I的大小. gb/t具体是什么商品的标准 过桥米线的作文要吃的一段片段,好的话加分 做初二物理凸透镜成像规律题的方法是什么我拿到题摸不到火门.老师喊背规律也背了,也记了.做题来就是不会.嘿嘿如果有一两道题提供给我最好~记住还要写思路怎么做的~ 硅橡胶挤出管气泡加什么助剂能解决我用的是高抗撕气相胶40度硫化剂是双24 如何改造使对讲机的通话距离更远? 写过桥米线的作文, GB/T2828.1中AQL=4.0,AQL=6.5正常检验二次抽样方案,一般检验水平为I.批量不超过50万,一般抽样抽n 是多少?Ac Re分别是多少?怎么计算?如果是10万,8千等等抽样怎么计算?需要查表吗? 对讲机怎么增加他的通话距离听说是架天线,怎么架的,另外中继器是怎么建的,还有基站,有懂的朋友与我说说下,中继器是怎么建的 电子与电荷有什么不同啊? 更换一个焦距是原焦距一半的凸透镜,要求所成像大小不变,求物距 电子与电荷有何区别 有没有关于过桥米线的作文呢?要有做法、故事、味道(必须详) 直线a既在平面阿尔法内,又在平面贝塔内.用符号表示,并画出相应的图形 半径为r的金属圆盘在垂直于盘面的匀强磁场B中,绕O轴以角速度沿逆时针如图12-2-8中半径为r的金属圆盘在垂直于盘面的匀强磁场B中,绕O轴以角速度ω沿逆时针方向匀速转动,则通过电阻R的电 M与MB,G与GB大小关系,换算 用集合符号表示点P在直线入上,入不在平面阿尔法内.则三个字母的关系 我有一副对讲机但通话距离只有2公里有办法提高通话距离吗 Mp4中的容量大小:MB,GB.等等这些单位之间是如何换算的?如题. 在桌面上推棋子时,影响棋子滑动距离的远近因素有哪些 金属圆盘绕过圆心且垂直于盘面的轴转动,匀强磁场垂直于盘面,感应电动势怎么求老师说太简单了,就直接跳过了 发达国家和发展中国家的主要差异在哪里呢?可以讲得详细一点吗?比如经济上的差异,发达国家的经济好在哪里呢?人均收入高于发展中国家多少呢? 影响棋子滑动距离的远近因素有那些?比如1棋子下面的光滑程度! (请帮我回答2个答案) 怎样增加对讲机的通话距离 GB和MB怎样换算? 有一对棋子,如果黑棋子增加10颗,黑棋子占白棋子的2分之1;如果白棋子增加10颗,黑棋子占白棋子的3分之1.这堆棋子一共有多少颗? 半径为r的金属圆盘在垂直于盘面的匀强磁场B中,绕O轴以角速度w沿逆时 小是 你认为怎样才能缩小发展中国家和发达国家之间的差距 压力的作用效果与接触面的材料有关吗? 对讲机通话距离无线电对讲机的通话距离是多少? 现有长度分别为2cm,3cm,4cm,5cm的木棒,从中任取三根,能组成三角形的个数有多少个? 压力的作用效果与接触面的软硬程度有关吗?请具体点解答. 水平金属圆盘置于磁感应强度为B、方向竖直向下的匀强磁场中,随盘绕金属转轴以角速度沿顺时针方向匀速转动,盘的中心及边缘处分别用金属滑片与一理想变压器的原线圈相连.已知圆盘半径 有长度为12,10,8,4的木棒.选其中3根组成三角形,那么能组成三角形的个数是几个 半径为r的大圆盘以角速度如图,半径为R的大圆盘以角速度ω旋转.一人站在盘边缘P随盘转动,他想用枪击中圆盘中心的目标O,若子弹速度为v0 ,则( AB )A.子弹对准O发射一定不能击中目标B.子弹发射 有关于云南过桥米线的作文350字. 有关高中物理竞赛实验是只要参加复赛的都去做 还是有比例 半径为r的薄圆盘,均匀带电q,令此圆盘绕通过圆心且垂直于盘面的轴以角速度w匀速转动,求磁感应强度大小? 电子和电荷有什么区别?表示不要说的太难……用中二生的表达方法吧…… 高中物理竞赛的24个试验福建赛区的不是公式。是今年的物理竞赛实验题(福建)高中物理竞赛 中子星是恒星演变难道最后的一种形式,哪么,(1)有一密度均匀的星球,以角速度W绕自身的几何对称轴旋转 电磁铁可以吸引什么电磁铁可以吸引的东西 高中物理竞赛的实验竞赛部分是怎么比的?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘