APICloud移动端原型规范

.移动端原型规范目录第一部分界面规范第二部分交互规范第三部分数据示意第四部分标注规范1界面规范1.1原型工具1.2机型尺寸

1.3基础控件规范

1.4文字规范1.5原型色彩1.1原型工具移动端原型设计统一使用Mockplus1.2机型尺寸机型尺寸5/5s/5c320*5686/6s/7375*6676p/6sp/7p414*736Android360*6401.3.1布局控件状态栏(statusbar)：就是电量条，其高度为：40px；导航栏(navigation)：就是顶部条，其高度为：88px；主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；内容区域(content)：就是屏幕中间的区域，其高度为1334px-40px-88px-98px=1108px以下尺寸以iPhone6(375*667)作为参照1.3.2标签栏以下尺寸以iPhone6(375*667)作为参照标签栏高度：98pxicon尺寸：宽24高24

字号：12颜色：选中状态#000000未选中#9999991.3.3搜索框提示文字居中显示

字体颜色：#BABABAIcon尺寸：14*14颜色同字体搜索框高度：44搜索框宽度：根据选择的机型而定，距左右间距为9提示文字左对齐显示

字体颜色：#BABABAIcon尺寸：14*14颜色同字体搜索框高度：28搜索框宽度：根据选择的机型而定，距左右间距为91.3.4分段字体颜色：选中状态下与主色调一致，未选中状态为:#AEAEAE高度：44宽度：整屏宽，分段大于等于5个时建议增加侧滑1.3.5元素之间的常用距离亲密距离：20px；疏远距离：30px亲密距离：比如，左边图标与右边文字之间的距离。疏远距离：比如，所有元素距离手机屏幕最左边的距离。1.4文字规范文字黑色#282828文字深灰色#656565文字浅灰色#989898常用字体颜色常用字号标题文字18号导航按钮文字16号列表文字/分割线文字15号列表描述文字12号1.4原型色彩制作原型时尽量采用灰、白、黑三种颜色，这样看起来比较舒服同时也不会扰乱UI的思路。2交互规范2.1页面层级2.2页面跳转

2.3弹窗

2.4筛选框2.5抽屉

2.1

页面层级Mockplus为我们提供了以树状图的形式来呈现页面的层级关系的功能，所以在原型制作过程中请将页面层级的关系正确表达，以便客户和研发能快速理解页面的层级关系，提高评审和开发效率。需要注意的是，在原型中难免会遇到页面复用的情况，如果我们在当前页面中需要跳转到其他页面的二级或三级页面，请将复用的页面复制到跳转页面的下一级并备注复用，这样做可以保证树状图的层级关系清晰，也能让研发更准确的评估工作量。2.2

页面跳转跳转至下级页面时返回上级页面时2.2

页面跳转一级页面间跳转在当前页面进行设置时（返回时向下滑入）2.3.1系统弹窗Mockplus提供了弹窗控件，通过简单的设置即可完成弹窗效果。2.3.2自定义弹窗如果系统弹窗满足不了业务的需求，

可以用弹出面板制作自定义弹窗，

需要注意的是，为保证原型效果，请在编辑时添加“遮盖”控件并置于底层动画效果也依据弹窗样式设置。交互样式2.4筛选框动画效果：淡入Mockplus中的弹出面板设置动画效果为弹出-下时，筛选条件只能从页面顶部弹出2.5

抽屉滑动方向：左侧滑出、右侧滑出

状态：点击按钮，提交的时候判断前置条件是否满足，比如显示toast"请补充必填项"正在提交，无提示提交成功，后台静默更新数据，返回本地解析并渲染提交失败，失败原因使用toast"网络不稳定，请稍后重试！"，如需强调PD会单独设计。注意：必填字段应标注说明，统一在前面标注“*”或者"必填"，选填无需特别标注。提交按钮默认禁用状态，当所有必填项填写之后，此按钮才恢复正常状态。说明需传达清楚：1.是否做限制2.如果限制，多少字出现截断3.截断后是显示为省略号还是不显示。系统按钮执行App中定义的行为：①初始状态下不含边界，也不含背景图②可以是图标或者文字标题③支持自定义样式，如描边或者加背景图注意：按钮的几种状态：正常状态、选中状态、禁用状态，每种状态所对应的按钮样式2.6按钮Button2.6加载定义：多数出现在列表页内，用于加载下一页；样式：使用分页，每页10条，默认展示第一页。交互：第一页下方提示文字"正在加载更多"，点击加载，展示第二页，以此类推。列表全部加载完毕后，文字显示"已经到底啦"注意：有些列表不需要分页显示，应该直接显示全部。需要提前说明。2.6时间选择器定义：展示关于日期和时间①最多可以展示四个独立的滑轮，每一个滑轮列表标识一个不同的值②日期选择器的大小与与iPhone键盘的大小相同，并且不可变更③包括四种模式，每种模式包含一组不同的值作用：比如定义时间选择器：日期、小时、分钟比如定义时间选择器：小时、分钟、上午/下午比如定义日期选择器：年、月、日比如定义倒计时选择器：小时、分钟、秒注意：①选择器是日期时间选择器的通用模式。②不可以自定义大小，跟iPhone键盘相同。③当你需要展示的备选数量很多时，可以考虑使用表格视图。3数据示意3.1数据示意数据示意是指在展示数据时需要在列表第一行示意

每项数据的字段名，用户在首次使用时能清晰的知道每项数据代表什么。、示意的格式要和数据项格式相对应，不能出现顺序错乱，影响理解。4标注规范4.1控件的标注对控件进行标注，在“属性”－“描述”－“备注”中进行标注内容填写，如果备注为多条要换行。4.2多状态思考①无网时：每个APP都会遇到无网的状态，要解释清楚在APP中各个阶段无网时的表现情况例如在注册时是不可注册的、在登录时是不能登录的（并要给出相应的应答方案，例如弱提示的文案和占位图）②网络不佳时：网络不佳不完全等同与无网状态，不佳的状态内容会有较长的加载延时、或者加载失败，此时要考虑是否需要占位图、是否需要重新加载的button。③失败时：出于种种原因会导致操作失败，例如订单的支付。当有这种情况出现的时候要考虑失败后的应答方案。4.3判断条件思考产品中都会存在需要判断条件才能决定是否执行的功能点，而判断的条件也会有多少之分。随之而来的是会有多种不同的结果，我们要在标注中标明每一种判断会出现什么样的结果，针对这个结果要执行的是什么样的操作。例如在注册时，当我们点击获取邀请码的按钮时要优先判断手机号格式是否正确如果正确再次判断手机号是否注册过，要相应执行的操作是如果手机号格式不正确给出弱提示“请输入正确手机号”，如果手机号格式正确但是已经注册过了要给出弱提示“该手机号已注册，请直接登录”，如果手机号格式正确且手机号未注册过则发送验证码成功。如何提升效率提升APP开发效率：积木式API开发实现技术复用像微信小程序一样的“翻译式原理”网页技术转原生APP从0开发全新APP或改造既有APP加速迭代结语1.弄清楚用户想要什么？解决用户需求2.优先级划分用户使用情景/功能模块/功能点/信息架构/交互/视觉3.一致性信息架构/交互逻辑/元素/文案/视觉4.标准化与主流一致，减少用户学习成本聚合了国内主流PaaS和SaaS的API

提供500+成熟API模块

减少70%编码1+1

模

式减少70%编码工作量

大幅提升开发效率把中国互联网云服务带入企业大数据引擎

结合业务系统让数据“动”起来…APICloud数据平台可以记录一个APP从开发到运营各个时间段的行为协助企业直观决策邀请协作2天第一次编译3天Demo版16天

第一个用户43天全国覆盖150天强大的技术产品能力是发展的根基用SaaS方式提供的云端开发和管理平台截图性价比高：技术复用

几乎节省了80%以上的不同手机适配的问题签单需求梳理产品原型项目管理开发编码接口联调验收测试透明可靠：项目全程监管平台，标准化管理开发流程，实现了全程透明化初步测试APICloud负责第三方团队负责共同负责APICloudtoIoT–LinkallChipsmanufacturersDeviceAPICloudAPIAPICloudplaysanimportant‘MISSINGROLE’inIoTindustrychain.IoTAPPdevelopmentplatform.APICloudhasawiderangeofcooperationwithwifimodulevendorsandBluetoothvendorssuchasMIXCHIPAPICloudconnectsmanypartswithAPIstomakeIoTinnovationgettingeasierandeasierAPICloudisanapplicationlayer