详解交互设计规范第三部分:通用组件规范。包括:按钮、导航、输入框、搜索、浮层、列表。
树图思维导图提供 交互设计规范(三)思维导图 在线思维导图免费制作,点击“编辑”按钮,可对 交互设计规范(三)思维导图 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:0990850fc90b7566415df0995fe1920a
交互设计规范( 基于后台 ) 第三 通用组件规范思维导图模板大纲
对于一些可在多页面中使用的通用组件进行规范,包括:按钮、导航、输入框、搜索、浮层、列表。
导航
应用
后才操作页面导航分为两部分:导航条、软文导航
规范
导航条:平台标题+各功能标签。(上下隶属关系,平台标题字体大于功能标签字体)
软文导航:平台标题>功能标签(字体相同颜相同)
激活标签与未激活标签显示不同颜色
指针指向未激活标签时标签字体显示下划线表示可激活
按钮
应用
按钮分为两大类,一类是各页面中的功能操作按钮,比如确定、取消按钮;一类是数据表格下方的翻页按钮
规范
功能操作按钮
各页面操作按钮需采用统一样式,按钮上的操作名称采用统一字体、颜色。
不可用按钮需要致灰显示
翻页按钮
翻页按钮可采用纯文字链接,比如:首页、上一页、下一页、尾页。文字属性必须统一。当表格只有一页时翻页按钮需致灰显示。
输入框
应用
规范各页面中的文本输入框。
规范
同一页面内单行文本输入框长宽尺寸必须统一,比如商品添加页面中的商品原价、商品现价两个输入框的尺寸就必须要统一。
多行文本输入框长宽尺寸可根据允许最大输入字符数来做决定。比如商品添加中的商品长标题输入框。
所有页面内单行与多行文本输入框均有边框
所有页面内输入框中所输入的字符属性必须统一(字体,颜色,字号)
搜索
应用
规范各平台中的搜索设计
所有平台中的搜过功能均采用:名称标签+条件输入框/条件筛选+搜索按钮的模式
规范
名称标签需要规范,搜索与查询不能同时出现,比如“订单搜索”“商品查询”就不符规范,需要统一为“订单查询”“商品查询”
按钮需要规范,按钮功能名称统一为“查询”或者“搜索”
浮层
应用
用于规范各页面内的浮层设计,是否可以禁止浮层以外的操作。
规范
浮层意外的区域是不可操作的,需要用户通过操作关闭浮层才可。比如弹出确认提示框、切换城市等。只可在浮层区域内进行操作。可将浮层意外的区域进行暗显处理,以便与浮层明显区别开,方便操作。
列表
应用
用于规范各项数据信息列表。
规范
各类信息列表均采用统一的显示格式、翻页方式、单页显示数量。
树图思维导图提供 904名中国成年人第三磨牙相关知识、态度、行为和病史的横断面调查 在线思维导图免费制作,点击“编辑”按钮,可对 904名中国成年人第三磨牙相关知识、态度、行为和病史的横断面调查 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:10b9a8a2dd2fb4593f8130ef16c320fc
树图思维导图提供 Linux 网络基础知识 在线思维导图免费制作,点击“编辑”按钮,可对 Linux 网络基础知识 进行在线思维导图编辑,本思维导图属于思维导图模板主题,文件编号是:199680f0e48eac8a1aeaadb90447d4f4