Սրբապատկերների և պիկտոգրամների համակարգը

1) Սրբապատկերների դերը սննդի մեջ

Իկոնիկները իմաստի և վիճակի կոմպակտ կրողն են։ Նրանք արագացնում են սկանավորումը, օգնում են խնայել տեղը և բարձրացնել պաթոգենների ճանաչելիությունը։ Սննդային ինտերֆեյսներում իկոնկան լրացնում է տեքստը և գույնը, ոչ թե փոխարինում է դրանք։

Սկզբունքները

1. Իմաստը> ոճն է, յուրաքանչյուր պատկերակ պետք է ունենա հստակ օգտագործման սցենար։

2. Կոնսիստենտություն 'մեկ ցանց, հարվածներ, անկյուններ, ռիթմ։

3. Հասանելիությունը 'իկոնիկան միակ ազդանշանը չէ։ միշտ կա ստորագրություն/tooltip/aria։

4. Արտադրողականությունը 'մեկ SVG-210 pline, սպրեյտներ և գույներ/չափսեր։

2) Ցանցը և հիմնական գծերը

Հիմնական արթբորդները ՝ 16-16, 20-20, 24-24 (հիմնական), 32-32։

Հիմնական գիծը (keyae) 'շրջանակը/քառակուսին, որը գրված է 1-2 px նահանջով օպտիկական հավասարակշռության համար։

Պիքսելի քայլը 'նկարում ենք ամբողջ կոորդինատներում։ stroke-ը հակիրճ 0։ 5 px (սովորաբար 1։ 5 px 24-24)։

Օպտիկական փոխհատուցումները

Altonali-ը ավելի բարակ տեսք ունի, ավելացրեք 0-ը։ 25 px դեպի stroke խնդրահարույց վայրերում։

Սուր անկյունների գագաթները մի փոքր կլանում ենք key.ru-ի ներսում 1 px-ով, որպեսզի չփորձեն։

Շրջանակներն ու կետերը հաճախ պահանջում են + 1 px տրամագծին հավասար տեսողական զանգվածի համար։

Կլիկի գոտիները ՝ ինտերակտիվ գոտի 2440 2440 px (mobile), 2432 2432 px (desktop); իկոնկան կենտրոնացված է։

3) Հավաքման ոճը

Գծային (entine) լռելյայն

stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).

linecap/linejoin: 'round' ընկերասիրության կամ «miter» տեխնիկական մոդուլի համար (ամրագրում ենք deline)։

Շառավղի անկյունները երկրաչափության մեջ ՝ 2-3 px (24-24)։

Ծոցը (www.led) - խիտ տարածքների և կարգավիճակի նշանների համար։

Երկու (duotone) - նախատեսված է նկարագրական դատարկ պայմանների համար, բայց ոչ քննադատական UI ազդանշանների համար։

Քաշի հիերարխիա

Engine-ը հիմնական վիճակն է։

Deled-ը 108/հատկացում է։

Two-tone-ը դեկորատիվ/վկայագրում է։

4) Գույնը և հակադրությունը (WCAG)

Հիմնական ռեժիմը մոնոխրոմն է «currentColor» -ի միջոցով, իկոնիկան ժառանգում է տեքստի/կոնտեքստի գույնը։

Քննադատական կարգավիճակները (սխալ/հաջողություն/նախազգուշացում) սեմանտիկ հոսանքներ են

`icon. error 'von no 3: 1, ստորագրության տեքստով (ոչ միայն գույնը)։

`icon. on-surface '07 ֆոն 3:1; փոքր չափերի համար համբուրվել 4-ում։ 5:1.

Գունավոր շերտերի վրա օգտագործեք «one 'գույնի» (գույնի համակարգի հակադրման ինքնաբուխ)։

5) Վիճակը և փոխազդեցությունը

Windows/Hover/Action/Windabled/Focus: տարբերությունը ոչ միայն գույնի մեջ է, փոխում ենք անթափանցելիությունը/ծոցը/հաստությունը, ավելացնում ենք focus ring։

Badges (հաշվիչներ) 'թիվ 4 թվերի հակադրություն։ 5: 1 դեպի բոց; թվերի չափը 10-11 px է։

Toggle Iconki (ընտրված, հավը), մենք փոխում ենք ծոցը և/կամ ներքին կետը, ոչ միայն գույնը։

6) Իկոնկա + տեքստը

Իկոնիկները չեն փոխարինում պիտակները հիմնական տարբերակներում։ Նվազագույն զույգը 'icon + կարճ տեքստը (կամ tooltip-aria-label ")։ Ցուցակներում և աղյուսակներում պատկերակը հավասարեցվում է տեքստի և գծերի գլխարկով։

7) Հասանելիություն (A11y)

Դեկորատիվ սրբապատկերների համար '"role =" img "aria-hidden =" me "կամ հեռացնել հասանելիության հոսքից։

Իմաստաբանական ՝ <

Իկոնկան չպետք է լինի կարգավիճակի միակ կրողը 'ավելացրեք տեքստ/հուշում/պատկերագրական պատկեր (ձև, հարվածներ)։

Տեքստի չափը և ստորագրության հակադրությունը համապատասխանում են WCAG-ին (սովորական թիվ 4։ 5:1).

8) SVG-interpline և արտադրողականությունը

Ինչու SVG: վեկտորային ճշգրտություն, CSS-ի միջոցով ստիլիզացիա, փոքր քաշը օպտիմիզացման հետ։

Առաջարկություններ

Պահպանեք վարպետության ֆայլերը Figma-ում, էքսպորտը SVG-ում 'առանց ավելացված «group» -ի, առանց «www.l-rule» լռելյայն, «Big» մոդուլով և առանց ֆիքսված «width/height» (CSS)։

Պրոգոնը SVGO-ի միջոցով (նախագծի պրոֆիլը) 'մետատվյալների հեռացումը, նվազեցումը, ուղիների միավորումը։

Պատկերային տառատեսակներից հրաժարվելը (icon fonts) - հասանելի և ռենդերի խնդիրներ։

Կառուցվածքի մեթոդներ

1. SVG սպրեյթ

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

էժանագին կրկնությունները, որոնք հնարավոր չէ հեշտությամբ փոխել «stroke-width» որոշ պարամետրերում։

2. Inline-SVG (React բաղադրիչ) 'շարժիչների և բացթողումների ճկունություն, tree-shaking։

3. External ' - միայն դեկորատիվ/նկարագրական համար։

CSS վերահսկողություն

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) API բաղադրիչ (օրինակ React)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

Վարքը

Լռելյայն 'size = «1em» «և» stroke = 1։ 5`.

Եթե "decorative" -ը ավելացնում ենք "aria-hidden =" dive "։