当前位置: 网站建设 > 网页设计 > 建站经验 >

设计师必知网页设计命名规范

时间:2013-03-02 04:14来源:未知 作者:admin 点击:

标签:设计师必知网页设计命名规范 规范(14)网页设计(881).Ph(1)命名(12)汇总(9)必知(9)常用(19)设计师(14)
四.常用命名汇总: 三.Photoshop图层结构规范: 二.须要留神的多少点: 第二级结构图例(病院网站): 第一级图层结构如下图: 3.涉及到交互行为的元素命名: 凡波及交互行动的元素通常会有畸形(link)、悬停(hover)、点击(click)和已阅读(visited)等不同款式,命名可参考以下规矩: 鼠标悬停::hover 点击:click 已浏览:visited 如:搜索按钮: btn-search、btn-search-hover、btn-search-visited --> [网站建设之]
设计师必知网页设计命名规范》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234V62013.htm

四.常用命名汇总:


三.Photoshop图层结构规范:

二.须要留神的多少点:

 


第二级结构图例(病院网站):

第一级图层结构如下图:

3.涉及到交互行为的元素命名:
凡波及交互行动的元素通常会有畸形(link)、悬停(hover)、点击(click)和已阅读(visited)等不同款式,命名可参考以下规矩:
鼠标悬停::hover   点击:click   已浏览:visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

--> [网站建设之]设计师必知网页设计命名标准

做什么事件都要有准则,在网页设计中,我们从开端就得规范我们的设计,这里咱们说说命名规则,首页叫index,广告条叫banner,这些可不是乱取的名字。 Tag:   网页设计   命名规范  ,设计师也必须要会编写代码;   网页设计   命名规范  

2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news

页头: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
 


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“.

一.网站设计及基础框架结构:


第三级结构图例及后果图对照(医院新闻栏目):

1.尽量用"有意思的命名"来给元素命名到达语义化。不要使用名义情势的命名.
如:red/left/big等,设置class元素的三种方式


效果图
图层命名结构

Photoshop图层命名遵守树形构造,凡某元素组成的图层大于3层,即可构成组,所有图层尽量防止应用默认命名(图层+编号)。


(责任编辑:网站建设)
设计师必知网页设计命名规范相关文章
上一篇:设计师也必须要会编写代码 下一篇:设计流程图降低了和RD之间的沟通成本
回到顶部