移动端设计规范及适配规则-基础篇

时间：2023-09-24 16:42:02 | 来源：网站运营

时间：2023-09-24 16:42:02 来源：网站运营

移动端设计规范及适配规则-基础篇：

一、APP构成及基础规范

1.冷启动页

开启APP时的启动页面，一般由logo、slogan、版本号、产品名、公司名、Copyright等信息简单组合而成，出现时长一般在3s内；

应用的启动方式分为两种：冷启动和热启动；

冷启动：当启动应用时，后台没有该应用进程；

热启动：当启动应用时，后台已有该进程。

2.引导页

一般为产品的功能性引导，使用户能快速了解产品特性；页面数通常为1-5个(3个最为常见)；内容由主题、图/文简介、页面指示器、跳过按钮等构成；

常用使用场景：新用户激活、老用户回归、大版本功能更新等

设计注意事项：文字信息不宜过多，主题内容要突出，图片要符合品牌调性，页数不宜太多。

3.登录注册

一般APP都会有自己的用户体系，少部分第三方、功能简单的APP没有，如系统工具中的计算器、闹钟、天气等

第一种：第三方账号登录，用户不需要输入信息直接第三方账号登录即可，流程简化，提高留存率；

第二种：邮箱注册，一般这种是最开始注册时基于网页版的；

第三种：手机号注册，一般会结合密码或是动态验证码。

以上三种方式一般会组合使用。

4.内容页

状态栏 StatusBar ：用来呈现信号、时间、电量等信息，位于APP界面顶部，可以改变底色与APP统一；

导航栏 NavBar ：导航作用，位于状态栏下方，一般显示导航内容、页面标题，也可以放搜索控件等；

标签栏 TabBar ：让用户在不同的页面进行切换，位于APP底部，一般放3-5个内容，图标加文字形式；

工具栏 ToolBar ：常用于针对当前页面的操作展示，位于在APP底部，图文形式根据使用场景而定，一般用于二级页面；

搜索栏 SearchBar ：用于搜索，宽高可自定义，可位于导航中也可位于导航下方。

5.内容形式

列表形式：每条列表信息可以是单独的图片或文本，也可以是图文混合，多数会用分割线区分；

卡片形式：将同类内容归纳到一个个矩形或圆角矩形中的一种展示形式；

集合视图：将同类信息用平铺的形式展示，一般图片为主，文字为辅；

图片形式：纯图片展示；

文字形式：纯文字展示；

6.列表

列表式布局在APP中非常常见，其特点在于能够在较小的屏幕中展示多条信息，用户通过上下滑动的方式获得更多信息。

列表舒适体验的最小高度是80px，高度需要根据内容多少而定。

列表布局示例如下：

微博消息列表126px、微信消息列表136px、QQ消息列表132px、网易云音乐列表110px、微信个人中心列表88px。

7.卡片

卡片是含有图片和文字在内的小矩形模块，它是用户了解更多细节信息的入口。

便于清晰展示同类型的内容信息，如信息流等；

在同一页面布局中，卡片宽度应保持不变，但高度可以相应调整，卡片的最大高度根据平台可用空间高度而定。一般移动端的卡片或按钮等至少会有2px的圆角，无圆角会很尖锐，感受不好。

卡片中的横构图，常采用16:9、4:3，也会有2:1、3:2等比例的使用。

8.缺省页

缺省页是指操作异常状态下给予用户反馈的提示页面，或无数据、操作失败等情况下出现的空页面，因此也称为空页；

常用场景：首次操作、积极触发、被迫中断；

一般结构是为空提示图标、为空原因、操作指引/功能入口三大部分；

9.loading

标题栏loading：如微信、钉钉等，不影响用户查看保存在本地的数据，加载成功后状态消失，失败则提示未连接等；

白屏loading：当页面内容比较单一，需要一次性加载完成才显示，则采用这种白屏加载样式；

进度条：进度条的加载样式，多见于浏览器，包括PC端和移动端的浏览器；此种加载方式用户在完全加载完成之前是看不到任何内容的，所以一旦超过时间太久一定要提示用户什么原因加载失败，而不是一直停留在加载状态。同时将加载图标做得更有趣些，也会减轻用户等待时的焦虑；

Toast：当用户执行了某个操作时，为了防止用户继续操作导致数据加载失败或错误，则采用此形式，限制用户操作；

下拉刷新：此方式被广泛运用，且越来越多APP使用自定义的加载动画，增强交互趣味性，同时用户可通过下拉手势操作来自己选择重新加载数据，给了用户一定选择内容的自由；

预设图或占位符：当页面的框架固定时，只需要加载框架内数据时，采用这种刷新样式，即先加载框架，再加载框架内的数据。为了防止框架内的内容为空，会用占位符或者预设图片来填充。

10.提示

常见的移动端提示类型：弹框/Alerts（警告类、出错类、选择类、告知类）、Toast等。

弹框：屏幕中弹出的框，常伴随有黑色/白色透明蒙层，一般分为警告类、出错类、选择类、告知类；非全局性操作应尽量避免使用此种交互方式，页面变化较大，且取消后不易定位到原焦点，反应距离长，视线移动距离长，经常有弹框弹出是很不好的体验；

Toast：多用来进行操作反馈提示，如“处理中、提交中、加载中…”、“操作成功、网络不佳”等场景，样式一般是黑色/灰色透明态，默认位置有上中下可选，可自定义样式及展示位置；

11.模态视图

在iOS中，苹果使用“模态视图”来指那些在当前页插入的“浮层页面”。一般来说，模态视图包括一个“完成”按钮和“取消”按钮，但也不是100%一定。

模态视图的主要用途：收集用户输入信息、临时呈现一些内容、临时改变工作模式、相应设备方向变化、显示一个新的视图层级。

12.输入框

输入框的内容分类：数字、英文字符、中文；

交互较为友好的界面点击输入框填写内容时，呼出的键盘会匹配当前输入框类型，如数字填写(手机号、QQ号等)时呼出数字键盘，邮箱填写时呼出英文键盘，中文填写时呼出中文键盘等。

13.按钮

移动端按钮按比重分为三类：重要、一般、较弱。

按钮状态分为：正常态Normal、按压态Pressed/Highlighted、不可点击态(禁用态)Disabled；

WEUI对按钮的分类规范如下示例：主按钮的按压态是在原色基础上增加10%的黑色/白色。

14.图标

图标大致可以分为功能性图标、非功能性图标；

功能性图标点击后会根据交互状态有视觉变化，非功能性图标不可点击。

图标设计时需与品牌调性相符合，同类图标的大小、色系、线条粗细、视觉比例等都要保持一致；目前常用的风格就是线性图标和非线形图标(扁平类等)。

一般图标的尺寸会根据使用位置的不同而有不同的大小规范，保证页面整体性的同时，需与所搭配文字的比例保持协调性。

15.选择器

选择器：单选、多选、地点选择、日期时间选择等。

二、移动端适配基础概念

1.概念

px：pixel，像素，是图像的基本采样单位，电子屏幕上组成一个图像的最基本单元，px是ppi的单位；

pt：point，点，是一个标准的长度单位，常用于印刷业，等于1/72英寸，iOS开发单位；

dp：density-independent pixel，安卓开发长度单位，独立密度像素，与dpi无关，1dp表示在屏幕像素密度为160ppi时1px的长度；

sp：scale-independent pixel，安卓开发字体大小单位；

ppi：pixel per inch，像素密度，图像采样率（在图像中，每英寸所包含的像素数），一般网页的像素密度就是72px，ppi的数值越高，画面会越细腻；

dpi：dots per inch，打印分辨率（每英寸所能打印的点数，即打印精度），每英寸多少点，dpi数值越高，图片越细腻。

ppi和dpi经常都会出现混用现象。它们是用来描述屏幕的属性，或者说是性能。但从技术角度说，“像素”（P）只存在于计算机显示领域，而“点”（d）只出现于打印或印刷领域。

2.换算

①pt与px

公式一：1pt= (DPI / 72) px

当ps新建画布分辨率为72ppi时（即72dpi时），1pt=1px；当新建画布分辨率为72*2=144ppi时，1pt=2px；

②ppi与dpi

dpi最初用于衡量打印物上每英寸的点数密度。DPI值越小图片越不精细。当DPI的概念用在计算机屏幕上时，就应称之为ppi。同理： PPI就是计算机屏幕上每英寸可以显示的像素点的数量。因此，在电子屏幕显示中提到的ppi和dpi可认为是一样的。

公式二：dpi=ppi

③ppi计算方法

公式三：ppi=屏幕对角线上的像素点数/对角线长度= √ （屏幕横向像素点^2 + 屏幕纵向像素点^2）/对角线长度

以小米2s为例，该屏幕分辨率为720px*1280px，4.3英寸。则点密度为 √ (720^2 +1280^2) /4.3 = 342ppi。

④px与dp

dp为安卓开发时的长度单位，根据不同的屏幕分辨率，与px有不同的对应关系。安卓端屏幕大小各不相同，根据其像素密度，分为以下几种规格：

1dp定义为屏幕密度值为160ppi时的1px，即，在mdpi时，1dp = 1px。 以mdpi为标准，这些屏幕的密度值比为：ldpi : mdpi : hdpi : xhdpi : xxhdpi : xxxhdpi = 0.75 : 1 : 1.5 : 2 : 3 : 4；即，在xhdpi的密度下，1dp=2px；在hdpi情况下，1dp=1.5px，其他类推。

公式四： 1dp=（屏幕ppi/ 160）px

iOS系统的适配需要先了解几个概念：

物理分辨率：硬件能支持的分辨率；逻辑分辨率：软件能达到的分辨率。

物理分辨率=逻辑分辨率X像素倍率

iOS系统根据其设备像素密度，分为以下几种规格：




由AdBright首席UI设计师整理。