人机交互课件第8章 移动界面设计相关问题

移动界面设计相关问题一实用的移动设备界面设计技巧设计布局归根结底是为了移动设备用户的可访问性、可用性以及整体的可读性。在布局设计中，重中之重的一点就是确保在所有移动设备上（无论其屏幕的大小以及各异的解决方案）的灵活性。内容的规模会根据屏幕大小而定，解决方案也根据移动设备的不同而改变。良好的布局应该适用于触摸屏和非触摸屏

1布局2顺序与规模一个优秀的移动设备用户界面设计具备两个主要因素。顺序就是指设计中每个要素（如按钮、textboxes和链接等等）的分布顺序与层次。这点对于许多移动平台上用户与界面交互方式起着相当重要的作用。所以设计或布局中的元素次序的排列必须保证可用性，省略那些传统平台上的花哨的设计。内容的规模也是许多移动平台的重要因素。比如按钮或链接的大小要与触摸屏用户的手指大小相吻合，不过每个用户的手指大小也是有所不同的。一个大小刚刚好的按钮会让所有用户都能很好地操作。要注意的是，移动设备上为用户手指设计的链接和按钮的大小可与电脑上为鼠标键盘设计的链接和按钮的大小要相差很多。3重要性的层次结构

移动设备的屏幕大小是有限的，所以要合理地利用。也就是说，你需要尽可能的剔除不必要的东西，有一个办法就是设计好内容的层次结构。可利用字体的大小和颜色等将内容分开。要让内容自身表述自己而不是描述内容，为此在你的布局和设计中要尽量删掉不必要的元素，从而增加可利用的空间，利用这些空间来安置有质量的内容。4轻量级设计需要记住的一点是，用户通过移动设备访问你的网站是，他们是为了查看内容，而不是为了看你那花哨的布局，而且平添些花哨的设计会使得访问更加缓慢。要把用户想象成正赶着去开会的时候上你的网站查看些信息，他们首先关注的内容。所以强调轻量级的设计，提出冗余的设计元素，将内容良好的呈现出来。5重要的内容你的网站肯定是具有自己的核心内容，不过对于移动设备上的网站来说，需要呈现的就是你自己的核心内容或者是用户访问你的网站时经常查看的内容，不要把你的网站上所有的东西都弄到自己的手机网站上。6简单的导航

由于许多移动设备和平台提供的浏览器往往不具有后退等导航功能，所以在你的手机网站上其实可以加入这些简单的导航功能，不过同样一点是导航不要做得太多，因为这会放慢访问速度，占据宝贵的屏幕空间。7不要使用表格许多移动平台往往不显示表格，所以不要将表格作为移动网站设计的主题框架。8平台监测要想让你的移动版的网站触及更多的用户，最好的办法就是对不同平台进行测试，然后提供各个版本的网站。对自己的用户的平台进行测试，然后根据平台的不同提供不同的内容和功能。总体而言，在移动平台的界面设计上，首先要知道移动设备的局限性，才能更好的围绕其进行巧妙地设计。对不同的移动平台要有一个很好的理解，这样才能让你的移动网站能够适用于不同的移动平台。同样你可以利用平台开发商提供的模拟器来对你的网站进行检测。二移动界面设计工具Fireworks这是一个非常高效的屏幕图像处理软件。提供了基本的图形、钢笔工具，并可以快速的完成颜色的定制设置，布局便捷。Fireworks是最佳的整合平台。二移动界面设计工具PowerPoint提供了大量的预设工具与样式，以满足基本场景的绘制，并创建不受工具限制的演示修改环境，同样这是最优体积的解决方案。忘记臃肿的位图工具吧，这里只有KB级别的wireframe。二移动界面设计工具AxureRP这是真正称为专业意义上的交互设计工具。复杂到抓狂，当然我们并不是需要搞懂所有的功能。RP即是RapidPrototyping，快速原型。充分利用它的自带组件，整合到Fireworks与PowerPoint里去吧。二移动界面设计工具MindManager二移动界面设计工具BalsamigMockups值得一试的IPhone原型工具，你会发现原型的表现也可以有趣。但只用它去做一些不正式的show。它的模型不够精确、过于随意，也不对中文提供支持（或许善用工具的你会导出到Fireworks中二次处理）。二移动界面设计工具真正热爱你的所从事的工作。快速的记录想法随时随地，电子产品总有盲区。拿一只顺手的铅笔，利其器，善其事。铅笔与计事本三减少空间占用的一个案例与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以最佳的状态呈现屏幕信息.改进原则去除不必要的提示信息合理减少界面中的文字信息,图形化界面直观的使用户可以完成操作任务.控制字号,使用高亮/对比方式突出类似条目信息有需要充分利用单屏的空间,在不影响文字显示底线,采用多途径的设计方式描述内容.合理布局功能控件减少显示中的控件使用,学会聪明的隐藏低优先级的功能,对于用户熟悉操作与产品开发都将是有益的.

如在Iphone平台善用标准化的actionsheet,在Android中的collapsedmenu限制因素

平台操作习惯遵循不同平台的设计准则(你可以从官方的UI开发指南获取这些帮助教程),避免将错误的理念带给特定的平台.如你不会在Iphone的设计中使用Android/Symbian的Options.熟悉这些原则不仅会使产品易用,善用组合的设计也将提升操作体验.屏幕物理属性

不同尺寸的屏幕不同的UI.要考虑的产品在所有目标用户的不同屏幕的显示效果.如果要做一个通版的UI设计,需要重点考虑带来的负面影响.触摸屏是另外一个需要考虑的情况,滑动使得翻页变的容易,可点击的元素尺寸是否有必要增大以适应大的手指…要知道,mutli-touch目前只是apple的专利.我们需要为特定的这个页面做些什么这个是一个Android平台的程序.

这是优惠券列表页面,优惠券是我们最重要的显示内容,用户需要在单屏中预览更多的优惠券信息.商店信息次之.tab导航将被保持以保证用户不会迷路.移除标题.默认收起商店信息,点击可弹下显示.为保证用户对商店信息的初步了解与注意,加入商店名称.我们将得到右面的界面.四Flow大局观在移动设计中，我们需要完善的功能flow，对它认知的价值使得flow在整个设计开发过程中始终走在前面。完善的flow不仅令功能产品更加易用，带来良好的用户体验，与此同时，也有助于提升开发效率，不到位的flow将带来设计与开发的反复，使团队蒙受损失。良好的移动产品flow标准有三个endtoend所谓endtoend是指功能根据需求设计需要符合所在平台的特性，完整的考虑到用户如何在任何场景下使用操作及完成任务，提供因为有效或无效操作而带来的反馈帮助信息。清晰清晰是指整个设计中不会造成用户的疑惑，符合平台特性易于理解的设计。通常但凡清晰的功能，即使需要付出更多次的操作，value还是高于稍显混乱的设计，虽然后者简化了用户的操作。整合受限于移动产品的诸多条件，合理的归纳使得产品使用更为流畅。这与清晰并不矛盾，重在调和。案例简析功能目标：通过列表快速定位城市。该功能从属于Map视图，图标以形象的道路指向标示。

在mockup中的功能主UI，显示支持的国家；

点击任意国家进入以首字母排列的城市列表；

点击任意城市，自动切入到Map视图并转向相应的可视地区。主UI左上角提供Back键，预留回退。在此可以使用IPhone自带的Pickers控件，将国家列表横向置于上方，城市列表纵向置于UI下方。

它的优势在于可以在一屏中解决所有的问题。

但为了更好的使用Pickers，你需要加入更多的诸如SupportedCity等提示信息以区分两个Pickers，以及顶部的DoneCancel按钮，以完善flow。

这使得用户需要更多的时间来熟悉操作，这不是我们想要看到的。五为了阳光而设计部分硬件设备为适应光线提供了相应的解决方案——屏幕亮度调节，可以手动控制屏幕的亮度，适应不同的环境，以及在更高端的设备上支持的光线感应器。

更有贴心的阅读应用的夜晚阅读模式，这为字体与背景提供了弱对比度的配色设计。但我们在更多的应用软件中发现，对光线环境的设计需求被忽略。

设计原则

布局结构清晰清晰的布局结构是对一个应用是否可用的基本要求，功能布局层次鲜明，使得新用户通过低成本的学习快速记忆掌握应用的功能布局，能够在短时间内完成既定的任务。内容清晰保持图标的简约以及文字的可读尺寸，切忌因为过于追求特效与视觉美感，忽略最基本的可读性。适合的灰度与色彩对比度为不同的环境模式提供相应的对比度设计，以减少用户的阅读疲劳，其中仍需保持内容的可读性。声音事件的反馈设计不应局限于视觉体验，在enable操作后触发的声音，会让用户确信每一步操作的正确，以及填充某些环境下视觉设计的死角。适合的环境元素参与更多具有感情色彩的元素参与，将赋予界面更多的灵性。将weather的元素加入reader不是一件很温馨的事情么？GoogleMap清晰的功能引导设计，绿色、红色的Pin可以直观的确认目的地与当前位置，导航列表简洁，可以更可靠的工作在日光之下。QQ浏览器提供了白天模式/夜间模式的切换，在夜间周围光线较弱时，一定程度上缓解了视觉疲劳。商铺点评为室内/室外环境分别做了配色以及字体设计。在室外的实际应用过程中，更大的字体与对比反差带来了良好的阅读体验。并概念性的加入了天气组件，为出游逛街提供了更多便利。六移动界面隐喻设计一个简单的问题，仅仅从展开的iPad文件夹时界面的呈现，你觉得，有多少种方法，可以收缩起这个文件夹？方法其实有三种：点击（Tap）文件夹图标或者点击其他区域；向上拖动（Flick）界面；双指在两侧向内滑动（pinclose）。第一种也许你早就知道，但后面两种，你也许会将信将疑地去尝试这就是隐喻。《iOSHumanInterfaceGuidelines》里面是这样解释隐喻对体验的影响的：当你应用中的可视化对象和操作按照现实世界中的对象与操作仿造，用户就能快速领会如何使用它。（Whenvirtualobjectsandactionsinanapplicationaremetaphorsforobjectsandactionsintherealworld,usersquicklygrasphowtousetheapp.）iOS的文件夹更多的像一个抽屉的隐喻，并且，它的顶部还是玻璃材质的。从拉开的动画当中，他建立了一个类似抽屉的空间，你一看就明白了。界面与界面之间，并不是简单的线性关系界面与界面之间其实是应该存在联系的，指的这种联系是空间感。存在相互之间的层级和逻辑关系的，而且这种关系，越符合现实的越好。越容易让别人理解，越来越不用让别人学习。这就是我们需要做隐喻，我们需要通过它，去表现界面之间的关系。为什么需要在移动界面中注意隐喻设计？

1.导航缺失一个触摸屏手机的物理尺寸在3.7寸左右，与一张信用卡相当。在这么狭窄的空间内，不能秉着PC客户端“在一个主界面内完成大部分的任务”的思想，去设计移动客户端。必须把界面分拆。与之而来的问题是，分拆后的界面是有逻辑的，但并不能照搬PC客户端中的方法：使用任务栏，层叠的模态对话框去表现这种逻辑。把界面拆分得更多独立化，让界面变成卡片式，一个界面只完成一项任务，保证界面之间联系的单一化，避免界面之间逻辑，或者跳转的混乱。2.缺乏物理力学反馈传统的手机上，用户使用键盘去操作屏幕上的视觉对象，键盘在这个阶段中，扮演的其实是用户操作行为的翻译器。而iPhone的出现砍掉了这种操作行为的翻译，变成直接触摸，这是一项伟大的进步。iPhone虽然缩短了操作行为的执行阶段，但却给操作行为的反馈阶段带来了麻烦：只有视觉反馈，手指触摸的物理力学反馈消失了。手指不再能够感受到键盘按下的物理力学压力，甚至假设你手指粗壮一点，你就几乎没法看见按钮是否被按下。而在输入时，这种情况尤甚，键盘手机上有着悠久历史的高效的“盲打”输入方式只能进入历史的存档中。因此，我们更多的需要利用用户的视觉和听觉，去提供反馈。隐喻设计内容

1.拟物化视觉外观与听觉反馈隐喻设计的第一步，从应用的外观着手，如果可以的话，你应该考虑应用的外观表现出真实物理的肌理材质，以及合理的光影效果，并且，得正确的显示界面的元素的相互之间的空间层次感。另外我们不能忽视的一种拟物化设计：音效。它不仅是对缺乏物理力学反馈的一种弥补的手段，当屏幕处于关闭状态下时，拟物化的音效更能让用户了解当前用户的状态。解锁屏幕的声音、敲击键盘的声音，以及照片拍摄的声音。这都很好的拟物化音效。拟物化的外观很大程度上降低了用户的认知成本，无需阅读额外的文字，用户只要看到软件的样子，就知道它的用途。2.即时反馈假设，你在触摸屏的设备上，使用手势执行某项操作，但界面上没有任何的反馈。你就不得不去猜测一下，你遇到的是下面的那种情况：你的操作手势有误，软件无法响应程序当机了，暂时没有响应对于情况二，很抱歉，我们也许实在无能为力。但是对于情况一，我们得有必要讨论一下，如果反馈用户操作手势有误，并指引或者帮助用户到正确的操作中了。由此看来，传统网页上使用的反馈方式，移植到触摸屏设备上，实在是水土不服。移动设备最好的错误反馈，应该是即时跟随用户的手势操作的。如上图示意，这才是一个触摸屏上，应该具备的一种反馈，它即时响应了用户的手势动作(即使可能是错误的)，而当用户释放操作时，又自动回归到正确的操作结果中来。3.流动式动画传统的软件界面之间的切换表现得较为粗暴，大部分情况下，他只显示命令执行前和执行后两个界面，而忽略了他们之间的那段过程。而在真实世界中，倘若没有这个过程，你甚至很难理解过程两端的界面，是如何联系起来的。隐喻设计的评判标准

1.符合现实逻辑的界面空间流动式的动画成为隐喻设计的最后一块拼图，但是我们仅仅把拼图拼起来是不够的，我们还需要检验，这样的拼图是否符合真实世界的逻辑。Flipboard始终如一地采用翻页的动画效果，无论是从首页进入，抑或是从某个订阅源中返回。甚至还精细的制作了三种翻页动画效果：只翻动一页，翻动两页，翻动三页和以上；给以用户这样一种感觉：我订阅的所有内容，是一本杂志任何页面都没有互相从属的关系，只有先后秩序的关系在首页上的方块型的东西，等于杂志的目录而国内的同类产品杂客，所呈现的界面空间却稍有不同，整体上，像是一个时刻变换封面的杂志柜。从杂志柜进入杂志的过程动画，有点粗暴且难以在现实生活中找到相关性。若此过程动画能与iBooks打开书籍的动画类似或相同。也许更加符合现实逻辑。2.自圆其说

简单来说，你的界面是如何进入用户的视眼，也应该以相反的方式，从界面中消失，并且，这个过程，是能够自圆其说的，且符合真实生活的隐喻的。

3.响应用户的直觉手势

移动设备最大的特点是：直接操作。如果你设置了你的界面是从下方推入，那用户可能会直觉性的认为，我把新界面向下拉，这个界面即可消失。从图可以看到腾讯爱看成功的照顾到了用户从隐喻设计中所得到的直觉性手势，只需向下拉，用户就可以关闭此界面。从外观上看，评论界面都处于主界面之下，而动画效果都属于主界面向下拉伸，评论界面向上推至界面顶部。但是zaker的同样响应了用户的直觉性手势，只需在正文界面中，向下拖动，即可激活评论界面，这不得不算是在twitter客户端上的一种进步和超越。七手机交互设计原则

1考虑屏幕尺寸和分辨率手机屏幕尺寸分为物理尺寸和显示分辨率。物理尺寸是按英寸对角线计算。显示分辨率指的是屏幕图像的精密度，是指屏幕所能显示的像素的多少。显示精度是每英寸上可以显示像素（DPI）。NOKIAN78的物理尺寸为2.4英寸，显示分辨率为240*320像素；HTCT7278的物理尺寸为2.8英寸，显示分辨率为480*640像素。一款软件适配所有分辨率的手机难度较大，势必需要先挑选主流分辨率进行设计，在此基础上适配其他分辨率的手机。

2视觉重点自上而下大多数情况下浏览者看电脑屏幕时都不由自主的以“Ｆ”形状的模式阅读网页，而手机屏幕很小，显示能力有限，屏幕上内容尽收眼底，阅读文字时自上而下，因而信息的重要性也是从上到下依次排列。3界面简洁手机屏幕的显示能力有限，使用物理按键时，无法像电脑或者触摸屏那些跳跃式操作，必须依次切换控件的焦点，例如手机界面中的翻页程序，用户使用最多的就是“下一页”，将“下一页”放置为第一个控件便于用户操作，方案1优于方案2。界面简洁的途径：减少控件的数目，使程序的主功能显然易见，引导用户操作。当内容过多时，要突出重要信息，便于用户快速浏览。显示出错信息时，不要只告知用户程序出现错误，要提供有用的信息引导用户完成操作。手机上网的速度慢，一般在6k/s，这就要求页面的内容尽量精简，避免过多的图片。页面的内容控制在两屏以内，也不能空白。比如当用户支付电影票之后，不能只显示“支付成功”，可以引导用户使用其他功能。简洁要求文字描述简练，但也要充分利用手机屏幕上仅有的显示空间。

例如iPhone的搜索栏，搜索框用于内容搜索，点击之后会显示虚拟键盘，除了左边默认的搜索图标之外，搜索栏还包含其他元素。占位符文本。可以提醒用户搜索栏的功能（例如“Search”）或者搜索的内容（如Google或YouTube）。书签按钮。记住用户的搜索内容，如在地图搜索中，书签按钮可以快速地查到已标记位置、最新搜索的内容和联系人。默认在搜索栏上用户没有输入文本