关于UI界面的切图命名规范，U妹觉得关键是在于团队能够有一个统一的规则，所以这里只介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路，仅供参考。

      规范的命名方式可以提高开发人员的的开发效率和整个开发团队的友好合作。U妹觉得要尽可能用最少的字符而又能完整的表达标识符的含义。

      一、切图命名英文缩写的3个原则

      1.较短的单词可以通过去掉“元音”形成缩写

       2.较长的单词可去单词的头部几个字母形成缩写

       3.还有一些约定成俗的英文单词缩写

      二、命名规则

          模块_类别_功能_状态.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 

         输入框选中状态       login_input_pre.png

         登录按钮       login_btn.png

         登录按钮选中状态  login_btn_pre.png

     导航栏按钮 (nav) 命名 

         nav_功能描述.png

         如：nav_menu.png\nav_menu_pre.png（同按钮选中前后两种状态命名 ）

     按钮命名（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：描述可用英文或拼间开头字母组合等

   列表页命名规则

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

       如：list_menu_collect.png  列表页收藏按钮

   UI文件命名规范常用词

      常用状态 

       正常 normat

       按下 pressed 

       选中 selected

       禁用 disabled

       已访问 visited

       悬停 hover

    控件＆部件

       控件：较独立的可操作界面元素 

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

        按钮（可点） Btn

       图标 Icon不可点、非点击主体、图案部件

       标记 Sign  列表

       List  菜单 Menu 

       视图 View

       面板 Panel

       薄板 Sheet

       底部弹出菜单 栏 Bar 

       状态栏 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前端开发工程是是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过五年。web前端开发，是从网页制作演变而来的，名称上有很明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。

       早期的前端其实就是table布局，后来发展到所谓的div+css网站重构，再到现在的让人眼花缭乱的各种各样的新技术，web前端技术发展是非常快速的，因此选择了前端这个行业就意味着不停的学习吧。让我们先看看张克军绘制的前端知识体系结构：

      前端开发的核心是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语法规则如下：

      属性名和标签名称必须小写

      属性值必须加引号

      属性不能简写

      用ID属性代替name属性

      XHTML元素必须被正确地嵌套

      XHTML元素必须被关闭

     标签语义化

     为表达语义而标记文档，而不是为了样式，结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义即使是在老的浏览器，或是在被用户关闭了CSS的现代浏览器中。同时结构良好的HTML代码也有助于搜索引擎索引你的网站。

      不要使用table布局，table是用来表格显示的。

      不要到处滥用div标签，div是用来分块用的。

      不要使用样式标签，如font，center，big，small，b，i，样式可以用CSS来控制，b和i可以用strong和em来代替。

      不要使用换行标签<br />和空格来控制样式，请用CSS。

      尽量不要使用内联CSS

      CSS

      1.css基础知识

        层叠和继承

        优先级

        盒模型

        定位

        浮动

     2.css进阶

        css sprite

        浏览器兼容性

        IE haslayout和block format content

        css frameworks 

        css3

        css性能优化

        less and sass

        css sprite主要用于前端性能优化的一种技术，原理是通过多张背景图合成在一张图片上从而减少http请求，加快载入速度。

        浏览器兼容性

        绝大部分情况下，我们需要考虑浏览器的兼容性，目前正在使用的浏览器版本非常多，IE6，IE7，IE8，IE9，IE10，Chrome，Firefox，Safari。

        IE haslayout和block format content

        IE haslayout是一个Internet explore for Windows的私有概念，他决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。而有些HTML元素则默认就有layout。目前只有IE6和IE7有这个概念。BFC是W3C css2.1规范中的一个概念，他决定了元素如何应对其内容进行定位。以及与其他元素的关系和相互作用。这个其实和浏览器的兼容性有关，因为决大部分的兼容性问题都是他们引起的。参考：css BFC和IE haslayout介绍。

        css framework

        css框架是一系列css文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式，通用规则等代码块，用于简化web前端开发的工作，提高工作效率。目前常见框架有：

       960 grid system

       blueprint css

       bluetrip

       minimum page

       还是一个比较出名的和特殊的框架是Twitter的bootstrap，bootstrap是快速开发web应用程序前端的工具包。它是一个css和HTML的集合，它使用了的浏览器技术，给你的web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。它是基于less开发的，不支持IE6，在IE7和IE8里效果也不咋地。

       css3

       虽然css3还没有正式成为标准，但是IE9+，Chrome，Firefox等现代浏览器都支持css3。css3提供了好多以前需要用JavaScript和切图才能搞定的功能，目前主要功能更有：圆角、多背景、@font-face、动画与渐变、渐变色、box阴影、RGBa-加入透明色、文字阴影。

       css性能优化

       css代码是控制页面显示样式与效果的最直接“工具”  ，但是在性能调优时他们通常会被web开发工程师所忽略，而事实上不规范的css会对页面渲染的效率有严重影响，尤其是对于结构复杂的web2.0页面，这种影响更是不可磨灭的。所以，写出规范的、高性能的css代码会极大地提高应用程序的效率。

       less and sass

       less和sass都是css预处理器，用来为css增加一些编辑的特性，无需考虑浏览器的兼容问题，例如你可以在css中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的css更加简洁。适应性更强，代码更直观等诸多好处。

        sass基于ruby开发，less既可以在客户端运行，也可以借助node.js或者rhino在服务器端运行。

     话不多说，先上代码：

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

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

     }

     看到这三行代码，你也许会不耐烦道：又要讲闭包？要吐槽了好么？别急，让我们先来思考一下，这段代码在浏览器中的执行结果是什么？

     <!-- more -->

     甲：顺序打印0到9？

     乙：这题我见过，打印十个10！

     哪个答案正确？

     执行结果显示，浏览器打印出十个10，貌似乙对了，但是如果你足够细心，你会发现几个问题：为什么会循环打印十个10,而不是0到9？

     从结果来看，for循环执行完跳出之后，才开始执行setTimeout（所以j才等于10），为什么不是每次迭代都执行一次setTimeout呢？

1、为什么会循环打印十个10？

      许多人习惯用第二个问题中的执行结果来回答这个问题：“for循环执行完毕跳出之后才开始执行setTimeout，所以才打印了十个10”。这样的答案，只能说是既应付了自己，又应付了别人。其实，要解答第一个问题，首先要解答第二个问题。

2、为什么不是每一次迭代都执行一次setTimeout？

     大家都知道，JavaScript在ES6出现以前，是没有块状作用域的，这就意味着，在for循环中用var定义的变量j，其实是属于全局的，那其实整个全局作用域中只有一个j，每次for循环都是更新这个j。

       那么现在的关键问题在于，为什么整个for循环会先于setTimeout执行，而不是我们正常理解的，一次迭代执行一次。这就涉及到了JavaScript的核心特性：单线程。

       JavaScript设计的初衷，是浏览器用来与用户进行交互和DOM操作的，这就决定了它必须是单线程的。设想JavaScript同时有两个线程，一个线程在DOM节点内添加内容，一个线程删除该节点，浏览器就会出现混乱。所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成为了这门语言的核心特征，将来也不会改变。

      单线程就意味着，所有任务需要排队，前一个任务结束，才会执行下一个任务，如果前一个任务耗时很长，后一个任务就不得不一直等着。

      为了优化单线程的性能，JavaScript将任务分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程，而进入“任务队列（task queue）”的任务，只用主线程中的同步任务执行完毕，异步任务才会进入执行队列执行。只要主线程空了，就会去读取“任务队列”，这就是JavaScript的运作机制。这个过程会不断重复。

       而setTimeout就被JavaScript定义为异步任务。每次for循环的迭代，都将setTimeout中的回调函数加入任务队列等待执行。也就是说，只有同步任务中的for循环完全结束，主线程中才会去任务列表中找到尚未执行的十个setTimeout（十次迭代）回调函数并顺序执行（先进先出）。而此时，j已经经过循环结束变成了10，所以此时主线程执行的，是十个一模一样的打印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 王萌：无论你是设计、用研还是产品，如何把复杂笼统的问题拆解成一个个小的、可执行开展的问题，都是一项必不可少的能力，今天阿里这篇好文帮你迅速掌握起来！

引言：

在一秒钟内看到本质的人和花半辈子也看不清一件事本质的人，自然是不一样人生。——电影《教父》 本文没办法帮你一秒钟看清人/事，而且也不奢望能做到，但希望能和大家一起朝这个方向做些努力。

编者按：可能有敏锐的同学已经意识到了，现在很多公司招人，职位都叫产品设计师，简言之就是既要会界面设计，更要懂交互、产品等，这也给一心钻研精美图标和酷炫动效的同学提个醒，未来UI设计师与交互的界限会越来越模糊，不想提前退休，可别光顾着折腾软件，好好读下今天这4个建议。

编者按：今天这篇推荐一下，聊的是用户体验中最让人揪心的三个流程：授权征询、注册与加载等待。作者总结了不少实用的方法，能够迅速地提高这三个方面的体验，建议学习 >>>

Lina：访谈是定性研究中最基础的方法。相对于分析客观数据的定量研究方法，不论是一对一的深度访问还是一对多的座谈会，都会产生研究人员与用户的互动，而互动关系会极大影响到访谈的质量和效果。

很多人认为访谈就是“问答”，研究人员按照研究目的设定一系列的问题，通过询问用户，获得相应的答案，看上去似乎比定量研究简单许多。然而事实上并非如此。访谈是需要对用户的态度及行为做研究分析，而出于每个人的自我防御心理，用户很难将自己真实的想法告诉研究人员。如何获得用户真实的情感态度，是非常考验每一位研究者研究技术的地方。下面就结合之前的项目经历，跟大家探讨一下访谈技巧的问题。

互联网时代的成功故事里，机遇和运气是增添它们传奇色彩的决定性因素。一个零售企业适逢互联网萌芽，在90年代这个网络拓荒期逐渐膨胀成为响彻北美的互联网巨头，这是亚马逊的故事。而Facebook的开头则更有意思一些，校园创业，友情与背叛，在移动端设备过度阶段引领社交网络变革，成就了另外一个走上互联网时代的年轻富豪。

空状态，或称零数据状态，很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下，因为从表现上来看，空状态给人的感觉就是临时性的，有些微不足道。不要被空状态的名字所迷惑，实际上，这个状态在引导性、愉悦性和保留用户等方面的潜质对于产品体验在细节当中的成败有着不可忽视的作用。

人机交互系统输出信息是有益的或者让人分心的，要有一条明确的分界线。

　　Business Insider旗下研究机构BI Intelligence最近做出评估预测，到2020年全球范围内销售的9200万辆汽车将使用与互联网连接的硬件设备。想象一下数以千万计的车辆应用系统每时每刻都在进行数据输入输出，将带来怎样的用户交互体验。共享数据的辅助下，行车安全性可以得到大幅度提升，提前的线路规划策略也能够降低燃油消耗量。系统是如何判断哪些数据对驾驶者或者车载系统本身有所帮助，那些相关性不大的数据是否会让行车驾驶更复杂、更麻烦、更危险?