移动互联网产品的“外衣”

朱长永　张欣　班乃明

摘要：伴随着移动互联网信息时代的发展，移动互联网如潮水般一样席卷着整个世界，充斥着我们生活的各个方面，极大的方便了我们的生活。同时移动话联网也在让众多传统的行业发生颠覆性的变革，无论是世界百强的企业，还是名不见经传的小企业，无论是团队还是个人，都受其极大的影响。移动互联网已经在改变了我们的生活习惯、工作方式、社交方式等。微信、陌陌、腾讯、APP、百度、网易、阿里巴巴、淘宝等众多互联网以及移动客户端平台的出现改变了我们的生活。同时作为互联网产品的“外衣”图形化的界面设计显得尤其重要。

关键词：移动互联；信息化；界面设计

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2015）12-0214-02

据统计到2014年年底，全球接入互联网的用户将达到总人口的40%，全球移动互联网用户接近30亿。移动互联网普及率在发达国家为78%，在发展中国家仅仅为32%，尚未使用移动互联网的人90%以上生活在发展中国家，发展中国家将成为移动互联网化的主力地区。移动互联网用户总数快速膨胀，接入设备迅速增加，移动互联网渗透进度加速，网络视频成为年轻人的首选，网购增速远超线下零售[1]。各种社交软件、购物平台、信息发布平台的出现满足了不同用户的需求，而用户只需要移动客户端或者电脑客户端口即可搜集到所需要的信息，同时信息化的时代，海量的信息资源充满我们的终端设备，如何去吸引用户去选择所需要的信息，让平台引起用户的注意，从而扩大影响力。这就需要一套完整的视觉化的设计即互联网产品的“外衣”—界面化的图形设计（UI）。UI设计的好坏也成为互联网平台营销的关键所在。对于海量信息的存在，用户没有过多的时间去慢慢的筛选所需要的信息，或者同一个信息，有不同的发布渠道，而用户在对于信息不明的情况下，他只能通过自己的感官去选择有用的信息，而图形化的界面设计对用户来讲就显得极其重要，好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

1 用户界面设计——UI（User Interface）

用户界面设计（UI设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。软件设计可分为两个部分：编码设计与UI设计。UI的本意是用户界面，是英文User和 Interface的缩写。从字面上看是用户与界面2个部分组成，但实际上还包括用户与界面之间的交互关系。 在互联网迅速发展的时代，图形化的界面设计工作显得尤为重要。与之前的美工相比，做界面设计的“美工”被称之为“UI设计师”或“UI工程师”。该职业也是从美工中延伸出来的，具备基本的美术素养，同时还拥有互联网思维模式。其实软件的界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。界面设计的好坏直接影响到用户的感官使用，一个电子产品拥有美好的界面会给用户带来舒适的视觉享受，拉近人与商品的距离，它是建立在科学性之上的艺术设计。所以在快速发展的移动互联网时代，UI产品设计的好坏直接影响到消费者的心理感受。即使产品的功能做的再完善，如果因为界面设计糟糕，那整个产品就是失败的产品。界面设计（UI设计）研究的内容大致分为三大部分：界面视觉设计（视觉设计师Graphic UI designer）、人与界面之间的交互（交互设计师interaction designer）研究人（用户测试/研究工程师User experience engineer）。界面设计师主要是为了了解软件产品、致力于提高软件用户体验的产品外形设计师。区别与传统意义上的美工，有部分也是从美工方面延伸而来，他们具有一定的设计专业素养，懂的如何把握用户的视觉，如何让界面更加美观，视觉更加有冲击力，让用户产品购买或者观看的欲望。在移动话联网产品的设计中，界面设计师整个产品设计的灵魂，而功能设计是产品设计的载体。用户无法看到现实中实际的物品，只能够通过终端设备看到虚拟的产品，而图形化界面设计的虚拟产品，可以完成实际物品中的不足，从而吸引到用户。

2 UI设计原则

图形化的界面设计跟其他设计有其相同点，也有其不同点。在满足美观、使用性、视觉享受的前提下又有其自己独特的原则：1）产品界面的简洁性：简洁不是简单，界面设计要简洁，大方，便于用户的了解、使用，同时应该尽可能采用图形语言，易识、易记。2）采用贴近用户的大众语言：从用户的角度出发考虑组织语言，而不是从开发者、设计者的角度去组织语言，毕竟产品的设计是给用户使用的。[2] 3）减少记忆复杂化： 人脑不是电脑，在文字以及图形之间，图形的记忆速度远远超过文字的记忆速度。4）风格、结构的一致性：界面的结构必须清晰一致，风格必须与产品内容相一致，这样用户就能够从风格上迅速的了解其产品的类型，在用户脑海中产生一个短暂的记忆存储，然后如果对产品感兴趣，继而可以进一步的加深了解。5）必须保持用户界面的清晰度：用户界面必须清晰，对于移动设备来说，因为其设备大小不一致，所以在设计的时候应该要考虑其尺寸以及画面的清晰度，同时也应该照顾到不同的用户人群。6）用户的熟悉程度：用户可通过已掌握的知识来使用界面，但不应超出一般常识。7）排列：一个有序的界面能让用户轻松的使用。8）安全性：用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。9）人性化：高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。10）智能化 通过更为简单的操作，完成更加复杂繁琐的工作。

3 关于UI设计中的尺寸

市场上存在的手机系统主要是以安卓、IOS两套系统为主，在进行ui设计过程中，因为系统以及分辨率的不同会导致界面设计的不同。我们以安卓及iOS系统来分别讲解：

安卓常用的界面尺寸：Android常用界面尺寸：480*800、720*1280、1080*1920（单位都是像素：px）由于Android的尺寸多种多样，只需做几套比较主流的界面尺寸设计即可。

Android的APP界面尺寸与iPhone的界面基本相同：状态栏、导航栏/标题栏、菜单栏/工具栏以及中间的内容区域组成[3]。以720*1280尺寸为例，元素的尺寸：

状态栏（status）：高度为50px

导航栏（nav）：高度为96px

标签栏（tab）：高度为96px

标签栏（tab）：高度为1038px（1280-50-96-96=1038）

常用字体大小：Android常用的字号是：26px

IOS长用的界面尺寸

iPhone界面尺寸：320*480、640*960、640*1136（单位都是像素：px）

当然在设计当中我们并不需要每一种尺寸都做一套图，建议取用640*960的尺寸设计。

iPhone的APP界面一般由：状态栏、导航栏/标题栏、菜单栏/工具栏以及中间的内容区域组成。以640*960尺寸为例，元素的尺寸：

状态栏（status）：高度为40px

导航栏（nav）：高度为88px

标签栏（tab）：高度为98px

内容区域：高度为734px（960-40-88-98=734）

至于iPhone5/5s的内容区域高度增加至910px。

在IOS7的风格中，苹果已经在开始弱化状态栏的存在，将状态栏和导航栏合在了一起， 但是尺寸高度保持不变。

常用字体大小 ：苹果默认中文字体为：黑体-简体

以IOS7为例：导航栏标题：34px 普通按钮：34px 表格头部：34px 表格标签：28px 页签栏文字：20px

一般将软件UI设计稿分辨率设为640x960px，这个尺寸是ios5的分辨率，同时也可以兼容大部分安卓手机。并且尽量使用形状和图层样式，这样可以避免拉伸引起的变形和像素损失，达到一劳永逸的效果。（如图1）

4 UI设计的基本流程

在进行用户界面的设计工作时我们应该需要遵循以下简单的流程

1）了解用户的需求：在进行UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

2）采集目标用户的习惯交互方式：不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。因此需要了解用户的交互习惯，如果是大众群体的话，要考虑大众群体通用的交互方式，如果是有针对性的目标客户，可以针对这一部分人群进行分析。

3）提示和引导用户软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。

4）界面化的设计 针对目标客户的需求以及用户的习惯，进行界面设计，在设计的过程中要与客户之间经常的交流，以此来了解用户的需求。

5）交互功能的实现 在界面话的设计完成之后，需要与程序员之间建立沟通，并通过程序来实现其中的功能

6）软件测试分析 软件在制作完成之后，要将软件上传到不同的平台进行测试，以此来检测软件中存在的若干问题，力求将软件的漏洞减少到最小化。

参考文献：

[1] 中国产业网宏观数据[DB/CD].（2014-05-18）

[2] 百度UI设计[DB/CD]. （2015-02-18）.

[3] Android APPUI设计、切图的常用尺寸大全[DB/CD].（2015-01-13）.