与客户一起制作 GUI 原型

发布于 2024-07-04 01:57:50 字数 1447 浏览 6 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(12

月依秋水 2024-07-11 01:57:50

你可以试试ForeUI,它允许制作不同风格的原型,更重要的是,它可以制作交互式原型并运行它在浏览器中。

You can try out ForeUI, it allow prototyping with different styles, what's more, it can make interactive prototype and run it in browser.

往日 2024-07-11 01:57:50

对于基于浏览器的非安装工具,您可以尝试 draft-it

它是免费 - 如果您有 Gmail 帐户 - 则无需注册。

制作交互式/分步或幻灯片放映原型。 您只需发送链接即可与您选择的任何人共享您的原型。

为我们工作...

For a non-installation browser based tool you can try draft-it

It's free - and if you have a gmail account - no registration is needed.

Makes interactive/Step by Step Or Slide Show- prototypes. You can share your protoype with anyone you choose by just sending a link.

Works for us ...

停滞 2024-07-11 01:57:50

我最近使用 Windows 应用程序为客户制作应用程序原型(最终界面必须集成到网站中)。

起初人们认为这将是最后一个版本,他们开始从控件的显示方式到我使用的词语(术语和东西)提出非常严厉的批评,会议时间在我们甚至可以讨论功能本身之前就结束了。

这个讨论持续了好几天,直到我告诉他们,作为一个模拟(而不是最终的应用程序),所有的输入都是受欢迎的,但我们必须首先关注功能,然后我们可以继续关注外观和感觉。术语问题。

从那次会议开始,我总是对原型和模型感到恐惧……也许我应该给他们一些用 visio 制作的东西。

I've recenly used a windows App to prototype an application to a customer (the final interface has to be integrated into a website).

At first people thought that it would be the last version and they started to make very heavy criticism from the way controls were displayed to the words I had used (terminology and stuff) and the meeting time ended before we could even discuss the functionality itself.

That discussion dragged on for days and days until I told them that, being a mock (and not a final application) all input is welcome but we had to focus on the functionalities first and then we could move on to look and feel as well as terminology issues.

From thay meeting on I am always terrified of prototypes and mock-ups... Perhaps I should just have given them something made in visio instead.

帅哥哥的热头脑 2024-07-11 01:57:50

WireframeSketcher 是一款帮助快速为桌面、Web 和移动应用程序创建线框、模型和原型的工具。 它既可以作为 Eclipse IDE 的独立版本,也可以作为插件。 它具有一些独特的功能,例如故事板、组件、链接和矢量 PDF 导出。 支持的 IDE 包括 Aptana、Flash Builder、Zend Studio 和 Rational Application Developer。

示例线框草图器样机
(来源:wireframesketcher.com

WireframeSketcher is a tool that helps quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It comes both as a standalone version and as a plug-in for Eclipse IDEs. It has some distinctive features like storyboards, components, linking and vector PDF export. Among supported IDEs are are Aptana, Flash Builder, Zend Studio and Rational Application Developer.

Sample WireframeSketcher mockup
(source: wireframesketcher.com)

2024-07-11 01:57:50

我认为最好从纸张/白板/白墙开始。

掌握基本结构后,您可以使用线框模板将其移动到 Visio

或者您可以使用 Denim(用于早期网站和 UI 设计的非正式工具)平板电脑或 Wacom 平板电脑来设计 GUI 并将其作为 HTML 网站运行。

I think it is best to start with Paper/Whiteboards/White walls.

Once you have the basic structure, you can move it to Visio with the wireframe stencils

Or you could use Denim (An Informal Tool For Early Stage Web Site and UI Design) with a tablet PC or Wacom tablets to design the GUI and run it as HTML website.

醉酒的小男人 2024-07-11 01:57:50

Java 的“Napkin Look & Feel” 对于原型设计来说真的很酷。 一个实际的、功能齐全的、可点击的应用程序,看起来就像是在餐巾纸上画的。 看看这个屏幕截图:

餐巾外观和感觉

说真的,这有多酷?

The "Napkin Look & Feel" for Java is really cool for prototyping. An actual, functioning, clickable app that looks like it was drawn on a napkin. Check out this screenshot:

Napkin Look and Feel

Seriously, how cool is that?

暖阳 2024-07-11 01:57:50

我建议您与客户坐下来,使用诸如 Mockupscreens 之类的工具,并以交互方式开发 UI。 与 Napkin LAF 相比,它的一个好处是它不需要编码,甚至不需要任何类型的开发工具

I would suggest you sit down with your client and use a tool like Mockupscreens and develop the UI interactively. A benefit it has over Napkin LAF is that it does not require coding, or indeed development tools of any kind

江挽川 2024-07-11 01:57:50

查看 Balsamiq

它可以很好地实现“这不是一个功能性应用程序”餐巾视图,并且易于使用。

有一个功能齐全的演示,您可以在线试用,作为额外的奖励,您可以通过电子邮件将您的 XML 发送给您的客户,他们可以对其进行调整和使用,然后通过电子邮件将其发回给您,而无需获得许可证。

Check out Balsamiq

It does the "THIS IS NOT A FUNCTIONAL APP" napkin view very well and is easy to use.

Has a full featured demo you can try out online and as an added bonus you can email your XML to your client and they can tweak it and play with it and email it back to you without having to have a license.

淡淡绿茶香 2024-07-11 01:57:50

有一本名为 纸质原型 的书,详细介绍了笔和纸绘图以及您可以做什么可以从中获益。 我认为它有很多好处,特别是您可以很早就(并且很容易)无需太多努力即可修改最终结果,然后以正确的方式开始。

There is a book called Paper Prototyping which details pen and paper drawing and what you can gain from it. I think it has a lot of benefits, particularly that you can, very early on (and easily), modify what the end result will be without much effort, and then start off on the right foot.

如梦 2024-07-11 01:57:50

基本的纸质版本是初始模型的最佳选择。 根据我的经验,如果你做了一个“真正的”模型,即使你向客户解释这是一个非功能性的模型,当事情不起作用时,他们也会感到困惑。

底线:保持尽可能简单。 如果是在纸上,客户就不可能将其与工作产品混淆。

A basic paper version is the way to go for an initial mock-up. It's been my experience that if you do a "real" mock-up, even if you explain to the customer that it's a non-functional mock-up, they are confused when things don't work.

Bottom line: keep it as simple as possible. If it's on paper, there is no way the customer will confuse it with a working product.

不乱于心 2024-07-11 01:57:50

对于初稿,我更喜欢使用方格纸(上面印有网格的东西)和铅笔。 方格纸非常有助于保持比例。 一旦客户和我得出结论,我通常会用钢笔填写图纸,因为铅笔容易褪色。

当我真正开始构建数字原型时,我会扫描手绘的原型并将其用作背景模板。 似乎对我来说效果很好。

For the first draft, I prefer to use graph paper (the stuff with a grid printed on it) and a pencil. The graph paper is great for helping to maintain proportions. Once the client and I have come to a conclusion I'll usually fill in the drawing with pen since pencil is prone to fading.

When I actually get around to building the digital prototype, I'll scan in the hand-drawn one and use it as a background template. Seems to work pretty well for me.

Oo萌小芽oO 2024-07-11 01:57:50

始终首先从纸质或类似纸质的模型开始。 当后端完全空心时,您不想陷入给人完整印象的陷阱。

精美的原型或像素完美的示例过于强调设计。 通过明显的草图,您可以更好地讨论所需的功能和内容,而不是颜色、照片和其他风格问题。 项目稍后将有时间进行讨论。

Jeff 在他的 Coding Horror 文章中讨论了纸质原型UI 优先软件开发

单击“看视频!” 链接 twitter.com 查看来自 常见工艺

Always start with paper or paper-like mock-ups first. You do not want to fall into a trap of giving the impression of completeness when the back-end is completely hollow.

A polished prototype or pixel-perfect example puts too much emphasis on the design. With an obvious sketch, you have a better shot of discussing desired functionality and content rather than colors, photos, and other stylistic matters. There will be time for that discussion later in the project.

Jeff discusses paper prototyping in his Coding Horror article UI-First Software Development

Click the "Watch a video!" link at twitter.com to see an interesting take on the idea from Common Craft.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文