人
已閱讀
已閱讀
APP開發(fā)原型設(shè)計(jì)的一些技巧
來源:lexintech.com ?? ?? 發(fā)布時(shí)間:2019-05-17
產(chǎn)品經(jīng)理在APP開發(fā)前要進(jìn)行需求分析以及產(chǎn)品原型設(shè)計(jì),目前大多數(shù)產(chǎn)品經(jīng)理使用的原型設(shè)計(jì)工具基本上都還是用axure,在使用axure制作原型的過程中,我們也整理了一些有用的技巧分享給大家。
一、保持原型的組織性和命名規(guī)范
Axure提供了許多選項(xiàng)來保持項(xiàng)目的組織性。
比如頁(yè)面快照可以讓你快速組織一個(gè)樹狀結(jié)構(gòu),母版在命名后可以排序等等。
規(guī)范的命名是原型被容易理解和維護(hù)的關(guān)鍵所在,任何一個(gè)頁(yè)面一定要與最終研發(fā)出來的產(chǎn)品一致。
比如訂單詳情頁(yè),登錄頁(yè),這些都是非常規(guī)范的命名。在原型維護(hù)時(shí),就可以通過搜索框快速定位。——效率值千金。
實(shí)際上,規(guī)范的命名應(yīng)該下沉到元件級(jí)。
更為理想的情況下,下游可以直接延續(xù)上游的定義規(guī)則,整個(gè)團(tuán)隊(duì)可以基于一個(gè)通用的語(yǔ)言來構(gòu)建整個(gè)團(tuán)隊(duì)流程。
在項(xiàng)目發(fā)生意料之外的事情時(shí),規(guī)范性的原型設(shè)計(jì),可以幫助他人順利地介入然后接管事務(wù),以便保持項(xiàng)目的健康。
理想狀態(tài)下,一個(gè)原型應(yīng)該是清晰易懂不需要解釋的,特別是在跨地區(qū)協(xié)作的時(shí)候。
Axure提供了許多選項(xiàng)來保持項(xiàng)目的組織性。
比如頁(yè)面快照可以讓你快速組織一個(gè)樹狀結(jié)構(gòu),母版在命名后可以排序等等。
規(guī)范的命名是原型被容易理解和維護(hù)的關(guān)鍵所在,任何一個(gè)頁(yè)面一定要與最終研發(fā)出來的產(chǎn)品一致。
比如訂單詳情頁(yè),登錄頁(yè),這些都是非常規(guī)范的命名。在原型維護(hù)時(shí),就可以通過搜索框快速定位。——效率值千金。
實(shí)際上,規(guī)范的命名應(yīng)該下沉到元件級(jí)。
更為理想的情況下,下游可以直接延續(xù)上游的定義規(guī)則,整個(gè)團(tuán)隊(duì)可以基于一個(gè)通用的語(yǔ)言來構(gòu)建整個(gè)團(tuán)隊(duì)流程。
在項(xiàng)目發(fā)生意料之外的事情時(shí),規(guī)范性的原型設(shè)計(jì),可以幫助他人順利地介入然后接管事務(wù),以便保持項(xiàng)目的健康。
理想狀態(tài)下,一個(gè)原型應(yīng)該是清晰易懂不需要解釋的,特別是在跨地區(qū)協(xié)作的時(shí)候。
二、學(xué)會(huì)使用母版
任何工具,包括紙和筆,都只是將你的想法,傳遞給別人的一種形式或是工具。
不要在這個(gè)環(huán)節(jié)投入過多不必要的精力,盡可能的設(shè)計(jì)模塊化、繼承化的東西。
母版正是這種思路的完美體現(xiàn)。
任何一個(gè)App都有很多頁(yè)面,多數(shù)情況下頁(yè)面的結(jié)構(gòu)是一致的,不同的是頁(yè)面元素。而且還有一些功能,也會(huì)在不同的頁(yè)面出現(xiàn)。
有的人就不假思索的直接復(fù)制粘貼來完成這項(xiàng)工作,不但效率低,而且容易出錯(cuò)。
更好的做法就是制作一個(gè)母版,直接拖拽極可。母版設(shè)計(jì)實(shí)例
母版可以理解為一個(gè)可以復(fù)用的頁(yè)面,你在設(shè)計(jì)頁(yè)面的所有元件、交互和技巧都可以在母版中使用。
母版設(shè)計(jì)好,可拖放在頁(yè)面的任何位置,統(tǒng)一修改維護(hù),母板有更新,所有用到該母版的頁(yè)面都會(huì)更新。整個(gè)原型的維護(hù)更新就會(huì)變成非常便捷,而且不會(huì)出錯(cuò)。
母版的另外一個(gè)好處是可以觸發(fā)事件,在一些情況下,通過母版觸發(fā)事件是非常高效的設(shè)計(jì)方法。但是,不要把過大的組合對(duì)象變成母版,而是應(yīng)該把多個(gè)母版變成一個(gè)組合對(duì)象。
三、系統(tǒng)自帶的元件足夠完成絕多數(shù)的設(shè)計(jì)
元件作為axure的基礎(chǔ),是表達(dá)原型的基本元素。
一個(gè)完整的元件庫(kù),能夠讓你的原型看起來更真實(shí)。很多人就開始熱衷建立一個(gè)自己的 Axure 組件庫(kù),網(wǎng)上也能找到大量的元件庫(kù)。
但實(shí)際上,你很可能并不需要這么做。
大多數(shù)情況都可以通過自帶的元件庫(kù)完成工作,更激進(jìn)一點(diǎn)的方式,直接用占位圖即可。
對(duì)原型而言,絕大多數(shù)都不需要(也不應(yīng)該)去追求原型的仿真美觀程度,而應(yīng)該在于表達(dá)思路,完善想法上面,icon這一類的工作是設(shè)計(jì)師的范圍。
樸素原型實(shí)例
對(duì)PM而言,用最樸素的方式表達(dá)產(chǎn)品思路更重要,也就是你并不需要為原型付出額外的精力。
四、一個(gè)元件可以搞定的事情,絕對(duì)不用兩個(gè)
axure的原型因?yàn)槭窃M成,所以當(dāng)你每添加一個(gè)元件到你的項(xiàng)目中,也就意味著未來的維護(hù)需要耗費(fèi)更多時(shí)間。
因此,原型一定要簡(jiǎn)化。
一個(gè)元件可以搞定的事情,絕對(duì)不用兩個(gè),多一分力氣都不要花在“原型”的設(shè)計(jì)上。
這一點(diǎn)實(shí)際上要求你對(duì)工具的每一個(gè)特性都非常熟悉。
比如在button上再組合一個(gè)文本標(biāo)簽,這樣帶來的麻煩是修改命名、設(shè)置交互,甚至移動(dòng)都是需要操作多個(gè)元件,而且導(dǎo)致元件文件過于臃腫。
這種做法很常見。
還有一種奇怪的現(xiàn)象就是,使用兩個(gè)面板實(shí)現(xiàn)互斥性操作。A面板操作B面板,這種設(shè)計(jì)在多數(shù)情況下都是蹩腳設(shè)計(jì)。
這種情況可能是對(duì)面板的操作還不太熟悉,任何元件都可以直接轉(zhuǎn)換為動(dòng)態(tài)面板,動(dòng)態(tài)面板可增加多個(gè)狀態(tài),直接設(shè)置每個(gè)狀態(tài)的跳轉(zhuǎn)即可。
設(shè)計(jì)一個(gè)選項(xiàng)卡只需要一個(gè)動(dòng)態(tài)面板即可實(shí)現(xiàn),而不是通過多個(gè)面板的交互進(jìn)行切換。
動(dòng)態(tài)面板很常用也很好用,通常都是用來做一些交互動(dòng)效,比如輪播圖,選項(xiàng)卡等。
但是不要濫用,濫用指的是在不需要的情況使用面板,在可以用的時(shí)候又不用。
axure的原型因?yàn)槭窃M成,所以當(dāng)你每添加一個(gè)元件到你的項(xiàng)目中,也就意味著未來的維護(hù)需要耗費(fèi)更多時(shí)間。
因此,原型一定要簡(jiǎn)化。
一個(gè)元件可以搞定的事情,絕對(duì)不用兩個(gè),多一分力氣都不要花在“原型”的設(shè)計(jì)上。
這一點(diǎn)實(shí)際上要求你對(duì)工具的每一個(gè)特性都非常熟悉。
比如在button上再組合一個(gè)文本標(biāo)簽,這樣帶來的麻煩是修改命名、設(shè)置交互,甚至移動(dòng)都是需要操作多個(gè)元件,而且導(dǎo)致元件文件過于臃腫。
這種做法很常見。
還有一種奇怪的現(xiàn)象就是,使用兩個(gè)面板實(shí)現(xiàn)互斥性操作。A面板操作B面板,這種設(shè)計(jì)在多數(shù)情況下都是蹩腳設(shè)計(jì)。
這種情況可能是對(duì)面板的操作還不太熟悉,任何元件都可以直接轉(zhuǎn)換為動(dòng)態(tài)面板,動(dòng)態(tài)面板可增加多個(gè)狀態(tài),直接設(shè)置每個(gè)狀態(tài)的跳轉(zhuǎn)即可。
設(shè)計(jì)一個(gè)選項(xiàng)卡只需要一個(gè)動(dòng)態(tài)面板即可實(shí)現(xiàn),而不是通過多個(gè)面板的交互進(jìn)行切換。
動(dòng)態(tài)面板很常用也很好用,通常都是用來做一些交互動(dòng)效,比如輪播圖,選項(xiàng)卡等。
但是不要濫用,濫用指的是在不需要的情況使用面板,在可以用的時(shí)候又不用。
五、掌握快捷鍵
組合元件:ctrl+g;
鎖定元件:快捷鍵:ctrl+k;
平移元件:按住shift拖動(dòng)元件;
復(fù)制元件:按住ctrl拖出一個(gè)復(fù)制的元件;
垂直或水平復(fù)制新元件:按住ctrl+shift后拖動(dòng)元件
組合元件:ctrl+g;
鎖定元件:快捷鍵:ctrl+k;
平移元件:按住shift拖動(dòng)元件;
復(fù)制元件:按住ctrl拖出一個(gè)復(fù)制的元件;
垂直或水平復(fù)制新元件:按住ctrl+shift后拖動(dòng)元件
以上分享的這些技巧,希望能幫助產(chǎn)品經(jīng)理們更有效的制作原型圖。