1.3
UI设计的原则

UI设计要遵循统一的规范，不管是按钮、文字、颜色、布局风格等，都应遵循统一的标准，这样会让用户使用起来有统一的感觉，不觉得混乱，同时也能让用户建立起精确的心理模型，用户熟悉了一个界面后，切换到另一个界面也能轻松推测出各种功能，而不需要花费时间和精力去分析理解。

开发UI设计时，项目组里有经验的人士或项目经理一般会确立UI设计规范，这样会使所有参与人员了解规范，降低时间成本和培训成本。图1-5所示为UI设计规范。

总体来说，UI设计的原则主要包括用户控制原则、一致性原则、简单美观原则、布局合理原则等。

1.3.1 用户控制原则

UI设计的一个重要原则就是永远以用户体验为中心，让用户感觉能够控制软件而不是被软件控制。

（1）让用户扮演主动角色，在需要自动执行任务时，允许用户进行选择或以控制软件的方式来执行该任务。

（2）提供用户自定义设置。每个用户的需求和喜好是不一样的，要想使产品满足用户不同的个性化需求，就要为用户提供颜色、字体或其他选项的用户自定义设置，如图1-6所示。

（3）让用户感觉自己是聪明的，对于软件的操作是顺利的、易于理解的。同时操作界面要友好，要让用户对产品产生好感。

1.3.2 一致性原则

一致性原则包括两个方面的内容，一是尽可能允许用户将已有的知识运用到新产品中，二是同一产品中的相同元素或术语要保持一致。

允许用户将已有的知识运用到新产品中，可以方便用户更快地学习新事物，并将更多的注意力集中到执行任务上。这样可使用户不必花时间来尝试记住交互方式的不同，而且会带给用户一种稳定、愉快的感觉。例如，假设要开发一个购物程序，而且用户在其他购物网站或程序中已经有过购买经验，那么我们就可以使用相同或相似的名称来命名操作行为。很多购物网站或程序都将购物车当作存储商品的标识，那么我们在开发购物程序时，也可以使用购物车或购物篮等来使用户快速明白这个操作行为的含义，方便用户使用。

在同一个产品中，要使用一致的外观、字体、手势、命令等来展示同样的功能或信息。

（1）外观。一致的外观使用户界面更易于理解和使用，界面上的控件看起来应该是一致的。

（2）字体。字体应保持一致，避免一套主题出现多种字体。我们可以用不同的字号、颜色来显示内容的层级关系，对于不可修改的字段，最好统一用灰色文字显示。

（3）手势。在手机或平板电脑程序中，用户通常会用手势进行操作，比如放大/缩小、快进/快退等。手势应保持一致，这样会带给用户更好的使用体验。

（4）命令。产品要使用同样的命令实现对于用户来说相似的功能。比如，在同一个产品中，如果要实现“编辑”功能，那么各处出现相似功能时都应使用“编辑”字样，而不要使用“修改”“设置”“调整”等容易混淆的字样。建议在项目开发阶段建立产品词典，其中包括产品中的常用术语及描述，设计或开发人员要严格按照产品词典中的术语来展示文字信息。

图1-7所示的3个界面就很好地体现了一致性原则，其色调、线条、字体等视觉元素都是一致的。

1.3.3 简单美观原则

任何产品或程序的UI设计都应该是简单、美观、易于使用的。实际上，扩充功能和保持简单是相互矛盾的，一个有效的设计应该尽可能平衡二者。保持简单的一种方法就是将信息减到最少，只要能够正确进行交互即可，不相关或冗长的信息会扰乱设计，使用户难以方便地提取重要信息。例如，开发一个在手机上运行的播放器程序时，启动界面可以提示用户“如果要调整音量，可以用手指向上滑动放大音量，向下滑动减小音量”。这条提示信息很详细，但是启动界面可能只显示2~5秒，而相似的提示信息（如快进/快退的操作方法等）可能还有几条，用户难以在短时间内阅读完毕，更不要提掌握它们的使用方法了。如果我们将这些信息简化，借助手势图和方向箭头来表示，再加以简单的文字说明（如“音量控制”），就可以很好地展示提示信息，也可以使用户在短时间内掌握使用该程序的方法。简单且便于掌握的提示信息如图1-8所示。

不管是在何种设备上运行的程序，界面美观与否是用户对程序的第一印象。出现在界面上的每一个视觉元素都很重要，图形的创意、颜色的运用、可视化设计的技巧等都是构成美观的界面所必不可少的元素。它们互相搭配，共同提升用户的视觉体验，提高用户的使用满意度。简单美观的界面设计如图1-9所示。

1.3.4 布局合理原则

UI设计需要充分考虑布局的合理化问题，一般提倡多做“减法”运算，将不常用的功能区块隐藏，这样有利于提高软件的易用性及可用性。布局合理化主要包括以下几个方面的内容。

（1）遵循用户从上往下、自左向右的浏览及操作习惯。

（2）注意将用户常用的功能按钮排列紧密，不要过于分散，否则会造成用户手指移动距离过长，影响用户的使用体验。

（3）确认按钮一般放置在左边，取消或关闭按钮放置于右边。

（4）所有控件元素应避免贴近界面边缘。

（5）设计界面布局时应避免出现横向滚动条。

总体来说，布局设计是为了提升用户的使用体验，因而最适合用户使用的布局设计才是最合理的。图1-10所示的布局设计就很合理，信息浏览区域明显，操作简单，按钮位置也符合用户的使用习惯。

对于手机等移动终端设备来说，布局设计需遵守一些特殊的规范，我们会在“项目3 界面设计”中详细介绍。