国开期末考试2492《网站界面(UI)设计》机考试题及答案_第1页
国开期末考试2492《网站界面(UI)设计》机考试题及答案_第2页
国开期末考试2492《网站界面(UI)设计》机考试题及答案_第3页
国开期末考试2492《网站界面(UI)设计》机考试题及答案_第4页
国开期末考试2492《网站界面(UI)设计》机考试题及答案_第5页
已阅读5页，还剩13页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

国开期末考试2492《网站界面(UI)设计》机考试题及答案一、单项选择题（每题2分，共20分）1.在Figma中，将组件实例恢复为普通图层的快捷键是A.Ctrl+Alt+B  B.Ctrl+Alt+K  C.Ctrl+Shift+G  D.Ctrl+Alt+Shift+K答案：B2.下列关于WCAG2.2AA级对比度的描述，正确的是A.大号文本与背景的对比度≥3:1  B.图标与背景的对比度≥4.5:1C.禁用状态文字对比度≥7:1  D.装饰性图形对比度≥2:1答案：B3.在iOSHumanInterfaceGuidelines中，推荐的最小可点击区域尺寸为A.30×30pt  B.44×44pt  C.48×48dp  D.56×56px答案：B4.使用8pt网格系统时，下列间距值最符合“节奏一致”原则的是A.5、10、15  B.6、12、18  C.8、16、24  D.7、14、21答案：C5.在响应式断点设计中，Bootstrap5的“md”断点区间是A.≥576px  B.≥768px  C.≥992px  D.≥1200px答案：B6.下列色彩模型中，最适合用于前端HSLA颜色函数的是A.Lab  B.LCH  C.HSL  D.XYZ答案：C7.在AdobeXD中，启用“语音原型”功能需要首先A.将画板命名为“Voice”  B.在插件面板安装“VoicePrototyping”C.切换到“Design”模式  D.在“Prototype”模式下添加语音触发答案：D8.关于无障碍焦点顺序，下列做法错误的是A.使用tabindex="0"将自定义元素纳入顺序  B.使用tabindex="-1"移除冗余焦点C.使用tabindex="1"优先聚焦广告横幅  D.使用CSSoutline:none时同步提供替代焦点样式答案：C9.在Web端实现“暗黑模式”切换，成本最低且可持久化的方案是A.通过localStorage写入主题变量  B.使用Cookie记录主题并后端渲染C.使用CSS媒体查询prefers-color-scheme  D.使用sessionStorage实时切换答案：A10.下列关于字体子集化的说法，正确的是A.子集化会显著增加字体文件体积  B.只能对TTF格式进行子集化C.可有效减少FOIT现象  D.会导致字体授权自动失效答案：C二、多项选择题（每题3分，共15分，多选少选均不得分）11.以下哪些属于Figma“自动布局”可设置的属性A.Padding  B.Itemspacing  C.Fillcontainer  D.Constraints  E.Layoutwrap答案：A、B、C、E12.关于移动端手势交互，下列符合“可达性”原则的有A.单手操作时将主要按钮置于屏幕底部右侧  B.长滑动手势≥0.6s触发可避免误触C.双击放大时最大放大倍率≤300%  D.横滑返回手势保留8px边缘阈值  E.使用3DTouch需同步提供长按替代答案：B、C、D、E13.在DesignToken体系中，可纳入“语义化命名”层级的有A.color.brand.primary  B.spacing.md  C.radius.sm  D.font.weight.bold  E.shadow.dropdown答案：A、D、E14.下列关于SVG图标优化的做法，正确的有A.使用<use>复用符号减少DOM节点  B.删除编辑器生成的注释与元数据C.将stroke统一转outline以减少渲染计算  D.使用currentColor实现主题色适配E.将图标转为Base64嵌入CSS减少请求答案：A、B、C、D15.在Web性能优化中，可减少CLS（CumulativeLayoutShift）的手段有A.给图片设置显式width/height属性  B.使用font-display:optionalC.为动态广告位预留固定高度  D.使用aspect-ratioCSS属性E.对第三方嵌入使用骨架屏占位答案：A、C、D、E三、判断题（每题1分，共10分，正确打“√”，错误打“×”）16.Figma的“变体”功能要求所有状态必须位于同一组件集内。√17.在CSS中，使用clamp()函数可同时实现流式排版与锁定极限值。√18.在iOS原生控件中，UISwitch的默认高度为28pt。×（31pt）19.使用“优先显示”策略加载字体可有效消除FOIT但会增加FOUT时长。√20.在Lottie动画中，不支持表达式与图层混合模式。√21.根据GoogleMaterial3，自定义形状可使用“圆角百分比”超过50%。√22.在Axure中，生成HTML后可直接修改rp文件实现热更新。×23.使用accent-color属性可一次性定制表单控件品牌色。√24.在Figma中，文本图层的“Resizing”设置为“Fixed”时，自动布局下不会撑高父级。√25.无障碍测试工具WAVE只能检测Web页面，无法扫描PDF。√四、填空题（每空2分，共20分）26.在CSSGrid中，使用________函数可创建自适应列，且最小宽度为240px，最大1fr，写法为repeat(auto-fit,minmax(240px,1fr))。答案：minmax27.在Figma插件API中，获取当前选中节点列表的属性名是________。答案：figma.currentPage.selection28.在iOS16之后，屏幕顶部系统状态栏高度为________pt（iPhone14Pro）。答案：5929.使用ChromeDevTools的________面板可模拟低带宽、高延迟网络。答案：Network30.在Sass中，使用________指令可将多个局部文件合并编译，且不会产生多余HTTP请求。答案：@import（或@use，答任一即可）31.在WebContentAccessibilityGuidelines中，键盘可操作原则对应的英文缩写是________。答案：WCAG2.12.1.1Keyboard32.在Figma中，将图层名以________结尾，可自动导出为PDF格式。答案：.pdf33.在React组件库开发中，使用________钩子可实现对DOM节点的引用，从而测量元素尺寸。答案：useRef34.在macOS设计规范里，________是系统级强调色，默认与系统设置保持一致。答案：controlAccentColor35.在CSS中，使用________属性可强制GPU加速，常用于解决动画抖动。答案：transform:translateZ(0)五、简答题（每题10分，共20分）36.简述“8pt网格”在Web与移动端落地时的三点差异，并给出对应解决方案。答案：（1）设备倍率差异：Web端需兼容1×、1.25×、1.5×缩放，而移动端以2×、3×为主。解决方案：使用rem+媒体查询动态根字号，确保8pt的倍数在任意倍率下仍映射为物理整数像素。（2）浏览器子像素渲染：Web端百分比布局可能产生0.5px偏差。解决方案：对关键分隔线使用scale(0.5)伪元素，或采用box-shadow模拟0.5px边框。（3）系统字体差异：Android厂商默认字体高度不同，导致行高偏离8pt网格。解决方案：定义全局line-height使用“无单位”数值，如1.5，配合padding补偿，使整体高度仍保持8的倍数。37.描述一次完整的“设计—开发”颜色同步流程，要求覆盖命名、交付、运行时切换三个环节，并指出易错点。答案：命名环节：在FigmaVariables建立语义化颜色，如color/primary/600，同步写入styleDictionary的json文件，确保层级与代码一致。交付环节：通过Figma插件“DesignTokens”导出JSON，利用styleDictionary转换为目标平台样式，如CSS自定义属性、iOSColorSet、AndroidXML。运行时切换：Web端使用data-theme属性切换，CSS内用:root与[data-theme="dark"]双作用域；移动端使用SwiftUI的ColorSet与Android的Nightqualifier。易错点：a.透明色值未转换为rgba()导致iOS解析失败；b.同名token在不同平台大小写差异，如primary/600与primary_600；c.未考虑系统高对比模式，导致切换后对比度不足；d.开发未同步更新旧硬编码色值，出现“双轨制”颜色。六、实操题（共15分）38.请根据下列需求，写出完整代码（含HTML、CSS、JavaScript），实现一个“响应式卡片组件”，要求：a.桌面端三列，平板端两列，手机端一列；b.卡片内部图片保持16:9比例，且支持暗黑模式；c.卡片标题超出两行显示省略号；d.点击卡片整栏可跳转，且键盘聚焦时有明显外框；e.使用原生CSS变量实现主题色切换，禁用JavaScript时也能展示默认浅色主题。答案：```html<!doctypehtml><htmllang="zh-CN"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>UI机考实操</title><style>:root{--bg:ffffff;--surface:f5f5f5;--text:212121;--primary:0b57d0;--radius:12px;--gap:16px;}@media(prefers-color-scheme:dark){:root{--bg:121212;--surface:1e1e1e;--text:e0e0e0;--primary:8ab4f8;}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SegoeUI",Roboto,"HelveticaNeue",Arial,"NotoSans",sans-serif;background:var(--bg);color:var(--text);padding:var(--gap);}.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}.card{background:var(--surface);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform.2s,box-shadow.2s;outline:2pxsolidtransparent;}.card:focus-visible{outline:2pxsolidvar(--primary);outline-offset:2px;}.card:hover{transform:translateY(-4px);box-shadow:06px16pxrgba(0,0,0,.14);}.media{position:relative;width:100%;padding-bottom:56.25%;}.mediaimg{position:absolute;width:100%;height:100%;object-fit:cover;}.content{padding:var(--gap);}.title{font-size:1.125rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}</style></head><body><divclass="grid"><aclass="card"href="/1"tabindex="0"><divclass="media"><imgsrc="https://picsum.photos/640/360?random=1"alt=""></div><divclass="content"><divclass="title">国开大学网站界面设计课程期末机考实战卡片示例标题</div></div></a><aclass="card"href="/2"tabindex="0"><divclass="media"><imgsrc="https://picsum.photos/640/360?random=2"alt=""></div><divclass="content"><divclass="title">第二篇卡片：响应式布局与暗黑模式无缝切换体验</div></div></a><aclass="card"href="/3"tabindex="0"><divclass="media"><imgsrc="https://picsum.photos/640/360?random=3"alt=""></div><divclass="content"><divclass="title">第三篇卡片：键盘可达性与无障碍焦点管理最佳实践</div></div></a></div><script>//可选：按钮手动切换主题constbtn=document.createElement('button');btn.textContent='切换主题';btn.style.position='fixed';btn.style.bottom='20px';btn.style.right='20px';document.body.appendChild(btn);btn.onclick=()=>{consthtml=document.documentElement;constmode=html.getAttribute('data-theme')==='dark'?'light':'dark';html.setAttribute('data-theme',mode);localStorage.setItem('theme',mode);};//读取持久化主题constsaved=localStorage.getItem('theme');if(saved){document.documentElement.setAttribute('data-theme',saved);}</script></body></html>```七、综合设计题（共20分）39.背景：某在线阅读平台计划推出“沉浸式阅读器”，需求如下：1.支持字号无极调节（12px–32px），行高跟随1.6–2.0动态变化；2.支持四种背景主题：白、米黄、深灰、黑；3.支持“专注模式”，隐藏除正文外所有元素，包括导航与广告；4.支持“语音朗读”，点击段落即开始朗读，当前句高亮，可暂停、继续；5.所有交互需满足WCAG2.2AA级。任务：（1）给出信息架构与交互流程图文字描述（4分）；（2）列出关键组件清单，并指出可复用token（4分）；（3）给出“专注模式”切换时的无障碍焦点管理策略（4分）；（4）写出语音朗读核心伪代码，要求使用WebSpeechAPI，并处理边界情况（4分）；（5）说明如何验证AA级对比度，并给出自动化测试脚本片段（4分）。答案：（1）信息架构：顶部工具栏（字号滑块、主题切换、专注开关、朗读开关）→文章区（标题、作者、发布时间、正文、评论区）。交互流程：用户进入页面→默认加载上次主题与字号→点击段落触发朗读→高亮当前句→工具栏可全局暂停→专注模式隐藏顶部与侧边→ESC退出专注模式。（2）关键组件：TopBar、Paragraph、Sentence、ThemeSwitch、FontSlider、TTSController。Token：color.bg.primary、color.text.primary、font.size.base、line.height.dynamic、focus.ring.color。（3）焦点管理：专注模式开启时，将tabindex="-1"赋给所有非正文元素，使用inert属性屏蔽辅助树；正文容器设置tabindex="0"并focus()；退出时还原tabindex，并恢复原先焦点元素。（4）伪代码：```jsconstsynth=window.speechSynthesis;letutter=null,currentSentence=0;functionspeakSentence(text){if(utter)synth.cancel();utter=newSpeechSynthesisUtterance(text);utter.lang='zh-

人人文库> 全部分类> 教育资料 > 考试试卷

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论