6合采 六合拳开奖结果 六合同彩开奖结果 香港6和彩,香港六和彩开奖,六盒彩开奖,香港开奖现场直播

最近更新

推荐

交互设计规范分享:页面信息展示、信息交互和通用组件规范

2018-06-04 13:04

  本规范按web交互属性分三个部分:页面信息规范、信息交互规范、通用组件规范。

  前些时间正准备写交互规范,就去网上搜罗了一下交互规范的一些范本,想作为借鉴参考,但却没能找到比较满意的,找到了一些零散的内容(当然有些还是有参考价值的),所以就觉得交互规范这方面的内容比较少,就来此给分享一下自已整理的规范。

  本规范是PC端web管理系统的规范,文档结构和内容有参考过网上一些大牛的分享,个人的思考并不完善希望各位大神多多和补充。不多讲了,请看正文……

  (2)弹窗、弹页要768高度的分辨率显示正常,同时能移动查看弹出框内容。弹出框高度为不超过450px,且显示在内容页面相对水平、垂直相对居中。

  文字用系统自带的常规字体,且分一级标题、二级标题、主内容文字、次内容文字、辅助文字(说明或引导性文字,提醒性文字),分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。

  (1)表头:字体加粗、且比单无格内容字体大一号,且体字体大小参照UI效果图。

  (5)原则上每页显示15-20条数据,实际显示条数据可按设计排列效果而定。

  (6)表格中不定长的字段,固定显示宽度,超出内容用“…”显示光标停留后,在浮动层显示详细内容。

  (3)在查询条件下修改返回后,保留原有查询条件,且修改后的数据如果不满足查询条件则不显示。

  (3)删除成功后返回到原记录所在页面,而当原记录所在页不存在时,则返回上一页。

  (4)当被删除的记录与其他记录存在关联时,请示需求界面给予不允许删除、更明细提示等信息。

  (1)当提交所费的时间较长时,需给出等待的提示,如:沙漏、菊花、进度条等。

  (1)内容提交类:每个输入项、条件选选项(包括时间选择)均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部(如密码要多少多少位。搜索框提示用户输入什么内容等。)

  (2)谨慎类操作:针对不可修改、重要操作选择等操作属于谨慎类操作,均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。

  (1)确认提示:修改设置、删除数据等操作时需要弹出提示框,用户需要选择后方可执行。

  (2)错误提示:当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。比如输入数值不符系统,则进行提示。

  (4)读取提示:涉及到大量信息读取缓慢的时候应该进行提示。比如进入后台查看商品列表时,由于网络、数据量大等原导致载入缓慢,应该显示读取提示信息,已避免用户过度重复点击操作。

  (1)保存结果提示:当进行商品添加/修改此类涉及到数据保存的操作,不管是否成功均需给出提示。统一用Toast提示,内容为“保存成功!”原则上保存之后直接显示结果页(也可视具体情况定)。

  (2)查询结果提示:任何信息列表、查询结果,当对应信息结果的时候需要给出有无结果状态提示。不得使用空白信息。

  (1)径:原则上不超过就能到达用户想要的主要页面,且随时能返回。

  (2)菜单:各级别的菜单宽高一致,样式一致。鼠标划过或点击选中菜单模块时会有突出(比如高亮)状态显示。

  (3)有子菜单的模块默认不显示子菜单,点击后显示子菜单,再次点击时可收起。

  (1)原则上每个页均有“当前”,但弹出页、预览页等特殊页面无需当前。

  (2)若当前有多个层级,则当前层级的前面层级均可链接到相应页面。

  (1)表单输入框由 表单字段名称: + 输入框组成,字段名称原则上2-4个汉字。

  (2)预置文案:输入框内均需有预置文案,且光标进入输入框获得焦点时文案自动消失,若输入框失去焦点且未输入任字时恢复预置文案。

  (3)下拉选择框中内容有多级时,只显示一级,其他级呈灰色不可用状态,选择一级后才会激活第二级,以此类推。如:部门作为查询条件时,点击下拉框,默认只有一级部门可用,点击一级部门再激活开显示二级部门。

  (4)界面的必填项以红色*号标识出来,且标识在“表单字段名称”前面。存在必填项未填写时,输入框失去焦点即时提示,输入框红色描边,且输入框下方左有相应红色提示文案。输入框未曾获得过焦点直接提交时,同样输入框红色描边+红色提示文案提醒。

  (5)单行输入框:在未字数情况下,当输入文字比前输入框长时,最先输入的文字隐藏,光标和最后一个输入的文字显示在输入框尾部。

  (6)多行输入框:需要有“当前已输入字数/最多可输入字数”(如:50/100)。

  (8)只允许输入日期、时间的输入框需要通过格式化方式约束输入,而不是输入非法值后给出提示;

  (3)按钮:按windows交互习惯先优先后次要(左确定,右取消)。

  (4)按钮样式:可直接写文字,或文字+图标(具体方案参照UI设计效果图),原则上按钮上文字为2-4个汉字。

  当数据获取较慢,或网络状况不佳时,要有统一的加载方案图示告诉用户“数据正在加载中……”如:漏斗、菊花、进度条等具体图文可参与UI设计效果。

  当页面没有数据、加载失败或出错时,要有统一的提示文案图标告诉用户“页面加载失败/暂无数据/页面出错”,具体图文可参与UI设计效果。

  默认状态鼠标为“箭头形状”,经过可点击元素时变为“手指状”,在可输入框中为“竖线)支持回车键提交

  有想要文档格式参考的小伙伴可以加我微信,也欢迎各位喜欢UI交互设计的小伙伴们一起交流学习。

  本文由 @边跑边学走 授权发布于人人都是产品经理,未经作者许可,转载。

  【每日一问】第280期:锤子号称要电脑和office办公软件,是吹牛x还是线人关注

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上海广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。