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

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

图文结合的设计要求是什么？

文字与图片无关

图文内容要复杂多样

文字必须是长篇大论

文字要简洁，并与产品定位相关 (correct)

动态效果展示的主要目的是什么？

增加对产品的关注度 (correct)

保持页面的静态效果

减少用户的使用兴趣

让用户感到无聊

良好的空白页设计应具备哪些特点？

文字信息模糊不清

内容复杂且难以理解

仅仅是错误提示，无任何引导

简洁明了并引导用户操作 (correct)

情绪版的构建过程中，首先需要什么？

分析目标用户的情感需求 Signup and view all the answers

原型图主要的功能是什么？

模拟最终产品的外观和交互 Signup and view all the answers

何为错误提示型的空白页？

指引用户解决问题的页面 Signup and view all the answers

在视觉设计的推导过程中，哪些元素需要被提炼？

能够代表产品情感定位的设计元素 Signup and view all the answers

动态效果展示中通常不包括哪一种效果？

单一静态效果 Signup and view all the answers

构建情绪版时，收集素材的主要渠道有哪些？

社交媒体、多媒体和市场调研 Signup and view all the answers

设计原型图时应采用哪种绘制工具的顺序？

先用铅笔绘制后使用墨笔描绘 Signup and view all the answers

图标设计统一性的哪一方面包括了所有图标的圆角大小需要保持一致？

风格的统一 Signup and view all the answers

HEIF 格式相较于 JPEG 格式的主要优势是什么？

提供更高的色深和色彩信息 Signup and view all the answers

闪屏页用于展示应用程序的品牌信息，其主要目标是什么？

增强用户对产品的认知度 Signup and view all the answers

以下哪一项不是引导页的分类？

文档说明型 Signup and view all the answers

当图标中包含多个元素时，需要确保哪些比例协调？

细节比例 Signup and view all the answers

闪屏页的分类中，节假关怀型的主要目的是？

营造节日氛围，体现人文关怀 Signup and view all the answers

在图标设计中，下列哪一项不属于角度的统一规范？

图标的纵横比需要相同 Signup and view all the answers

关于 PNG 格式，以下哪一项是正确的？

是一种无损压缩格式 Signup and view all the answers

功能介绍型引导页的设计中，应避免什么？

过多的文字 Signup and view all the answers

IOS界面的中文字体中，哪一种字重是最纤细的？

极细体 Signup and view all the answers

在Android系统中，dp单位的定义是什么？

能够自动适应不同屏幕密度的单位 Signup and view all the answers

在常见的内容布局方式中，以下哪种布局的优点是层次清晰明了，便于浏览？

列表式布局 Signup and view all the answers

在移动UI设计中，RGB色彩模型代表哪些颜色？

红色、绿色、蓝色 Signup and view all the answers

在鸿蒙系统中，lpx单位的特点是什么？

能够适配不同分辨率的设备 Signup and view all the answers

以下哪个选项是Adobe系列中常用的UI设计软件？

Adobe Illustrator Signup and view all the answers

在iOS中，pt单位和px单位的区别是什么？

pt是绝对长度单位，1pt=1/72英寸 Signup and view all the answers

以下哪种布局形式适合展示大量内容，但可能导致视觉杂乱？

陈列馆式布局 Signup and view all the answers

哪种色彩模型主要用于印刷？

CMYK Signup and view all the answers

频繁使用卡片式布局的缺点是什么？

易导致界面杂乱 Signup and view all the answers

Signup and view all the answers

Study Notes

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.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

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