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

2013/07/15 28537

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

网页设计师与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

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计微博:拥有粉丝量40万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/markman

界面设计 交互设计师 HTML5 素材 用户体验设计 好文 UI 转场动效 设计师专访 设计师 设计规范 排版布局 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里