GUI Design Studio----如何创建交互式设计(一)

9.1 交互能力
       能够快速创建单个屏幕的设计非常有用,但是GUI Design Studio的真正功能在于可以图形化地描述应用程序的工作流程,然后将其作为交互式原型运行。
       目的是演示其背后的设计和思想。有了这些,您就可以从其他人那里获得反馈,探索替代方案以及“如果...怎么办”?场景,确定设计中缺少的内容,并找出可以忽略的内容。
       但是,了解这些原型的局限性很重要。这是用户界面设计工具,而不是应用程序开发工具。当前支持的行为包括在窗口之间导航的功能;单击屏幕元素,使另一个模态或非模态窗口,面板或其他项目出现或消失。这包括创建级联菜单,弹出模式对话框,组合框下拉菜单,选项卡式界面和许多其他惯用法。
       速成版
       在GUI Design Studio的Express版中,单个控件的交互性受到限制。因此,例如,您可以滚动列表,但不能在编辑框中键入内容或更改复选框的选中状态。
       专业版
       GUI Design Studio的专业版支持更广泛的交互功能和数据值存储,可用于评估条件并在运行原型时提供不同的方案和界面选项。
9.2 运行原型
菜单命令:Menu command: Run | Run Prototype        F9
                 Run | Run Prototype from Main Design        Ctrl+F9
       要在活动设计文档上运行原型,请使用“运行|运行原型”菜单命令,工具栏按钮或直接单击F9。
       如果已经为项目设置了主设计,则可以使用“从主设计运行|从主设计运行原型”菜单命令或Ctrl + F9键盘快捷键在该设计上运行原型。
       这将打开一个全屏窗口,并显示该设计的代表性元素(如果未设置代表性元素,则显示整个设计)。
       然后,您可以通过跟随该设计上的任何导航链接来与该设计进行交互。 这些通过鼠标光标变为手形图标来指示。
       注意:运行原型时,注释和其他仅用于设计的项目(例如网格线)不会出现。
9.3 停止原型
键盘:    Escape 
              Shift+Escape
       当您关闭窗口时,没有任何可显示的内容,原型将自动关闭。例如,如果您的设计仅包含一个对话框,而您单击了“确定”或“取消”按钮。
       如果您导航到设计中的“退出”框,则原型也会关闭。
       您可以通过按Escape键在当前模式级别关闭所有窗口。因此,反复按Escape键将关闭原型。您还可以使用Shift + Escape从任何模式级别立即关闭Prototype。
       当您关闭窗口时,没有任何可显示的内容,原型将自动关闭。 例如,如果您的设计仅包含一个对话框,而您单击了“确定”或“取消”按钮。
       如果您导航到设计中的“退出”框,则原型也会关闭。
       您可以通过按Escape键在当前模式级别关闭所有窗口。 因此,反复按Escape键将关闭原型。您还可以使用Shift + Escape从任何模式级别立即关闭Prototype。
9.4 创建故事版文件
菜单命令:File | New 
                 Project | New Design...
       创建新的故事板文档与创建新的设计文档完全相同。实际上,两者之间没有真正的区别,只是概念上的区别。
       可以将基本设计文档视为单个屏幕(例如应用程序窗口,对话框或控制面板等)的布局。使用此文档来注释设计,记录注释并提供任何组合框下拉菜单。
       然后,将故事版文档视为设计组件的组合,这些组件描述了如何从一个屏幕导航到另一个屏幕。通过将工作流程设计放在单独的文档中,可以使整个项目更易于管理,并且可以通过重复使用相同的设计来创建不同的故事板和替代工作流程。
9.5 选择代表性元素
菜单命令: Design | Set Representative Element        F10
                  Design | Clear Representative Element
                  Design | Use Default Representative Element
                  View | Default Element Box
       在设计文档(特别是故事版)上运行原型时,它需要知道哪个是顶级元素或代表元素,以便知道从哪里开始。否则,将假定设计中的所有元素都是同一屏幕的一部分,并全部显示。
       例:

                                           
       如果此设计在“原型”中运行,则将显示对话框和属于组合框的列表(没有连接箭头)。通过选择对话框元素并使用“Design | Set Representative Element”菜单命令或F10键,原型将了解我们的意图并仅显示对话框。代表性元素在设计上用绿色框表示:
                                          
       默认代表元素
       为了简化在大多数情况下的使用,可以自动选择设计中的最后一个元素(通常是添加的第一个元素)作为默认的代表元素,因此省去了手动设置的麻烦。这显示为绿色的伪框:
                                          
       通过选中“设计|使用默认代表元素”菜单选项来启用此选项。如果已显式设置代表元素,则禁用此功能。
       如果要创建概念线框设计,而您希望将设计中的每个元素都包含在单个屏幕中,请取消选中该选项。
       默认情况下,所有新设计都选中此选项,但是为了保持与2.4之前版本中创建的设计的向后兼容性,现有设计文件中的该选项未选中。这是为了在未设置任何明确的代表元素的情况下保留现有行为。
       删除代表性元素
       如果需要删除所选的代表元素设置,请使用“设计|清除代表元素”菜单命令。如果在设计菜单中选中了“使用默认代表元素”选项,它将还原为自动选择的元素。否则,它将完全删除它。
       隐藏默认代表元素框(v4.3中的新增功能)
       如果要将设计捕获为图像,将其复制到剪贴板或导出到文件,并且需要排除默认的代表性元素框,则可以使用“查看|默认元素框”菜单命令将其隐藏。完成后,请记住重新打开此选项。
9.6 选择主要设计
菜单命令:Project | Set Main Project Design To:        Ctrl+F10
                 Project | Clear Main Project Design
                 Run | Prototype Options...
       运行原型时,可以选择从项目的主要设计文件开始(如果存在),或者从当前活动的文档开始。通过从主设计开始,您可以更改其他设计文件,并立即从主设计运行原型,而无需先查找它。这可以节省时间。
       要指定项目的主要代表性设计,请打开设计文件或单击其选项卡(如果已打开)以使其成为活动设计,然后使用“项目|将主要项目设计设置为:{文件名}”菜单命令。然后,设计文件将出现在项目文件树中,带有绿色图标作为可视指示器:

                                                           
       注意:如果需要删除代表性的设计设置,以使该项目没有主设计,请使用“项目|清除主设计”菜单命令。
9.7 添加导航链接
菜单命令:Design | Make Connection        F4 (or Shift+F4) 
工具栏按钮:
                                                                              
       导航链接是创建工作流故事版并将其转变为可行的演示原型的关键。导航链接只是从一个元素(如Button)到另一个元素(如Dialog Box)的箭头,指示当按下Button时,对话框应出现。
       链接的不同类型可能导致窗口出现或消失,并且是模态或无模态。有关每个功能的说明,请参见“更改导航链接属性”。您还可以决定如何放置可见的窗口。
       创建链接
       使用“设计|建立连接”菜单命令,工具栏按钮或F4键进入“连接模式”。鼠标光标变为画线铅笔。并非所有元素都支持连接。在可连接元素上移动时,它们会用橙色框突出显示。
       单击代表连接开始或源的元素。当您移动鼠标时,橡皮筋线将出现,并且当您指向可以连接到第一个元素的元素时,将出现另一个橙色高亮框。
       单击目标元素以终止连接。两者之间将画一条直线,随着元素的移动,它们将保持连接状态,直到删除链接。
       如果在启动连接模式时按住Shift键,则可以继续建立新的连接,而不必重新选择命令。
       使用Escape键可以结束连接模式而不进行连接,或者再次使用“进行连接”命令将其关闭。
       不处于连接模式时,可以选择链接以更改其属性,例如线条颜色和宽度,链接类型以及触发方式。
       注意:一些允许来自各个子项目的连接的元素,例如列表框,表和树,可以允许来自任何/所有子项目的单个连接。这是通过在选择连接的开始或源的同时按住Ctrl键来实现的。
9.8 删除导航链接
菜单命令:Edit | Delete        删除
       导航链接的删除方式与常规元素相同。 选择要删除的链接,然后使用“编辑|删除”菜单命令,或直接按Delete键。
如果您以后改变主意,则可以使用“撤消”命令(“编辑|撤消”菜单命令,工具栏按钮或Ctrl + Z)。
       注意:链接必须在元素之间连接,并且不允许悬空。 因此,删除元素后,连接到该元素的所有链接也会自动删除。
       尽管您也可以使用“编辑|剪切”命令(Ctrl + X)删除链接,但是由于链接本身不能存在,因此将导致剪贴板空白。 但是,您也可以剪切并复制链接以粘贴到其他位置,只要还选择了它们连接的元素即可剪切或复制。
9.9 更改导航链接属性
菜单命令:编辑|属性... Alt + Enter
       导航链接具有其自己的属性集。您一次只能更改一个链接的属性。用鼠标选择链接,然后使用Alt + Enter快捷键,或直接双击该链接以打开其属性编辑器对话框:
       您在对话框中所做的任何更改都会立即应用到链接,以便您可以即时预览,除非在编辑框中必须使用“应用”按钮才能看到更改。
      点击“取消”将取消所有更改,并将链接恢复到打开属性编辑器之前的状态。
      单击“确定”将接受所有更改,但是如果您不喜欢它们或出错,则可以始终使用“撤消”命令(“编辑|撤消”菜单命令,工具栏按钮或Ctrl + Z)。
      除非您使用上下文编码系统,否则您可能要单独保留“线条颜色”和“宽度”。
      有关其含义的详细信息,请参见事件触发器和导航类型主题。
      您可以从同一源元素(例如按钮)创建多个导航。与使用的事件触发器匹配的所有链接都将按照创建链接的顺序进行导航。
      如果需要将多个连接上的导航属性全部更改为相同,则可以更改一个,然后使用“绘画属性模式”快速,轻松地将相同的属性应用于所有其他连接。
9.10 事件触发
菜单命令:编辑|属性... Alt + Enter
通过事件触发器,您可以选择触发导航的事件。其中大多数与鼠标事件有关:
您可以从同一源元素(例如按钮)创建多个导航。与使用的事件触发器匹配的所有链接都将按照创建链接的顺序进行导航。
                                                                       
事件触发:

Left Click

当您用鼠标左键单击元素时触发。

Middle Click

使用鼠标中键单击该元素时触发。

Right Click

使用鼠标右键单击元素时触发。

Left Double Click

使用鼠标左键双击该元素时触发。左键单击也将首先触发,并且如果被处理,则可以取消双击。

Middle Double Click

使用鼠标中键双击该元素时触发。还会先触发一次“中键点击”,并且如果操作成功,它可能会取消双击。

Right Double Click

使用鼠标右键双击该元素时触发。右键单击也将首先触发,如果处理,则可以取消双击。

Mouse Over

当鼠标进入和离开元素时触发。这等效于建立“鼠标进入”和“鼠标离开”连接。与“切换窗口”或“切换覆盖”导航一起使用以显示工具提示或悬停效果时,此功能最为有用。

Mouse Enter

当鼠标进入元素时触发。

Mouse Leave

当鼠标离开元素时触发。

Show

例如,首次将元素显示为“显示窗口”或“模式弹出窗口”的目标时触发,或在原型启动时触发。仅主要目标元素生成触发器,而不包含其任何包含的元素。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dylan55_you

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值