Axure原型:1個(gè)原型搞定工作知會

團(tuán)隊(duì)中,總會有人沒有好的整理習(xí)慣,或者記性不好,亦或者你也不想為了這些事情耽誤自己的時(shí)間。如何能有效的減少這類事情的溝通成本呢?作者嘗試制作了一個(gè)關(guān)于需求溝通的面板原型,一起來看看。
“小健阿,那個(gè)缺陷管理的后臺地址是什么?”
“小健啊,98.8活動的需求稿你發(fā)給我了么,在哪里看?”
“小健啊,上周我們做了哪些需求啊,你整理出來看看”
“小健啊,現(xiàn)在XXX在開發(fā)什么,好像沒什么事干吧”
“小健啊,那個(gè)需求改過了吧,之前是為什么要改,之前的需求在哪呀”
這期又有些啥,點(diǎn)睹為快:點(diǎn)我查看
工作中如果不整理和歸類,當(dāng)有人問起上述問題的時(shí)候,如果自己都記不得了,那就非常的糟糕了!自己工作再忙,都會抽時(shí)間管理自己的收藏夾,整理自己的桌面和工作文件夾。我覺得這不僅僅是強(qiáng)迫癥,更多的還是通過井井有條的整理和分類,工作效率會大大提高。
團(tuán)隊(duì)中,總會有人沒有好的整理習(xí)慣,或者記性不好,亦或者你也不想為了這些事情耽誤自己的時(shí)間。如何能有效的減少這類事情的溝通成本呢?
我試著搞了一個(gè)需求的面板,讓所有的這類事件都有一個(gè)網(wǎng)頁能一鍵直達(dá)!經(jīng)過不斷的過程改進(jìn),和反復(fù)的試驗(yàn)和實(shí)踐。我的思路如下:
- 這個(gè)需求面板只有一個(gè)入口
- 這個(gè)入口要非常方便記憶
- 管理起來相對比較簡單
- 優(yōu)化頁面布局
教程開始前,你需要掌握如下知識:
- 【購買域名,配置域名解析】:學(xué)會域名解析
- 【部署服務(wù)器,進(jìn)行簡單配置】:XAMPP,或者單獨(dú)tomcat,apache,等web服務(wù)
- 【搭建簡單的SVN】團(tuán)隊(duì)工作可選
以上教程,可以百度或本站搜索獲取,本文中不再贅述。
下面教程開始:
第一步:購買域名
可以通過萬網(wǎng),或者其它域名供應(yīng)商處獲取域名,完成域名備案后即可使用。
這里當(dāng)然也可以直接使用IP,但I(xiàn)P不方便記憶,且如果公司的網(wǎng)絡(luò)運(yùn)維無法提供唯一的IP給你,這個(gè)IP還會動態(tài)變化,就更加的不合適了,為了避免這種情況,我購買了一個(gè)非常好記的域名,并讓IT將IP固定,只需通過簡單的XXXX.COM即可訪問。
選擇域名可以選擇通用詞,也可以選擇項(xiàng)目名,或者也可以讓運(yùn)維人員申請公司主站的二級域名。
第二步:搭建web服務(wù)
下載XAMPP,搭建一個(gè)web服務(wù),由于放置原型網(wǎng)頁。
這個(gè)本地搭建就好了,除非有必要,則可以自己購買服務(wù)器,或者找運(yùn)維提供外網(wǎng)的服務(wù)器。
第三步:配置web服務(wù),并配置域名解析
修改域名解析指向,讓其指向web服務(wù)的IP,并進(jìn)行簡單配置
第四步:使用原型工具,構(gòu)建需求面板,以承載越來越多的原型需求:
簡單畫了個(gè)草稿,就開始干了:
簡單的一個(gè)面板,可以承載所有的需求內(nèi)容,并且歷史需求可以追溯,一想到,xxx來問,那個(gè)小健啊,提交需求的地址在哪啊? 答曰:上xxx網(wǎng)站就看的到,真是一件非常愜意的事!
在具體做原型前,還需要提前規(guī)劃下,或者在不斷的迭代中改進(jìn):
- 【需求1】每個(gè)看需求的人的電腦和設(shè)備不同,最好能自動適配,或者將所有元素居中,固定畫板。
- 【需求2】為了避免更換ip,導(dǎo)致的原型地址變化,用變量保存ip,修改一處即可全局替換
- 【需求3】中間區(qū)域可能承載不同內(nèi)容,用動態(tài)面板規(guī)劃,便于后續(xù)擴(kuò)展
為了原型不至于太low,可以通過一些ui配色網(wǎng)站,或者參考一些成品的設(shè)計(jì)稿。當(dāng)然也可以找設(shè)計(jì)幫你弄弄,下面開始具體的教程:
第一步:【構(gòu)建背景】
1、拖入一個(gè)矩形框,并且在載入的時(shí)候設(shè)置長寬為屏幕的寬高
2、設(shè)置矩形框?yàn)闈u變色
做好之后,在瀏覽器中差不多就是如下效果:
第二步:【構(gòu)建核心區(qū)域】
1、創(chuàng)建一個(gè)動態(tài)面板,并設(shè)置固定的寬高,填充主要內(nèi)容
2、載入的時(shí)候使動態(tài)面板居中(這里可以使用獲取屏幕寬度的一半減去動態(tài)面板自身的一半來定位,當(dāng)然也可以直接用像素隨意調(diào)整)
3、現(xiàn)在再預(yù)覽下,看下設(shè)置是否生效,正確的話已經(jīng)可以看到動態(tài)面板已經(jīng)居中
第三步:【增加左右兩側(cè)的常用入口】
1、創(chuàng)建多個(gè)矩形框,并為其定位到左右兩側(cè)
通過屏幕及的位置,計(jì)算各個(gè)矩形的位置,將新增需求放在左側(cè),提交需求放在右側(cè)
2、現(xiàn)在預(yù)覽下,看起來的效果如下:
第四步:【在底部放入歷史的原型版本】
1、創(chuàng)建多個(gè)矩形框,并為其定位到底部區(qū)域
2、預(yù)覽下效果,現(xiàn)在看起來基本框架已經(jīng)建好
通過如上的步驟,我們的需求看板就完成了,為所有的入口加入原型的地址就可以訪問了。用變量保存地址,以防止ip變化導(dǎo)致需要多處修改:
以下是我在實(shí)際項(xiàng)目中使用的原型需求看板,自己購買了一個(gè)好記的域名,并使用svn和本地服務(wù)器管理所有的原型。提交需求鏈接的是項(xiàng)目管理工具,Bug系統(tǒng)鏈接的是bug管理工具…
這個(gè)方案并不一定完全適用于大家的工作場景,本篇更多的思想在于,養(yǎng)成良好的整理和歸納的習(xí)慣,在工作的過程中不斷改進(jìn)工作的方式和方法以提升工作效率。給領(lǐng)導(dǎo)一個(gè)網(wǎng)址,遠(yuǎn)比一個(gè)附件再次打開要效率高。希望本篇文章能對大家有所幫助和啟發(fā)!
內(nèi)容下載地址:
作者鏈接:http://pan.baidu.com/s/1pLn1dOn 密碼:4by2
在線預(yù)覽:http://h3180u.axshare.com
本文由 @陳張良 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自PEXELS,基于CC0協(xié)議
太秀了,也可以墨刀做一個(gè)專門的原型收納的原型
另外,鏈接打不開了
相當(dāng)于制作了一個(gè)WEB APP了,做了這么多絢麗的色彩,有點(diǎn)炫的感覺,可實(shí)用性不大,要管理這些內(nèi)容,還不如專業(yè)的工具或直接EXCEL表來得方便
專業(yè)工具有哪些?求指教
有沒有excel模板,能發(fā)給我嗎?謝謝
好無聊
我在學(xué)您的方法,注冊完域名我就卡住了……..
隨便買個(gè)就好了!不要糾結(jié)…
你的面板半成品打開太可怕了,哈哈,不停地變大,都占滿屏了,鼠標(biāo)移出也不縮小。 ?? ??