BBC栅格的设计视觉规范课件

《BBC栅格的设计视觉规范课件》由会员分享，可在线阅读，更多相关《BBC栅格的设计视觉规范课件（42页珍藏版）》请在装配图网上搜索。

1、BBC栅格的设计视觉规范栅格的设计视觉规范16、自己选择的路、跪着也要把它走完。17、一般情况下)不想三年以后的事，只想现在的事。现在有成就，以后才能更辉煌。18、敢于向黑暗宣战的人，心里必须充满光明。19、学习的关键-重复。20、懦弱的人只会裹足不前，莽撞的人只能引为烧身，只有真正勇敢的人才能所向披靡。GELStyleguideVersion02|October2011GEL StyleguideBuilding aGlobal Experience Languagefor the BBCUX&DGELStyleguideVersion02|October201100 Introductio

2、n01 Philosophy02 Foundations03 Building Blocks04 Patterns05 ThanksUX&D2GELStyleguideVersion02|October201100 IntroductionWe are evolving a global experience languagefor the BBCs digital services.The GEL guidelines are a reference point for alldesigners creating BBC websites.For furtherinformation on

3、applying GEL across Mobile,IPTVand Tablet devices go to bbc.co.uk/GELThe design philosophy underpins everythingwe do as a user experience and design team.It informs the way our services look,the waythey behave and the way we operate as a team.The foundations should be used by all.Theyinclude a verti

4、cal grid,baseline grid andrecommended templates.UX&D3GELStyleguideVersion02|October201100 IntroductionThe building blocks help create consistentinteraction and visual design across the site;from typography to iconography.Our design pattern library will offer acomprehensive set of re-usable pagecompo

5、nents.We welcome feedback and suggestions.UX&D4GELStyleguideVersion02|October201101 Philosophy10 PrinciplesCultural MapUX&D5GELStyleguideVersion02|October201101 Philosophy 10 Principles01 Modern BritishOur services are woven into the fabric ofeveryday life in the UK.They embrace a modernBritish desi

6、gn aesthetic that extends outsidenational boundaries.Our character is vibrant andsometimes quirky.02 CompellingOur voice ranges from serious and authoritativethrough to witty and entertaining.We soundauthentic and relevant,warm and human.We engage our audiences with compellingstorytelling.03 Authent

7、icWe value the familiarity and trust placed in us.We acknowledge the BBCs heritage of iconicdesign and broadcasting history with subtlereferences.UX&D6GELStyleguideVersion02|October201101 Philosophy 10 Principles04 PioneeringWe pioneer design innovations that surprise anddelight.We introduce the une

8、xpected but alwaystake our audiences with us.05 CurrentWe curate a timeline of Britain;reflecting thepresent as it happens and adding relevantcontextual links with the past.06 DistinctiveWe stand out by looking to tomorrow instead ofsimply referencing the design trends of today.Westrike a balance be

9、tween cookie-cutter designand beautiful anarchy.UX&D7GELStyleguideVersion02|October201101 Philosophy 10 Principles07 Joined-upAll our services and platforms are one connectedwhole which deliver experiences sensitiveto their context of use.We enable coherentjourneys both within and outside familiar p

10、aths.We connect our audiences where there areshared interests and experiences.08 Local/GlobalWe need to speak to everyone but we recognisethe individual.Our message is scalable andlocalisable.09 UniversalOur messages are clear and are communicatedthrough simple,useful and intuitive interfaces.Our se

11、rvices are inherently open and accessible.10 BestLast but not least,we put quality firstUX&D8GELStyleguideVersion02|October201101 Philosophy Cultural MapGEL is the glue that ties all BBC servicestogether.The BBC masterbrand will speakdirectly to the audience on the homepage.A rich brand experience w

12、ill still be distinctlyBBC on Doctor Who.ProgrammesChannelsGenresSport,News,WeatherHomepage,Search,HelpUX&DSatellite brands9GELStyleguideVersion02|October201102 FoundationsUniversal GridColumnsGrid VariationsThe BaselineThe MastheadHorizontal NavigationThe Local MastheadBackgroundsThe FooterUX&D10GE

13、LStyleguideVersion02|October201102 Foundations Universal GridYour starting point is a universal grid,dividedinto 61 x 16px vertical units.This has beencreated to align with existing EMP sizes,imageratios and advertising requirements.UX&D16px unit976px page width11GELStyleguideVersion02|October201102

14、 Foundations ColumnsThe grid allows for a standard split acrossthree columns with 16px gutters,creating afeature of the slightly wider column on the rightthat accommodates fixed panel adverts.UX&D304px304px336px12GELStyleguideVersion02|October201102 Foundations Grid VariationsColumns can be further

15、divided.The grid allowsfor a huge range of experimental layouts andtemplates.UX&D13GELStyleguideVersion02|October201102 Foundations The BaselineWere also employing an 8px baseline grid tohelp with vertical alignment of page components.Slavish adherence to the baseline isnt necessaryfor all typograph

16、y but it does help to createvertical rhythm on the page.8pxUX&D14GELStyleguideVersion02|October2011at theNews|TVHome iPlayer|the02 Foundations The MastheadThe global masthead includes the globalnavigation links with additional links in a moredropdown panel.BBC iD is positioned to the rightof the BBC

17、 blocks with the Search entry field atthe extreme right.Note:The masthead is black at either 100%,20%or60%opacity.On rollover the masthead lights up andbackground colour changes to white with dark greytext links.8px8px16px8px201px8px42pxSign inNewsSportWeatheriPlayerTVRadioMoreSearch8pxSigned in sta

18、te42pxJohn SmithNewsSportWeatheriPlayerTVRadioMoreSearchSettingsSign outPushdown open42pxHollywhiteJohn Smith|Mobile NewsSport|WeatherSport|Weather|iPlayer|TVRadio|MoreSearch BBCMORECBBCCBeebiesComedyFoodHealthHistoryLearningMusicScienceNatureLocalTravel NewsFull A-ZUX&D15GELStyleguideVersion02|Octo

19、ber201102 Foundations Horizontal NavigationWe are proposing up to two lines of horizontalnavigation with tabs and a crumbtrail solution fordeeper hierarchies.More details are available inthe design patterns library.Single tier menuLorem ipsum|Dolor sit amet|Consectetur adipiscingVestibulum faucibusE

20、nim at odio|Fusce fermentum|Neque sed gravidaDouble tier menuLorem ipsum|Dolor sit amet|Consectetur adipiscingVestibulum faucibusEnim at odio|Fusce fermentum|Neque sed gravidaProin euismod|Condimentum tellus|Vulputate quam|Bibendum|Nullam auctorEuismod lobortisDuis auctor|Neque malesuadaDeep hierach

21、iesLorem ipsum|Dolor sit amet|Consectetur adipiscingVestibulum faucibusEnim at odio|Fusce fermentum|Neque sed gravidaUX&DEuismod lobortisProin euismod|Condimentum tellus|Vulputate quam|Bibendum|Nullam auctor|Duis auctor|Neque malesuada16GELStyleguideVersion02|October201102 Foundations The Local Mast

22、headThe new masthead approach providesthe flexibility to accommodate variousbrand elements.UX&D17GELStyleguideVersion02|October201120px20px02 Foundations The Local MastheadThe local masthead will vary in height dependingon the type of service.The minimum depth willbe 64px for content heavy sites suc

23、h as News.8pxSign inNewsSportWeatheriPlayerTVRadioMoreSearch64px16px16pxSECTION TITLE SUBTITLEPrimary Navigation 12pt|Primary navigation link 01|Primary navigation link 02|Primary navigation link 03|Primary navigation link 04Secondary Navigation 12pt|Secondary navigation link 01|Secondary navigation

24、 link 02|Secondary navigation link 03|Secondary navigation link 04UX&D48px Gill Sans Regular34px Gill Sans Regular18GELStyleguideVersion02|October201116px32px02 Foundations The Local MastheadOther brands such as Radio 1 or BBC One maybe deeper.8pxSign inNewsSportWeatheriPlayerTVRadioMoreSearchMAJOR

25、BRAND SUBTITLEVariable height48px Gill Sans Regular34px Gill Sans RegularPrimary Navigation 13pt|Primary navigation link 01|Primary navigation link 02|Primary navigation link 03|Primary navigation link 04UX&D19GELStyleguideVersion02|October201116px40px02 Foundations The Local MastheadRich programme

26、experiences such as Doctor Whocould be deeper still up to 392px.The default fontfor the local masthead is Gill Sans regular(48px).Local branding should be left-aligned.8pxSign inNewsSportWeatheriPlayerTVRadioMoreSearchMAJOR BRAND HOMEPAGE SUBTITLE48px Gill Sans Regular34px Gill Sans Regular392pxPrim

27、ary Navigation 16pt|Primary navigation link 01|Primary navigation link 02|Primary navigation link 03UX&D20GELStyleguideVersion02|October201102 Foundations BackgroundsThere is no longer a requirement for consistentplacement of page backgrounds or pageshoulders across the site.Backgrounds can bewhite,

28、full colour,gradient or image backgroundsand may feature within the content area,withinindividual panels or as free-floating elements.UX&DCONTAINED BANNERPrimary Navigation 13pt|Primary navigation link 01|Primary navigation link 02|Primary navigation link 03|Primary navigation link 04FULL BACKGROUND

29、 IMAGEPrimary Navigation 13pt|Primary navigation link 01|Primary navigation link 02|Primary navigation link 03|Primary navigation link 0421GELStyleguideVersion02|October201102 Foundations BackgroundsAs well as the default full screen or repeatedbackground image,images can be fixed to thetop,bottom,l

30、eft and/or right of the page contentor browser viewport.UX&DBACKGROUND TOP&BOTTOMPrimary Navigation 13pt|Primary navigation link 01|Primary navigation link 02|Primary navigation link 03|Primary navigation link 04BACKGROUND LEFT&RIGHTPrimary Navigation 13pt|Primary navigation link 01|Primary navigati

31、on link 02|Primary navigation link 03|Primary navigation link 0422GELStyleguideVersion02|October201102 Foundations The FooterThe GEL footer is a variant of the existingGVL 2.0 footer.Colour options are white,grey,black and semi-transparent over an image.336px16px176px16pxBBC HelpAccessibility HelpAb

32、out the BBCContact Us104pxBBC MMX The BBC is not responsible for the contentParental GuidanceJobsTerms of UsePrivacy&Cookieson external internet sites.Read more.16pxUX&D23GELStyleguideVersion02|October201103 Building BlocksTypographyIconographyLinking ConventionsImage Size RatiosUX&D24GELStyleguideV

33、ersion02|October201103 Building Blocks TypographyGEL uses bold typography to create strongerhierarchies and drama across the site.Were movingfrom Verdana to Arial as the BBCs default web font forboth headers and body copy.Arial RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%

34、&*()_+Arial BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%&*()_+Gill Sans RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%&*()_+UX&D25GELStyleguideVersion02|October201148px Leading/-40 Tracking Dev Pixel Spec:-2px Letter36px Leading -30 Tracking Dev Pix

35、el Spec:32px Leading/-30 Tracking Dev Pixel03 Building Blocks TypographyLarge bold type should be used to establisha clear information hierarchy.These are therecommended type sizes.Arial Bold 48pxspacingArial/Bold 36px-1px Letter spacingArial Bold 32pxSpec:-1px Letter spacingArial Bold 28px28px Lead

36、ing/-36 Tracking Dev Pixel Spec:-1px Letter spacingArial Bold 24px24px Leading/-43 Tracking Dev Pixel Spec:-1px Letter spacingArial Bold 20px20px Leading/-47 Tracking Dev Pixel Spec:-1px Letter spacingArial Bold 16px18px Leading/0 Tracking Dev Pixel Spec:0px Letter spacingArial Bold 14px18px Leading

37、/0 Tracking Dev Pixel Spec:0px Letter spacingArial Bold 13px16px Leading/0 Tracking Dev Pixel Spec:0px Letter spacingArial Bold 12pxARIAL BOLD CAPITALISED 11pxUX&D26GELStyleguideVersion02|October20118px03 Building Blocks TypographyPutting it together with body copySuper Header 36pxHeader 32pxSubhead

38、er 20pxTIME STAMPS 11PT CAPITALSCopy 13px Arial Regular on 16px leading Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce sed leo.Maecenas ultrices lorem sit ametdiam.Aliquam sollicitudin tristique nulla.Duis libero diam,condimentum et,condimentum in,congue eu,tellus.Phasellus eu elit at

39、nisi ultricies lobortis.Suspendisse porta commodo leo.Sed tincidunt tincidunt massa.Crasscelerisque diam non arcu.Donec egestas.Integer a mi.Aenean tempus,mieu luctus imperdiet,erat ligula semper turpis,consectetur faucibus libero antenon sem.Aliquam quis diam.Pellentesque mollis nisi eget purus.Aen

40、ean iaculismetus vel sem.Integer at erat.Copy 13px Arial Bold on 16px leading Lorem ipsum dolor sit amet,con-sectetur adipiscing elit.Fusce sed leo.Maecenas ultrices lorem sit ametdiam.Aliquam sollicitudin tristique nulla.Duis libero diam,condimentum et,condimentum in,congue eu,tellus.Phasellus eu e

41、lit at nisi ultricies lobortis.Suspendisse porta commodo leo.Copy 13px Arial Roman on 16px leading Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce sed leo.Maecenas ultrices lorem sit ametdiam.Aliquam sollicitudin tristique nulla.Duis libero diam,condimentum et,condimentum in,congue eu,t

42、ellus.Phasellus eu elit at nisi ultricies lobortis.Suspendisse porta commodo leo.Sed tincidunt tincidunt massa.UX&DLink Nam dictum nibh eu arcuLink Donec egestas integer a mi27GELStyleguideVersion02|October20118px16px16px16px16px16px03 Building Blocks TypographyOur typographic style relies on tight

43、tracking,tight leading and large headers.There shouldbe consistent spacing around headers and bodycopy.Either 8px or 16px above and to the leftwhen content is containedUX&D8pxTitle header 32pxCopy 13px Lorem ipsum dolor sit amet,consec-tetur adipiscing elit.Fusce sed leo.Maecenasultrices lorem sit a

44、met diam.Aliquam sollicitudintristique nulla.Duis libero diam,condimentum16pxTitle header 32pxCopy 13px Lorem ipsum dolor sit amet,consec-tetur adipiscing elit.Fusce sed leo.Maecenasultrices lorem sit amet diam.Aliquam sollicitudintristique nulla.Duis libero diam,condimentum28GELStyleguideVersion02|

45、October20118px16px16px16px16px16px03 Building Blocks Typographyor aligned to the grid when thereis no container.UX&DTitle header 32pxBody copy 13px Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce sed leo.Mae-cenas ultrices lorem sit amet diam.Aliquamsollicitudin tristique nulla.Duis lib

46、ero diam,con-dimentumTitle header 32pxBody copy 13px Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce sed leo.Mae-cenas ultrices lorem sit amet diam.Aliquamsollicitudin tristique nulla.Duis libero diam,con-dimentum29GELStyleguideVersion02|October201103 Building Blocks IconographyWe have

47、designed a new set of icons to work inharmony with the new visual language.The defaultsize is 13px and icons can be used with or withouta flat button container.These can be used in anycolour unless otherwise specified.For more information or for the full set of icons,visit bbc.co.uk/gel/iconography.

48、shtmlPreviousUnlockVocab On/OffGrid ViewNextSearchRefreshList View(text)UpClose/Remove/No/DeleteAlarm/ReminderList View(text and thumb)DownEmbedDurationHomeTo TopYesCountdownNew/New itemsTo BottomPrintExpiresQuoteLink to ThisEmailSettingsChaptersDownloadHelpDegradedContentLoadingUploadInfo/CaptionZo

49、om InExternal LinkLock/SecurityAlert/WarningZoom OutTrafficUX&D30GELStyleguideVersion02|October20118px03 Building Blocks IconographyIcons should appear to the left of text orin the top left corner of thumbnails.Header 36pxSubheader 20pxTIME STAMPS 11Px CAPITALSCopy 13px Arial Bold on 16px leading Lo

50、rem ipsum dolor sit amet,con-sectetur adipiscing elit.Fusce sed leo.Maecenas ultrices lorem sit ametdiam.Aliquam sollicitudin tristique nulla.Copy 13px Arial Regular on 16px leading Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce sed leo.Maecenas ultrices lorem sit ametdiam.Aliquam soll

51、icitudin tristique nulla.Link Suspendisse porta commodo leo.13pxLink Pellentesque mollis nisi eget purus 13pxCOMMENTS 11PX CAPITALEMAIL 11PX CAPITALPRINT 11PX CAPITALUX&D31GELStyleguideVersion02|October20118px03 Building Blocks Linking ConventionsLinks should comply with existing standards andguidel

52、ines.They should be easily distinguishablefrom body copy using a combination of bold typeand colour,along with underline or underline onhover.On rollover links should change colour(and underline if under 24px).Header 36pxSubheader 20pxTIME STAMPS 11Px CAPITALSBody Copy 13px Arial Bold on 16px leadin

53、g Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce sed leo.Maecenas ultrices lorem sit ametdiam.Aliquam sollicitudin tristique nulla.Body Copy 13px Arial Regular on 16px leading Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce sed leo.Maecenas ultrices lorem sit ametdiam.Aliq

54、uam sollicitudin tristique nulla.Link Suspendisse porta commodo leo.13pxLink Pellentesque mollis nisi eget purus 13pxCOMMENTS 11PX CAPITALEMAIL 11PX CAPITALPRINT 11PX CAPITALUX&D32GELStyleguideVersion02|October201103 Building Blocks Image Size RatiosWe recommend using 16:9 images at any size thatali

55、gns with the grid.This is particularly importantwhere there is likely to be significant re-use acrossBBC Online.16:9UX&D33GELStyleguideVersion02|October201103 Building Blocks Image Size RatiosBackgrounds,banners,promos and cut-outs couldbe a variety of shapes and sizes as long as there isalignment w

56、ith the universal grid.UX&D34GELStyleguideVersion02|October201104 PatternsUX&D35GELStyleguideVersion02|October201104 Patterns Design SpecificationThe design patterns library will be a livingrepository for simple,re-skinnable pagecomponents.Several of these patternsare available at bbc.co.uk/gelCarou

57、selEMPAutosuggestImage galleryTooltipsLocal navigationContextual navigationLocalisationPaginationOverlay panelsIdentityInfographicsUX&DLocal searchAccordionsForm elementsDrag and dropEditorSliderSortableTimelineMappingLegacy contentVote36GELStyleguideVersion02|October201105 ThanksUX&D37GELStyleguide

58、Version02|October201105 ThanksBBCResearch StudiosMarcelo MarerBronwyn van der MerweLiz CitronJason FieldsAdam PowersDuncan SwainChris SizemoreBen GammonSteve GibbonsMichael TiffanyPaul SissonsYuri KangMike AlbersJo PattersonChris HankinsFrances McNamaraYasser RashidAndy BraxtonSean McVeighLyra Xharr

59、a-LoxhaDan ShallcrossAdam HutchinsonAnnoushka FerrariSarah ChallisOlivia RofailMike AthertonAudrey RapierLynsey SmythSylwia FrankowskaNourdine ArsalanePatrick WalshToby MildonIsabel NunesMat HampsonTom CartwrightRichard HodgsonAndrew GreenhamRowun GilesNeville BrodyNick HardJames NelsonJames Le Beau

60、MorleyJeff KnowlesGeorge SheldrakePhil RodgersFitzroy&FinnPaul FinnDan OgunkoyaThe GEL Steering Group,the Global Design Working Groupand all contributing designersUX&D38GELStyleguideVersion02|October2011For more information visit bbc.co.uk/gel谢谢你的阅读v知识就是财富v丰富你的人生谢谢！61、奢侈是舒适的，否则就不是奢侈。CocoChanel62、少而好学，如日出之阳；壮而好学，如日中之光；志而好学，如炳烛之光。刘向63、三军可夺帅也，匹夫不可夺志也。孔丘64、人生就是学校。在那里，与其说好的教师是幸福，不如说好的教师是不幸。海贝尔65、接受挑战，就可以享受胜利的喜悦。杰纳勒尔乔治S巴顿