作者:皓量科技 · 2021-02-19
本文为AdBright知乎账号发表的“《移动端设计规范及适配规则》”原创文章,内容来自AdBright广告技术团队成员,后续也将持续不定期分享。
由于内容过长,将分为两篇文章,此篇主要介绍为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.选择器
选择器:单选、多选、地点选择、日期时间选择等。
*以上内容仅供参考,欢迎与AdBright交流,合作共赢
作者:AdBright
本文经授权发布,不代表APP干货铺子立场。如若转载请联系原作者。
原文链接如下:https://mp.weixin.qq.com/s/NPUL6UNKTmwyKAp6KFCtbA
标签:
联系微信:18938040424
微 信 公 众 号
Copyright © 2015- APP干货铺子 版权所有 京ICP备20017819号
您的报名信息已提交!
请等待工作人员的进一步通知
皓量科技 · 2021-02-19
本文为AdBright知乎账号发表的“《移动端设计规范及适配规则》”原创文章,内容来自AdBright广告技术团队成员,后续也将持续不定期分享。
由于内容过长,将分为两篇文章,此篇主要介绍为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.选择器
选择器:单选、多选、地点选择、日期时间选择等。
*以上内容仅供参考,欢迎与AdBright交流,合作共赢
作者:AdBright
本文经授权发布,不代表APP干货铺子立场。如若转载请联系原作者。
原文链接如下:https://mp.weixin.qq.com/s/NPUL6UNKTmwyKAp6KFCtbA
标签:
联系微信:18938040424
您的报名信息已提交!请等待工作人员的进一步通知
您的报名信息已提交!
请等待工作人员的进一步通知