WEB交互设计规范及界面设计PPT课件

计
•搜索框通常放在页头的右上角
规
范
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
三
1.普通页码翻页的表现方法：
、
页
• 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮 与页码显示区构成；三为跳转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。
框
设
文字形式：
计
规
搭配使用：
范
图形形式：
• 使用SOSO引擎的可考虑在搜索框前加SOSO LOGO
•同一个web产品中搜索的位置和表现形式尽量保持一致
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
二
2. 应用场景
、 搜
强表现方式：
索
• 加大搜索框的显示，输入框内采用大字体（14号）
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
一 、 网 页 宽 度
不同浏览器，不同分辨率下网页第一屏最大可视区域：
屏幕
IE6.0 IE7.0 Firefox2.0 Opera9.0
800 779（+21） 779（+21） 783(+17) 781(+19)
码
设
计
规
范
• 链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
三
2. 小型页码翻页的表现方法：
、 页
• 链接页码为简明独立，不加任何修饰的数字形式
码
• 链接颜色由当前页面设计决定
设
• 数字大小建议为12-14px ,以易于点击为原则.
计
规
范
详见《产品页码翻页普用标准》
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
四
、
•
禁止模仿任何windows标准控件，windows标准控件包括但不限于：鼠标指针、按钮以及窗口控制按钮等。
广
告
框
• 突出搜索button的表现，更直观，更有点击欲
设
• 位置放在页头的中间并明显标示
计
规
范
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
二
2. 应用场景
、 搜
弱表现方式：
索
• 输入框内采用小字体（12号）
框
•长度大约以刚好放完提示文字为基准
设
• 弱化搜索button的表现，可考虑用icon代替
网页构图的技巧
WEB交互设计规范及界面设计
目录
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
一、 基础规范
01 网页宽度 02 搜索框设计规范 • 基础规范 • 应用场景 03 页码设计规范 • 普通页码翻页 • 小型页码翻页 •04 广告设计规范
05 文字的编排与设计 • 文字大小 • 文字颜色 • 文字行距 • 英文字体规范 • 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息
856（+168）
1259（+21）
876（+148）
1263(+17)
841(+183)
1261(+19)
885(+139)
说明： 比如1024×768下IE7.0的可视面积是（1024-21）×（768-148） 综合上面所有的数据，结论如下： 最保守的一屏大小是IE6下800×600：779×432 最广泛使用的一屏大小是IE6下1024×768 ：1003×600
范
• 搜索按钮
a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标，而不能采用其他元素。
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
二
c. 搜索button规范文字为“搜索”避免采用其他描述。比如：
、
搜
索
d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况：
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
1.基础规范
二
• 文本框
、
a. 搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度 b. 搜索组件中使用的文本框必须为单行文本框
搜
c. 文本框的长度不得少于130个像素
高度不得低于18个像素
索
• 帮助信息
设
计
规
范
• 不要使用按钮作长句广告：
错误案例：
• 腾讯网避免出现企鹅形象广告
可参考《广告、营销消息与营销邮件体验规范》
WEB交互设计规范及界面设计
框
设
a. 帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等， b. “限定标签提示”一般放在搜索框的上面
计
c. “热门关键词提示”一般放在搜索框下面 d. “标示性文字” 可设置灰色(#cccccc)显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、
规
用途、搜索范围等对用户有真正帮助的提示，”请输入关键词”这样的提示不应出现.
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧
网页构图的技巧
最新显示器分辨率比例调查：
一
目前主流分辨率 1024X768，在此状态下，默认使用950的网页宽度，与腾讯网首页统一尺寸。
、
网
页
宽
度
特殊情况 1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 910（腾讯网等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)
一 600 432（+168） 452（+148） 417(+183) 461(+139)
有效可视区域（单位：Px）
二
1024
百度文库
768
1003（+21）
600（+168）
1003（+21）
620（+148）
1007(+17)
585(+183)
1005(+19)
629(+139)
三
1280
1024
1259（+21）
用户体验设计(UED)讲座
WEB交互设计 规范
及界面设计
主讲人：李真 副教授 高级工艺美术师 高级工程师
2016.11.18
目录
用户体验设计(UED)讲座
Web界面设计规范
网页删格化设计 网页配色的技巧 网页构图的技巧
没有无缘的对，也没有无故的美，跟我学，开始吧！
WEB交互设计规范及界面设计
Web界面设计规范 网页删格化设计 网页配色的技巧