恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
10个用AI创建线框图的小技巧
0.0°
2014-07-16 自译外文 经验/观点 原作者: Ian Yates 举报 54657 239 83 7

10个用AI创建线框图的小技巧

现在,AI在网页设计的世界里又冉冉升起,不仅是可伸缩矢量图形越来越常被在线上使用,而且越来越多的设计师使用矢量来做线框图。下面的技巧可以帮助你更好的使用AI作为画线框图的工具。

线框图工作效率高,迭代快。使用线框图的目的不是去创造一个吸引人的交互界面,你首要的任务是去设计出一些信息和体验。

1. 使用单色调

线框图可以清晰的展示出一个网页的层级,视觉化地展示出来的顺序可以让用户更好的处理可用的信息。如果你想要用户在点击“立刻购买”按钮前先理解标题,那标题需要得到更多的注意力才能超过按钮得到的关注。

这个视觉化的层级结构visual hierarchy可以用很多方法去定义。我们可以使用文字的大小去让标题更加醒目,我们也可以通过位置(将标题放在按钮之前)的方法。我们还可以使用颜色、反差和一些其他的东西,但是在线框图里这么做那只会让事情更加复杂、使人迷惑。

通过移除等式中的颜色,通过位置来定义视觉上的关系、大小和反差(如果你还想要其余的步骤的话),这样将会更加清晰。

The warm monochromatic palette of Eric Miller Design's UX Kits

我们并不是在这里创建好看、完美像素的UI装备。使用有限范围的灰色调,然后可以使用带有其他颜色的标签和注释。

2.分类保存图层

说到标签,说明和注释,都是把每一个放在专用的层上的好办法。对于有一个特定目的的其他东西来说是一样的,例如:行为,交互,手势等等。

把图形部分放在一个层上,行为放在另一个层上,标签在一个层上,这样你就能在需要的时候轻松地结合它们的视觉效果。

3.利用符号

D.R.Y. 通常是被用作一个程序术语,但是同样可适用于设计工作流程。在任何一个现有的线框图,我们都将使用甚至是重复使用某些东西。把这些东西变成符号,而且你对某一个做的任意改变都将立刻在其他的东西上反应出来。

例如,这是一个简单的表格区域:

让我们拽动它变为一个符号面板(Shift+Command+F11)

我们现在能从符号面板中拉这个符号了,我们想拉多少次到画板上就拉多少次。通过双击它们中的任意一个,我们可以隔离选中它(有点像类型分组),然后我们就可以编辑了。我们做的任意改变(在这个例子里,我们把方角矩形变成圆角矩形)将会被用到每一个符号上还有每一个我们使用的表格区域符号。

以前我们会收集一些符号,我们也可以将它们做为一套保存起来。

这样就可以允许我们将来随时加载它们到其他文件里。

如果你还想了解更多关于符号画板,可以看看 Quick Tip: Working With Symbols in Adobe Illustrator.

4.对于绘图来说,箭头是最好的

最好的建议是去画箭头,这是自AI CS5后现成的、可以直接从描边盒子里调出来直接使用的。线框图是最理想的机会去视觉化的描述交互、应用流程、浏览和行为。

现在,我们可以轻松地直接从面边面板里添加箭头。

正如Ryan Cornwell所说的一样,我们甚至可以去编辑AI的资源“Arrowheads.ai”文件,添加我们自己制作的箭头。

笔记:让人很恼怒的是吸管工具并不能吸取箭头的样式,这样你就不能轻松的复制样式到其他的箭头上去。但是它们依旧是画线框图最好的方法。

5.通过对齐网格来统一间隔和大小

通过很多的方法,在这之前不能使用颜色。统一的尺寸和间隔可以从线框图中减少分散注意力的元素,这样就可以帮助我们从视觉上集中注意力在重要的东西上。

如果精确的尺寸并没有进一步地反应出UI的效果,这不要紧;只要层级结构和关系是真实的,那我们就可以进行下一步。

通过我的菜单栏里的视图>显示网格来使用网格。选择视图>对齐网格,这样就可以帮助你精确的放置我们的东西。

准确的规定你想要你的网格是怎样的(并且记住,你不是要在这里弄很小的细节)。点击进入AI,然后点击编辑,选择参考线和网格。在这里,你可以定义网格线与线之间的距离,然后输入你想要的次分隔线数目。

笔记:你可以随意选择你的网格的颜色,它不会是你最后产品的一部分。

6.使用图形样式加灵活的按钮

基于高保真的程度(你想要呈现出多真实的最终页面效果),你或许已经有精确的文字范围,例如:按钮(大多数人都是在按钮上添加文字)。基本上,按钮的大小决定于按钮上所添加的内容,不要使用对象,使用图形样式。

让我们用一个虚拟的文本做一个例子。

现在打开图层样式面板,窗口>外观

使用图层样式面板,你可以对同一对象添加多种填充方式。我们可以把这些填充分层堆放,这样我们就可以依次看到它们的效果,在这张图片里,我们可以看见部分都堆在另一个之上。

现在我们只需要两个填充,所有让我们添加一个深色的填充到文本上,然后对背景添加一个暗点的颜色。

现在,我们不能看见灰色的背景,因为它和最上面的填充是一个形状。然而,我们可以把每一个填充隔离并操作。在图层样式面板中选择最底部的填充,然后选择效果>转变为图形>圆角矩形..

进入设置,不管你怎样认为合适,只是确保大小尺寸相对于我们正在使用的对象的大小合适。

底部的浅灰色填充有文字的尺寸相对应的圆角矩形样式。一个按钮!应用相同的图形到其他的对象里,我们可以打开图形样式,拽动整个按钮到图层样式面板里。那这个按钮的图层样式就会保存起来以便我们下次使用。

例如,这有一个长一点的文字。选中这个文字,选中刚刚建立的图形按钮(我刚刚双击重新命名的),立刻就可以使用。

7.建立一些通用的、经常使用的画板

速度是画线框图特别重要的部分!胡乱地画一个布局,然后继续胡乱地画另一个布局,再继续。有一个早已做好、你可以轻松能做的起点,这是一个很重要的事。或许你首先已经在巨大的画板里找到你最好的工作了,把快要完成的对象分离成一个文件,或许你更喜欢直接使用大小合适的画板。

例如,这里是一个iPad屏幕(1536X2048px)的布局和四个iPhone4S的屏幕(640X960px),尽管你可以准备一个许多屏幕例子的文件。既不用手动地设置你偏爱的尺寸,也不从面板中选择任意一个现成的画布大小。

包括任意常见的指南——你可能用到的图层分类,符号集等,然后做为一个将来可以使用的模板整个保存下来。你可以点击文件>从模板中新建..来开始一个新的线框图绘制,在这个文件里,你可以使用你所保存的所有东西去完成绘制。

8.使用TextExpander工具去写虚拟文本

AI没有一个虚拟文本工具。这有一些值得用的一些原稿,但是把这些虚拟文本应用到你的AI线框图里最好的方法就是使用TextExpander工具。

笔记:也许你是一个Windows用户,PhraseExpress 提供了一个和TextExpander相似的功能。

你会发现你自己在画线框图时会经常使用一系列的文字片段(例如一个大标题、一个简短的标题、可变长度的内文、典型的按钮文本、菜单目录等等),添加这些文本,这样我们就可以直接在AI里快速使用了。

通过对每一个片段定义一个关键词,TextExpander将会在你输入关键词的时候用文本片段去代替,这样可以节约你大部分时间。你也能使用目录选项去确定这些文字片段只会在AI中有效果可以替代关键词。

可以更多地了解一下优化你的TextExpander的工作流程,看一看 Master TextExpander With These Helpful Tips & Tricks.

9.练习一下本地文件的命名

能快速的将改变和理念视觉化是相框图的核心,但是如果你不够细心、自信,这也能导致大量杂乱无章的文件。关键就是在重要的时刻保存,并且用命名法则有序的命名文件。

例如,我们或许想用我们正在做的页面命名文件。但是在不同的名字后加版本号命名可能才是明智的,例如:page-variant-version.ai。

例如,我们可能正在做一个登录页面;或者一个专注于提升而不是一个电子邮件的竞争,也不是一个电子书。我们也许能这样命名:

这样不仅可以保持文件夹有序,也可以使文件成为手动版本管理的形式。Matt Smith 在他的文章Wireframing With Illustrator and InDesign中讨论过这个观点。

10.为了轻松版本管理,随时上传到云存储

为了进一步版本管理,直接将你的文件存储到云,这样就可以直接将这个任务从你的待办事项中完全清除。甚至每30天,可以在云存储上免费设置一个计划将每次你保存的文件的副本直接保存到云存储上。

同样地,Layervault在它的免费计划里也提供相似的功能。

不论哪种情况,如果你与一个团队协作,这是非常有用的。将团队中所有成员的工作存储到一个云,如果某人不小心删除、或者修改文件什么的,能够从云存储中找回任意一个版本,这是非常理想的团队协作。

总结

这些技巧完全是我自己个人的工作流程及经验,或许不能完美的运用到你自己的做事方法上。但是,我希望它们至少可以给你灵感,让你能够在画相框图的页面布局有自己的方法。如果你有任何你自己的其他技巧,请通过评论将它们分享出来!

关于Ian Yates

我是Ian Yates,是Tuts+的网页设计内容的编辑。如果你有关于网页设计的问题要问我,我可以帮你找到知道答案的人。

更新:2014-07-16

收藏

239人已收藏

妖精-稀饭

写点什么吧

  • 12

    作品

  • 181

    粉丝

  • 11

    关注

  • 汪年-足迹
  • 咪咕爱看 UI重设
  • 一个设计师的2015年的设计决定
  • 一直都在学习

    猜你喜欢

      2014-07-16 自译外文 经验/观点 原作者: Ian Yates 举报 54657 239 83 7

      10个用AI创建线框图的小技巧

      0.0°

      你确定要举报10个用AI创建线框图的小技巧

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年07月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      83
      239
      7

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录