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

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

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

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

Mobile First!jQuery UI组件集Wijmo五年最大更新 首届TCL杯HTML5智能电视—应用开发大赛火热开启! MDCC智能硬件征集关键词:智能家居、机器人、健康生活 采集颜色、自动同步,还有比这更牛叉的儿童触控笔么? AppCan移动平台:为企业移动化进程加速 学生强则国强,访天猫推荐算法大赛Top 9团队 Mozilla与三星之子——Servo特性解读 360天巡启动公测 打造新一代企业级无线安全解决方案 继Storm和Spark之后,Hortonworks添加对Kafka的支持 一周消息树:国产操作系统最快10月发布,并支持应用商店 技术团队看板方法实践的难点分析 SAP云服务加速转型:调动资源瞄准中国市场 开发测试全承包!移动应用开发工具Telerik平台 火火火火火!看HomeKit如何改变物联网和智能家居? MDCC应用与工具关键词:平台、社交、垂直、解决方案 Leap Motion正式入华 将发布第二代软件SDK 120万操作/秒Redis Cloud 集群单一服务器非基准测试程序 2014微信开发者大会顺利结束 TOP10优秀微信开发商名单公布 【最佳实践】通过DevOps确保可靠和有效的信息安全 2048 Hello World:跨平台快速应用开发Python框架Kivy Forrester:关于私有云的10个事实 2014年8月操作系统份额:Win 8.x大涨,Linux继续下跌 0代码、不编程—交互式网页设计工具VXPLO 揭秘Instagram Hyperlapse背后的技术 【CTO俱乐部在线教育研讨会】用互联网技术深入创新教育产品 降低门槛!Hybrid应用开发框架LigerMobile 下一代IT革命:微服务器和雾计算 使用Mongo Connector和Elasticsearch实现模糊匹配 时隔8个月,物联网联盟AllSeen如今怎样? 《近匠》简网:开发零门槛 快速建原生App MDCC免费展位申请超预期 大会内容初曝光 数值模拟与计算仿真,高手请帮忙! 请问:dos下图形放大算法或思路?还有.........(高手请进) 求教!!!!SOS!! --请问如何将一个BMP图形文件转成JPG图形文件,高分请教师--- 高分给出,win98的怪问题! 打印统计问题 请教 : html的javascript 中报错:document.Form1.client_name.value不是对象 VC++里面如何从文本文件中一行一行读取文件? 请问,如何用mail函数批量发送邮件.多谢. 各位请教一下,Jsp 的服务resin在win2000下是怎样配置的 各位兄弟: 有谁知道 侯杰 的 <多线程程序设计> 什么时候才能买到??? 哪里有VFP3.0下载? system.ini和win.ini的作用 怎样生成安装包,多谢! 如何在两个不同的应用程序之间拖动文本字符 请问,PTSTR 和 PSTR 有什么不同? 反对上海电信变相涨价的行为。我能不能告中国电信“违约”和“欺诈”呢。 求救!误删Office2000注册表! 生成.exe出错 在Excel中,如何让某些行不能滚动? 在--成都--程序员能拿多少--¥--???? 换了17寸纯平显示器,开心,放分. 错装PB7,不能无create datawindows的图标,全是XX,为什么? 请问怎样遍历一个页面中服务器端的所有对象? 能否跟我说说——自动控制方面——与delphi编程的基本常识?我一直想了解,但不知道我们编的程序如何去跟那些硬件搞在一起而且控制硬件呢? 程序出错 发现一个不错的网站!www.ffboy.com 兩個Recordset之間數据轉入和轉出問題???. 高手請進......(一定給分) 大家推荐一下 ,win2k 下的 XML 编辑器。 请问男女之间存不存在真正的友情? 请教一下,怎样打印 java applet绘出的图形?,要用java 编写 高手请进!!!关于数据库 很菜的问题!字符串转化的问题? 最近运行D盘时,出来"找不到该路径..."的对话框,是什么原因? 指针数组定义的问题 我想截获tcp包,问从何下手,大鸟们 快来帮忙 远程数据传输问题:不同地域,不同系统间的数据传送有什么好方法? 急!!!(原谅我的无知) DELPHI怎么联接Access数据库!!!BDE ADO都可以!!!! 求安装制作软件 请问进行OpenGL编程除了VC和C++BUILDER外,还有什么工具可用?????? 请教一下,怎样在jsp中捕获 java applet 的按钮事件 一道填空题,大家看一看呀 小弟对现公司特别反感,很想换个学习环境比较好一点的,但是公司又要叫我签下一年的合同,我真是难办。 关于扩展名为.DAT文件的问题。 himen.sys文件的作用? 给SQL2000存储过程批量加密? 如何定义一个和Excel内嵌函数一样的用户自定义函数? 如何用DELPHI扫描所有硬盘的所有文件 老生常谈的一个问题?qq上mm问:“你张的帅么?“怎样回答最好呀!!! 如何扫描局域网共享资源(及进行密码验证)-只想知道原理无其它意思 中国一些节日的英文说法 细菌按形状可分为(),()和()? 当月球走到什么位置时开始发生月食说下,简略 谁知道各类节日的英文说法全一点 细菌有哪几种形态? 月食都发生在圆月之夜对吗30秒之内回答出来 各个节日的英语说法每个节日 铁细菌是什么形状的 物理电功率计算题 1、一个电灯泡在2s内电流做功 w2、功率为500w的电饭锅工作3h消耗的电能为 kw*h3、一个500w的电烤箱工作 h消耗一度电,而一度电可供100w的灯工作 h4、红绿灯,每盏灯都有220v、10 节日的说法Thanksgiving ,Halloween ,New Year'Eve ,Spring Festival 等节日前加什么介词? 细菌有()、()和()状等不同形状,有些细菌相连接成().但每个细菌都能()生活. 一个小灯泡正常发光时电压2.5v电流一分钟做功1.75焦耳求电流额定功率.如电压2v电功率 16.在爆破中,若导火线的燃烧速度为0.8cm/s,人跑步的速度为5m/s.(1)当导火线长度为40cm时,从点燃导火线到爆炸,人最多能跑多远?(2)若安全区离爆破点有300m,那么导火线最短取多少才安全?过 一个高数求导问题求大神解答!希望能写在纸上拍下来发给我会加分就是求括号里面的那个的导数就行了, 不用管左边的e 设X的概率密度为f(x)={2x,0 隐函数求导现在就卡在一点上:例如x^2 + y^2 = 1,我看其中对y^2的求导是2yy',这是咋来的呢?2y后面为什么乘以y'或者为什么不是2y',我看有人说好像是链规则,这是? 常用的静态图象文件有几种格式?分别具有哪些特点? 设X~N(0,1),求Y=2X^2+1的概率密度RT 有这样子的花吗 求导,为什么 d(y^5)/dx 会等于 d(y^5)/dy · dy/dx 一个40W的电灯泡表示的物理意义 花朵分为哪几种形态 高数,如何证明反函数二阶导d(1/y')/dx=-y''/(y')^2如题 电功的物理意义是什么RT 请问这几种分别是什么花(草)?请教一下这俩照片里从上到下分别是什么花? 是在同一个花坛照的 已知y=y(x)的导数y',y‘’存在,且y=y(x)的反函数为x=x(y),试用y',y''表示(d^2x)/dx^2 —(y'')/(y')^3 月食大约在几月 推荐几种鲜花?送一个冷艳,知性的女生.想送的有品味一些.哪些花适合她的特点? 女人体型分为哪几种 月亮为什么会月食 亲戚送一个花篮,请问这几种是什么花? 旗袍款式分为哪几种 今年几月几日有月蚀的?在江苏盐城地区可以看到月蚀吗 一辆功率为45kw的汽车,以72KM/h的速度在平直公路上匀速行驶30km,求汽车受到的阻力是多大?汽车所做的功 轮廓标分为几种,我要详细的. 某家用60w的灯四盏,换成11w的灯.问若平均每天用5小时电,1年(365天)节约多少千瓦时 一道高数题,分段函数求导,分段函数f(x) =[φ(x) - cos x]/x x=/=0a x=01.求常数a的值 ,使f(x) 在 x=0 处连续;2.求f'(x).这道题的1.lim(x->0)f(x) = lim(x->0) (φ(x) - cos x )/x =然後...为甚麼要一定要用洛必达法则?而 肥胖分为不同体型的种类有哪几种呢? 1.家庭电路电压在用电高峰时段时会降低到198V,一盏“220V,100W”的灯泡在此电压下工作的实际功率是( ) 2灯的亮度取决于( )A.灯的电阻 B.通过灯的电流 C.灯的额定电压 D.灯的实际功率 乳房的形状分哪几种形状? 物理题求详解...汽车发动机的功率为60kW,汽车的质量为4t,当它行驶在坡度为0.02的长直公路上时汽车发动机的功率为60kW,汽车的质量为4t,当它行驶在坡度为0.02的长直公路上时,所受阻力为车重的 月亮会发光吗 库仑是什么单位 乳房的形状有几种?我的乳房看起来尖尖的,而我看有一些女人是圆圆的.为什么乳房形状会不一样呢?乳房的形状总共有几种? 最近一次月食在几月几日 高数函数求导问题现有一函数f(x),当x=0时其值为0,当x不为0时其值为为e^1/(-x*x),求f(x)在x=0处的导数.怎么求的? 乳房都有哪几种形状 最近的一场月食是在几月几号 为什么月亮上有许多环形山? 乳头的形状有几种 谁能告诉我最近的月食是在几月几日的几点? 月球环形山形成的原因是什么? 乳房什么形状好看 2008年有没有月食?几月几日? 一辆汽车正以36km/h的速度做匀速直线运动,已知发动机的功率是60kw,求这辆汽车所受的阻力是多少? 定积分求导如 ∫(上a下b)f(x)dx 求导 2010年1月1日的几点几分有月食发生,那后面到什么时候又会有? 高数多元函数求导其实是一个有点白的问题就是,什么时候用dy/dx,什么的时候用ay/ax?我觉得没什么差别啊,为什么书上一会用这个一会用那个~~ 细菌的样子 设随机变量 X,Y 相互独立,且服从[0,1]上的均匀分布,求X+Y 的概率密度参考答案是这么写的.让我不明白的是最后x,y取值有两种情况的依据是什么,又为什么如此划分区间呢?求详细说明(最后描红
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn