线框图

第1章 课程介绍 本章为课程导学，帮助同学们初步了解UI设计，介绍实战课程安排，并熟悉产品设计、开发流程，了解如何与其它岗位配合。 1-1 导学视频 1-2 产品开发流程 第2章 产品需求解析 本章将针对产品需求进行解析，通过草图、流程图形式对需求进一步梳理，并完成产品结构设计，让同学们学会用产品思维看需求。 2-1 产品概述梳理（新的） 2-2 产品需求解析 2-3 产品草图绘制 2-4 产品结构图绘制 第3章 线框图绘制 本章将完成产品线框图绘制，深入梳理产品结构，帮助同学们了解产品的频道、页面以及页面元素的逻辑关系。 3-1 问吧分类页线框图绘制 试看 3-2 问吧分类列表页线框图绘制 试看 3-3 问吧详情页线框图绘制 3-4 知识列表页线框图绘制 3-5 知识详情页线框图绘制 3-6 知识专栏列表页线框图绘制 3-7 问吧专栏问答页线框图绘制 3-8 问吧专栏列表页线框图绘制 3-9 我的频道线框图绘制 3-10 积分商城商品页线框图绘制 3-11 商品详情页线框图绘制 3-12 发现页线框图绘制 3-13 页面流程图绘制 第4章 设计准备 本章将在效果图设计前建立产品的设计规范，包括标准色规范、控件、页面元素以及文本规范，让同学们学会从整体把控设计，并完成产品启动图标设计。 4-1 界面布局规范设计 4-2 标准色规范设计 4-3 文本规范设计 4-4 控件规范 (上)

Axure RP是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP则是Rapid Prototyping（快速原型）的缩写。 Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。 Axure RP已被一些大公司采用。Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程序开发工程师也在使用Axure。 Axure的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的线框图。不用进行编程，就可以在线框图上定义简单连接和高级交互。在线框图的基础上，可以自动生成HTML（标准通用标记语言下的一个应用）原型和Word格式的规格。 如下图： Axure RP 的工作环境:Windows、OS X。 来源： https://www.cnblogs.com/fc731655131/p/7904489.html

原始学习资源： http://www.axure.com/dynamic-panels-basic 如果有什么地方不通畅或是有不清楚的地方，欢迎指教！ 意译： 动态面板是实现较为复杂交互的很重要的部分。 动态面板的主要思想是在同一块区域显示不同的内容。 动态面板最大的特点就是“动态”，这个动态表现为两个部分，显示/隐藏、不同的状态。 简单的例子：官方例子见： show-hidden-panel-tutorial 当用户登录时会有成功和失败两种情况，成功时就跳到指定页面，而失败又分为很多情况： 1、帐号没填、密码没填（当然这种情况下，登录按钮应该是不能点的；这里只是举例） 2、帐号不存在、或是输错了 3、验证码错了 4、密码错了 那么就应该建一个动态面板，为各种错误设置不同的状态，并为各状态设置好合适的内容。 设置这个动态面板为隐藏（在点登录前是看不到的） 然后再为登录按钮指定不同的交互（应该是5种了）。 上图只做三种情况。可以自行设定。 另一个例子，制作tab标签区域：（官方例子见： tab-control-tutorial ） 上图是京东首页的一块（在京东快报下方） 比较简单： 1、建立动态面板，并命名，然后做好动态面板的4个状态 2、建立四个按钮，输入文字并设置好默认状态 3、为每个按钮设置鼠标移入的交互，将动态面板改为对应状态 4、为四个按钮设置悬停样式 不足之处

原始学习资源： http://www.axure.com/dynamic-panels-advanced 如果有什么地方不通畅或是有不清楚的地方，欢迎指教！ 意译： 相对于按钮形状来说，动态面板的交互行为更多，请对比： VS 而且，动态面板中还可包含动态面板，如图： 这两个重要的特性，就赋予了动态面版强大的功能： 1、多级目录（视频教程见 dynamic-panels-advanced （似乎需要番习习檣才能看到视频），文本教程见 accordion-control-tutorial ） 要点： 为 标题框 设置点击时切换内容动态面板的可见性 为内容动态面板设置显示时下移（相对值）下面的动态面板；显示时上移（相对值）下面的动态面板 移动时下面的面板跟随。 自己试一下就知道了，重要的是要为各动态面板统一命名（相对于程序装变量的命名规则，这个简单多了），不然的话元素多了就乱了。 用到了动态面板的OnMove\OnShow\OnHide交互 2、相册（直译是相片传送带） （6.0版本的教程见： photo-carousel-tutorial-60 6.5版本的教程见： photo-carousel-tutorial ） 这个比多级目录简单多了，只不过多级目录是一下子就出现，相册的例子是加了出入的效果 而且6.5版本的优化了很多，6.0的麻烦太多了。 3、可拖拽地图 （教程见

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 原型设计分为两种，一种是静态的线框图，我们一般叫wireframing；另一种是动态的原型，一般叫作prototyping。目前在prototyping设计中涉及到的交互主要分为三种：页链接、交互状态和组件之间的交互。而动态原型的设计工具中比较常见的能够包括这三种交互设置功能的也有很多，比如：Axure、Justinmind、Mockplus和Proto.io等等，种类之多，数不胜数。但是，这些工具无一例外，都在宣传自己的过程中说自己是快捷迅速的。我们平时说的Axure，全名叫做Axure RP，而RP代表的意思恰恰就是Rapid Prototyping（快速设计原型）；Mockplus也说自己是更快更简单的原型设计工具。既然都说自己是快速简单，我们今天就来比较实际操作一下，你们到底有多快。 页链接设置：速度平分秋色，可视化体现差异 在Axure所有的交互设置中，页面链接是最简单的一种了，只需要点击右侧属性面板中的创建链接，并在下拉菜单中选中需要跳转的页面就可以了。但是Axure在这一过程中有一个明显的不足，就是对于可视化的缺失。如果在这个项目中各个页面的名称比较相近，那么这样使很发生链接错的情况的。 而Justinmind应该是也体会到了Axure的这一问题，它采用的是一种拖拽的方式来实现页链接的设置

网页的线框图是非常直观、但是也没什么技术上难点的东西。只需要你大概描出页面上需要的一些元素，比如头部、导航、页脚等等，最多再就是一些交互、内容区域什么的。 但这对于任何网络应用的开发都是非常重要的。 当然有很多种方法可以做这件事情，最简单的就是拿起纸和笔，但是在这篇文章中，我们要介绍的是一些非常高效好用的在线原型工具，并且他们完全免费。 Lumzy 快速原型工具 使用Lumzy你可以为你的应用创建原型图，还能添加一些交互事件。有了它，你可以创建弹出框，交互的页面导航，添加外部链接等等。他对于团队协作设计和交流提供了一个很好的平台，而且他完全免费。 Mockup Builder 杀手级的原型工具 MockupBuilder最近才发布，很值得期待。他有非常多的功能：UI模型，交互的线框图，页面布局，客户端原型甚至站点地图和屏幕导航。 当然，对于与客户和团队成员交流也是非常强大的。并且，他全部免费。 Tiggr 协作制作原型图 Tiggr的思想是给你需要做成最终稿的所有资源。你可以设计很多的元素，然后分享，其他的协作用户会帮你制作相应HTML/CSS代码，以达到最快生成。花10秒钟注册，你就能享用这个免费的东东了。 Frame Box 轻量级原型在线制作 FrameBox并没有多么特别的特色。你可以拖放、设置大小、复制粘贴这些UI组件