MAC平台的设计师/交互 都知道,在MAC下绘制流程图工具不多,常用也就 OmniGraffle 和 Axure,我本人用 Axure 感觉体验一般,用久了感觉卡顿不说,还导致MBPR烫手的很,冬天还行,夏天那就狗血了。

SO,OmniGraffle(OG)就成了主力绘图软件。

在OG下,有非常多的模板 (型板)可选,而且支持自定义模板,而且标注线会跟随型板自动移动,关键是交互做的还算可以。

不过OG好是好,差强人意的地方还有很多,比如说贵……还比如说,插件少的可怜,有时候很简单的事情却只能手动一点点去做,实在郁闷,好在OG提供了一整套JS绘图接口和API说明文档,有了这些,就可以自己DIY一些功能了。

下面介绍一个我写的小工具:

自动标注颜色插件:

需求场景:在做交互设计时,有时候页面上有很多图形,这时候如果你想给每一个图形标注一个相应的颜色,就比较麻烦了。

原来的做法:需要先选中图形,然后在对象面板 ---> 填充色 ----> 打开颜色面板 ---->找到GRB 颜色滑块 复制 十六位 颜色值 ----> 最后在需要标注的地方粘贴颜色值。

使用插件:先选中需要显示色值的图形 ----> 点击插件按钮 -----> 完成

目前插件有两种方法,一个是直接在选择的色板内写入当前图形的填充色号;另一个方法是创建一个新图形,然后在图形上写入颜色值。

使用效果如图

如何使用

  1. 复制下面的代码:
// COPY & PASTE into editor app. EDIT & SAVE with “.omnijs” file extension.
/*{
	"type": "action",
	"targets": ["omnigraffle"],
	"author": "idken",
	"identifier": "idken",
	"description": "可以给图形加一个颜色标识",
	"label": "标注色号",
	"paletteLabel": "标注色号"
}*/
var _ = function(){
	var action = new PlugIn.Action(function(selection, sender){
		// action code
		// selection options: canvas, document, graphics, lines, solids, view
		//graphic = selection.graphics[0]
		//代码开始
		if (document.windows[0].selection.graphics.length != 1) {
		    title = "SELECTION ERROR"
		    message = "Please select a single graphic."
		    new Alert(title, message).show(function (result) { })
		} else {
		    cnvs = document.windows[0].selection.canvas
		    graphic = document.windows[0].selection.graphics[0]
		    var doc_cen = graphic.geometry.center 
		    const doc_x = parseInt(doc_cen['x'])
		    const doc_y = parseInt(doc_cen['y'])
		    solid = cnvs.newShape()
			solid.shape = 'Rectangle'
		    solid.geometry = new Rect(doc_x, doc_y - 15, 100, 30) 
		    const bbc = graphic.fillColor
		    const rr = (Math.round(bbc.red * 255)).toString(16)
		    const gg = (Math.round(bbc.green * 255)).toString(16)
		    const bb = (Math.round(bbc.blue * 255)).toString(16)
		    const new_text = (rr + '' + gg + '' + bb + '')
		    solid.text = '#' + new_text.toUpperCase()
		    solid.shadowColor = (null)
		    solid.cornerRadius = (3)
		    solid.fillColor = Color.RGB(1, 1, 0.749)
		    solid.strokeColor = Color.RGB(94/255, 109/255, 130/255)
		    solid.strokeThickness = (0.5)
		    
		}

	});

	action.validate = function(selection, sender){
		// validation code
		// selection options: canvas, document, graphics, lines, solids, view
		if(selection.graphics.length === 1){return true} else {return false}
	};
	
	return action;
}();
_;

2. 打开一个文本编辑器,把代码粘贴过去,然后另存为 Color number.omnijs 文件

3.打开OG,顶部菜单栏 ---> 自动化 ---> 插件,会打开一个文件夹,把刚才创建的Color number.omnijs 文件放进来。

4.重启下OG,然后在菜单栏上点击右键 ----> 自定义工具栏 找到‘标注色号’这个icon 然后拖动 按钮到顶部的工具栏即可。

5.先选中需要标注的图形,然后点击按钮即可Enjoy啦

直接在图形上面写入颜色代码:

if (document.windows[0].selection.graphics.length != 1) {
    title = "SELECTION ERROR"
    message = "Please select a single graphic."
    new Alert(title, message).show(function (result) { })
} else {
    cnvs = document.windows[0].selection.canvas
    graphic = document.windows[0].selection.graphics[0]
    const bbc = graphic.fillColor
    const rr = (Math.round(bbc.red * 255)).toString(16)
    const gg = (Math.round(bbc.green * 255)).toString(16)
    const bb = (Math.round(bbc.blue * 255)).toString(16)
    const new_text = (rr + '' + gg + '' + bb + '')
    console.log(rr + '' + gg + '' + bb + '')
    graphic.text = '#' + new_text.toUpperCase()
}

这个比较简单,使用时直接显示控制台,然后点击需要写色号的图形,按Enter就行了。再次使用时可以按住上下箭头再重复。

已知问题:目前版本只支持带有底色填充的图形,如果图形颜色为空,则会报错。