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

界面設(shè)計(jì)。在漫長的軟件發(fā)展中，界面設(shè)計(jì)工作一向沒有被正視起來。做界面設(shè)計(jì)的人也被貶義的稱為“美工”。其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的主要買點(diǎn)。一個(gè)友愛美觀的界面會(huì)給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點(diǎn)。界面設(shè)計(jì)不是單純的美術(shù)繪畫，他需要定位使用者、使用環(huán)境、使用體例并且為好終用戶而設(shè)計(jì)，是純粹的科學(xué)性的藝術(shù)設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)即不是某個(gè)項(xiàng)目開發(fā)組向?qū)У囊庖娨膊皇琼?xiàng)目成員投票的效果，而是好終用戶的感受。所以界面設(shè)計(jì)要和用戶研究緊密結(jié)合，是一個(gè)賡續(xù)為好終用戶設(shè)計(jì)寫意視覺效果的過程。

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

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

這套WebUI設(shè)計(jì)命名規(guī)范總結(jié)自我的一些Web設(shè)計(jì)經(jīng)驗(yàn)和國外設(shè)計(jì)師的命名體例推薦。

Web UI 設(shè)計(jì)命名規(guī)范

一.網(wǎng)站設(shè)計(jì)及基本框架結(jié)構(gòu):

1. Container

“container“ 就是將頁面中的所有元素包在一路的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.

2. Header

“header” 是網(wǎng)站頁面的頭部區(qū)域，一般來講，它包含網(wǎng)站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).

3. Navbar

“navbar“等同于橫向的導(dǎo)航欄，是好典型的網(wǎng)頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.

4. Menu

“Menu”區(qū)域包含一般的鏈接和菜單，這部分還可以命名為: “subNav “, “l(fā)inks“，“sidebar-main”.

5. Main

“Main”是網(wǎng)站的主要區(qū)域，假如是博客的話它將包含的日志。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。

6. Sidebar

“Sidebar” 部分可以包含網(wǎng)站的次要內(nèi)容，比如好近更新內(nèi)容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.

7. Footer

“Footer”包含網(wǎng)站的一些附加信息，這部分還可以命名為: “copyright“.