标你妹上传文件失败

『壹』 国内有没有好用的UI设计标注工具

说下目前市面上的一些标注工具的优缺点好坏：

PxCook:（我的评价：4.5星）

先说我用过还不错的标注工具，也是我目前在用的工具。操作形式和MarkMan有些许相似，不过交互体验上高出了一个档次。主要表现在支持智能的拖放标注，移动设备单位切换等方面上。并且它是为数不多的PS和Sketch都支持的标注工具。

优点：

成熟：跨平台——支持Windows和Mac

成熟2：支持PS和Sketch。

交互特别智能，也方便，一拖一放就标注完了。

相当需要说的一点：对于PSD文件或者Sketch进行了修改之后，PxCook里的标注会自动进行更新，免除了手动操作的过程。这是后面很多软件没有的。

支持移动设备的多单位切换。

对于应用了图层样式的图层而言，它会忽略图层样式的尺寸，比较符合我们开发人员思路。

对于应用了颜色叠加的文本，标注时候，颜色值首先是正确的。

对于应用了颜色叠加，同时嵌套了组也对组应用了颜色叠加的文本标注颜色值也是正确的，以上两点很重要，因为我发现很多设计师喜欢通过这种方式来修改文本颜色。

缺点：

不能支持多个文件同时进行标注。

对于图层样式等信息，不能进行详细查看。

价格：免费

点击这里和UI设计

Assistor PS:（我的评价：3星）

韩国推出的一款综合类设计辅助工具。其中也提供了标注功能。其流程为通过控制PS进行标注，类似于插件但并非插件。可谓开创了自动标注的先河，基本操作就是通过先选中图层，然后在插件面板中点击生成标注，标注会以一个新的图层的方式存在在你的设计稿中。只不过该软件已许久不再更新和维护了。
点击这里和UI设计小伙伴寻找更合适的标注工具

优点：

较为智能，不用手动去对像素了。

支持字体等标注，以及支持基本的颜色叠加识别。

支持Windows和Mac。

l 缺点：

仅支持PS。

对标注图层的设定有些欠妥：生成的标注是单独的图层，管理起来不方便；可以对同一个图层点击多次标注，这样就创建了多个相同的标注图层……

不能同步更改，如果设计稿改了，那标注改起来很不方便，先要找到对应的标注图层删掉，然后再重新标注。

速度慢（运算速度），比如我点一下标注，在PS里需要算几秒才能标出一个距离。

会把图层的效果（比如投影等）也算到尺寸里？！在大多数情景下感觉似乎不太符合开发人员的思路。

对于带有混合模式以及透明度的颜色叠加的文本进行标注时，颜色值取值不正确。最终结果应该是黑色，但是标注结果却是红色。

对于嵌套了组，同时对组也应用了颜色叠加之后，的文本标注取值也不对。最终结果应该是绿色，标注结果也变成了红色。

价格：由于公司被收购，从100usd/年变免费。

标你妹啊：（我的评价：3.5星）

这是一款在线的非标注工具，更适合开发人员，可以及时动态看到设计稿的相关标注信息，只需要把PSD上传上去即可，它会在服务器上去分析你的PSD然后提供和标注相关的数据。

优点：

交互方式更加流畅和直观，操作响应程度很快。

对于移动单位标注的切换更加直观和方便。

对于应用了图层样式的图层而言，它会忽略图层样式的尺寸，比较符合开发人员思路。

缺点：

安全的担心：需要上传PSD文件，对于一部分人和公司，文件的保密性可能是不能逾越的鸿沟，同时对PSD文件体积有限制。

只支持PSD文件。

上传受到网速限制，那些大文件真是要很久啊，不太符合国情。

有bug：对于一部分psd文件无法正常解析。

对于进行了颜色叠加的文本，得到的颜色值是错误的。

外面如果再嵌套了一个组，得到的颜色就错的更加离谱了。

价格：免费

MarkMan：（我的评价2.5星）

MarkMan是我最早接触过的标注工具，那时候标注需要的不多，作为一个可以为所有图片格式提供通用标注的软件来讲，MarkMan是个不错的选择，早期版本中是不支持移动端单位的，不过大概在几年前吧，他们加入了单位切换。问题在于，交互。他们后来加入的所有功能都放在了右键菜单里，用起来并不是那么方便，不过作为元老级产品，MarkMan是很赞的。直到他们把免费版变为了收费版后，就没见他们怎么更新过了。

优点：

入场比较早，做得比较早

为常见图片格式提供通用基本的标注，满足基本需求

缺点：

标注方式不智能，只能说是满足基本需求

部分功能（比如单位切换）在右键菜单里，很不方便，交互不够简洁明了。

价格：60rmb每年

Dorado：（我的评价：2星）

Dorado是后来腾讯出的一个标注工具，这个应该是继MarkMan之后一个同样在当时比较方便的标注工具了，好像和MarkMan之间有一段小风波。不过我们不讨论它，单纯客观来评价这个软件。他基本功能和MarkMan差不多，但是他的体积非常的小。

优点：

为常见图片格式提供通用基本的标注，满足基本需求

体积小巧，只有几百K，而且是绿色的不用安装。

支持的图像格式更多。

缺点：

只有Windows版本，没有Mac版本。

还是标注方式不够智能，仅满足基本需求

价格：免费

Parker：（我的评价：2.星）

Parker是以插件形式进行辅助标注的工具。支持PS和Sketch，要分别为两个工具去单独安装插件Parker插件。基本操作与Assistor PS特别像，甚至连一些Bug和处理也一样[Microsof1] ，详见如下文中提到的缺点。

优点：

满足基本标注需求。

较为智能，不用手动去对像素了。

支持字体等标注，以及支持基本的颜色叠加识别。

缺点：

生成的标注是单独的图层，管理起来并不方便，并且可以对同一个图层点击多次标注，这样就创建了多个相同的标注图层。

如果设计稿修改了，那标注修改起来不方便，先要找到对应的标注图层删掉，然后再重新标注。

运算速度较慢，比如点一下标注，在PS里需要算几秒才能标出一个尺寸。

会把图层的效果（比如投影等）也算到尺寸里，感觉不太符合大多数开发情景。

对于这种带有混合模式以及透明度的颜色叠加的文本进行标注时，颜色值取值不正确。最终结果应该是黑色，但是标注结果却是红色。

对于嵌套了组，同时对组也应用了颜色叠加之后，的文本标注取值也不对。最终结果应该是绿色，标注结果也变成了红色。

价格：60rmb一次性付费。

以上就是庞姿姿的回答，希望对你有所帮助。

『贰』 WEB前端目前的主要学习内容是什么

这里根据行业变化和企业用人需求整理了一份web前端学习路线，主要学习以下内容，希望可以帮到你~

第一阶段：专业核心基础

阶段目标：

1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2. 熟练运用HTML+CSS特性完成页面布局。

4. 熟练应用CSS3技术，动画、弹性盒模型设计。

5. 熟练完成移动端页面的设计。

6. 熟练运用所学知识仿制任意Web网站。

7. 能综合运用所学知识完成网页设计实战。

知识点：

1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

第二阶段：Web后台技术

阶段目标:

1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2. 熟练掌握JavaScript的基本数据类型和变量的概念。

3. 熟练掌握JavaScript中的运算符使用。

4. 深入理解分之结构语句和循环语句。

5. 熟练使用数组来完成各种练习。

6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7.DOM和BOM实战练习和H5新特性和协议的学习。

知识点：

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

第三阶段：数据库和框架实战

阶段目标：

1. 综合运用Web前端技术进行页面布局与美化。

2. 综合运用Web前端开发框架进行Web系统开发。

3. 熟练掌握Mysql、Mongodb数据库的发开。

4. 熟练掌握vue.js、webpack、elementui等前端框技术。

5. 熟练运用Node.js开发后台应用程序。

6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

知识点：

1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。

2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

第四阶段：移动端和微信实战

阶段目标：

1.熟练掌握React.js框架，熟练使用React.js完成开发。

2.掌握移动端开发原理，理解原生开发和混合开发。

3.熟练使用react-native和Flutter框架完成移动端开发。

4.掌握微信小程序以及了解支付宝小程序的开发。

5.完成大型电商项目开发。

知识点：

1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Rex基本概念。练使用react完成项目开发、掌握Rex中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。

『叁』 web前端都学习哪些内容

这里根据行业变化和企业用人需求整理了一份web前端系统全面的学习路线，主要学习以下内容：

第一阶段：专业核心基础

阶段目标：

1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2. 熟练运用HTML+CSS特性完成页面布局。

4. 熟练应用CSS3技术，动画、弹性盒模型设计。

5. 熟练完成移动端页面的设计。

6. 熟练运用所学知识仿制任意Web网站。

7. 能综合运用所学知识完成网页设计实战。

知识点：

1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

第二阶段：Web后台技术

阶段目标:

1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2. 熟练掌握JavaScript的基本数据类型和变量的概念。

3. 熟练掌握JavaScript中的运算符使用。

4. 深入理解分之结构语句和循环语句。

5. 熟练使用数组来完成各种练习。

6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7.DOM和BOM实战练习和H5新特性和协议的学习。

知识点：

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

第三阶段：数据库和框架实战

阶段目标：

1. 综合运用Web前端技术进行页面布局与美化。

2. 综合运用Web前端开发框架进行Web系统开发。

3. 熟练掌握Mysql、Mongodb数据库的发开。

4. 熟练掌握vue.js、webpack、elementui等前端框技术。

5. 熟练运用Node.js开发后台应用程序。

6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

知识点：

1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。

2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

第四阶段：移动端和微信实战

阶段目标：

1.熟练掌握React.js框架，熟练使用React.js完成开发。

2.掌握移动端开发原理，理解原生开发和混合开发。

3.熟练使用react-native和Flutter框架完成移动端开发。

4.掌握微信小程序以及了解支付宝小程序的开发。

5.完成大型电商项目开发。

知识点：

1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Rex基本概念。练使用react完成项目开发、掌握Rex中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。