页面原型设计

这是山猫的第12篇原创

上一篇是讲怎么做需求分析，具体需求落地时最直观的就是以原型来进行沟通展示了。

就工具来讲，经过多年的发展，目前主流的原型工具有Axure和墨刀，业界最常用的还是Axure为主，具体这两个工具的玩法可以网上搜索，已经有很成熟的使用教程了。

软件需求原型设计不是一蹴而就的事情，如果想在效率和质量都进行提升，可以采用以下方法。

1

搭建功能框架，梳理MVP

简单来说，即需要搞明白目前设计的软件原型有哪些功能菜单，通常你可以用visio、mindmanager或者xmind软件来描述你的功能脑图框架，如下图是一个用visio画的功能框架图：

对于原型设计人员，功能菜单至少要考虑到三级菜单，比如上图最下面一行专家列表、项目推荐这些即是三级菜单功能。

框架不能随便搭，也要讲究一些方法，比如顶层设计、和其他系统之间的关联、异常处理的设计，具体参考上一篇文章“不会做需求的项目经理不是好项目经理”里面的内容介绍。

接下来要对功能菜单框架做分级，哪些是可以划分MVP（Minimum Viable Product 最小化可用产品）里面去的？哪些是可以后续版本再进行开发的？

“所谓最小化可用产品，是让团队用最小的代价实现一个产品，以此了解和验证对用户关键问题的解决程度。”

注意，最小化可用产品是解决用户的关键问题，而不是解决所有问题，如果你在设计时面面俱到，那可以肯定的是你的产品一定非常臃肿。

对于上图科技评奖管理系统，基础管理功能模块在产品初期就可以排除在MVP之外。

2

在巨人的肩膀上进行设计

牛顿曾经说过：如果说我看得比别人更远些，那是因为我站在巨人的肩膀上。

很多原型设计人员一开始就陷入细节的功能页面设计，完全依据自己的想法来进行处理，结果最终设计出来的质量非常糟糕。

很多时候设计都是共通的，哪怕行业的业务不同，在功能页面的设计上都有相通之处，比如一个多级审批页面需要包括哪些信息？从页面使用者审批人的角度看，需要知道目前审批的内容明细、目前所处审批环节、前面审批环节的审批人和审批意见等等，很多涉及审批的业务系统对于前面说的这些信息在页面设计里面都是必须要具备的，那针对这种页面，可以找找公司内部或者互联网搜索看看有无类似资源，看看其他人是怎么设计，多思考为什么这么进行设计，然后在这个基础上进行设计上的创新，实在没法创新就照抄行业类似设计的最佳实践。

3

重视页面布局，轻表现形式

到了具体的原型页面设计，在设计初期，每个页面功能位置布局摆放是重点，如下图汽车之家APP的首页，为什么搜索框是放在Banner的上面，这样会不会让用户难以察觉？

车商城和汽车点评为什么放在中间功能的靠前位置？这些都是值得思考的问题。

在设计初期避免做太多形式化的东西，比如做出酷炫的交互效果，高保真原型等，尤其是面对大型复杂的软件系统，投入时间在这方面会花费你大量时间，而且可以肯定的是这些内容随着原型的深入会被大量舍弃或者调整。

4

重视沟通

很多时候，原型设计人员会出现和开发人员一样的问题，会陷在自己的圈子和想法来做事，在团队合作中，每个人都是独立的个体，但系统是很难孤立的，尤其是当今越来越强调数据和资源共享，因此需要和多个相关方沟通才能做好系统原型设计。

如果你是乙方，那么不要忽略和甲方的沟通，尤其是在核心系统的设计层面，如果没有来回几次和客户确认，那最终做出来的东西很可能是满足不了业务需求或者不接地气的。

如果你设计的子系统和其他子系统有关联，那就要站在整个大系统的高度层面，考虑你的子系统如何和他人设计的子系统更好的进行融合，这些同样是需要大量的沟通和调整。

以上便是原型设计一些原则性的东西，需要注意的是，高手在做任何事之前都是先思考策略，只有菜鸟才会一开始就陷入细节，而且依据自己的想象进行死磕，一叶障目呀。想想你上次出去旅游前，如果做了详细攻略，是不是感觉省了很多时间和费用？一样的道理啊。

END

本文有6个章节，从工作流程、网站种类、网站组成部分、技术原理、设计规范等全面总结了网页设计的基础知识，接近两万字的干货，新手看完就可以入门了。

一、网页设计是什么？

网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的 APP 来获取资讯，但是显然基于个人电脑平台的网站上网方式陪伴我们的历史要比手机久很多：从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地；中国的网站高速发展了近三十年。我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。那么作为 UI设计师我们就必须掌握网站设计的规范和理解网站运行的原理，才能更好地驾驭这个平台。今天就向您好好说道一下网站必须懂得的那些事儿。

二、工作流程

首先让我们来看一下网站设计的工作流程吧，除了之前介绍过的用户研究、撰写产品需求文档、市场文档、做竞品调研等工作之外，与设计师密切相关的网站项目流程可以分为原型图阶段、视觉稿阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。每个阶段都需要设计师参与和了解，千万不要只在意视觉稿这个阶段，有很多前期与后期工作同样需要得到我们的重视。好，让我们一个一个来了解它们吧。

1. 原型图阶段

原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。

△ 构建网站原型图（工具：Axure RP）

2. 视觉稿阶段

视觉稿阶段就是我们要根据原型图确定的内容和大体版式完成网站的界面设计了，在设计网站的时候，我们需要一些图像和灵感的素材。比如做世界杯专题时，我们除了收集很多素材之外，也可以设计一个「情绪板」（Mood Board）。简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起，这样可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓人眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。

△ 视觉稿设计阶段（工具：Photoshop）

3. 设计规范

当视觉稿通过后，很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范，设计规范就是所有页面中共性的东西，比如说字体不同的大小、图片的尺寸、按钮的样式等，这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分享功能如果采用两种截然不同的样式就会让用户困惑。那么设计规范主要也是在约束设计师我们自己，在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位。所以我认为设计师应该主动去做设计规范和项目总结。设计规范如何去做？其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。

△ 视觉规范（工具：Photoshop）

4. 切图

网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握 PS 软件技能。如果遇到特殊情况需要我们切图时，我们可以使用诸如 Cutterman、Zeplin 等切图插件中的 Web 选项为前端切出网站所使用的图片。

△ 从PSD中提取出来的切图（插件：cutterman）

5. 前端代码

前端工程师会用代码重构我们设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据，也会进行埋点。埋点就是在页面代码里插入一些统计代码，方便我们之后确定哪些页面访问量高，哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等。

△ 前端工程师代码编译（工具：Notepad +）

6. 项目走查

网页设计完成后还需要设计师进行项目走查，来确定网页还原度是否有问题。如果发现有和设计稿出入很大的，就需要要求前端工程师进行调整。这个步骤非常重要，因为网站的成品才是我们最终的输出，不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。

△ 将实现后的截图和设计稿进行比对（工具：Photoshop）

三、网站种类

网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和消费者，例如门户网站、企业网站、产品网站、电商网站、游戏网站、专题页面、视频网站、移动端H5 等，均是面向用户和消费者的产品。由于是面向用户和消费者，所以设计上一定要可以吸引人，并且以用户为中心考虑体验设计。而 To B端作为一个需求量很大的类别，其实往往被设计师所忽视。什么是 To B端项目呢？比如电商网站供货商的后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是 To B 类网站项目了。这些项目的要求和 To C端网站的要求大相径庭：To B 类项目最重要的是效率而不是体验，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要保证操作者可以高效地完成他们所需要完成的工作。那么让我们来了解一下网站的不同门类吧。

1. 门户网站

门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如 Naver、Llinternaute 等。我们可以看得出，门户网站都是大而全包罗生活万象的。比如腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求：比如巴黎时装周需要负责时尚频道的设计师来设计对应的专题、世界杯小组出线需要负责体育频道的设计师来设计对应的专题等。地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。另外，具体对接频道的设计师也需要有一定擅长之处：比如对接体育频道的设计师起码应该熟悉足球篮球等体育项目、时尚频道的设计师要懂得各个大牌的设计风格、佛学频道的设计师需要懂得基本的佛学知识和忌讳、文化频道的设计师需要对传统文化有所涉猎。所以基本上门户网站的设计师可以分为产品组和频道组两种。

△ 韩国门户网站Naver

2. 企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪。网站已经是中小企业的标配了。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。

△ 美国通用公司官网

3. 产品网站

从苹果公司的 iPhone 介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的极致精细。由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。

△ 苹果公司产品介绍页

4. 电商网站

电商设计师也属于网页设计师吗？是的。如果按照平台细分，无疑电商设计师所在的平台大部分属于网站。以淘宝、天猫为代表的电子商务发展得太快了，以至于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的商人都开始在中国电商平台上开店铺了。店铺其实本身属于平台本身的页面。但是为了增强每个店的个性，平台为商店开通了一些页面自定义的装饰功能，比如宝贝详情、店铺排版、banner头图设计等。这样商铺有一定权限在平台规定的范围内使用图片和一部分css样式代码来装饰自己的店铺，电商设计应运而生。虽然带着镣铐跳舞，但是有很多店铺因为设计精良而能带动销售。那么电商设计师当然就变得非常重要了。

△ 淘宝网首页

5. 游戏网站

游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。国外游戏网站比如暴雪娱乐公司（https://blizzard）的官网设计得极其精美，每个游戏的官网都是一个精品。比如魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。

△ 暴雪公司星际争霸2游戏官网

6. 专题页面

当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。所以在那么短的生命周期怎么抓住人的眼球？当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。所以专题设计和产品设计正相反，专题设计必须刺激。

△ 极有家淘宝专题页面

7. 视频网站

视频网站的访问量惊人，并且用户的黏着度更高。很多视频网站除了购买版权之外还有很多 UGC 内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前 web1.0时代用户主要是单向浏览网站，web2.0提出的 UGC 概念就是说用户不仅在浏览也会上传内容。那么视频网站为什么会火呢？首先要感谢宽带的发展。在今年我们国内点击视频就立马可以播放了，而在几年前需要等待几分钟才可以加载够缓存。视频网站的设计主要是要考虑应用场景：视频是用户主要观看的区域，所以视频区域首先要足够大，另外颜色应该以暗色为主，因为亮色会干扰到用户观看视频。然后其他的区域图片比例应都为16:9的视频尺寸，方便后期编辑在后台添加。视频网站的设计师同样也可以分为产品组和运营组两个种类来处理产品方向和运营方向的不同需求。

△ 腾讯视频播放页面

8. 移动端H5

你一定在朋友圈被《穿越未来来看你》、《淘宝造物节》等 H5 刷过屏吧？平时我们经常被这种好玩儿的 H5 刷屏。其实 H5 全称是 HTML5，并不是仅仅指移动端，而是网页前端的开发语言，由于约定俗成的概念，我们现在常常把手机中的集合视频、动效、互动的这种营销形式称为 H5。其实它的本质是运用网页技术运行在手机浏览器或内置浏览器内的网页。随着技术日新月异的发展，H5 显得越来越有传播价值和份量。微信、浏览器等平台级产品在手机端中火爆促进了依靠入口而传播的 H5 的发展。如果设计出色，你的项目可能会在朋友圈产生病毒传播的效果。

△ 使用前端语言编译的适合手机浏览的H5界面

移动端H5尺寸

设计移动端 H5 项目的时候，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。�...

作为一个产品经理或者交互设计师，甚至是一个产品运营，不会画原型图简直会被鄙视，面对市面上的墨刀原型、axure和mockplus，到底哪一款原型设计软件和服务更好呢？今天就教大家第一次用墨刀原型画原型图就上手！最后还有彩蛋哦！

首先为什么要用墨刀原型呢，它主要有以下五个特性：

1、小白也会用！不用学习！简单易用的原型设计工具

无论是 PM 从 0 到 1 绘制原型、还是设计师导入设计稿制作交互，都可以快速轻松完成可交互原型。

2、电脑、手机、微信等多种设备完美演示

你可以将你的作品分享给任何人，无论在 PC、手机或微信上，他们都能随时查看最新版本。

3、工作流文档生成，关注产品全局

开发人员可告别复杂的需求文档，打开工作流便可看到全局状态和注释，实时同步进度和文档——工作流成为最有效的沟通语言。

4、在线团队协同，多人聚焦讨论

产品细节、新增需求、打点评论清晰可见。制作者可以第一时间收到细节反馈，方便意见的统一修改。

5、Sketch + 墨刀 = 交互批注利器

将 Sketch 的设计稿一键导入墨刀即可马上制作交互，工程师还可以通过开发者模式，看到完整的图层信息。

好了，接下来我来教大家如何快速入门：

注册/登录墨刀后，首先到达的是「项目管理页」，创建的项目都会展示在这个页面。

点击右侧的按钮「创建项目」，可以选择空白项目，也可以直接套用模板。

选择空白项目：有iPhone、ipad、Android、Web四种平台，选择后进入项目属性设置页，可设置不同的设备型号。点击创建，就进入到了工作区。

如想自定义原型尺寸，可选择Android的Customize进行自定义。

如有需要，还可上传个性化图标和启动界面图。

直接套用模板：墨刀推出了丰富的模板项目，可先预览模板效果，挑选成功后点击「创建项目」即可。

通过编辑模板你可以更快地掌握页面设计、交互设计的方法，也可在此基础上完善个人产品原型。

其实免费版对于小白已经够用有了，如果需要导出等功能，可以在付费的时候，使用优惠券优惠码【xiongmao】，竟然还有额外的折扣！推荐付费的小伙伴们都试试xiongmao这个优惠券优惠码！

最后告诉大家一个秘籍，善用套用模板功能，让你的原型设计事半功倍！

快速解决原型问题、极致的细节体验、能协同设计、便捷的导出和分享等等都是人们快速爱上墨刀原型设计的原因，希望大家第一次使用就可以快速上手哦！

说起软件原型，有些人也许会对更广泛意义上的原型比较熟悉。其实两者本质也是一样的东西。原型设计在绝大多数的产品阶段中已不可或缺。经过思路，数据，信息，需求，评估等相关信息的收集和整理后，设计师往往需要将这些抽象的思维以原型的方式具体呈现出来。原型设计为非专业的股东们和用户们提拱了一种最直观的方式来理解设计者的思路和创造。也能保证最快最准确的从用户那里获取产品信息的相关反馈。

通常，常见软件原型有以下几种类型：

1.纸质原型 - 这主要是为了设计师自己记录创意和想法;

2.快速原型 - 最常见的原型，讲究快速呈现，应用范围广泛;

3.高保真原型 - 强调互动和用户界面，多用于呈现给股东和开发团队;

4.低保真原型 - 强调设计团队成员之间的互动和想法，运用广泛;

在常见的原型类型中，除了纸质原型，只需用到纸笔，其他的原型制作都需要使用原型设计工具。如今，形形色色的原型工具可以说是眼花缭乱，如何选择呢？尤其是原型又有不同的受众，加之时间成本，人力成本，资金成本等条件，设计师往往需要呈现不同品质的原型，以适应当前的最佳选择。这里，我精选出了5款各有所长的原型工具，希望对您的工具选择有所帮助。

每款工具，我将从主要功能、学习成本、价格、兼容平台、项目类型、上手速度、保真度、分享方式、用户反馈等几方面进行介绍。仅供参考。

1.Mockplus - 快速简洁的专业原型设计工具

平台：Windows, Mac, Android, IOS

价格：普通-免费；专业-￥199元/年

主要功能:

Mockplus致力于快速构建和迭代原型，为设计师提供简洁高效的设计方式，能在最短时间里创造出最优的设计成果。

快速设计：Mockplus拥有200多个高度封装的交互组件，3000个矢量图标，以及大量可供直接使用的模板、例子项目以及模板页面，并且支持在Sketch中直接导出MP文件，为快速原型设计提供了有效支持。

快速交互：Mockplus还是交互设计的不二选择。只需使用封装可见的交互组件，用鼠标进行拖拽即可完成可视化的交互，不需要任何一行代码或者参数的设置。Mockplus目前支持3种交互方式：页面交互，组件交互和属性交互。交互命令还可一键自动还原，贴切而周到。

新功能：Mockplus团队推出了一系列人性化设计，例如可视化格式刷，可快速进行批量复制，简单直观；格子功能，可轻松复制页面布局，并且可自定义属性；数据填充，智能解锁繁复操作；最新的表格组件，体会Excel里操作般的感觉；脑图设计模式，能快速完成项目的所有页面构架，然后一键转化为原型项目等等。

全新的表格组件

快速演示：Mockplus拥有8种快速测试和演示方式，支持手机端、浏览器及桌面端的原型测试。在线预览和离线演示都可轻松实现，不受终端，网络地域的限制。

视频地址：http://doc.mockplus/?p=1668

学习成本：很低。Mockplus是一款让你关注设计，而非工具本身的工具，致力于让设计更快、更简单！无需写代码。

项目类型：手机APP，网页项目，平板项目，自由项目等

上手时间：5-10分钟

保真度：中低保真

分享和协作: Mockplus的团队协作功能支持多人编辑同一个项目，可以加强团队的配合，提高生产力。参与人员可对设计进行批注和审阅，即时获取反馈。

用户反馈：“ I have used the tool and I love the idea that making real screen view through QR code. I'm really satisfied with what I see and even start recommending it at the office to some of my workmates. I love this app and it is super easy-to-use I must say.” - Ari Arturo Velázquez Fierro at Interaction Designer at Infotec.

2.Balsamiq - 一款基于Flash的快速原型设计工具

平台：Windows, Mac, Web-based

价格：$89

主要功能:

Balsamiq Mockups是一款备受青睐的原型图工具，是2008由一个软件工程师开发的，能帮助设计师更快地进行原型设计。

拖拽操作：Balsamiq拥有可以直接进行拖拽使用的元素，包括一些按钮和列表，值得一提的是，这些元素都是手绘风格。设计师还可在编辑器里提前准备好需要使用的小部件。

资源模板：Balsamiq官方网站还提供了很多模板，包括桌面App、移动端App以及网站模板等。可供点击下载，使用起来快速便捷。

手绘风格：Balsamiq独一无二的手写设计在如今的机械化设计中显得十分别致，能让设计师体会一种在空白屏幕里进行手绘设计的独特体验。加上其种类繁多且风格独特的UI库，能为设计师提供最便捷的服务。

线框图设计：但Balsamiq并不是一款适合做超大型项目的工具，虽然它也可以用于做一些设计，但想要加入一些比较深入的动态效果就比较局限，当然，这和他们的设计初衷也不相一致，Balsamiq更专注于简洁粗略的线框图设计。

视频地址：https://youtube/watch?v=0mYYqsJ-rE8&feature=youtu.be

学习成本：低。拖拽和放置元素都很简单。初学者也可以尝试不用纸笔，而是以贴近纸笔的设计方式进行设计。

项目类型：手机APP，网页项目等

上手时间：15-20 分钟

保真度：低保真

分享和协作：Balsamiq可以说是专为协作而设计。整个团队可以进行交流，以确保设计的正确方向。客户和老板都可以更清楚地描述自己的需求。在Balsamiq Mockups中共享文件，可以通过共享模型项目文件，共享交互式PDF文档等方式。

用户反馈：

“Balsamiq is bitchin'. Pure and simple. It's rare to find a tool that both devs and non-devs enjoy using, and use productively together. Huge fan!”—Jay Simons form VP of Marketing, Atlassian.

3.Webflow - 设计和开发协同进行的简单静态网站原型工具

平台：Mac，Windows

价格：2个项目免费（10个项目：16美元/月，无限项目：35美元/月）

主要功能:

直观的设计和开发网站：Webflow为网页设计人员提供了HTML，CSS和JavaScript的全部功能。但是不需要编写代码，而是直接进行直观操作。在您构建网站并填充网站内容时，Webflow的“Designer”会自动创建简洁的语义代码，这些代码可以直接发布到网页上，也可以交给开发人员参考。

空白画布，创作空间无限：您可以在画布上填充需要的任何元素：盒子模型，浮动组件等，元素布局自由，尽在掌握中，然后使用强大的排版和配色工具进行美化设计。

精准的交互和动画：直观的可视化界面不仅仅局限于页面布局和风格选择，而且还可以自由使用JavaScript和CSS动画的所有功能。

轻松管理和低成本维护：整个网站的风格和组件都可以有效进行管理和维护。可视化构建绝不是重复、笨重的工作流程。如果结合CSS的系统样式以及自定义符号和组件库，设计和管理网站将会更轻松。

视频地址：https://youtube/watch?v=Ymn1sPuNMt8

学习成本：较低。Webflow可以让设计师在相对较短的时间内创建一个网站。虽然您不需要写代码，但仍需要根据客户需求导出甚至更改网站的html / css标签。

项目类型：Web网站

上手时间：15-20分钟

保真度：高保真。

分享和协作：一旦在Webflow发布网页，您的站点就已经算是完成了，可以直接分享给他人。但如果还需进一步改进再分享，可以使用Webflow Hosting进行网页托管。

用户反馈：“In comparison to the many site designing tools we've used during our 13 years in business, Webflow is absolutely the most user-friendly and capable out there.”

4.Fliud UI - 更简单的网页，桌面和移动原型工具

平台：Web端。支持Chrome，Firefox和Safari，不兼容Internet Explorer。

价格：个人- $8.25/月；高级版- $19.08/月；团队版- $41.58/月

主要功能:

高保真：Fliud UI是一款基于网页端的原型设计设计工具，与其他的大部分原型图工具不同，Fliud UI支持添加手势，并且具有动画效果，可以制作高保真的原型图。

快速线框图工具：Fluid UI更多是线框图设计，但也能影响到后期的界面设计、产品功能设置以及上线前测试。

界面关系展示：Fluid UI能够将不同的界面联立起来，以便于看到产品不同界面之间的关系，对于UX流程设计有很大帮助。

快速设计：Fliud UI有16个用于iOS，Android，Windows8的用户界面库，其中包含超过2000个可定制的小部件和图标，可以直接从这些内置库里拖拽元素创建页面，简洁高效。FluidUI还提供团队的实时协作，可用于用户测试的视频环聊，进行设备上的测试和交互式预览，团队共享非常便捷。

视频地址：https://youtube/watch?v=uodln1GmrFM

学习成本：较低。FluidUI是一个原型开发工具，可以让您快速设计，测试并获取有关的反馈信息，无编写代码要求。

项目类型：Web应用程序和桌面应用程序

上手时间：10-15分钟

保真度：高保真。

分享和协作：强大的协作功能，不受空间限制，随时可以实时进行设计。只需邀请你的团队成员到同一个原型项目上，就可以进行添加，反馈和评论等操作。分享原型，你可以选择在设备上直接查看，或通过电子邮件分享，甚至直接将项目发送给客户。

用户反馈：“It’s a great tool for working the project from scratch, for creating high quality prototype. It’s very easy and intuitive. Sharing is very easy.”—John Wastion.

5.Invision - 基于web端的原型设计工具

平台：Mac，Windows

价格：1个项目免费（3个项目：15美元/月，无限项目：25美元/月，团队版：99美元/月）

主要功能:

静动转化：在InVision中，设计人员可以直接上传设计文件并添加动画，手势和转换，将静态画面转换为可点击的交互式原型。

多格式支持：支持PNG，JPG，GIF，AI和PSD格式的文件。

高效协作：InVision App在产品讨论阶段使用非常合适，可以快速呈现，加之有效的协作，可以有效收集同事和客户的反馈意见。

视频地址：https://youtube/channel/UCndfHdRdEiGOyCOgxQ4W9YQ

学习成本：低。基于其可以在设计文件添加动画和手势，因此只需5分钟内即可获得高保真原型设计。无需代码和编程。

项目类型：移动和Web应用程序

上手时间：15-20分钟

保真度：高保真。

分享和协作：InVision最突出的优势就是它的协作功能，所有参与原型项目的成员都可以提供反馈，记录问题和查看实时设计。

用户反馈：“A lot of the products we're making are really meaty. InVision allows us to see if these really complex solutions are working." Joshua Taylor, Evernote

以上是我总结出的5款软件原型设计工具，各具特色，也各有不足，希望总有一款适合你当前的项目。但在设计过程中，对工具的要求往往会更多，譬如设计灵感的查找，更短的学习时间，更低的成本，多样的快速演示和分享方式，比较深入的交互和动效，以及更多的人性化设置，综合每款工具的分析，Mockplus是性价比较高的选择，也是我极力推荐的一款工具。