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

《web交互设计规范及界面设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、用户体验设计(UED)讲座2016.11.18WEB交互设计规范及界面设计主讲人：李真副教授高级工艺美术师高级工程师目录Web界面设计规范网页删格化设计网页配色的技巧网页构图的技巧用户体验设计(UED)讲座没有无缘的对，也没有无故的美，跟我学，开始吧！WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧WEB交互设计规范及界面设计目录一、基础规范01网页宽度02搜索框设计规范基础规范应用场景03页码设计规范普通页码翻页小型页码翻页04广告设计规范05文字的编排与设

2、计文字大小文字颜色文字行距英文字体规范文字链接06整齐的概念和应用07模块化表现08页脚信息WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧一、网页宽度最新显示器分辨率比例调查：目前主流分辨率1024X768，在此状态下，默认使用950的网页宽度，与腾讯网首页统一尺寸。特殊情况1.信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸：910（腾讯网等)990（QQshow，游戏产品等)2.搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)WEB

3、交互设计规范及界面设计网页删格化设计网页配色的技巧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(

4、+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界面设计规范网页

5、构图的技巧一、网页宽度二、搜索框设计规范1.基础规范文本框a.搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度b.搜索组件中使用的文本框必须为单行文本框c.文本框的长度不得少于130个像素高度不得低于18个像素帮助信息a.帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等，b.“限定标签提示”一般放在搜索框的上面c.“热门关键词提示”一般放在搜索框下面d.“标示性文字”可设置灰色(#cccccc)显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途

6、、搜索范围等对用户有真正帮助的提示，”请输入关键词”这样的提示不应出现.搜索按钮a.搜索按钮一般包含图标形式和文字形式两种b.使用图标形式时只能使用放大镜的图标，而不能采用其他元素。WEB交互设计规范及界面设计网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧d.图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况：文字形式：搭配使用：图形形式：c.搜索button规范文字为“搜索”避免采用其他描述。比如：使用SOSO引擎的可考虑在搜索框前加SOSOLOGO同一个web产品中搜索的位

7、置和表现形式尽量保持一致WEB交互设计规范及界面设计二、搜索框设计规范网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧2.应用场景强表现方式：加大搜索框的显示，输入框内采用大字体（14号）突出搜索button的表现，更直观，更有点击欲位置放在页头的中间并明显标示WEB交互设计规范及界面设计二、搜索框设计规范网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧输入框内采用小字体（12号）长度大约以刚好放完提示文字为基准弱化搜索button的表现，可考虑用icon代替搜索框通常放在页

8、头的右上角2.应用场景弱表现方式：WEB交互设计规范及界面设计二、搜索框设计规范网页删格化设计网页配色的技巧Web界面设计规范网页构图的技巧三、页码设计规范1.普通页码翻页的表现方法：页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮与页码显示区构成；三为跳转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示WEB交互