叨叨原型图

2024-08-26 13:32
文章标签 原型 叨叨

本文主要是介绍叨叨原型图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

      在我们大组长齐伟的带领下,我们开始了审批系统,一个全新的系统!这也意味着从头开始干,原型图、ER图、UML图、数据库设计……然后才能敲代码,从机房收费系统后,好久没有这样从头开始开发了。心里很激动,但是万事开头难啊。原型图也是不怎么会画,画了一星期,验收三次,修修改改,收获不少。


原型初体验

      第一版是完全的根据大组长齐伟的截图画的,没想过整体布局,觉得功能能实现就差不多了。而且一开始是什么都不会,很多交互事件都不会。不会没关系,从百度上学起。身边也有很多同学也有一些画原型图的经验。

   

    第一版的原型图我是在一个动态面板上画的,所有的页面就是一个State。现在先来叨叨我是怎么做到的,然后看效果。

   

   首先在部件视图里拖入一个动态面板,如图:


            

                                                                                                               

                               

  

       第二步就是右键动态面板——管理面板状态,在弹出的动态面板状态管理窗体上添加State,添加动态面板名称,可以就修改State的名称,然后双击进入该State里,在那里添加页面部件

    

                 

            

                                   


   在动态面板里可以设置通过部件交互和注释窗口添加事件,这个窗口里还有更多事件,可以从这里找找你想要的交互事件。


                                               


进入事件后,可以选择这个事件能给页面带来什么样的变化。这里我是通过设置动态面板来完成页面的交互。

       


    我在第一版里学到的大概就这些了,下面来看看成果吧,现在看来虽然很丑,但是那时候看来还是很有成就感的。

    

       




 验收过后的修改

  

     师哥说我们的系统要完全根据原型图来做,我们的耦合性太强了,系统是不能做成这样的。可以参照easyUI和bootstrap,大组长决定采用easyUI框架来画原型图。我们的页面需要分开来画,不能一个动态面板就搞定了。然后点开各大系统,灵感来了,又开始画了。这一次呢,不是我一个人画了,大家一起画的,通过一个母版页来画。出现的结果是,整体不错,但是合起来的问题很多,字体不统一,一样是表格,但就是不一样,给人的感觉是两个不同的系统。还有一些细节上的东西没有注意到,比如说鼠标悬停的时候,按钮的变化。这个我不太会,请教了组长。原来是这样的。在部件属性和样式窗口里的属性里,就有鼠标悬停是的变化设置。

   

                 


   顺带说一下,在样式里,我们也可以设置一些边框线条和颜色,以及字体等。

                    

               


   最后经过三次验收修改后,我们的原型图是这样的。有没有惊艳到你啊??


            


总结

   经过这次画原型图,在画图方面的能力提升了不少,也消去了自己对画原型图的恐惧。忽然明白,有些事,不是你不会,而是你不做。



这篇关于叨叨原型图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108694

相关文章

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

PMP–一、二、三模–分类–14.敏捷–技巧–原型MVP

文章目录 技巧一模14.敏捷--原型法--项目生命周期--迭代型生命周期,通过连续的原型或概念验证来改进产品或成果。每个新的原型都能带来新的干系人新的反馈和团队见解。题目中明确提到需要反馈,因此原型法比较好用。23、 [单选] 一个敏捷团队的任务是开发一款机器人。项目经理希望确保在机器人被实际建造之前,团队能够收到关于需求的早期反馈并相应地调整设计。项目经理应该使用以下哪一项来实现这个目标?

Axure元件库Ant Design中后台原型模板:提升设计与开发效率的利器

企业对于中后台产品的设计与开发需求日益增长。为了提升用户体验和开发效率,设计者和开发者们不断寻求更加高效、统一的解决方案。Ant Design,作为阿里巴巴开源的一套企业级UI设计语言和React组件库,凭借其丰富的组件和统一的设计风格,已成为众多项目的首选。而在Axure中使用Ant Design元件库,更是为中后台产品的原型设计带来了极大的便利。 Ant Design简介 Ant D

《GOF设计模式》—原型(Prototype)—Delphi源码示例:原型接口

 示例:原型接口 说明: (1)、定义 用原型实例指定要创建对象的种类,并且通过拷贝这些原型实例创建新的同类对象。 (2)、结构 原型 Prototype:抽象原型,声明一个克隆自身的接口。 ConcretePrototype:具体原型,实现一个克隆自身的操作。 客户端 Client:让一个原型克隆自身从而创建一个新的对象。 代码: unit uProtot

《GOF设计模式》—原型(Prototype)—Delphi源码示例:浅拷贝和深拷贝

 示例:浅拷贝和深拷贝 说明: Prototype模式最困难的部分在于正确实现Clone操作。例如,当所考虑的类已经存在时就难以新增Clone操作。当类内部包括一些不支持拷贝或有循环引用的对象时,实现克隆可能会很困难。 大多数语言都对克隆对象提供了一些支持。例如,Smalltalk提供了一个copy的实现,它被所有Object的子类所继承。C++提供了一个拷贝构造器。但这些措施并不

【办公效率】Axure会议室预订小程序原型图,含PRD需求文档和竞品分析

作品说明 作品页数:共50+页 兼容版本:Axure RP 8/9/10 应用领域:中小型企业的会议室在线预订 作品申明:页面内容仅用于功能演示,无实际功能 作品特色 本作品为会议室预订小程序原型图,定位于拥有中大型组织架构的企业、办公楼、园区等群体,为其提供简易化的线上会议室管理的服务。 本作品从业务分析、竞品分析、用例图、原型设计,到需求清单,依照(敏捷开发)标准实战流程输出一套

Axure健康助理小程序原型图70+页,医疗类高保真高交互模板

作品概况 页面数量:共 70+ 页 源文件格式:限 Axure RP 9/10,非app软件无源码 适用领域:医疗健康、健康助理 作品特色 本作品为健康助理小程序的Axure原型设计图,属于医疗健康项目,设计规范内容清晰,高保真高交互,欢迎想了解医疗健康行业的同学观摩学习,希望对你有所帮助。 该产品的定位属于第三方互联网医疗服务平台,致力于为用户提供客观可信赖的医疗信息服务。产品未来所提供

JS设计模式之“语言之魂” - 原型模式

前言 当我们学习JavaScript的时候,经常会听到原型(prototype)、原型链(prototype chain)和原型模式(prototype pattern)这些概念,它们之间有什么关联呢?怎么样才能使用好原型模式呢? 一. “语言之魂” - 原型模式 概念 原型模式是JavaScript语言的核心机制之一,是JavaScript中最基本的设计模式,因此被称为“

原型模式,简化多次创建相同的内容

原型模式的定义:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。 UML图: C++代码: // filename: prototype.h // author: Qinglong.mark.He #include <iostream> #include < string > class  Prototype { protected :     std: