***********************************
GoodNamesCommunicatethePurpose好的名字传达了目的。
Thebestnamesofferguidanceorinspirationforwheretouseaspecificpattern.It’seasytoremembertherecanbemanyminions(onapage)butonlyoneboss.Peopleenjoyusingthemandwedon’tneedtoenforceguidelinesbecausetheycomewiththename.Evenafewnameslikethiscanhelpmakeyourvocabularymorecompelling,andtheteamwillbemorelikelytouseitandcontributetoit.
最佳名称为在何处使用特定模块提供了指导或启发。很容易记住,(在一页上)可能有许多的小黄人,但只有一个老板。人们喜欢使用它们,我们不需要强制执行设计规范,因为它们的名称中就隐含了规范。即使是只有几个这样的名字也能让你的词汇量更有吸引力,团队也会更有乐意使用它并为之做出贡献。
Namesletusnotonlyidentifyanddistinguishbetweenpatterns,butalsodescribewhatthey’refor.Namingpatternsisespeciallyhardwhenwehaven’tfullyunderstoodtheirpurpose.Ifyoufindyourselfstrugglingtocomeupwithaname,chancesaresomethingisn’tquiteright.Maybeamodule’spurposeisunclear,oritoverlapswithanother’s;eitherway,it’saredflagyoushouldnotice.
名称使我们不仅可以识别和区分模式,而且还可以描述它们的用途。当我们还没有完全理解模式的作用时,起名字就成了特别困难的事情。如果你发现自己很难想出一个名字,那么很可能有些地方是不太对的。可能一个模块的用途不清楚,或者它与另一个模块重叠;无论哪一点,你都需要在此处标记警示自己。
OneofthemodulesinEurostar’snewinterfacewasintroducedspecificallytoimproveSEO.Duringapatternlibraryworkshop,theteamstruggledtocomeupwithanameforit:“It’sanSEOmodule!Itdoesn’thaveafunction.There’snomeaningtoitsexistence!”
欧洲之星新界面中有一个专门用于SEO优化的模块。在一个模式库研讨会上,团队很难给它起一个名字:“这是一个SEO模块!它没有作用。它的存在毫无意义!“。
AmoduleintroducedtotheEurostarinterfacespecificallytoimproveSEO.
欧洲之星界面中引入的专门用于SEO优化的模块,。
Thenametheygaveitintheendwas“leblurb.”Andthepurposeofleblurbwassomethingalongthelinesof:toprovidepotentiallyinterestinginformationwithapotentialforSEO.
最后他们给它起了个名字叫“leblurb”。而leblurb的目的大致是:为SEO提供潜在有趣的信息。
Approachingdifficultnamingdecisionswithhumorcanhelp.Andyetit’salmostneverdifficultfornoreason.Atsomepointwehavetoaskourselves:what’swronghereWhycan’twecomeupwithaname
幽默的名字有助于困难的命名决策达成一致。然而,这几乎是无理由的容易。总有一天,我们会问自己:这里出了什么问题?为什么我们不能想出一个名字呢?
NamingCollaboratively协同命名。
Wecanunderstandthepurposeofapatternbetterifthenamingprocessinourteamiscollaborative.Thatdoesn’tmeaninvolvingthewholecompany:itisnotaboutthenumberofpeople,butadiversityofperspectives.ToooftentheresponsibilityofnamingmodulesfallsondeveloperswhentheywriteCSS,butitcanbemadeeasier(andmorefun)ifthenamingprocessisbroadenedtoincludemorepeoplefromtheteam.
如果我们团队中的命名过程是协作的,那么我们可以更好地理解模式的目的。这并不意味着让整个公司都参与进来:这与员工数量无关,而是与不同的视角有关。当开发人员编写CSS时,命名模块的责任常常落在开发人员身上,但是如果更多来团队的人员参与命名过程中来的话,那么命名过程就会变得更容易(更有趣)。
Peoplefromdifferentdisciplineswilleachviewamoduleslightlydifferently.Someonefromacontentbackgroundmightseeitinagenericwaybecausethey’dneedittobeflexible.Developersmightseetechnicalspecifics,becausethey’reawareofhowthemoduleisbuilt—they’llknowthatsomethingisaradiobuttoneventhoughitmightnotlooklikearadiobutton.Designersanduserresearchersmightbemorefamiliarwiththeoriginalbehaviorapatternismeanttosupport.Involvingpeoplewithdifferentpointsofviewcanhelpmakeamoreinformedandobjectivedecisionaboutthepurposeofamodule.Andonceyouknowthepurpose,comingupwithanameiseasier.不同岗位的人对模块的看法会略有不同。内容运营人员可能会以一种通用的方式看待它,因为他们需要它具有灵活性。开发人员可能会看到技术细节,因为他们知道模块是如何构建的--他们会知道有些东西是单选按钮,即使它看起来不像单选按钮。设计人员和用户研究人员可能更熟悉模式要支持的原始行为。让持不同观点的人参与进来,有助于对模块的目的作出更加知情和客观的决定。一旦你知道了目的,想出一个名字就更容易了。
Collaborativenamingwillalsohelpteammemberswhodidnotdesignorbuildthepatternsunderstandtheiruse.Involvingthecontentteam,forexample,canhelpengagethemasparticipantsinthisprocess,ratherthansimplybeinghandedastackofboxestofillin.
协作命名还将帮助那些没有参与设计或构建模式的团队成员理解它们的用法。例如,让内容运营团队参与进来可以帮助他们作为参与者参与这个过程,让他们填写一堆文本框。
SetUpaDedicatedChannel设置专用频道。
Oneoftheeasiestwaystocollaborateonnamingistosetupadedicatedspaceonyourfavoriteeverydaycommunicationapp(likea“Designsystem”Slackchannel).Shareadesignmock-uporanexistingmodulewiththeteam,anddescribebrieflywhatit’sforandwhatdistinguishesit.Youmightsay:“Thistypicallyrepresentsadditionalorsupportinginformationportionedintosmallerchunks.”Itcanhelptosharethenamesyou’vecomeupwithsofar.
“Nuggetsofjoy”couldbeagreatnameforamodule,butwedecidedtosettleon“Brackets”inthiscase.
对于模块来说,“有趣的消息”可能是一个很好的名字,但是我们决定在这个例子中使用“支架”。
Afewpeoplewilljointhediscussion,askquestions,andsuggesttheirideas.Somesuggestionswon’tbequiteright,otherswillbehumorousorunexpected.That’sOK—thepointistogeneratediscussion.Talkingthroughdesigndecisionsandthepurposeofpatternshelpstostrengthenandevolvethesharedlanguage.6Ifyoucomeupwithagoodname,remembertogivepeoplekudosandcelebrateit.It’sthosemomentsthathelpunitetheteamandmakecollaborativenamingpartofyourculture.
一些人将参加讨论,提出问题,并提出他们的想法。有些建议不一定很正确,有些则是搞笑或意料之外的。没关系,关键是要引起讨论。讨论设计决策和模式的用途有助于加强和发展共同的语言6。如果你想出一个好的名字,记得给人们表扬和庆祝。这样的时刻有助于团队团结起来,使协作命名成为团队文化的一部分。
TestYourLanguagewithUsers
与用户一起体验设计语言。
Youmightwanttogoevenfurtherandinvolveyourusersinthelanguagedecisions.Trytestingmodulesonpapercards.Testingoncardsdiffersfromotheruserresearchtechniques,whichuselineartasksandscenariosforuserstoworkthrough.Here,participantscanpickupthecards,movethemaround,discussandscribbleonthem,activelybecomingpartofthedesignprocess.Thiscangiveyouachancetotestyourlanguagechoicesandmakesurethatthemodulesyou’vedefinedarealignedwithyourusers’potentialbehaviorsandmentalmodels.Onsomeoccasionsyoumightdiscoverthatyour“Prominenttabs”arecompletelyignored,orthatyour“Wizardcontrol”isinterpretedasasetofoptionaltabs.
您可能希望更进一步,让您的用户参与设计语言决策。尝试在纸卡上测试模块。对卡片的测试不同于其他用户研究技术,后者使用线性任务和场景供用户使用。在这里,参与者可以拿起卡片,四处移动,讨论和涂鸦,主动性成为了设计过程的一部分。这可以让您有机会测试您的语言决策,并确保您定义的模块与您的用户的潜在行为和心智模型相一致。在某些情况下,您可能会发现您的“突出选项卡”被完全忽略,或者您的“向导控件”被理解为一组选项卡。
Userresearchwithcut-outmodules.
用户研究拆分出来的模块。
Asusefulasitistoinvolveteammembersandusersinthenamingprocess,it’simportanttostayfocusedandnotgetstuckinaloopofendlessdiscussion.Sometimestoomuchinputcanleadtodilutedorconfusingnames.Toavoidthis,atFutureLearnwewouldtakeonboardthesuggestions,butalwaysleavethefinaldecisionuptothedesigner-developerpairwhoworkedonamodule.
尽管让团队成员和用户参与命名过程是很有用的,但保持专注并且不要陷入无休止的循环讨论也是非常重要的。有时融入过多的想法会导致名称变得笼统或令人搞不懂。为了避免这种情况,在Futurelearn,我们会接受这些建议,但最终是由模块的开发人员和设计人员决定。
ImmersingYourTeamInTheDesignLanguage让你的团队沉浸在设计语言中。
Namingthingstogether,however,isnotenoughtoestablishasharedlanguage.Theentireteamshouldbeimmersedinit.Makeitomnipresent.Ifyoucreatetherightconditions,evenpeoplewhoaren’tinitiallyinterestedwilllearnpassively,throughexposure.Herearesometipsforcreatingsuchconditions.
然而,一起给组件起名字并不足以建立一种共享语言。整个团队都应该全身心投入其中。让它无处不在。如果你创造了合适的条件,即使最初不感兴趣的人也会通过接触被动地学习。以下是一些创建此类条件的技巧。
MakeDesignPatternsVisible让设计模式看的见。
Setupadedicatedspaceonawalltorepresentyourdesignsystemvisually:apatternwall.在墙上建立一个专门的空间来直观地表现你的设计系统:模式墙。
ApatternwallintheFutureLearnoffice.FutureLearn办公室的模式墙。
Apatternwallgivesyouabird’s-eyeviewofyoursystem.Thismakesitagreatspacefornamingconversationstohappen,asyoucanrefertothingsrightthereinfrontofyou—noneedtosearchalloverthesiteorrememberwhattheylooklike.Havingadedicatedspacealsomakesyoursystemmoreopen:peoplefeelliketheyarewelcometojoinin,askquestionsandcontribute.模式墙可以让你对你的系统由全局的了解。同时也为模式命名的讨论创造了良好的环境,因为你讨论的食物就在你面前-不需要搜索整个网站或记住他们是什么样子的。有一个专用的空间也可以让你的系统更加开放:人们觉得他们是被欢迎加入,提出问题和作出贡献。
Youdon’tneedalotofspacetocreateapatternwall,andnotallthescreensofyourproducthavetobethere.Startwiththeonesthatarethemostcrucialorusedmostfrequently.PrintthemoutonA3sheets,putthemuponthewall,andlabelthemostprominentpatterns.Itcanbehelpfultopositiontheprintoutsintheorderthatfollowsyourmostcommonuserjourneys;forexample:discoveryscreens,sign-injourney,comparingproducts,makingapurchase.
Youcanbecreativewhenmakingyourdesignpatternsvisible.TheteamatMOO,adigitalprintanddesigncompany,printedsomeofthepagesfromtheirstyleguideontoMOOpostcardsashandysheetstheemployeescangrabforreference.
当您的设计模式看得见的时候,您可以发挥创造力。数字印刷和设计公司Moo的团队将他们的风格指南中的一些页面打印到Moo明信片上,作为方便员工方便拿取的卡片。
SomeofMOO’sstyleguidepostcards.
一些moo的风格指南明信片。
Automatedreminderscanalsobehelpful.ItonlytakesafewminutestosetupaSlackbotthatwilloccasionallyremindyourteamwhatdifferentelementsarecalled.7
ASlackbotremindingtheteamwhat“Signpost”lookslike.
slack机器人提醒团队“路标”是什么样子的。
RefertotheObjectsbyTheirNames
用对象的名称来指代对象。
Likewithanylanguage,youneedtouseittokeepitalive.Itneedstobepartofday-to-dayconversations.That’swhyit’simportanttomakeaconsciousefforttokeepreferringtothepatternsbythenamesyouagreedon—nomatterhowbizarrethismightsound.
就像任何语言一样,你需要通过使用用它来保持它的生命力。它需要成为日常对话的一部分。这就是为什么有意识地持续使用达成共识的名字来表述模式是很重要的--不管这听起来有多奇怪。
“Whisperbox”isapromotionalmoduleonFutureLearn.Asthenamesuggests,itismeanttobesubtleandnotdrawtoomuchattentiontoitself.
“轻语盒”是FutureLearn的一个推广模块。顾名思义,它本身是一个轻量级的,不会引起太多的注意。
“Whisperbox”:asubtlepromotionalmoduleonFutureLearn.“轻语盒”:FutureLearn的一个轻量级的宣传模块。
Untilwegaveitapropername,wekeptreferringtoitas“thatthingwiththelinesandaniconinthemiddle.”Itwaseasytocallitthat.Ittookmoreefforttostartcallingit“Whisperbox.”Butuntilyoustartcallingapatternbyitsactualname,itdoesn’texistinyoursystemasasolidactionableblocktoworkwith.Andeverytimeyoudousethename,youstrengthentheelementyoucallon,andevolveyourdesignlanguage.
我们一直称它为“中间有图标,左右两条细线的东西”,直到我们给它起了一个恰当的名字。这么称呼它很容易。花了更多的努力才开始称它为“轻语盒”。但是,在您开始按其实际名称称呼这个模式之前,它在您的系统中还不算是一个可靠的可操作组成部分来使用。每次使用这个名称时,都会增强调用的元素,推动了设计语言的演进。
Doingsorequiresacertainself-disciplineintheteam.Itcanbehard,especiallyifyou’renotusedtoit(imagineyoujoinedateamwhereeveryoneistalkingaboutminions,bossesandwhisperboxes!).Butverysoonthosenamesbecomepartofanormalconversationandpeoplegetusedtoit.Thegoalistogettothepointwhereeveryoneknowsexactlywhatyou’retalkingaboutjustbycallinganame.Everyoneknowsthepurposeofsequencenavigationandreferstoitas“Sequencenavigation,”andnot“Fancybubbles”or“Wizardcontrol.”Naturally,italsomeansthatnamesinthedesignfileandcodematch.
这样做需要在团队中有一定的自律。这可能很难,尤其是当你不习惯的时候(想象你加入了一个团队,每个人都在谈论小黄人、老板和轻语箱!)。但很快,这些名字就成为了正常对话的一部分,人们也习惯了。最终的目标是你只要叫个名字,其他人就知道你在说什么。每个人都知道序列导航的用途,并将其称为“序列导航”,而不是“幻想泡泡”或“向导控件”。当然,这也意味着设计文件和代码中的名称匹配。
MakeItPartoftheInductionProcess
让设计系统成为上岗介绍的一部分。
It’seasiertointroducenewemployeestoyourdesignsystemifit’spartofyourinductionprocess.NewteammembersatAtlassianaretakenthroughthestoryofhowtheguidelineswerecreatedsotheycanunderstandwhyandhowthedecisionshadbeenmade.AtFutureLearn,wecreatedaninternalinductiononlinecourse,whichincludesadedicatedchapteraboutthepatternlibrary,withquizzesandbite-sizelessons.
让设计系统的成为上岗介绍的一个环节讲有助于新员工更快的理解。亚特兰蒂斯的团队新成员通过了解创造设计规范背后的故事来了解一些决策的引起和决策的原因。在FutureLearn,我们创建了一个内部的在线介绍课程,其中包括一个关于模式库的章节,并附带了测验和简短的课程。
AchapteronthepatternlibraryintheFutureLearn’sonlineinductioncourse.
FutureLearn在线介绍课程中关于模式库的一章。
OrganizeRegularDesignSystemCatch-Ups定期组织设计系统的同步会。
Everyonehatesmeetings.Butdesignsystemcatch-upsareworthwhileifyouwanttokeepeveryoneonthesamepagewhenevolvingyoursystem.It’sthetimewhenalldesignersanddeveloperscanfullyfocusonthesystemtogether.
每个人都讨厌开会。但是,如果你想让每个人在迭代设计系统时保持一致,那么设计系统同步会必不可少的。现在,所有的设计师和开发人员都可以完全集中精力在系统上。
Thecatch-upscanworkwithagroupofaround16–20people,andforlargergroupspeoplecantaketurnstoattend.Theydon’thavetotakelong—halfanhourisusuallyenough,ifyouhaveawell-structuredagenda.Initially,youcanrunthemweekly,andthenfortnightlywhentheteamfindsitsrhythm.Teamscanusethistimetoagreeontheoverarchingpatterns,suchasiconsortypographyacrosstheproduct.Itisalsoagoodopportunitytosharenewmodulesanddiscusstheirpurpose,usage,andanyproblemsandquestionspeoplemighthave.
EncourageDiverseCollaboration鼓励多样化合作。
Trypairingondesigningandbuildingpatternsasmuchaspossible.Alltheexercisesdescribedintheprevioustwochapterscanhelpcollaborationandestablishsharedlanguagebetweendisciplines:尝试在设计和建立模式上尽可能的结合在一起。前两章中描述的所有练习方法都有助于学科间的协作和建立共享语言:
Creatingapatternmap·创建模式图。
Conductinganinterfaceinventoryfocusedonaspecificpattern·进行以特定模式为主题收集页面案例。
Drawingpatternstructure·绘制模式组织结构。
Agreeingonthepurposeofapatternandcomingupwithaname·就模式的用途达成一致,并起一个好名字。
Articulatingthepatternsthatmakeyourproductfeelacertainway·阐明让你的产品有某种感觉的模式。
Runningsmallscaleexperimentswithnewpatterns·将新模式进行小规模实验。
Inanyteamtherewillbepeoplewhoaremorefluentinyourpatternlanguageandmoreenthusiastictoworkonthesystem,andtheymightnaturallygravitatetowardsworkingwitheachother.Buttrytoencouragethemtoworkwitheveryone,sothattheyhaveanopportunitytosharetheirknowledgeandenthusiasmwithpeoplewhoarelessimmersedinthesystem.Byspreadingouttheknowledgeacrossanorganization,adesignsystembecomesmoreresilient.
KeepaGlossary维护术语表
Oneofthemosteffectivepracticesforsharingandevolvingadesignlanguageistokeepaglossaryofthetermsyouuse.Creatingandkeepingaglossaryallowsyoutobeconsciouslyawareofthewordsyouuse,asyouhavetoarticulatethingstowritethemdown.Forexample,atIntercom,acustomermessagingplatform,theteamkeepaglossaryoftermstomakesuretheyuse“thesamelanguagefromcodetocustomer.”
共享和发展设计语言的最有效实践之一是保存您使用的术语的术语表。创建和保存术语表可以让你有意识地意识到你所使用的词汇,因为你必须清楚地表达出要把它们写下来。例如,在客户消息传递平台Intercom上,团队保留了一个术语词汇表,以确保他们使用“从代码到客户的同一种语言”。
And,ofcourse,anup-to-date,easilyaccessiblepatternlibrarycanalsobeareliableglossaryofdesignpatternsandareferencepointfortheentireteam(aswellasbeingtheactualtoolkitofpatternsfordesigningandbuildinganinterface).9
当然,一个最新的、易于访问的模式库也可以是一个可靠的设计模式词汇表和整个团队的参照点(同时也是设计和构建界面的实际模式工具包)。
Thevalueofaglossaryisnotonlyinthetoolitprovides:itisalsointhelanguagepracticesitcultivates.Byestablishingandkeepingaglossary,yougetintoahabitofvetting,discussingandarticulatingyourlanguagedecisionsasateam—youacknowledgethatwordsmatter.
词汇表的价值不仅在于它提供的工具,还在于它培育的语言实践氛围。通过建立和维护词汇表,你养成了作为一个团队来审查、讨论和表达你的语言决定的习惯--你承认词汇很重要。
Notallteamsareequallycollaborativeandopentodiscussingdesignprinciplesandpatternseveryday.Establishingasharedlanguagerequiresacertainkindofteamculture.Butitcanalsoworktheotherwayaround—integratinglanguage-focusedprocessescanleadtobettercollaboration.ThreeyearsagoatFutureLearnwedidn’thaveaworkingshareddesignlanguageandwedidn’tcollaboratenearlyasmuchastoday.DesignersweredocumentingpatternsinaPDFbranddocumentanddevelopersbuilttheirfront-endstyleguide.Althoughbothdocumentswereusefulforeachofthedisciplines,theydidn’tprovideasharedlanguagefoundationtoworkwith.Butbyputtingpracticesandprocessesinplace,wegraduallytransformedhowwework.
并非所有的团队都是同样的协作并且每天都愿意讨论设计原则和模式。建立一种共享的语言需要一种特定的团队文化。但是,它也可以反过来工作--以设计语言为中心的过程可以促进更好的协作。三年前,在FutureLearn,我们没有一个工作用的共享设计语言,我们也没有像今天那样相互协作。设计师在一个PDF格式的品牌文档中记录设计模式,开发人员构建了他们的前端样式指南。虽然这两个文档对于彼此都是有用的,但它们没有提供一个可以使用的共享语言基础。但通过实施实践和小范围尝试,我们逐渐改变了我们的工作方式。
Establishingasharedlanguageisalwaysagradual,piecemealprocess.Sometimesitwillbemessyandslow,butifyoujustkeepgoing,you’llseeyourlanguageevolvingandstrengthening.Eventually,theeffectswillrippleoutwithinyourteam,withotherteams,andwithstakeholders,astheystarttounderstandwhatyou’retryingtoachieveandjoinyouinthisprocess.
5.IntheFutureLearninterfacetherearemorebuttonstyles,theexamplesshownherearesomeofthemosteffectiveones.5.在“FutureLearn”界面中有更多的按钮样式,这里给出的示例是一些最有效的按钮样式。
6.What’smore,whensharinganewdesign,someonemightspotthatasimilarmodulealreadyexistsandyoucanpreventaduplication.6.更重要的是,当共享一个新设计模式时,有人可能会发现类似的模块已经存在,您可以避免重复。
7.Sometools,suchasBrand.aiandFrontify,alsohaveintegrationswithSlacktopingchannelswhenapatternlibraryisupdated.Moreabouttoolsinchapter10.7.一些工具,如Brand.ai和Frontify,在更新模式库时也与Slacktoping通道进行了集成。有关工具的更多信息,请参阅第10章。
9.We’lldiscusspatternlibrariesindetailinchapter10.9.我们将在第10章中详细讨论模式库。