- 1、本文档共5页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
网站用户界面设计(网页设计)命名规范.pdf
- IT Www.LangSin.Com
浪曦网 国内顶级 视频网络编程教育平台
网站用户界面设计(网页设计)命名规范
该文档由国内顶级IT视频网络编程教育平台整理发布
这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。
WebUI 设计命名规范
一.网站设计及基本框架结构:
1. Container
“container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wrap“, “page“.
2. Header
“header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。这部分还可以命名
为:“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
浪曦网-国内顶级IT视频网络编程教育平台 Www.LangSin.Com
- IT Www.LangSin.Com
浪曦网 国内顶级 视频网络编程教育平台
“Sidebar” 部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命
名为: “subNav “, “side-panel“, “secondary-content“.
7. Footer
“Footer”包含网站的一些附加信息,这部分还可以命名为: “copyright“.
二.需要注意的几点:
1.尽量考虑为元素命名其本身的作用或”用意”,达到语义化。不要使用表面形式的命名.
如:red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
鼠标悬停::hover 点击:click 已浏览:visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
三.Photoshop图层结构规范:
Photoshop图层命名遵循树形结构,凡某元素组成的图层大于3层,即可形成组,所有图层尽量避免使用默认命名(图
层+编号)。
第一级图层结构如下图:
浪曦网-国内顶级IT视频网络编程教育平台 Www.LangSin.Com
- IT Www.LangSin.Com
浪曦网 国内顶级 视频网络编程教育平台
第二级结构图例(医院网站):
第三级结构图例及效果图对比(医院新闻栏目):
效果图
浪曦网-国内顶级IT视频网络编程教育平台 Www.LangSin.Com
- IT Www.LangSin.Com
浪曦网 国内顶级 视频网络编程教育平台
图层命名结构
四.常用命名汇总:
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolb
您可能关注的文档
- 粉煤灰在再生溷凝土中的应用与研究.pdf
- 粉煤灰地质聚合物凝结时间的研究.pdf
- 粉煤灰烘干分选磨细系统研究及优化设计0.doc
- 粉煤灰石灰类道路基层施工暂行技术规定 CJJ4—83.doc
- 粉煤灰组成与其胶砂活性的灰色关联分析.pdf
- 粉煤灰综合利用办法.pdf
- 粉煤灰贫溷凝土的疲劳性能研究.pdf
- 粗糙度标注方法新(06版)旧标准对比.doc
- 粗集料对溷凝土抗压强度测试结果的影响.pdf
- 粘胶短纤维生产工艺.doc
- 分析let s单元56ago2卷纸zheng unit56.pdf
- 塑胶材料其它分类原料pa9t 12.pdf
- md16x16数字媒体切换器设备.pdf
- 者参考项目发起人学科类型单位序列承包商修订页代码顺序典型.pdf
- 届世界天然气大会阿姆斯特丹2006add10288.pdf
- 期测试记录表每周weekly g1g6 journeys tests level 6 lesson26.pdf
- modernize-whitepaper现代化您应用程序白皮书.pdf
- anybackup产品典型案例分析.pdf
- 约克金融工程课程tfeslide32.pdf
- 广州市妇女儿童医疗中心历份教学药历01tjy.pdf
最近下载
- 2024年湖北省中考历史试题卷(含答案及解析).docx
- 爱护我们的五官幼儿主题班会PPT课件.pptx VIP
- 2020人教版二年级数学下册易错题型及答案.pdf VIP
- 2024届高考专题复习:小说叙述视角课件(共24张PPT) (1).pptx VIP
- 2024届高考专题复习:小说叙述视角.pptx VIP
- 《道德与法治》六年级下册全册知识点汇总.docx
- 测测达人版平台服务规则考试题库答案APP测测基础认证题.docx
- 江苏省苏州常熟市七年级数学下学期期末考试试题.docx VIP
- 建筑地基处理技术规范.pptx
- T_CACM 1270-2019 中医内科临床诊疗指南 脓毒症.docx
文档评论(0)