《交互设计》课件-10 交互设计规范

交互设计项目二

·UI交互设计规范iOS系统设计规范Android系统设计规范01iOS系统设计规范

像素(px)

是构成图像的最小单位，可以将其看作一个小方格，无数个不同颜色的小方格就构成了画面。像素并没有固定的物理尺寸，其尺寸由载体决定。

1.1有关iOS系统的基本概念

iOS系统（IOSsystem)

iOS系统是由苹果公司开发的移动操作系统，最初应用于iPhone，后陆续套用到iPad、iPodtouch。操作界面美观简洁设备反应迅速操作流畅安全性强1.1有关iOS系统的基本概念

UI屏幕尺寸逻辑分辨率物理分辨率倍率PPI像素iOS系统基本概念屏幕尺寸（screensize)

一般指屏幕的对角线长度，单位为英寸（in），1in=2.54cm。

1.1有关iOS系统的基本概念

物理分辨率（physicalresolution)

是指屏幕的最佳分辨率，是屏幕固有的参数，不能调节，其表示方法为设备屏幕在水平和垂直方向上所拥有的像素相乘的数学表达式。1.1有关iOS系统的基本概念

PPI（pixelsperinch)

英文全称pixelsperinch，是像素密度的简称，也是像素的密度单位；是连接数字世界与物理世界的桥梁，表示每英寸屏幕中排列的像素点数量。像素密度越高，屏幕显示效果越清晰，细节越丰富，如下图所示。1.1有关iOS系统的基本概念

1英寸，4px×4px

1英寸，8px×8px像素密度不同的两张图片逻辑分辨率（Logicalresolution)

是为使同样尺寸的图像在不同物理分辨率的设备上都能正常显示而发明的参数，其单位为pt。在物理分辨率不同的设备中，只要设备的逻辑分辨率相同，它们的显示效果就是相同的。1.1有关iOS系统的基本概念

倍率

（Magnification)

通俗一点讲就是指物理分辨率和逻辑分辨率之间的比例关系。如切图名称的后缀@2x、@3x就是指倍率的数值。1.1有关iOS系统的基本概念

1.2iOS系统UI设计规范。首先，界面设计规范中包含常用设备尺寸和界面元素尺寸规范两个方面。例如，用Photoshop做设计稿或AfterEffects做UI交互动效，一般会选择750px×1334px或1125px×2436px，也可以选择1170px×2532px。ios系统设备尺寸规范1.2iOS系统UI设计规范界面元素尺寸规范1.2iOS系统UI设计规范状态栏：手机界面最上方，手机本身的显示，UI设计师无须改变。导航栏：状态栏的下方，在@1x倍率图中，高度为44px；在@2x倍率图中，高度为88px；在@3x倍率图中，高度为132px。标签栏：手机界面底部，在@1x倍率图中，高度为49px；在@2x倍率图中，高度为98px；在@3x倍率图中，高度为147px1.2iOS系统UI设计规范布局规范1）全局边距主页指示器:iPhone8Plus、7Plus、6Plus、6sPlus之后的型号与以往相比，由界面底部的主页指示器（灰色横杠）代替了以往的home键，因此在设计时也需要预留出主页指示器的位置。@2x倍率图中需预留高约68px,@3x倍率图中需预留100px～120px高的位置安全边距：为了保证页面内容的安全距离，且能更好的引导用户阅读，统一边距可以使产品设计更有一致性

，@2x倍率图中需预留高约20、24、30、40px

主页指示器

安全边距1.2iOS系统UI设计规范布局规范

2）卡片间距间距一般指卡片之间的距离。卡片式布局是移动端界面的常见布局方式，卡片间距的大小由界面风格和卡片承载信息的多少决定，并没有固定的数值。常见间距有20px、24px、30px、40px等，通常不低于16px.过小的间距会使用户浏览时产生紧张情绪过大的间距又会使界面变得松散。

界面中的卡片间距设置1.2iOS系统UI设计规范字体规范

字体大小（2倍图展示）

颜色层级

字体样式ios默认字体：中文PingFang，英文SanFrancisco

1.2iOS系统UI设计规范图标规范iOS系统中不同功能图标的尺寸规范1.2iOS系统UI设计规范按钮规范

1）按钮状态

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

2）按钮样式

iOS操作系统中的按钮主要有以下三种样式：按钮设计按钮规范1.2iOS系统UI设计规范

3）按钮尺寸:按钮等控件的设计尺寸比较多样化，以@2倍率为例，一般常用44pt-48pt，但最小不低于40。按钮规范02Android系统设计规范

Android系统（Androidsystem)

与iOS操作系统不同的是，Android系统是一个开放式系统，它允许任何移动终端厂商的加入，这也导致了设备的多样化与不统一性。针对Android系统的UI设计，也会涉及一些基本概念和常用单位，其中像素、屏幕尺寸、倍率等与iOS系统相同。除此之外，还有以下Android系统专用的概念与单位。2.1有关Android系统的基本概念

SPDPDPIAndroid系统基本概念DPI（dotsperinch)

最初用来衡量打印机的打印精度，指打印物上每英寸的点数密度，一般来说DPI数值越大，打印机的打印精度越高，图片越精细。当用于计算机屏幕时，DPI的本质与PPI相同。2.1有关Android系统的基本概念

DP（deviceindependentpixels)

全称deviceindependentpixels，意为密度独立像素，是Android系统专用的长度单位，与iOS系统中的pt相同。2.1有关Android系统的基本概念

SP（scaledpixels)

是Android系统中用于设置字体大小的单位。它考虑了用户的字体缩放设置，确保在不同屏幕密度和用户自定义字体大小设置下，字体显示的一致性和可读性。使用sp单位可以让开发者创建更加适应不同屏幕和用户偏好的界面。2.1有关Android系统的基本概念

2.2Android系统UI设计规范

ios系统设备尺寸规范为便于对Android系统设备进行管理，降低设计难度，提升适配度，官方根据屏幕的像素密度不同，将屏幕由低到高大致分为ldpi、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi六类，不同密度屏幕对应的各项数值。2.2Android系统UI设计规范间距与界面元素尺寸规范

全局边距一般为16dp

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

Android系统的界面边距

Android系统界面元素尺寸布局规范2.2Android系统UI设计规范文字规范文字样式：

英文字体：Roboto中文字体：Noto思源黑体文字大小：字重：2.2Android系统UI设计规范

不同文字在UI界面中的位置。在具体应用时，设计师可以基于文字样式、产品属性有针对性地进行设置。案例练习：ios和Android系统界面尺寸测量

案例练习步骤2选择软件界面左侧工具栏中吸管工具组中的标尺工具，在要测量元素的一侧边界按住鼠标左键不放，并拖动鼠标至另一侧后释放，在拖动鼠标时可以按住快捷键“Shift”以保持其水平或垂直移动，此时起点和终点之间就会有一条线。步骤1

自行截取ios和Android设备旅游app首页，启动Photoshop；然后按快捷键“Ctrl+O”步骤3

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

标尺工具图

使用标尺工具进行测量

选择“窗口/测量记录”菜单项查看测量记录步骤4

用工具栏中的吸管工具在所要选取的颜色上单击，此时软件界面左侧的工具栏中会显示所选颜色，单击设置前景色工具会弹出“拾色器”对话框。“拾色器”对话框步骤5

用工具栏中的文字工具在画布中单击并拖动鼠标，拖出一个文字框，在其中输入文字，利用工具属性栏（如图所示）改变文字字号，来判断首页界面不同文