Balsamiq Mockups 自定义控件和页面模板.docx
- 文档编号:16914102
- 上传时间:2023-04-24
- 格式:DOCX
- 页数:16
- 大小:743.77KB
Balsamiq Mockups 自定义控件和页面模板.docx
《Balsamiq Mockups 自定义控件和页面模板.docx》由会员分享,可在线阅读,更多相关《Balsamiq Mockups 自定义控件和页面模板.docx(16页珍藏版)》请在冰豆网上搜索。
BalsamiqMockups自定义控件和页面模板
BalsamiqMockups自定义控件和页面模板
WorkingwithSymbols
Startingwithversion2.0,MockupsforDesktopsupportstheconceptofSymbols.Othersoftwarereferstothissamefeatureastemplatesormasterpages,componentsorwidgets.
从版本2.0开始,Mockups桌面版支持Symbol概念。
类似特性在其它软件中称为Templates、Masterpages、Components或者Widgets。
Inessence,Symbolsletyoureusecommonelementsacrossdifferentmockups.
本质上,Symbol让你可以在多个Mockup文件引用公共的元素。
Here’saquickvideointroductionthatshowsthebenefitsofthisfeature.
CreatingSymbols创建Symbol
SymbolsinMockupsaresimplynamedgroupswhichhavebeen“converted”tosymbols(we’lltalkmoreaboutwhatgoesonunderthehoodlater),butfirst,let’screateasymbol!
在Mockups中,Symbol是简单命名转化为Symbol形态的Group。
待会我们会讨论更多它的帽底乾坤。
现在,让我们先创建一个Symbol!
Youmaycreateanewgrouptoconverttoasymboloruseagroupyoualreadyhave.Thefollowingstepsassumeyouarecreatinganewgroup.
你可以创建一个新的Group或者选择一个已经创建好的组来转化为Symbol。
下列步骤假设从创建一个新的Group开始。
1.Selectthecontrolsyouwanttogroup
2.Groupyourselection(SelectEdit->Groupandgroupturnsbluishcolor)
3.NametheGroup(i.e.loginform)
1.选择想要群组的控件
2.群组选中控件。
(选择Edit菜单下的Group命令,Group后会呈蓝色。
)
3.为Group命名。
(比如loginform)
4.SavetheFilewiththenewgroup(Filemustbesavedtoconvertagrouptoasymbol.)
5.Clickonthe‘ConverttoSymbol’iconinthePropertyInspectortoSymbol。
4.保存带有这个新Group的文件。
(转化Group为Symbol之前文件必须要保存。
)
5.在PropertyInspector点击ConverttoSymbol按钮转化为Symbol。
Youwillnoticethatthegroupselectionbecomesalightgreen.Thismeansthattheselectionisnowaninstanceofasymbol.
你会注意到Group选择变为了亮绿色。
这表示选中的是Symbol的一个实例。
Younowhaveasymbolnamed‘loginform’whichwillbedisplayedintheProjectAssetstaboftheUILibrary.(YoucanalsoaddthesymbolviaQuickAdd).
你现在就有了一个名为“loginform”的Symbol,它会显示在UILibrary的ProjectAssets标签里。
(同样也可通过QuickAdd添加它。
)
UndertheHood帽底乾坤
Whenyouhit“ConverttoSymbol”,MockupsforDesktopaddedthenamedgroupyouselectedtoafilecalledsymbols.bmmlinafoldercalled“assets”rightnexttoyourbmmlfiles.YoumightwanttorefertoourbestpracticesforcreatingprojectswithMockupsifyouhaven’treadityet.
一旦点击“ConverttoSymbol”,Mockups桌面版会将选中的已命名Group添加到你BMML文件旁assets文件夹下symbols.bmml文件中。
如果不了解assets文件夹,你可能需要参考bestpracticesforcreatingprojectswithMockups(使用Mockups创建项目最佳实践)。
ThekeytounderstandingSymbolsinMockupsisthatSymbolsarenamedgroupscontainedinsideBMMLfilesthatarestoredinyourprojects’assetsfolder.
理解Symbol的关键是,Symbol是存放在项目assets文件夹BMML文件中的已命名Group。
Weknowthedefinitionaboveisprettydense,butunderstandingitfullywillhelpyoumakethemostoutofthisawesomelypowerfulfeature.Don’tworryifitmakeslittlesensetoyourightnow,we’llcomebacktoit.Justreaditonemoretimeandmoveon.:
)
我们知道这个定义相当晦涩难懂,但彻底理解它有助于你掌握这个及其强大的特性。
如果现在对Symbol还是没有什么概念,请别担心,我们一起回到前面,再学习一遍之后继续前进。
;)
OverridingSymbolProperties重定义Symbol属性
Onceyouhavecreatedasymbol,youwilloftenwanttochangeitalittleeachtimeyouuseit.ImagineforinstanceaSymbolyoucreatedasamasterpage/template,containingawebpage’stitleandnavigation.
创建了Symbol后,每次使用时常常需要做一些小调整。
假设你创建了一个Symbol作为MasterPage/Temple,它包含了一个网页的标题和导航。
Allyourwebsitepageswillhavethesamefontsizeandpositionforthetitle,butthetitle’stextshouldbedifferentoneachpage.Samegoesforwhichpageshouldbeshownascurrentinyournavigationbar.
整个网站的PageTitle具有相同大小的字体和位置,但是每一个页面Title文本都有所不同。
同样道理,导航栏标识某一个页面的当前地址也有所不同。
Symbolsallowyoutoachievethisresultbylettingyouoverridesymbolpropertieseachtimeyouuseasymbol.Todoso,startbydouble-clicking(orhittingENTER,orF2)onasymbolto“enterit”.
Symbol允许每一次使用时重定义属性达到这个目的。
需要的时候,请在Symbol上双击、Enter或者按快捷键F2“进入内部”。
Althoughthisexperienceisverysimilartoeditingagroup’scontents,youwillnoticethatMockupsforDesktopwarnsyouthatwhatyou’redoingisreallyoverridingsomepropertiesofaSymbol.
这很像编辑Group内容,但你会注意到一个提示,是否真的需要重新定义Symbol的属性。
Atthispoint,youcanmanipulateeachcontrolinsidethesymbolsatwill,asifyouwereeditingagroup.Someoperationsarenotpermittedwhileoverridingsymbolproperties,suchasadding,deletingorgroupingcontrols.
如同编辑Group一样,你可以随意调整Symbols里面每一个控件。
超过Symbol属性的操作不被允许,比如添加、删除或者群组控件。
Ifyoumakeamistake,youcanalwaysundotogetback.IfyouwanttoremoveasinglepropertychangeandgobacktoaSymbol’sdefaultproperty,youcanclickonthelittlegreen“x”iconinthepropertyinspector.
如果做了误操作,你可以一直撤销返回。
如果只想撤销Pos.&Size恢复为Symbol默认数值,可以点击PropertyInspector中(Pos.&Size右边)绿色的“x”icon。
YoucanalsorevertallchangesyoumadetoaSymbol’sinstanceatonce,viathe“x”iconinthepropertyinspectoryouseewhenselectingthewholesymbol.
通过PropertyInspector中(Symbol一栏最右边)的“x”icon,也可以一次性撤销全部操作(Pos.&Size和内容),恢复为Symbol实例。
EditingaSymbol’sSource编辑Symbol源文件
ThemainbenefitofreusableSymbolsisthatifyouneedtomakeachange,youcanjustdoitinoneplaceanditwillbepropagatedtoalltheinstances(uses)ofthatSymbol.
重复使用Symbol的主要优点是,一旦需要做调整,只是编辑一个地方,就会更新所有Symbol的实例。
ToeditaSymbol’ssource,yousimplyopentheBMMLfilethatcontainsthesymbolandedititnormally,justasyouwouldeditagroup.Saveyourchanges,gobacktoamockupsthatusesthatsymbolandnoticethatyourchangeshavebeenapplied,justlikethat!
编辑Symbol源文件,如同编辑Group。
只需要打开BMML文件包含Symbol,然后编辑就可以了。
保存你的更新,回到Mockups中使用Symbol,就会注意到变动已经生效了,就这样而已。
ThereareacoupleofshortcutsintheappthathelpyoureachaSymbol’ssourceinordertoeditit:
程序提供2种快捷方式帮助你打开Symbol源文件以便于编辑。
•YoucanselectaSymbolinstanceandhitthe“EditSource”buttoninthepropertyinspector.
•你可以选中一个Symbol实例,在PropertyInspector点击“EditSource”。
•YoucanenteraSymbolforoverriding,thenhitthe“Edit”buttonthere.
•你可以进入一个Symbol实例,然后点击如下图的“Edit”按钮。
SymbolLibraries
ASymbolLibraryisacollectionofsymboldefinitions.YoumightwanttocreateaSymbolLibraryinordertosharecommoncontrolswithyourteam,orsharethemwiththecommunityviaMockupsToGo.
TocreateaSymbolLibrary,allyouhavetodoistocreateabmmlfile,createsomegroups(onepersymbol)andgiveeachgroupaname.
SymbolLibrary是Symbol集合。
你可以创建SymbolLibrary共享控件给你的团队,或者通过社区MockupsToGo分享它们。
创建一个SymbolLibrary,必须创建一个BMML文件以及一些Group(每一个是一个Symbol),并且Group有各自的名字。
WheneversomeonesavesyourBMMLinanassetfolder,they’llbeabletousethegroupscontainedinitasSymbolsinanymockupofthatproject.
只要有BMML文件存到asset文件夹,其中的Group就会转化为在这个项目任何Mockup中都可以使用的Symbol。
Onemorething…UsingWholeMockupsAsSymbols还有一件事情……将整个Mockup作为Symbol
There’salittlesecretwehaven’tsharedwithyouyet.RememberhowSymbolsinMockupsaresimplynamedgroupscontainedinsideBMMLfilesthataresavedinaproject’sassetfolder?
Well,itturnsoutthat’snotentirelytrue.There’sonemorewaytocreateaSymbolinMockups:
justcreateamockupwithNOGROUPSinitandsaveitinanassetsfolder.Mockupswilldetectthis,andtreatTHEWHOLEMOCKUPasasymbol,namedafterthemockup’sfilename.
我们还有个小秘密还没有跟你分享。
记得这句话吗?
“在Mockups中,Symbol是简单命名转化为Symbol形态的Group,储存于项目assets文件夹的BMML文件中。
”
其实,这不是完全正确的。
这里还有一个方式可以在Mockups中创建Symbol:
创建一个没有Group的Mockup到assets文件夹。
Mockups把将整个Mockup作为一个Symbol,名称跟随Mockup的文件名称。
Withthisinmind,thefulldefinitionofsymbolsbecomesasfollows:
考虑到这点,完成Symbol定义如下:
SymbolsinMockupsareeithernamedgroupscontainedinsideBMMLfilesthataresavedinaproject’sassetfolder,orBMMLfileswithnogroupsinthem,savedinaproject’sassetfolder.
在Mockups中,Symbol是保存在项目assets文件夹下BMML文件中被名命名的Group,以及该文件夹中没有Group的BMML文件。
SharingSymbolsAcrossProjects跨项目分享Symbol
What?
You’restillreading?
Youjustcan’tgetenoughofSymbolscanyou?
;)
什么?
你还在看?
这些Symbol的信息对你来说还不够吗?
Allright,sinceyou’veaskedforit,we’llspillallthebeansforyou.Sofarwe’vebeentalkingabout“projectassetsfolders”,thedirectorycalled“assets”sittingnexttoyourBMMLfiles.
好吧,既然你找上门来,我们只好彻底坦白。
到现在我们已经多次谈及项目资源文件夹,这个名为“assets”的目录就在你BMML文件旁边。
That’sallniceandgood,butwhatifyouwanttoshareSymbolsacrossallofyourprojects?
这一切都很好,但是如果你想在所有项目中共享这些Symbol呢?
Tohelpuber-power-userslikeyourself,Mockupshasaconceptofan“accountassets”folder.BydefaultMockupslooksforitinyourDocumentsfolder,inadirectorycalled“BalsamiqMockups”,butyoucanspecifywhereMockupsshouldlookforitviatheconfigfile.
为了帮助你这样的超级用户,Mockups引入了账户文件资源夹的概念。
默认情况Mockups会寻找到你的“文档”文件夹,放置“BalsamiqMockups”文件夹,你也可以通过Config.file指定位置。
IfyouputimagesorBMMLfilesinafoldercalled“assets”insideofafoldercalled“BalsamiqMockups”insideofyourdocumentsfolder,thoseimagesandsymbolswillbeaccessiblefromanyofyourprojects,underthe“AccountAssets”folderinyourUILibrary,whichmagicallyshowsuponlyiftheaccountassetsfolderexistsandhassomethinginit.
如果放置图片或者BMML文件在你的文档\BalsamiqMockups\assets文件夹,这些图片和Symbol在任意项目都可用。
只要账户资源文件夹有适用的文件,在UILibrary的AccountAssts标签中都会魔法般的显示出来。
I’mwritingthissmallerbecauseit’ssoexcitingyoumightfaint:
considercreatingasharedAccountAssetsfolderinDropBox,andtelleveryoneonyourteamtopointtheirconfigfilestothatfolder.Letthatsinkinforaminute.Iknow,wow.WOW.
我现在用这么小的字写,因为接下来的非常令人激动,甚至会让你晕倒:
考虑在DropBox创建共享账户资源文件夹,然后告诉你团队的每一个人指向他们的配置文件到这个地址……稍等一下。
我知道,哇,哇哇~。
NextStepsandFeedback 下步计划和反馈
Atthemoment,SymbolsonlyworkinMockupsforDesktop,andyoucannotnestsymbolsinsideofothersymbols.Ifthosefeaturesareimportanttoyou,letusknow!
当前,Symbol仅仅能够在桌面版本的Mockups工作,并且支持Symbol嵌套其它Symbol。
如果这些特性对你来说非常重要,请让我们知道。
GotanyquestionsaboutSymbolsoranyfeedbackonthisdocument?
Postthemhere!
对Symbol或者这个文档有任何问题?
请发布在这里。
ken
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Balsamiq Mockups 自定义控件和页面模板 自定义 控件 页面 模板
![提示](https://static.bdocx.com/images/bang_tan.gif)