Webview容器

PC端

用于呈现webview页面。

  • Webview容器的默认(最小)尺寸是560*548px

PC端Webview窗口放大

  • Webview容器的宽高都可以拉伸

PC端Webview默认最小窗口

移动端

移动端Webview容器大小即屏幕大小。

页面标题(PC端,移动端)

PC端

用户依赖导航在各个页面中进行跳转,让用户知道自己在哪里、可以去哪里,可以回到哪里。

页面中如需设计导航栏,导航栏应显示在标题栏下方,并且在窗体的首屏中必须清晰显示;

用户可自定义导航的样式,如示例一,二;

导航栏高度,文字样式,如字体,大小,颜色等需参考示例;

示例一

示例二

如需设计【返回】,必须显示在导航栏的左侧,图标大小、颜色请参考示例三;

如标题栏需添加功能操作,必须显示在右侧,建议使用按钮形式,按钮大小、颜色请参考示例四。

示例三

示例四

移动端

用于说明本页内容,应与进入该页入口显示的文案保持一致。如应用为“考勤打卡”,则该页标题也同样为“考勤打卡”。

标题内容由开发者自定义,支持文本、数字、字母和符号 不能为空

标题样式,如最长长度,字体,大小,颜色由native控制,不可定制

ios端

android端

页面加载(PC端,移动端)

PC端

用于整个webview的页面加载。

加载中

整页面加载必须使用该样式

整页面加载方式和样式由native控制,不可定制

加载中

加载失败

客户端网络错误,native提供提示页面,如图

加载失败

移动端

用于整个webview的页面加载。

加载中进度条

整页面加载必须使用该样式

整页面加载方式和样式由native控制,不可定制

ios端

android端

加载失败的反馈

客户端网络错误,native提供提示页面,如图

ios端

android端

更多功能(移动端)

马上办为开发者提供了若干基础性的更多功能,可直接调用这些native控件。

ios端

android端

1.右上角“更多”

必须为“更多”字样,字体,大小,颜色等由native控制,不可定制

2.更多功能的items

可选择所需的item 有右上角入口时,必须至少有一item

item的功能,字体,图标等由native控制,不可定制

设置导航栏右侧单个按钮(移动端)

用于提供单个快捷操作入口。

右侧单个按钮(非“更多”按钮)

可自定义设置导航栏最右侧按钮的文字,并且接收点击事件;可以定义是否需要该入口 必须为汉字,且不能有空格和其他字符

文字样式,如最长长度(最长4个中文汉字),字体,大小,颜色,与标题间距等,由native控制,不可定制

ios端

android端

错误案例

img

img

设置导航栏右侧两个按钮(移动端)

用于提供两个快捷操作入口,只允许最多两个items

显示两个item(无“更多”功能按钮)

可自定义设置导航栏最右侧两个按钮的文字,并且接收点击事件 必须为汉字,且不能有空格和其他字符

文字样式,每个item最长长度(最长2个中文汉字),字体,大小,颜色,item间的间距,以及与标题间距等由native控制,不

ios端

android端

错误案例

img

img

img

img

显示两个item(有“更多”功能按钮)

有“更多”功能按钮时,应放在导航栏最右边,文案只能为“更多”,开发时应遵循此规范,其他规则同无“更多”功能按钮时

ios端

android端

错误案例

img

img

设置导航栏右侧按钮底色(移动端)

为凸显发起事件的按钮,马上办支持导航栏右侧按钮添加底色,建议关键按钮才使用该种方式,如“新建”,“下一步”,“发布”等。 需注意点击按下效果,请参考视觉规范

ios端

android端

ios端

android端

等待状态

PC端,移动端

用于与服务器连接中的等待状态显示,例如在提交数据时。

有文案样式

无文案样式

等待状态由webview自己提供,建议样式如图所示,特殊情况可自定义样式;

“正在加载中”文案可缺省;

不论何种样式,若等待超过30s后应取消等待状态,并给出“加载失败”的toast提示(toast提示可参考toast规则);

上拉加载

PC端

对已有列表进行上拉加载更多内容操作。

加载中

开发者需要上拉加载操作时,建议遵循图中规范(样式及字样)。

加载中

加载失败的web内反馈

加载失败时,应toast提示,应遵循图中样式和文案规范;

建议提示内容如toast中文案,特殊情况可自定义;

加载失败

移动端

对已有列表进行上拉加载更多内容操作。

加载中的状态

开发者需要上拉加载操作时,建议遵循图中规范(样式及字样)。

ios端

android端

加载失败的web内反馈

加载失败时,应toast提示,应遵循图中样式和文案规范;

建议提示内容如toast中文案,特殊情况可自定义;

ios端

android端

Alert(PC端,移动端)

PC端

用于强提醒场景,常用于禁止用户目前操作,如"不能发送空白信息"。

img

1.弹框

Alert弹框为程序全局的模态对话框

2.提示内容

提示内容不可缺省,提示内容自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

3.按钮

按钮内容建议为“知道了”,特殊情况可自定义按钮内容 开发者自定义按钮内容时,最多五个字

按钮内容不可缺省,文字样式,如字体,大小,颜色等由native控制,不可定制

移动端

用于强提醒场景,常用于禁止用户目前操作,如"不能发送空白信息"。

ios端

android端

1.Alert标题

标题可缺省(标题和内容必须有其一),标题内容自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

2.提示内容

提示内容可缺省(标题和内容必须有其一),提示内容自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

3.按钮

按钮内容建议为“知道了”,特殊情况可自定义按钮内容 开发者自定义按钮内容时,最多五个字;

按钮内容不可缺省,文字样式,如字体,大小,颜色等由native控制,不可定制

Confirm(PC端,移动端)

PC端

用于强提醒场景,提醒用户目前操作行为可能产生的后果,如"退出编辑后将不会保存当前内容"。

img

1.弹框

Confirm弹框为程序全局的模态对话框

2.提示内容

提示内容不可缺省,提示内容自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

3.按钮

按钮内容建议为“取消”和“确定”,特殊情况可自定义按钮内容 最多五个字;“取消”按钮应始终放在左侧;

按钮内容不可缺省,文字样式,如字体,大小,颜色等由native控制,不可定制

移动端

用于强提醒场景,提醒用户目前操作行为可能产生的后果,如"退出编辑后将不会保存当前内容"。

ios端

android端

1.Confifm标题

标题可缺省(标题和内容必须有其一),标题内容自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

2.提示内容

提示内容可缺省(标题和内容必须有其一),提示内容自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

3.按钮

按钮内容建议为“取消”和“确定”,特殊情况可自定义按钮内容 最多五个字;“取消”按钮应始终放在左侧;

按钮内容不可缺省,文字样式,如字体,大小,颜色等由native控制,不可定制

Toast(PC端,移动端)

PC端

用于弱提醒场景,反馈用户操作后的结果,如"已保存"。

提示内容

提示内容自定义 开发者自定义内容时,需言简意赅 ,最好不超过15字

提示内容不可缺省,文字样式,如字体,大小,颜色等由native控制,不可定制

Toast需在2s内消失

img

移动端

用于弱提醒场景,反馈用户操作后的结果,如"已保存"。

提示内容

提示内容自定义 开发者自定义内容时,需言简意赅 ,最好不超过15字

提示内容不可缺省,文字样式,如字体,大小,颜色等由native控制,不可定制

Toast需在2s内消失

ios端

android端

Actionsheet(移动端)

移动端

用于多种选择操作场景,如“从相册上传”和“拍照”。

ios端

android端

1.Actionsheet标题

标题可缺省,缺省时不显示该条目,标题内容自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

2.选择项

选择项内容自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

3.按钮

按钮内容必须为“取消”,文字样式,如字体,大小,颜色等由native控制,不可定制

4.其他

ActionSheet选择项最多不应多于六项

Session Key(PC端,移动端)

移动端

当session key 失效时,出现图中所示的alert提示。

Session key 失效提示弹窗

弹框样式,提示文案和按钮文案应和图中保持一致

文字样式,如字体,大小,颜色等由native控制,不可定制

点击“知道了”,应关闭当前页面

ios端

android端

选择器控件(移动端)选择器控件

移动端

用于提供选择,选择项往往相似,如性别,地区等。 注:该选择器可能受系统版本影响,具体样式视情况而定。

iOS选择项

选择项内容,数目支持自定义

ios端

AOS选择项

选择器控件标题可缺省,缺省时不显示标题栏,标题内容自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

选择项内容,数目支持自定义

android端

时间选择器(移动端)时间选择器

移动端

提供三种选择器,一种为日期(年/月/日),一种为具体时间(小时/分钟),一种为日期和时间组合(年/月/日/小时/分钟) 注:该选择器可能受系统版本影响,具体样式视情况而定。

日期选择器——选择项

选择项支持:年,月,日

支持:可以设置默认显示日期,不设置默认为当前日期

ios端

android端

具体时间选择器——选择项

选择项支持:24小时制、分钟

可以设置默认显示日期,不设置默认为当前日期

ios端

android端

日期和时间组合选择器——选择项

选择项支持:年,月,日+24小时制、分钟

可以设置默认显示日期和时间,不设置默认为当前日期和时间

ios端

android端

自定义时间选择器

考虑到webview需兼容ios和安卓两平台,若如上的马上办native时间选择器不适用, 开发者可自定义选择器

人员选择器(PC端,移动端)人员选择器

说明:马上办的人员选择器,会根据企业是否使用或开关企业通讯录而发生相应变化,交互和开发人员需验证不同场景下的人员选择器是否都已满足功能需求。

场景一:企业没有使用或者关闭了企业通讯录

PC端

单人选择器

多人选择器

1.标题

标题内容可自定义

文字样式,如字体,大小,颜色等由native控制,不可定制

2.按钮

按钮内容可自定义 最多五个字;

按钮内容不可缺省,文字样式,如字体,大小,颜色等由native控制,不可定制

3.多人选择器上限

多人选择器可自定义选择人数的最大上限, 如最多选择8个人,若所选超过上限,客户端则提醒“已达人数上限(8人)”

移动端

ios端(单人选择)

android端(单人选择)

ios端(多人选择)

android端(多人选择)

1.多人选择器人员上限

多人选择器可自定义选择人数的最大上限, 如最多选择8个人,若所选超过上限,客户端则提醒“已达人数上限(8人)”

场景二 :企业使用或者开启了企业通讯录

PC端

单人选择器

多人选择器

1.标题

标题内容可自定义

2.按钮

按钮内容可自定义 最多五个字;

按钮内容不可缺省,文字样式,如字体,大小,颜色等由native控制,不可定制

3.多人选择器上限

多人选择器可自定义选择人数的最大上限, 如最多选择8个人,若所选超过上限,客户端则提醒“已达人数上限(8人)”

移动端

ios端(单人选择)

android端(单人选择)

ios端(多人选择)

android端(多人选择)

1.多人选择器人员上限

多人选择器可自定义选择人数的最大上限, 如最多选择8个人,若所选超过上限,客户端则提醒“已达人数上限(8人)”

手势返回(移动端)手势返回

iOS端

马上办提供禁用手势右滑返回的接口。

手势返回操作

开发者可选择禁用或不禁用手势返回,默认为不禁用

ios端

用户名片(PC端,移动端)用户名片

PC端

用于查看个人名片场景,如点击应用内的头像或姓名,打开用户名片。

用户名片

用户名片为模态窗口

其他

其余无定制条件

PC端

移动端

用于查看个人名片场景,如点击应用内的头像或姓名,打开用户名片。

用户名片

我定制条件

ios端

android端

图片选择器(移动端)图片选择器

移动端

用于选择图片。

图片选择器

支持选择单张或多张图片,支持上限控制,最大上限为9张图片

其余无定制条件

ios端

android端

图片浏览器(PC端,移动端)图片浏览器

PC端

用于图片浏览。

图片浏览器窗口

图片浏览器是非模态窗口

其他

其余无定制条件

PC端

移动端

用于图片浏览。

ios端

android端

1.浏览

支持左右滑动查看当前图片集中所有的图片

2.更多

支持其中一项或者两项操作 无任何一项需屏蔽更多入口

其余无定制条件

ios端

android端

视觉规范PC端

PC端视觉规范-用色

文字用色

背景色

此颜色为Webview容器背景,聊天气泡背景灯等出现大面积分割背景色值

分割线用色

最深色分隔线用于整体框架分割,次深色分隔线用于界面内主要分隔线,浅色分隔线用于辅助

按钮用色

该按钮用于主要界面功能按钮

icon用色

按钮用色

适用于各种列表及菜单

PC端视觉规范-字号

PC端视觉规范-按钮

PC端视觉规范-控件

输入框

输入框圆角为2px,高度不小于28px

CheckBox

PC端视觉规范-菜单

菜单

包含邮件菜单,点击icon出现菜单等。菜单宽度不做限制,建议最小宽度为80px,菜单每一项高度为36px

下拉菜单

输入框下拉菜单,菜单宽度与输入框一致。菜单每一项高度为30px

PC端视觉规范-弹框

Alert

弹框最小尺寸为372*167px,高度可根据提示内容的多少放大

Confirm

弹框最小尺寸为372*167px,高度可根据提示内容的多少放大

Toast

Toast最小尺寸为13040px,最大尺寸为32640px,宽高可根据提示内容的多少调整

PC端视觉规范-应用icon

icon尺寸、圆角大小

36px * 36px 圆角4px (PC)

icon内图形范围

icon以84x84为基准,里面图形范围在50x50之内,大约占整体60%左右

icon颜色

现定制icon颜色为三种

视觉规范移动端

移动端视觉规范-用色

整体用色

一般用于3个tab首页顶部色块,聊天气泡,绿色文字(当文字为disable状态则透明度50%)

辅助用色

一般用于联系人名片背景色,联系人选择器底部bar,点对点、群聊详情页背景色

按钮用色

一般底部按钮三种状态颜色都以上述为基准

线条色

页面中涉及到线条色值都为##dddddd

背景色

除点对点聊天背景为##f0f0f0,其余背景、色块分割##f5f5f5

文字用色

移动端视觉规范-字体&字号

iOS端

Android端

移动端视觉规范-按钮

iOS登录按钮

Aos登录按钮

iOS常规按钮

Aos常规按钮

移动端(ios,aos)视觉规范-遮罩

移动端视觉规范-应用icon

icon尺寸、圆角大小

54px * 54px 圆角6px (ios)

84px * 84px 圆角6px (aos)

因服务器上传icon,所以只切图1张以安卓最大尺寸84x84,并且是直角(如右上图给出,native自定圆角)。视觉仍按照

icon内图形范围

54px * icon以84x84为基准,里面图形范围在50x50之内,大约占整体60%左右

icon颜色

现定制icon颜色为三种

results matching ""

    No results matching ""