WEB交互设计规范及界面设计.ppt

用户体验设计(UED)讲座　 ;目 录;;目录;一、网页宽度;不同浏览器，不同分辨率下网页第一屏最大可视区域： ;二、有哪些信誉好的足球投注网站框设计规范 ;;2. 应用场景 强表现方式： ; 输入框内采用小字体（12号） 长度大约以刚好放完提示文字为基准 弱化有哪些信誉好的足球投注网站button的表现，可考虑用icon代替 有哪些信誉好的足球投注网站框通常放在页头的右上角;三、页码设计规范; 链接页码为简明独立，不加任何修饰的数字形式 链接颜色由当前页面设计决定 数字大小建议为12-14px ,以易于点击为原则. ;四、广告设计规范;五、文字的编排与设计;2．文字颜色： 同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色; 灰黑色 当使用灰色为文字颜色时，正灰色的明度数值（B）不大于30%。 当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（B）作相应调整。 因为不同纯色亮度不同，黄色亮度最高，蓝色/???色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（B）应该越低。;深蓝色 当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。 当色相越接近天蓝时，（B）值应该越低。 很多门户网站使用蓝色为文字颜色，常用的有; 其他颜色 当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色。;3．文字行距： 视觉最佳行距是字体大小的1.3-1.6倍 12号宋体，我们一般使用的行距为8-9个像素。 14号宋体，我们一般使用的行距为10-11个像素。 正文多采用14号字，行距可适当调整为10-16个像素。;Arial字体 优点:比例及字重（weight）和Helvetica极之相近 ; 没有下划线贴边的问题；Q字没尾巴；字高整齐 缺点:大写I与小写L无法区分 下划线:;Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L 缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐 下划线:;CSS书写规范;隐性链接： 对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。;六、整齐的概念和应用; 首页上摘要无须空格。; “豆腐块”四周应该空留均匀适当的间隔;模块化的几类参考表现： 单线 3-5个像素的圆角 内边修饰 …….. ; 页脚信息按照从上到下的排列次序为: 1、内部导航 2、外部导航 3、各类许可证、授权声明 4、英文版权信息“Copyright ?” 5、中文版权信息 6、各类网络安全/工商证明/技术支持 LOGO 各链接间隔统一使用”| ” 建议采用12号字， 禁止使用加粗字体;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计;WEB交互设计规范及界面设计; 栅格设计系统 “grid systems”（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。;1919年德国著名建筑家沃尔特·格罗佩斯（Walt Gropius）在魏玛建立国立包豪斯学院。包豪斯的平面设计基本是在荷兰“风格派”和俄国“构成主义”的影响下形成的。因此，具有高度理性化、功能化、简单化、减少主义化和几何形式化的特点。 1928年，朱斯特·施密特（Joost Schmidt）发展出了一套新的理性设计系统和方法。 20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此又被称为“国际主