關于UI界面的切圖命名規(guī)范，U妹覺得關鍵是在于團隊能夠有一個統(tǒng)一的規(guī)則，所以這里只介紹一種通用的命名規(guī)則，當然大家也可以根據自己的實際情況去制定，這里只提供一種方法與思路，僅供參考。

      規(guī)范的命名方式可以提高開發(fā)人員的的開發(fā)效率和整個開發(fā)團隊的友好合作。U妹覺得要盡可能用最少的字符而又能完整的表達標識符的含義。

      一、切圖命名英文縮寫的3個原則

      1.較短的單詞可以通過去掉“元音”形成縮寫

       2.較長的單詞可去單詞的頭部幾個字母形成縮寫

       3.還有一些約定成俗的英文單詞縮寫

      二、命名規(guī)則

          模塊_類別_功能_狀態(tài).png

        U妹舉個例子：nav_button_search_default.png

        釋義為：導航_按鈕_搜索_默認.png

     啟動界面

        啟動圖片 default.png

         啟動logo default.png

         如：default.png\defoult@2x.png\default-568@2x.png

  登錄界面

   登錄背景    login_bg.png

         登錄logo   login_logo.png 

         輸入框       login_input.png 

         輸入框選中狀態(tài)       login_input_pre.png

         登錄按鈕       login_btn.png

         登錄按鈕選中狀態(tài)  login_btn_pre.png

     導航欄按鈕 (nav) 命名 

         nav_功能描述.png

         如：nav_menu.png\nav_menu_pre.png（同按鈕選中前后兩種狀態(tài)命名 ）

     按鈕命名（btn可重復使用按鈕)

        一般   normal   btn_xxx_normal.png

        點擊  highlight btn_xxx_highlight.png

        不能點擊  disabled  btn_xxx_disable.png

        按下  pressed btn_xxx_pressed.png

        選中  selected btn_xxx_selected.png 做為復數選擇出現機會不高

        btn_功能屬性或色彩均可.png

        如：btn_blue.png\btn_blue.9.png   藍色按鈕

    其他命名

       圖標 icon_xxx.png

       圖片 pic_xxx.png或是img_xxx.png

       照片 pho_xxx.png

       左側導航 命名 leftbar_功能描述.png

       如：leftbar_info.png\leftbar_info_pre.png   個人中心 

   底部選項卡按鈕（TabBar）

      命名 Tab_功能描述.png  

       如：tab_set.Png\nav_set_pre.png  設置 

   主頁命名

      命名 home_功能屬性＋描述.png

       如：home_menu_recommended.png  熱門推薦 

       ps：描述可用英文或拼間開頭字母組合等

   列表頁命名規(guī)則

      命名 List_功能屬性＋描述.png

       如：list_menu_collect.png  列表頁收藏按鈕

   UI文件命名規(guī)范常用詞

      常用狀態(tài) 

       正常 normat

       按下 pressed 

       選中 selected

       禁用 disabled

       已訪問 visited

       懸停 hover

    控件＆部件

       控件：較獨立的可操作界面元素 

        部件：描述屬于某控件一部分

        按鈕（可點） Btn

       圖標 Icon不可點、非點擊主體、圖案部件

       標記 Sign  列表

       List  菜單 Menu 

       視圖 View

       面板 Panel

       薄板 Sheet

       底部彈出菜單 欄 Bar 

       狀態(tài)欄 StatusBar

       導航欄 NaviBar

       標簽欄  TabBar

       工具欄 ToolBar

       切換開關 Switch

       滑動器 Slider

       單選框 Radio

       復選框 CheckBox

       背景 Bg

       蒙版、遮罩 Mask

       收藏 collect

       評論 comment

       廣告 ad

       時間 time

       音頻 audio

       視頻 viedio

       不喜歡 dilike

       用戶 user

       首頁 hone

       排名 ranked

       搜索 search

       標志 logo

       進度條 progress bar

       默認圖片 def_

       分隔圖片 seg_

       選擇 sel_

       關閉 close

       返回 back

       編輯 eidt

       內容 content

       左  中  右 left  center   right

       提示信息 msg

       個人資料 porfile

       彈出 pop

       刪除 delete

       下載 download

       登錄 login

       注冊 regsiter

       標題title

       注釋 note

       鏈接 link

       圖片 image（img)

       刷新 refresh

   常用補充描述

      頂部 Top 

       中間 Middle 

       底部 Bottom 

       第一 First 

       第二 Second

       最后 Last

       頁頭 Header

       頁腳  Footer 

      web前端開發(fā)工程是是一個很新的職業(yè)，在國內乃至國際上真正開始受到重視的時間不超過五年。web前端開發(fā)，是從網頁制作演變而來的，名稱上有很明顯的時代特征。隨著人們對用戶體驗的要求越來越高，前端開發(fā)的技術難度越來越大，web前端開發(fā)工程師這一職業(yè)終于從設計和制作不分的局面中獨立出來。

       早期的前端其實就是table布局，后來發(fā)展到所謂的div+css網站重構，再到現在的讓人眼花繚亂的各種各樣的新技術，web前端技術發(fā)展是非常快速的，因此選擇了前端這個行業(yè)就意味著不停的學習吧。讓我們先看看張克軍繪制的前端知識體系結構：

      前端開發(fā)的核心是HTML+CSS+JavaScript。本質上他們構成了一個MVC框架，即HTML作為信息模型（Model），css控制樣式（View），JavaScript負責調度數據和實現某種展現邏輯（Controller）。

      HTML

      1.標簽的分類，

      2.標簽表示一個元素

      3.按性質分類：block-level 和 inline-level

      4.按語義分類：

            Headings:h1,h2,h3,h4,h5,h6

            paragraphs:p

            Text formatting:em,strong,sub,del,ins,small

            Lists:ul,li,ol,dl,dt,dd

            Tables:table,thead,tbody,tr,th,td

            Forms and input: form,input,select,textarea

            Others:div,span,a,img,<!---->

            HTML5:header,footer,article,section

       XHTML

       XHTML于2000年的1月26日成為W3C標準。W3C將XHTML定義為的HTML版本，XHTML將逐漸取代HTML。XHTML是通過把HTML和XML各自的長處加以結合形成的。XHTML語法規(guī)則如下：

      屬性名和標簽名稱必須小寫

      屬性值必須加引號

      屬性不能簡寫

      用ID屬性代替name屬性

      XHTML元素必須被正確地嵌套

      XHTML元素必須被關閉

     標簽語義化

     為表達語義而標記文檔，而不是為了樣式，結構良好的文檔可以向瀏覽器傳達盡可能多的語義，不論是瀏覽器位于掌上電腦還是時髦的桌面圖形瀏覽器。結構良好的文檔都能向用戶傳達可視化的語義即使是在老的瀏覽器，或是在被用戶關閉了CSS的現代瀏覽器中。同時結構良好的HTML代碼也有助于搜索引擎索引你的網站。

      不要使用table布局，table是用來表格顯示的。

      不要到處濫用div標簽，div是用來分塊用的。

      不要使用樣式標簽，如font，center，big，small，b，i，樣式可以用CSS來控制，b和i可以用strong和em來代替。

      不要使用換行標簽<br />和空格來控制樣式，請用CSS。

      盡量不要使用內聯(lián)CSS

      CSS

      1.css基礎知識

        層疊和繼承

        優(yōu)先級

        盒模型

        定位

        浮動

     2.css進階

        css sprite

        瀏覽器兼容性

        IE haslayout和block format content

        css frameworks 

        css3

        css性能優(yōu)化

        less and sass

        css sprite主要用于前端性能優(yōu)化的一種技術，原理是通過多張背景圖合成在一張圖片上從而減少http請求，加快載入速度。

        瀏覽器兼容性

        絕大部分情況下，我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6，IE7，IE8，IE9，IE10，Chrome，Firefox，Safari。

        IE haslayout和block format content

        IE haslayout是一個Internet explore for Windows的私有概念，他決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素交互和建立聯(lián)系、如何響應和傳遞應用程序事件、用戶事件等。而有些HTML元素則默認就有l(wèi)ayout。目前只有IE6和IE7有這個概念。BFC是W3C css2.1規(guī)范中的一個概念，他決定了元素如何應對其內容進行定位。以及與其他元素的關系和相互作用。這個其實和瀏覽器的兼容性有關，因為決大部分的兼容性問題都是他們引起的。參考：css BFC和IE haslayout介紹。

        css framework

        css框架是一系列css文件的集合體，包含了基本的元素重置，頁面排版、網格布局、表單樣式，通用規(guī)則等代碼塊，用于簡化web前端開發(fā)的工作，提高工作效率。目前常見框架有：

       960 grid system

       blueprint css

       bluetrip

       minimum page

       還是一個比較出名的和特殊的框架是Twitter的bootstrap，bootstrap是快速開發(fā)web應用程序前端的工具包。它是一個css和HTML的集合，它使用了的瀏覽器技術，給你的web開發(fā)提供了時尚的版式，表單，buttons，表格，網格系統(tǒng)等等。它是基于less開發(fā)的，不支持IE6，在IE7和IE8里效果也不咋地。

       css3

       雖然css3還沒有正式成為標準，但是IE9+，Chrome，Firefox等現代瀏覽器都支持css3。css3提供了好多以前需要用JavaScript和切圖才能搞定的功能，目前主要功能更有：圓角、多背景、@font-face、動畫與漸變、漸變色、box陰影、RGBa-加入透明色、文字陰影。

       css性能優(yōu)化

       css代碼是控制頁面顯示樣式與效果的最直接“工具”  ，但是在性能調優(yōu)時他們通常會被web開發(fā)工程師所忽略，而事實上不規(guī)范的css會對頁面渲染的效率有嚴重影響，尤其是對于結構復雜的web2.0頁面，這種影響更是不可磨滅的。所以，寫出規(guī)范的、高性能的css代碼會極大地提高應用程序的效率。

       less and sass

       less和sass都是css預處理器，用來為css增加一些編輯的特性，無需考慮瀏覽器的兼容問題，例如你可以在css中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可以讓你的css更加簡潔。適應性更強，代碼更直觀等諸多好處。

        sass基于ruby開發(fā)，less既可以在客戶端運行，也可以借助node.js或者rhino在服務器端運行。

     話不多說，先上代碼：

     for(var j=0;j<10;J++){

         setTimeout(function(){console.log(j);},5000)

     }

     看到這三行代碼，你也許會不耐煩道：又要講閉包？要吐槽了好么？別急，讓我們先來思考一下，這段代碼在瀏覽器中的執(zhí)行結果是什么？

     <!-- more -->

     甲：順序打印0到9？

     乙：這題我見過，打印十個10！

     哪個答案正確？

     執(zhí)行結果顯示，瀏覽器打印出十個10，貌似乙對了，但是如果你足夠細心，你會發(fā)現幾個問題：為什么會循環(huán)打印十個10,而不是0到9？

     從結果來看，for循環(huán)執(zhí)行完跳出之后，才開始執(zhí)行setTimeout（所以j才等于10），為什么不是每次迭代都執(zhí)行一次setTimeout呢？

1、為什么會循環(huán)打印十個10？

      許多人習慣用第二個問題中的執(zhí)行結果來回答這個問題：“for循環(huán)執(zhí)行完畢跳出之后才開始執(zhí)行setTimeout，所以才打印了十個10”。這樣的答案，只能說是既應付了自己，又應付了別人。其實，要解答第一個問題，首先要解答第二個問題。

2、為什么不是每一次迭代都執(zhí)行一次setTimeout？

     大家都知道，JavaScript在ES6出現以前，是沒有塊狀作用域的，這就意味著，在for循環(huán)中用var定義的變量j，其實是屬于全局的，那其實整個全局作用域中只有一個j，每次for循環(huán)都是更新這個j。

       那么現在的關鍵問題在于，為什么整個for循環(huán)會先于setTimeout執(zhí)行，而不是我們正常理解的，一次迭代執(zhí)行一次。這就涉及到了JavaScript的核心特性：單線程。

       JavaScript設計的初衷，是瀏覽器用來與用戶進行交互和DOM操作的，這就決定了它必須是單線程的。設想JavaScript同時有兩個線程，一個線程在DOM節(jié)點內添加內容，一個線程刪除該節(jié)點，瀏覽器就會出現混亂。所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成為了這門語言的核心特征，將來也不會改變。

      單線程就意味著，所有任務需要排隊，前一個任務結束，才會執(zhí)行下一個任務，如果前一個任務耗時很長，后一個任務就不得不一直等著。

      為了優(yōu)化單線程的性能，JavaScript將任務分成兩種，一種是同步任務（synchronous），另一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執(zhí)行的任務，只有前一個任務執(zhí)行完畢，才能執(zhí)行后一個任務；異步任務指的是，不進入主線程，而進入“任務隊列（task queue）”的任務，只用主線程中的同步任務執(zhí)行完畢，異步任務才會進入執(zhí)行隊列執(zhí)行。只要主線程空了，就會去讀取“任務隊列”，這就是JavaScript的運作機制。這個過程會不斷重復。

       而setTimeout就被JavaScript定義為異步任務。每次for循環(huán)的迭代，都將setTimeout中的回調函數加入任務隊列等待執(zhí)行。也就是說，只有同步任務中的for循環(huán)完全結束，主線程中才會去任務列表中找到尚未執(zhí)行的十個setTimeout（十次迭代）回調函數并順序執(zhí)行（先進先出）。而此時，j已經經過循環(huán)結束變成了10，所以此時主線程執(zhí)行的，是十個一模一樣的打印i的回調函數，即打印十個10,。至此完美回答了第一和第二個問題，文章開頭的代碼與下面的代碼其實是等價的：

       for(var i=0;i<10;i++){

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

}

       小小的一個setTimeout，牽扯出了很多JavaScript的深層次問題，可見JavaScript還有許多地方是值得深入探究的。

阿里巴巴_BBC_UED 王萌：無論你是設計、用研還是產品，如何把復雜籠統(tǒng)的問題拆解成一個個小的、可執(zhí)行開展的問題，都是一項必不可少的能力，今天阿里這篇好文幫你迅速掌握起來！

引言：

在一秒鐘內看到本質的人和花半輩子也看不清一件事本質的人，自然是不一樣人生。——電影《教父》 本文沒辦法幫你一秒鐘看清人/事，而且也不奢望能做到，但希望能和大家一起朝這個方向做些努力。

編者按：可能有敏銳的同學已經意識到了，現在很多公司招人，職位都叫產品設計師，簡言之就是既要會界面設計，更要懂交互、產品等，這也給一心鉆研精美圖標和酷炫動效的同學提個醒，未來UI設計師與交互的界限會越來越模糊，不想提前退休，可別光顧著折騰軟件，好好讀下今天這4個建議。

編者按：今天這篇推薦一下，聊的是用戶體驗中最讓人揪心的三個流程：授權征詢、注冊與加載等待。作者總結了不少實用的方法，能夠迅速地提高這三個方面的體驗，建議學習 >>>

Lina：訪談是定性研究中最基礎的方法。相對于分析客觀數據的定量研究方法，不論是一對一的深度訪問還是一對多的座談會，都會產生研究人員與用戶的互動，而互動關系會極大影響到訪談的質量和效果。

很多人認為訪談就是“問答”，研究人員按照研究目的設定一系列的問題，通過詢問用戶，獲得相應的答案，看上去似乎比定量研究簡單許多。然而事實上并非如此。訪談是需要對用戶的態(tài)度及行為做研究分析，而出于每個人的自我防御心理，用戶很難將自己真實的想法告訴研究人員。如何獲得用戶真實的情感態(tài)度，是非常考驗每一位研究者研究技術的地方。下面就結合之前的項目經歷，跟大家探討一下訪談技巧的問題。

互聯(lián)網時代的成功故事里，機遇和運氣是增添它們傳奇色彩的決定性因素。一個零售企業(yè)適逢互聯(lián)網萌芽，在90年代這個網絡拓荒期逐漸膨脹成為響徹北美的互聯(lián)網巨頭，這是亞馬遜的故事。而Facebook的開頭則更有意思一些，校園創(chuàng)業(yè)，友情與背叛，在移動端設備過度階段引領社交網絡變革，成就了另外一個走上互聯(lián)網時代的年輕富豪。

空狀態(tài)，或稱零數據狀態(tài)，很多時候不太招設計師的待見。我們基本都是在主要流程界面的設計工作完成之后才會回過頭來考慮完善一下，因為從表現上來看，空狀態(tài)給人的感覺就是臨時性的，有些微不足道。不要被空狀態(tài)的名字所迷惑，實際上，這個狀態(tài)在引導性、愉悅性和保留用戶等方面的潛質對于產品體驗在細節(jié)當中的成敗有著不可忽視的作用。

人機交互系統(tǒng)輸出信息是有益的或者讓人分心的，要有一條明確的分界線。

　　Business Insider旗下研究機構BI Intelligence最近做出評估預測，到2020年全球范圍內銷售的9200萬輛汽車將使用與互聯(lián)網連接的硬件設備。想象一下數以千萬計的車輛應用系統(tǒng)每時每刻都在進行數據輸入輸出，將帶來怎樣的用戶交互體驗。共享數據的輔助下，行車安全性可以得到大幅度提升，提前的線路規(guī)劃策略也能夠降低燃油消耗量。系統(tǒng)是如何判斷哪些數據對駕駛者或者車載系統(tǒng)本身有所幫助，那些相關性不大的數據是否會讓行車駕駛更復雜、更麻煩、更危險?