下载掌阅APP，畅读海量书库
立即打开
App UI的设计是建立在优秀的平面设计能力和熟练掌握Photoshop软件的基础之上的。本章我们将讨论作为App UI设计师应该遵循哪些设计原则，以及平面设计师与UI设计师有哪些不同要求。
UI（用户界面）设计是一门关于如何使用户与设备或程序进行交互的学科。它涉及用户界面的布局、外观和交互方式。在设计UI时，我们需要考虑用户的需求、设备的特性以及程序的功能。一个好的UI设计可以提高用户的体验，使用户更容易使用产品。在设计UI时，我们还需要考虑不同设备和操作系统之间的差异。不同设备和操作系统有不同的特性和限制，我们需要根据这些特性和限制来设计界面，如图1.1所示为不同功能的App界面。
图1.1
下面对iPhone和Android的App UI布局进行剖析对比，从而了解不同的系统在App设计时的异同。
iPhone系统App的布局即界面元素一般分为三部分：状态栏、导航栏（标题）、标签栏/工具栏，如图1.2所示。
图1.2
Android系统App的界面元素一般分为四部分：状态栏、标题栏、标签栏、工具栏，如图1.3所示。
图1.3
下面将App UI设计的分类进行了总结，一般来说可将其分为6种方式。
（1）平铺成条：以长条的形式横向平铺。
横向平铺界面给人一种简洁的印象，让操作更简单，分类更明晰。虽然这种横向平铺的构图从艺术角度讲有点呆板，但在App UI里却是最常用的，也是让用户更易操作的常用界面构图方式，如图1.4所示。
图1.4
（2）九宫格：以九宫格的方式进行网格式横向和纵向排列。
九宫格是一种常见且基本的构图方法。我们可以将画面视为一个有边框的区域，将左、右、上、下四个边均分为三等份，然后用直线连接相应的点，这样画面就会形成一个井字。画面的面积被分成了九个相等的方格，而井字的四个交叉点则成为了趣味中心，如图1.5所示。
图1.5
（3）大图滑动：以一张大图的方式布满全屏。
整屏滑动界面受益于系统速度和网速的提高，手机读取速度提高了，这种大图滑动才得以普及。大图滑动方式很有气势，画面也更加整洁，常用于软件的多屏浏览，如图1.6所示。
图1.6
（4）图片平铺：所有图片不规则地平铺于界面之中。
这种图片平铺的界面构图最初来自于Facebook和微软系统的界面。它的优势在于多个元素可以同时展示在用户面前，而且可以平均分配面积或者穿插画中画效果。这种平铺界面分类的优点是比较灵活，如图1.7所示。
图1.7
（5）分类标签：以标签的形式构图，导航条的下方水平铺开，可以左右滑动。
标签界面分类方式是以图标的形式将类别可视化，通常体现在App、功能等分类首页上。这种标签界面的优点在于视觉导向明晰，利于操控，如图1.8所示。
图1.8
（6）下拉选项框：以下拉列表或下拉选项的方式呈现，主要对信息进行筛选。
下拉选项框的优点是可以将大量信息分门别类地隐藏在框中，适用于列表式的选项。常见的有歌曲菜单、地址列表等。查询方式可以采用英文字母排序等，如图1.9所示。
图1.9
本节介绍的是手机UI设计的基本概念，其中包括什么是UI设计、做UI设计的目的、UI设计的重要性、UI设计中最重要的元素是什么、平面UI与手机UI的不同等几部分。
UI即用户界面。UI设计不仅仅是指界面美化设计，从字面看UI还反映了用户与界面的直接交互关系。所以，UI设计不仅仅是为了美化界面，它还需要研究用户需求，让界面变得更简洁、易用、舒适。
用户界面无处不在。它可以是软件界面，也可以是登录界面，不论是在手机还是在PC上都有它的存在。用户界面设计，不只要考虑如何摆放按钮和菜单，更为重要的是要考虑程序、设备如何与用户互动，如图1.10所示。
图1.10
做UI设计的目的是让用户理解程序的用途及如何操作程序。外观和视觉感不是UI设计的主要目的，它的主要目的还是沟通，通过沟通让用户理解程序。
UI设计包括美化和交互两个方面。为了使读者直观地了解到UI设计的重要性，我们将用UI设计前和UI设计后的对应图来做对比分析。
从图1.11中可以看出，未被UI设计的界面有以下明显的特点：
● 界面过于简单。
● “登录”没有体现出按钮的立体感，让人看起来就像是单纯的文字，而不会去点击。
● 在没有其他说明的情况下，无法知道登录的是哪种软件。
从图1.12中可以看到，UI设计后的界面有以下明显的特点：
● 画面内容丰富，具有时尚感和立体感。
● “登录”按钮具有美感，使人们明确知道通过点击它们就可以进入“登录”界面中。
● 图片上的色调就让人知道这是一个美团的登录界面。
从对比图中我们就可以看到没有被UI设计的界面是非常简陋的，因此对于智能手机App来说，UI设计非常值得人们重视。
● 布局和定位：版面结构。
● 形状和尺寸：通过形状，让人迅速地辨识；通过大小确定某元素的重要性，常用的要大，容易按到。
● 颜色：不同的颜色代表不同含义，红色——危险、停止、错误；绿色——成功、继续。颜色可以突出显示内容，如高亮显示。
● 对比：加强对比可以提高辨识度，如黑白；降低对比可以融合；通过加强和降低对比，可以让用户分清主次。
● 材质：在对话框的四角加材质，可以提示用户拖曳。
手机UI的范围主要限定在手机的App客户端上，而平面UI的应用范围则更为广泛。由于手机UI具有独特的尺寸、空间和组件类型的要求，许多平面UI设计师对于手机UI的设计了解不够深入。
下面通过与一款软件（印象笔记）进行比较，我们可以直观地了解手机UI与一般网页UI之间的区别。即使在功能相同的页面上，这两者之间的内容也存在很大差异，如图1.13所示。
图1.13
世界级图形设计大师保罗·兰德（Paul Rand）曾说过：“设计绝不是简单的排列组合与简单地再编辑，它应当充满着价值和意义，去说明道理，去删繁就简，去阐明演绎，去修饰美化，去赞美褒扬，使其有戏剧意味，让人们信服你所言……”这句话表明了设计的复杂性和重要性。要想设计出优秀的UI，需要付出大量的精力和时间。
为了保持屏幕元素的统一性，初级设计师经常对需要加以区分的元素采用相同的视觉效果。其实采用不同的视觉效果也是可以的。由于屏幕元素各自的功能不同，所以它们的外观也不同。换句话说，如果功能相同或者相近，它们看起来就应该是一样的，如图1.14所示。
图1.14
为了保持界面的统一性，相同的功能应该放在同样的位置。一个页面由一些基本模块组成，而每一种基本模块在UI设计时，不同的应用实例应把字型、字号、颜色、按钮颜色、按钮形状、按钮功能、提示文字、行距等元素排列一致。然而，很多设计师在执行时会有一些随意的想法，有些想法可能还是比较好的，但是我们还是要执行统一的界面标准。例如，在Windows中，不同窗口的关闭按钮不仅在不同位置，而且颜色也不相同，这样会显得非常混乱。如图1.15所示是天猫商城风格一致的界面设计。
图1.15
在界面设计中，清晰度是最重要的工作。如果想要用户认可并喜欢你设计的界面，就必须让用户先能够识别出它，再让用户知道使用它的原因。当用户使用时，不仅能预料到会发生什么，还能成功地与之交互。只有清晰的界面才能够长期吸引用户不断地重复使用，如图1.16所示，购物和游戏网站宜采用清晰的产品图片和文字。
图1.16
界面的存在，主要是为了促进用户和我们之间的互动。一个优秀的界面，不仅能够让我们做事有效率，还能够激发和加强我们与这个世界的联系。
大家可能会有这样一种感觉：人们对能够自己掌控的环境感到很舒心。而那些不考虑用户感受的软件，就不会带给用户这种舒适感。我们应该保证界面时刻处在用户的掌控之中，让用户自己决定系统状态，只需要稍加引导，就会使用户达到所希望的目标。如图1.17所示，美图秀秀的人性化功能界面，只看图表也能进行操作。
图1.17
在设计领域，衡量一个界面设计的成功与否，就是有用户使用它。比如一件漂亮的衣服，虽然做工精细，材质细腻，但是如果穿着不合适，那么客户就不会选择它，它也就是一个失败的设计。所以，界面设计只能满足其设计者的虚荣心是远远不够的，它必须有实用的价值。即界面设计是先设计一个使用环境，再创造一个值得使用的艺术品。如图1.18所示，百度地图的界面设计让人感觉使用起来非常方便。
图1.18
想要让屏幕的视觉元素具有清晰的浏览次序，只有通过强烈的视觉层次感来实现。换言之，要是视觉层次感不明显的话，用户每次都按照相同的顺序浏览同样的东西，那么他就不知道哪里才是目光停留的重点，最终只会让用户感到一片茫然。可是在设计不断变更的情况下，要保持明确的层次关系就显得十分困难。如果把所有的元素都突出显示，那么就没有重点可言，因为所有的元素层次关系都是相对的。为了再次实现明确的视觉层次，就需要设计师添加一个需要特别突出的元素。这是增强视觉层次的最简单最有效的办法。如图1.19所示是几个具有强烈视觉冲击力的界面设计。
图1.19