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

用户体验设计(UED)讲座2016.11.18WEB交互设计规范及界面设计主讲人：李真副教授高级工艺美术师高级工程师目录Web界面设计规范网页删格化设计网页配色的技巧网页构图的技巧用户体验设计(UED)讲座没有无缘的对，也没有无故的美，跟我学，开始吧！WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧WEB交互设计规范及界面设计目录一、基础规范01网页宽度02搜索框设计规范•基础规范•应用场景03页码设计规范•普通页码翻页•小型页码翻页•04广告设计规范05文字的编排与设计•文字大小•文字颜色•文字行距•英文字体规范•文字链接06整齐的概念和应用07模块化表现08页脚信息WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧一、网页宽度最新显示器分辨率比例调查：目前主流分辨率1024X768，在此状态下，默认使用950的网页宽度，与腾讯网首页统一尺寸。特殊情况1.信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸：910（腾讯网等)990（QQshow，游戏产品等)2.搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧不同浏览器，不同分辨率下网页第一屏最大可视区域：有效可视区域（单位：Px）屏幕一二三800600102476812801024IE6.0779（+21）432（+168）1003（+21）600（+168）1259（+21）856（+168）IE7.0779（+21）452（+148）1003（+21）620（+148）1259（+21）876（+148）Firefox2.0783(+17)417(+183)1007(+17)585(+183)1263(+17)841(+183)Opera9.0781(+19)461(+139)1005(+19)629(+139)1261(+19)885(+139)说明：比如1024×768下IE7.0的可视面积是（1024-21）×（768-148）综合上面所有的数据，结论如下：最保守的一屏大小是IE6下800×600：779×432最广泛使用的一屏大小是IE6下1024×768：1003×600WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧一、网页宽度二、搜索框设计规范1.基础规范•文本框a.搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度b.搜索组件中使用的文本框必须为单行文本框c.文本框的长度不得少于130个像素高度不得低于18个像素•帮助信息a.帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等，b.“限定标签提示”一般放在搜索框的上面c.“热门关键词提示”一般放在搜索框下面d.“标示性文字”可设置灰色(#cccccc)显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有真正帮助的提示，”请输入关键词”这样的提示不应出现.•搜索按钮a.搜索按钮一般包含图标形式和文字形式两种b.使用图标形式时只能使用放大镜的图标，而不能采用其他元素。WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧d.图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况：文字形式：搭配使用：图形形式：c.搜索button规范文字为“搜索”避免采用其他描述。比如：•使用SOSO引擎的可考虑在搜索框前加SOSOLOGO•同一个web产品中搜索的位置和表现形式尽量保持一致WEB交互设计规范及界面设计二、搜索框设计规范网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧2.应用场景强表现方式：•加大搜索框的显示，输入框内采用大字体（14号）•突出搜索button的表现，更直观，更有点击欲•位置放在页头的中间并明显标示WEB交互设计规范及界面设计二、搜索框设计规范网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧•输入框内采用小字体（12号）•长度大约以刚好放完提示文字为基准•弱化搜索button的表现，可考虑用icon代替•搜索框通常放在页头的右上角2.应用场景弱表现方式：WEB交互设计规范及界面设计二、搜索框设计规范网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧三、页码设计规范1.普通页码翻页的表现方法：•页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮与页码显示区构成；三为跳转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。•链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧•链接页码为简明独立，不加任何修饰的数字形式•链接颜色由当前页面设计决定•数字大小建议为12-14px,以易于点击为原则.2.小型页码翻页的表现方法：详见《产品页码翻页普用标准》WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧三、页码设计规范四、广告设计规范•禁止模仿任何windows标准控件，windows标准控件包括但不限于：鼠标指针、按钮以及窗口控制按钮等。可参考《广告、营销消息与营销邮件体验规范》•不要使用按钮作长句广告：错误案例：•腾讯网避免出现企鹅形象广告WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧五、文字的编排与设计1.文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。•需突出的内容部分、新闻标题、栏目标题等多使用14号字体•广告内容、辅助信息或介绍性文字等多使用12号字体•避免大面积使用加粗字体总体原则：提高文字的辨识性和页面的易读性网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧2．文字颜色：•同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色特别注意：菜单尽量不使用12号加粗，这样会导致复杂的文字难以辨认。多采用14号加粗•一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧五、文字的编排与设计灰黑色当使用灰色为文字颜色时，正灰色的明度数值（B）不大于30%。当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（B）作相应调整。因为不同纯色亮度不同，黄色亮度最高，蓝色/紫色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（B）应该越低。•正文的文字颜色多采用深蓝色或深灰色。在讨论颜色前，首先要明确一这个判断的衡量标准。我们是以Ps的颜色系统为讨论基础的。建议使用：WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧五、文字的编排与设计深蓝色当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。当色相越接近天蓝时，（B）值应该越低。很多门户网站使用蓝色为文字颜色，常用的有建议使用天蓝色的：纯蓝色：WEB交互设计规范及界面设计五、文字的编排与设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧其他颜色当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色。WEB交互设计规范及界面设计五、文字的编排与设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧3．文字行距：视觉最佳行距是字体大小的1.3-1.6倍12号宋体，我们一般使用的行距为8-9个像素。14号宋体，我们一般使用的行距为10-11个像素。正文多采用14号字，行距可适当调整为10-16个像素。4．英文字体的使用：英文建议使用Arial：Arial与Helvetica/Univers并列为目前的标准无衬线字体（SansSerif），字型依据Unicode标准包含多国语言文字在内。Arial比例及字重和Helvetica(mac上用的字体)极之相近系统自带并能与汉字匹配的点阵字比较:WEB交互设计规范及界面设计五、文字的编排与设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧Arial字体优点:比例及字重（weight）和Helvetica极之相近;没有下划线贴边的问题；Q字没尾巴；字高整齐缺点:大写I与小写L无法区分下划线:Tahoma字体优点:字宽较阔,字母间距较窄，恒定1px（阅读单个字母有困难）形态上符合汉字“方块字”点阵字；能区分大写I与小写L缺点:12号字有下划线贴边的问题；Q字有尾巴；字高不整齐下划线:WEB交互设计规范及界面设计五、文字的编排与设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧Verdana字体优点:没有下划线贴边的问题,能区分大写I与小写L缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多;Q字有尾巴；字高不整齐下划线:应用案例WEB交互设计规范及界面设计五、文字的编排与设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧CSS书写规范各主要网站字体使用情况font-family:Helvetica,Arial,simsun;WEB交互设计规范及界面设计五、文字的编排与设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧隐性链接：对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。5．文字链接：文字链接形式不得超过3种颜色（规定其中一种为主链接色）。显性链接：大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。WEB交互设计规范及界面设计五、文字的编排与设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧六、整齐的概念和应用类似这样“豆腐块”的文字排列，在大型网站中尤为重要。如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。•对齐网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。使我们的设计更有序。更方便阅读。WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧•首页上摘要无须空格。内容正文应该空两格。WEB交互设计规范及界面设计六、整齐的概念和应用网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧•“豆腐块”四周应该空留均匀适当的间隔WEB交互设计规范及界面设计六、整齐的概念和应用网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧模块化的几类参考表现：•单线•3-5个像素的圆角•内边修饰……..七、模块化表现设计准则：同一个网站采用的模块化表现应该是全部统一的。WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧•页脚信息按照从上到下的排列次序为:1、内部导航2、外部导航3、各类许可证、授权声明4、英文版权信息“Copyright©”5、中文版权信息6、各类网络安全/工商证明/技术支持LOGO•各链接间隔统一使用”|”•建议采用12号字，禁止使用加粗字体八、页脚信息WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web