原型设计

Axure原型:1个原型搞定工作知会

LensNews

团队中,总会有人没有好的整理习惯,或者记性不好,亦或者你也不想为了这些事情耽误自己的时间。如何能有效的减少这类事情的沟通成本呢?作者尝试制作了一个关于需求沟通的面板原型,一起来看看。

Axure原型:1个原型搞定工作知会

“小健阿,那个缺陷管理的后台地址是什么?”

“小健啊,98.8活动的需求稿你发给我了么,在哪里看?”

“小健啊,上周我们做了哪些需求啊,你整理出来看看”

“小健啊,现在XXX在开发什么,好像没什么事干吧”

“小健啊,那个需求改过了吧,之前是为什么要改,之前的需求在哪呀”

这期又有些啥,点睹为快:点我查看

工作中如果不整理和归类,当有人问起上述问题的时候,如果自己都记不得了,那就非常的糟糕了!自己工作再忙,都会抽时间管理自己的收藏夹,整理自己的桌面和工作文件夹。我觉得这不仅仅是强迫症,更多的还是通过井井有条的整理和分类,工作效率会大大提高。

团队中,总会有人没有好的整理习惯,或者记性不好,亦或者你也不想为了这些事情耽误自己的时间。如何能有效的减少这类事情的沟通成本呢?

我试着搞了一个需求的面板,让所有的这类事件都有一个网页能一键直达!经过不断的过程改进,和反复的试验和实践。我的思路如下:

  1. 这个需求面板只有一个入口
  2. 这个入口要非常方便记忆
  3. 管理起来相对比较简单
  4. 优化页面布局

教程开始前,你需要掌握如下知识:

  1. 【购买域名,配置域名解析】:学会域名解析
  2. 【部署服务器,进行简单配置】:XAMPP,或者单独tomcat,apache,等web服务
  3. 【搭建简单的SVN】团队工作可选

以上教程,可以百度或本站搜索获取,本文中不再赘述。

下面教程开始:

第一步:购买域名

可以通过万网,或者其它域名供应商处获取域名,完成域名备案后即可使用。

这里当然也可以直接使用IP,但IP不方便记忆,且如果公司的网络运维无法提供唯一的IP给你,这个IP还会动态变化,就更加的不合适了,为了避免这种情况,我购买了一个非常好记的域名,并让IT将IP固定,只需通过简单的XXXX.COM即可访问。

选择域名可以选择通用词,也可以选择项目名,或者也可以让运维人员申请公司主站的二级域名。

第二步:搭建web服务

下载XAMPP,搭建一个web服务,由于放置原型网页。

这个本地搭建就好了,除非有必要,则可以自己购买服务器,或者找运维提供外网的服务器。

第三步:配置web服务,并配置域名解析

修改域名解析指向,让其指向web服务的IP,并进行简单配置

第四步:使用原型工具,构建需求面板,以承载越来越多的原型需求:

简单画了个草稿,就开始干了:

Axure原型:1个原型搞定工作知会

简单的一个面板,可以承载所有的需求内容,并且历史需求可以追溯,一想到,xxx来问,那个小健啊,提交需求的地址在哪啊? 答曰:上xxx网站就看的到,真是一件非常惬意的事!

在具体做原型前,还需要提前规划下,或者在不断的迭代中改进:

  • 【需求1】每个看需求的人的电脑和设备不同,最好能自动适配,或者将所有元素居中,固定画板。
  • 【需求2】为了避免更换ip,导致的原型地址变化,用变量保存ip,修改一处即可全局替换
  • 【需求3】中间区域可能承载不同内容,用动态面板规划,便于后续扩展

为了原型不至于太low,可以通过一些ui配色网站,或者参考一些成品的设计稿。当然也可以找设计帮你弄弄,下面开始具体的教程:

第一步:【构建背景】

1、拖入一个矩形框,并且在载入的时候设置长宽为屏幕的宽高

Axure原型:1个原型搞定工作知会

2、设置矩形框为渐变色

Axure原型:1个原型搞定工作知会

做好之后,在浏览器中差不多就是如下效果:

Axure原型:1个原型搞定工作知会

第二步:【构建核心区域】

1、创建一个动态面板,并设置固定的宽高,填充主要内容

Axure原型:1个原型搞定工作知会

2、载入的时候使动态面板居中(这里可以使用获取屏幕宽度的一半减去动态面板自身的一半来定位,当然也可以直接用像素随意调整)

Axure原型:1个原型搞定工作知会

3、现在再预览下,看下设置是否生效,正确的话已经可以看到动态面板已经居中

Axure原型:1个原型搞定工作知会

第三步:【增加左右两侧的常用入口】

1、创建多个矩形框,并为其定位到左右两侧

Axure原型:1个原型搞定工作知会

通过屏幕及的位置,计算各个矩形的位置,将新增需求放在左侧,提交需求放在右侧

Axure原型:1个原型搞定工作知会

2、现在预览下,看起来的效果如下:

Axure原型:1个原型搞定工作知会

第四步:【在底部放入历史的原型版本】

1、创建多个矩形框,并为其定位到底部区域

Axure原型:1个原型搞定工作知会

Axure原型:1个原型搞定工作知会

2、预览下效果,现在看起来基本框架已经建好

Axure原型:1个原型搞定工作知会

通过如上的步骤,我们的需求看板就完成了,为所有的入口加入原型的地址就可以访问了。用变量保存地址,以防止ip变化导致需要多处修改:

Axure原型:1个原型搞定工作知会

以下是我在实际项目中使用的原型需求看板,自己购买了一个好记的域名,并使用svn和本地服务器管理所有的原型。提交需求链接的是项目管理工具,Bug系统链接的是bug管理工具…

Axure原型:1个原型搞定工作知会

这个方案并不一定完全适用于大家的工作场景,本篇更多的思想在于,养成良好的整理和归纳的习惯,在工作的过程中不断改进工作的方式和方法以提升工作效率。给领导一个网址,远比一个附件再次打开要效率高。希望本篇文章能对大家有所帮助和启发!

内容下载地址:

作者链接:http://pan.baidu.com/s/1pLn1dOn 密码:4by2

在线预览:http://h3180u.axshare.com

题图来自PEXELS,基于CC0协议

(0)
LensNews

热评的文章