UI标注软件现在是设计师(UI、PM、前端等)必备的一款软件。设计稿是UI设计师日常工作中的产出物之一,当然,做出了高保真设计稿并不意味着你的工作结束了,因为你还得与下游的开发工程师进行对接。

我们经常听到UI设计师抱怨说,做完设计稿后满满的成就感被开发的同学给打击的稀碎,为什么和开发沟通这么累?我们也经常会听到崩溃在边缘的开发对UI设计师说:“你这个图标的尺寸是多少呢?”,“这两个控件之间的间距是多少”,“这里的切图呢”?......归根结底,是你给了开发不规范的标注图和切图。

传统的设计稿标注会让人感到窒息,为什么这么说?先来一张UI设计稿标注图感受一下:

如果你是开发,看到这样的UI设计稿标注会怎样呢?有没有一种让人欲哭无泪的感觉?一张设计稿,UI标注密密麻麻,虽然都有清晰的箭头指示,但是其呈现出来的视觉逻辑并不符合开发逻辑。工程师在搭建一个页面的时候,会先去架构布局,一块内容一块内容的划分好,接着填充内容,最后来修改视觉的样式。一句话总结一下,这样的UI标注,极大的加剧了UI设计师和前端人员的撕逼大战。

好了,问题有了,那么我们该如何有效避免呢?哈哈,小本本准备起,小编要放大招了。接下来给大家推荐几款90%的设计师都在用的智能UI标注软件,切实做到告别手工,告别低效,告别口水战。

摹客iDoc

摹客iDoc是一款更快更简单的UI标注软件,确切的说,是一款产品协作设计平台,支持智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理,真正做到从产品到开发,只要一个文档。

特色功能点:

  • 支持上传Sketch、PS、XD的设计原稿
  • 标注和切图自动生成,不再用手工
  • 设计规范自动采样生成
  • 支持多种的原型(Axure、Justinmind、Mockplus)和各类文档,直接在线预览
  • 轻松查看智能标注,还可显示百分比标注
  • 自动获取切图,一键下载
  • 一键查看页面中的重复元素
  • 样式代码自动导出

官网地址:https://idoc.mockplus.cn

Sketch Measure

Sketch Measure是一款好用的Sketch UI标注插件。

特色功能点:

支持区域、尺寸、间隔、属性、备注标注;设置切图,颜色命名,导出规范等;

官网地址:http://utom.design/measure/

Zeplin

一款由四名在伊斯坦布尔的开发者制作的团队协作工具。其核心功能为UI标注、样式规范、备注文档。

特色功能点:

  • 支持自动标注,切图
  • 设计规范自动采样生成
  • 支持上传Sketch、PS、XD、Figma的设计原稿
  • 自动生产样式代码

官网地址:https://zeplin.io/

Marvelapp

总部在英国伦敦,旗下有多款与设计相关的产品。

特色功能点:

  • 支持自动标注,切图
  • 及时同步信息
  • 支持导出CSS, Swift and Android XML
  • 支持上传Sketch、Marvel的设计原稿

官网地址:https://marvelapp.com/features/handoff

小结

市场上UI标注软件还有很多,选择一款好用的协作工具可以极大的提高团队工作效率,在这里给大家强烈推荐一下国产摹客iDoc,是否真的好用,用过才知道!

相关推荐:

让UI设计师崩溃的瞬间,你经历过哪些?

那些年,UI设计师还在手工标注和切图时走的弯路

设计师都爱用的UI标注软件有哪些?的更多相关文章

  1. 工作五年以上的 UI 设计师都在干什么?

    30 岁,现在坐标北京,从毕业至今都一直在做设计.目前从业超过了五年,也没打算离开设计这个行业.即便有一天不再从事设计专职的岗位,也仍然会在生活中,或者一些份外的工作中做「设计师」的角色,因为设计已成 ...

  2. 8个设计师必看的免费UI图标设计资源站

    图标是我们日常APP及网页设计过程中必不可少的元素之一,通过小小的图标,可以快速方便的实现视觉引导和功能划分.在创作时,我们需要寻找各种各样的图标来满足自己的设计需求,非常浪费时间和精力.今天,小编给 ...

  3. 前端标注软件-pxcook像素大厨使用心得

    我们在日常开发过程中,设计师给提供的UI图,经常需要标注尺寸,有时候设计师难免会遗漏标注,这样就会大大的增加我们的沟通成本,因此,使用一款好用的标注软件就尤为重要,我推荐这款标注软件---pxcook ...

  4. Capslock+ 键盘党都爱的高效利器 - 让 Windows 快捷键操作更加灵活强大

    Capslock+ 键盘党都爱的高效利器 - 让 Windows 快捷键操作更加灵活强大  优化辅助    Windows   2016-06-05 91,167   微博微信QQ空间印象有道邮件   ...

  5. (转)每位设计师都应该拥有的50个CSS代码片段

    原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...

  6. 2018年设计师都在用的PS切图插件--摹客iDoc

    终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...

  7. 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记3 Xcode、Auto Layout及MVC

    继续上一话中的计算器Demo.上一话讲到类必须被初始化.类中的属性也必须被初始化,所以你不能仅仅声明而不给它一个处置,那么问题来了,我们从storyboard中拖拽的@IBOutlet为什么仅仅有声明 ...

  8. 面试 HTTP ,99% 的面试官都爱问这些问题

    HTTP 和 HTTPS 的区别 HTTP 是一种 超文本传输协议(Hypertext Transfer Protocol),HTTP 是一个在计算机世界里专门在两点之间传输文字.图片.音频.视频等超 ...

  9. NoSQL初探之人人都爱Redis:(1)Redis简介与简单安装

    一.NoSQL的风生水起 1.1 后Web2.0时代的发展要求 随着互联网Web2.0网站的兴起,传统的关系数据库在应付Web2.0网站,特别是超大规模和高并发的SNS类型的Web2.0纯动态网站已经 ...

随机推荐

  1. java第一课总结

    转眼间开学了,我们也正式进入了大二.心里既有激动,又有些感慨,还带有一些担忧.激动的是我们褪去了大一的稚气成为了一名大二的学长了,第一次体会到了大学学长的感觉,心里很是激动.感慨的是我们又成长了一岁, ...

  2. Python __init__ 特殊方法

    在Python中有很多以双下划线开头且以双下划线结尾的固定方法.他们会在特定的时机被触发执行. __init__ 就是其中之一,它会在实例化之后自动被调用.以完成实例的初始化. >>> ...

  3. django admin后台设置

    #encoding:utf-8 from django.contrib import admin from son10.models import * # Register your models h ...

  4. python 内置函数(二) 进阶函数 递归内容及二分法查找 知识点

    1,lambda:  匿名函数 2.sorgted()  排序函数 3,filter()   过滤函数 筛选 4,map()  映射函数 5.递归 6.二分法 一. 匿名函数: lambda lamb ...

  5. Log4j2配置及使用

    Log4j2:一个日志管理工具.Log4j的升级版,需要Java6以上   一.安装log4j2依赖包 1.通过maven的pom.xml直接引入jar: log4j-api和log4j-core & ...

  6. Android 各个版本新特性

    一.Android 4.x 新锁屏界面: Android4.0重新设计了锁屏幕UI,下方的解锁虚拟按键向周围发射出微光,轻轻拖动就可以解锁,比原来在UI上确实有很大的进步. 全新Widget排列: 主 ...

  7. jggrid应用,后台c#

    参考网址: 1.https://www.cnblogs.com/miro/p/jqGrid.html 2.https://blog.csdn.net/ainuser/article/details/6 ...

  8. Windows 64 位 mysql 5.7.20 安装教程

    mysql 5.7以上版本包解压中没有data目录和my-default.ini和my.ini文件以及服务无法启动的解决办法以及修改初始密码的方法 mysql官网下载地址:https://dev.my ...

  9. 当前的开源SLAM方案

    开源方案 传感器形式 地址链接 MonoSLAM 单目 https://github.com/hanmekim/SceneLib2  PTAM 单目  http://www.robots.ox.ac. ...

  10. Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'information_schema.PROFILING.SEQ' which is not functionally dependent on columns in GROUP BY clause; this

    最近使用新版本的mysql,执行语句的时候报错.网上找了一下,解决方法如下: vim /etc/mysql/conf.d/mysql.cnf [mysqld] sql_mode=STRICT_TRAN ...