你如何勾勒出你的iPhone App设计和想法？

Question

如何勾勒出您的iPhone App设计和创意？我目前正准备开始我的下一个项目，并希望找到一种方法来在屏幕上获取我的想法而不是旧的老式纸张。

Answer 1

对于第一阶段，没有什么可以击败纸张。无论你使用什么工具，都会（希望）更准确，更确切。但是你需要花时间来达到这种准确性，而在UI设计的初始阶段，你需要的速度超过准确性。

我在索引卡上用几支不同的铅笔做我的设计。当我满意的时候，我正朝着正确的方向前进，我将卡片贴在一把尺子上，然后用iMac的相机拍下照片。然后我将它转换为B＆amp; W并做一个简单的亮度/对比度，试图让它们看起来尽可能好，我有一些合理的数字存储。

关于这一点的好处在于，如果您的Time Machine驱动器已经进入睡眠阶段，我可以在不远的时间内绘制一张粗糙的卡片。 :)我可以在更长的时间内做一个漂亮的卡。如果我想要更好看的东西，我可以编辑扫描或将其用作其他程序中的示踪剂。

（我按照项目将卡片放在拉链袋中。）

Answer 2

Balsamiq有一个很好的工具来进行界面设计的模型。他们还有一些iPhone组件。有一个我已经开始使用的在线演示（在看到另一个SO问题的答案之后）并且真的很享受到目前为止的经验。

Answer 3

MockApp看起来很棒！

Answer 4

的OmniGraffle。 （http://www.omnigroup.com/products/OmniGraffle/）当与各种iPhone模板结合使用时，如：（http://graffletopia.com/stencils/413和http://graffletopia.com/search/iphone），OmniGraffle会成为一个很棒的工具集。

Answer 5

我使用Teehan和Lax的这些Photoshop模板......

http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

alt text http://www.teehanlax.com/blog/wp-content/uploads/iphonegui_3_0.jpg

或整个iPhone和iPad模板列表：http://emilychang.com/2010/03/ipad-templates-and-stencils/

alt text http://emilychang.com/blog/wp-content/uploads/2010/03/ipad-gui-550x327.jpg

Answer 6

谢谢大家快速回复！

在对Balsamiq和MockApp进行测试之后，我得出的结论是，MockApp为我提供了设计我的应用程序所需要的东西，因为您可以准确地看到它的外观以及每个UI元素占用的空间类型。此外，通过使用Keynote或Powerpoint，你可以更进一步，将所有按钮连接起来，如果你需要提供这样的东西，就可以创建一个有效的演示，尽管这对我自己而言更耗费时间。不需要这个，但很高兴知道它在那里！

Balsamiq是一个使用速度更快，更容易的工具，但是它具有较少的库存UI组件，并且为设计提供了粗略的外观，如果您想要创建应用创意的快速故事板图像，那么它看起来很酷，但是对于实际设计，MockApp创建了一个更真实的外观，我相信更好。如果你想要更多的演示，那么Balsamiq的售价为79美元。

我之所以选择MockApp而不是所有其他解决方案的原因是我认为大多数已经在他们的计算机上使用powerpoint或主题演讲与Photoshop或Fireworks相比，虽然我确定你的计算机上是否有这些应用程序更好地使用那些。此外，MockApp是免费/ tweet-ware，请访问MockApp网站了解更多详情。

希望这有帮助

丹

P.S。我还没试过OmniGraffle，那就是我的名单！

Answer 7

我正在开发WireframeSketcher线框工具，可让您使用外部模板创建iPhone模型。您还可以将屏幕链接在一起以模拟交互性。

Answer 8

我只是使用这个模型工具包在Adobe Fireworks中创建我的设计：http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/

Answer 9

Omnigraffle效果很好

Answer 10

我还使用您可以在任何地方找到的模型工具包在Adobe Fireworks中创建我的设计。 如果您是Fireworks粉丝，您真的应该看看一个非常漂亮的Fireworks Extension，它允许您在基于AIR的iPhone模拟器中预览您设计的应用程序。作为移动设备商标的过渡效果也包含在扩展中，可以应用于设计。

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1786031#

如果你已经熟悉烟花模型，你会喜欢这个扩展。

最好的

Answer 11

Rob Rhyne的Briefs非常适合嘲笑用户体验。你可以在手机上弹奏你的内裤。

Answer 12

软件很有吸引力，但是你最终会花更多的时间来处理颜色和移动事物而不是降低设计/功能。你需要的是速度。通过速度，您可以尽快进入编程。我承认，如果你最终想与其他人分享设计，MockApp可能是个不错的选择。

以下是您的需求:(按优先顺序排列）

http://technabob.com/blog/2009/09/28/notepod-paper-iphone-notepads/

或

http://appsketchbook.com/

或

http://thenextweb.com/2009/05/21/designing-iphone-software-pencil-wooden-forms-ink-brush/

Answer 13

软件很有用，可能更有效但有时远离屏幕是提高设计注意力而不是实施的好方法。没有什么能吸引那么多“酷”！评论为我的不锈钢iPhone模板：

Design Commission Stainless Steel iPhone UI Template

我不使用他们提供的打印图像，而是通过模拟器中的缩小alpha屏幕截图来制作我自己的打印图像。

Answer 14

我现在不得不说mockapp或omnigraffle。

Answer 15

不要错过Less Code：http://lesscode.co.nz/interface

它允许您使用iOS本机组件在iPhone上进行设计。