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

BBC栅格的设计视觉规范栅格的设计视觉规范16、自己选择的路、跪着也要把它走完。17、一般情况下)不想三年以后的事，只想现在的事。现在有成就，以后才能更辉煌。18、敢于向黑暗宣战的人，心里必须充满光明。19、学习的关键-重复。20、懦弱的人只会裹足不前，莽撞的人只能引为烧身，只有真正勇敢的人才能所向披靡。GELStyleguideVersion02|October2011GEL StyleguideBuilding aGlobal Experience Languagefor the BBCUX&DGELStyleguideVersion02|October201100 Introduction01 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 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 vertical 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 pagecomponents.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 design 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 AuthenticWe 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 unexpected 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 between 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 paths.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 services 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 will still be distinctlyBBC on Doctor Who.ProgrammesChannelsGenresSport,News,WeatherHomepage,Search,HelpUX&DSatellite brands9GELStyleguideVersion02|October201102 FoundationsUniversal GridColumnsGrid VariationsThe BaselineThe MastheadHorizontal NavigationThe Local MastheadBackgroundsThe FooterUX&D10GELStyleguideVersion02|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 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 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 typography 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 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 state42pxJohn SmithNewsSportWeatheriPlayerTVRadioMoreSearchSettingsSign outPushdown open42pxHollywhiteJohn Smith|Mobile NewsSport|WeatherSport|Weather|iPlayer|TVRadio|MoreSearch BBCMORECBBCCBeebiesComedyFoodHealthHistoryLearningMusicScienceNatureLocalTravel NewsFull A-ZUX&D15GELStyleguideVersion02|October201102 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 faucibusEnim 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 hierachiesLorem 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 MastheadThe 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 such 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 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 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 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 Regular392pxPrimary 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,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 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,left 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 navigation 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 HelpAbout 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&D24GELStyleguideVersion02|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!$%&*()_+Arial BoldABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%&*()_+Gill Sans RegularABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!$%&*()_+UX&D25GELStyleguideVersion02|October201148px Leading/-40 Tracking Dev Pixel Spec:-2px Letter36px Leading -30 Tracking Dev Pixel 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 Leading/-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/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 32pxSubheader 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 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.Aenean 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 elit 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,tellus.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 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 amet 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|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 libero 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 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.shtmlPreviousUnlockVocab On/OffGrid ViewNextSearchRefreshList View(text)UpClose/Remove/No/DeleteAlarm/ReminderList View(text and thumb)DownEmbedDurationHomeTo TopYesCountdownNew/New itemsTo BottomPrintExpiresQuoteLink to ThisEmailSettingsChaptersDownloadHelpDegradedContentLoadingUploadInfo/CaptionZoom 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 Lorem 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 sollicitudin 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 andguidelines.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 leading 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.Aliquam 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 thataligns 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 with 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/gelCarouselEMPAutosuggestImage galleryTooltipsLocal navigationContextual navigationLocalisationPaginationOverlay panelsIdentityInfographicsUX&DLocal searchAccordionsForm elementsDrag and dropEditorSliderSortableTimelineMappingLegacy contentVote36GELStyleguideVersion02|October201105 ThanksUX&D37GELStyleguideVersion02|October201105 ThanksBBCResearch StudiosMarcelo MarerBronwyn van der MerweLiz CitronJason FieldsAdam PowersDuncan SwainChris SizemoreBen GammonSteve GibbonsMichael TiffanyPaul SissonsYuri KangMike AlbersJo PattersonChris HankinsFrances McNamaraYasser RashidAndy BraxtonSean McVeighLyra Xharra-LoxhaDan ShallcrossAdam HutchinsonAnnoushka FerrariSarah ChallisOlivia RofailMike AthertonAudrey RapierLynsey SmythSylwia FrankowskaNourdine ArsalanePatrick WalshToby MildonIsabel NunesMat HampsonTom CartwrightRichard HodgsonAndrew GreenhamRowun GilesNeville BrodyNick HardJames NelsonJames Le BeauMorleyJeff 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巴顿