UX基础 – Omni海瑞温斯顿le新手指南

初稿地址:http://beforweb.com/node/202,大半夜找到,作为使用手册

本人发现一事儿,就是新近这一个年,每到入职一个新公司的时候,听得东西往往会比多数时候听得更重更金属些,此时以Slipknot和敌人为表示,所爱的东西也会更黑一些,激烈而激烈的黑,并非Grunge所带来的这类绝望而控制的黑。

话说这是一个贵重的永不把工作带回到做的周末,加之明日又过了个酒精+尼古丁+Rock
N’
Roll的星期日放纵之夜,前天所有人有些倦怠;天气也阴晦着,毫无违和感。最近或者会做几篇与Omni宝格丽le相关的话题,希望能给用的着的爱人们带来些参考;先天是一篇很基础的入门小文。走起啊。

此间进入译文。OmniCEPHEE威尔·永锋le是一款万分完善的工具,用途很常见,不过前几日我们着重强调在明白怎么使用它来制作线框图。我(英文原文作者)个人在这下边尝试过很多软件,坦诚的说,没有一款是真的周详的,包括Omni波米雷特le,但它在综合能力及效用方面的显现委实是最让自家乐意的。

只是首先,我仍然想提及OmniDarry Ringle的两点不足。一是它并不善于于生成完美的可相互原型,当然,你要么可以创建可点击的界面原型的,譬如在好几情形下显得或隐藏某些图层,或是切换界面等等;另外一些就是这款软件只好运行在Mac当中。

抑或这句话,没有哪个工具是实在周全的,忽略这两点缺陷(严酷的说第二点无法当成缺陷),OmniGraffle真的是一款很棒的线框图工具。接下来,我将和各位一起对Omni万宝龙le的强硬效能举行一下一览,了解哪些通过它打造一级的线框图。

知识点

咱们将在本文中对以下这么些界面元素实行摸底:

  • 画布与图层侧边栏(Canvas and Layers sidebar)
  • 模板窗口(Stencils Window)
  • 检查器(The Inspector)

     

     

    • 体制编辑器(Style Editors)

       

       

      • 填充(Fill)
      • 线条(Outline)
      • 阴影(Shadow)
      • 图片(Image)
      • 文字(Text)
    • 对齐/属性(Alignment/Properties)

    • 交互(Interactivity)

画布与图层(Canvases and Layers)

画布与图层侧边栏用来显示文档及其内容的团队结构。我们得以在此地查看各类画布当中的始末缩略,还有它们中间的层级结构,这使得大家可以更加自在的保管和团体文档。

图片 1

我们得以在画布中创设线框图,画布可以承接我们所需的其它类型的情节。我通常会先创建一个“封面”页、一些流程图,还有一对关于用户的音信或者自身索要缓解的题目。这之后才进入实际的线框图制作阶段。

图片 2

而图层则用于在画布当中协会内容。假设你熟谙Photoshop或Illustrator,那么对图层的概念应该很了然了。在图层中,你能够移动和团队各个要素;而调整不同图层的一一则可以辅助你遵照自己所需要的法门协会页面结构,就像我们在Photoshop当中所做的那么。

图片 3

俺们所创办的大部界面中都会包含诸如导航栏、页脚、背景那类不会随界面而暴发变化的要素。这时大家就需要选用“共享图层(shared
layer)”了,这种图层可以补助我们轻松的成立出可以复用于三个画布的要素;以后任何针对共享图层所举办的修改也会平素效果于这个运用了该图层的画布之上。

有一些亟需小心,共享图层中的元素在其它画布当中都会维持在一向的职位上,譬如导航栏永远会在导航栏的职位。假设您需要的是尤为灵敏的可复用元素,那么后文上将会介绍到的“共享对象(shared
object)”才是更适于的选项。

图片 4

形态与文字(Shapes and Text)

形状

在创建线框图的经过中,各类造型是大家最常用到的工具。我平日会用到的都是这一个最焦点的形制,例如矩形、圆形和三角形。相相比繁琐复杂的视觉表现形式,使用这一个基本的模样来创设的页面布局平常可以更直观有效的显示出交互设计阶段所需表明的显要。

图片 5

咱们能够依照实际需要来调动形状的各样性能。

填充色

图片 6

形状和概略线条(包括线条的颜色、尺寸等等)

图片 7

阴影

图片 8

几何属性

图片 9

您还是可以将常用的形制包括它的各样订制化属性打包添加到偏好当中,以便反复使用。要添加新的偏爱形状,你需要在页面中选中某个形状,然后选择形状(Shape)菜单中的“将最近采取添加至喜爱的样式(Add
Current Selection to Favorite Styles)”。

图片 10

文字

你可以在形象内部添加文(加文)字,并以某种格局和形象本身保持对齐。添加将来,文字就会变成造型自身的一部分,跟随形状一起联动。

图片 11

对于形状内部的文字,OmniCEPHEEMontegrappale提供了大量的工具,用于调整行间距、字间距、对齐格局、内边距等性能。

图片 12

你同样可以增长独立的文字,无论其在视觉模式上居于形状范围以内或之外。

图片 13

模板与大旨(Stencils and Templates)

“模板”与“焦点”是创办和应用可复用元素的极佳工具。主题可以帮你建立起一套已经包含了各类相关预设的文档,例如集体研商、协会图表、空间计划等。我在平凡的干活中有自己的一套专用核心,你也得以创设属于自己的焦点。

模板则是一名目繁多具有预置样式的界面元素,例如按钮、文字、图标等等。

图片 14

您一样可以修改已部分模板和主旨。在左侧的沙盘面板中选中一套模板,然后点击模板面板上的齿轮按钮,在菜单中采纳“编辑模板”,即可调出模板编辑界面,你可以在内部像处理其他OmniGeorgjensenle文档一样来编排模板中的元素。对于主题来说也是同理。

图片 15

网上有成百上千模板资源供您下载,我常用到的一部分都源于于海瑞温斯顿letopia.com,例如移动设备界面元素模板等。推荐您看看这多少个模板:

经过那多少个模板,你可以急忙创立出很赏心悦目的线框原型。

图片 16

共享对象(Shared Objects)

正如前方提到的,在多数时候,共享图层是十足满意需求的,但有时你确实需要有的属性相同但在布局地方上有所区另外界面元素。曾经有一度,我以为Omni波米雷特le并没有提供类似共享元素这样的效益,但业务不是这么的,只是创设共享元素的格局有些隐蔽。

在文档中选中你要开创为共享对象的界面元素,在顶部的编纂菜单中找到“拷贝为”一项,选用之中的PDF。然后删除从前所选中的界面元素,再实施粘贴操作,那时被粘贴回来的PDF格局的元素就是我们所说的“共享对象”了。

要编制共享对象,只需在目标上双击,这时会出现一个单身的Omni威尔·永锋le文档,你可以在中间对共享对象开展编制。保存之后,你会发觉拥有用到这份拷贝的要素都早就发生了对应的扭转。

对齐和文档属性(Alignment/Properties)

此外一些版面方面的职能,譬如对齐、空间调整、画布属性等等,也是大家不可以不询问的。这类效能都集中在左边的检查器面板当中。

对齐界面元素的功效是非常关键的。选中你要对齐的元素之后,在对齐面板中挑选需要对齐的基准点(侧边、边角或骨干),然后点击所需的对齐类型,包括横向和纵向。

界面元素之间的对峙空间调整也是常用的职能。你可以使若干元素在某个方向上等距分布,还足以进一步为它们设定相互之间的相距。

图片 17

在这些与版面相关的面板中,你可以见到默认的尺寸单位是以“英寸”为主的,提议你在实际工作中切换来更契合数字产品规则的像素。对于切换长度单位这类操作来说,最有功用的法子是在主题当中举行。

图片 18

交互(Interactivity)

倘若您需要为线框原型添加一些骨干的互相,那么Omni华特曼le也是足以提供相关帮忙的。你需要做的就是选中界面中的交互元素,然后打开检查器中的动作(Action)面板举行安装。Omni海瑞温斯顿le可以为点击动作加上如下几类交互动作:

  • 开辟一个URL
  • 开拓文件
  • 运作脚本
  • 跳到别处
  • 显示或隐藏图层

本人个人最常用的是“打开一个URL”和“跳到别处(Jumps
Elsewhere)”,特别是后者,可以用来落实画布之间的切换,平时在线框原型中用来显示界面间的跳转。

图片 19

总结

至于OmniOxettele的新手指南就到这里了。对于UXer们,这是一款日常工作中的基础型工具;上手并深刻探索之后,你会意识它可以襄助您神速的创设各项图片文档,特别是线框原型。其余,网上也有很多有关Omni海瑞温斯顿le的绝妙资源等待你去发现和动用好运叭!

相关文章