To keep the interface style of the company’s software products uniform and consistent, clarify the principles and methods UI designers must follow, and specify the specifications of each interface element, these UI design guidelines are drawn up to ensure basic uniformity of web pages in style, structure and function, improve efficiency and support team development. The guidelines are not exclusive or final; some rules may be adjusted to actual project conditions.
1. Colour
Application principle: no more than three colours overall, following the contrast principle to highlight visual hierarchy. Except in special cases, avoid clashing colours that create extreme discomfort, and use as few different colour categories as possible across the interface.
Colour code standard: in CSS all colours are written as hexadecimal values, such as #a0a0a0.
2. Typography
Font choice and size: no more than two fonts except in special cases. Use standard fonts: SimSun or Microsoft YaHei for Chinese, Arial or Verdana for English; avoid exotic fonts (calligraphy styles and the like; in special cases or ad graphics, images may substitute). Headings mainly use Microsoft YaHei with SimSun as backup, differentiating through font weight.
Font sizes come in even values: 12px, 14px, 16px and so on. Controls should use uniform font sizes except for special prompts and emphasis. Menu title font size: minimum 14px, maximum 16px. Body heading font size: minimum 24px, maximum 32px.
Line spacing: headings use default line spacing; body text uses double spacing, for example font-size 12 with line-height 24px.
Spacing: use default letter spacing except in special cases.
Margins between text and tables or borders: when text aligns left or right on the page, keep a distance of at least 10px and no more than 20px from borders or tables; adjust as needed in special layouts. When aligning top and bottom, keep the top margin at least 0.5 times the text height, or centre the text vertically.
3. Graphics and icons
Graphics and icons include pictures, buttons and icons; follow common standards and avoid incomprehensible novelty graphics.
System prompts are displayed to users by category, with icons used by type: warnings, prohibitions, operation success, operation failure and errors.
Icon sizes are mainly even numbers, such as 16px, 32px. For display quality, the minimum icon size is 14px and the maximum 48px.
Image formats: in principle use png, jpg or gif; scrolling carousels use png or jpg. Name image files uniformly, for example banner_001.png or banner_001.jpg, where 001 is the sequence number; for the same image at different sizes, distinguish by suffix: banner_001_01.png, banner_001_02.png and so on.
File size: images should be as small as possible while keeping quality. The size cap is 100KB; for larger images consider splitting them across several pictures.
Image dimensions: do not exceed the largest target display. If a web page is designed for a maximum of 1920 by 1080, image width should not exceed 1920px. Use pixels uniformly as the unit.
Image resolution: uniformly 72 pixels per inch.
4. Layout
Current monitor resolutions are mainly 16:9 (1920×1080, 1600×900, 1366×768), 16:10 (1920×1200, 1680×1050, 1440×900) and 4:3 (1024×768). To adapt to different widths, layouts should mainly use adaptive width, with a unified minimum display width of 980px.
A complete web page consists of three parts: header, main and footer; for layout needs, a navigation menu is often added below the header. Without a menu, the header height is generally 40 to 60px; with a menu, 50 to 80px, adjustable in special cases.
Menu layout: the number of top-level menus should not be too large, arranged in a single row. Menu structures are mainly single-row, dropdown or tree style, with icons based on 24px and adjustable. Top-level menus should be roughly equal in width, ideally 2 to 4 characters. Menu depth should be kept within three levels. Dropdown items should be grouped by meaning and arranged by consistent rules.
Margins: to keep elements from hugging the edges, set margins for the web page and its tables, minimum 10px.
Alignment: table text and data are left-aligned by default, keeping at least 10px from the left table margin. Cell widths use percentages except in special fixed cases. Images are centred or left-aligned; within one content area, images should be uniform in size and alignment.
5. Other notes
Name everything in lowercase joined by underscores; prefer English; if pinyin is needed, write it in full; do not abbreviate except for obvious words. Use common English expressions such as message, popover, radiobox, checkbox and upload.
Want to talk through what you just read?
We work end to end, from product design to launch. Tell us about your scenario and we can start there.
Shenzhen XZS Technology Co., Ltd. · Tel 0755-82494862 · 13760424861