BBC栅格设计视觉规范.ppt

GELStyleguideVersion02|October2011GEL StyleguideBuilding a Global Experience Language for the BBCUX from typography to iconography.Our design pattern library will offer a comprehensive set of re-usable page components.We welcome feedback and suggestions.UX reflecting the present as it happens and adding relevant contextual links with the past.06 Distinctive We stand out by looking to tomorrow instead of simply referencing the design trends of today. We strike a balance between cookie-cutter design and beautiful anarchy.UX&D7GELStyleguideVersion02|October201101 Philosophy 10 Principles07 Joined-up All our services and platforms are one connected whole which deliver experiences sensitive to their context of use. We enable coherent journeys both within and outside familiar paths. We connect our audiences where there are shared interests and experiences.08 Local/Global We need to speak to everyone but we recognise the individual. Our message is scalable and localisable.09 Universal Our messages are clear and are communicated through simple, useful and intuitive interfaces. Our services are inherently open and accessible.10 Best Last but not least, we put quality first…UX&D8GELStyleguideVersion02|October201101 Philosophy Cultural MapGEL is the glue that ties all BBC services together. The BBC masterbrand will speak directly to the audience on the homepage. A rich brand experience will still be distinctly ‘BBC’ on Doctor Who.ProgrammesChannelsGenresSport, News, WeatherHomepage, Search, HelpUX&DSatellite brands9GELStyleguideVersion02|October201102 FoundationsUniversal Grid Columns Grid Variations The Baseline The Masthead Horizontal Navigation The Local Masthead Backgrounds The FooterUX&D10GELStyleguideVersion02|October201102 Foundations Universal GridYour starting point is a universal grid, divided into 61 x 16px vertical units. This has been created to align with existing EMP sizes, image ratios and advertising requirements.UX&D16px unit976px page width11GELStyleguideVersion02|October201102 Foundations ColumnsThe grid allows for a standard split across three columns with 16px gutters, creating a feature of the slightly wider column on the right that accommodates ‘fixed panel’ adverts.UX&D304px304px336px12GELStyleguideVersion02|October201102 Foundations Grid VariationsColumns can be further divided. The grid allows for a huge range of experimental layouts and templates.UX&D13GELStyleguideVersion02|October201102 Foundations The BaselineWe’re also employing an 8px baseline grid to help with vertical alignment of page components. Slavish adherence to the baseline isn’t necessary for all typography but it does help to create vertical rhythm on the page.8pxUX&D14GELStyleguideVersion02|October2011at the…News | TVHome iPlayer | the02 Foundations The MastheadThe global masthead includes the global navigation links with additional links in a ‘more’ dropdown panel. BBC iD is positioned to the right of the BBC blocks with the Search entry field at the extreme right.Note: The masthead is black at either 100%, 20% or 60% opacity. On rollover the masthead ‘lights up’ and background colour changes to white with dark grey text links.8px8px16px8px201px8px 42pxSign inNewsSportWeatheriPlayerTVRadioMoreSearch 8pxSigned in state42pxJohn SmithNewsSportWeatheriPlayerTVRadioMoreSearchSettingsSign outPushdown open42pxHollywhiteJohn Smith| Mobile NewsSport | WeatherSport | Weather | iPlayer | TVRadio | MoreSearch BBCMORE…CBBCCBeebiesComedyFoodHealthHistoryLearningMusicScienceNatureLocalTravel NewsFull A-ZUX&D15GELStyleguideVersion02|October201102 Foundations Horizontal NavigationWe are proposing up to two lines of horizontal navigation with tabs and a crumbtrail solution for deeper hierarchies. More details are available in the 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 provides the flexibility to accommodate various brand elements.UX&D17GELStyleguideVersion02|October201120px20px02 Foundations The Local MastheadThe local masthead will vary in height depending on the type of service. The minimum depth will be 64px for content heavy sites such as News.8pxSign inNewsSportWeatheriPlayerTVRadioMoreSearch64px16px16pxSECTION TITLE SUBTITLEPrimary Navigation 12pt | Primar。