Huawei Web-Guidelines V4

תוצאות נפוצות

    תוצאות מוצעות

      הזן מונחי חיפוש נוספים

      Collaboration Principle

      This digital guideline document is for our colleagues at Huawei, partners, and agencies who help us build online experiences.


      Design
      Requirements:

      • Layouts file format: Sketch or Adobe XD;
      • Graphics file format: Adobe Photoshop;
      • Follow grid rules;
      • Screen resolutions:
        • Wide desktop (LG);
        • Tablet (MD) — optional;
        • Small Tablet (SM) — optional;
        • Smartphone (XS);
      • Image density:
        • Desktop: @1x and @2x;
        • Mobile: @2x or higher;
      • Apply styles described in this document and provided in the Sketch template below.

      Development
      Requirements:

      • Be based on Twitter Bootstrap v4.1:
        • Use package provided below, which contains:
          • Modified variables.scss file (according to Huawei brand style);
          • Global custom elements, such as font-size drow-down on mobile;
          • Custom styles of product-page components;
        • Apply Bootstrap html coding style;
        • Use default styles and variables;
        • Apply very unique names for your css styles and javascripts (in order to avoid any conflicts);
      • Provide files:
        • Plain html page file;
        • Compiled css file (don't include default Bootstrap files);
        • Compressed visual assets (according to rules in components section);
        • Custom javascript files — optional;
      • Follow components structure.

      Typography

      Generally, we use default letter space. Default line-height for titles is 1.2 of font-size, means if font-size is 40px, line height is 48px. Line-height for paragraphs of text is 1.5 of font-size, means if font-size 16px, line height is 24px.

      default Call to action Reversed color
      Specs Click me Specs Click me

      Fonts

      Country Font Example
      Latin
      Akkurat Light
      Akkurat Regular
      Akkurat Bold
      Huawei Blooming Flower
      Huawei Blooming Flower
      Huawei Blooming Flower
      China
      • Windows: Microsoft JhengHei, Microsoft YaHei
      • Mac/iOS: PingFang SC
      • Android: Source Han Sans SC
      Huawei盛开的花
      Huawei盛开的花
      Huawei盛开的花

      Text styles

      Purpose Example Desktop
      PX
      Mobile
      PX
      ID Remark Line height Font Weight
      titles
      Big Slogan Ae 80 48 .display-1 Only flagship product pages. 120% Bold
      Slogan Ae 64 40 .display-2 Only flagship product pages.
      Page Ae 48 32 .h1
      Section Ae 40 24 .h2
      Category Ae 32 20 .h3
      Paragraph Ae 24 20 .h4
      Smaller Paragraph Ae 20 16 .h5
      Caption Ae 14 .h6 letter-spacing: .125rem
      text-transform: uppercase
      text
      Big text Ae 24 16 .lead 150% Regular
      Text Ae 16
      Small text Ae 14 .small
      Legal text Ae 11 .tiny

      Buttons

      Small Default Large Disabled
      Height 32px 42px 54px Inherit
      Purchase button
      Primary action button
      Regular action button
      Primary action button
      on dark backgrounds
      Regular action button
      on dark backgrounds
      Transparent button
      adds space around regular link

      Special Conditions

      Long button Button with an icon

      Icons

      Huawei style primarily uses outline icon style. Line thickness should match text thickness and icon height. For perfect alignment with the text, icon box height should be equal to 1.5x of block font-size. Means, if font-size is 16px, icon box should be 24px.

      Small icon
      14px font-size
      21x21px icon box size
      Stroke width: 1px
      Sign-in Sign-up
      Regular icon
      16px font-size
      24x24px icon box size
      Stroke width: 1px
      Reload
      Cart
      Play
      User
      Search Share
      Large icon
      24px font-size
      36x36px icon box size
      Stroke width: 2px or 1.5px

      Reload

      On mobile icons inside "lead" text styles scales down to 24x24px
      Extra Large icon
      No text on the same line
      60x60px icon box size
      Stroke width: 2px

      Colors

      The web guidelines color palette is based on official Huawei brand identity guidelines. It comes with our primary red color, the 15% darker variations of it, and gray shades with a slight hint of red.

      Primary Logo, "buy now" buttons, contextual hyperlinks and other most important elements. #D20A2C
      100 #F5F3F3
      200 #EBE9E9
      300 #D6D4D4
      400 Muted text, “tiny” text style. #C2C0C0
      500 #A3A1A2
      600 Global navigation link color. #858383
      700 #5C5A5B
      800 #323232
      900 Regular text color, icons and buttons stroke color, content blocks. #1E1E1E
      Secondary 15% lighter brand color for dark backgrounds. #f53354

      Color Distribution

      Light Theme
      Dark Theme

      Generally, we use just a bit of red color, about 35% of high contrast to current color theme colors, 45% of low contrast colors (such as background for content blocks).

      Grid

      This is mainly for our fellow developers. If you use official Sketch template, you should have all grid settings already set up.

      Specifications Extra small
      <576px
      Small
      576px
      Medium
      774px
      Large
      1008px
      Extra Large
      >1680px
      Max container width None (auto) None (auto) 726px 978px 978px, 1920px
      Gutter width 30px (15px on each side of a column)

      Spaces

      You can contribute to making development time faster if you follow these space guideline. Which means, our front-end developers won’t have to write a special rule for each space every single time.

      # Example Size Dropdown on mobile
      Only for padding-top and
      padding-bottom values
      1
      10px
      2
      15px
      3
      20px 15px
      4
      30px 20px
      5
      40px 30px
      6
      60px 40px
      7
      80px 50px
      8
      120px 60px
      9
      200px 80px

      Images

      On a legacy display, one point is equal to one pixel. High-resolution screens have a higher pixel density. Because there are more pixels in the same amount of physical space, there are more pixels per point. As a result, high-resolution displays require images with more pixels.

      Pixel Density @1x @2x
      Resolution 40px x 40px 80px x 80px
      Physical Resolution 40 x 40
      density-independent pixels
      Format JPG PNG JPG PNG JPG + SVG Mask
      Display
      File-size 2 kb 4 kb 4 kb 12 kb 4 kb
      Not good on modern DHP screens. Good on none-transparent background. File size might be too big. Good.
      Image Requirements:
      • Exported in 2 pixel densities: @1x and @2x;
      • Provide an additional image for mobile displays if needed;
      • Well optimised for sharp and vivid display;
      • Efficiently compressed for fast loading and good page performance.

      As you see from above, PNG images don't perform very well for pixel graphics. A big and well-compressed PNG picture of a phone on a transparent background might exceed 3 Mb.

      Please consider exporting big images with transparent background as JPG with separate SVG or PNG mask.

      Thank you for learning.

      :