返回

厦门天琥设计培训学校

Web UI 网址操作界面设计方案命名规范

UI设计学习网更新时间:2021-01-21 浏览:147

这套标准并不是单纯性的CSS、html或JavaScript命名规范,它涉及到了许多应用PhotoShop这种设计工具开展网页制作全过程中的命名规范。

很多网页美工设计效果图源代码沒有对涂层取名的习惯性,而在网上大多数命名规范全是有关css、html、js和一些服务端語言的,设计方案层面的命名规范非常少。室内设计师也是技术性精英团队的组员,而前端工程师技术工程师*须应用室内设计师的设计效果图源代码的,因此统一命名规范和设计标准针对精英团队的合作和工作效能肯定是有益处的。

WEBUI设计命名规范

一.网站制作及基础框架剪力墙:

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”是网址的关键地区,如果是blog得话它将包括的日志。这些还能够取名为:“content“,“main-content”(或“mainContent”)。

6.Sidebar

“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层,就可以产生组,全部涂层尽量减少应用默认设置取名(涂层 序号)。

*一级涂层构造如下图:

第二级框架图例(医院网):

第三级框架图例及设计效果图比照(医院门诊新闻报道频道):

四.常见取名归纳:

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

sitmap:sitemap

相关资讯

ui设计学习方法

ui设计学习方法
2020-09-11 4515
给大伙儿共享一些有关ui设计学习培训的学习的方法,期待每一个来学习ui设计学习培训的盆友都能有非常大的取货。有关ui设计学习培...
GUI、UI、UE、PM都代表什么意思
2021-01-21 859
UI-UserInterface-操作界面-包含了GUI,可是彻底2个不一样的职位-广泛,能够是加工厂设备操控台页面,还可以电冰箱门上的溫度调整页面,或是是一个APP的页面,但大家如今通俗化了解是指网页页面或是APP的总体页面...
学习UI设计怎么找方向
2021-11-09 565
如今的你们是否存有那样的的焦虑情绪:各大家装网站平台过多,不清楚该看哪一个才好;关心了几十个设计类微信公众号,很多的信息...
在ui设计方案中icon和按键的区别
2021-01-21 533
在页面设计中最初Icon 便是标志,具备代指实际意义的符号图片都叫标志。标志的种类有程序图标、菜单栏标志、按键这些。针对UI设计师而言,你提及的通通都能够称作标志...
做美工有出路吗
2021-06-26 448
淘宝的业绩要想好,除了有运营的功劳,还有一个重要的部分就是美工了,一个店铺能否赚钱除了看运营以外就是美工了,有一个好的美...
UI基础都要学习哪些知识
2021-11-10 421
有一些小伙伴感觉UI设计非常简单,认为把握了PS手机软件专业技能和设计方案好多个页面和标志就可以寻找工作中。实际上没有你想的那样简单...

中国风海报的设计理念是什么

中国风海报的设计理念是什么
2021-01-25 416
*风元素早就深深地融进大家每一个人的日常生活,备受*人的钟爱,而且可用年纪范畴十分广。...

AE怎么制作波浪纹提高实际效果?

AE怎么制作波浪纹提高实际效果?
2020-12-19 404
AE怎么制作波浪纹提高实际效果?...

相关课程

栏目导航