网站界面(UI)设计形考作业4(实训7)

网站界面(UI)设计形考作业4(实训7)一、填空题（共5题，每空1分，总计10分）1.响应式网站UI设计中，W3C推荐的移动端优先断点体系里，小屏移动设备的最大宽度阈值为____px，中屏平板设备的宽度区间为768px-____px，大屏桌面设备的最小宽度阈值为1200px。2.电商网站首页UI设计中，首屏Banner的核心信息展示区域需控制在首屏高度的____%以内，确保用户无需滚动即可获取核心营销信息，桌面端首屏高度通常按____px（不含浏览器地址栏、书签栏）计算。3.网站UI设计的12列栅格系统中，以1440px宽度的桌面端设计稿为例，内容区域总宽度为1200px，列间距（Gutter）为24px时，单格列宽为____px，页面左右外边距各为____px。4.网站UI无障碍设计规范中，符合WCAG2.1AA级标准的正文文本对比度需达到____:1以上，大字号文本（18pt及以上或14pt加粗及以上）的对比度需达到3:1以上。5.移动端网站UI设计中，可点击交互元素的最小热区尺寸不小于____px×____px，符合拇指操作的人体工学要求。二、单项选择题（共10题，每题1分，总计10分）1.下列关于响应式网站UI设计的描述，错误的是（）A.采用流式布局适配不同设备屏幕B.同一页面需为不同设备设计多套独立视觉风格C.可通过CSS媒体查询实现断点适配D.移动端优先是当前响应式设计的主流思路2.电商网站首页的核心转化入口通常不包含以下哪个模块（）A.首屏Banner活动入口B.品类导航入口C.用户隐私政策入口D.爆款商品卡片3.网站UI设计中，关于色彩应用规范的说法正确的是（）A.品牌色可大面积用于正文文本背景B.辅助色占比需控制在页面整体色彩的60%以上C.功能色需统一对应固定交互状态（如错误态用红色）D.中性色仅可用于页面背景，不可用于文本4.下列哪种字体不适合作为网站中文正文字体（）A.思源黑体B.苹方C.站酷文艺体D.微软雅黑5.网站UI低保真原型设计的核心作用是（）A.展示最终视觉效果B.梳理页面信息架构与交互逻辑C.直接用于前端开发D.验证品牌色彩匹配度6.响应式设计中，图片自适应的常用实现方式不包含（）A.使用max-width:100%属性控制图片最大宽度B.为不同断点提供不同分辨率的图片资源C.固定图片像素尺寸，通过缩放适配屏幕D.采用WebP等高性能图片格式减少加载体积7.电商网站商品卡片UI设计的必备核心信息不包含（）A.商品主图B.商品价格C.商品详细规格参数D.商品名称8.网站底部导航（页脚）通常不包含以下哪项内容（）A.网站备案信息B.客服联系方式C.新品推荐列表D.友情链接9.下列关于网站UI设计栅格系统的说法，错误的是（）A.栅格系统可提升页面布局的一致性与规范性B.12列栅格无法适配2列、3列、4列等多种布局C.移动端栅格通常采用4列或6列体系D.栅格的列间距可根据设备尺寸动态调整10.网站UI设计切图标注阶段，需交付给前端开发的核心文件不包含（）A.不同倍率的切图资源B.元素间距、尺寸标注C.色彩、字体规范说明D.用户研究访谈原始记录三、判断题（共5题，每题2分，总计10分）1.移动端网站的导航菜单通常采用汉堡菜单形式，以节省首屏展示空间，突出核心内容。（）2.电商网站的主操作按钮（如立即购买、加入购物车）应采用低饱和度色彩，避免干扰用户视觉注意力。（）3.响应式网站设计只需适配手机和桌面端两种设备即可，无需覆盖平板设备尺寸。（）4.网站UI设计中的留白（负空间）可有效提升内容层级感，降低用户视觉疲劳，提升阅读效率。（）5.网站UI设计完成后，无需进行可用性测试即可直接上线，后续根据用户反馈再调整。（）四、理论考核参考答案1.填空题：1.768、1199；2.80、900；3.78、120；4.4.5；5.48、482.单项选择题：1.B2.C3.C4.C5.B6.C7.C8.C9.B10.D3.判断题：1.√2.×3.×4.√5.×五、实操实训题（总计70分，对应课程实训7：响应式电商官网首页UI全流程设计）（一）实训背景本次实训为网站UI设计综合实训，要求以中端天然美妆品牌“素颜集”为设计对象，完成品牌官网首页的响应式UI全流程设计，覆盖移动端、平板端、桌面端三类核心设备。品牌定位为“天然成分、高性价比、适合亚洲肤质的大众美妆品牌”，目标用户为18-35岁一二线城市女性，核心需求为了解品牌新品、购买商品、查询售后信息。实训需完整覆盖需求分析、原型设计、视觉设计、响应式适配、切图交付全链路，符合行业通用设计规范与交付标准。（二）实训环境1.设计工具：Figma/AdobeXD/Sketch（任选其一，推荐Figma）2.辅助工具：AdobePhotoshop（用于图片素材处理）、浏览器（用于预览适配效果）3.素材要求：所有图片素材需使用免费商用无版权资源（如Unsplash、Pexels、Pixabay平台的美妆类素材），不得使用侵权内容。（三）实训内容与操作步骤本次实训共分为5个核心环节，各环节需按顺序完成，前一环节通过合理性验证后方可进入下一环节。1.需求分析与信息架构梳理（10分）核心要求：明确设计目标与用户需求，梳理页面信息层级，输出完整的首页信息架构图。具体任务：（1）细化目标用户画像：需包含人口统计学特征（年龄、地域、职业、收入）、行为习惯（常用设备、购物时段、决策因素）、核心需求（访问官网的3个核心目的）三个维度，确保设计以用户为中心。其中核心需求需明确优先级：第一优先级为商品浏览与购买，第二优先级为新品与活动信息获取，第三优先级为售后与会员服务查询，信息架构需围绕优先级排序模块。（2）梳理首页模块优先级：根据用户核心需求排序模块，核心转化模块需放置在黄金视线区（页面顶部20%区域），次要模块依次向后排列。标准模块顺序为：顶部导航栏→首屏轮播Banner→品类入口区→爆款热销区→品牌理念区→新品上市区→用户评价区→会员招募区→页脚，共9个核心模块，每个模块的功能需与用户需求一一对应。（3）输出信息架构图：明确每个模块的子元素与功能，比如顶部导航栏包含Logo、品类导航（护肤、彩妆、香氛、周边）、搜索框、购物车、用户中心5个元素，各元素的跳转逻辑与交互触发方式需标注清晰，避免逻辑遗漏。评分依据：用户画像维度完整、符合品牌定位，信息层级清晰、模块优先级合理，架构图逻辑严谨、无遗漏。2.低保真原型设计（15分）核心要求：基于信息架构完成三类设备的低保真线框原型，验证布局与交互逻辑的合理性，无需添加视觉装饰元素，核心是快速迭代信息架构。具体任务：（1）尺寸规范：移动端设计稿宽度为375px（iPhone14标准尺寸），平板端为768px（iPadmini竖屏尺寸），桌面端为1440px（主流桌面设计尺寸），高度随内容自适应，原型中需标注设备尺寸与断点阈值。（2）栅格规范：移动端采用4列栅格，列间距16px，左右边距16px；平板端采用8列栅格，列间距20px，左右边距24px；桌面端采用12列栅格，列间距24px，左右边距120px，所有元素需对齐栅格线，确保布局规范性，避免出现元素错位或比例失调问题。（3）内容要求：采用黑白灰三色设计，仅通过不同灰度的色块区分内容层级，用占位符表示图片与文本，重点展示模块比例、排列顺序与交互逻辑。比如移动端汉堡菜单点击后从左侧滑出，覆盖80%屏幕宽度，菜单底部设置客服与退出按钮；轮播Banner自动轮播间隔为5秒，底部设置对应数量的轮播指示器，支持手动滑动切换；商品卡片点击可跳转至商品详情页，添加购物车按钮固定在卡片底部。（4）交互逻辑：明确所有可点击元素的交互反馈，比如按钮点击态、菜单展开方式、表单输入状态、页面滚动时导航栏的变化（如吸顶效果）等，确保逻辑自洽，无交互死区。评分依据：三个尺寸原型完整，栅格规范，布局合理，交互逻辑清晰，无明显层级错误。3.高保真视觉设计（25分）核心要求：基于低保真原型完成桌面端高保真视觉设计，制定统一的品牌视觉规范，确保页面视觉风格符合品牌定位，层级清晰，具备良好的转化引导性。具体任务：（1）制定视觉规范：色彩规范：遵循60-30-10色彩原则，中性色（白色#FFFFFF、浅灰#F5F5F5、中灰#999999、深灰#333333、黑色#1A1A1A）占比70%，用于背景、正文文本、边框、次级装饰；辅助色（浅粉#F8E1E7、淡绿#E8F5E9）占比20%，用于次级背景、标签底色、装饰元素；品牌主色（豆沙粉#D46A89）占比10%，用于核心按钮、重点标签、价格等核心信息，引导用户视觉焦点，避免大面积使用主色造成视觉疲劳。字体规范：中文采用思源黑体，英文采用Montserrat，确保跨平台显示一致性；字体层级清晰，桌面端一级标题32px（Bold，行高1.3倍）、二级标题24px（Bold，行高1.3倍）、正文16px（Regular，行高1.6倍）、辅助文本14px（Regular，行高1.5倍）；移动端一级标题20px（Bold，行高1.2倍）、正文14px（Regular，行高1.5倍），所有文本对比度符合WCAG2.1AA级标准，确保可读性。组件规范：主按钮（立即购买、加入购物车）为品牌色填充，圆角8px，悬停状态透明度90%，点击状态透明度80%，最小高度48px，左右内边距24px；次按钮（查看更多）为品牌色描边、透明背景，圆角8px，悬停状态填充浅粉辅助色；商品卡片圆角12px，悬停状态添加04px12pxrgba(0,0,0,0.1)的阴影效果，提升交互反馈；输入框边框为浅灰色，聚焦状态变为品牌色，边框宽度2px。（2）页面内容填充：所有模块内容需符合美妆品牌定位，商品信息需真实合理（比如护肤品价格区间为89-299元，彩妆为59-199元），图片素材高清无水印，与内容匹配度高。首屏Banner需包含活动主题、副标题、主按钮三个核心元素，核心信息控制在首屏80%高度以内，确保1080P分辨率设备无需滚动即可看到完整核心信息。商品卡片需包含商品主图、名称、价格、加入购物车按钮，促销标签采用红色圆角矩形放置在主图左上角，尺寸为40px×18px，字号12px白色文本。（3）视觉层级：通过色彩对比、字号大小、留白多少区分内容层级，重要信息（如价格、活动标签）采用高对比度色彩与更大字号，引导用户视觉流符合“浏览-兴趣-转化”的路径。比如爆款热销区的商品卡片按销量排序，TOP1商品添加金色皇冠标识，突出优先级；品牌理念区的核心slogan采用更大字号与品牌色，强化品牌记忆点。评分依据：视觉规范统一，色彩搭配协调符合品牌定位，层级清晰，细节完整，转化引导性强。4.响应式适配设计（12分）核心要求：基于桌面端高保真设计，完成平板端与移动端的响应式适配，遵循内容优先、流式布局原则，确保所有内容在对应尺寸下完整展示，无布局错乱，核心内容优先级不降低。具体任务：（1）断点规范：严格遵循W3C响应式断点标准，移动端<768px，平板端768px-1199px，桌面端≥1200px，适配不同设备的屏幕尺寸，媒体查询需采用移动端优先的写法。（2）适配规则：导航栏：桌面端显示完整品类导航、搜索框、购物车、用户中心；平板端隐藏2个次级品类，保留护肤、彩妆、香氛3个核心品类，其余放入“更多”下拉菜单；移动端隐藏所有文本导航，仅保留Logo、搜索图标、购物车图标、汉堡菜单图标，点击汉堡菜单从左侧滑出全品类导航，菜单顶部设置用户头像与会员入口。品类入口区：桌面端4列布局，平板端4列布局，移动端2列布局，图标与文本居中对齐，图标尺寸随屏幕宽度等比缩小，最小尺寸不小于48px×48px。爆款热销区：桌面端3列布局（6个商品分2行），平板端2列布局（6个商品分3行），移动端2列布局，商品卡片间距随屏幕宽度调整，最小间距不小于12px。品牌理念区：桌面端图文左右并排布局（左图右文，比例1:1），平板端图文并排比例调整为1:1，文本字号适当缩小；移动端改为图文上下排列（上图下文），文本居中对齐，减少单行文本字数，提升可读性。页脚：桌面端显示完整的客服信息、备案信息、友情链接、社交媒体图标；平板端隐藏友情链接，保留客服、备案与社交媒体；移动端仅保留客服电话、备案信息、微信二维码，隐藏其余次要内容，节省页面空间。（3）交互热区：所有可点击元素的热区尺寸不小于48px×48px，图标类元素需扩大点击热区（即视觉尺寸小于48px时，热区向外扩展至48px），符合移动端拇指操作要求，避免误触。评分依据：两个适配尺寸完整，适配规则合理，布局无错乱，热区符合规范，内容优先级清晰。5.切图标注与交付物输出（8分）核心要求：按行业标准完成切图与标注，输出完整的交付文件，确保前端开发可直接使用，无需反复沟通确认参数。具体任务：（1）切图要求：所有可复用组件（按钮、图标、商品卡片背景、装饰元素）需输出1x、2x、3x三种倍率的切图，格式为PNG（支持透明背景）与WebP（压缩格式）两种，命名规范为“模块_功能_状态.格式”（如“nav_search_default.png”“btn_primary_hover.webp”），按模块与倍率分类存放，避免文件混乱。（2）标注要求：使用设计工具自带的标注插件（如Figma的Measure插件）完成标注，包含元素的宽高、内外边距、色彩值（十六进制格式）、字体族、字号、字重、行高，所有标注对齐元素边缘，避免重叠，清晰易读。复杂组件需单独标注默认、悬停、点击三种状态的样式差异。（3）设计说明文档：输出不少于300字的设计说明，包含项目背景、设计思路、视觉规范、适配规则、交付物清单五个部分，说明信息架构的排序逻辑、色彩与字体的选择依据、交互设计的考量因素，体现设计的专业性与合理性，而非主观臆断。评分依据：切图完整、命名规范，标注清晰准确，设计说明内容完整、逻辑严谨。（四）实训考核评分细则考核模块分值优秀（90%-100%分值）良好（70%-89%分值）合格（60%-69%分值）不合格（60%以下分值）需求分析与信息架构10用户画像维度完整，信息层级清晰，模块无遗漏，完全符合品牌定位用户画像较完整，信息层级较清晰，缺少1个次要模块，基本符合品牌定位用户画像基本完整，信息层级基本合理，缺少1个核心模块用户画像缺失，信息层级混乱，缺少2个及以上模块低保真原型15三个尺寸完整，栅格完全规范，布局合理，交互逻辑清晰三个尺寸完整，栅格基本规范，布局较合理，交互逻辑较清晰缺少1个尺寸，栅格有少量错误，布局基本合理缺少2个及以上尺寸，布局混乱，交互逻辑不清高保真视觉设计25视觉规范完全统一，色彩协调，层级清晰，细节完整，转化引导性强视觉规范基本统一，色彩较协调，层级较清晰，细节较完整视觉规范有少量不统一，色彩基本协调，