platform-design-skills
راهنمای طراحی رابط‌های Android مدرن، سازگار و مبتنی بر Material 3
این مهارت به طراحی و پیاده‌سازی رابط‌های Android با Jetpack Compose و Material 3 کمک می‌کند؛ از مدیریت theme و dynamic color تا چیدمان واکنش‌گرا برای tablet و foldable، edge-to-edge و WindowInsets.
همچنین اصول دسترس‌پذیری، bottom sheet و dialog، deep link، اشتراک‌گذاری، مجوزها و الگوهای مناسب Android 15+ را پوشش می‌دهد تا رابط برنامه در دستگاه‌ها و شرایط مختلف منسجم و قابل‌استفاده باشد.
چه چیزی می‌گیرید
- راهنمای استفادهٔ درست از color roleها، typography و dynamic color در Material 3
- الگوهای adaptive layout برای phone، tablet، foldable و نمایشگرهای بزرگ
- پیاده‌سازی edge-to-edge با WindowInsets و مدیریت صحیح system barها
- چک‌لیست دسترس‌پذیری، bottom sheet، dialog، shortcut و deep link
- پرهیز از الگوهای منسوخ مانند hardcode کردن رنگ‌ها و درخواست مجوزهای غیرضروری
برای چه کاری خوب است
- توسعه‌دهندگان Android و Jetpack Compose که روی اپلیکیشن‌های جدید کار می‌کنند
- تیم‌هایی که می‌خواهند رابط برنامه روی phone، tablet و foldable سازگار باشد
- بازطراحی اپلیکیشن‌های موجود برای Material 3، Android 15+ و دسترس‌پذیری بهتر
برای چه کاری نیست
- پروژه‌هایی که به طراحی وب یا iOS نیاز دارند
- کارهایی که فقط به پیاده‌سازی منطق backend یا API مربوط هستند
- نمونه‌های بسیار ساده که نیازی به adaptive layout یا استانداردهای Android ندارند
دربارهٔ این اسکیل
if (darkTheme) dynamicDarkColorScheme(context)
else dynamicLightColorScheme(context)
}
darkTheme -> darkColorScheme()
else -> lightColorScheme()
}
MaterialTheme(
colorScheme = colorScheme,
typography = AppTypography,
content = content
)
}
```xml
...
R1.2: Never hardcode color hex values in components. Always reference color roles from the theme.
- R1.3: Test with at least 3 different wallpapers to verify dynamic color harmony.
### 1.2 Color Roles
Material 3 defines a structured set of color roles. Use them semantically, not aesthetically.
| Role | Usage | On-Role |
|------|-------|---------|
...
| Medium | 24dp | 16dp | 8 |
| Expanded | 24dp | 24dp | 12 |
**Rules:**
- R3.4: Content should not span the full width on expanded screens. Use a max content width of ~840dp or list-detail layout.
- R3.5: Apply consistent horizontal margins matching the grid spec.
### 3.3 Edge-to-Edge Display
Android 15+ enforces edge-to-edge.
...
R3.7: Use `WindowInsets` to pad content away from system bars. `Scaffold` handles this for top bar and bottom bar content automatically.
- R3.8: Scrollable content should scroll behind transparent system bars with appropriate inset padding at the top and bottom of the list.
### 3.4 Foldable Device Support
```kotlin
// Compose: Detect fold posture
...
}
}Rules:
- R5.8: Use modal bottom sheets for non-critical supplementary content. Use standard bottom sheets for persistent content.
- R5.9: Bottom sheets must have a visible drag handle for discoverability.
- R5.10: Sheet content must be scrollable if it can exceed the visible area.
5.4 Dialogs
...
R10.7: Test shortcuts with long-press on the app icon and in the Settings > Apps shortcut list.
### 10.3 Deep Links and Share
**Rules:**
- R10.8: Support Android App Links (verified deep links) for all public content URLs.
- R10.9: Implement the share sheet with `ShareCompat` or `Intent.createChooser`.
...
| Full-width content on tablets | Wastes space; poor readability | Max width or list-detail layout |
| `READ_EXTERNAL_STORAGE` for photos | Unnecessary since Android 13 | Use Photo Picker API |
| Blocking UI on permission denial | Punishes the user | Graceful degradation |