網站設計公司請選新蕪湖網絡公司

服務熱線:0553-366 9900
189-4958-1558
189-5536-8819
當前位置:新蕪湖網絡 >> 網站設計知識 >> 蕪湖網站設計Web UI 網站用戶界面設計命名規范
我們的實力
我們的實力
聯系我們
服務熱線:0553-3669900
服務郵箱:sales#xinwuhu.com
  • 發消息給 新蕪湖網絡
  • 發消息給 新蕪湖網絡

蕪湖網站設計Web UI 網站用戶界面設計命名規范

WEB UI設計命名規范,也就是網站用戶界面設計(網頁設計)命名規范。 


這套規范并非單純的CSS、html或JavaScript命名規范,它涉及了很多使用PhotoShop這類設計工具進行網頁設計過程中的命名規范。





許多美工設計效果圖源文件沒有對圖層命名的習慣,而網上大多命名規范都是關于css、html、js和一些服務器端語言的,設計方面的命名規范很 少。設計師也是技術團隊的成員,而前端開發工程師需要使用設計師的效果圖源文件的,所以統一命名規范和設計規范對于團隊的協作和工作效率肯定是有好處的。


 WEB UI設計命名規范


一.網站設計及基本框架結構:


 


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等。


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
網站地圖: sitemap

在線客服

  • 售前 發消息給 新蕪湖網絡!
  • 售后 發消息給 新蕪湖網絡
  • 電話: 0553-3669900
欧美理论717在线观看_在线亚洲国产福利网址_又粗又硬又黄又爽的毛片_亚洲无码中文字幕