軟件設計可分為兩個部分：編碼設計與UI設計。編碼設計大家都很熟悉，但是 UI設計照舊一個很陌生的詞，即使一些專門從事網站與多媒體設計的人也不完全理解UI的意思。UI的本意是用戶界面，是英文User和 interface的縮寫。從字面上看是用戶與界面2個組成部分，但現實上還包括用戶與界面之間的交互關系。

界面設計。在漫長的軟件發展中，界面設計工作一向沒有被正視起來。做界面設計的人也被貶義的稱為“美工”。其實軟件界面設計就像工業產品中的工業造型設計一樣，是產品的主要買點。一個友愛美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創造賣點。界面設計不是單純的美術繪畫，他需要定位使用者、使用環境、使用體例并且為好終用戶而設計，是純粹的科學性的藝術設計。檢驗一個界面的標準即不是某個項目開發組向導的意見也不是項目成員投票的效果，而是好終用戶的感受。所以界面設計要和用戶研究緊密結合，是一個賡續為好終用戶設計寫意視覺效果的過程。

好近工作實在是繁忙，所以好久沒有更新自己的博客了，實在是對不起各位讀者。今天好不容易閑下來半天，所以和大家分享一下我之前總結的一套Web UI 設計命名規范，也就是網站用戶界面設計(俗稱網頁設計)命名規范。

這套規范并非單純的CSS、html或javascript命名規范，它涉及了許多使用PhotoShop這類設計工具進行網頁設計過程中的命名規范。(好久沒寫文章了，有點羅嗦，吼吼~)。首先我是出于公司幾位美工的設計效果圖源文件沒有對圖層命名而開始考慮總結一套的，還有一個原因就是網上大多命名規范都是關于編碼的，也就是那些css、html、js和一些服務器端語言的，至于設計方面的命名規范實在是很少。但是畢竟設計師也是技術團隊的成員，而且前端開發工程師是要使用設計師的效果圖源文件的，所以同一命名規范和設計規范對于團隊的協作和工作效率一定是有益處的。

這套WebUI設計命名規范總結自我的一些Web設計經驗和國外設計師的命名體例推薦。

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