浅谈Ipad应用的视觉设计原则

摘 要：移动设备的层出不穷，让界面设计也得之快速发展。而不同的移动设备有着不同的设备特性，视觉语言也有许多不同之处。文章选取iPad平板电脑这个区别于电脑与手机的移动设备，基于它的特性探讨iPad应用的界面设计的视觉语言，探究如何提升界面视觉设计的可用性与易用性，以帮助用户更加方便使用应用，获得更好的用户体验。

关键词：iPad 应用界面 视觉设计

检 索：.cn

中图分类号：J0 文献标志码： A 文章编号：1008-2832（2015）03-0054-03

Research on the Visual Design Principles of Ipad’s Applications

XU Man-lu， WANG Feng， WU Dong（School of Digital Media，Jiangnan University， Wuxi 214122，China ）

Abstract ：The rise of mobile devices let the interface design is also the rapid development. And different mobile devices with device characteristics and different visual language. This paper selects the iPad which distinguishes between the computer and mobile phone device， bases on its characteristics to discuss iPad’s application interface design and visual language， to explore how to improve the usability and easily of visual interface design， to help users more convenient to use application and get a better user experience.

Key words ：ipad； interface design； visual design

Internet ：.cn

由于移动互联网、4G网络的日益成熟及移动设备的兴起，移动设备的界面设计也随之高速发展，并产生了一套独立的设计语言。在日常生活中，我们较为频繁使用的移动设备是平板电脑和智能手机。相比于智能手机而言，平板电脑并非只是屏幕尺寸大小不同，而是有着许多设计原则及使用情况的差异。从操作系统的角度来看，不同系统的平板之间的界面设计也十分不同。其中，iOS系统下的iPad与其他操作系统的平板电脑相比，屏幕规格、使用方式和界面设计都更加完整和统一，然而，在进行iPad应用的视觉设计时，依然有许多需要设计师注意的原则及方法。

一、iPad的平台特性及其与视觉设计的关系

（一）iPad的使用场景

由于PC端较之移动设备，反应速度更快，屏幕更大，更高效地处理数据，通常人们使用PC端会长时间进行一项工作。智能手机作为移动设备，相比于PC端，有着很好的便携性。但是由于智能手机的使用场景基本在户外，使用时间碎片化，所能获取的信息也比较零散，因此有着不利于集中处理信息和长时间进行工作的劣势。而iPad相比于PC不仅具有很好的便携性，同时其使用场景也比手机更加固定，相对而言更有利于进行信息处理和长时间工作。通常人们会随身携带iPad，并且在一个比较充足的时间段才使用它。据调查显示，人们使用iPad最常见的场景是在家中或者长途旅行，通常用来观看视频、玩游戏、收发邮件或者浏览新闻。在iPad视觉设计中，我们需要充分考虑iPad的使用场景，思考用户使用iPad应用时的环境和方式，注重视觉元素的突出和强化，给用户带来沉浸式的体验。

（二）多人使用的设备

腾讯在2014年的《平板电脑用户行为报告》中指出，家人共同使用iPad设备的比率高达56%，这说明iPad相较于私人化的智能手机，设备的个人私秘性较低，可能会有不同群体的用户使用。那么从视觉设计的角度考虑，就要注意视觉的识别度与易用性。例如应用图标的设计最好具有高识别性，因为这样才可以在众多应用中第一时间被找到用户所需要的图标。

（三）多种交互方式――手势、触控

由于iPad引入了多点触摸功能，使它可以拥有比其他移动设备更多的交互手势。这些手势可以作为导航图标的辅助方式，甚至取代部分图标来进行导航，为屏幕空出更多的空间来提升用户的视觉体验。但是手势若是过于复杂会造成学习成本的提高。若是用户使用了手势但是系统没有带来预期的反馈，会造成用户的挫败感。另外若是能单指完成便不要使用多指。因为多指操作意味着用户得腾出一整只手来进行操作，基本上用户习惯用双手握持着设备，若是长时间单手握持，会让用户感到吃力。因此尽量将操作区域放在屏幕距离手较近的地方。

二、iPad应用视觉设计的原则与方法

（一）视觉设计的一致性

1.与系统设计指南一致

在各类专家著作中，都强调了UI界面的一致性。因为界面的统一标准除了提供低风险的学习环境，减少用户的学习成本以外，也要避免了视觉元素过于多样而干扰用户对品牌的理解。不同操作系统都会根据自身操作系统的特性，给出一份官方的设计指南，供设计师在进行应用设计时使用，确保设计能符合操作系统一致的体验。而iPad作为苹果旗下的一款产品，必然要遵循iOS界面设计指南。例如：所有的iOS版本中默认字体都是Helvetica Neue。虽然iOS7之后支持其他字体，但是从用户习惯出发，最好遵循此设计原则才不会造成突兀感。另外，iOS系统中，所有主界面的图标都为圆角矩形（图1-2），那么设计图标，就必须是圆角矩形图标，不能随意使用其他图标样式，造成界面的不统一。

2. icon的一致性

icon又名图标。其原指计算机软件编程中，为使人机界面更加易于操作和人性化而设计出的图形标志。它作为界面设计里面的一个标识，能帮助人们更快地理解某些特定功能。icon有很多种类，主要包括：应用图标、工具栏图标、导航图标、按钮等。icon作为界面中一个辅助图形和指示性图标，它的设计必须要简单明了，不能打扰用户操作，其视觉语言也必须是统一的。

首先，icon的图形要与用户思维相统一。导航栏一般都是以文字和icon的形式存在。这是由于人的大脑天生对于图形更为敏感，icon可以帮助用户更快速地识别功能。但icon的图形必须与用户意识中的图形相匹配，才能发挥其隐喻的作用。比如搜索的图形最好是放大镜的造型，收藏功能最好是空心的五角星。若是界面将“搜索”的图标变为五角星，将“收藏”的图标变为放大镜，那么用户很可能会产生困扰，甚至造成误操作，造成用户的挫败感。因此在界面中，icon造型要与其隐喻的内容保持一致。甚至有些icon，我们不需要文字就能猜出它们的功能，这是因为它们已经成为了一种特定的标识（图3）。

其次，icon的视觉语言要统一。功能性图标的视觉特征要一致，例如绘制时线条的类别、粗细、长短、转折的角度，留白的范围，正负形的关系等，甚至配色、大小、摆放的位置是否统一都需要考虑。而同一品牌的不同应用图标，其元素或者色彩都要与品牌特征相呼应。例如网易的各类应用（图4）都采用了网易的红色调，增加了识别度，能有效与其他公司的应用区分。

3.视觉结构的一致性（图例参考设计准则内的图例）

如格式塔原理所示，感知结构让人们更快地了解物体和事件。Jeff Johnson的著作《认知与设计――理解UI设计准则》中指出，信息呈现方式越是结构化和精炼，人们就越能更快和更容易地扫描和理解。一个视觉层次强的界面，能帮助和引导用户专注于信息本身。视觉结构包含了很多模块，如导航栏、工具栏、控件、图标等。如此众多的元素，要将他们系统整合，为信息服务。例如界面的导航栏长期出现在底部，那么就要遵循这一原则，将其放置在下方，避免造成视觉结构的混乱。且控件的大小和位置要统一，各个页面导航栏和工具栏的布局不变。除了模块之间结构要统一，信息结构也要统一，对齐、分段、间距都是常用的方法。

（二）视觉元素的有效性

1.把握好视觉元素的尺寸与位置――“胖手指”的限制

iPad虽具有极高的便携性，但它也给界面设计带来了极大的挑战。首先iPad在设计上的难点之一是屏幕的尺寸。更小的屏幕意味着更小的展示空间，再加上iPad设计指南的一些规定和限制，留给视觉元素的展现空间更是少之又少。这给界面设计中如何更好的安排视觉元素带来了很大的挑战。其次，是操作方式的不同。由于平板电脑没有外接端口，所以手指便代替了鼠标而存在，但是手毕竟没有机器来的精准，若是屏幕里的元素太小，便很难点击到，“胖手指”的问题由此而来。因此，按钮不能做得太小，才能方便人点击。 有些甚至会将按钮或者导航周边区域设置为可触控区域，让用户更便捷的进行操作。例如，iOS设计指南中规定，图标至少要达到48X48dp，若是小于此规格，便会对用户的使用造成影响。

另外，人们使用iPad时经常采取双手持握的方式，使用大拇指及食指进行操作。所以为了更符合用户的使用习惯，可操作区域应该尽量放置在屏幕边缘，靠近手指附近，以提供更短的路径方便用户操作。同时，由于iPad的屏幕比iPhone的屏幕更大，若是将导航放置于下方，比较容易被用户忽视，或者是内容被手臂所遮挡，因此有部分应用是将导航放置于iPad左方，减少了层级，方便用户的操作，提升信息的获取速度。

2.操作状态的反馈

由于界面设计是在一块完整的触摸屏之上，没有凸起的物理按钮，用户往往无法通过触觉感知是否有效进行操作。若是没有及时提示用户操作的状态或者给予操作反馈，用户很容易迷失，从而产生挫败感。因此需要给予视觉或者听觉上的提示。在界面的视觉设计中，一般会设计出按钮的点击前与点击后的状态来以示区别。状态的变化可能是通过颜色，也有可能是通过质感来表现。以“百度阅读”应用为例，当用户在“免费”页面时，导航栏“免费”的图标会从负形图标变为正形图标。并且此模块的颜色较之其他模块更深一些，产生一种压摁的缀入感（图5）。而用户进入“排行榜”页面时，“免费”的图标和模块的颜色又恢复原状，变成“排行榜”页面状态的改变（图6）。这样的视觉设计可以清晰地显示用户目前的操作状态。

（三）符合视觉风格趋势

视觉设计是一门随着时代更新的学科，它需要符合当代受众的审美与视觉流行趋势。它不仅要符合产品的功能，还要标新立异。从iOS7之后，iOS系统撇除了之前拟物化的设计风格，采用的是扁平化的设计风格。在图形，图标、界面控件的设计中，剔除了多余的质感，运用微质感、轻投影和丰富的颜色细节来最大化的表现信息。在色彩上，倾向使用温和、饱和度不高的颜色，且用色彩来表现层级。扁平化看似在视觉上变得“简单”，但是它更强调对造型、色彩的把握，用图形本身来说话。其实扁平化的设计风格是为了更好地展现信息，减少视觉噪声。因此在IPAD应用的设计上，我们也要遵循它这一原则，合理运用扁平化，更好的突出信息。以iOS6与iOS7的电话图标为例。iOS7的电话图标相较于iOS6（图7）的电话图标，摒除了背景的质感和高光。但在电话的造型上进行了更加深入地刻画，且对背景的颜色进行了更为细腻的处理。

三、结语

iPad作为一种大屏的移动设备，其界面的视觉展现方式区别于一般的移动设备与PC端。例如大图的展示，手势与动效结合，沉浸式的使用体验。但无论如何，一个好的iPad应用，其视觉设计除了美观性以外，更是不能忽略其平台特性与有效性。因为视觉终究是为了更好地展示功能与信息，它具有相辅性。一个好的视觉设计可以提升应用的用户体验，减少学习成本，甚至能提升用户对应用的品牌印象认知。希望本文所提出了一致性、有效性、视觉风格等视觉设计原则，能够对iPad应用的视觉设计有所帮助。

参考文献：

[1]肖红，郭歌. 多感官人机交互界面的视觉设计原则[J]. 包装工程，2012（08）：35-37+48.

[2]兰岚，赵刚，李娜. 基于网页界面的视觉构成要素分析[J]. 艺术与设计（理论），2009（02）：31-33.

[3]谭坤，王凯翔. 软件界面中的图标设计[J]. 装饰，2007（04）：35-37.

[4]（美）Jakob Nielsen Raluca Budiu著.贴心设计――打造高可用性的移动产品[M]. 北京：人民邮电出版社，2013.

[5]（美）Jeff Johnson著. 认知与设计――理解UI设计准则[M].北京：人民邮电出版社，2011.