这是豆瓣FM设计师余哲明在极客公园的演讲视频。
演讲：豆瓣FM的设计
1条回复
分类目录归档：产品设计
随时随地设计原型：4款iPad原型绘制应用
产品设计师们经常要与原型打交道，除了平时坐在桌前画纸面原型、在电脑屏幕前使用 Axure 或 Balsamiq Mockups 绘制原型之外，有没有想过怎样在地铁上利用乘车的时间随手记录下自己的零碎想法？又或是在咖啡馆里，与好友们一边讨论、一边设计原型？伴随着平板电脑的快速普及，各大原型设计软件也都纷纷推出了iPad版，有了它们，就真的可以做到“Design on the go. Anytime, anywhere. ”。
1. Sketchy Pad ($4.99)
使用这款应用，可以帮助产品设计人员直接构建网站草图或是 iOS 平台下应用的交互原型设计，内置56款模板，支持保存为PNG格式并通过邮件发送，也可以导出为 Balsamiq 的BMML格式文件。
2. iMockups ($6.99)
Endloop 开发的 iMockups 可以帮助产品策划人员直接在iPad上绘制网站、iPhone或iPad应用的原型图，内置网站或iOS设备的常用控件库。在协作方面，除了iPad设备之间可以直接共享之外，它还支持导出PNG格式图片或 Balsamiq 的BMML格式文件。
搜索框UI设计精彩案例大集合
我们在某个网站上查找信息出现困难时，通常会尝试进行搜索。毫无疑问，搜索框是一个网站的重要组成部分。如果你正在运营一个以内容为主的网站，那么这个问题就更为突出。有时我们也会考虑放一个搜索框在页脚，以便让用户更方便进行搜索。
(图片来源： Shutterstock)
自从Web 1.0后我们走了很长一段路，网站搜索不再仅仅是一个“输入关键词”加上“点击搜索”。开发者们通过改进与增加功能，努力让搜索能够给用户带来更好的体验——搜索过滤能获取更精准的结果，提供搜索关键词或曾经输入过的搜索历史。
这篇文章中，我们将介绍一些既漂亮也具备实用功能的搜索框。不论你是正在改进自己的网站，或是仅仅希望找到一个更好的搜索框解决方案，这篇文章都会很适用。让我们一起来看吧！
PlaylistNow
伴随着输入前缀“ I am ”，这个搜索模块就会开始智能匹配并根据你的输入实时列出结果。
Scroll Search Module
这个极富创意的搜索框出自设计师 Nico Nuzzaci ，它允许用户通过输入或滑动字母面板进行搜索。
继续阅读
快速原型的4个关键要素
伴随敏捷开发的理念，Lean UX也开始变得流行，其核心理念可以概括为：如果一幅图片能体现1000个单词，那么一套原型则能够包含1000幅图片（向 Ben Shneiderman 致歉）。那么，如果是在时间紧迫而任务更重的情况下，我们又该如何提升原型设计的速度呢？
如果遵循以下四个原则，会有效地提高原型设计的速度：
- 从纸面原型开始做起
- 使用一种原型工具即可，而不是多种
- 使用能直接生成规格说明的原型工具
- 支持协作
1. 从纸面原型开始做起
加速制作原型的最好方法就是从纸面原型开始做起。敏捷开发的原则之一就是，交付物的完成是衡量一个项目进展的关键指标之一。因此，非常遗憾的是，有些开发者便误以为如果要加快进度，他们得从一开始就打开电脑做起可交付的原型来。
制作原型时最好的要诀是，不要从项目一开始，就用电脑做原型。这或许是你在原型设计过程中会犯的最大错误。
直接开始用电脑制作原型的问题在于，它无法给你更广阔的设计空间，帮助你全面地去思考产品的体验。而你更容易陷入一两个设计思路并仅以此为基础进行原型设计的方案。
在设计的早期阶段，不论你是正在设计一个新系统，又或是一个新的工作流，你都不会只想要一两个思路，而是希望能有越多越好。纸面原型正可以在这个环节成为你最好的搭档。在最初的设计阶段里，你可以在纸上方便地创建各种各样的界面和模型，反复权衡，甚至能够制作可以互动的纸面原型，并将之用于早期的用户测试。
译者注：实际工作中，纸面原型的确可以更方便又低成本地的修改、拼接，甚至是快速地毁灭一个坏主意或是创建出各种新的模型，而不会令思路受制于某一款特定软件的限制。你所需要的仅仅是几张纸、几只笔、一些透明胶带以及一块足够摆放你各种想法的大白板。
2. 使用一款原型设计工具，而非多种
当你开始在电脑上做原型时，能帮你提高效率的要诀之二是：只要使用一款原型软件就好。我们经常会看到一些设计团队开始时是在Keynote或是Balsamiq等工具中制作原型，之后换到Photoshop或Fireworks中制作高保真，最后又用Dreamweaver或Flex加入交互以便进行可用性测试。
这样做的一个问题就是，设计师必须要在他们擅长的软件中重新设计，这样不但效率低而且会拖慢整个开发进度。同时，这也会给软件与文件的管理带来麻烦。比如说，我们用Visio制作了用户流程图，而设计师就需要用Photoshop来设计，但这些在微软Word中又是有现成的。
让原型设计规范在一款软件平台上，能使得你更有效率。
译者注：在原型阶段保证基本的可用性的是非常重要的，一旦进入高保真原型或coding阶段，修改的代价会明显上升。
3. 使用能直接从原型生成规格说明的原型制作工具
第三个要诀能让整体流程更为顺畅：确保你的原型中包含开发人员能够理解的详细规格说明。
新手常会犯的一个错误就是，将他们设计的原型直接交付给开发人员进行开发。那些没有实际敏捷开发经验的人可能会误以为敏捷开发就是不需要文档，但事实上，它仅仅是要求减少文档的数量。敏捷开发可能是不需要大量的需求文档、规格说明书，但它仍需要一些必要的信息（诸如色码、下拉框的内容等）来说明原型以使得我们能够定义一个敏捷冲刺的目标。
你可以复制粘贴Photoshop中的图片到Powerpoint、Word或Visio中进行标注。但这样不仅很费力，而且在每次变更原型设计时都需要再去更新规格说明书。事实上，这简直是一场噩梦——就我所知，一些大企业不愿意对原型进行修改的原因就是在于更新规格说明书将耗费大量时间。很明显，选择一款能够直接从原型生成规格说明的原型制作工具能够提升效率。
译者注：在原型工具中直接对控件或交互流程进行明确的标注，可以帮助开发人员更好地理解产品原型，提升开发效率与质量。
4. 支持协作
通过使用支持协作的原型工具，你使得整个流程更为高效。
理想的原型工具：
- 支持多用户同时设计原型。你的工具能够支持文件管理、版本控制、权限控制以及数据完整（确保当两个或更多人在同一时间不会同时更新一个对象）。
- 允许更轻松地分发原型以获取反馈。一些组织仍然在通过将许多零散的文件打成zip包后发送电子邮件的方式进行分发。这意味着反馈将会是不协调的邮件回复形式。
Macefield博士的推荐
原文作者Ritch Macefield是Axure和iRise的粉丝，而它们可以避免上文中提及的这些问题。这些工具正是特别为了改善现代软件开发环境下的原型设计需求而开发的。如果你遇见了任务重时间紧的情况，不妨尝试一下本文中的方法。
译者注：关于Lean UX，推荐延伸阅读以下文章：
【 原文：4 ways to prototype faster By Ritch Macefield，译者：Summer 】
表单设计指南
Web表单在网站设计中经常遇见但却又容易被忽视。cxpartners的用户体验设计师们在做了大量用户测试之后，制作了一套表单设计指南并将其共享出来。
该指南遵循CC 3.0协议，同时提供Omnigraffle源文件、PSD以及PDF版本。cxpartners鼓励将其打印出来，贴在墙上，甚至是发给你的客户——最终目的是帮助大家设计出更好的表单。
下载:
【原文：Form design guidelines crib sheet (free download) By Joe Leech，译者：Summer 】