Initial commit with translated description

2026-03-29 13:02:21 +08:00
commit 8efab1561a
12 changed files with 3787 additions and 0 deletions
--- a/references/design-patterns.md
+++ b/references/design-patterns.md
@@ -0,0 +1,294 @@
+# Design Patterns & Component Best Practices
+
+Comprehensive guide to UI patterns, component design, and design system best practices for Figma.
+
+## Component Architecture
+
+### Atomic Design Principles
+
+#### Atoms (Basic Elements)
+- **Buttons**: Primary, secondary, ghost, icon buttons
+- **Form inputs**: Text fields, selectors, checkboxes, radio buttons
+- **Typography**: Headings, body text, captions, labels
+- **Icons**: Consistent icon library with standardized sizing
+- **Avatars**: User profile images with fallback states
+
+**Best Practices:**
+- Use auto-layout for flexible resizing
+- Create consistent hover/focus/disabled states
+- Establish clear naming conventions
+- Include component documentation
+
+#### Molecules (Simple Combinations)
+- **Form groups**: Label + input + validation message
+- **Navigation items**: Icon + text + badge
+- **Card headers**: Title + subtitle + actions
+- **Search bars**: Input + search icon + clear button
+
+**Best Practices:**
+- Combine atoms logically and purposefully
+- Maintain single responsibility principle
+- Use component properties for variations
+- Test across different content lengths
+
+#### Organisms (Complex Combinations)
+- **Navigation bars**: Logo + menu + user profile + search
+- **Data tables**: Headers + rows + pagination + actions
+- **Product cards**: Image + title + price + actions
+- **Forms**: Multiple form groups + buttons + validation
+
+**Best Practices:**
+- Design for responsive behavior
+- Consider loading and error states
+- Plan for empty states and edge cases
+- Optimize for accessibility
+
+### Component Naming Conventions
+
+#### Hierarchical Structure
+```
+Component Name / Variant / State
+Examples:
+- Button / Primary / Default
+- Button / Primary / Hover
+- Button / Secondary / Disabled
+- Input / Text / Error
+- Card / Product / Loading
+```
+
+#### Descriptive Naming
+- Use descriptive, action-oriented names
+- Avoid technical jargon in user-facing names
+- Be consistent across similar components
+- Include size/type indicators when helpful
+
+## Layout Patterns
+
+### Grid Systems
+
+#### Standard Grid Configurations
+- **12-column grid**: Most versatile, works for web and mobile
+- **8-column grid**: Good for tablet layouts
+- **4-column grid**: Mobile-friendly, simple layouts
+- **Custom grids**: Match specific brand requirements
+
+**Grid Properties:**
+- Consistent gutters (16px, 20px, 24px common)
+- Responsive breakpoints (320px, 768px, 1024px, 1440px)
+- Maximum content width (1200px-1440px typical)
+
+#### Auto-Layout Best Practices
+- Use auto-layout for all flexible components
+- Set appropriate resizing constraints
+- Consider padding vs margin usage
+- Test with varying content lengths
+
+### Common Layout Patterns
+
+#### Header Patterns
+1. **Simple header**: Logo + navigation + CTA
+2. **Mega menu**: Logo + dropdown navigation + search + account
+3. **Mobile header**: Hamburger + logo + account/cart
+4. **Dashboard header**: Breadcrumbs + title + actions
+
+#### Content Layouts
+1. **Single column**: Simple, focused content flow
+2. **Two column**: Main content + sidebar
+3. **Three column**: Sidebar + main + secondary sidebar
+4. **Card grid**: Responsive card layouts
+5. **Masonry**: Pinterest-style irregular grid
+
+#### Footer Patterns
+1. **Simple footer**: Copyright + key links
+2. **Rich footer**: Multiple link columns + social + newsletter
+3. **Sticky footer**: Always at bottom of viewport
+4. **Fat footer**: Extensive links + contact info + sitemap
+
+## Interface Patterns
+
+### Navigation Patterns
+
+#### Primary Navigation
+- **Horizontal nav**: Works well for 3-7 main sections
+- **Vertical sidebar**: Good for 8+ items or complex hierarchies
+- **Tab navigation**: For equal-importance sections
+- **Breadcrumbs**: Show hierarchy and allow backtracking
+
+#### Secondary Navigation
+- **Dropdown menus**: Organize related sub-items
+- **Contextual sidebars**: Show relevant options for current content
+- **Floating action buttons**: Promote primary actions
+- **Bottom navigation**: Mobile-friendly for core functions
+
+### Form Patterns
+
+#### Form Layout
+- **Single column**: Easier to scan and complete
+- **Label placement**: Above fields for better readability
+- **Required indicators**: Use asterisks or "(required)" text
+- **Help text**: Provide when needed, but don't overdo
+
+#### Input Patterns
+- **Progressive disclosure**: Show additional fields as needed
+- **Smart defaults**: Pre-fill when possible
+- **Inline validation**: Real-time feedback on field completion
+- **Clear error states**: Specific, actionable error messages
+
+#### Form Actions
+- **Primary/secondary buttons**: Clear visual hierarchy
+- **Save states**: Show progress and confirmation
+- **Cancel behavior**: Ask about unsaved changes
+- **Multi-step forms**: Show progress and allow navigation
+
+### Data Display Patterns
+
+#### Tables
+- **Sortable headers**: Allow data organization
+- **Pagination**: Handle large datasets
+- **Row actions**: Edit, delete, view details
+- **Selection**: Bulk operations capability
+- **Responsive behavior**: Stack or hide columns on mobile
+
+#### Cards
+- **Consistent structure**: Image + title + metadata + actions
+- **Hover states**: Show additional information or actions
+- **Loading states**: Skeleton screens or progress indicators
+- **Empty states**: Helpful guidance when no content exists
+
+#### Lists
+- **Simple lists**: Basic text with optional icons
+- **Rich lists**: Multiple lines of information
+- **Interactive lists**: Drag-and-drop, selection
+- **Infinite scroll**: Load more content seamlessly
+
+## Responsive Design Patterns
+
+### Breakpoint Strategy
+
+#### Common Breakpoints
+- **Mobile**: 320px - 767px
+- **Tablet**: 768px - 1023px  
+- **Desktop**: 1024px - 1439px
+- **Large desktop**: 1440px+
+
+#### Content Strategy
+- **Mobile first**: Design for constraints, enhance for larger screens
+- **Progressive enhancement**: Add features as screen size allows
+- **Content parity**: Ensure feature availability across devices
+- **Touch targets**: Minimum 44px for mobile interactions
+
+### Adaptive Techniques
+
+#### Navigation Adaptation
+- **Collapsible menu**: Hamburger pattern for mobile
+- **Priority navigation**: Show most important items first
+- **Overflow menus**: "More" option for secondary items
+- **Tab bar**: Bottom navigation for mobile apps
+
+#### Content Adaptation
+- **Stacking**: Single column on mobile, multiple on desktop
+- **Content reduction**: Progressive disclosure on smaller screens
+- **Image scaling**: Responsive images with appropriate crops
+- **Typography scaling**: Larger text on mobile for readability
+
+## Accessibility Patterns
+
+### Color and Contrast
+- **4.5:1 contrast ratio**: Minimum for normal text (WCAG AA)
+- **3:1 contrast ratio**: Minimum for large text and UI components
+- **Don't rely on color alone**: Use icons, text, or patterns too
+- **Color blind considerations**: Test with color vision simulators
+
+### Interaction Patterns
+- **Focus indicators**: Clear visual focus for keyboard navigation
+- **Touch targets**: Minimum 44x44px for touch interfaces
+- **Click/tap areas**: Generous padding around interactive elements
+- **Hover states**: Clear feedback for interactive elements
+
+### Content Patterns
+- **Alt text**: Descriptive text for images and icons
+- **Heading hierarchy**: Proper H1-H6 structure
+- **Link text**: Descriptive, avoid "click here"
+- **Form labels**: Clear, descriptive labels for all inputs
+
+## Animation and Microinteractions
+
+### Animation Principles
+- **Purposeful motion**: Animation should serve a function
+- **Consistent timing**: Use consistent easing and duration
+- **Respect preferences**: Honor reduced motion preferences
+- **Performance**: Smooth 60fps animations
+
+### Common Microinteractions
+- **Button feedback**: Subtle scale or color change on press
+- **Loading indicators**: Skeleton screens or spinners
+- **Success confirmations**: Checkmarks or brief messaging
+- **Error handling**: Gentle shake or color change for errors
+- **Page transitions**: Smooth movement between states
+
+### Transition Patterns
+- **Slide transitions**: Natural for sequential content
+- **Fade transitions**: Good for overlays and modals
+- **Scale transitions**: Effective for showing/hiding elements
+- **Morphing transitions**: Transform one element into another
+
+## Design System Organization
+
+### File Structure
+```
+Design System/
+├── Foundation/
+│   ├── Colors
+│   ├── Typography
+│   ├── Spacing
+│   ├── Grid
+│   └── Iconography
+├── Components/
+│   ├── Atoms/
+│   ├── Molecules/
+│   └── Organisms/
+├── Patterns/
+│   ├── Navigation
+│   ├── Forms
+│   ├── Data Display
+│   └── Feedback
+└── Templates/
+    ├── Landing Pages
+    ├── Dashboard
+    └── Content Pages
+```
+
+### Documentation Standards
+- **Component purpose**: What problem does it solve?
+- **Usage guidelines**: When and how to use
+- **Do's and don'ts**: Clear examples of proper usage
+- **Accessibility notes**: ARIA patterns, keyboard behavior
+- **Implementation notes**: Technical considerations
+
+### Maintenance Practices
+- **Regular audits**: Review and update components quarterly
+- **Usage tracking**: Monitor which components are actually used
+- **Feedback loops**: Collect input from designers and developers
+- **Version control**: Clear versioning and change logs
+- **Testing**: Validate components across different contexts
+
+## Mobile-Specific Patterns
+
+### Touch Interactions
+- **Tap**: Primary interaction method
+- **Long press**: Secondary actions, context menus
+- **Swipe**: Navigation, dismissal actions
+- **Pinch**: Zoom functionality
+- **Pull to refresh**: Common mobile pattern
+
+### Mobile Navigation
+- **Tab bar**: 3-5 primary sections
+- **Hamburger menu**: Secondary navigation
+- **Segmented control**: Filter or view switching
+- **Bottom sheet**: Contextual actions and options
+
+### Mobile Content
+- **Card-based layouts**: Easy to scan and interact with
+- **Thumb-friendly zones**: Important actions in easy reach
+- **Generous whitespace**: Improve readability and touch accuracy
+- **Clear hierarchy**: Bold typography and visual separation