UI Design Course Review Outline PDF

1：复习 iOS Android 章节的规范知识点（如系统文字规范，字体的字重及界面尺寸 和组件（APP 界面需要什么 状态栏（显示电池电量等）导航栏 设计区域 标签栏 Tab 栏） iOS 文字： 中文：苹方（极细体（Extra Light）：纤细体（Thin）：细体（Light）：常规体 （Regular）：中黑体（Medium）：中粗体（Bold））...

1：复习 iOS Android 章节的规范知识点（如系统文字规范，字体的字重及界面尺寸 和组件（APP 界面需要什么 状态栏（显示电池电量等）导航栏 设计区域 标签栏 Tab 栏） iOS 文字： 中文：苹方（极细体（Extra Light）：纤细体（Thin）：细体（Light）：常规体 （Regular）：中黑体（Medium）：中粗体（Bold）） 英文：San Francisco 界面尺寸 组件 状态栏（显示电池电量等） 导航栏 设计区域 标签栏 Tab 栏 Android 文字 中文：思源黑体（ExtraLight 极细体；Light 纤细体；Normal 正常体；Regular 常规体；Medium 中黑体；Bold 粗体；Heavy 特粗体） 英文&数字：Roboto 2：熟悉移动 UI 设计常用的设计软件有哪些，并且需要会英文的拼写 （1）Adobe Photoshop （2）Adobe Illustrator 3：UI 设计的工作流程及团队成员的组成及相关的职能有哪些（复习上课笔记记录） 4：复习 ios 的内容布局章节知识点 5：复习课本中的 ios Android 鸿蒙系统的单位是什么，每个单位代表的是什么意思 iOS 单位 px（像素）：物理屏幕显示的基本单位 pt（点）：绝对长度单位，1pt=1/72 英寸。 Android 单位 px（像素）：屏幕上的像素点，1px 代表占据一个像素点。在屏幕尺寸一定的情况下， 密度越大，像素数量越多，显示效果就会越清晰。 dp（独立像素）：能够自动适应不同屏幕密度的单位。在 160dpi 的屏幕上，1dp=1px。 使用 dp 作为长度单位可以适配不同的屏幕密度。 sp（比例像素）：主要用于定义字体大小。sp 除了能够像 dp 一样适应屏幕密度的变化， 还可以随着系统字体的大小设置改变而作出变化。 in（英寸）：屏幕的物理尺寸，1inch=2.54cm。 pt（点）：屏幕的物理尺寸，1pt=1/72inch。 mm（毫米）：屏幕的物理尺寸，在 Android 开发中不常用。 鸿蒙系统（HarmonyOS）单位 px（像素）：最基础的绝对单位，直接对应设备屏幕上的物理像素点。适用于对元素大 小有精确要求的场景，如图标、控件等。 vp（视口单位）：与设备屏幕分辨率相关的相对单位。鸿蒙系统会根据设备的屏幕密度 （DPI）自动调整 vp 的大小，确保不同设备上元素的显示效果保持一致。适用于跨设 备 UI 设计，以确保在不同屏幕密度的设备上拥有相同的视觉体验。 fp（字体像素）：鸿蒙系统专门用于定义字体大小的单位。fp 可以根据不同设备的屏幕 密度进行动态调整，确保字体在所有设备上保持一致的显示效果。适用于需要跨设备调 整字体大小，以确保字体在所有设备上都能保持可读性的场景。 lpx（逻辑像素）：逻辑像素单位，会根据设备的屏幕分辨率和物理大小进行缩放。lpx 能够适配不同分辨率的设备，提供较好的显示效果。常用于定义 UI 布局中的控件大小， 适用于跨设备的 UI 布局设计，以保证布局在不同设备上的一致性。 百分比单位：表示相对于父容器的大小。常用于宽度、高度等布局属性中，用来实现响 应式布局。 6：复习 RGB CMYK HSB 各代表什么颜色及什么意思 RGB：红色 绿色 蓝色 典型的显示器使用的颜色 CMYK：青色 洋红 黄色 黑色 印刷色 HSB：色相 饱和度 亮度/明度 一种色彩模型，用于图像色彩矫正 7：复习课本上 ios 内容布局章节内容，比较常见的内容布局方式有哪些？及优点和缺 点？ 列表式布局 优点：层次清晰明了，便于浏览 缺点：布局灵活度不高，容易视觉疲劳 陈列馆式布局 优点：流动性强·，能够直观展示内容 缺点：内容过多会杂乱 宫格式布局 优点：简单明了，能清晰展现入口，方便快速查询 缺点：跳转时要返回初始点，不适合多层级 卡片式布局 优点：能直观展示界面的重要信息，分类位置固定，能够有效减少跳转 缺点：频繁使用会使界面杂乱不实用 双栏卡片式布局 在图片信息为主导的 APP 常见，可以在一屏显示更多内容 8：复习常用的专业术语的概念（如网点密度/屏幕密度/物理分辨率/逻辑分辨率/倍率 等） ⚫ 网点密度 在印刷领域，网点密度指的是单位面积内网点的数量，它与图像的分辨率和清晰度 密切相关。但在界面设计中，这一概念较少直接应用。 ⚫ 屏幕密度（像素密度） 定义：屏幕密度（PPI，Pixels Per Inch）又称像素密度，是指每英寸长度内的像素 数量，用于定义屏幕的清晰度。像素密度越高，屏幕显示的图像就越清晰细腻。 ⚫ 物理分辨率 定义：物理分辨率（PX，Physical Resolution）是指显示屏上实际发光的单个点 的数量，即屏幕的宽和高分别有多少个物理像素。例如，一个 1920x1080 的显示屏就 意味着它有 1920 个物理像素宽和 1080 个物理像素高。 ⚫ 逻辑分辨率 定义：逻辑分辨率（DP/PT，Device-Independent Pixels/Points）是显示屏上用 于显示内容的抽象单位，对应存在于软件的代码层面。可以理解为代码层面有一块虚拟 的屏幕，这块屏幕上的像素就是逻辑像素。同时，使用逻辑像素还可以避免在不同设备 上进行复杂的换算。 ⚫ 倍率 定义：倍率是指物理像素与逻辑像素之间的比例。例如，如果一个设备的倍率为 2， 那么意味着 1 个逻辑像素会由 4 个物理像素来显示（2x2 的物理像素块）。 9：图标统一性体现在哪些方面（课本第 43 页）也可以百度答案，尽量复习的全面一 些？如何让图标设计更具有美观性！记到大部分标题就行 （1）大小的统一 整体大小：在同一组图标中，任意两个图标的大小必须一致。这不仅仅是整体外形的统 一，还包括内部细节的平衡。 视觉大小：即使图标的形状不同，也需要在视觉上保持平衡。例如，面性、线性、长形 或短形的图标，都需要通过调整视觉大小，使其在整体上保持一致。 （2）风格的统一 配色统一：图标的颜色需要保持一致，以增强整体的视觉统一性。颜色的使用不应妨碍 形状的清晰度，并要确保对比鲜明，避免使用相似色。 边角统一：所有图标的圆角大小需要保持一致，以保持整体风格的和谐。 形式统一：图标的设计形式，如 MBE 风格、多色风格、线性风格等，需要保持一致。 （3） 比例的统一 元素比例：如果图标中包含多个元素，那么这些元素的大小比例也必须协调，以免造成 视觉上的不适。 细节比例：例如，一个购物袋的细致线条以及内部小方块的大小，都需要相辅相成，以 保持整体比例的统一。 （4）细节的统一 线性图标的描边粗细：线性图标的描边粗细需要统一，以增强整体的视觉一致性。 断线图标的开口大小：断线图标的开口大小需要保持一致，以确保图标的整体和谐。 图标的正负形大小：正负形（即图标中的填充部分和空白部分）的大小需要保持一致， 以确保图标的视觉平衡。 （5）角度的统一 图标角度：图标的角度需要统一，常见的角度规范为 30°的倍数。同时，需要考虑断线 位置的整体和谐度。 10：复习 ios 系统使用的图片格式有哪些？推荐使用的图片集格式是什么？ 图片格式 PNG：PNG 是一种无损压缩格式，通过去除图像数据中的冗余信息来减小文件大 小，同时保留原始图像的细节和颜色信息。它支持透明度和 alpha 通道 JPEG：JPEG 是一种有损压缩格式，在压缩过程中会丢失一部分图像数据以减小文 件大小。它通常用于低分辨率、低细节要求的场景。传输速度快但 JPEG 的有损压缩会 导致图像失真和色彩偏差，在高质量要求下可能不如 PNG。 HEIF/HEIC：自 iPhone7 开始，苹果手机照片默认采用了 HEIF/HEIC 格式，逐渐 取代了传统的 JPEG 格式。HEIF 支持更高的色深（如 4:2:2 10bit），能提供更丰富的 色彩和色调信息，让照片看起来更加生动逼真。同时，HEIF 的压缩效率极高，可以在 保持画质不变的情况下大幅缩小文件体积，节省大量存储空间。然而，目前 HEIF 格式 的兼容性还有待提升，安卓系统和 Windows 系统可能无法打开所有 HEIF 文件。 11：复习闪屏页和引导页教学内容，课件 PPT。 ⚫ 闪屏页： 定义：指在启动移动应用程序时显示的一张页面，通常会展示应用程序的品牌标识、名 称或其他相关信息。闪屏页通常在 APP 启动时显示一段时间，然后自动跳转到主界面 或登录界面。 作用：设计出定位明确且吸引人的闪屏页，才能加深用户对产品的认知度。 分类：品牌宣传型、节假关怀型和活动推广型 （1）品牌宣传型 App 的闪屏页是为了体现产品的品牌而设定的，主要组成部分是“产品名称+产品 形象+产品广告语”。传统的品牌宣传型闪屏页是最为直白的闪屏页，设计较为精简， 力求凸显品牌特点。 （2）节假关怀型 通过营造节假日的气氛来体现人文关怀，当眼前出现一幅朴实的节假日插图时，观 者会从内心感受到软件带来的祝福，从而拥有美好的心情。 例如：QQ 空间在设计中，对品牌的 LOGO 进行了延展设计，以凸显节假日的元素。 这种设计不仅能够加强与用户的情感交流，还能加深用户的品牌的印象。 （3）活动推广型 以特色活动为主题进行营销策划，围绕用户利益点，营造活动氛围。活动推广型的 闪屏页多以插画形式表现。要着重体现的是活动主题及时间节点，在设计时要抓住主次， 避免因为丰富的场景画面影响到主题的体。 ⚫ 引导页 定义：是在用户首次打开应用程序时出现的页面，目的是向用户介绍应用程序的功 能、特点和使用方式。它通常包含一系列的屏幕或页面，帮助新用户更好地了解应用的 核心功能，指导他们如何使用应用程序，通常有不超过 5 页且可以左右滑动的页面。 分类：功能介绍型、推广介绍型和问题解决型；且最后一页包含引导按钮，单击后 可以直接进入 APP 的首页。 （1）功能介绍型 要保证信息展示具有很强的针对性，切忌文字过多和表达不清。在这样一个网络化、 碎片化的时代，用户停留在引导页上的时间越来越短，浏览时间通常不会超过 3 秒。 在这宝贵的 3 秒钟内，设计师需要把简洁明了、通俗易懂的文案和界面呈现给用户 功能介绍型引导页分为带按钮的引导页和不带按钮的引导页两种类型。一般社交类 的产品会强制引导用户去登录，所以会在引导页面中加入登录的入口 （2）推广介绍型 以传达品牌思想态度为目的，主要为了引起用户的共鸣，阐述产品的使命和情怀， 展示 APP 的定位与风格 （3）问题解决型 重点针对用户在实际生活中会遇到的问题给出解决方案，让用户与 APP 产生情感 上的联系，提升好感度，从而增强用户黏性 （4）浮层引导页 浮层引导页一般出现在功能操作提示中，是为了能够让用户在使用过程中更好地解 决问题而提前设计的用户指导。 这种引导页的浮层通常以手绘表现方式为主，会使用箭头和圆圈来进行设计，并用 高亮的颜色来突出信息，同时采用蒙版方式来加强突出功能 表现方式：（固定框架，图文，动态，视频） 1、固定框架类 框架类引导页由简要精练的文案搭配该产品的功能框架组成。是引导页最常用的表 现形式。常用于基本功能类和使用方法类界面 2、图片与文字组合 图文结合主要由文字加图片、手绘插图的表现形式组成，在引导页设计中较为常见。 具体组成的文字元素要求语句简洁外，还要结合产品的定位组织富有使用意境的插图 3、动态效果展示 利用上下滑动、左右滑动、拉伸放大、点击进入、退出等动效串联 3 至 4 个引导页 界面，并搭配符合产品意境的音乐，用户在浏览引导页时，会产生新奇、有趣的使用体 验，打破常规静态页面带来的单一、沉闷体验感受，从而增加对产品的关注度 4、视频展示 引导页除了静态界面、动效引导方式外，还可以采用视频播放的形式展示产品功能 和信息，例如：通过播放一段开场视频向用户传递产品的使用方式、功能，这类引导页 设计多用于拍照、记录、交友、发布类多媒体等应用产品 ⚫ 空白页 定义：空白页就是由于网络问题造成的页面或者是没有内容的页面，例如页面中显 示“没有信息”“列表为空”“错误”和“无网络”等内容的页面就属于空白页。在一 般情况下，这种页面都会通过文字信息给用户提示。好的空白页面会花费不少设计时间， 因为这种页面不仅是用于提示，还会引导用户进行实质性的操作，从而加强用户对产品 的黏性。需要注意的是空白页的设计一定要简洁明了。 分类：首次进入型和错误提示型 （1）首次进入型 在用户第一次打开应用的时候，App 会利用空白页的提示引导用户进行操作，指引 用户找到需要的内容 （2）错误提示型 错误提示型的空白页不仅在网页中很常见，而且在 App 中也经常出现，例如显示 “找不到页面”或者“网络中断”等。这种页面中一般会指引用户解决问题，例如点击 “刷新页面”按钮可以刷新页面等 12：APP 界面设计关于情绪版创建及如何推导视觉设计的步骤。（情绪版：通过界面 元素和交互方式引发用户在使用 APP 时产生的情绪体验，设计是以用户的情感需求为 出发点）（色彩，色调色彩选择，图标和图像，字体选择）筛选 3-4 组有画面感词语 明确情感定位：深入分析目标用户群体的情感需求，确定 APP 希望传达的主要情感。 收集情绪素材：从各种渠道收集与情感定位相符的图片、色彩、纹理等素材，形成情绪 版的初步素材库。 构建情绪版：利用收集到的素材，按照情感主题进行分类和布局，形成具有视觉冲击力 的情绪版。 提炼设计元素：从情绪版中提取出能够代表 APP 情感定位的设计元素，如色彩、图标、 图像和字体等。 推导视觉设计：基于提炼出的设计元素，开始绘制 APP 的界面草图，尝试不同的布局 和交互方式。不断迭代和优化界面设计，确保能够引发用户特定的情绪体验。 画面感的词语： 温馨舒适：柔和的色调、圆润的边角、温馨的家居背景。 科技未来：冷色调、金属质感、流线型设计。 活力四射：鲜艳的色彩、动感的图形、跳跃的动画效果。 简约时尚：黑白灰基础色、简洁的线条、时尚的元素。 复古怀旧：旧照片、复古纹理、复古色调。 梦幻浪漫：粉色系、梦幻的云朵、浪漫的花朵。 清新自然：绿色系、植物元素、自然的纹理。 神秘奇幻：深色调、神秘的符号、奇幻的场景。 热情奔放：红色系、热情的火焰、奔放的线条。 宁静致远：蓝色系、宁静的水面、远山的轮廓。 13：什么是原型图？ 原型图代表了产品或服务的初步设计或概念的可视化展示，旨在模拟最终产品的外观、 布局以及用户交互方式，但通常不包含完整的细节设计或功能实现。原型图的主要目的 是帮助设计师、开发人员、产品经理和其他利益相关者更好地理解和沟通产品的设计思 路，以及在产品开发早期阶段发现并解决潜在的问题。 可以直接回答：原型图是产品或服务设计的初步可视化模型，展示外观、布局及交互方 式，用于沟通、验证和优化设计。 14：简述产品从需求到线上的流程。（复习课本 12-13 页面内容）也可以百度完善答 案。 15：熟悉 PS 和 AI 两个软件的界面和一些常用的操作和快捷键 16：考试需要大家带上铅笔和橡皮擦有绘制原型图的考试！需要先使用铅笔去绘制确认 界面无误的情况下再使用墨笔描绘即可！一定看好问题的需求及问题括号内的解答要 求！