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

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

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

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

腾讯云总经理陈磊分享微信云三步曲 十大技术,十家机构,从行业制高点一览大数据 【OSTC讲师专访】严旭:文艺豆瓣也很开源 大姨吗携手睿仁医疗 推智能体温贴Raiing 三个火枪手将重袭传统零售业 网易王健宗:革命Hadoop,Spark带来百亿市场价值! MediaTek高级总监Chien-Ping Lu:HSA在下一盘大棋 Docker一周岁生日快乐 虚拟现实,正在改变什么? 一周消息树:腾讯CTO张志东离职 未来希望帮技术人成长 又见真人CS:13th Lab推出移动FPS对战平台 前瞻、教育、创业:Maker Faire演讲嘉宾揭晓 提高API采用率的六大方法 一周热点:以咖啡店为例演示Web应用程序扩展 中国云计算大会PPT集萃(四):数据安全与实际应用挑战 CDN前景光明,SDN发展的驱动力源于对产业的颠覆 Android、WP双系统若要发展 难题不断 即将于下周召开的微软Build 2014六个愿望清单 【独家专访】腾讯陈磊:你不知道腾讯对开源有多爱 地下数据交易网站Rescator被黑,疑似Target报复 Spark独门秘籍:打造结构一体化、功能多元化的高效数据流水线 【走进支付宝】重磅嘉宾!历届“走进企业”回顾 【OSTC讲师专访】腾讯TDW项目:开源的分布式数据仓库 ID爆发的物联网时代,我们该如何管理手中的数百个账户 取代Google Maps?苹果大幅优化Apple Maps用户体验 中交兴路系统架构师杨晓明:Hadoop+Storm+ HBase…,打造交通行业创新型服务 雨果·巴拉的第二春:我与小米的那些事儿 为什么Android Wear能统领智能手表领域? LinkedIn缘何抛弃Ruby,转投NodeJS怀抱 【OSTC讲师专访】九秒社团李明:开源对游戏产业的渗透与帮助 IBM 2014中国论坛:挖掘新互联网时代下“智慧企业”的发展之路 ms6163 可以支持奔3吗? 女孩为什么穿短裙?大家快来看 找注册码,我下载了一个叫AVPhone的东西,有没有哪位大哥有注册码??? 42分,如何在VC中建立象vb中的控件数组 实习要搞数据库开发,可我只学过foxpro2.5~~~,现在想用vfp,能不能推荐一本好的,谢谢 在DELPHI中如何控制DOS命令语句的运行顺序? 请问:网站发手机短信息的技术解决方案,请详细说明一下! 为什么JBuilder5中没有Component Palette ,即能够产生各种控件的页.象jb3那样.有swing,swingcontainers,dataexpress..... 为什么我不能给分? 如何实现网络定时传输文件??? 完了,完了,我彻底完蛋了! 我从网上下载的*.bin文件的电影怎么播放? 考水平考试的朋友请过来看。 刚收到111222的信~~~难过~~~我会想念他的~~~你们是不是也会~~~ 我的硬盘为何这样!help!! 考水平考试的朋友过来看看 我要毕业啊 ===============想知道111222去向的朋友,看这(独家披漏)===================== 以下SQL语言如何写? 111222走了~~送分~~~心里不好受~~~ 111222真的走了~~~~~~~~~~~ JBuilder中用MYSQL数据库,用中文进行条件查询时,查不出任和数据? ASM 菜鸟问题,请大家帮忙!谢谢 解释一下好了吗? ============答对我的问题者,将可获得111222的签名照片!!!!!!!!=========== 关于图片的上传 ======== 绝对好消息,activereport2.0已经release 了,cracker们出动啊~~~~~加油 ============= 关于什么才是真正的系统分析和系统分析员的讨论!——欢迎大家参加,进行善意地讨论!^&^ 今晚的球赛什么时候开始啊? 哪里有关于水平考试(高程)的模拟题的啊??? 为什麽还是不能显示中文呢? 怎样获取WIN2000的密码 在父窗体怎样画jpg格式的背景图? 如何注册MSComm控件????????? 如何解决这个问题啊?重赏啊!!!! 公告: 从现在开始封shines 111222 :)流芳斑主,结贴的工作要开始了,会很累啊!我代表大家先谢谢你了! 怎样改变MSHflexgrid中每条记录的背景颜色。急急急急急急急 各位,能不能给我讲一下“句柄”是怎么一回事? 唉,心情不爽 关于C++语法的问题? 灌水-----大学时的恶作剧(转载) "setdibs()"是什么来着,请指教,谢谢! 写注释不宜过头 这段代码错在哪里? 请大家预测一下比分(参与者都有分)开赛后就不算了,还有半个小时,赶紧着 写网络电话程序的讨论 最后一帖,贴完睡觉----如何在电梯里捣乱 怎样定制一个在程序中重用的组件?只能通过包方式吗? 寻寻觅觅 汉英计算机科技文章 互译!!有劳各位朋友费心帮忙找找 我靠!真TMD不爽,这个时候准老婆的老妈进了医院! 1、甲、乙、丙三人合修一围墙,甲、乙合作6天完成工作量的1/3,然后乙、丙合作2天完成余下任务的1/4,剩余的工作三人合作5天才完成.他们各完成了这项工程的多少?2、一个两位数,个位数字与 10x+20(x-3.5)=80 这个方程怎么解? 45%x=25%(x+16) 这个方程怎么解, 两个班进行比赛,每个班5男3女.一个队的每个队员都要与另一个队的比赛.男女之间不比赛.胜一场得3分,负一场扣1分.无平局.最后三班比一班多24分.求三班赢了多少场. 2*(x+2x)=54 45-x=x*6这道方程怎么解 将一批工业最新动态信息输入管理存储网络,甲独做需要6小时,乙独做需要4小时,甲先做30分钟,然后甲、乙一起合作,那么还需要多长时间才能完成工作 方程的 X-3=(54-3)+3 如题,方程的 X-3=(54-3)+3 (36+x)/(6+x)=4方程式怎样解? 东港区的,下册,人教版 (/是除号) x/50-x/75=10 顺便讲一下咋解这种方程. 36+X分之36X=24方程怎么解 小学第一学期教学质量达标检测卷五年级数学(上) ① X/45=Y+0.5 ② X/50=Y-0.5 谁知 x/36+x/24=16 这个方程如何解, 北京师范大学五年级数学方程的检验检验怎么写 5%X+(500-X)×4%=23.5这个方程怎么解 (8-X)^2-X^2=36这个方程能解吗?怎么拆括号?得什么? 方程的检验怎么写 x/2-60=x/3+80这个方程怎么解 34+x-8=36-x方程怎么解 怎么写,要检验,要写方程左边等于…… 方程4(2-X)=60的解是 这个方程怎么解:36/X=48/(X+8)? x+4x=360怎么解 解关于x的方程3^(x+2)-3^(2-x)=80 方程2x+4=36的解与y=+x-6的解相同,y应该是多少呢?要全面的,明天就交了, x-(5/4x-360)=1/3(5/4x-360) 解方程过程 (x-18)÷2=x÷4这道方程怎么做? 方程x/2+m/3=x-4与方程1/2(x-16)=-6的解相同,则m的值是 4x-360=x-60怎么解? 25%+X=75 方程 方程2/x+3/m=x—4与方程2/1(x—16)=-6的解相同,求m的值 1.25x加4x等于360 怎么解 方程19-120x=7怎么解注意, 若方程2分之x+3分之m=x-4与方程2分之一(x-16)=-6的解相同,求m的值 (x+18)÷4=120;列方程快快快~~~ 19-120%x=7这条方程怎么解 速求? 若方程x/2+m/3=x-4与方程1/2(x-16)=-6的解相同,求m的值. 18+120%x=24请帮我解答方程. 判断:X=26是方程X-12+6=20是方程的解 方程2分之x+3分之m=x-4与方程2分之1(x-16)=-6的解相同求m的值本人不太容易懂 谁能解这个方程:1/5(x-2)=80% x-1/4=36.这道方程怎么做 X-0.8X+6=16这道方程怎样解 120x=100(x+1)怎么解? x+35-x=(20+x)×2方程怎么解?20+35-x=(20+x)×2怎么算啊? 方程:x+0.8x=2.16怎么解 (x-2)*180=120x怎么解 x/3.5+(x-35)/3.5=x/2 这个方程怎么解 方程8x+16=16的解是x=0 这个方程怎末解 解方程式X-2=X÷3+12 x平方-8x=16 这个方程怎么解? 甲志愿者计划用若干个工作日完成社区的某项工作,从第三个工作日起,乙志愿者加盟此项工作,且甲、乙两人工效相同,结果提前3天完成任务,则甲志愿者计划完成此项工作的天数为_____. (1+20%)=(1+x%)*80%这个方程怎么解? 2.8+x=10.35 解这个方程 2005年基数为1 要求2010年下降22.5%1.每年下降?2.2006年下降1.36% 2007年下降4.09% 如果2008年下降6%那么09年目标是?请列出方程并说明理由 80%x=(x+20)乘75%的方程怎么解 χ²+12χ+36=0请问怎么解这个方程.非常谢谢.在线等谢谢各位了!能详细点写出步骤吗,谢谢!
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn