手机交互设计禁忌

手机交互设计禁忌

手机产品设计禁忌

在做手机产品设计的过程中，遇到很多看似很小，且很容易被忽略的问题，正是这些小问题，一次次的撩拨用户的耐心，让用户对你的产品心生怨念。刚出道的朋友没有经过实战，对细节注意不多，往往都会遇到类似的问题，强调多次后，觉得不如写下来，给新人共勉。1、没有不可点击的效果

一般按钮会有四态，不可点击效果、可点击效果、聚焦状态、按下状态。如果你的按钮此时处于不可用状态，那么一定要灰掉，或者拿掉按钮，否则会给用户误导。

2、菜单层次太深

菜单项以5~7个为宜，如果有二级菜单，就要注意合理的菜单分类，不能有太多层级的菜单，否则很难预期，也很难找到，寻找和返回都会变得很麻烦。3、文字长度不加以限制

手机界面很小，寸土寸金，一页只能显示下6~10个列表，一行只能显示下10~16个字，标题栏的字数以5个以内为宜，标签栏也以2~3个为宜，那么这时候出现文字过长的情况，一定要定义一下处理方式，如果是选择型的，一般是截断或者打点缩略；如果是内容阅读型的，可以折行。但最合理的方式还是精简文字内容，缩短文字长度。4、文字表意不明

由于手机是碎片时间、片段式阅读，所以手机界面上的文字表意性要求的更高，更苛刻，一定要在用户瞟到的瞬间，准确的传达信息。除了表意清晰之外，还要求语言精简，避免嗦；使用用户的语言而不是程序的语言；产品文案体现产品性格。

5、交互流程分支太多

做交互的时候一定要有一个任务流程的概念贯穿始终，用户是为了完成某个任务而使用软件的，交互设计师除了关注界面元素、跳转逻辑和交互反馈之外，还要关注用户任务，分得清主要任务和次要人物，给主要任务一个畅通无阻的清晰流程，不要给予太多可能的分支，干扰主要流程。6、相关的选项离的很远

相关选项一定要具有操作上的延续性，虽然手机屏幕看起来比电脑屏幕要小的多，但是手机在屏幕上移动的代价，却要比鼠标在电脑上移动的代价大的多，如果手机上相关选选离得很远的话，用户一是容易迷失，找不到下一步操作，二是需要移动手指，到屏幕另一端触发操作。7、一次载入太多的数据

流量、电量、速度和稳定性是手机产品的四个硬指标，如果你的应用不能合理的帮助用户节约流量、电量，提升浏览速度和浏览体验，保证应用的稳定性能，就不要谈什么用户体验。你可以利用预加载缓存、批量载入、动态刷新、服务端数据压缩等方式来保证省、快、稳基础体验。8、按钮可点击范围比看起来小

我们都知道移动端有个神奇的数字“44”，根据食指最小点触距离7mm、拇指最小点触距离9mm，可以推导出做设计的时候，最小的点触距离是44*32px。你可以设计一个精美的小图标，但是在定义它的点触大小的时候，却可以做放大处理，但你千万不要设计一个傻大的图标，点触范围却比图标要小，这样会给用户带来明显的误操作挫败感。9、标签页跟内容没有从属关系

标签页跟内容需要有很好的联动关系，一般一个界面内有二级标签就足够复杂了，千万不要再有三级标签、四级标签。每个标签页都有自己特有的内容，当切换标签的时候，内容跟着切换。标签页如果是点击切换，内容部分可以整体刷新，标签页如果是滑动切换，内容页也要跟着滑动切换，千万不要一个点、一个滑。10、把所有的操作都暴露出来

手机产品交互设计要经历缩减、隐藏、附加、组织的过程，千万不要妄图把什么功能、什么操作都暴露出来，以彰显强大。你需要把自己应用的所有功能所有操作做个优先级设定，那些常用的20%的功能，放在界面的主要位置上，其他80%的操作，放在次要位置或合理归类组织后，隐藏起来就可以了。11、没有空数据界面设计

我们在做设计的时候，往往是提供理想化的场景，用户都已经进来了，我们怎么玩。但是，往往应用刚推出的时候，是没有用户的，甚至当应用有了一定用户基础的时候，新进来的用户打开应用的时候，应用仍然可能是一种没有数据的状态，再或者当用户清楚了全部数据，这三种情况下，用户都可能遇到空数据的界面。新手设计师往往不加设计，这时候用户就会看到一个空白界面，茫然失措。有经验的做法就是，提供一个情感化的界面，告诉用户当前没有内容；更具引导性的做法，就是引导用户去执行操作。12、用户引导的滥用

去年就预言用户引导将要泛滥，很明显设计部门都喜欢用漂亮的引导界面告诉用户新增的功能或隐藏的应用，但不是所有的应用、所有的功能都需要花哨的引导的。如果是通用的功能、非重点的模块，根本就不需要引导；如果是功能告知，只需呀轻量级的引导；如果是版本更新说明，说明书式的引导可以采用，但是要言简意赅。

13、无加载中状态

手机产品只要是需要联网，需要交换数据，都需要提供一个加载中状态的，无论是菊花转还是Toast还是对话框，你需要给开发人员一个全局的定义，并且要告知加载中是模态（前台加载）的还是非模态的（后台加载）。且要考虑到加载时间过长、网络开关没有打开、网络不通等情况分别怎么去处理。14、未定义Back的逻辑

在为Android做设计的时候，会涉及到硬件交互，其中Back键的使用，是一门学问，Android官方有一些指导原则可以借鉴，但是具体开发的时候，还是会有很多特殊情况，比如单一实例的替换、键盘及一些中间状态，这种情况下，Back可能需要被定义一下，该回到前一个实例（那就需要变成多实例了）还是该回到初始状态（清空输入内容或恢复初始状态）。15、无横屏模式的设计由于横屏模式下，纵向空间变得格外宝贵，导航栏、标签栏、键盘都需要被压扁，横盘模式一定要考虑是简单拉伸适配还是重新设计，如果你的应用不适合在横屏模式下使用，就屏蔽横盘，如果你的应用包括应用widget都需要支持横盘模式（甚至是带侧滑键盘的横屏机器），就需要提供设计方案。如果是S60V5这种竖高的机器，甚至需要重新设计。作为手机产品交互设计师，利用设计规避问题，提升产品用户体验，把体验转化成价值，是我们所追求的境界。手机产品设计禁忌，是笔者遇到的一些设计问题，欢迎各路高手协同补充遇到的问题，共同避免重复发明轮子。

扩展阅读：手机交互设计

手机客户端交互设计三部曲

文档简介：在各企业如火如荼进行手机客户端设计开发的这个时代，作为有过手机操作平台、web应用等多重交互设计经历的设计师，本人发现了一些初涉这个领域的设计师存在思路茫然不够系统的情况，导致在设计进程中原则飘忽、找不到客户端的感觉等结果。本文档即主要面对这类人群，旨在讲明手机客户端设计方法的来龙去脉，从最基本的硬件到平台、到架构和细节，以及一些需要注意的问题。实际上，还应有第4部曲，就是交互设计的表达，这方面与web应用差别是很明显的。鉴于其企业内部文档性质，不便做详细说明，有兴趣的同学可以另行探讨。

三部曲指的是：

第一：手机软件导航的交互特点

第二：手机软件平台与硬件的关系

第三：交互规范

引文：关于手机与web界面交互设计的区别

输出Web取决于显示器手机相对明显更小的屏幕输入风格使用场景鼠标/键盘操作受到浏览器和网络性能限制家中、办公室、咖啡店等室内场所拇指/食指/触摸操作受到硬件和操作平台限制室内、户外、车中、单手、横竖屏由输出性能牵扯到的问题：

1.每屏无法显示足够多的内容

2.没有足够空间放置全局导航条

3.没有足够空间利用空隙和各种辅助线来表达区块之间的关系

由输入性能牵扯到的问题：

1.按键机型需要焦点和方向键、OK键以及左右软键、删除键等硬件之间的配合

2.触摸机型尤其需要注意区分可否点击，并且可点击的部分需要能准确的释义因为缺少web界面中的悬停提示

由使用场景和状态牵扯到的问题：

1.界面需要能适应比web更多的典型场景，例如光线的强弱与使用者走动等情况，所以设计者需要一定程度脱离自己的工位去尝试包括对比度和字号等能否满足使用需求

2.本人没有进行过较深层次的研究，有兴趣和经验的同学可以多交流

引文部分的总结（概述）：

1.手机的操作比web页面复杂，需了解其所基于的机型的硬键情况才能确定如何控制

2.手机软件需要与web不同的导航形式，空间所限3.手机软件在操作步骤的缩减方面需要倾注更多的精力，每屏空间所限

4.手机软件需要在控件/组件释义方面倾注更多的精力，硬键和逻辑所限

下面即三部曲删减了大量实例图片后的内容，基本上只是总结说明了。观者各自的手机都有大量的实例，有空可以多翻看。

第一：手机软件导航的交互特点

上图表现的是手机上的导航是如何表现和运作的。在这套导航体系中，重要程度从高到低是“返回”“标题”“菜单”。图中是典型的S60第三版式的解决办法，同时也是很大比例的按键控制机型的导航方式，其他平台在菜单和返回的处理上有所不同，但同一个平台的处理是一致的。

第二：手机软件平台与硬件的关系

观者可以对比下面两幅图，试图辨别在不同的视觉保真度上，哪个界面属于哪个手机：

以上只是简单的一例，翻看其他平台或者具体的某些机型，你一定可以发现，每个平台的机型都有自己的一套格局和控制方式。这绝不是拍脑袋想出来要如此强行定义的，因为如何控制还受制于着手机的硬键情况，所以每个平台也都会有各自的硬键配备，因此交互规范部分其实是可以包含硬键分布和控制特点的。第三：交互规范

Iphone和Android系统手机风靡全球的同时，移动互联网的发展也掀起了一股热潮。最近发现身边一些朋友纷纷在做手机上的第3方应用，或多或少碰到了些困惑，也许对于做惯了基于浏览器的产品的设计师来说，有一些比较典型的要点容易被忽略，这就容易引发出：找不到手机软件的感觉、布局经常改变、设计和优化时找不到明确的立足点等等一系列令人困惑的问题。本人有过一段手机交互设计的时光，将在这里罗列一些总结或感想，带一些建议，供看官们斟酌和评判。抛开定位、使用环境这样的用户研究体系的大头，专注于说明手机交互设计的特点，其难点在于如何有效的结合硬件、软件平台和设计规范。以硬件区分手机类型：

仅以物理硬键控制操作的机型（后文简称按键机）

主要以触摸方式操作的机型（通常包含主页、挂机等物理键）物理硬键齐全，但支持触摸操作的机型（外形和按键机型一样）

主流的可安装第3方应用的软件平台：

塞班s60（第3和第5版）WindowsMobileforPPCAndroidIphoneOS

Java（目前有非常巨大的智能和非智能机型群是包含java平台的）其他还有很多，诸如plamos、UIQ等交互设计规范：

一个有经验的设计开发团队，在项目初期会率先着手建立或检查相应平台的设计规范。和web控件规范一样，手机交互设计规范定义了一些常用控件、组件等的布局和响应方式，提炼设计中的公共部分，减少设计和开发的重复思考，并确保整个设计体系的一致性。不同的是，手机交互设计规范不仅有着限定作用，它同时还是一个信息架构的体现、一个创新的过程、并且它还对后续的交互设计起到一定指导作用。我们了解到的iphone的无菜单的风格、各种操作手势、弹出框、标题栏和返回按钮，都是在这个阶段就需要定义好的，而不是具体到某个功能中才任由设计师发挥（所以说创新应该作为一个系统工程，而不是在某几个细节上灵光闪现）。

从设计第三方应用的角度看，大致可以浓缩成以下几个版本的设计规范：

S60第3版有一套比较经典和严谨的规范。另外S60第5版虽然是触摸屏机型，但是对于交互设计师的工作来说两者区别并不巨大，只是把OK键替换换成了点击，以及零碎的一些变化。

Java版事实上由于左右物理控制键和方向键、OK键是按键机型的普遍配置，S60第3版规范的适用范围是非常广泛的，稍微修改一点就可以适用于Java平台。区别在于手机的“删除”和“返回”两个物理硬键的配置不太一致，所以需要统一将右下角的命令默认为“返回”，在编辑文本时，临时变为“删除”。这样牺牲了某些机型的某些操作的效率，保证了这个整体的机型都可使用。

IphoneOSIphone的出现一举打破了之前若干平台固有的设计定势，硬键和操作模式都精简了许多。不过其缺少固定的menu模式，这对第三方软件的设计来说是个巨大的挑战，要么需要很大程度上脱离iphone自身的设计规范体系，要么就极端精简功能。

Android跟从了一些iphone中的经典手势，操作和页面布局风格上相对保守一点，保留了menu和back两个硬键，虽然不够独树一帜，但是在功能和设计之间做的了一个不错的平衡，对于第三方应用来说，这是一个可以有宽广发挥空间的平台。根据上文所述，接下来我就主要以S60第3版、Android、IphoneOS为代表，通过抽取手机交互设计规范中的部分，来说明他们的特性和区别，顺带展开一些个人经验的叙述。

上面几幅图并没有刻意选择同一类型的界面来对比，我们不妨先仅关注硬键/全局功能键，会发现他们之间的显著不同，实际上反映到设计过程中，这样的区别对界面设计造成的影响要来的更大。

1.硬键和手势控制

下面以摘取手机交互设计规范的形式来陈述：

大家请看以下截图：S60第3版

AndroidIphone:

以上硬键和手势对于操作的控制，需要我们在设计前有个十分清晰的认识，并且整个团队达成一致，如有精力则需要专门写到设计规范文档中。硬键控制是没有什么改动余地的，两款触摸机型可以对手势适当进行取舍，毕竟有些应用用不到所有的手势，能精简操作最好。（从下面开始，会有一些功能界面，请允许我偷懒一下，用线框代替实际界面截图）2.菜单

S60第3版的菜单是由左软键或OK键调出，需要定义以下几点：

（注：聚焦到某一条目上时，通常按OK键是打开，但有一些内容包含几种看起来级别相当的操作，此时会弹出菜单选择）

如何收回背景是否雾化每屏最多显示多少条

有无二级菜单，如果有，怎样调出和收回，和一级菜单的位置关系，焦点条的区别菜单项文字靠左

数字标号，如果整个软件能保证菜单项目均在10位以内，建议加上，这样可以与数字键盘对应

对聚焦项或当前页面不适用的菜单项，是不显示还是文字变灰处理。OK键菜单只包含针对聚焦内容的操作项，需控制在一屏之内，避免二级项

菜单项的排序规则：针对聚焦项的在上，其他的在下，这两部分中分别按照使用频率从上至下排列

Android

Android传统的菜单是由menu硬键调出，比较多的是2-3行，每行2-3项，看起来像是一些按钮，所以里面的图标和文字都居中。作为第3方应用，如果菜单项稍多，做成一纵列的文字项从操作上来看也未尝不可，毕竟用户刻意记住其默认的菜单形式也没有什么好处。只是仍然需要注意控制一下数量，如果需要二级，可以考虑做成弹出的，比如在一级项中选择“排序”，之后弹出选择框来选择。

Android还有一种长按菜单，按住某个项目达到一定时间后，会弹出在触点附近的位置。Iphone

Iphone并没有一个明确和固定的菜单模式，较保守一点可以说是没有。一些类似菜单的操作通常是通过弹出选择，或者是拆分成几层，一次次点击进入更深层的页面去寻找按钮的形式来达成。所以要做Iphone平台的第3方应用的同学应当提前做好准备，从产品策划开始就着手考虑这个问题。最有效的办法是首先尽可能的缩减功能，其次尽可能的缩减操作方式。否则会发现为了一些细枝末节的操作，还需要设定好几层页面。当然，也可以加入一条操作栏来作为辅助，只是整体风格和操作就不Iphone了。

说到这里，不得不结合前两点延伸一下，对导航系统进行说明：

众所周知，导航系统主要担负着几个任务：展示内容架构、表明当前位置/状态、表明可以去哪里。在网页上的典型形式为全局导航条。在手机上，导航系统同样重要，但是受限于屏幕尺寸，一般没有足够的空间放置这样的组件，但手机有着自己的体系：

我们可以看到各平台对导航系统的规划：

标题显示当前位置，可以是文字、图标+文字、也可以是一系列tab

菜单显示可以做些什么，通常包含两种类型的选项：a只针对选中项/只针对当前页，b全局功能如设置和帮助，也就是说菜单大多数作用是发起针对当前页的操作，或者转到和当前页面没直接关系的页面

返回这个比较复杂一些，也是最需要设计师注意的。鉴于第2条对于菜单形式的描述，如果再加入关联页面的选项，项目数量和类型会使菜单不堪重负。并且页面标题通常无法准确表达出相应页面的内容，即使放入菜单，也需要用户花时间去理解和回忆。所以“返回”很重要：一个固定的位置，简单机械的一个动作，一按一看一按一看，不需要刻意寻找和思考。在一个没有全局导航的环境里，一步步后退到自己浏览过的页面，从而了解当前的页面体系，或者重新发起一系列操作，是个能保证用户找到位置的简单高效的模式。

在做第3方应用时，需要尽可能严格保持以上几点的规范化3.焦点

焦点更大的意义是在按键机型上，用一个带底色的条框衬托出当前选中的项。对焦点的设定和控制应当尽可能的简单，需要定义默认聚焦的位置、是否允许上下左右循环。

在按键机型上，4个方向键控制焦点向4个方向移动。通常一个方向只限一种移动方式，如上左图：上下键控制列表区的焦点在列表项间移动，左右键控制标题栏的tab左右切换。如果列表区也分左右的话，处理起来就复杂了，应极力避免。如上右图：需要先向上移动焦点到标题栏，然后才能按左右键切换tab？但如果当前焦点所在的项处于第2屏，第3屏，或者更靠下呢？是否需要一直按住“上”，直到上边的内容滚好几屏后才聚焦到tab上？

在一些情况下，焦点容易被遗忘，其中某些对触摸屏机型同样适用：

如上图，页面中包含了一些可操作的元素：人名、图片、网址，这里也会隐藏着一些典型操作，例如对网址可能有“打开”“复制”“保存为书签”等操作，此时聚焦并按OK键或者点击则需要出现弹出菜单。

另外还需要注意上文提到的横向和纵向切换焦点的问题，正文中同一行如果有两个名字可以聚焦，但是左右方向键已经被标题栏占用，那么切换人名的优先级应降低，改用别的形式，即使是按上下方向键来左右切换人名也是可以的。4.弹出框

除了菜单功能的以外，弹出框一般出现在屏幕底端，同时其他屏幕其他部分背景雾化，这有利于用户的视线从密密麻麻的小屏幕中快速找到关键：

弹出框有很多种类型，除了“确定”“取消”等元件的基本布局以外，几个平台区别不是很大，大致可以分成几个类型和对应的处理方式，以下是我归纳和建议的一些处理方式，只列最适用于S60第3版的：

5.列表

列表项的呈现可以集中定义几种模式：常态、编辑/被调用：常态：

编辑/被调用：

6.还有一些方面可以事先定义：

搜索逻辑

事件处理：无信号、低电量提示的形式和时机、来电、来短信、闹钟时间到、缓存已满、发现新版本等。

文本输入：光标的移动、删除和复制粘贴、选中地址/人名等。

复杂逻辑的返回路径：有时候会出现操作路径中断并跳转的情况。比如正在写短信时，弹出提示收到新短信，用户此时通过弹出框直接转到了查看短信的界面，此时“返回”是返回到查看短信的上一层，还是回到编辑短信的界面，这些情况想要集中处理，是比较令人头疼的问题。不久前我大概归纳过一套返回逻辑，大意是：a路径默认是从操作步骤向前一步一步返回，或者逐层向上返回；b如果遇到路径跨页面体系转移，先按照a的方式返回，到达跨页面跳转的界面时，允许跨一次跳转，之后按a的方式返回。

以上罗列了一些我的归纳和心得，开始新项目的时候基本可以按此思路先把这些方面统一规范，提及都是习惯用法，追求稳妥的项目可以直接套用，追求创新的项目也可作为一个评判依据。

最后，用一个简单的例子提及一下：设计与系统规范尽量保持一致的重要性。

假如我们把mac系统的软件风格直接搬到windows中，那么在切换不同软件的时候，

最小化、关闭等按钮的忽左忽右，会使我们经常默认就把鼠标移动到了相反的方向。

每1个第3方应用在手机中都不可能一个程序在战斗，手机中会自带很多系统应用，例如电话本、短消息、设置、浏览器等，他们都遵循着一样的规范，用户每天也会在这些程序中切换若干次。如果一个第3方应用和他们的基本操作方式不同，每次都会使用户经历仔细观察、出错等过程，想象一下每切换一次软件就要转换一套思维的痛苦吧。当然，规范是可以打破的，如果我们找到了简单高效并且操作方式和习惯用法没有冲突的方式，可以尝试一下。例如以前触摸屏的列表项点击一次是聚焦，再次点击为打开，后来普遍改为点击一次就打开。手机UI设计检测要素

手机UI一直被我称为产品的“脸面”，一款好的手机产品一定有一套优秀的手机UI界面。手机UI从产品的图标开始，直到推出手机产品为止。产品的UI从产品概念开始，直到产品的生命周期结束，产品的UI一直深入着用户的心。一个好产品UI评价标准会影响一个产品的品牌和用户群体，这也是EICO对于魅族和Weico的价值所在，结合做过的产品对UI设计检测要素进行了整理。

iPhoneApp的特点及基本设计方法

一、iPhoneApp的特点

iPhone有自己的特点和气质，因此他的App不同于其他键盘手机甚至Android这种触屏手机。首先iPhone只有一个物理按键Home，而这个按钮主要是在系统级操作上起到一些作用，在一个应用中，绝大多数情况都是退出功能。在480x320这个对手机而言很大的屏幕上要包括以下3个模块，才能对一个App进行操作。1、虚拟键盘

iPhone虽然与Android同为触屏，但没有物理键盘(而Android有可能有物理键盘)，所有的输入操作都需要屏幕中的虚拟键盘来实现，同时需要考虑虚拟键盘的遮挡问题。2、目录导航

没有物理按键做为目录菜单的呼出功能，完全不同于Symbian和Android系统，包括导航也需要屏幕中的虚拟按钮来实现。3、功能操作

需要把所有的功能集成在App中，比如我们可以用Tabbar来做功能的分类，工具栏来做具体视图的功能操作集合。

二、iPhone的使用习惯

显然支持单手操作并不是iPhone应用的特性，当然也有一些游戏需要双手进行(沉浸式应用)，但因为iPhone有一块非常灵敏支持手指多点触控的电容屏，所以手指直接在屏幕上的操作更加直观和更具操控感，不需要任何中间设备(按键或是鼠标)来控制。

1、自上而下的操作：

用户多数情况下会如上图的姿态，一手握机，大拇指做为主要操作和点击手指，我们可以看到不管是iPhone系统应用还是很多其他的优秀应用，大多使用很多的列表，因为拇指在滑动列表时会非常顺畅和方便，而且操作速度非常快，所以很长的列表不会成为iPhone应用的障碍，这与其他手机平台上的特性不同，更何况在表格的情况下，单击顶部的状态栏可以快速回到顶部。2、减少输入

这与《移动设备交互设计》书中的一些观点一致，即对于手持设备我们要尽量的减少用户输入，特别对于iPhone这种虚拟键盘而言，即便电容屏再灵敏，对于每次都准确的触动面积很小的虚拟键盘也并不是一件轻松的事情，我们要尽量使用选择器，或是输入提示suggestion来减少成本。3、足够大的按钮面积

对于iPhone这块电容屏来讲，虽然很灵敏，但接受的感触面积并不小，且用户又是直接用手指操作，所以我们要对应用中的所有按钮要适合指尖来操作，跟据官方给出的设计指导，44*44pix是一个较理想的面积。4、多点触控手势

相对于设备的软硬件来说，手指总是保持可用，它是人体的一部分，可以灵活的做各种动作，而且直接触控屏幕非常直观，且用户也非常愿意使用这些看上去很酷手势动作，比如可以对图片用两个手指拉开来放大，合并来缩小，直接拖动来调换顺序，摇晃来进行刷新等。当然我们要考虑这些手势在不同应用的不同使用场景，不要滥用。总之，iPhone应用的是线性的，连贯的，直观的依赖滑动操作，手指点击，以及各种手势给人很酷的感觉。

三、iPhoneApp的基本设计方法1、iPhone应用的分类1)高效型

这类应用可以帮助用户快速完成一个任务，注重内容的组织逻辑功能和信息架构的展现，以方便用户快速高效的使用，最终完成任务。此类应用一般包含大量的列表及每个列表中的任务功能。最典型的就是系统自带的“Mail”应用，这是一个非常典型的高效型应用。

此类应用给用户的感觉是层层进入，内容逐步具体化，直到可以完成用户的任务。另外一个非系统应用且典型的就是QQ，可以看一下是不是也遵循这个特点。2)实用工具型应用

此类应用一般交互操作非常少，也没有很深的层次结构，往往都是直接了当的展示信息，一般会在“背面”(通常会有一个翻转的效果)展示设置功能。最常见的就是“天气”和“股票”两个系统自带的应用。3)浸入式应用

大多指游戏类应用，但也有一些实用工具，比如电子罗盘，所谓浸入式应用一般是全屏模式，专注一个任务或是娱乐的深入体验，没有过多的文字，而将用户的注意力放在如何使用它。2、设计iPhone应用1)iPhone应用的基本结构

状态栏：这是ios系统的一部分，除了浸入式应用外，其他应用一般都会保留这个bar。导航栏：这里包括当前的title，当前的主要操作的控件和返回的导航功能工具栏：对当前内容区可执行的功能动作。

标签栏：可以理解为全局导航，方便快速切换功能或是导航。工具栏和标签栏在一个视图中只能存在一个。

2)移植你的应用

大多数情况下我们都是把web端的应用移植到手机上，而在web端的应用，如果我们列出一个功能结构图，可能会包含100项以上的功能点，你可以做如下工作：

①考虑这个web端的产品，核心功能是什么，任何一个产品都会有核心功能，以及附加功能，比如QQ，核心功能就是IM，即时通信，可能截屏是一个附加功能，尽管用的人非常多。确定核心功能后，以及围绕核心功能尽可能少的扩展功能和逻辑。如果你的web网站或是你的业务包括很多，可以把他们按不同业务类型拆分成不同的多个应用。

②对确认的功能结构考虑在iPhone上的信息架构模型，上文说过，iPhone应用是线性的连贯操作，一层一层进入直到完成最后的任务，所以你要按这个思路去整理信息架构，一般来说，操作的深度不要超过3层，如果超过3层就要对产品形态进行扁平化处理，即由深度改为广度，因为随着深度的增加，每一级别都会有不同的功能，甚至有承载上一级的功能或逻辑，深度越多，这些功能就会越复杂，而在手机如此小的空间上就很难进行合理组织。可以延伸阅读kentzhu同学更多的限制，更简单的设计③合理利用iPhone应用的结构及标准控件。

标签栏，可以理解为web应用中的全局导航或是主要子功能的切换，这个bar可以贯穿于主要视图的底部，方便用户快速跳转，比如下图这个标签栏。

导航栏，可以理解为web应用中的局部导航，子导航或是面包屑，显示当前位置，同时还承载了1个或两个主要功能操作。可以方便用户返回，或是对当前视图进行1-2个最重要的操作。如下面这个导航栏。

工具栏，可以理解为web某个具体页面中的一些主要操作功能，比如上传，搜索等。如下面这个工具栏。

这是ios系统应用mail中，具体邮件打开后的工具栏，包括了对当前邮件的几个主要操作。对于你的应用，你也可以把一些操作放到主视图区中以按钮的形式展现，不放在底部的工具栏。但我们说，iPhone用户更习惯于iPhone一些“标准”操作，习惯iPhone的标准逻辑，所以把主要的操作以底部工具栏的方式展现似乎更好一些。使用引喻的标准控件

我们看到滑动效果的开关，突起效果的分段按钮，转盘选择器等，代替了传统web中死板无生气的标准控件。

④调用系统提供的功能接口

例如iPhone提供的地理位置接口，可以为你的应用提供不同于web端的特殊功能，设计出更具有特色的产品，更能满足移动用户的需求。

最后，我想说iPhone应用是简洁的，包括设计上的简洁和功能上的简洁，不应该有太多的功能分支，不管你是否能组织好这些功能，过多的功能总会把用户搞晕。iPhone应用是有特殊气质的，你可以把他设计的完全符合iPhone使用的特点，甚至带有一点炫酷，而不用考虑低端用户，因为使用iPhone并且可以装App的用户，他的使用经验不会太差。

手机产品交互体验评估方法

一、评估的目的

交互设计是一个迭代过程，通过交互设计评估，可以及早发现设计中缺陷，进而能进一步完善交互流程。通过评价，也可发现交互设计中可行、友善、合理或优秀的地方，从而为后续产品的交互设计提供借鉴。二、评估的标准

手机产品交互设计的评估标准还是是否满足用户体验，当然，体验是一个很虚的东西，没有一个具体的量化标准，那我们就落在实处，从可以量化的维度打分。具体从那几个维度入手，我认为可以分为如下几个，见图1：

图1交互体验评估维度1、产品架构是否清晰无论是九宫格式的架构还是标签页式的架构，都需要让用户一进入产品，就可以一目了然的知道产品是干什么的，有几个功能模块，模块之间怎么切换。

同时，产品层级较深的，设计师要清楚的了解有产品有多少个二级页面，多少个三级页面。这些二级页面和三级页面的架构，是复用一级页面的，还是有自己的架构。有如下几个评估标准：

产品结构清晰，没有不必要的层级能快速了解产品有几个主要页面所有主要部分都能够通过首页访问清晰的指示了当前的位置

2、产品流程是否清晰

要想表现层越简单，背后的逻辑层可能就越复杂。那么我们评估流程的时候，不是以背后的逻辑层复杂度来评估，而是以表现层的简洁度来评估的。比如说一个发布帖子的流程，总共需要几个步骤，涉及到几个层级（一级页面到二级页面到三级页面）。当然，不是说步骤越少、层级越浅就是好的设计。而是要简单、明确、清晰。没有不相关的干扰分支，没有经常会出现的误操作，没有提顿思考的空间，没有操作之后无反应的疑惑。有如下几个评估标准：

明确产品有几个主要的任务流程每个任务流程清晰，没有太多分支任务流程符合用户操作流程用户可以取消正在执行操作操作成功或失败都有明确的反馈

在每个层级，都可以找到回到上一级的方法预防出错，如出错要帮助用户从错误中恢复过来复杂的交互是否有很好的引导和帮助3、控件使用是否准确

手机产品涉及到很多的控件。一级标签栏、二级标签栏、列表、按钮、对话框、提示框、发布框等等，这些控件使用的是否到位，是衡量一个设计师细节设计能力的重要标准。比如说两个二级页面都需要二级标签栏，如果你设计出来两个样式的话，那么说明你没有用控件的思想来做设计，不仅设计师要设计两套二级控件，程序人员要重复劳动，用户也会疑惑这两个控件是不是同一个含义同一种操作方式。再比如说，这个二级标签栏，它的从属内容是否在样式上跟他有从属关系，这个细节，如果不把握好，用户很可能把这个二级标签栏看成了按钮。

有如下几个评估标准：

控件使用准确性（比如是否混淆了单选框和复选框，对话框层次过多等）控件的复用（比如两个页面都用到tabbar，不用设计两个）控件的状态（比如不可点状态、可点状态、按下状态、长按状态）链接色的准确使用焦点状态的准确使用

4、信息传达是否到位

信息传达包含产品文案引导、按钮文案设计、列表文字布局、内容页排版、提醒文案设计等等。文案的梳理，有些公司是专门有内容编辑来做的，但是大部分公司，都是产品经理或者交互设计师直接完成的。那么文案是否准确，是否能有效的传达意思，也是衡量交互设计的一个重要标准。文字长度限制、特殊情况处理是否考虑到位，也是衡量设计师工作的基准。而列表文字的布局、内容页的排版，则是信息布局的重中之重。有如下几个评估标准：

布局清晰文案简洁

没有术语（比如“拉取失败”这种文案）

合理排版（标题、作者、时间的字号、字色，页边距的运用）

标签和内容的从属关系（能否看出当前标签页，和当前标签页的从属内容）

三、评估的方法

交互体验评估还没有一套成型的方法，传统的评估都是靠直觉经验，那么能否通过探索共性，转化成一种科学的有效的评估方法呢？

传统的方法有：实验方法（随机和重复测试），监测方法，调查方法等。科学的评估方法：

1．设计原则评价（guidelinesEvaluation）

为自己的部门或者项目写一个设计原则，从架构、流程、控件、内容等多个维度来构造一定的设计要求，一套成型的设计原则诞生之后，可以让设计师在设计过程中进行自我评价，也可以让设计师完成设计之后交付其他设计师进行协同评审。2．启发式评估（euristicEvaluation）

启发式评估是指少数几个评估者检查界面，并判断界面是否符合公认的可用性原则。具体的方法见JakobNielsen写的HowtoConductaHeuristicEvaluation一文，中文翻译见初心不忘翻译的如何进行启发式评估。3．可用性测试（usabilityTesting）

测典型用户执行典型任务时的情况，测试指标包括用户出错次数，完成任务的时间等。典型的可用性测试是在实验室环境中进行的，被测试人员受到评价人员的密切控制。可用性测试主要是量化用户的执行情况，测试的结果通常被表示为统计值。具体的方法见小胖翻译的了解可用性测试。英文原文链接已经挂掉。四、评估的结果可以产出一份详细的评估报告，分别阐述四个维度上，交互设计中存在的亮点和问题，亮点加分，问题扣分，最后绘制成蜂窝图，如图2。四个维度的分加起来除4乘10是最后的总得分。

图2交互体验评估结果蜂窝图

最后总结一下，体验是一种很虚的东西，难以靠数值量化出来，就如同情感无法量化一样。所以本文旨在提供一种客观一点的思考方法。基于用户体验的手机产品交互设计原则

一、用户体验信息收集

在讨论手机的交互设计方法之前，需要先对手机的用户使用习惯有一些基本的了解，需要对手机的用户体验信息做一些收集整理。收集用户体验信息首先需要确定两个问题：一是确定目标用户群体；二是确定信息收集的方法和途径。

在确定目标用户群体的时候，很显然的是，已有产品有过使用和交互经验，具备该产品或系统的交互体验的用户，相比较于那些没有体验的用户，可以为设计提供更多更有效的信息。因此在收集用户体验信息时，应该首先考虑所需设计的产品的用户或是有过类似产品使用经验的用户。在理想的情况下，当用户体验产品的交互时，设计师可以通过某种技术或是研究方法获得用户的全部感官印象，掌握他们的情感体验。然而这些主观的体验信息很难用实验室的方法收集或是客观的科学描述表达出来。因此我们只能寻求贴近实际的近距离接触用户体验的方法，就是深入访谈和现场观察。我们需要调研的信息有：1.硬件部分：

手机的持机模式（右手操作、左手操作、双手操作）；手机的操作模式（手指触控、笔触、按键、滚轮、长按）；两种操作模式下的输入方式（全键盘、九键、触屏键盘、手写）；信息反馈形式（屏幕信息输出、声音、振动、灯光）对用户的影响；

2.软件部分：

用户对屏幕信息结构的认识（空间位置、信息排列顺序、信息的分类）用户对信息导航的使用（菜单、文件夹管理、搜寻特定文件）用户对信息传达的理解（图形信息、文字信息）用户对交互反馈的获知（每个操作是否有明确的反馈）

3.积极的用户体验：

特殊交互模式带来的新奇感受有趣

简洁的操作步骤和有效的信息提醒方式信任感软件运行速度，信息处理过程操纵感和成就感允许误操作，有效引导安全感交互过程中的完美感官体验（视觉、听觉）

类似于电脑操作过程的交互（有电脑使用经验的用户）熟悉感和成就感品牌元素在交互上的延续性熟悉感和优越感

4.消极的用户体验：

系统出错、没有提示信息压力、紧张和茫然缺少误操作的补救机制挫败感、压力交互步骤的繁复难记挫败感

提示信息的不明确（不符合用户模型）茫然过程处理时间过长焦虑

二、用户分类

1.依据用户的需求可将智能手机的用户分为两类：1.1过程为主的用户(processorientedenduser)

过程为主的用户的典型例子是电玩族，他们追求的终级目标就是视觉听觉的冲击和享受，最终游戏的结果反而变得不是那么重要了。此类设计对视觉和创意的要求是极为挑剔的，绝大多数设计师都有深厚的美术功底。

1.2结果为主的用户(resultorientedenduser)

然而，与结果为主的用户设计相比，过程为主的用户的市场和受众都要小的多。结果为主的用户不在乎用什么样的方式完成任务，但是任务必须以最短的时间，以最简洁的方式，最精确的运算结果来完成。对于此类用户的交互设计人员来讲，更重要的是设计更合理的任务逻辑流程(logicaltaskflow),以期最大幅度的符合人脑的思考方式和认知过程(cognitiveprocess)。

2.依据用户的使用经验可将用户可以分类为：2.1新手用户

指刚刚开始接触和使用智能手机的用户，对智能手机的操作系统没有过使用经验，对计算机及应用程序的一般用法也没有太多的了解，但有一定的手机使用经验。2.2中级用户

使用智能手机有一定的时间，换过至少一个智能手机。对智能手机的部分操作相对熟悉，但经常使用的软件数量较少，并不完全熟悉智能手机系统的所有功能，对界面交互所必需的语法信息了解较少。2.3专家用户

有过相当长时间的智能手机使用历史，更换过几次智能手机，对手机的交互和电脑的操作都非常了解，经常主动寻找更简洁和快速的交互方式。

一般来说，中级用户和专家用户在长期使用某部分交互时遇到的问题更具有代表性，而新手用户提出的问题则更有利于设计人员认清用户与智能手机交互时的认知过程。三、交互设计原则

对应用户体验信息的收集和用户分类，我们可以总结出来智能手机上交互设计的方法和要点。1.硬件交互设计

根据人机工程学原理设计按键大小等硬件交互要素；

尽可能提供多种输入方式，包括键盘输入和手写输入，键盘包括数字键盘和全键盘。合理设计键盘使其符合用户的使用习惯；

考虑环境对用户操作的影响。例如嘈杂的环境下提供震动的提示方式，黑暗又需要保持安静的环境下选择指示灯闪烁发光的方式提示用户。

同样需要考虑环境因素对用户的影响，利用机械结构多样化设计实现单手操作模式和双手操作模式的切换，需要设计切换的便捷方式、屏幕方向的变化和键盘的转换等等硬件交互要素的变化。

设计新奇的交互模式，将大大提升用户体验，例如sony的滚轮导航模式，和苹果的触点导航键（旋转和点击），都获得了巨大的商业成功。

2.信息交互设计

信息项目的排布密度合理，字体排列、图标排列的方式具有可调性，设计合适的方式来突出重点信息；

使用用户的语言来传达信息，而非技术的语言。有效地使用“隐喻”。例如windows里面的“记事本”就是一个很好的隐喻例子，因为它和人们熟悉的日常概念联系在一起，所以用户可以很容易的理解这是一个什么工具。好的隐喻可以起到快捷的说明作用；

字体大小、颜色、图标设计等，都决定可读性的好与坏；

需要保持一致性的不光有每个功能软件或是服务的图标外观，更包括开机动画、细节元素和无形框架的一致，都需要贴合用户行为习惯进行设计；

尽量避免同一个元素包含太多的信息，例如，颜色的使用不要包含太多信息暗示，因为用户不一定会注意到或是理解某种颜色所包含的暗示。

3.软件交互设计

导航功能。随时转移功能，很容易从一个功能跳到另外一个功能；允许工作中断。例如当用户编辑短信的时候，收到短信或电话，完成后回来仍能够找到刚才正写的短信息；

方便退出。例如，提供两种退出方式，按一个键完全退出，或是一层一层的退出。

让用户知道自己当前的位置，使其做出下一步行动的决定；

提供快速反馈，减少不必要的潜在等待时间。在任务交予系统处理或计算的时候，会有一段潜在的用户等待时间，一般我们会通过合适的等待提示让用户知道现在正处于系统潜在工作状态，而不至于让用户频繁地重复操作，使系统更慢；或者合理通过多任务切换处理避免这样的等待间隔。通过这些方法可以让用户回避这种的无效时间，从而提高交互效率。

良好的防错机制。误操作后，系统提供有针对性的清晰提示。即使发生错误操作，也能帮助用户保存好之前的操作记录，避免用户重新再来；

提供了解用户操作行为的途径，可以更好的帮助改善系统的操作；通过缩短操作距离和增加目标尺寸来加速目标交互操作。

4.体验交互设计

让用户控制交互过程。“下一步”、“完成”，面对不同层次提供多种选择，给不同层次的用户提供多种可能性；

预设置的默认状态应该具有一定共通性和智能性，并对用户操作起到协助或提示的作用；此外，还应留给用户修改和设置默认状态的权限；

图标、多媒体设计、细节设计和附加功能设计为体验增值，有效提升体验度；视觉设计，例如开关机动画、界面显示效果等；

多方面考虑用户信息的私密性，提供有效的保护机制，例如指纹识别密码模式。

四、总结

体验是一个比较虚的概念，很难量化很难评估，所以也导致很多小的无线产品开发团队干脆放弃了对产品用户体验的把握，甚至不需要设置一个专门的呃交互设计师职位来改善产品的交互体验，这对于成长型的公司是可以容忍的，但是对于要想做出精品，长期处于市场不败之地的公司就显得不够严谨了。手机互联网是未来的发展趋势，手机产品也对交互设计提出了更多的要求，简单探析了一下从用户体验出发来进行手机产品交互设计的方法原则，之后还是需要一个比较成型的交互体验评估体系的。手机产品框架层设计:两种主要的布局方式手机产品设计与传统的桌面和web产品设计相比，最显著的约束是设计空间的急剧缩小。打个比方，这就像从一个100平米的房子搬到5平米的单间，东西没少一样，可以施展的空间却小了几十倍。更重要的是，在这样一个小空间里，你不能把东西胡乱摆放，要依旧保持它们的清晰、合理、简洁、美观。借用《用户体验的要素》中的名词，这涉及到“框架层”的设计问题，在手机产品的设计中，框架层的设计即布局问题尤其关键。

然而，众多手机产品看似纷杂的框架选择，归纳起来，最主要的方式有两种：按钮式布局，标签式布局。基于这两种布局类型及其多种变形，并综合两种类型的巧妙组合，可以解决绝大多数功能模块的组织问题。

手机产品框架层设计的两种基本布局方式

按钮式布局

当多个功能之间相对独立，用户根据需求选择其中一个功能时，按钮式布局是一个不错的选择，结构清晰、简单明了。支付宝、12580客户端、PingCo等手机产品的初始界面都采用了典型的按钮式布局方式。

典型的按钮式布局方式

以支付宝为例，当在多个按钮中选择某个功能按钮后，如“手机充值”，则直接进入手机话费充值页面，然后进行相应的手机充值操作。这种设计结构清晰，手机支付宝有8个主要功能，分成8个按钮，布局有条不紊。

支付宝的手机充值功能

变体。按钮式布局的表现形式多种多样，有很多变体。比如，在熊猫看书中，几个功能按钮排成一行，放在底部，上面是熊猫看书的一些通告；在爱帮公交中，几个链接本质上是就是按钮，可以分别选择乘车、线路或站点查询；在139i联系中，按钮成为长条形，每行一个，排成一列（样式上类似于iphone上的系统控件），每个按钮被激活后，下部都会有对应功能的解释。这些以不同方式展现出来的按钮式布局，或者更加美观，或者更加简洁，把多个功能进行了有效的组织。

按钮式布局的更多实现形式（按钮部分用黄色框标出）

缺点。按钮式布局的一个缺点是，功能模块之间的切换需要较多步骤，功能之间相对离散。例如，从支付宝的手机充值页面切换到交易查询页面，需要首先选择右下角的“返回”按钮，回到主界面，然后点击“交易查询”按钮，才能进入相应界面。在支付宝中，这个问题似乎还不明显，还不是一个问题。如果每个功能界面都比较复杂，层次较深（比如12580客户端），则不同功能之间的切换将变得非常繁琐，每次都要返回到按钮组合界面，才能访问其他功能。标签式布局

标签式布局能够解决按钮式布局中“功能离散”的缺点。当功能之间联系密切，用户需要频繁在各功能之间进行频繁时，标签式布局是首选的设计选择。UCWeb浏览器（以及腾讯QQ浏览器）、手机MSN、爱帮爱逛的公交频道等手机产品都采用了典型的标签式布局来组织一些功能界面。

典型的标签式布局(标签部分用黄色框标出)

以爱帮爱逛的公交频道为例，和公交相关的换乘、路线、站点三个功能组织成标签，用户进入该频道后能够一目了然，根据自己的需求轻松切换（默认是用户经常使用的换乘功能）。

爱逛公交频道的三个公交功能用标签组织

为什么没有把爱帮公交中的三个功能集中在一个页面，按照从上到下的方式排列呢？主要考虑两个因素。

第一，功能完全展示。如果三个功能集中在一个页面，由于每个功能的内容都可能比较长（在小屏幕手机中尤其如此），如“查询历史”就会占据一大部分空间。此时，换乘之外的路线、站点两个功能有可能无法在第一个屏幕展示出来，于是，用户有可能不知道屏幕下面还有这两个功能。

第二，快速切换标签。如果三个功能集中在一个页面，若用户想查公交站点，则必须“路过”排在前面的换乘、路线两个功能模块，至少需要按6-9个向下键才能到达公交站点的输入框。采用标签式布局，最少只需移动两次右键即可。

变体。标签式布局也可以有更多的表现形式，下面便是两个例子。在手机大头中，几个主要频道全部通过标签进行组织（虽然看上去很像大大的按钮），频道之间通过左右键就可以实现切换，当前选中标签一直处在中间位置，非常明显。在千尺下载中，几个主要功能的标签被放置在屏幕底部，和手机大头一样，也是通过左右键实现标签切换，当前标签通过黄颜色识别，使用起来也非常直观。

标签式布局的更多表现形式（标签部分用黄色框标出）

缺点。当然，标签式布局也有它的潜在问题，最主要的就是标签切换。当标签页面比较复杂时，比如包括很多链接，文字内容很长，当前光标可能会停留在正文中。此时，如果把光标移动到标签上再进行切换，会非常繁琐，需要很多按键操作。对于这个问题，腾讯QQ浏览器、手机MSN、UCWeb浏览器、贝多等手机软件根据自身特点，有不同的解决方案。对于标签切换的各种实现及其优劣，会专门撰文进行分析。两种布局方式的混合应用

需要特别指出的是，按钮式布局和标签式布局是在不同场景下组织多个功能模块的不同方式，没有优劣之分，只看恰当与否。在合适的场景使用恰当的方式，就能让复杂的功能在狭小的手机界面上得到很好的展示。事实上，多数功能复杂的产品，都要采用这两种方式架构自己的产品。下面是两个混合使用两种布局方式的典型例子。

手机QQ和掌上宝混合使用了两种布局方式

在手机QQ中，初始的主菜单采用按钮式布局，默认情况下“QQ”是选中按钮，因为“QQ”是最常用的功能。除此之外，移动方向键，还可以选择“腾讯网”、“游戏”、“资讯”等功能按钮。无论选择哪个按钮，点击后，都会进入标签式组织的操作页面中，通过切换标签，仍然可以实现各功能的快速切换（浏览网页，查看邮件，聊QQ，群聊，等等）。

掌上宝的所有界面完全是两种布局的组合：一方面，通过左右键切换标签，实现各主要功能的循环切换，另一方面，在每个标签内部，各个子功能组织成竖排的按钮，通过上下键进行选择。左右键和上下键都得到了很好的利用，用户在使用过程中不会意识到是在切换标签还是在移动按钮，一切都通过设计自然达成。掌上宝共有36个子功能，通过这种组织方式，非常清晰的在手机上展现出来，操作极其方便。

友情提示：本文中关于《手机交互设计禁忌》给出的范例仅供您参考拓展思维使用，手机交互设计禁忌：该篇文章建议您自主创作。

来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。

《手机交互设计禁忌》由互联网用户整理提供,转载分享请保留原作者信息,谢谢!
链接地址：http://www.bsmz.net/gongwen/650750.html

• 上一篇：交互设计入门
• 下一篇：如果你想成为一名交互设计师