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

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

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

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

从17美元到50美元 Facebook股价上涨背后的两大关键 12个理由:为什么我会认为Android比iOS 7好! AMD推 "Mantle" API 欲释放GPU全部潜能 Salesforce架构:日事务过13亿,2.4万TPS的数据库峰值 久违的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开发必备的调试利器 六年亲历,见证中国大数据技术与应用时代的到来 大家如何保存自己地提问?? JTable怎样一行一行地显示? 我的程序 无边框窗口显示问题 求教各位大虾 VB数据库 如何知道某字段有这个姓名记录? 我想学一种C++的集成环境,是C++BUILDER还是VC 我完全没基础,请帮我走出第一步:汇编工具在哪下载?我想试试那个“两只老虎” 如何在还原Cookie中的中文字? 制做彩色立体阴影怎么做啊! 我的程序 请问有没有这样的公司? 2000 server 无法使用ADSL????? 我要和她分手。。。。。。。。 一个不错的网站,进来看一下吧! map 使用的几个小问题 請大家幫我做這個的標準譯文,謝謝!!! 就像做考題一樣,不要只說它在概意思! 新手上路第一问!Hello World都不能运行 这样的SQL语句怎样转化成能在mysql下运行的 学汇编,应用在什么地方?单从功能来说,汇编强大还是C++强大 replace语句的使用方法: 一个不错的网站,进来看一下吧! 关于软加密的问题???? 请高手,两个简单的问题?在线等待???急急!!! 关于ADOQuery1.refresh的问题 我的程序 一个不错的网站,进来看一下吧! 求DELPHI开发ACTIVEX用于WEB打印指定内容的实现说明。 dreamweaver中的一个小问题,,,急!急!急! 我的程序 100分求救啊!使用TEvent对象要包含什么头文件啊? 如何使SYNTAXFROMSQL不从RDBMS中的extended attribute system tables中获取数据 一个不错的网站,进来看一下吧! 几个菜鸟问题 求教:如何配准图形和图象 如果不会C语言,也不会汇编语言,那么学C++困难还是学汇编困难 请各位帮忙超简单,散分! 向往技术的高手请进!能否用DoEvents 实现多线程呢? 谁有DATALIST分页控件,说明如何使用! 怎样用VB读取98系统当前的硬件配置??求助!!!! 在线等呀 急急!!!!!!!!!!! 急,有关视频输出的问题~~ 我在WIN ME 上UPDATE,结果导致无法收看网络电影(用WMA格式的) cannot focus a disable or invisible window 有关session与servlet/JSP的问题: 高手帮一下,谢谢~~~ 我想把一个picturebox里的图片,复制到剪贴板,并且在文件夹中能够实现粘贴功能,怎么办 为什么我的计算字段在DBGrid中出不来。 关于在winform中DATAGRID的问题? Oracle8i出现Oracle Intelligent Agent Executable错误怎么办? 分度头分78等分怎么分谢谢了 有没有关于敬廉崇洁的成语故事内?同题 胶体分散体系与大分子溶液的主要区别是什么 分度头 三等分一个圆用万能分度头 怎么来三等分一个圆 本人刚刚接触有点混 像亚细亚的意思.没啥问的了. 在这个正方形内剪去一个最大的圆.剩余的面积是多少?[正方形边长5米] 急, 33等份在分度头怎么分万能分度头上加工33等份如何分啊 敬廉崇洁的故事有什么? 液溶胶与溶液怎么判断一分散系是液溶胶还是溶液?如:下列分散系中属于胶体的是A.蛋白质溶于水B.白磷溶于CS2C.高锰酸钾溶于水为什么说蛋白质是胶体??它跟白磷和高锰酸钾一样都溶在水 分度头怎分61等份 CuO的四层含义如H2O的含义是:一个水分子是由两个氢分子和一个氧原子构成的。 显微镜的使用方法,还有有关显微镜有哪些题 桂园小学同学在“迎奥运”活动中共放飞了2008只鸽子,其中低年级同学放飞的有508只,中年级同学与高年级同学放飞只数的比是9∶16.高年级同学比中年级同学多放飞多少只? cuo什么意思 归纳一下生物显微镜的用法,鞠躬由于我初中基本没听课,所以现在对显微镜的用法完全搞不清楚请帮我解答下面的问题1,大小光圈和反光镜的用法,意思就是该什么时候用2,目镜物镜高低倍的视 桂园小学同学在2008年“庆奥运”活动中放飞620只鸽子,其中低年级同学与高年级同学放飞只数的比是3:8中年级同学与高年级同学放飞只数的比是9:16,中年级同学比低年级同学多放飞多少只? 把一块铁块压成铁片,它的密度怎么变化,体积怎么变化?可是压力不是会改变物质的密度吗? 初中生物显微镜使用方法(求视频)我在百度搜索了,都是那种通电了的光照的,可我们实验考试是那种用好像是一个反光镜来反射光线的,文字说明看得有些头晕,求视频! 同学们在迎世博活动中共放飞了2010只鸽子,低年级同学放飞了510只鸽子,中年级比高年级同学放飞只数比是9比16,高年级同学比中年级同学多放飞了多少只 一种镀锌铁片 其中含锌质量分数为百分之10 取15g 这种铁片放入稀硫酸 充分反应生成多少升氢气 H密度0.09g/ 下列物质中,①CO2②KCl③CaBr2;④O2;⑤NH4Cl;⑥Ca( OH)2;⑦N2;⑧HBr;⑨NH3:⑩Na2O2,试用以上编 号填空:⑴只有非极性键的是______;⑵只有极性键 的是______;⑶只有离子键的是______;⑷有离子键,也有非极性 用4个1平方分米的的正方形分别拼成一个正方形和长方形,长方形面积是多少? 请问:把一块铁块压成铁片,它的密度怎么变化,体积怎么变化?压力不是会改变物质的密度吗?所以体积是不是改变小,密度变大?如果是:将蓬松的1kg棉花压紧,它的体积和密度怎么变化?两者 在《中国古代史》一书中有这么一句“操十二石的强弩”,写的是吴起在魏的军事改革中的一项士兵要求这其中的十二石是多少斤或者说是几牛(如果是力量的话)?有人说一石好几十斤甚至 把4个棱长2分米的正方形,拼成一个长方形,拼成的长方形面积可能是多少平方分米? 将6.5克的锌放入足量的稀硫酸中充分反应,的到80mL密度为1.25克每毫升的溶液,计将6.5克的锌放入足量的稀硫酸中充分反应,的到80mL密度为1.25克每毫升的溶液,计算所得溶液中硫酸锌的物质的 弩比弓更准射程更远,为何古代军事史上只有骑射兵没有骑驽兵? 数控分度头和分度盘的区别是什么? 把一个长方形的长增加5分米,宽增加8分米后,得到一个面积比原长方形多181平方分米的正方形,这个正方形的 请帮我翻译:君子喻于义,小人喻于利 NaHS是酸式盐吗 碳氢油是个什么东西?我要它的分子结构,不是要他的用途,石油天然气也是碳氢化合物,这个碳氢油到底是什么》、?我要分子结构...碳氢油这个好像是一种新能源,就是看它是真还是假,网上 “君子喻于义,小人喻于利.”的译文是什么?加急, NaHS的质子守恒是?3q 我有2个圆加工件要用万能分度头等分,一个是Φ25.5mm 需要27等分 还一个是Φ21mm 需要16等分,我应该操作或者说我在万能分度头上应该怎么操作,最好是用通俗点的解释下,我是小白,请达人解析, 初中军训日记最后一天的 男生的 实际一点 1 alcl3和nahs反应方程式 CUO是什么意思 气蒜(只长蒜皮不长蒜瓣,蒜瓣也是蒜皮)怎么解决?我住山东昌邑大姜之乡,在姜地也学种蒜.肥水也充足,蒜薹1000斤/亩,蒜秸很粗,蒜头也大,但是蒜头形状象水仙,蒜皮红色,手感很软,剥开见很多蒜 我有标答,要的是思路或过程, cuo四层含义 汽油瓶上的汽油味有多少时间才能完全挥发?汽油瓶身上的汽油味需要多少时间才能完全挥发?就是说要闻不到汽油味, 我有标答,要的是思路或过程,各个选项.我有标答,要的是思路或过程, 各个选项. 柳州话里的“撮(cuo)”是代表什么意思啦? 孔子对教育有哪些重要贡献?八上历史与社会 火药是那个国家发明的? 毒鱼 阿拉伯和拜占庭教育在历史上有那些贡献?还有他们成功的原因?和产生的影响? 初三化学酸碱盐,求详解!我有标答,要的是思路或过程,谢谢! c怎么鉴别初三化学酸碱盐,求详解!我有标答,要的是思路或过程,谢谢! c怎么鉴别 《春江晚景》是谁的画作,一种肝脏内有剧毒的鱼是哪种那种鱼是日本人爱吃的 如何提高阅读概括能力 碳氢油怎么样?有谁了解这一块的?能不能做啊? 什么是绝缘体,请从电子转移方面解释其原理 怎样提高概括能力! 甲醇和碳氢油哪个作为汽车动力油更好?_什么油料更有发展前途 “敬廉崇洁”的小故事 急为什么要先接通电源,再释放小车使其运动在试验中为什么要先接通电源,再释放小车使其运动 什么是碳氢油 敬廉崇洁的人物故事(故事比赛用的,3分钟左右,名人的故事,3分钟左右,别太长也别太短 ,比较好理解的,有些语言描写的更好, 溶胶与大分子溶液是否为动力学稳定体系 斯里兰卡庆祝科伦坡国际机场高速路建成外媒关注《新快报》为“记者门”事件道美报报道 北京推“自住型商品房”稳定外媒报道中日论坛因钓岛引发“语言冲突美国“天翼掠过休斯敦”航空展揭幕韩独岛宣传片涉嫌非法引用日媒资料被要禁化武组织称叙利亚提交销毁化武初步计俄罗斯航空专家开始在美国上空进行观察麦当劳与四十年“老伙伴”亨氏番茄酱分美国共和党参议员计划推迟叶伦的美联储美国广播公司高管就“杀光中国人”视频日借太平洋岛国会议插手南海朴槿惠为职棒比赛开球 露甜美微笑【组纽约华裔家庭五人被杀案疑犯被捕 为被女教师被调离因婆婆抗拆 评论吁查幕后中国海警编队10月28日在中国钓鱼岛安倍称不容中国“武力崛起” 外媒称中美医保网站高管被爆系奥巴马夫人同学 马尼拉市长将赴港道歉 评论称菲律宾一哈萨克斯坦时装周:黑白搭配永不过时美海军航母编队在中国南海训练演习纸糊的?连日豪雨金门4层楼房竟倒塌张盛和:为什么没人见义勇为?台湾太空遥感头号专家私自赴大陆 被中台中:药厂医院挂钩 涉诈药费7千万马英九:公共运输系统增警力台南蓝营市长候选人黄秀霜盼加强农路建直击武警云南总队医院实兵拉动演练泰媒:英拉被获准回家取日用品 可能将南宁通报9起损害群众利益涉农典型案件南宁:市民路边停车被拖走 质疑交警\贵州万余警力清查城中村等暴恐分子可能四川宜宾一中学发生一起学生斗殴事件 认真贯彻落实总书记的重要指示精神 确吴英杰会见中央编办机构 编制核查赴藏埃及总统大选大学校园临时关闭武警洛隆县中队扎实开展群众工作创新强军目标主题教育“三辆车”畅通便民服务渠道认真贯彻落实总书记的重要指示精神 确中国要永远做一个学习大国区党委农村工作领导小组召开全体会议
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘