浙江 杭州

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

系统分类: 文章教程 - 在线工具 2016-10-06

人气6480

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

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

  1. 预备使用HTML语言制作的按钮等互动组件的色彩、尺寸以及细节等

  2. 版面上各组件彼此间的距离等

  3. 其他常见必须标示的环节

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


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

  1. 将同种类信息摆放在一起、并整齐排列,让人一目了然

  2. 标注色彩清晰、勿使用会与背景难以分辨的色彩

  3. 标注与图像本身间预留适当间隔,以不扰乱图像本身为原则

  4. 切勿重复标注

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

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

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

 
原文地址:dclick.fourdesire.com

http://www.appinn.com/dorado/

像素值的文字也是想放哪里就放哪里,操作自由度高了很多。无需安装,更加绿色,操作自由度更高的 Dorado 相信会在需要的时候帮上你的忙。

下载地址: uudisc | 来自小众软件 | 官方主页 | skydrive

一砂一世界,一花一天堂:微型设计专用工具Dorado

http://www.biaonimeia.com/

不同于markman等传统标注工具,无需设计师安装基于air等跨平台的插件安装包,只需要通过浏览器即可随时使用,无需担心更换不同电脑,而带来的不便。

具备以下特性:

? 标注元素宽高
选中元素,即显示元素的宽度与高度。无需您在元素上下拖拽画出数据标注

? 标注元素间距
选中元素,鼠标悬停到其他元素,即可获得之间的间距。

? 标注字体样式
选择文字,字体颜色、大小、名称等信息一览无余。

? 获取颜色值
想获取设计界面中某一颜色,只需吸管工具,轻松获取

? px单位自动转换dp/pt
数据单位值随意转换,不再担心程序猿白眼以待

? 适配分辨率自动识别
自动判断识别您设计的分辨率,自动适配设备分辨率单位值,2x、3x、4x通通搞定

我们相信,好的设计工具和设计流程,可以有效提升设计师的工作效率。这是一个分秒必争的时代,效率的提升,时间的节省,就意味着您的产品迭代将更快,成功的几率也就越大,进而为我们服务的用户、公司创造更多的价值!

https://specctr.com/cloud/home

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/art/uilearn-930.html 转载请务必加上该链接

评论功能关闭...(已有3 评论)