blocks|key|5142418|text|总是先从纸或类似纸的模型开始。您不希望落入后端完全是空的情况下给人以完整性印象的陷阱。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5142419|一个完美的原型或像素完美的例子过于强调设计。有了一个明显的草图，您可以更好地讨论所需的功能和内容，而不是颜色、照片和其他样式问题。在项目的后面会有时间讨论这个问题。|5142420|杰夫在他的Coding+Horror文章UI-First+Software+Development中讨论了纸张原型|offset|length|5142421|点击“观看视频！”链接到twitter.com，查看来自Common+Craft的有趣想法。|5142422|entityMap|0|LINK|mutability|MUTABLE|url|http://www.codinghorror.com/blog/archives/001091.html|1|http://twitter.com/|2|http://www.commoncraft.com/^0|0|0|K|T|0|0|C|B|1|S|C|2|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$F|Y|G|Z|1|10]]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@$F|12|G|13|1|14]|$F|15|G|16|1|17]]|A|$]]|$1|J|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]|T|$5|M|N|O|A|$P|U]]]]

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 <a href="http://www.codinghorror.com/blog/archives/001091.html" rel="noreferrer">UI-First Software Development</a>

Click the "Watch a video!" link at <a href="http://twitter.com/" rel="noreferrer">twitter.com</a> to see an interesting take on the idea from <a href="http://www.commoncraft.com/" rel="noreferrer">Common Craft</a>.

blocks|key|2887720|text|用于Java的"Napkin+Look+&+Feel"对于原型设计来说真的很酷。一个实际的，功能正常的，可点击的应用程序，看起来就像是画在餐巾上的。看看这张截图：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2887721|​|2887722|📷|atomic|2887723|2887724|说真的，这是不是很酷？|2887725|entityMap|0|LINK|mutability|MUTABLE|url|http://napkinlaf.sourceforge.net/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1d82a3f4ddd8fe2d6d536dc6af79f921.jpeg|imageAlt^0|7|K|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|I|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|U|P|V|C|$W|X|Y|-4]]]]

The <a href="http://napkinlaf.sourceforge.net/" rel="nofollow noreferrer">"Napkin Look &amp; Feel"</a> 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:

<img src="https://i.stack.imgur.com/0vyVy.jpg" alt="Napkin Look and Feel">

Seriously, how cool is that?

blocks|key|696635|text|我建议你和你的客户坐下来，使用像Mockupscreens这样的工具，以交互的方式开发UI。与Napkin+LAF相比，它的一个优点是不需要编码，甚至不需要任何类型的开发工具|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|696636|entityMap|0|LINK|mutability|MUTABLE|url|http://mockupscreens.com/^0|G|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I would suggest you sit down with your client and use a tool like <a href="http://mockupscreens.com/" rel="noreferrer">Mockupscreens</a> 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

blocks|key|701467|text|查看Balsamiq|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|701468|它可以很好地实现“这不是一个功能性应用程序”的餐巾视图，并且易于使用。|701469|有一个功能齐全的demo，你可以在线试用，作为额外的好处，你可以把你的XML通过电子邮件发送给你的客户，他们可以对它进行调整，使用它，然后通过电子邮件将它发回给你，而不需要许可证。|701470|entityMap|0|LINK|mutability|MUTABLE|url|http://www.balsamiq.com/|1|http://www.balsamiq.com/demos/mockups/Mockups.html^0|2|8|0|0|0|8|4|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

Check out <a href="http://www.balsamiq.com/" rel="noreferrer">Balsamiq</a>

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

Has a full featured <a href="http://www.balsamiq.com/demos/mockups/Mockups.html" rel="noreferrer">demo</a> 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.

blocks|key|5142447|text|有一本名为Paper+Prototyping的书，详细介绍了笔画和纸画以及你能从中获得的东西。我认为它有很多好处，特别是你可以在很早的时候(并且很容易)，不需要太多的努力就可以修改最终的结果，然后从正确的角度开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5142448|entityMap|0|LINK|mutability|MUTABLE|url|https://rads.stackoverflow.com/amzn/click/com/1558608702^0|5|H|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There is a book called <a href="https://rads.stackoverflow.com/amzn/click/com/1558608702" rel="nofollow noreferrer" rel="nofollow noreferrer">Paper Prototyping</a> 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.

blocks|key|2887541|text|一个基本的纸质版本是一个初始模型的方式。我的经验是，如果你做一个“真正的”模型，即使你向客户解释这是一个无功能的模型，当事情不起作用时，他们也会感到困惑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2887542|底线:让它尽可能简单。如果它是纸面上的，客户就不会把它与正常工作的产品混淆。|2887543|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

blocks|key|2887620|text|对于初稿，我更喜欢使用图形纸(上面印有网格的东西)和铅笔。图表纸是帮助保持比例的好方法。一旦客户和我得出结论，我通常会用钢笔填写图纸，因为铅笔很容易褪色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2887621|当我实际开始构建数字原型时，我将扫描手绘的原型，并将其用作背景模板。对我来说似乎很有效。|2887622|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

blocks|key|2887830|text|我认为最好从纸/白板/白墙开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2887831|一旦有了基本结构，就可以使用线框模板将其移动到Visio中|2887832|2887833|(Download+a+Stencil+Kit)|unordered-list-item|offset|length|2887834|(Visio+Stencils+for+Information+Architects).|2887835|2887836|或者您可以在tablet+PC或Wacom平板电脑上使用Denim+(An+Informal+Tool+For+Early+Stage+Web+Site+and+UI+Design)来设计图形用户界面并将其作为超文本标记语言网站运行。|2887837|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/ypatterns/wireframes/|1|http://nickfinck.com/stencils/|2|http://dub.washington.edu:2007/denim/^0|0|0|0|1|M|0|0|1|15|1|0|0|Z|1J|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|12|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|13|8|@]|9|@$H|14|I|15|1|16]]|A|$]]|$1|J|3|K|5|G|7|17|8|@]|9|@$H|18|I|19|1|1A]]|A|$]]|$1|L|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1C|8|@]|9|@$H|1D|I|1E|1|1F]]|A|$]]|$1|O|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]|Y|$5|R|S|T|A|$U|Z]]]]

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 

<ul>
<li>(<a href="http://developer.yahoo.com/ypatterns/wireframes/" rel="nofollow noreferrer">Download a Stencil Kit</a>)</li>
<li>(<a href="http://nickfinck.com/stencils/" rel="nofollow noreferrer">Visio Stencils for Information Architects</a>). </li>
</ul>

Or you could use Denim (<a href="http://dub.washington.edu:2007/denim/" rel="nofollow noreferrer">An Informal Tool For Early Stage Web Site and UI Design</a>) with a tablet PC or Wacom tablets to design the GUI and run it as HTML website.

blocks|key|3731806|text|我最近使用了一个windows应用程序为客户制作了一个应用程序的原型(最终的界面必须集成到一个网站中)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3731807|一开始，人们认为这将是最后一个版本，他们开始对控件的显示方式和我使用的词语(术语和东西)提出非常严厉的批评，会议时间甚至在我们讨论功能本身之前就结束了。|3731808|这场讨论持续了一天又一天，直到我告诉他们，作为一个模拟(而不是最终的应用程序)，所有的输入都是受欢迎的，但我们必须首先关注功能，然后我们才能继续讨论外观和感觉以及术语问题。|3731809|从那次会议开始，我总是害怕原型和模型。也许我应该给他们一些用visio制作的东西。|3731810|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

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.

blocks|key|2887998|text|你可以尝试ForeUI，它允许不同风格的原型，更重要的是，它可以生成交互式原型并在浏览器中运行。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2887999|entityMap|0|LINK|mutability|MUTABLE|url|http://www.foreui.com/^0|5|6|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can try out <a href="http://www.foreui.com/" rel="nofollow noreferrer">ForeUI</a>, it allow prototyping with different styles, what's more, it can make interactive prototype and run it in browser.

blocks|key|2888158|text|对于非安装的基于浏览器的工具，您可以尝试draft-it|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2888159|它是免费的--如果你有一个gmail账户--不需要注册。|2888160|制作交互式/逐步或幻灯片放映-原型。你只需发送一个链接，就可以与你选择的任何人分享你的原型。|2888161|对我们来说很有效。|2888162|entityMap|0|LINK|mutability|MUTABLE|url|http://www.draft-it.com/^0|K|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

For a non-installation browser based tool you can try <a href="http://www.draft-it.com" rel="nofollow noreferrer" title="draft-it">draft-it</a> 

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 ...

When prototyping initial GUI functionality with a customer is it better to use a pen/paper drawing or to mock something up using a tool and show them that ?

The argument against a tool generated design being that the customer can sometimes focus on the low-level specifics of the mock-up rather than taking a higher level functional view of the GUI overall.

Prototyping a GUI with a customer

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

与客户一起制作初始GUI功能的原型时，是使用笔/纸绘图更好，还是使用工具模拟某些东西并向他们展示更好？反对工具生成设计的理由是，客户有时可以专注于模型的低级细节，而不是从整体上获得GUI的更高级别的功能视图。

问与客户一起构建GUI原型
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与客户一起构建GUI原型EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与客户一起构建GUI原型
EN