🎯题库

{"bank":[{"analysis":"四种设计原则：**对齐**（元素/网格对齐，建立秩序）、**对比**（大小/颜色/粗细，建立层次）、**重复**（元素/风格重复，形成统一）、**亲密性**（相关靠近、无关分开）。","answer":"A","chapter":"UI 设计·设计原则","difficulty":1,"explain":{"B":"居中只是对齐的一种，放大只是对比的一种，复制也不等于重复。","C":"布局、配色、字体、图标是设计要素，不是原则。","D":"需求、线框、视觉、输出是设计流程。"},"id":"sj-01-001","options":["对齐、对比、重复、亲密性","居中、放大、复制、留白","布局、配色、字体、图标","需求、线框、视觉、输出"],"source":"chapter","stem":"UI 设计的基础原则归纳为 4 种，它们是？","subject":"视觉设计","type":"single"},{"analysis":"对齐分**元素对齐**（左/右/上/下/居中）与**网格对齐**（网格/列/行），目标是整洁有序。**居中只是对齐方式之一**，并非对齐的全部含义。","answer":"B","chapter":"UI 设计·设计原则","difficulty":2,"explain":{"A":"把对齐等同于居中是典型误区。","C":"图片、按钮、图标同样需要对齐才能形成秩序。","D":"间距一致属于节奏与亲密性的范畴，不是对齐的定义。"},"id":"sj-01-002","options":["对齐就是让所有元素都水平居中","对齐包括元素左/右/上/下/居中对齐和网格对齐，目的是建立秩序","只有文字需要对齐，图片和按钮不需要","对齐要求页面上所有元素的间距完全相同"],"source":"chapter","stem":"关于「对齐」原则，下列说法正确的是？","subject":"视觉设计","type":"single"},{"analysis":"**对比**从**大小、颜色、粗细**三个维度建立层次与强调。标题又大又粗、正文小而常规，就是对比的典型应用。","answer":"B","chapter":"UI 设计·设计原则","difficulty":2,"explain":{"A":"对齐解决的是元素位置的秩序问题。","C":"重复解决的是设计元素与风格的统一问题。","D":"亲密性解决的是信息分组与关联问题。"},"id":"sj-01-003","options":["对齐","对比","重复","亲密性"],"source":"chapter","stem":"通过标题与正文的字号、字重差异建立信息层次，体现的设计原则是？","subject":"视觉设计","type":"single"},{"analysis":"重复分**元素重复**（图标/按钮/颜色）与**风格重复**（字体/圆角/阴影），目的是统一与品牌一致。它和「复制」不是一回事。","answer":"B","chapter":"UI 设计·设计原则","difficulty":2,"explain":{"A":"把重复理解为复制是典型误区。","C":"重复强调一致的设计语言，并不要求所有元素尺寸相同。","D":"重复恰恰是品牌一致性的基础。"},"id":"sj-01-004","options":["重复就是把同一张图片复制多份","重复是让图标、按钮、颜色以及字体、圆角、阴影等保持一致，形成统一感与品牌感","重复要求页面上所有元素大小完全相同","重复与品牌一致性无关"],"source":"chapter","stem":"关于「重复」原则，下列理解正确的是？","subject":"视觉设计","type":"single"},{"analysis":"**亲密性**即**相关元素靠近、无关元素分开**，用间距表达分组与关联，让页面信息层次更清晰。","answer":"C","chapter":"UI 设计·设计原则","difficulty":2,"explain":{"A":"对齐解决位置秩序，不解决分组关系。","B":"对比解决层次与强调，靠大小/颜色/粗细实现。","D":"重复解决统一性，靠元素与风格复用实现。"},"id":"sj-01-005","options":["对齐","对比","亲密性","重复"],"source":"chapter","stem":"把标题与其正文的间距调小、与无关模块的间距拉大，体现的设计原则是？","subject":"视觉设计","type":"single"},{"analysis":"设计四步：**需求**（目标/用户/场景）→ **线框**（布局/结构）→ **视觉**（颜色/字体/图标）→ **输出**（切图/标注），顺序不能乱。","answer":"B","chapter":"UI 设计·设计原则","difficulty":2,"explain":{"A":"需求未明确就画线框，方向容易跑偏。","C":"结构未定就做视觉，必然反复返工。","D":"顺序完全颠倒，无需求无结构直接上视觉。"},"id":"sj-01-006","options":["线框 → 需求 → 视觉 → 输出","需求 → 线框 → 视觉 → 输出","需求 → 视觉 → 线框 → 输出","视觉 → 需求 → 线框 → 输出"],"source":"chapter","stem":"设计一个页面的正确流程是？","subject":"视觉设计","type":"single"},{"analysis":"交互三原则：**反馈**（操作有响应）、**一致性**（风格统一）、**可逆**（操作可撤销、可恢复）。","answer":"A","chapter":"UI 设计·交互原则","difficulty":1,"explain":{"B":"对齐、对比、重复属于视觉设计原则。","C":"转场、字幕、动效属于短视频特效类型。","D":"需求、线框、原型属于设计/交互流程。"},"id":"jh-01-001","options":["反馈、一致性、可逆","对齐、对比、重复","转场、字幕、动效","需求、线框、原型"],"source":"chapter","stem":"交互设计的三个基本原则是？","subject":"交互设计","type":"single"},{"analysis":"反馈分三种：**视觉反馈**（颜色/大小/动画）、**触觉反馈**（震动/声音）、**语言反馈**（提示/警告/错误）。震动属于触觉反馈。","answer":"B","chapter":"UI 设计·交互原则","difficulty":2,"explain":{"A":"视觉反馈通过颜色、大小、动画呈现。","C":"语言反馈通过提示、警告、错误文案呈现。","D":"平台反馈不属于教材归纳的反馈类型。"},"id":"jh-01-002","options":["视觉反馈","触觉反馈","语言反馈","平台反馈"],"source":"chapter","stem":"点击按钮后手机轻微震动一下，属于哪种反馈？","subject":"交互设计","type":"single"},{"analysis":"**语言反馈**用提示、警告、错误文案告知操作结果；实际产品中通常与视觉反馈配合使用，而不是只靠文字。","answer":"C","chapter":"UI 设计·交互原则","difficulty":2,"explain":{"A":"视觉反馈靠颜色、大小、动画的变化来传达状态。","B":"触觉反馈靠震动或声音。","D":"一致性是设计原则，不是反馈类型。"},"id":"jh-01-003","options":["视觉反馈","触觉反馈","语言反馈","一致性反馈"],"source":"chapter","stem":"提交失败时弹出「密码错误，请重新输入」的提示，属于哪种反馈？","subject":"交互设计","type":"single"},{"analysis":"一致性分三种：**视觉一致性**（颜色/字体/图标）、**交互一致性**（按钮/表单/导航）、**平台一致性**（iOS/Android/Web 各遵循平台规范并保持品牌统一）。","answer":"C","chapter":"UI 设计·交互原则","difficulty":2,"explain":{"A":"视觉一致性强调颜色、字体、图标统一。","B":"交互一致性强调按钮、表单、导航的操作方式统一。","D":"可逆原则指操作可撤销、可恢复。"},"id":"jh-01-004","options":["视觉一致性","交互一致性","平台一致性","可逆原则"],"source":"chapter","stem":"同一产品在 iOS 与 Android 上分别遵循各自平台规范，同时保持品牌风格统一，这体现的是？","subject":"交互设计","type":"single"},{"analysis":"**可逆**原则包含**撤销**（Ctrl+Z/返回）、**确认**（弹窗/二次确认）、**恢复**（回收站/草稿），用于降低误操作的代价，是容错设计的核心。","answer":"C","chapter":"UI 设计·交互原则","difficulty":2,"explain":{"A":"反馈强调操作有响应。","B":"一致性强调风格与操作方式统一。","D":"亲密性是视觉设计原则，与交互可逆无关。"},"id":"jh-01-005","options":["反馈","一致性","可逆（容错）","亲密性"],"source":"chapter","stem":"删除重要数据前弹出二次确认，并提供回收站恢复入口，体现的交互原则是？","subject":"交互设计","type":"single"},{"analysis":"交互流程四步：**需求**（目标/用户/场景）→ **线框**（低保真布局结构）→ **原型**（中保真交互流程）→ **测试**（高保真用户测试与反馈）。","answer":"A","chapter":"UI 设计·交互原则","difficulty":2,"explain":{"B":"需求未明确时，线框缺乏依据。","C":"线框是原型的输入，二者顺序不能颠倒。","D":"流程完全颠倒，无需求无结构直接做原型。"},"id":"jh-01-006","options":["需求 → 线框 → 原型 → 测试","线框 → 需求 → 原型 → 测试","需求 → 原型 → 线框 → 测试","原型 → 需求 → 线框 → 测试"],"source":"chapter","stem":"从需求到验证，交互设计（原型）流程的正确顺序是？","subject":"交互设计","type":"single"},{"analysis":"**类选择器 .class** 面向一组同类元素，可复用；**ID 选择器 #id** 面向页面中唯一元素；**属性选择器 [attr=value]** 针对特定属性。","answer":"A","chapter":"UI 设计·CSS 基础","difficulty":1,"explain":{"B":"ID 在页面中应保持唯一，不适合批量复用。","C":"通配符会命中所有元素，开销大且难以维护。","D":"标签选择器按元素名命中，粒度太粗，影响面过大。"},"id":"qd-01-001","options":["类选择器 .class","ID 选择器 #id","通配符选择器 *","标签选择器 div"],"source":"chapter","stem":"要为一组同类元素统一设置样式，应使用的 CSS 选择器是？","subject":"前端基础","type":"single"},{"analysis":"优先级口诀：**ID（#）\u003e 类（.）\u003e 标签（div/p）\u003e 通配符（*）**，ID 最强、通配最弱。","answer":"B","chapter":"UI 设计·CSS 基础","difficulty":2,"explain":{"A":"把类排在 ID 之前，顺序错误。","C":"把标签排在最前，与规则完全相反。","D":"优先级完全倒置。"},"id":"qd-01-002","options":["类 \u003e ID \u003e 标签 \u003e 通配符","ID \u003e 类 \u003e 标签 \u003e 通配符","标签 \u003e 类 \u003e ID \u003e 通配符","通配符 \u003e 标签 \u003e 类 \u003e ID"],"source":"chapter","stem":"CSS 选择器的优先级从高到低排列，正确的是？","subject":"前端基础","type":"single"},{"analysis":"盒模型从内到外为 **content（内容）→ padding（内边距）→ border（边框）→ margin（外边距）**，其中 margin 位于盒子外部。","answer":"B","chapter":"UI 设计·CSS 基础","difficulty":2,"explain":{"A":"顺序完全颠倒。","C":"把 border 与 padding 的位置对调了。","D":"顺序混乱，padding 在 content 内侧的说法错误。"},"id":"qd-01-003","options":["margin → border → padding → content","content → padding → border → margin","content → border → padding → margin","padding → content → margin → border"],"source":"chapter","stem":"CSS 盒模型由内到外的四层依次是？","subject":"前端基础","type":"single"},{"analysis":"**border-box** 下 width 含 **content + padding + border**，布局更直观，是推荐做法；默认的 **content-box** 只含 content，容易算错尺寸。","answer":"B","chapter":"UI 设计·CSS 基础","difficulty":2,"explain":{"A":"只含 content 是默认值 content-box 的行为。","C":"margin 始终在盒子外部，不计入 width。","D":"margin 不计入宽高，四层全含的说法错误。"},"id":"qd-01-004","options":["只包含 content","包含 content + padding + border","包含 content + margin","包含全部四层"],"source":"chapter","stem":"设置 box-sizing: border-box 后，元素的 width 包含？","subject":"前端基础","type":"single"},{"analysis":"display: flex 开启弹性布局：**justify-content 控制主轴对齐，align-items 控制交叉轴对齐**，flex-direction 决定主轴方向。","answer":"B","chapter":"UI 设计·CSS 基础","difficulty":2,"explain":{"A":"justify-content 控制的是主轴（默认水平方向）对齐。","C":"flex-direction 定义主轴方向，本身不负责对齐。","D":"grid-template-columns 属于 Grid 布局的列定义。"},"id":"qd-01-005","options":["justify-content","align-items","flex-direction","grid-template-columns"],"source":"chapter","stem":"Flex 布局中，控制交叉轴（默认垂直方向）对齐的属性是？","subject":"前端基础","type":"single"},{"analysis":"响应式布局用**媒体查询按断点**调整 Grid 列定义（如 3 列→2 列→1 列），一份结构适配多端。Grid 擅长多行多列，Flex 擅长一维排列。","answer":"A","chapter":"UI 设计·CSS 基础","difficulty":2,"explain":{"B":"复制多套 HTML 维护成本极高，不是响应式做法。","C":"写死宽度在窄屏会出现横向滚动。","D":"依赖 !important 覆盖会破坏优先级体系，后期无法维护。"},"id":"qd-01-006","options":["用媒体查询（@media）按断点切换 Grid 的 grid-template-columns","为每种屏幕宽度单独复制一套 HTML","把容器宽度写死为 1440px","用 ID 选择器写两套冲突样式，再靠 !important 覆盖"],"source":"chapter","stem":"希望同一份 HTML 在不同屏幕宽度下呈现不同列数的布局，最直接的做法是？","subject":"前端基础","type":"single"},{"analysis":"格式口诀：**要透明选 PNG，要小选 JPEG，要无限缩放选 SVG**。照片类大图用 JPEG（质量 80% 左右）体积更小。","answer":"A","chapter":"UI 设计·输出规范","difficulty":2,"explain":{"B":"PNG 无损、体积大，适合图标、Logo 与透明元素。","C":"SVG 适合矢量图标，不适合照片。","D":"PSD 是设计源文件，不能直接上线使用。"},"id":"cs-01-001","options":["JPEG","PNG","SVG","PSD"],"source":"chapter","stem":"一张无需透明背景的照片类大图，为控制体积应优先选择？","subject":"输出规范","type":"single"},{"analysis":"图标常用尺寸 **16/24/32/48px，24px 为主流**；圆角常用 **0/4/8px，8px 为主流**；状态色为**成功绿、警告黄、错误红**。","answer":"A","chapter":"UI 设计·输出规范","difficulty":2,"explain":{"B":"图标尺寸按 16/24/32/48px 档位选取，并非越大越好。","C":"圆角有 0/4/8px 三档，8px 是主流做法。","D":"状态色需要区分成功、警告、错误，不能只用红色。"},"id":"cs-01-002","options":["图标以 24px 为主流，圆角以 8px 为主流，状态色为成功绿/警告黄/错误红","图标必须使用 100px 以上尺寸","圆角一律为 0，不允许出现圆角","状态色只用红色，其他颜色不使用"],"source":"chapter","stem":"关于 App 图标规范，下列典型值正确的是？","subject":"输出规范","type":"single"},{"analysis":"命名规范为**前缀标类型**（ic-/bg-/btn-）、**下划线分层**（模块_子模块_元素）、**后缀标状态**（_normal/_pressed/_disabled）。btn-submit_pressed.png 类型、层级、状态齐全。","answer":"A","chapter":"UI 设计·输出规范","difficulty":2,"explain":{"B":"icon.png 缺少模块信息与状态信息。","C":"icon2.png 用数字区分，含义不明，无法判断用途。","D":"未命名-1.png 既无类型也无状态，开发无法使用。"},"id":"cs-01-003","options":["btn-submit_pressed.png","icon.png","icon2.png","未命名-1.png"],"source":"chapter","stem":"下列切图命名最符合交付规范的是？","subject":"输出规范","type":"single"},{"analysis":"App 切图按 **@1x/@2x/@3x** 输出，iPhone 通常需要 **@2x 与 @3x**；**只切 @1x 在高清屏上会发虚**。","answer":"B","chapter":"UI 设计·输出规范","difficulty":2,"explain":{"A":"只切 @1x 在 iPhone 高清屏上会明显模糊。","C":"不同机型与场景需要不同倍率，不能只给 @3x。","D":"不按倍率切图会导致端上拉伸失真。"},"id":"cs-01-004","options":["只提供 @1x","提供 @2x 与 @3x","只提供 @3x，不需要其他倍率","不需要按倍率切图"],"source":"chapter","stem":"为 iPhone 高清屏交付切图，通常需要提供的倍率是？","subject":"输出规范","type":"single"},{"analysis":"小程序以 **750rpx** 为标准设计宽度，设计稿直接按 750 宽绘制，换算关系为 **rpx = px × 750 / 屏宽**，不要按 375 画再翻倍。","answer":"B","chapter":"UI 设计·输出规范","difficulty":2,"explain":{"A":"375px 是 iPhone 逻辑宽度量级，不是小程序设计稿标准。","C":"1080px 是视频/图片尺寸概念，与 rpx 无关。","D":"1920px 是 PC 端 Web 设计宽度量级。"},"id":"cs-01-005","options":["375px","750px（750rpx）","1080px","1920px"],"source":"chapter","stem":"微信小程序设计稿通常按多宽出图？","subject":"输出规范","type":"single"},{"analysis":"**SVG 为矢量格式**，可无限缩放不变形，适合图标、动画与 Logo；PNG 适合需要透明的位图场景，但高倍图体积大；JPEG 有损且不支持透明。","answer":"A","chapter":"UI 设计·输出规范","difficulty":2,"explain":{"B":"高倍 PNG 体积大且放大会糊，图标应优先 SVG。","C":"SVG 在 Web 与 App 中均被广泛使用。","D":"JPEG 不支持透明通道，有损压缩还会让锐利边缘产生杂色。"},"id":"cs-01-006","options":["图标优先用 SVG，可无限缩放且体积小；PNG 高倍图体积大、放大会糊","所有图标都应切成 PNG @3x","SVG 只能用于 App，不能用于 Web","JPEG 最适合带透明通道的图标"],"source":"chapter","stem":"关于图标与 Logo 的切图格式，下列说法正确的是？","subject":"输出规范","type":"single"}],"cert":"uisheji","chapters":[{"name":"UI 设计·CSS 基础","title":"第 1 章 · CSS：选择器、盒模型、布局","url":"/uisheji/books/qianduan/qd-01-css/"},{"name":"UI 设计·交互原则","title":"第 1 章 · 交互原则：反馈、一致性、可逆","url":"/uisheji/books/jiaohu/jh-01-yuanze/"},{"name":"UI 设计·设计原则","title":"第 1 章 · 设计原则：对齐、对比、重复、亲密性","url":"/uisheji/books/shijue/sj-01-yuanze/"},{"name":"UI 设计·输出规范","title":"第 1 章 · 输出规范：格式、命名、切图","url":"/uisheji/books/chushu/cs-01-guifan/"}],"practiceUrl":"/uisheji/practice/"}