第1天-下午-网站的基础知识-配色技巧,WUI规范,设计小锦囊.pdf

背景分辨率规范 www.uidesign.cc 背景分辨率规范 最新显示器分辨率比例调查 ： 目前 主流最小分辨率 1024X768，在此状态下，默认 使用 1000px的 网页 宽度 重要内容尽量放在第一屏 600px区域内 京东： 1210px 淘宝： 1000px Elong： 1000px 1000px 有效区域 600px www.uidesign.cc 趋势 -背景可延伸 大背景图平铺 www.uidesign.cc 趋势 -背景可延伸 字体规范 www.uidesign.cc • 12号 (最小文本） 广告内容、辅助信息或介绍性文字等多使用 12号字体 • 14号（新闻正文） 需突出的内容部分 • 18px（标题） 标语部分 字体规范 总体原则：提高文字的辨识性和页面的 易读性，不要随意加粗 12px 14px 18px www.uidesign.cc 字体颜色 • 色不过三 • 默认颜色为： #333 深灰色 • 超链接颜色为： #3B639F蓝色 • 强调颜色为： #FF7F00橙色 www.uidesign.cc 文字行距一般为 140%~160% 文字的行距 140% www.uidesign.cc 文字对齐 • 默认：左对齐 • 按钮、标签：居中对齐 • 文字标签：右对齐 文字标签 右对齐 www.uidesign.cc 文字对齐 左对齐 右对齐，数字，价格 图片规范 www.uidesign.cc 图片要简单、明快、分割线要清晰 www.uidesign.cc 图片高度：常用可定为 100PX、 200PX、 300PX www.uidesign.cc 图片常见问题 图片压缩变形 图片压缩变形 图片变虚 图片过于复杂 •图片压缩变形 •图片变虚 •图片压缩变形 •图片过于复杂 www.uidesign.cc 图片常见问题 -好的图片处理方式 •简约 整体 重点突出 命名规范 www.uidesign.cc 命名规范 www.uidesign.cc 命名规范 1. Container “ container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为 : “ wrapper“ , “ wrap“ , “ page“ . 2. Header “ header” 是网站页面的头部区域，一般来讲，它包含网站的 logo和一些其他元素。

这部分还可以命名为:“ page-header” (或 pageHeader). 3. Navbar “ navbar“等同于横向的导航栏，是最典型的网页元素这部分还可以命名为 :“ nav” , “ navigation” , “ nav-wrapper” . 4. Menu “ Menu”区域包含一般的链接和菜单，这部分还可以命名为 : “ subNav “ , “ links“，“ sidebar-main” . 5. Main “ Main”是网站的主要区域，如果是博客的话它将包含的日志这部分还可以命名为 : “ content“ , “ main-content” (或“ mainContent” ) 6. Sidebar “ Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等 …这部分还可以命名为 : “ subNav “ , “ side-panel“ , “ secondary-content“ . 7. Footer “ Footer”包含网站的一些附加信息，这部分还可以命名为 : “ copyright“ www.uidesign.cc 命名规范 -常用命名规范 页头 :header 登录条 :loginbar 标志 :logo 侧栏 :sidebar 广告条 :banner 导航 :nav 子导航 :subNav 菜单 :menu 子菜单 :subMenu 下拉菜单 :dropMenu 工具条 : toolbar 表单 :form 栏目 :column 箭头 :arrow 搜索 :search 搜索按钮 :btn-search 滚动条 :scroll 内容 :content 标签页 :tab 文章列表 :list 提示信息 :msg 小技巧 :tips 栏目标题 :title 链接 :links 页脚 :footer 服务 :service 热点 :hot 新闻 :news 下载 :download 注册 :regsiter 状态 :status 按钮 :btn 投票 :vote 合作伙伴 :partner 版权 :copyright 网站地图 : sitemap www.uidesign.cc 命名规范 -组合命名规则 : 组合命名规则 : [元素类型 ]-[元素作用 /内容 ] 如 :搜索按钮 : btn-search 登录表单 :form-login 新闻列表 :list-news 交互行为的元素命名 : 凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则 : 鼠标悬停 :： hover 点击： click 已浏览： visited 如 :搜索按钮 : btn-search、 btn-search-hover、 btn-search-visited www.uidesign.cc 图层的管理（ PHOTOSHOP） Photoshop图层命名遵循树形结构，凡某元素组成的图层大于 3层，即可形成组，所有图层尽量避免使用默认命名 (图层 +编号 )。

切图的命名规范同上 。