原型设计

结对情况 组员：高星031702202 容慧珺031702203 原型设计 Need（需求） 此次要求开发一个自动化的出牌系统，提供的接口： 登录 开启一局游戏 出牌 查询排行榜 查询往期对战结果 十三水智能的AI通过接收发牌接口接收到牌自动把牌排好， Approach（方法） 1.用原型设计Axure Rp设计出UI界面，大致规划各个部分的逻辑 2.用js实现程序的编写 Benefits（好处） 基于Web设计，对于使用设备的限制达到最低，使得用户容易体验 界面清晰易懂，无需用户学习操作 原型设计模型工具 Axure Rp 9 账号登入界面 这个是最开始用户登入的界面（登入高星和慧珺的AI是有权限的！） 输入正确的用户名和密码才能登入哟 开始游戏界面 账号验证正确之后，就到这个界面 开始游戏就是让AI去参赛 AI出牌界面 这个是AI参赛之后给你看的出牌界面 （AI收到的牌，然后该AI出牌） 当前牌局输赢情况 显示当前参赛的输赢情况 AI历史记录 显示历次的输赢记录 结对 结对过程 首先找到队友（和舍友抱团取暖） 然后研究这次作业的需求，讨论使用的工具，商量分工合作 其次着手设计界面 最后写博客总结这次结对 结对图片 非摆拍的，（p图是因为背景太乱了）拍照的时候在用Axure画界面，商量界面设计 PSP表格 PSP2.1 Personal Software Process

一、常见三种原型工具的对比 原型设计的常用三种工具，分别是： 墨刀、Axure RP、Mockplus 　　 在完成这次作业之前，我对原型设计还没有一个具体概念，之前一直是在学习前端，以为原型就是UI设计师给你的草图，后来去了解了原型设计，它是指“让人能够提前看到或是体验到产品的一个创作过程，它可以很好的去表达出设计人员对产品的一种需求，具有很好的思路展现形式，是一种较为立体有效的沟通方式”，这才才知道原型设计是一个过程。 我认为：从“草图”-》“低保真”-》“高保真”，原型设计在中都有着重要的意义 墨刀： 其控件的拖拉、大小的调整，都会自然的去匹配相应的母版大小，无需去担心有多移动一点或多选择一点 系统控件都是基于APP，以及系统平台IOS和安卓，因此在里面可以首先选择相应的设备布局，减少了不少工作环节 墨刀的缺点就是相应的就是不自由，在交互效果上、控件组合上，操作面板的选择上都不如AXURE 灵活 效果切换因为是采用连线的方式，有时候会让使用者脑子错乱的感觉 需要充费才能够使用更强大的共享创建功能 Axure RP： 功能最齐全，交互最多样，基本任何想要的效果都可以实现，尤其在制作PC端原型图上有优势。 有强大的交互效果，规格说明文档和流程图 可以多人协作，有版本控制管理 有动态面板，控件注释面板，丰富的控件资源 Mockplus： 设计了组件、图标、收藏、母版的 Tab

为了回顾一下之前学习的Axure，悄悄做了一个案例练练手，因为有用电子读书APP的习惯，再加上是常用APP差不多都绑定了QQ，所以选择腾讯旗下的微信读书作为这次案例的目标，功能点还没做完，只做了一部分，高深的部分还有待深入及后续的更新，目前先PO上已完成的原型设计图，在以后案例更新中会增加制作的详细的制作过程，既算是做一个总结，也希望能给同样正在学习的新手带来一点帮助（PS：这次已经成稿了，后面功能点的补充也会补上制作过程，博主有那么一丢丢的懒，之前做的过程就先省略啦~~~） 1. 站点地图 制作原型之前最好先构思一下自己的原型框架（功能复杂的话可以结合思维导图的模式），然后建出站点地图，这样可以帮助自己理清逻辑，当然，在实际制作的过程中还需要不断对产品的站点地图进行修改 2、手机框架（即我的站点地图中的微信读书） 对与APP的原型制作不同于网站，网站是很多网页完整的刷新，而APP，我们既要看到一个手机，又要看到里面的内容，而手机外壳最好是不要进行刷新的，这个可以借助内部框架部件来实现。如下图所示： 3、登录 APP打开的第一个页面，已经完成的功能点包括微信登录链接、单选是否已阅读并同意软件服务协议及隐私政策，如下图所示： 4、微信授权登录 在APP登录页面选择“微信登录”后跳转到微信进行授权的页面，如下图所示： 5、发现页面之新书页面 在微信进行授权页面点击“确认登录

引言： 原型模式是什么？它是在什么场景下被提出的呢？本章节，我们将详细了解下原型模式。 在软件系统中，当创建一个类的实例过程过于昂贵或复杂，并且我们需要创建多个这样类的实例时，如果我们通过new来创建类实例，这就会增加创建类的复杂度和创建过程与客户代码复杂的耦合度。如果采用工厂模式来创建这样的实例对象的话，随着产品类的不断增加，导致子类的数量不断增多，也导致了相应工厂类的增加，维护的代码维度增加了，因为有产品和工厂两个维度了，反而增加了系统复杂程度，所以在这里使用工厂模式来封装类创建过程并不合适。由于每个类实例都是相同的（类型相同），但是每个实例的状态参数会有不同，如果状态数值也相同就没意义了，有一个这样的对象就可以了。当我们需要多个相同的类实例时，可以通过对原来对象拷贝一份来完成创建，这个思路正是原型模式的实现方式。 定义： 原型模式就是通过给出一个原型对象来指明所要创建的对象类型，然后用复制这个对象的方法来创建更多的同类型对象。 原型模式的两种类型： object类的clone方法只会拷贝对象中基本的数据类型，对于数组、容器对象、引用对象等都不会拷贝，这就是浅拷贝。如果要实现深拷贝，必须将原型模式中的数组、容器对象、引用对象等另行拷贝。 复制代码 1 internal class Program 2 { 3 private static void Main(string[]

前言 本篇文章比较适合3年以上的前端工作者， JS三座大山 分别指： 原型与原型链，作用域及闭包，异步和单线程 。 原型与原型链 说到原型，就不得不提一下 构造函数 ，首先我们看下面一个简单的例子： function Dog(name,age){ this .name = name; this .age = age; } let dog1 = new Dog("哈士奇",3 ); let dog2 = new Dog("泰迪",2); 首先创造空的对象，再让 this 指向这个对象，通过this.name进行赋值，最终返回 this ，这其实也是new 一个对象的过程。 其实： let obj = {} 是 let obj = new Object()的语法糖； let arr = [] 是 let arr = new Array()的语法糖； function Dog(){...} 是 let Dog = new Fucntion()的语法糖。 那什么是原型那？ 在js中，所有对象都是Object的实例，并继承Object.prototype的属性和方法，但是有一些是隐性的。 我们来看一下原型的规则： 1. 所有的引用类型（包括数组，对象，函数）都具有对象特性；可自由扩展属性。 var obj = {}; obj.attribute = "三座大山" ; var arr = []

#1、原型与原型链， #2、作用域及闭包， #3、异步和单线程， 原型与原型链 说到原型，就不得不提一下构造函数，首先我们看下面一个简单的例子： function Dog(name,age){ this.name = name; this.age = age; } let dog1 = new Dog("哈士奇",3); let dog2 = new Dog("泰迪",2); 首先创造空的对象，再让 this 指向这个对象，通过 this.name 进行赋值，最终返回 this， 这其实也是 new 一个对象的过程。 其实： let obj = {} 是 let obj = new Object() 的语法糖； let arr = [] 是 let arr = new Array() 的语法糖； function Dog(){…} 是 let Dog = new Fucntion() 的语法糖。 那什么是原型那？ 在 js 中，所有对象都是 Object 的实例，并继承 Object.prototype 的属性和方法，但是有一些是隐性的。 我们来看一下原型的规则： 所有的引用类型（包括数组，对象，函数）都具有对象特性；可自由扩展属性。 ***/ var obj = {}; obj.attribute = “三座大山”; var arr = []; arr.attribute =

前言 本篇文章比较适合3年以上的前端工作者，JS三座大山分别指：原型与原型链，作用域及闭包，异步和单线程。 原型与原型链 说到原型，就不得不提一下构造函数，首先我们看下面一个简单的例子： function Dog(name,age){ this.name = name; this.age = age; } let dog1 = new Dog("哈士奇",3); let dog2 = new Dog("泰迪",2); 首先创造空的对象，再让this指向这个对象，通过this.name进行赋值，最终返回this，这其实也是new 一个对象的过程。 其实： let obj = {} 是 let obj = new Object()的语法糖； let arr = [] 是 let arr = new Array()的语法糖； function Dog(){...} 是 let Dog = new Fucntion()的语法糖。 那什么是原型那？ 在js中，所有对象都是Object的实例，并继承Object.prototype的属性和方法，但是有一些是隐性的。 我们来看一下原型的规则： 1. 所有的引用类型（包括数组，对象，函数）都具有对象特性；可自由扩展属性。 var obj = {}; obj.attribute = "三座大山"; var arr = []; arr

1、生活中的原型模型 　　生活中，快速复制，十分常见，比如小时候考试的印刷机，先通过刻版，下一步，以刻版或母版为基础进行大批量印刷。这样能快速的创建一批符合要求的对象。 　　变成中也十分常见，常见的有通过拷贝自身属性快速创建另一个对象。各个对象之间是相互独立的（内存空间地址不一致）， 2、浅克隆、深克隆 　　浅克隆，即通过实现Cloneable标记接口（空接口），在浅克隆中，如果原型对象的成员变量是值类型，将复制一份给克隆对象；如果原型对象的成员变量是引用类型，则将引用对象的地址复制一份给克隆对象，也就是说原型对象和克隆对象的成员变量指向相同的内存地址。在Java语言中，通过覆盖Object类的clone()方法可以实现浅克隆。 　　 @Data public class WeeklyLog implements Cloneable { private String name; private String date; private String content; private Attachment attachment; @Override public WeeklyLog clone(){ Object obj = null; try { obj = super.clone(); return (WeeklyLog) obj; } catch

一.定义 原型模式：原型模式用于创建重复的对象，实现对象的拷贝。这种模式类似于创建型模式，提供了创建对象的最佳模式。 这种模式存在的应用场景在于，能够复制当前对象，实现对象数据的克隆。比如：如果一个对象的数据需要经过较高代价的数据库操作，采用原型模式能够较好的缓存当前对象，减少数据库的访问量。 二.使用场景 思想：用实例对象，指导对象的创建工作. 应用：1.一个复杂的对象，包含多种数据和结构，层次较深时，适用与原型模式（当需要创建一个与复杂对象部分数据相同的对象） 2.当复杂对象需要独立于系统运行，而不破坏本系统中的结构 实例场景：1.一个楼盘有名称，地址和施工队三个成员变量。施工队有名称，人数和包工头。包工头有名称和年龄。现在要建设一个隔壁的楼盘，还是由这个施工队进行建设的，只是地址不同。 如果重新创建，过程较为复杂，费时费力，采取原型模式可以快速构建一个新的楼盘 2.系统中已经有一架飞机，飞机有名称和型号和厂商。厂商有名称，地址和负责人。负责人有姓名和年龄。现在要一家相同的飞机由不同的负责人进行指导生产的，如何快速创建这样的对象。 三.优缺点 优点：1.快速创建复杂对象实例 2.逃避构造函数约束 缺点：1.引用含有循环引用如何处理 2.必须实现Cloneable接口 下面是一张UML图用来说明原型模式的关系 下面是一个具体的应用场景：

最近都在浏览Quora网站，这是一个能够很好的和其他设计师交流的网站，但几乎都是用英文交流，对于大部分中国人来说还是有困难的，可能大家也更愿意去知乎上找答案，都说知乎是中国版的Quora, 可想而知这个网站的活跃度是极高的。注册Quora有一段时间了，每次遇到问题时，我就会去网站上看看答案或者提交问题，别人也会来咨询你问题。这段时间看到许多人都在问“有哪些网站可以在线学习UI/UX”，我同样也很好奇，所以我开始寻找回答，然后整理出了以下30个在线学习UI/UX的网站，有的是免费的，还有些是需要收费的。英语好的小伙伴可以看看呢，希望可以帮助到你们，对于新的设计师来说，这是你不容错过的学习机会，“大牛们”也可以通过学习这些网站让你的技术更上一层楼。 1. Hackdesign 这个网站资源很丰富，邮箱注册后每周都会收到设计课程和设计大师的作品，根据你的水平来学习，没有任何虚假的设计。 2. Coursera Coursera除了可以学习编程和设计等课程，还可以学习语言和生活常识，很不错的网站，有兴趣的小伙伴可以看看呢。 3. My.path 拥有上千个课程，文章等，想要学习UI/UX的千万别错过了，但是有的课程是要钱的，有的是免费的，自己选择咯。 4. SKILLSHARE 版面简洁清晰，想看谁就看谁，设计大牛手把手教你做好设计，而且还是免费的。 5. GYMNASIUM