欢迎来到三一办公! | 帮助中心 三一办公31ppt.com(应用文档模板下载平台)
三一办公
全部分类
  • 办公文档>
  • PPT模板>
  • 建筑/施工/环境>
  • 毕业设计>
  • 工程图纸>
  • 教育教学>
  • 素材源码>
  • 生活休闲>
  • 临时分类>
  • ImageVerifierCode 换一换
    首页 三一办公 > 资源分类 > PPT文档下载  

    《页面设计规范》PPT课件.ppt

    • 资源ID:5619781       资源大小:4.25MB        全文页数:31页
    • 资源格式: PPT        下载积分:15金币
    快捷下载 游客一键下载
    会员登录下载
    三方登录下载: 微信开放平台登录 QQ登录  
    下载资源需要15金币
    邮箱/手机:
    温馨提示:
    用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)
    支付方式: 支付宝    微信支付   
    验证码:   换一换

    加入VIP免费专享
     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    《页面设计规范》PPT课件.ppt

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

    注意事项

    本文(《页面设计规范》PPT课件.ppt)为本站会员(小飞机)主动上传,三一办公仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知三一办公(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    备案号:宁ICP备20000045号-2

    经营许可证:宁B2-20210002

    宁公网安备 64010402000987号

    三一办公
    收起
    展开