UI Design Review Outline PDF

1：复习 iOS Android 章节的规范知识点（如系统文字规范，字体的字重及界面尺寸 和组件（APP 界面需要什么 状态栏（显示电池电量等）导航栏 设计区域 标签栏 Tab 栏） iOS:（图标：120*120*25px） 1. 文字规范：苹方（San Francisco）：特细 细体 中黑 常规 粗体 特粗 2. 界面尺寸：375px*667px，组件尺寸：状态栏（20...

1：复习 iOS Android 章节的规范知识点（如系统文字规范，字体的字重及界面尺寸 和组件（APP 界面需要什么 状态栏（显示电池电量等）导航栏 设计区域 标签栏 Tab 栏） iOS:（图标：120*120*25px） 1. 文字规范：苹方（San Francisco）：特细 细体 中黑 常规 粗体 特粗 2. 界面尺寸：375px*667px，组件尺寸：状态栏（20px）导航栏（44px）标签栏（73.5px） 3. APP 界面：状态栏（显示电池电量等），导航栏，设计区域，标签栏 Tab 栏 Android（开源系统，免费）:(图标：144*144*25px) 1. 文字规范：思源黑体（Roboto）:极细体、纤细体、 正常体、常规体、中黑体、粗 体、特粗体 2. 界面尺寸：1080px*1920px，组件尺寸：状态栏（60px）导航栏（144px）标签栏 （150px） 2：熟悉移动 UI 设计常用的设计软件有哪些，并且需要会英文的拼写 Adobe Photoshop、Adobe llustrator、Adobe XD、即时设计、Figma、Sketch 3：UI 设计的工作流程及团队成员的组成及相关的职能有哪些（复习上课笔记记录） 产品经理、交互设计、UI 设计师、用户体验、开发、测试、运营 1. 产品经理：收集需求，考点功能，粗略画出原型图，主要表达产品的流程逻辑视觉 效果及操作状态 2. 交互设计：将产品经理绘制的原型图进一步优化，考虑用户的流程和信息架构做出 高保真原型图 3. UI 设计师：对原型图进行美化和优化界面，考虑配色/图标设计/广告区域设计 4. 用户体验：以用户为核心的原则保证功能的主要审美平衡 5. 开发：UI 设计师将界面进行标注和切图转给开发，根据团队的标注和切图搭建界面 6. 测试：应用开发完之后，测试人员测试功能是有没有问题，直到测试完全没有 BUG 给运营 7. 运营：最终将应用发布给苹果或者安卓平台，根据不同的手段提升人气 8. 5：复习课本中的 ios Android 鸿蒙系统的单位是什么，每个单位代表的是什么意思 iOS 单位 px（像素）：物理屏幕显示的基本单位 pt（点）：绝对长度单位，1pt=1/72 英寸。 Android 单位 px（像素）：屏幕上的像素点， dp（独立像素）：能够自动适应不同屏幕密度的单位。在 160dpi 的屏幕上，1dp=1px。 使用 dp 作为长度单位可以适配不同的屏幕密度。 sp（比例像素）：主要用于定义字体大小。随着系统字体的大小设置改变而作出变化。 in（英寸）：屏幕的物理尺寸，1inch=2.54cm。 pt（点）：屏幕的物理尺寸，1pt=1/72inch。 鸿蒙系统（HarmonyOS）单位 px（像素）：最基础的绝对单位。 vp（视口单位）：与设备屏幕分辨率相关的相对单位。 fp（字体像素）：鸿蒙系统专门用于定义字体大小的单位。 lpx（逻辑像素）：逻辑像素单位，会根据设备的屏幕分辨率和物理大小进行缩放。 百分比单位：表示相对于父容器的大小。 6：复习 RGB CMYK HSB 各代表什么颜色及什么意思 RGB：红绿蓝 典型的显示器使用的颜色 CMYK(印刷色)：青色、洋红、黄色、黑色 HSB：色相 饱和度 亮度/明度 7：复习课本上 ios 内容布局章节内容，比较常见的内容布局方式有哪些？及优点和缺 点？ 列表式布局、陈列馆式布局、宫格式布局、卡片式布局： 列表式布局（优点：层次清晰明了，便于浏览；缺点：布局灵活度不高，容易视觉疲劳） 陈列馆式布局（优点：流动性强·，能够直观展示内容；缺点：内容过多会杂乱） 宫格式布局（优点：简单明了，能清晰展现入口，方便快速查询；缺点：跳转时要返回 初始点，不适合多层级) 卡片式布局(优点：能直观展示界面的重要信息，分类位置固定，能够有效减少跳转;缺 点：频繁使用会使界面杂乱不实用) 双栏卡片式布局(在图片信息为主导的 APP 常见，可以在一屏显示更多内容) 8：复习常用的专业术语的概念（如网点密度/屏幕密度/物理分辨率/逻辑分辨率/倍率 等） 网点密度：秒速印刷品的打印精度。 屏幕密度：定义屏幕的清晰度。像素密度越高，屏幕显示的图像就越清晰细腻。 物理分辨率：示屏上实际发光的单个点的数量，即屏幕的宽和高分别有多少个物理像素。 逻辑分辨率：显示屏上用于显示内容的抽象单位，对应存在于软件的代码层面。 倍率：倍率是指物理像素与逻辑像素之间的比例。 9：图标统一性体现在哪些方面（课本第 43 页）也可以百度答案，尽量复习的全面一 些？如何让图标设计更具有美观性！ （1）大小的统一 整体大小：在同一组图标中，任意两个图标的大小必须一致。这不仅仅是整体外形的统 一，还包括内部细节的平衡。 视觉大小：即使图标的形状不同，也需要在视觉上保持平衡。例如，面性、线性、长形 或短形的图标，都需要通过调整视觉大小，使其在整体上保持一致。 （2）风格的统一 配色统一：图标的颜色需要保持一致，以增强整体的视觉统一性。颜色的使用不应妨碍 形状的清晰度，并要确保对比鲜明，避免使用相似色。 边角统一：所有图标的圆角大小需要保持一致，以保持整体风格的和谐。 形式统一：图标的设计形式，如 MBE 风格、多色风格、线性风格等，需要保持一致。 （3） 比例的统一 元素比例：如果图标中包含多个元素，那么这些元素的大小比例也必须协调，以免造成 视觉上的不适。 细节比例：例如，一个购物袋的细致线条以及内部小方块的大小，都需要相辅相成，以 保持整体比例的统一。 （4）细节的统一 线性图标的描边粗细：线性图标的描边粗细需要统一，以增强整体的视觉一致性。 断线图标的开口大小：断线图标的开口大小需要保持一致，以确保图标的整体和谐。 图标的正负形大小：正负形（即图标中的填充部分和空白部分）的大小需要保持一致， 以确保图标的视觉平衡。 （5）角度的统一 图标角度：图标的角度需要统一，常见的角度规范为 30°的倍数。同时，需要考虑断线 位置的整体和谐度。 10：复习 ios 系统使用的图片格式有哪些？推荐使用的图片集格式是什么？ 使用的图片格式：PNG、JPEG、HEIF/HEI 推荐使用:PNG 12：APP 界面设计关于情绪版创建及如何推导视觉设计的步骤。（情绪版：通过界面 元素和交互方式引发用户在使用 APP 时产生的情绪体验，设计是以用户的情感需求为 出发点）（色彩，色调色彩选择，图标和图像，字体选择）筛选 3-4 组有画面感词语 1.创建：明确情感定位、收集情绪素材、构建情绪版、提炼设计元素、推导视觉设计 2.推导视觉设计步骤：信息架构设计，绘制草图和原型，确定视觉风格，进行详细设计， 进行交互设计，测试和评估，迭代优化 3.画面感的词语： 温馨舒适：柔和的色调、圆润的边角、温馨的家居背景。 科技未来：冷色调、金属质感、流线型设计。 活力四射：鲜艳的色彩、动感的图形、跳跃的动画效果。 简约时尚：黑白灰基础色、简洁的线条、时尚的元素。 复古怀旧：旧照片、复古纹理、复古色调。 梦幻浪漫：粉色系、梦幻的云朵、浪漫的花朵。 清新自然：绿色系、植物元素、自然的纹理。 神秘奇幻：深色调、神秘的符号、奇幻的场景。 热情奔放：红色系、热情的火焰、奔放的线条。 宁静致远：蓝色系、宁静的水面、远山的轮廓。 13：什么是原型图？ 原型图是产品或服务设计的初步可视化模型，展示外观、布局及交互方式，用于沟通、 验证和优化设计。是用于呈现软件产品功能界面、交互设计和逻辑过程的设计项目。它 类似于软件的草图，通过原型图可以清楚地说明软件的功能、界面数量、每个功能的作 用以及界面之间的流转关系。 14：简述产品从需求到线上的流程。（复习课本 12-13 页面内容）也可以百度完善答 案。 产品经理、交互设计、UI 设计师、用户体验、开发、测试、运营 1. 产品经理：收集需求，考点功能，粗略画出原型图，主要表达产品的流程逻辑视觉 效果及操作状态 2. 交互设计：将产品经理绘制的原型图进一步优化，考虑用户的流程和信息架构做出 高保真原型图 3. UI 设计师：对原型图进行美化和优化界面，考虑配色/图标设计/广告区域设计 4. 用户体验：以用户为核心的原则保证功能的主要审美平衡 5. 开发：UI 设计师将界面进行标注和切图转给开发，根据团队的标注和切图搭建界面 6. 测试：应用开发完之后，测试人员测试功能是有没有问题，直到测试完全没有 BUG 给运营 7. 运营：最终将应用发布给苹果或者安卓平台，根据不同的手段提升人气