UI交互设计案例教程 第二章

02UI交互设计规范和原则签到签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。扫码下载文旌课堂APP扫码签到

UI交互设计需要基于现有的设备和技术，不同系统、不同尺寸的设备对UI交互设计有不同的要求，如果对现有设备的尺寸规范和交互方法不了解，那设计通常会事倍功半，设计出的作品也会漏洞百出。本章将介绍移动端UI交互设计的一些常用尺寸规范和交互设计方法，希望通过本章的学习，学习者能够制作出规范的作品。单元导读★了解iOS系统和Android系统UI设计规范★掌握5W2H交互设计方法论知识目标★紧跟科技发展的步伐，开拓视野，增强民族荣誉感和自豪感

思政目标★掌握UI交互设计的原则及其使用方法★学习相关设计规范，不断提高自身的专业技能

技能目标学习目标2.1iOS系统设计规范2.1.1有关iOS系统的基本概念iOS系统是由苹果公司开发的移动操作系统，最初应用于iPhone，后陆续套用到iPad、iPodtouch。操作界面美观简洁、设备反应迅速、操作流畅、安全性强等特点，使iOS系统受到了不少用户的喜欢。在学习相关设计规范之前，我们先来简单了解有关iOS系统的基本概念。UI（1）像素（px）：是构成图像的最小单位，可以将其看作一个小方格，无数个不同颜色的小方格就构成了画面。像素并没有固定的物理尺寸，其尺寸由载体决定。（2）屏幕尺寸：一般指屏幕的对角线长度，单位为英寸（in），1in=2.54cm。（3）物理分辨率：是指屏幕的最佳分辨率，是屏幕固有的参数，不能调节，其表示方法为设备屏幕在水平和垂直方向上所拥有的像素相乘的数学表达式。屏幕尺寸逻辑分辨率物理分辨率倍率PPI像素iOS系统基本概念2.1iOS系统设计规范2.1.1有关iOS系统的基本概念UI（4）PPI：英文全称pixelsperinch，是像素密度的简称，也是像素的密度单位；是连接数字世界与物理世界的桥梁，表示每英寸屏幕中排列的像素点数量。像素密度越高，屏幕显示效果越清晰，细节越丰富，如下图所示。（5）逻辑分辨率：是为使同样尺寸的图像在不同物理分辨率的设备上都能正常显示而发明的参数，其单位为pt。在物理分辨率不同的设备中，只要设备的逻辑分辨率相同，它们的显示效果就是相同的。1英寸，4px×4px

1英寸，8px×8px像素密度不同的两张图片2.1iOS系统设计规范2.1.1有关iOS系统的基本概念UI6）倍率：通俗一点讲就是指物理分辨率和逻辑分辨率之间的比例关系。如切图名称的后缀@2x、@3x就是指倍率的数值。

★提示：大多数物理分辨率都等于逻辑分辨率×倍率。在@1x倍率图中，1pt相当于1px，在@2x倍率图中，1pt相当于2px，在@3x倍率图中，1pt就相当于3px。2.1iOS系统设计规范2.1.2iOS系统UI设计规范UI

在工作中，设计师遇到的设计规范问题主要可以归结为界面、布局、字体、图标、按钮几类。

1．界面设计规范主要包括界面和界面元素的尺寸规范

1）常用设备尺寸

界面设计是基于设备的，界面尺寸由设备尺寸决定，只有先确定了界面大小才能深入去设计不同的界面元素。

通常设计师会以一种尺寸为基础进行设计，让开发去适配不同的设备。

例如，用Photoshop做设计稿或AfterEffects做UI交互动效，一般会选择750px×1334px或1125px×2436px，也可以选择1170px×2532px。2.1iOS系统设计规范2.1.2iOS系统UI设计规范UI

2）界面元素尺寸规范

（1）状态栏状态栏位于手机界面最上方，倍率相同，设备屏幕尺寸和分辨率不同时，状态栏的高度通常是相同的。而倍率不同，状态栏的高度也会不同，一般在@1x倍率图中，状态栏的高度为20px；在@2x倍率图中，状态栏的高度为40px；在@3x倍率图中，状态栏的高度为132px（个别型号的设备除外，如iPhone8Plus、7Plus、6Plus、6sPlus型号中状态栏的高度为60px，iPhone11、XR型号中状态栏的高度为88px）。状态栏是手机本身的显示，UI设计师无须改变，只需要将界面中状态栏的位置预留出来即可。状态栏2.1iOS系统设计规范2.1.2iOS系统UI设计规范UI（2）导航栏导航栏一般位于状态栏的下方，在@1x倍率图中，导航栏的高度为44px；在@2x倍率图中，导航栏的高度为88px；在@3x倍率图中，导航栏的高度为132px。（3）标签栏在@1x倍率图中，界面底部的标签栏高度为49px；在@2x倍率图中，标签栏的高度为98px；在@3x倍率图中，标签栏的高度为147px。底部标签栏中的内容可以根据不同的产品需求进行设计。总的来说，界面元素的尺寸随倍率的变化而变化，如下图所示。不同倍率下的控件尺寸2.1iOS系统设计规范2.1.2iOS系统UI设计规范2．布局规范

1）全局边距iPhone8Plus、7Plus、6Plus、6sPlus之后的型号与以往相比，由界面底部的主页指示器（灰色横杠）代替了以往的home键，因此在设计时也需要预留出主页指示器的位置。一般来说，@2x倍率图中需预留高约68px的位置，@3x倍率图中需预留100px～120px高的位置。有时为了使用户将注意力集中在图文本身，对视觉造成冲击，会不留全局边距。全局边距的界面

不设置全局边距的界面2.1iOS系统设计规范2.1.2iOS系统UI设计规范2．布局规范

2）间距间距一般指卡片之间的距离。卡片式布局是移动端界面的常见布局方式，卡片间距的大小由界面风格和卡片承载信息的多少决定，并没有固定的数值。常见间距有20px、24px、30px、40px等，通常不低于16px，过小的间距会使用户浏览时产生紧张情绪，而过大的间距又会使界面变得松散。初学者可以使用常见数值，也可以在平时多关注其他界面的间距设置。但也不可一味仿制，最好能根据具体情况灵活设置。界面中的卡片间距设置2.1iOS系统设计规范2.1.2iOS系统UI设计规范3．字体规范

1）字体在iOS9之后，苹果推出了新的官方中文字体——苹方，英文名为PingFangSC，专为中国用户打造，是iOS和Mac操作系统的默认中文字体。其具有现代感的外观和优美的字形有效提升了文字在手机和电脑屏幕上的清晰度和易读性。该字体有6种字重可供选择，同时支持中文简体和繁体的应用，极大地满足了设计师的设计需求。苹方字体及其字重2.1iOS系统设计规范2.1.2iOS系统UI设计规范3．字体规范

2）字号、字重、行距

iOS系统中不同文字的字号、字重和行距规范iOS操作系统界面中的文字一般都有规定的字号、字重和行距。2.1iOS系统设计规范2.1.2iOS系统UI设计规范3．字体规范

2）字号、字重、行距

表格中各文字在UI界面中的应用如图。

虽然界面文字有规定的字号与字重，但在进行特殊设计时可在其基础上适当放大或缩小。

设计面向老年人的界面时，可以适当加大每一层级文字的字号，在保证信息层级分明的情况下更便于老年人阅读。iOS系统UI界面中的文字2.1iOS系统设计规范2.1.2iOS系统UI设计规范3．字体规范

2）字号、字重、行距

另外，除了要注意iOS操作系统的文字规范，设计师在设计界面文字时还要注意以下三个问题。（1）界面中的字体类型不可太多。（3）强调重要信息，优先考虑内容

通过字体、字号、字重和文字颜色等突出重要信息（2）注意行距的应用。

★提示：在界面设计中，文字颜色一般不使用纯黑色，尤其是正文和大面积文字。在同色相、同明度下，一般纯度越高文字越突出，因此一些重点内容可以使用纯度高的颜色来突出，其中最常用的就是红色。2.1iOS系统设计规范2.1.2iOS系统UI设计规范4．图标规范

图标是UI中最常见的元素。iOS操作系统中的图标大致可分以下四种：

应用商店图标

应用程序图标

设置图标

通知图标2.1iOS系统设计规范2.1.2iOS系统UI设计规范4．图标规范

图标决定了用户对App的第一印象，同时也体现了产品调性和品牌形象。在iOS操作系统中，不同类型图标在不同倍率的界面上有不同的尺寸规范。

iOS系统中不同类型图标的尺寸规范2.1iOS系统设计规范2.1.2iOS系统UI设计规范4．图标规范

除上述图标外，导航栏、工具栏、标签栏中也常用到图标，在设计时要避免混淆，并保证图标风格、细节、样式等统一。在iOS系统中，对此类图标同样有一定的规范。iOS系统中不同功能图标的尺寸规范

苹果开发者网站提供了系统图标，在设计上述图标时，可以直接从系统图标中选择合适的图标来使用，也可以根据界面风格自己设计图标。2.1iOS系统设计规范2.1.2iOS系统UI设计规范5．按钮规范

1）按钮状态

iOS操作系统中的按钮主要有四种状态：正常状态（normal）、选中状态（selected）、高亮状态（highlighted）、禁用状态（disabled）。

为便于区分当前按钮所处状态，不同状态的按钮要有不同的样式。2.1iOS系统设计规范2.1.2iOS系统UI设计规范5．按钮规范

2）按钮样式

iOS操作系统中的按钮主要有以下三种样式：

当一个界面中同时出现两个及以上按钮时，可以使用不同的颜色或尺寸来体现按钮的不同功能，给用户传达不同的信息。

例如，在接听电话界面中，总是用红色的按钮表示拒绝，绿色的按钮表示接听，这样即便在紧急情况下也可以很容易地分辨出哪个是接听键，哪个是拒绝键。按钮设计

知识链接：Android系统中的按钮规范与iOS系统中的按钮规范大同小异。2.2Android系统设计规范2.2.1有关Android系统的基本概念

与iOS操作系统不同的是，Android系统是一个开放式系统，它允许任何移动终端厂商的加入，这也导致了设备的多样化与不统一性。针对Android系统的UI设计，也会涉及一些基本概念和常用单位，其中像素、屏幕尺寸、倍率等与iOS系统相同。除此之外，还有以下Android系统专用的概念与单位。DPI不同的两个图片（1）DPI：最初用来衡量打印机的打印精度，指打印物上每英寸的点数密度，一般来说DPI数值越大，打印机的打印精度越高，图片越精细。当用于计算机屏幕时，DPI的本质与PPI相同。（2）dp：全称deviceindependentpixels，意为密度独立像素，是Android系统专用的长度单位，与iOS系统中的pt相同。（3）sp：是Android系统中的专用字体单位。2.2Android系统设计规范2.2.2Android系统UI设计规范1．界面与布局规范

1）屏幕适配

Android系统的开源性使其涉及的设备类型繁多，没有固定的尺寸参考，这给UI设计带来了极大的挑战。为便于对Android系统设备进行管理，降低设计难度，提升适配度，官方根据屏幕的像素密度不同，将屏幕由低到高大致分为ldpi、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi六类，不同密度屏幕对应的各项数值。2.2Android系统设计规范

与iOS系统一样，为Android设备设计界面也会以一种尺寸为基础，由开发去适配不同的设备，通常这个尺寸会选用720px×1280px或1080px×1920px。

另外，为了在不同密度的屏幕上统一显示元素，Android系统的UI设计规范常以dp和sp为单位，但在设计时，却统一使用px，因此需要自行计算px与dp和sp之间的转换关系。

在正常情况下，1dp等于像素密度为160的屏幕上的1个物理像素，因此dp和px之间的换算公式为：dp×dpi/160=px。

例如，当屏幕的像素密度为320dpi时，1dp×320dpi/160=2px。由此可以算出，当屏幕的密度为ldpi时，1dp=0.75px；为mdpi时，1dp=1px；为hdpi时，1dp=1.5px；为xhdpi时，1dp=2px；为xxhdpi时，441dp=3px；为xxxhdpi时，1dp=4px。sp和px之间的换算与dp和px相同。2.2Android系统设计规范2.2.2Android系统UI设计规范2）基准网格

网格系统给予设计师一种规范和约束，可以保证界面元素及界面与界面之间的一致性，同时又不会妨碍设计师的想法和界面布局，还可以提高设计师的工作效率，减少沟通成本。

Android系统对基准网格有着较为明确的规范，手机、平板等设备中的所有组件都与8dp的基准网格对齐；工具栏中的图标和文字则与4dp的基准网格对齐。2.2Android系统设计规范2.2.2Android系统UI设计规范3）间距与界面元素尺寸规范

在Android系统的手机界面中，全局边距一般为16dp；当头像和文本列表采取左对齐样式时，与图标、头像相关联的内容左边距为72dp。

状态栏的高度为24dp，顶部工具栏的高度为56dp，底部工具栏的高度为48dp，标题和列表栏的高度为72dp，副标题的高度为48dp，内容区域之间的间距为8dp。

Android系统的界面边距

Android系统界面元素尺寸2.2Android系统设计规范2.2.2Android系统UI设计规范2．字体规范Android系统语言文字English-like

typefacestypefaces（类英语文字）Densetypefaces（密集文字）Talltypefaces（高大文字）

主要指英语和类似英语的文字，如拉丁文、希腊文和西里尔文等。

Talltypefaces和Densetypefaces文字都需要额外的行高来适应不同的字体，前者主要包括南亚、东南亚及中东地区的文字，而后者主要包括中文、日文和韩文。2.2Android系统设计规范2.2.2Android系统UI设计规范2．字体规范1）字体

Roboto为Android系统上的首选字体，主要支持英文和类英文文字，该字体有六种字重用于匹配不同文本。

Noto是Roboto字体未涵盖的所有语言的默认字体，其中NotoSansCJK（CJK指中文、日文和韩文）为国内常用的Android系统字体，该字体有七种字重可供选择。Roboto字体

NotoSansCJK字体知识链接：NotoSansCJK是由Google和Adobe联合开发的开源字体，Adobe将其称为SourceHanSans（思源黑体），而Google将其称为NotoSansCJK，并纳入Noto字体家族。2.2Android系统设计规范2.2.2Android系统UI设计规范2．字体规范2）字号、字重、行距、字距

Android系统中字号的单位用sp表示，字与字之间的间距单位用dp表示，因此，在设计时需要将sp和dp转换为相应的px值。在Android系统界面中，文字的大小一般在12sp～24sp，不同文字的字体规范，见表所列。2.2Android系统设计规范2.2.2Android系统UI设计规范2．字体规范2）字号、字重、行距、字距

不同文字在UI界面中的位置。在具体应用时，设计师可以基于文字样式、产品属性有针对性地进行设置。2.2Android系统设计规范2.2.2Android系统UI设计规范3．图标规范Android系统中的图标类型应用程序图标系统图标应用快捷操作图标2.2Android系统设计规范2.2.2Android系统UI设计规范3．图标规范（1）应用程序图标：在Android系统中，应用程序图标的尺寸规范为48dp×48dp，边缘为1dp。但在创建图标时，要求以400%（192dp×192dp）的比例查看和编辑图标，此时的边缘为4dp。（2）系统图标：是系统提供的内置图标，可用作工具栏、标签栏和应用快捷操作图标，其尺寸规范为24dp×24dp，由于尺寸较小，在设计时要尽可能精简，以保证图标的可读性和清晰度。系统图标大多采用几何图形，外观较为对称。（3）应用快捷操作图标：应用快捷操作图标可以让用户轻松快速地访问应用。在通常情况下，应用快捷操作图标就是将一个系统图标放置在圆形的安全区域中心，它的尺寸规范为直径48dp的圆形，其中包括直径44dp的安全区域和安全区域周围的2dp边距。

Android系统的开放性使其设计较为灵活，对于应用商店图标、设置图标和通知图标等没有明确的规范，可在实际工作中根据情况灵活处理。2.2Android系统设计规范2.2.2Android系统UI设计规范4．色彩规范1）界面中的颜色界面中的颜色可分为主色和辅助色。主色指界面中出现最频繁的颜色。不同深浅的主色有助于区分界面中的不同区域，如区分状态栏和工具栏。辅助色用来强调UI中的关键部分，可以与主色互补，也可以与主色类似，但不能是基于主色的简单加深或变浅。用主色区分区域

用辅助色强调按钮2.2Android系统设计规范2.2.2Android系统UI设计规范4．色彩规范2）文本可读性

界面中的所有文本都应该是清晰易读的，而颜色在文本可读性中起着重要作用。在设置文本颜色时，建议在暗色背景中使用亮色文本，在亮色背景中使用暗色文本，并且文本颜色与背景要有足够的对比。

不同的文本要使用不同的不透明度，以增强界面层次感，不同背景中的文本不透明度。不同背景中的文本不透明度2.2Android系统设计规范2.2.2Android系统UI设计规范4．色彩规范2）文本可读性

在不同背景中，使用不同颜色文本的不透明度效果。不同背景中的文本不透明度★在设计iOS系统界面时，可参考上述色彩规范，也可到官网查看相关规范。知识链接

2019年8月9日，华为鸿蒙系统正式发布；2021年6月2日晚，华为正式发布了多款搭载HarmonyOS2的产品，这标志着中国科技的进步与崛起，也意味着我们有了自己的移动操作系统。相信在不久的将来，针对鸿蒙系统的设计规范和标准也将出现。科技之光2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析步骤2此时打开的美团界面会显示在画布中间，选择软件界面左侧工具栏中吸管工具组中的标尺工具，在要测量元素的一侧边界按住鼠标左键不放，并拖动鼠标至另一侧后释放，在拖动鼠标时可以按住快捷键“Shift”以保持其水平或垂直移动，此时起点和终点之间就会有一条线。步骤1首先启动Photoshop；然后按快捷键“Ctrl+O”，在弹出的“打开”对话框中选择配套素材“素材与实例/第2章/美团界面.png”；最后单击“打开”按钮，打开美团界面。提示：在使用标尺工具测量界面尺寸时，可以在元素边界添加辅助线（按快捷键“Ctrl+R”显示标尺，然后将光标移至标尺上，接着按住鼠标左键并拖动至元素边界后释放，即可添加一条参考线），这样在测量时方便标尺工具与元素边界对齐，以保证测量的准确性。2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析步骤3

选择“窗口/测量记录”菜单项，在画布下方会弹出测量记录界面，单击该界面左上角的“记录测量”按钮，就可以看到前面测量线的长度。

标尺工具图

使用标尺工具进行测量

选择“窗口/测量记录”菜单项查看测量记录2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析步骤4

用工具栏中的吸管工具在所要选取的颜色上单击，此时软件界面左侧的工具栏中会显示所选颜色，单击设置前景色工具会弹出“拾色器”对话框。“拾色器”对话框2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析步骤5

用工具栏中的文字工具在画布中单击并拖动鼠标，拖出一个文字框，在其中输入文字，利用工具属性栏（如图所示）改变文字字号，来判断首页界面不同文字的字号。工具属性栏提示：iOS系统的字号规范是基于@2x倍率的界面尺寸设定的，在@3x倍率图中需要进行简单的计算，当规定字号为28点时，它在@3x倍率图中的字号就应当是：28÷2×3=42点。2.2Android系统设计规范案例练习2-1对美团App首页界面进行剖析使用上述方法测量并总结得出以下五点结论。（1）主色：该美团App首页界面以“#f7d247”为主色。（2）字号：大标题为51点，标题为42点，副标题为33点。（3）文本不透明度：该界面为亮色背景，因此使用了暗色文本（#000000），标题和图标文字为主要文本，搜索框中的文字为辅助文本，界面中主要文本的不透明度明显高于辅助文本的不透明度。（4）界面布局：状态栏高度为132px，导航栏高度为132px，标签栏高度为147px，标签栏下方所预留的主页指示器的高度为112px，全局边距为45px。（5）图标：在正文中，图标大小为96px×96px；在标签栏中，图标大小为69px×69px。将上述数据与UI设计规范作对比，可以发现美团App的界面基本上是按照UI设计规范去设计的。例如，使用了规范的界面布局；在彩色背景中，使用了暗色文本（#000000），文本清晰易读；不同样式的文字使用了不同字号，界面主次分明。2.3交互设计方法论——5W2H2.3.15W2H分析法是什么

5W2H分析法又叫“七何分析法”，它简单、方便，易于理解，富有启发意义，有助于弥补考虑问题中的疏漏，被广泛应用于企业管理和技术活动中。

5W2H由5个以W开头的单词和两个以H开头的单词组成，它主要从7个方向进行设问，从中发现解决问题的线索，寻找设计思路，进行设计构思，从而对产品进行发明与创新。2.3交互设计方法论——5W2H2.3.15W2H分析法是什么

5W2H分析法是通过提问、反思，来解决问题，并进行创新。它的应用面较为广泛，应用方式比较灵活，在UI交互设计领域也非常适用。它的具体内容如下。（1）Who：谁？由谁来做？Who指用户和整个流程中所涉及的人员，需要考虑用户特征和用户需求，还要考虑由谁来设计、决策，能力是否足够，后期维护是否可以做到。（2）What：是什么？目的是什么？做什么工作？What指功能，具体要实现哪些功能，也就是用户使用产品可以实现哪些目标，完成哪些事情。（3）Why：为什么要做？可不可以不做？有没有代替方法？Why指寻找原因，为什么要做这个功能？此功能是否有做下去的价值？考虑产品功能是否需要优化、是否需要删减。2.3交互设计方法论——5W2H2.3.15W2H分析法是什么（4）When：何时？什么时间做？什么时机最合适？对于UI交互设计师来说，需要考虑产品上线时间，设计的功能是否可以在计划时间内完成，是否需要分批上线或删减内容；用户使用此功能需要多长时间，用户是否愿意花费时间来使用此功能。（5）Where：何处？在哪里做？对于UI交互设计师来说，需要考虑此产品是在PC端运行还是在移动端运行，此功能要放在哪个模块之下；用户在使用此产品或功能时，是在何种环境之下，有哪些影响产品运行环境的因素。（6）How：怎么做？如何提高效率？如何实施？方法是什么？How指真正了解用户是如何操作的，操作习惯；整体方案如何实施；产品的具体界面设计；设计的产品是否符合用户习惯。（7）Howmuch：多少？做到什么程度？数量如何？质量水平如何？费用产出如何？Howmuch指用户花费资金与产品功能是否等值；产品的开发成本，运营和维护成本。5W2H方法论意在指引同学们养成良好的、独立的思考习惯，培养发散性思维，它可以运用于交互设计流程的某一项目，也可以贯穿全程。但要注意的是，不同的设计项目需要提出不同的问题，这是需要设计师经过深思熟虑才能提出的，不可死记硬背并照搬他人，否则会变得没有意义。2.3交互设计方法论——5W2H2.3.25W2H分析法的重要性提出疑问是发现问题和解决问题的前提，而5W2H方法论的本质就是引导设计师提出疑问。5W2H方法论指导设计1.可以准确界定问题，清晰表述问题，提高工作效率。2.可以掌握产品和用户需求的本质，抓住产品的骨架，提高创新能力。3.有助于理清设计思路，更加全面地思考问题，避免在设计流程中遗漏项目。2.4交互设计的原则2.4.1人机交互界面设计的基本原则

出色的交互界面更容易吸引用户，受到用户青睐；人性化的设计，则可以增加用户对应用程序的黏性。而要想设计出吸引人的、逻辑清晰的交互界面，就需要了解并掌握以下几个原则。1．美学完整性

美学完整性并不是要求设计出的界面有多么好看，而是要求应用程序的视觉界面、交互行为和功能更加匹配。2．一致性

人机交互界面的一致性，指在设计时遵守有关系统的设计规范，尽量使用系统提供的界面元素、图标和文本样式，保持应用程序整体的风格统一，且包含人们所熟悉和期望的功能与行为。

例如，一款应用程序的目的是帮助用户完成某项任务，在设计时就应该使用一些标准化的控件和交互行为，或是一些不太明显的背景和图案作为点缀，旨在给用户传达清晰的信息，突出应用程序的目的，便于用户理解和操作。

2.4交互设计的原则2.4.1人机交互界面设计的基本原则3．直接操作

直接操作是指直接与屏幕上的对象进行交互，而非通过按钮交互，使用户更能理解自己的任务和操作结果，提高用户的参与感。

例如，用户直接旋转设备或通过滑动等手势即可影响屏幕中的内容，而不需要通过键盘、按钮等控制屏幕内容。又如，使用手指滑动模拟拆包装动效，有效提升了用户参与感与体验感。直接操作2.4交互设计的原则2.4.1人机交互界面设计的基本原则

4．隐喻

当虚拟的物品和操作行为与现实生活中的物品有相似性时，用户就可以快速学会此操作。

例如，在界面中，用户通过轻扫来翻阅书籍，就与现实生活中人们翻阅书籍的操作相似，因此用户可以很快理解并掌握这个操作。

交互设计中的隐喻可以不受现实生活的限制。例如，在现实生活中，文件夹可放内容是十分有限的，并且只能放纸质文件，而在计算机中则可以放入很多音乐、视频、文档等文件。5．用户控制

在交互设计中，让用户来控制操作行为，应用程序可以对用户提供建议，并对可能造成严重后果的操作行为发出警告，但不应该替用户做决定，好的设计可以在用户行为和不想要的结果之间做出平衡，巧妙化解错误的发生。在通常情况下，用户会希望在某些操作时可以进行确认，并且可以随时停止或取消操作，这都是交互设计中需要考虑的问题。2.4交互设计的原则2.4.2尼尔森十大原则

尼尔森十大原则由人机交互学博士雅各布·尼尔森（JakobNielsen）于1995年1月1日发表，该原则用于评价用户体验的好坏，交互设计师也可以根据这十大原则来指导设计和对产品进行自查。本节将结合案例深入讲解尼尔森十大原则的具体内容，帮助同学们更好地理解并应用到设计之中。1．系统状态可见原则

系统状态可见指用户在界面上的任何操作，无论是单击、滚动还是按下键盘，页面都应该及时给出反馈，让用户清楚当前处于什么状态。

2.4交互设计的原则2.4.2尼尔森十大原则

例如，在App界面中点击爱心，图案会由白色线条变为显眼的红色图形，界面下方也会有已收藏的提示字样，及时给予用户收藏成功的反馈；在App界面中点赞，会出现鼓励的文案和很多表情包，在给予用户清楚反馈的同时又兼具趣味性。App界面的及时反馈2.4交互设计的原则2.4.2尼尔森十大原则2．环境贴切原则

使用用户熟悉的语言、文字、短语及概念，而非系统术语，遵循现实世界的惯例和思考逻辑，使界面信息尽可能地贴近现实世界，以便用户理解和使用。3．可控原则

用户要能对当前情况有很好的了解和掌控，能够自由地操作软件。例如，当App遇到卡顿时，双击home键可以退出，消息发送错误可以撤回，订单下错可以申请取消，软件中设置有重做和撤销功能等。相机和时钟图标

撤销、重做功能

2.4交互设计的原则2.4.2尼尔森十大原则4．一致性原则

对于用户来说，相同的语言、按钮、操作行为应该触发相同的事件，所以在设计时要遵循平台惯例，从结构、色彩、操作、反馈、文字等方面保持一致。5．防错原则

比出现错误提示更好的设计是避免错误发生，设计师可以通过对产品界面的设计、重组与安排来防止用户产生混淆，导致错误操作的发生，或者将错误发生的可能性降到最低。

去哪儿旅行App中，用户在购票选择日期时，已过去的日期会变为灰色，不可被选中，这有效防止了用户因误操作导致选错日期而产生负面情绪。

2.4交互设计的原则2.4.2尼尔森十大原则6．易取原则

尽可能减少用户的记忆负担，将动作、选项和页面信息设计为可视化，应用程序的使用指南也应该是可见的，并且可以随时调用。7．灵活高效原则

中级用户的数量远高于初级和高级用户，在设计时要考虑大多数用户的需求，但也不能低估和轻视少数用户的需求，保持应用设计的灵活高效性，尽可能满足所有用户的需求。

微信表情包中的“最近使用”模块，将用户经常使用的表情包放到界面上方，大大缩短了用户寻找表情包的时间，体现出了交互设计的灵活高效性。2.4交互设计的原则2.4.2尼尔森十大原则8．易扫原则

易扫原则是指在界面设计中突出重点信息，弱化次要信息，让信息结构一目了然，使用户可以快速准确地获取重要信息。支付宝理财界面在这方面就做得很好。9．容错原则

容错原则是指能够帮助用户从错误状态中恢复，将损失降到最低，当无法恢复时，要提供详细说明和解决建议，只给一个简单的错误代码是不可取的。QQ在这方面就做得很好。10．人性化帮助原则

对于应用程序来说，不使用帮助文档是最好的，但也应该在用户需要时提供必要的帮助。QQ错误提醒界面支付宝理财界面

2.4交互设计的原则2.4.3交互设计七大定律1．费茨定律（1954年由保罗·费茨首先提出）

费茨定律在设计中的应用如下。（1）按钮等可点击对象需要有合适的大小，在合理的范围之内越大越容易点击；反之，越小则越不容易操作。（2）为减少移动距离，可以将常用操作元素放在界面的易操作区域；减少相对距离，缩短需连续操作可交互元素之间的距离，可以提高用户使用效率；将操作元素放到界面顶端的难以触及区域，可以防止误操作。（3）屏幕的边和角很适合放置菜单栏和按钮等元素，因为不管移动了多远，鼠标最终都会停在屏幕边缘，并定位到菜单或按钮上面。2.4交互设计的原则2.4.3交互设计七大定律2．希克定律

希克定律指的是，一个人面临的选择越多，需要做出决定的时间就越长，应用于UI交互设计领域就是指界面中选项越多，用户做出选择的时间越长。因此，在UI交互设计中要给用户尽量少的选择，减轻用户的决策成本。3．7±2法则

7±2法则由心理学家乔治米勒于1956年提出，他经过研究发现，人类大脑的最好记忆状态为5～9个信息块，这个发现被广泛应用于UI交互设计中的导航栏中。

2.4交互设计的原则2.4.3交互设计七大定律

7±2法则在UI交互设计中的应用如下。

（1）在UI交互设计中，相同元素尽量不超过9个，以减少客户选择。

移动端应用程序中，导航栏的选项一般在5个左右。

PC端由于界面尺寸较大，导航栏的选项数量相比移动端要多，但也不会超过9个。移动端支付宝和QQ界面的导航栏3．7±2法则2.4交互设计的原则2.4.3交互设计七大定律PC端苹果官网和

UI中国官网的顶部导航栏2.4交互设计的原则2.4.3交互设计七大定律

（2）当选择内容过多时，可以用层级结构展示。

UI中国官网的导航栏设计成了抽屉式，将选项归类后进行隐藏，淘宝的商品分类选项卡，将内容分为多个层级来归类并展示商品。