design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
This commit is contained in:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Apple HIG Design Principles
|
||||
created: 2026-06-02
|
||||
updated: 2026-06-02
|
||||
type: concept
|
||||
tags: [web-design, ux]
|
||||
sources:
|
||||
- https://developer.apple.com/design/human-interface-guidelines/
|
||||
- https://applemagazine.com/apple-human-interface-blueprint/
|
||||
confidence: high
|
||||
---
|
||||
|
||||
# Apple Human Interface Guidelines — Ключевые принципы
|
||||
|
||||
## 3 столпа философии дизайна Apple
|
||||
|
||||
### Clarity (Ясность)
|
||||
Контент — король. UI-элементы не должны конкурировать с контентом.
|
||||
- Чистая типографика, достаточный размер шрифта
|
||||
- Минимум декоративных элементов
|
||||
- Иконки должны быть простыми и узнаваемыми
|
||||
- Цвет используется осмысленно — для акцентов, а не украшения
|
||||
|
||||
### Deference (Уважение)
|
||||
Интерфейс служит контенту, а не наоборот.
|
||||
- Прозрачные панели, blur-эффекты создают ощущение контекста
|
||||
- UI-элементы исчезают, когда не нужны
|
||||
- Анимация лишь поддерживает взаимодействие, не доминирует
|
||||
|
||||
### Depth (Глубина)
|
||||
Визуальная иерархия через слои и движение.
|
||||
- Параллакс, тени, наслоение создают иллюзию трёхмерности
|
||||
- Реалистичное движение помогает понимать, откуда пришёл элемент
|
||||
- Navigate через жесты (swipe back) — физическая метафора
|
||||
|
||||
## Практические правила Apple HIG
|
||||
1. **Aesthetic Integrity** — визуальный стиль соответствует функции (игровой UI ≠ корпоративный UI)
|
||||
2. **Consistency** — стандартные жесты, паттерны, иконки по всей платформе
|
||||
3. **Direct Manipulation** — пользователь управляет объектами напрямую (слайдер, перетаскивание)
|
||||
4. **Feedback** — каждое действие получает отклик
|
||||
5. **Metaphors** — виртуальные объекты ведут себя как физические (перелистывание страниц)
|
||||
6. **User Control** — пользователь инициирует действия, а не система
|
||||
|
||||
## Применение к веб-дизайну (не iOS)
|
||||
- **Clarity**: использовать крупные заголовки, чёткую типографику, минимум UI-шума
|
||||
- **Deference**: контентные секции с прозрачными разделителями, CTA под контент
|
||||
- **Depth**: плавные page-transitions, hover-эффекты с тенью, cascade-слои
|
||||
- **Aesthetic Integrity**: стиль под цель — для лендинга больше пространства, для магазина — плотнее
|
||||
Reference in new issue
Block a user