在移动端原型设计中，动态面板可以说是使用率非常非常非常之高的元件之一，而具体什么时候应该使用动态面板呢？

        1  页面内容超出手机屏幕，需要垂直滚动时：

        这个很容易理解，当我们的页面内容多到一屏无法展示的时候，就需要使用动态面板作为一个“容器”去装下这些内容，当然如果你将页面尺寸设置为移动端的大小并在虚线下的白色区域布置内容后，其实点击预览时页面依旧会产生一个下拉滚动的效果，只不过这个效果是全屏下拉，如果在屏幕顶端有放status bar的时候，status bar就会跟随一起下拉。这时我们仅仅在需要滚动地方放置动态面板即可，建议选中所有需要滚动的部分，点击右键——转化为动态面板，之后稍加调整动态面板的尺寸即可。

       2  元件/页面需要滑动（拖动）操作时：

       当需要制作类似于滑动翻页，拖动滑块功能时，一般需要动态面板来进行制作。例如制作浏览功能时，左划时切换照片。亦或时制作类似微信好友列表中左划出现删除按钮等等功能时，都会用到动态面板。后续有时间的话我会做一些实际制作过程来进行演示。

        3  元件的样式需要有条件的改变时：

          “我如何设置用户点击鼠标时改变按钮的颜色呢？”“点击时这个交互下面也没有更改元件颜色或者改变元件中字体大小和颜色的选项呀？”这些是刚刚开始学习交互编写的朋友可能会遇到的问题，诚然Axure在功能设计时并不支持编写交互时直接对某个元件的内部属性进行调整，而需要用户首先将需要修改样式后的元件制作出来，并与原来的元件共同组合成一个含有不同状态的动态面板，之后通过点击鼠标等触发事件来切换动态面板的状态来实现之前所说的点击鼠标改变按钮颜色等等功能。

        4  元件/内容有规律的改变时：

        这一点可能比较容易理解，当在做诸如轮播图，HUD提醒，加载动画提示等等需要元件内容有规律的改变时，一般会使用动态面板的几个状态来进行切换，同时编写切换状态的交互逻辑来实现有规律/循环播放的效果。

        5  当切换页面时：

        页面的切换在Axure中大致有四种方式：

      （1）链接跳转（最简单，最暴力，但无切换动画效果）；

      （2）元件隐藏显示切换；（可设置显示隐藏的动画，但一层压一层的千层饼的页面编辑起来真的脑壳痛）

      （3）元件移动；（同上，但是不仅仅是千层饼的问题了，还得算好千层饼的尺寸和需要移动的距离）

      （4）动态面板状态切换。（便于编辑，切换有动画效果，但切换的页面尺寸必须相同）

        其中使用动态面板切换页面的好处是当页面内容较多，均需要上下拖动时，如果仅仅通过显示隐藏元件或移动元件的方法无法实现，而显示隐藏动态面板或移动动态面板的做法又未免有点脱裤子放屁（当然要切换的两个页面若是大小不同还是有必要的）。通过在动态面板的不同状态中分别编辑各个要切换的页面，并用切换手势或按钮进行状态切换行为的触发，切换时设置合适的切换动画即可实现漂亮的页面切换效果。因为编辑时可以分状态，终于不用所有页面都压在一起了，这种感觉试过一次都不想再用显示隐藏那种方法了。

        以上是需要用到动态面板的几种场景，此外说一些使用动态面板时的注意事项和小技巧：

        动态面板是可以“套娃”的，一个动态面板的状态中可以嵌套另一个或多个动态面板，目前我没发现有什么数量限制，但是嵌套过多偶尔会出现一些滑动bug并且浏览时性能也会有所下降，套娃时需要稍稍克制一下。另外中继器是不支持嵌套的。

        如何隐藏动态面板下拉时的滚动条？请将动态面板的宽度增加15，并使用一个同背景色的无线框矩形压住这多出来的15宽度即可。

        在设计需要页面滑动的移动端原型时，请千万不要打开动态面板的自适应功能，否则多一放一点内容，动态面板就跟着变大一圈，最后滑动变成了整个动态面板的滑动，而不是动态面板中内容的滑动。

——————————————————文章目录——————————————————

Chapter 1

开始前的准备

1 写在前面，我为什么要开Axure这个坑？

2 没有完整构想的产品上来直接开画就是耍流氓。

3 做之前先想好：高保真还是低保真？

4 移动端的相关规范，多多少少还是要知道一点点的。

Chapter 2

开始做吧,初学时懵逼的问题：

5 站在巨人的肩膀上：先装个元件库吧

6 技多不压身，元件多了真的压

7 文本框、文本域：如何获取输入的文字？

8 如何使用url及变量链接页面并实现跳转

9 关于命名规范：页面、元件、组。

10 什么时候该使用动态面板？

11 什么时候应该使用中继器？

12 交互、变量、函数我该怎么着手学习？

13 关于交互的最后防线——启用情形

Chapter3

实战教程，未完待续

先讲思路

主页转换为动态面板，总共4个状态，按钮转换为动态面板，分别两个状态，设置交互，点击白色按钮时，主页动态面板切换为对应状态，当前按钮面板转换为绿色背景按钮状态，其他四个按钮则变成白色背景按钮的状态。

再详细解释

1首先做一个主页（聊天界面），四个等大按钮至于底部并输入文字。

2将主页转换为动态面板，再添加3个状态（取消勾选自动调整为内容尺寸）每个状态下做一个主页，分别为聊天页，通讯页，发现页，我的页，每个页加文字，设置背景颜色以区分。

3将每个按钮转换为动态面板，每个动态面板分别再添加1个状态，，复制粘贴原来按钮矩形，并设置白字绿色背景。白色背景的状态命名为未选中，绿色背景的命名为选中。

注意：第一个聊天按钮，选中状态位于未选中状态之上。

4好了，开始交互，这里主要的交互事件触发器就是按钮，所以为每个按钮添加事件。

点击白色（未选中）按钮时，屏幕动态面板切换为对应状态，比如点击通讯，则主页面板切换到通讯状态

当前按钮面板转换为绿色背景按钮状态，其他四个按钮则变成白色背景按钮的状态。

比如双击发现按钮未选中状态，再双击右边交互栏中的“鼠标单击时”添加动作1：左边点击“设置面板状态”，勾上右边“主页面板”，选择发现状态。

以此类推，设置四个按钮面板状态：

然后类推到其他按钮未选中状态，添加事件。

然后设置四个选中按钮的单击事件：

比如单击聊天按钮时，设置主页为聊天页。

ok，就此完成，预览试试吧。

首秀，共同学习。

一、原型图工具/流程表工具

谈起原型图工具，被我们熟识的有可能是Axure，除开制作原型设计外，流程表与PRD文本文档都能在摹客RP中一站式进行，在原型设计的第一页加上流程表，在编写文本文档时，也可立即将流程表引入到文档中，为此，可以让原形、流程表、PRD文本文档联络更为密切，也可以更为便捷我们的日常实际操作！

二、思维脑图工具

由于组装体型小，使用方便，因此更受我的亲睐~除开能整理思想和逻辑性外，也可以和团队成员进行头脑风暴游戏！将模糊不清的见解细化，将脑子里的思维可视化，最后迅速梳理错乱心绪，保证让合适的念头真真正正落地式！

三、用户调研工具

收集信息数据信息及其开展顾客关系管理的工具。它形成的表单链接能直接加上到手机微信工具栏或是开展微信朋友圈、社交平台的分享和共享，十分便捷！它能将搜集到的内容，与“联系人信息”连通，能合理沉积用户数据，完成精细化管理用户管理系统。

四、在线文档编辑工具

可以在线进行Word/Excel/PPT/PDF等各种数据文本文档或报表的处理工作，并且不论是移动端或是pc端，都可以随时随地查询或修改文件材料。当要想发送文件给团队成员时，只需共享一次连接，之后每一次开启，具体内容都是会自动更新，因此用腾讯文档解决文本文档、报表，效率高不容置疑。

五、数字图像处理工具

尽管产品经理做图屈指可数，但或多或少有临时性做图的要求，用PS来做，过度细致，又花费时间，因此用创客贴做图是最合适的选择。创客贴上提供了大量设计元素及模板，对我来说，只需迅速锁住模板后，将中的文字拆换成自已的具体内容，五分钟就能解决一张，可谓是产品经理临时性做图必备神器！

六、项目管理工具

产品经理终究必须把控新项目的总体过程，因此很有必要参加项目管理工作。它能对团体的流程开展整理，即使是“要求变动”这类小的关键点工作中，也可以理解为一个过程，那样产品经理就能很清晰地了解工作开展到哪一流程，十分有利于大家项目管理工作的进行！

Mockplus：这个是我们团队现在用的一款国产原型工具，交互组件比较丰富，页面切换也很方便，每个组件上方都有一个小圆点，拖拽就可以设置交互，可以说是傻瓜式工具了。这个工具的预览方式很多，微信扫码、小程序、APP都可以预览，如果是做APP原型的话我比较推荐这个工具。

Sketch：Sketch其实UI用的比较多，不过自从Sketch新增原型设计功能以来，还是收获了很多粉丝。这款工具适合做高保真，但只支持Mac，其他系统请绕道。

还有新推出的摹客原型，可以在线完成高保真设计，自带强大的矢量绘图功能和组件编辑能力，还能无缝接入摹客协作，查看标注和图层代码，在线评审，撰写PRD等等。

很多产品原型设计软件，下面分享一些以及个人对此的看法总结：

Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。

墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比最高。

Invision: 可以说目前是国外发展最大的在线原型设计工具，主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch，想满足更精细的设计需要。国外一些大牛公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题，而且，贵。（土豪公司无视）

Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具，支持PS和sketch设计稿导入做交互原型，本身也支持中度保真程度的设计。也有自动标注功能。库对接unsplash，这样来自unsplash的很多精美的免费可以直接用。价格比Invision稍便宜。

POP（Prototyping on Paper）：这款比较另类，是给拍照的手画草图直接做交互。操作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等，即可满足一般的动态演示需要。但功能较为简单，对更深的需求无法满足。

Protoio：也是国外的一款手机原型开发平台。支持在大多数的浏览器运行，共享和协作操作方便，可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。

UXPin：UXPin是DeSmart团队开发的一个在线可点击原型设计工具该软件，拥有大量用户界面元素（包括web，iOS，Android等），可以共享预览，注解和实时的协同编辑。另外该软件还提供了版本控制和迭代功能。缺点仍然在于国外服务器和价格问题。 

这些产品原型设计软件都比较常见，你可以根据你个人需求来选择，反正我使用的是墨刀，它真的省时省力提高了我的工作效率。希望对你有帮助！有疑问的地方欢迎追问~

UI设计前景很不错，不止是在武汉，在哪里都好找工作。

UI设计是（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。

学习设计说难也不难，说容易也不容易，培养学习的兴趣很关键，最好在学习之前先来做一个小测试→点击测试我适不适合学设计

随着互联网的快速发展，更多的企业对于UI设计的重要性更加重视，一个好的网站或者产品UI设计师不可或缺。它是一个美的界面展示，这样不仅可以提升网站的美感，更是一个产品吸引用户的所在。所以，UI设计师是所有企业都需要的，优秀的UI设计师更是企业争抢的对象。

自古以来名师出高徒，设计这种依赖基础技术的专业，老师的作用非常重要的。真正好的UI设计老师，其专业水平是要通过多年实战来历练出来的。可以了解老师的作品，了解他们以前的工作经验和带过哪些经典项目案例，还有可以了解现在学员对老师的评价，更加充分的了解师资力量。

不懂技术，一个好的想法如何让他实现？

经常听到很多人说“我有一个很好的idea”，就差一个技术合伙人了。下面就产品的整个服务流程给不懂技术的创业者分享一下一款好的产品的打造流程。客栈30昨日刚刚上线，还是以远程工作为切入点，做互联网企业的技术远程中心，做好程序员的经纪人，为程序员和需求方服务，特别是这次30版本的短期雇佣服务，彻底解决产品需求方和程序员的沟通障碍，让程序员驻场到企业提供服务，完美解决项目开发过程中可能遇到的问题。

一个项目的开发流程一般是『想法』『原型』『设计』『开发』『测试』。

一般刚开始创业的人，没有产品研发经验的公司负责人，他们提供的word、ppt都是属于『想法』，无论描述再详细再怎么高大上都属于想法。很多这样的创始人或者产品负责人，就这样拿着自己的『想法』满世界的去找人做开发，就差一个靠谱程序员了，一些程序员自诩技术能力好，乐呵呵的接了项目，然后就是项目烂尾了。程序员客栈刚开始做外包分发也严重面临这个问题。之前一直搞不明白为什么会这样，现在才慢慢想清楚就是因为项目没有流程，介入的人越多结果越乱。项目一开始定位模糊，没有原型就找设计，没有静态设计和流程图就直接做开发，开发想赶进度就增加人手，开发完成不留文档摆出再也不想管了姿态。你们感受下，这些都是非常糟糕的做法，这样折腾产品质量能好才怪。做产品搞开发绝不是找包工头建房子的那种野路子。

所以能做好产品一定需要对『想法』『原型』『设计』『开发』『测试』这个流程有深刻的认知和实践。即使不完全按这个来，也要有类似的自己有效的套路，保证产品模块化有流程可依。要知道现在的产品开发绝大多数不是一个人能做完的，所以团结协同这么多人做开发，需要流程和进度规划两手抓。这样才能保证项目质量，做出优秀的产品。下面就对以上我们理解的每个流程以及下一个流程的启动条件做一个简单说明，让大家有个整体的即视感。

『想法』

所谓想法就是一切的口头描述、会议沟通、word ppt excel文字描述。无论描述得多么详细，讲的多么让你懂，都只是属于想法。之前和一些非技术行业要跨界到互联网的老板沟通时，他们经常这样描述自己的产品：对，这里就是和微信一样。吧啦吧啦，你懂了没？没懂是吧，要不我再给你讲一遍。然后程序员居然就懵懵懂懂的懂了，接着就去悲剧的搞开发了。当我走访到很多创业团队也正在这样操作时，瞬间整个人都不好了好吗。千万不要相信一个处于『想法』阶段的产品通过不断的多讲几遍能变成『原型』，即使你听懂了，那也不叫原型。其实我们知道程序员心里苦，只是程序员不说。

那又为什么，很多企业的官方网站交给猪八戒、地方建站团队、甚至老师学生团队也能做好呢？他们也没有什么流程。你一定要相信，猪八戒、地方一般的建站公司也只能做好企业展示网站了（或者修改代理软件）。因为这一块是比较标准化的东西，一个后台，成百上千种前端风格，足以满足你的各种需求。而需要改造世界的伟大创业者，就不要把自己的产品寄托在这样的公司平台了，还是自己搭团队做产品靠谱。互联网企业产品是核心，核心都外包了，你还做什么啊。重要的是外包基本都是烂尾的，这倒是很现实的有木有。

『原型』

原型是对『想法』的中流程、产品布局等的详细描述。一般的原型图可以用Axure、Sketch或者现在新出来的一些移动原型工具来画。画出来基本就能看到产品什么样子了。从『想法』到『原型』这是产品经理需要做的事情，他要理顺产品逻辑，找到重点，建立流程。所以不要逢人就说：我们没有产品经理，我自己就是产品经理，即使你一定要是产品经理相信也远远没有那样的专业内涵深沉。在这个大众创业万众创新的时代，一些很草莽原始的开发团队中，如果有一个非常能被折腾设计师，当然也是可以不需要原型的，直接把想法告诉给设计师好了，这样好炫酷有木有，然后做几个版本挑一个，巨大的沟通成本加上不断的修改，也是能做出来，起码产品外表好看了。为了更好的理解『原型』是什么玩意，这里挑了程序员客栈的原型放出来给看看

『设计』

有了原型，后面才是『设计』。不要原型就能一气呵成设计好一款产品的设计师不一定是好设计师。当然你也可以认为，牛逼的设计师不需要原型，就像牛逼的程序员不需要设计一样：某个大学导师的学生可牛了，他一个人能把所有的做完，是牛飞起来的全栈工程师，吧啦吧啦，你就信吧。『设计』部分就是我们能看到的产品外观了。交付给程序员的『设计』不仅包含“视觉”，还有“源文件”、“标注”和“切图”。设计可以分得更细，就像有UI了，还可以有UE（用户体验）。好的设计师能在设计中能照顾到UE，看你产品设计需要深入的程度了。

『开发』

前面搞了这么久，终于轮到程序员上场了，这里的重点就是需要找到靠谱程序员，程序员水平不一样，开发出来的东西就是一个天上一个地下，靠谱程序员和不靠谱程序员气质水平差得不是一星半点。一定不要指望一个菜鸟程序员能完美的按照静态设计把产品完美的做出来，他会告诉你一些普通功能的各种不可能实现的原因。拿到静态设计图和原型，后端程序员就可以设计架构开发后端（这又是一个尤其重要并深入的方向，这里就不深入了），前端程序员（web、iOS、Android）再根据后端接口和静态设计快速开发出来产品。中间的具体疑惑随时找产品经理，进度问题项目经理负责。一般一些团队会有自己的进度先后原则。比如：原型先出来，再是做设计和后端，设计和后端领先前端开发一周左右。这样配合起来，一个好的产品模块化的一步步的完成，然后就走完了产品中最重要的开发环节。

『测试』

好啦！产品终于做完了，程序员commit了最后部分的代码，然后给你说：我们做好了。这个叫做内测版，所以是不能发布用的。产品只有经过严格的测试，单元测试，公测后才能上线。千万不要相信一个程序员说：“我做的开发不需要测试”，即使他再牛。当然我相信一些好的程序员在开发的过程中很少留坑，并且边开发边写测试，所以做出来产品质量很高，但是这样的产品也是需要测试的，因为bug无处不在。我们需要理解产品不正常是正常状态。所以才需要“运维工作师”嘛，这种职业的存在也让一些非互联网行业的人无法理解。我卖你一套软件和系统，还给你配个人维护，那就说明产品开发出来就是为出问题做好准备的了。

最后提醒下，以上过程中一定要知道程序员的水平高低以及他们的习惯都足以影响你的产品质量，甚至生死。这里给那些开发不做版本管理，代码就放程序员自己电脑上；接口文档word提供，没有版本控制；产品不按模块化开发；没有产品经理和设计，产品开发程序员就按创始人口述；没有任何服务器备份机制写不下去了，你们感受下。这样的做法迟到要掉大坑里的，没有为什么！如果你们一定要抱着侥幸心理，不考虑各种意外来开发产品，那也是可以的，兵法有说“胜可知而不可为”。就是长期的胜利一定是建立在排除各种失败原因的基础上的，然后等待胜利的机会。

经过以上一步步的努力，然后你的产品就可以上线了，普大喜奔~~~烧香求保佑无bug，然后小宇宙爆发~~~一切都交给运营汪吧。