搜索
企业WEB应用标准化基本准则Msd:dezai扯蛋以用户为中心的开发设计意味着什么……了解用户观察用户分析用户熟悉业务清晰需求模拟场景让用户说参与设计容忍用户难用垃圾用得不爽高效率的响应反馈高频次的迭代开发通常……但是……“你妹的，我是一个人在做!!!”+标准标准化规范化程序化自动化03提高工作效率02减少用户熟悉系统的难度和时间01保持界面风格一致化ABCDE前端应用•更轻量•标准化•可复用•可扩展后端业务•模块化•构件化•可复用•信息流业务流数据流基础架构•稳定性、扩展性•高性能支撑大并发流量01产品/项目/编程规范/02界面框架规范03基础界面元素规范产品VILOGO系统框架视觉风格根据业务需求约定交互模式、页面流总体界面框架结构界面模式灵活优化多语言、多浏览器、换肤、组件库、扩展性等问题界面组件及其组合基础应用模板Web标准编码，优化结构，代码可重用性强可用性功能速度性能合理性规范标准潜规则易用性易见易学易现协调性简洁大气上档次原则可用性在规定的时间和条件下维持其性能水准的程度在所有主流浏览器中拥有一致的表现系统功能和用户的实际需求保持一致可用性页面响应速度最不能超过3秒有良好的灾备恢复机制有良好的防错和出错处理遵行常用的快捷键（回车Tab键)尽可能给出多的默认值不用培训和手册就会使用主要功能易用性尽量减少用户输入动作的数量避免鼠标与键盘操作频繁交换业务功能深度不超过三级易用性易见：Easytodiscover易学：Easytolearn易用：Easytouse有直接明显的异常反馈通道每个页面的文件应当小于30K每页都有自己的标题与导航合理性页面响应速度最不能超过3秒避免让绝大多数用户左右滚动窗口显示内容最多不超过三屏合理性在规定的时间和条件下维持其性能水准的程度使用温柔而非生硬的提示信息显示页面自适应分辨率及主流浏览器协调性尽可能在一屏内显示最主要的内容与操作功能避免鼠标与键盘操作频繁交换页面都使用一致的配色和一致的结构协调性字体•所有界面基准字体为12px14px16PX。•不考虑特殊字体,使用系统默认字体(宋体微软雅黑)•所有字体属性设定应在CSS中完成。•避免使用粗体和斜体：用粗体来吸引人的注意，用斜体表示着重，但还要少使用。•避免混合字体：最多包含两种不同的字体。Fonts•通过整体的CSS样式来规范布局颜色类型•使用颜色的时候应当保持一致性，例如错误提示信息用红色表示，正常信息用绿色表示。•一个页面的色彩不能花花绿绿，尽可能不超过三种色调颜色文本框(Input)•必填项必须以红色*号标识出来。•光标停留需有恰当的输入引导提示或建议•内容的基本正则验证(日期数字字符邮件)•将焦点置于出错的文本框内，并自动清空错误值•Label标签右对齐，文本框内容左对齐•对长度及非法字符的限制与过滤按钮(Button)•按钮的大小和尺寸必须通过CSS统一•不同功能的按钮可以用不同的色彩来区分•触发前:有相应的数据验证机制触发后:应有相应的操作成功或失败的提示语•按钮字体大小不要超过14px横排显示按钮要保持相对适中的间距•支持回车和Tab事件•删除操作要确认列表项(radiolistboxcheckboxdropdown)•尽量自动默认值•无默认值要增加“请选择”•少于5个值尽量用radiocheckbox•Label标签右对齐，文本框内容左对齐•对长度及非法字符的限制与过滤列表数据(gridviewtable)•表头水平/垂直居中对齐,固定•选中的行显示为不同的颜色并高亮显示•弹出的DIV或窗口大小不超过(640*480)•对于不定长的内容，可固定显示宽度，当超出此显示宽度后，以……显示图表(Chart)•最基本的三种图表(饼图曲线图柱状图)•最基本的功能:查询导出•一个页面的图表类型不超过三种•图表颜色尽量不采用鲜艳的颜色页面(Page)•层次分明，有明确意义的标题•有基本的导航条•有适度的留白•行间距不能太过密集（120%150%）•避免横向滚动条出现•通过整体的CSS样式来规范布局颜色类型•规范的文件结构(Images/js/global.cssreset.csscontrol.csscommon.css……)•抛弃TABLE布局，采用XHTML+CSSCSS•并非所有用户都会或懂得去表达自己的观点•不要按自己的意愿给用户做决策•有变化需提前与用户沟通,达成一致•按规律办事,满足绝大多数用户•学会使用CSS框架,掌握基本的Javascript个人建议