交互说明标注工具合集

最近很多同学在问交互原型里里的标注怎么做的?

其实很多原型工具可以做到例如Axure、justinmind,但是做起来比较慢且不美观。有没有专业的工具呢?这不我们介绍几款常见的产品。

 

Y3VV4G~{[GRPQ(S3J)(N)XF

Specctr

首先是由 Onpixel 开发的 Specctr ,这是一个 Firework 的外挂套件、具有可沿续原本工作环境流程以及跨平台的优点,该程序提供试用以及 Lite 的免费版可以下载

Pxcook 像素大厨

像素大厨师我目前使用的标注工具,为啥选择这个工具呢,就是因为这个工具除了标注功能外,还多了一个 PSD 文件切图,也就是传说中的一键切图功能。只需要你的 PSD 文件是按照官方提供的要求,就可以快速切图。

切图教程
http://www.fancynode.com.cn/tutorial

除了常规的标注功能外,像素大厨还有一些有特色的地方,比如 px 和 dp 单位的切换,标注的长度数值可以手动修改(设计稿偷懒神器,慎用)等。同样的像素大厨也是支持多次修改标注文件和实时刷新功能。切图功能能够方便的切出 Retina 双尺寸,需要切出的图层或者图层文件夹只需要加上「.jpg」或者「.png」即可。

交互说明标注工具合集

Pxcook 像素大厨 http://www.fancynode.com.cn
功能
  • 长度标注
  • 矩形标注
  • 颜色标注
  • 文字说明标注
  • PSD 文件切片

标你妹

image

image

MarkMan 马克鳗

马克鳗我是最早从它们免费 beta 版开始用的,一直用来做设计稿的标注说明非常方便。现在这个工具已经做的非常不错了,已经开始走收费路线了为 ¥60 一年,不过也可以免费使用(部分功能不支持)。

马克鳗支持直接打开 PSD 文件,当然 PNG、JPEG 文件的支持也不在话下,如果是收费版,马克鳗还支持多次修改调整标记文件(会生成相应的标注文件,请勿删除)。马克鳗还有一些其他特点,比如设计稿自动刷新、支持 Retina@2x 图片标注、标注样式自定义等。

交互说明标注工具合集

MarkMan 马克鳗 http://www.getmarkman.com
功能
  • 长度标注
  • 坐标、矩形标注
  • 颜色标注
  • 文字说明标注

学会为设计稿做好标注(附工具推荐)

网页设计师与WEB前端之间的合作可以说是最常见的状况了,Photoshop、Illustrtor 以及 Flash 等可视化的设计工具与前端HTML有着不同的性质,网页设计师的工作是让网页看起来更美观、排版更协调等、因此利用这些工具方便快速地做视觉上的调整。而WEB前端则是必须设法将这些完成后的设计透过HTML实现出来。尤其在 Flash 日渐式微以及HTML5 蓬勃发展的现在越来越常遇到。
因此,网页设计师最好能在制作完排版设计后,为图像做清楚的标注,让接手的WEB前端更快的进入制作状况,常见需要标示的状况如下所示:

  1. 预备使用HTML语言制作的按钮等互动组件的色彩、尺寸以及细节等
  2. 版面上各组件彼此间的距离等
  3. 其他常见必须标示的环节

因此这张标示图差不多会长这样 (示意):

交互说明标注工具合集

但有时候太多信息在画面上也容易造成阅读跟制作上的困扰,因此注意以下几点,会让你的信息传递更明确:

  1. 将同种类信息摆放在一起、并整齐排列,让人一目了然
  2. 标注色彩清晰、勿使用会与背景难以分辨的色彩
  3. 标注与图像本身间预留适当间隔,以不扰乱图像本身为原则
  4. 切勿重复标注

交互说明标注工具合集

虽然清楚的标示可以免去很多沟通上的困扰,但是要 Photoshop 跟 Illustrator 中加入这些标示还是个可怕的噩梦,尤其是遇到重复修改的状况时,这件工作真的会让人受不了。其实除了在这些常用绘图软件土法炼钢绘制这些标示图以外,有许 多软件开发者开发了许多好用的小工具,节省大家浪费花费的时间与精力。

MarkMan(马克鳗),使用 Adobe AIR 所开发,因此也有着跨平台的特性,虽然是简体中文,但是所有的按钮都经过图形可视化,接口也相当精简明确,并不会造成使用上的困扰。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/13899/

(0)
iouedioued
上一篇 2016-04-06
下一篇 2016-04-07

相关推荐

  • 交互设计快速检查清单 Interaction Design Quick Checklist

    #交互学堂#交互设计快速检查清单 Interaction Design Quick Checklist [one_half_col] 架构和导航Architecture and navigation Note 􀂅 是否采用了用户熟悉或容易理解的结构? 􀂅 是否能识别当前在网站中的位置? 􀂅 …

    2016-11-09
  • 无限滚屏、分页亦或加载更多,到底怎么选?【UXRen译#139】

    作者:Christian Holst(翻译:xiuxiu  审校:Gogi) 电商网站里展示商品的最佳交互形式是什么?是分页、“加载更多”按钮还是无限滚屏?我们在Baymard机构开展了几项持续整年的大规模可用性测试,研究了50多家主流电…

    2017-08-04
  • 探究当前数据可视化的用户体验设计趋势

    作者:Jake Rocheleau 译者:ITsCrystal   我们发现,对后台设计的技巧通常不会像普通网页布局设计那样公开分享。这是因为我们通常很难在网络上找到后台的一些样例。由于要进入后台界面都需要账户和密码,所以很多…

    交互专题 2017-08-07
  • 从产品到交互·2015同济设计学考研经验

    【写在前面】 我叫徐晨,来自陕西西安,毕业于兰州理工大学工业设计专业。2015年我参加了研究生入学考试,也如愿考上了同济大学创意学院的研究生。想想当初独自备战,其实都是在黑暗中摸索,曾经也担心自己的复习方…

    2015-11-08
  • 谷歌眼镜UI设计规范

    今天跟大家分享的是关于谷歌眼镜UI的设计规范,欢迎下载学习~   下载请点击:《谷歌眼镜UI设计规范》

    2014-12-09
  • MAC应用无法打开或文件损坏的处理方法

    很多朋友们在安装软件时Mac OS系统出现提示“XXXApp 已损坏”或“不是Mac Appstore下载的。您应该将它一道废纸篓”这样的提示,怎么回事呢?要怎么解决呢? 其实很多时候往往这些软件可能是经过了汉化或者破解,所以被Ma…

    2016-06-07
  • 什么是用户体验文案设计?【UXRen译#164】

    作者: Kristina Bjoran  |  翻译:陈馥丹,校审:小四   有一种新的职业出现了,嗯,也许不是“新”的,但可以肯定的是这种职业出现次数会逐渐增加,像谷歌、亚马逊、Dropbox、Paypal……许多大型科技公司正在寻找UX文…

    交互专题 2017-08-07
  • 前Apple员工谈交互设计的未来【UXRen译#177】

    作者:Bret Victor  |  翻译:包子,校审:Chen Jing   现在,有很多流行的有关未来交互设计的想象。 机缘巧合下,设计未来的交互界面成为了我的工作。我有机会用真正能工作的原型来做设计,而不是如图所示用绿光屏…

    交互专题 2017-08-30
  • 【干货下载】Axure 元件库- 常用元素1056枚下载

    一套 Axure 常用元件库 " 元素库 - icons_64x64 for Axure " 方便 PM、UE 做原型设计时使用, 减少找图标、切图标的时间,提升工作效率。 元件库使用说明: <一> 将“.rplib 文件” 载入元件库 即可使用。 <…

    资源下载 2014-11-05
  • 从谢尔丹认识交互设计

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。如同武侠世界里的隐居剑客,高手榜上虽没它的名字,但江湖中处处是它的传说。交互设计了解一下交互设计(英文Interaction Design, 缩写IXD),是设计系统动态、人机互动方式的领域,通俗来说就是“用户...

    2018-04-17