青岛广播成人教育网站界面(UI)设计(20秋)在线作业及参考答案(见卷后)

网站界面（UI）设计实训3 完成App项目原型的制作（必做）实训目的通过制作App产品原型，将策划书的内容可视化，将每一个页面中的功能可视化，使设计出的UI符合App功能需求实训内容确定App产品应用的系统，确定UI页面的基本结构和布局，根据策划书和思维导图完成App功能页面的绘制，为相关页面建立超链接。

掌握原型制作软件的使用。

实训要求教师指导2学时，学生课后8学时或以上。

需完成二级页面原型，如下图。

实训过程记录步骤简述：01 框架搭建1. 新建页面底部导航分为5个部分，所以也对应着五个页面。

在制作时先不考虑登录等其他页面，只做主界面。

1. 在页面部分（注意不是概要部分）添加文件夹命名为主界面，放置主界面的页面。

2. 在文件夹下面添加页面，底部导航点击每个图标跳转后对应的页面。

由于该原型底部导航分为5个部分，所以在主界面下是五个子页面。

每个子页面可以继续添加子页面，类似下图中我——个人主页，代表页面内跳转的页面。

2. 页面布局实训日期：成绩：实训5 设计制作App项目图标组(必做)实训目的（1）通过图标组的绘制，确定App项目UI的风格。

（2）在熟练使用软件工具的同时，熟悉不同系统对图标制作的要求。

实训内容（1）完成底部标签栏图标的设计制作。

（2）完成App功能图标的设计制作。

（3）完成App导航栏上功能图标的设计制作。

实训要求教师指导2 学时，学生课后用8 学时或以上。

需给出图标组效果和图标组交互效果，如下图。

实训过程记录步骤简述：1.使用最简单的图形简单的形状可以组合成复杂的图标。

你只需要从不同的角度去观察他们。

将注意力放在每一个图标是如何通过简单元素组合而成的。

2.还有一种纯色的线性风格。

比如我们在阿里巴巴矢量图标库下载的所有图标大部分都是这种纯色的。

3.所谓的icon 图标，不是对照片和实物的重绘，它们带有特定的信息，所以你的工作是将这些信息通过图标的形式清晰的表达出来，图标是将复杂的信息通过小的象形图案展现出来。

山东省青岛市成考专升本2022-2023学年计算机基础真题及答案学校:________ 班级:________ 姓名:________ 考号:________一、单选题(40题)1.和十进制数225相等的二进制数是____。

A.11100001B.11111110C.10000000D.111111112. 一个完整的计算机系统应包括( )。

A.系统硬件和系统软件B.硬件系统和软件系统C.主机和外部设备D.主机、键盘、显示器和辅助存储器3.下列四项中属于数字化技术专有特点的是______。

A.数字信号不存在衰减和噪音干扰问题B.数字信号在复制和传送过程不会因噪音的积累而产生衰减C.适合数字计算机进行加工和处理D.以上都是4.在Internet上，为使计算机之间能够彼此通信，需要共同遵守某种协议。

现在Internet广泛采用的一种通信协议是____A.文件格式协议B.信息交换协议C.TCP/IP协议D.硬件生产标准协议5. 中文Windows2000不支持的文件系统是＿＿。

A.FATl6B.FATC.FAT32D.NTFS6.下列有关WWW的叙述不正确的是____。

A.它是基于一种称为Hypertext的技术B.在Hypertext文档中有一些指向另一些文档和资源的指针C.通过这些指针将Internet上的丰富资源连接在一起D.不采用客户朋务器(Client/Server)方式7.为网络提供共享资源并对这些资源进行管理的计算机称之为____。

A.网卡B.服务器C.工作站D.网桥8.下面说法正确的是_______。

A.系统更新包括安全更新B.系统更新包括文件更新C.系统更新包括硬件更新D.系统更新包括日志更新9.计算机网络能传送的信息是:____。

A.所有的多媒体信息B.只有文本信息C.除声音外的所有信息D.文本和图像信息10.网络信息资源的最常用的组织方式有____A.主题树方式B.数据库方式C.文件方式D.超媒体方式11.在word编辑器状态下，若要进行选定文本行间距的设置，应该选择的操作是____。

网站界面（UI）设计2016年春考试真题（带答案）一、多选题1．关于扁平化风格图标的表述正确的有（ABCD）A、简约风格B、有利于提高系统性能C、不强调质感与细节的描摹D、强调功能性2．在开展设计工作之前，我们力求做到知己知彼，这里的“彼”指（ABCD ）A. 对所服务的客户的认知，和客户保持良好的沟通B. 对网站目标用户的深入理解C. 对竞争对手的了解D. 对网站目标用户的深入理解3．关于全局导航的描述正确的有（ACD ）A. 出现在网站所有的页面中B. 位置一定在网页的顶部C. 体现网站最重要的内容层次结构D. 帮助用户在网站中迅速定位4．对于用户导向原则在网站界面设计中的具体体现描述准确的是（ABCD ）A. 明确体现网站的核心功能和服务B. 符合用户在使用网站时的心智模型和场景中的思维状态C. 尊重人机交互中用户的生理特征D. 符合用户的认知习惯5．下列关于心智模型表述准确的有（ABCD ）A. 根据用户的心智模型来选择信息的组织方式是优秀网站成功的重要因素。

B. 人们通常基于自身经验和现有知识来理解新事物。

C. 有助于用户理解如何使用网站的设计属于符合心智模型的设计。

D. 重视情景因素对用户行为的影响。

6．文字图层中的文字信息哪些可以进行修改和编辑？( ABC )A. 文字颜色B. 文字内容，如加字或减字C. 文字大小D. 将文字图层转换为像素图层后可以改变文字的字体7．建立有效布局的手段有（ABCD ）A. 有选择的展现信息，分清主次B. 预先对信息进行科学的分类，整理好优先级C. 遵循用户习惯，同时给予适当的引导推荐D. 不同信息找到最合适的表现方式8．下列可以帮助加强色彩对比的方法有（ABD ）A. 色相互补B. 明度差异大C. 色相临近D. 饱和度差异大9．如何让界面中的重要元素变得突出，下列处理手段合理的有（ABC ）A. 使用鲜艳的色彩B. 注意周围的留白C. 放在用户浏览网页视线中的重要位置D. 越大越好10．当选择“文件>新建”命令，在弹出的“新建”对话框中可设定下列哪些选项？（ABC ）A. 图像的高度和宽度B. 图像的分辨率C. 图像的色彩模式D. 图像的标尺单位11．下列哪些方法可以产生新图层？（BCD ）A. 双击图层控制调板的空白处，在弹出的对话框中进行设定选择新图层命令B. 单击图层调板下方的新图层按钮C. 使用鼠标将将图像从当前窗口中拖动到另一个图像窗口中D. 使用文字工具在图像中添加文字12．网站界面中越来越多出现高清大图和视频的原因在于（ABCD ）A. 带宽流量和服务器性能的改善B. 视觉冲击力强C. 用户体验好D. 视频可负载的信息量很多13．优秀的网站图标一般具备以下哪些特点（ABCD ）A. 形象定义准确B. 造型完整简明C. 风格统一D. 配色协调14．下列关于Photoshop 打开文件的操作，哪个是正确的？（ABCD ）A. 选择“文件>打开”命令，在弹出的对话框中选择要打开的文件B. 选择“文件>最近打开文件”命令，在子菜单中选择相应的文件名C. 如果图像是Photoshop 软件创建的，直接双击图像图标D. 将图像图标拖放到Photoshop 软件图标上15．下列关于黄色的描述准确的有（ABCD ）A. 气质明快生动B. 当明度降低时，色彩面貌会发生很大的变化C. 饱和的黄色经常充当强调色D. 饱和的黄色在儿童站点及针对年轻人的网站中常见。

《界面设计》习题与答案（解答仅供参考）一、名词解释1. 界面设计（UI Design）：界面设计是指对软件、网站、移动应用等交互产品的图形用户界面进行规划和设计的过程，旨在通过优化视觉表现、布局结构以及交互行为，提高用户体验，实现人与产品之间的有效沟通。

2. 交互设计（Interaction Design）：交互设计是界面设计的重要组成部分，关注于用户与产品互动的方式，包括信息架构、操作流程、反馈机制的设计，以确保用户在使用过程中能够高效、便捷且愉快地完成目标任务。

3. 用户体验（User Experience, UX）：用户体验是对用户在使用特定产品或系统过程中建立的主观感受和情感反应的总称，涵盖了从最初的接触、使用到最终离开的全部过程中的认知、情绪、审美、功能性及可用性等方面的体验。

4. 布局设计（Layout Design）：布局设计是在界面设计中针对屏幕空间进行合理分配和组织的过程，它决定了页面元素的位置、大小、间距等属性，旨在清晰传达信息层级，引导用户注意力，提供直观易用的导航路径。

5. 可访问性设计（Accessibility Design）：可访问性设计是指在界面设计中充分考虑不同用户群体的需求，包括但不限于视力障碍、听力障碍、行动不便或其他特殊需求的用户，通过技术手段确保他们也能方便有效地获取和使用产品功能。

二、填空题1. 界面设计的目标之一是提升用户的______。

答案：满意度/体验2. 在界面设计中，色彩、字体、图标等属于______元素。

答案：视觉设计3. 界面设计师通常需要依据______来创建符合用户需求和习惯的设计方案。

答案：用户研究/用户画像/用户需求分析4. 为了便于用户理解和记忆，界面上的功能按钮应保持一致性原则，即同一功能在不同场景下的表示方式应______。

答案：一致5. ______是指在界面设计中，使所有用户无论年龄、能力、文化背景都能公平、容易地获取和使用产品内容的技术和方法。

分析优秀网站的配色规律一个好的网站能否很出色并且让访客赏心悦目网站的配色占据了很大的影响成分，一个好的配色网站甚至于能够与品牌相得益彰。

在对网站勾勒整个的架构的时候，不得不把配色优先考虑进去，这关乎到后续的素材选择去进而打造整体的视觉感受。

那么想要为企业网站创建专属自己的色彩方案其实也并不是遥不可及，一些技术可以帮助我们简单、快速的进行色彩选择。

色彩所带来的视觉“情绪”当我们在进行色彩的选择时，我们不仅需要兼顾整体的美观程度、内容一体性，同时也要考虑到使用的色彩给人的感受。

那色彩能够引发人表现出不同的情绪是尽人皆知的，颜色的代表含义能够直接影响客户对于产品的认知。

所以当我们在选择色彩的时候要多注意下我们的网站要给客户访客什么，要给访客什么样的内在情绪。

避免只使用纯黑色如果网页中用了纯黑色的色彩元素，将会使得该内容不自然，为什么呢？因为往往在我们的视觉系统中会把较深的颜色当做黑色。

但在自然界中，其实是很难找到真正的纯黑色，他们只是较为接近黑色，当我们使用纯黑色进行设计的话，黑色的色彩强度将会压倒其他色彩，正如前面所说自然界中是很难找到真正的纯黑色，所以会使得这部分使用了黑色的内容显得不自然。

选择颜色的时候不要太多色彩在网站设计的运用讲究一种平衡，越多的颜色平衡越难以达成，同时网站在设计中传达的信息就会被影响分散导致混淆视听。

631法则此规律正如其名，简单来解释就是60%的主色，30%的辅色，10%的点缀。

前两者相辅相成，最后者是点亮色，来突显某处特点。

连续性原则我们在设计过程中通常要考虑到整个网站色彩的过度衔接性。

这就意味着网站每个内页的色彩选择最好是有少许的变化，在跳转到第二个页面的时候的色彩可以处理的更加平滑，使得访客在深度预览的时候不感到陌生。

这时候我们可以选择每个页面的共同点，譬如品牌的主色作为标题，达到整体的连贯性。

在网站的设计的过程中对以上几点理解运用得当，就可以制作出符合自身需求的预期效果了，希望这几点小技巧能够帮助到大家，最后还是需要通过不断的尝试练习来提高自身的设计水平！。

国家开放大学《网站界面（UI）设计》课程章节测试4答案解析一、单选题或多选题一、单选题或多选题试题1满分1.00未标记标记试题试题正文关于对比色相，下列说法正确的有（）。

选择一项或多项：a.给人鲜明生动、强烈兴奋的感觉b.指色相相距120度左右的色相之间形成的关系c.红色和蓝色是对比色相d.黄色和绿色是对比色相你的回答正确正确答案是：指色相相距120度左右的色相之间形成的关系, 给人鲜明生动、强烈兴奋的感觉, 红色和蓝色是对比色相试题2满分1.00未标记标记试题试题正文以下属于互补色相的有（）。

选择一项或多项：a.黄色与紫色b.黑色与白色c.红色与绿色d.橙色与蓝色反馈你的回答正确正确答案是：黄色与紫色, 红色与绿色, 橙色与蓝色满分1.00未标记标记试题试题正文下列属于暖色的色相有（）。

选择一项或多项：a.深蓝色b.橙色c.黄棕色d.白色反馈你的回答正确正确答案是：黄棕色, 橙色试题4满分1.00未标记标记试题试题正文下列可以帮助加强色彩对比的方法有（）。

选择一项或多项：a.色相临近b.色调明度差异巨大c.色调饱和度差异巨大d.色相互补反馈你的回答正确正确答案是：色相互补, 色调明度差异巨大, 色调饱和度差异巨大试题5满分1.00未标记标记试题试题正文下列属于三角调和，也符合对比色相的色彩组合有（）。

选择一项：a.红紫色、红色、橙色b.黄绿色、绿色、蓝绿色c.红色、蓝紫色、黄绿色d.橙色、黄色、黄绿色反馈你的回答正确正确答案是：红色、蓝紫色、黄绿色试题6满分1.00未标记标记试题试题正文下列色相环中哪种色相关系对比最强烈，配色能给人饱满、活跃、生动、刺激的强烈感受（）。

选择一项：a.对比色相b.互补色相c.类似色相d.临近色相反馈你的回答正确正确答案是：互补色相试题7满分1.00未标记标记试题试题正文（）是指色彩三属性中除了色相以外的明度和彩度的复合称谓。

选择一项：a.色调b.色彩风格c.饱和度d.色环反馈你的回答正确正确答案是：色调试题8满分1.00未标记标记试题试题正文为保证网页色彩在任何用户显示设备上的显示效果都是相同的，可选择（）。

“电子邮件”正确的英文写法是（）。

•••网页上的视觉第一落脚点通常在页面的（）。

•••频道框架也页面规范确定后，将按照确定的框架、颜色进行设计的是（）。

•••增加新的实用工具或交互功能，使受众使用更方便从而增强网站盈利能力的改版方式是指（）。

••下列关于频道与栏目的叙述，错误的是（）。

•••75分考量网络媒体是否被受众接收的重要指标是（）。

流量•技术•资金•编辑•85分下列不属于网站频道与栏目策划方案撰写要素的是（）。

市场分析•频道与栏目的定位•方案撰写人•网页叶明风格•95分关于采访的说法，错误的是（）。

采访分为显性采访和隐性采访•在隐性采访时不要侵犯公民的隐私权•隐性采访也可以适用于未成年人•隐性采访不得泄漏国家机密•105分以下角色属于论坛管理者的是（）。

版主或网站某个专栏的主持人••••选择网络专题内容时，只能选择正面的材料，反面材料通常不予考虑。

•25分信息的真实性要求信息在整体上是客观存在的，对信息的具体细节没必要进行考察分析。

•35分与传统媒体专题相比，网络媒体专题最大的不同就是专题的页面美观。

•45分最适宜采用监控软件进行监控的是以动画为主的网站。

•55分在网络调查问卷的设计当中应注意，问题的数量不宜超过2小时。

•65分运算器和控制器统称为中央处理器，简称CPU。

•75分网民对网络稿件信息的获取一般是通过稿件的内容提要来实现的。

•85分常常采用“倒金字塔式”结构方式的新闻载体是消息。

•95分博客是一种流水记录形式，即网络日志。

•。

《界面设计》考试题（附答案）一、单选题（共60题，每题1分，共60分）1、常用的网页图像格式有( )和（）.A、tiff,pngB、gif, tiffC、tiff, jpgD、gif, jpg正确答案：D2、下列哪一项是正确的CSS语法构成 ( )A、body:color=blackB、body (color:black}C、{hody;color:black}D、body (color=blackl正确答案：B3、在网站整体规划时，第一步要做的是( )A、制作网页B、选择合适的制作工具C、搜集材料D、确定网站主题正确答案：D4、下列不属于交互设计方法论的是( )A、Design SprintB、设计实践C、5W2HD、Design thinking正确答案：B5、下列不属于用户属性的是( )A、网络情况B、使用设备C、下载来源D、用户数据正确答案：D6、产品经理和项目经理的区别是( )A、职级不同B、资质不同C、几乎没有不同D、定位职能不同正确答案：D7、关于界面设计理论说法不正确的是( )A、界面设计中有经典的常用理论B、界面设计方法的运用对设计师的知识体系要求较高C、界面设计中只会运用单一固定的理论方法D、格式塔原理属于界面设计理论之一正确答案：C8、下面哪个不属于常用的动效插件( )A、TrapcodeB、BodymovinC、Ease and Wizz FlowD、Particular正确答案：D9、当浏览器不支持图像时，图像<IMG>标记的____属性的文本内容可以替代说明图像( )A、borderB、altC、heightD、align正确答案：B10、从公司角度看，不属于产品定位价值的是( )A、表示战略方向B、体现公司信息化程度C、定义产品范围D、承载商业模式正确答案：C11、Web 安全色所能够显示的颜色种类为( )。

A、256 色B、1500 种色C、216 色D、干万种颜色正确答案：C12、下列不属于控件规范中需要包含的状态样式的是( )A、禁用B、默认C、按下D、误操作正确答案：D13、下列关于流程设计说法不正确的是( )A、流程比原型先行B、流程图不如原型重要C、流程图能完整表述整个功能流程D、流程是设计属于框架设计的一部分正确答案：B14、UI 设计常用软件是( )A、WordB、ExcelC、PhotoshopD、Firefox正确答案：A15、下列不属于通用模块的是( )A、登录B、扫码C、浮层D、搜索正确答案：A16、下列支持位图处理的软件有( )A、PremiereB、AdobeC、SketchD、Photoshop正确答案：D17、故事板一般的表现形式是( )A、纯文本展示B、纯图展示C、复合文本展示D、图文展示正确答案：D18、下列产品与其他三个有显著区别的是( )A、PinterestB、DribbleC、SketchfabD、Behance正确答案：C19、关于 Sketch 工具栏说法不正确的是( )A、第一组主要包含Symbol相关工具B、共分为 5 个不同的组C、第三组主要是高级工具使用D、共有24个工具正确答案：B20、KOL是指( )A、去中心化B、用户生产内容C、专业生产内容D、关键意见领袖正确答案：D21、Sketch中提供了哪种蒙版( )A、普通蒙版B、明度蒙版C、对比度蒙版D、颜色蒙版正确答案：A22、下面哪一条不属于2020年 UI 设计的趋势( )A、使用暗色调主题B、使用鲜亮的色彩模式 .C、打破传统网格的局限，呈现个性化网格布局D、使用适画风格正确答案：B23、用于设置页面标题的标记是___。

题目：建立有效布局的手段有（）。

选项A：有选择地展现信息，分清主次选项B：遵循用户习惯，同时给予适当的引导推荐选项C：不同信息找到最合适的表现方式选项D：预先对信息进行科学的分类，整理好优先级答案：有选择地展现信息，分清主次, 预先对信息进行科学的分类，整理好优先级, 遵循用户习惯，同时给予适当的引导推荐, 不同信息找到最合适的表现方式题目：感性风格的网站一般采用的布局具有哪些特点（）。

选项A：图片多为方形选项B：多采用自由型版式选项C：自由感大于稳定感选项D：图文率中以图为主答案：多采用自由型版式, 图文率中以图为主, 自由感大于稳定感题目：信息量巨大的网站一般采用的布局具有哪些特点（）。

选项A：采用规则型版式选项B：图片多为出血选项C：稳定感大于自由感选项D：图文率中以文字为主答案：采用规则型版式, 图文率中以文字为主, 稳定感大于自由感题目：关于全局导航的描述正确的有（）。

选项A：出现在网站所有的页面中选项B：位置一定在网页的顶部选项C：帮助用户在网站中迅速定位选项D：体现网站最重要的内容层次结构答案：出现在网站所有的页面中, 体现网站最重要的内容层次结构, 帮助用户在网站中迅速定位题目：关于网格系统的表述正确的有（）。

选项A：使用横向和纵向引导线将版面进行划分选项B：只适用于平面设计选项C：重视比例感、秩序感、准确性选项D：把秩序引入设计中去的一种方法答案：使用横向和纵向引导线将版面进行划分, 重视比例感、秩序感、准确性, 把秩序引入设计中去的一种方法题目：照片、插图等图像与文字的比例称为图文率，也被称为视觉度，文字所占比例大，视觉度就高。

选项A：对选项B：错答案：错。