ABSTRACT

In recent years, with the rapid popularization of smart phones and the rapid development of mobile Internet, many things in the WEB side to complete can use on the mobile App to complete. As the number and variety are more and more multifarious, App to the user experience as the starting point of the App designers began to attach importance to its interactive design on the mobile end. This article through the iOS Linkedin 7.0.3 function design, interaction design, page layout, and other products characteristic analysis, summed up the App on the mobile end interaction design implementation method.

Keywords:Application Program, Interaction Design, Smart Phone

APP在手机移动端的交互设计研究

唐爱红

上海师范大学，上海

收稿日期：2017年11月16日；录用日期：2017年12月1日；发布日期：2017年12月8日

摘 要

近几年，随着智能手机的快速普及以及移动互联网的快速发展，很多在WEB端才能完成的事情都已经可以用手机移动端的App来完成。随着App数量和种类越来越繁杂，以用户体验为出发点的App设计者开始重视其在手机移动端的交互设计。本文通过对iOS Linkedin 7.0.3的功能设计、交互方式、页面布局等产品设计特点的分析，总结App在手机移动端的交互设计实施方法。

关键词 :应用程序，交互设计，智能手机

Copyright © 2017 by author and Hans Publishers Inc.

This work is licensed under the Creative Commons Attribution International License (CC BY).

http://creativecommons.org/licenses/by/4.0/

1. 研究背景及意义

App是Application program应用程序的缩写，也就是基于智能手机的第三方应用。目前比较主流的App有苹果公司iOS系统下的App，谷歌公司Android系统下的App，微软公司Windows Phone系统下的App，诺基亚公司Symbian系统下的App [1] 。

交互设计(Interaction Design)作为一门关注交互体验的新学科产生于20世纪80年代，它由IDEO的一位创始人比尔莫格里奇在1984年一次设计会议上提出，一开始命名为“软面(Soft Face)”后来更名为“Interaction Design”交互设计 [2] 。经过上世纪90年代的个人电脑和计算机的快速发展，交互设计被许多国际化企业和大公司重视 [3] 。交互设计顾名思义是人与产品之间互动过程的设计，以用户体验为设计准则，最终创造出目标用户满意度高的产品。作为一个从人机工程学独立出来的学科，交互设计更加强调认知心理学、行为学和设计学等学科的理论指导 [4] 。实际上伴随着科技飞速发展，特别是互联网的爆炸式发展，交互设计已经成为实际运用多样复杂的行业。

发展到目前，国外对交互设计的研究已经不仅局限在计算机软件产品方面，更多向实体硬件产品方向发展。交互设计研究在国内起步相对较晚，近几年，随着互联网的迅速发展，网民对互联网产品的认知已经不仅仅停留在“只要可以实现某个功能”，而是开始追求产品的外观及产品使用体验。

手机移动端作为一种信息化时代的产物，它区别于WEB端的交互方式，有着自己独有的交互特点。手机移动端有着移动化、即时性、工具性等优点，用户可以不限地点和时间使用的特点使得其交互成本降低。

2. 交互设计原则

2.1. 产品功能结构框架分析

iOS Linkedin 7.0.3基本覆盖了WEB端功能，以个人档案和用户生成内容(User Generated Content，简称UGC)为主要核心功能。如图1，按照产品导航设计来看，右边三项功能(首页、个人档案、搜索)是主要核心功能，一直出现在导航顶部重要位置；左边十项是用户可以自定义是否出现在侧边栏导航的功能。

2.2. 产品功能细节设计

如图2，搜索可以在四种类型下进行，这本身是一种较为复杂的搜索功能。该产品采用了现在较为流行的选择标签的设计方法，而且在选择标签后，进行本地搜索结果展示，比如用户想要找到某个联系人，这样用户有可能在选择标签后不用输入联系人关键字就能直接找到那个联系人。这显然提升了用户体验。

事实上，分享是每个社交App都有的功能，用户在操作分享的时候会有很多种设计方法，该产品的方法是将“分享”按钮同“取消”放在了顶部左右两侧。这种方式的好处在于不管用户输入多长的分享

图1. 产品功能框架

图2. 搜索及分享功能

文字，都能随时点击“分享”，而不用担心键盘会挡住分享按钮。

目前App较为流行的导航设计有：桌面式导航、抽屉式导航、列表式导航、TabBar导航、顶部Tab切换等。iOS Linkedin 7.0.3使用的是抽屉式导航，这种导航的核心思想是隐藏，隐藏导航空间，尽可能把最大的空间留给页面内容展示。所以抽屉式导航是符合iOS Linkedin 7.0.3产品的功能特点，因为UGC信息量庞大，又有文本、图片、新闻、交换名片等不同类型的信息，而且使用产品时间越长，UGC的内容就越丰富，基于这个特点，产品应该给用户最大的视觉空间来承载这些信息。

3. 交互设计

3.1. 加载效率测试

(1) 加载速度

加载速度对于产品设计是很重要的细节处理，页面的加载过程看上去是用户等待的过程，实际上也是产品与用户交互的过程。本次加载速度测试分为第一屏(用户打开App)加载速度测试和App内部页面加载速度测试，分为在WiFi和GPRS环境下的不同测试，另外也要区别首次启动和二次启动两种情况下不同加载时间。测试结果见表1及表2。

(2) 加载页面

图3为老用户首次启动的页面，都市职业氛围的背景图，linkedin icon和slogan居中醒目展示。

表1. 第一屏加载速度

表2. 内部页面加载速度

图3. 老用户首次启动

动态启动屏，展示结束后有向左滑屏的转场动画效果，自然而然的进入“注册登陆”页面。单单看到这里其实没有特别之处，但是，再用手指向左滑动，就会发现会进入“登陆输入页”，这是一种典型的引导型的交互设计风格，一开始启动屏向“注册登陆页”的自动转场效果就是给用户一个学习的示例，用户在这个示例的引导下会采用和前面一样的交互形式，也就是再向左滑屏，进入“登陆输入页”，这也是产品想要引导用户的最终目的。

不过整个产品的功能都必须是注册用户才能使用，对于App来说，用户注册本身就是一项高使用成本，所以这里的设计是该产品的一个缺陷，不过对于用户量已经很大的linkedin来说，可能主要是为了维护注册用户的正常高效使用，所以这样的设计也是可以理解的。

当用户二次启动该产品，如图4所示，跳过启动屏，直接展示首页。加载新内容的同时展示上一次浏览缓存。这比直接一块空白没有内容只让用户等待加载要好得多。

3.2. 用户一致性体验

如今App种类繁杂，数量庞大。用户使用App的方式都是基于经验。信息显示的一致性就会传达一种引导信号，也就是说，信息显示的一致性越高，用户就越容易理解信息之间的相关性。图5和图6是对按钮设计、内容分享等方面来分析iOS Linkedin 7.0.3产品是否带给用户一致性体验。

在侧边栏导航和个人档案页，相同标签的图标都保持一致，因为其功能本省是一样的，相同的图标设计会增加功能标签的识别度。

“首页”和“可能认识的人”页面都有“添加联系人”按钮，这两个页面的按钮大小颜色都保持一致。因为图标按钮本身是不容易被用户理解其含义的，而且触摸的交互特点使得不可能像web端在鼠标聚焦时给出提示文字，所以这时候按钮一致的设计给用户的含义引导就显得格外重要。

图7中，点击添加评论后，整条文字向左滑出屏幕，点击其他位置取消评论时，整条评论文字向右滑入屏幕。这种开始和结束保持一个合理完整性的交互设计是一种满足用户心理感觉一致的设计。

图4. 用户二次启动

图5. 图标设计

图6. 按钮设计

根据以上分析，可以看出iOS Linkedin 7.0.3根据手机移动端的交互特性进行产品设计，而不是一味的将web端产品复制到手机上。另外，产品设计者也根据该产品自身特点选择了合适的导航设计，并对导航进行创新以达到符合社交产品特性的目的。并且在整个交互设计中，基本覆盖了所有的用户场景(正常或有异常)，对每一种用户场景进行合理的交互设计。

4. 产品功能设计总结

从功能设计框架可以看出，iOS Linkedin 7.0.3的功能设计基本符合了手机移动端的交互特点，一款以社交为基础的App功能必然相对于工具类型的App要复杂，但是iOS Linkedin 7.0.3将复杂的功能化繁为简，基于它web端自有的功能摒弃了一些在手机上操作费力的功能，这种做减法的设计正是现今许多App设计者难以做到的。从细节设计可以看出，iOS Linkedin 7.0.3的功能设计者是在意细节处理的，将

图7. 添加评论

大众常用的功能从细节优化功能设计，就是直接提升用户体验的方法。因此，在移动互联网未来的发展下，应该越来越重视一款产品的交互设计，更好的给予用户产品的体验，才能留住用户，提高用户活跃度，快速占领市场份额。

文章引用

唐爱红. APP在手机移动端的交互设计研究
APP Interaction Design Research on the Mobile End[J]. 软件工程与应用, 2017, 06(06): 181-187. http://dx.doi.org/10.12677/SEA.2017.66020

参考文献 (References)