彩票走势图

原型设计工具GUI Design Studio应用教程:创建新的iOS设计库学习到的3个关键教训

翻译|使用教程|编辑:况鱼杰|2020-12-04 10:39:33.480|阅读 161 次

概述:Caretta Software的​iOS设计库是作为原始iPhone库的扩展而创建的,旨在取代该库以用于所有新项目。使用iPhone库中组件的现有项目应继续链接至该项目,但也可能链接至该新库。iOS库包含用于为Apple iPad,iPhone和iPod Touch应用程序制作原型的自定义元素小部件,组件和图标的集合。像这样创建库能够提供许多有关如何改进GUI Design Studio本身的想法,但也为库设计带来了一些有趣的学习经验。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

GUI Design Studio是一款用户界面及软件原型设计工具,适用于Web,桌面,移动和嵌入式软件应用程序设计。其快速、易于使用以及无需任何编码的优点,使其成为软件设计师,用户体验专家,业务分析师,开发人员,项目经理和咨询专家的首选原型设计工具。

点击下载GUI Design Studio


Caretta Software的iOS设计库是作为原始iPhone库的扩展而创建的,旨在取代该库以用于所有新项目。使用iPhone库中组件的现有项目应继续链接至该项目,但也可能链接至该新库。iOS库包含用于为Apple iPad,iPhone和iPod Touch应用程序制作原型的自定义元素小部件,组件和图标的集合。像这样创建库能够提供许多有关如何改进GUI Design Studio本身的想法,但也为库设计带来了一些有趣的学习经验。

以下是学到的三个关键课程,它们可能对您创建自己的设计库以重用自己项目中的小部件和组件很有用。

规划图书馆结构时要三思

当生产原始的iPhone库时,总是有人想生产一个单独的iPad库。但是,当开始使用iPad库时,很快意识到,两个库中出现的相同小部件存在很多重叠。如果苹果曾经生产过另一种具有类似UI的iOS设备,那么重叠问题将会恶化。不仅如此,还需要针对两个平台设计许多iOS应用程序,因此单个设计项目可能包含两个目标的屏幕。虽然分别链接到iPhone和iPad库仍然很容易,但仅需要一个库就很有意义。


最后,为iPhone组件保留了几乎相同的文件夹结构和文件名,并为针对iPad的新添加内容添加了“ iPad”标签。因此,如果设计文件或文件夹包含“ iPad”,那么它就是它的用途,否则,它适用于iPhone或通用产品。对于小部件来说,还不错。该结构并不重要,因为与组件不同,小部件被复制到设计中,而没有引用它们的原始位置。

总的来说,只要经过一些前瞻性的思考和规划,我们就可以拥有一个更加一致的结构和命名约定,还可以避免过时的设计库浮出水面的问题。

将复杂的静态组件转换为图像以提高性能

虚拟键盘对于应用程序设计至关重要,因为虚拟键盘在激活时会占用大量屏幕空间。您需要设计您的应用程序,以便在您只有一半的屏幕可以播放时才能正常运行。但是,渲染构成iPad键盘的93层元素以及细微的渐变填充会影响性能。


那该怎么办呢?但是这样的设计仅用作静态组件。在原型中没有与他们的真正互动。在使用虚拟键盘的情况下,您将使用真实的键盘输入文本(直到在实际iPad上运行的日期)。

Caretta Software了解到,将设计转换为图像可显着提高性能,因为所有单独的图层均被单个图像替换。而且只需几秒钟即可完成,因此如果您需要更改设计并重新创建图像,这没什么大不了的:

  1. 打开设计后,使用“编辑| 复制设计图片”菜单命令(Ctrl + Shift + C热键)。
  2. 在项目文件树中选择目标文件夹。我们建议使用与原始设计相同的文件夹。
  3. 单击“将图像粘贴到文件”按钮或使用“项目| 将图像粘贴到文件…”菜单命令。
  4. 输入图像文件名。我们建议您使用与设计相同的名称,但当然要带有图像扩展名,而不要使用“ .gui”。

现在,您可以拖放设计的图像版本而不是设计文件。从一开始就使用实际的iPad键盘屏幕抓图,而不是花所有精力从元素重新创建然后将其变成图像,这是很诱人的。如果要创建供私人使用的库,这是可以接受的,但是在分发库时,版权问题将成为主要考虑因素。

考虑如何更轻松地重用自定义元素小部件

自定义元素(也称为小部件)是设计库的真正核心。除了最简单的小部件之外,所有小部件通常都由多个元素层组成。但是,如果没有以正确的方式创建它们,则在设计项目中使用它们可能会很尴尬。

良好的窗口小部件设计的关键是多花半英里,花一两分钟的时间检查它在重用中的性能,特别是当您要移动和调整大小或编辑文本或其他内容时。


自定义按钮小部件和分解图,显示了其从4个元素层的构造以及顶部,文本层调整锚点的大小。

在某些情况下,以下某些技巧可能不适用,例如在输入表单中组合多个控件时,但是如果您要创建一个独立的小部件,则在大多数情况下它们都是有意义的:

  1. 在将小部件作为整体进行移动时,完成小部件设计后,您应该采取的最后一个操作是选择所有元素(Ctrl + A)并将它们分组(Ctrl + G)。这样可以确保在选择顶层元素时,所有小部件元素都将一起移动。在编辑设计时,您可能需要在某个时候做相反的操作(选择全部然后用Ctrl + Shift + G取消组合),以使重新安排事情变得更加容易。
  2. 调整窗口小部件大小的能力由子节点上的“调整大小锚点”控制的位置父子关系确定。使用Shift + F8可以在图形编辑器中打开和关闭这些功能,或从属性编辑器的“位置”选项卡中访问它们。使用图形方法的一个优点是您可以同时影响所有选定的元素。
  3. 内容编辑很简单。通常,请确保将所有可编辑内容(如文本和图标)放在顶层,以便直接单击即可进行编辑。
  4. 有时,您必须通过在各个图层中组合可用的基本元素来发挥创意,以实现所需的效果。最后一个技巧是确保小部件具有包含整个内容的单个背景元素。将小部件拖到设计上时,将选择所有背景元素。如果只有一个,则该操作是干净的,并且假设调整大小锚点已正确设置,则可以调整该元素的大小以调整整个窗口小部件的大小。

最后,值得注意的是,每当您在设计中使用分层小部件并且想要选择背景元素以调整大小时,请记住,Tab键和Shift + Tab组合是您在选择的元素之间切换的朋友。

如果您觉得有用,请在下面发表评论,并与您的朋友和同事分享这篇文章。

查找更多界面类产品请访问用户界面专题|

如果您对GUI Design Studio感兴趣,可以咨询购买正版授权软件。

关注慧聚IT微信公众号 ☟☟☟,了解产品的最新动态及最新资讯。

1561953111.jpg


标签:iOS原型设计

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP