移动应用设计标准与工作流程

iOS and Android Design Standards

• iOS Typography: 苹方字体 (Extra Light, Thin, Light, Regular, Medium, Bold)
• iOS Typography: 英文San Francisco字体
• Android Typography: 思源黑体 (ExtraLight, Light, Normal, Regular, Medium, Bold, Heavy)
• Android Typography: 英文和数字Roboto
• UI Design Tools: Adobe Photoshop, Adobe Illustrator

UI Design Workflow and Team Roles

• Product Manager: Collects requirements, creates initial prototypes to show product flow and interactions.
• Interaction Designer: Further optimizes prototypes, focusing on user flow and information architecture. Creates high-fidelity prototypes.
• Visual Designer/UI Designer: Refines the prototype's aesthetics and interface, considering color schemes, icons, and advertising areas.
• UX Designer: Ensures that aesthetic choices align with the user experience.
• Developer: Designers provide specifications and assets (e.g. annotations, cutouts) and the developer builds the interface according to the instructions.
• Quality Assurance (QA) Tester: Tests functionalities and catches bugs before releasing the app.
• Marketing/Operations: Publishes the app and promotes it.

iOS/Android/HarmonyOS Units

• iOS (px): Physical pixel on the screen — the base unit used by the display
• iOS (pt): Absolute length, 1 pt = 1/72 inch.
• Android (px): Represents a single pixel on the screen; clarity improves with increasing density.
• Android (dp): Device-independent pixel that scales with screen density; 1dp=1px on a 160dpi screen.
• Android (sp): Scales with screen density and system font size.
• iOS/Android/HarmonyOS (in): Inch as physical measurement of the screen. 1 inch = 2.54cm
• iOS/Android/HarmonyOS (pt): A point; 1 pt = 1/72 inch
• iOS/Android/HarmonyOS (mm): Millimeter; less frequently used in Android development.

Color Models

• RGB: Red, Green, Blue — typical for displays.
• CMYK: Cyan, Magenta, Yellow, Black — typical for printing.
• HSB: Hue, Saturation, Brightness — a color model for image color correction.

UI Layout Types

• List Layout: Clear hierarchy, easy to browse, less flexibility
• Gallery Layout: Fluid and visual, may become cluttered with too much content.
• Grid Layout: Simple, clear display of entry points, good for quick lookup, return to start point after navigating.
• Card Layout: Effective for displaying key information, maintaining a consistent structure, but too many cards can make it look cluttered.
• Dual Card Layout: Often used for displaying information with many images/graphics.

UI Design Terminology

• Dot Gain: Common in printing, relates to the way inks are applied
• PPI (Pixels Per Inch): Represents the density of pixels in an image per inch of length
• Physical Resolution: The actual number of pixels present in the display's width and height
• Logical Resolution (DP, PT): Abstract unit for screen display, specific to each device's resolution.
• Scaling Factor: Ratio between physical and logical pixels.

UI Design Considerations

• Icon Consistency: Maintain uniformity in size, style, color, and proportions.
• Layout Consistency: Maintain consistent visual parameters, including margins, spacing, and angles.
• Screen Elements: Consistency in the sizes, styles and color of screen elements.

Image Formats

• PNG: Lossless compression, supports transparency and alpha channels.
• JPEG: Lossy compression, suitable for less-critical images.
• HEIF/HEIC: Supports higher color depths and has better compression than JPEG.

Splash Screens and Intro Screens

• Splash Screens: Displays application branding and information during initial launch, then redirects to the main interface.
• Splash Screen Categories: Brand promotion, holiday-related, and promotional activities.
• Intro Screens: Guides users through application's functions and features. Contains no more than 5 pages.
• Intro Screen Categories: Functional overview, promotional overview, and problem-solving guidance.
• Intro Screen Types: Fixed-frame, image-text, dynamic, and video.
• Blank Screen: Displays when encountering network issues, displays error/no content messages.

UI Design Process

• Emotional Boards: User emotion driven design, considering colors, icons, typography to enhance user experience.

Prototyping and User Flow

• Prototypes: Initial visualizations of a product/service which show the layout and interactions. They are used to communicate design ideas.

Development Process

• Describes a typical product development process, highlighting the roles and responsibilities of each team member. Prototypes are reviewed and refined. Screens are annotated by the designers for developers. Code is written to match this annotation. Testing is performed on the finished product. The product is launched and promoted by operations.

Software Tools

• PS (Photoshop) and AI (Illustrator): Software for UI creation and graphic design, necessary for the project.

Testing and QA

• Testing: The app is tested by QA teams to ensure no bugs before deployment.

Exam Preparation

• Pencil and Eraser: Necessary for initial sketches.
• Sharp Pen: For refining and drawing finalized prototypes.

本测验将考察您对iOS和Android的设计标准的理解，特别是在排版和UI设计工具方面。此外，将讨论UI设计的工作流程及团队角色，帮助您更好地理解各个职位在项目中的职责。通过本测验，您将深入掌握移动应用设计的核心要素。