UI设计·形考任务一

UI设计·形考任务一1.请你分析一个自己喜欢的UI设计案例，谈谈具体好在何处？（30分）答:声音搜索大部分时间，我在开车时都会使用

Google

地图。在此期间，在搜索字段中输入文本非常不便，而且非常

危险。该应用程序仅通过提供语音识别工具即可解决此问题，该工具可立即提供所需位置的路线。路线状态和交通的可见性去某个地方时，一个非常重要的方面是知道到该目的地的剩余时间。该应用程序将计算剩余时间，并根据选择的运输方式和交通状况，预测预计到达时间。2.手写作答题：请在学习第1章的内容后，手写完成以下问答题：（40分）1．请说明UI的概念？（8分）UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即UserInterface(用户界面)的简称。请简述用户界面设计的三大原则？（10分）置界面于用户的控制之下减少用户的记忆负担保持界面的一致性。UCD的含义？（10分）UCD（UserCenteredDesign）是指以用户为中心的设计。是在设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。简单的说，就是在进行产品设计、开发、维护时从用户的需求和用户的感受出发，围绕用户为中心进行产品设计、开发及维护，而不是让用户去适应产品。4．简述UI设计中的常用文件格式JPEG/GIF/PNG三种格式的优缺点？（12分）jpg、png、gif都是我们平时很常见的图片格式，但是很多小伙伴不知道它们之间有什么区别!今天我就来给大家分析一下它们的优缺点、适用的场景以及如何进行格式转换吧!1.Jpg优点:jpq可以在不影响人类可分辨的图片质量前提下，尽可能的压缩图片的大小，比较适合用来储存和传输使用。缺点:该格式属干有损压缩方式，因此在一定程度上会降低图片的分辨率，有可能导致画质模糊的现象。2.Png优点:Png是一种比较新型的图片格式，其包括PNG-8和真色彩PNG，而且支持透明底和无损压缩

Q，输出文件后可以保持原有的分辨率。缺点:这种图片格式的尺寸会比较大，有时候会影响传输和储存。3.Gif优点:Gif最大的优点就在于其是以动画形式展现的，可以表达一些静态图。无法展示的画面，同时其传播速度也比较快。缺点:在整个Gif图片中，其智能存在256种不同的颜色。3.论述题：（30分）尝试从UI设计的20条原则中选择3条，分别谈谈自己的理解，并结合自己能够找到的UI设计案例附图进行说明。答:清晰度是界面设计中，第一步也是最重要的工作。要想你设计的界而有效并被人喜欢,首先必须让用户能够识别出它，让用户知道为什么会使用它?比如当用户使用时，能够预料到发生什么，并成功的与它交互。有的界而设计得不是太清晰，虽然能够满足用户一时的需求，但并非长久之计，而清晰的界面能够吸引用户不断

地重复使用。我们在阅读的时候，总是会有许多事物分散我们的注意力，使得我们很难集中注意力安静地阅读。因此，在进行界而设计的时候，能够吸引用户的注意力是很关键的，所以千万不要将你应用的周围设计得乱七八糟分散人的注意力，谨记屏幕整洁能够吸引注意力的重要性。如果你非要显示广告，那么请在用户阅读完毕之

后再显示。尊事用户的注意力，不仅让用户更快乐，而且你的广告效果也会更佳。因此要想设计好的界而，保护和尊重用户的注意力是先决条件。当我们能够直接操作物体时，用户的感觉是最棒的，但这并不太容易实现，因为在界面设计时，我们增加的冬标往往并不是必须的，比如我们过多的使用按钮、图形、选项、附件等等其他繁琐的东西以便我们最终操纵

U元素而不是重要的事情。而最初的目标呢?就是希望简化而能够直接操纵……因此在进行界而设

计时，我们要尽可能多的了解一些人类自然手势。理想情况下，界而设计要简洁，让用户有一个直接操的感觉。UI设计·形考任务二手写作答题：请在学习第2章的内容后，手写完成以下问答题：（40分）1.信息架构的原则、标准及目的的分类分别是什么？2.色调3.饱和度4.明度信息架构原则是为了让网站、应用程序等的内容更加有组织、易于理解和使用。以下是一些常见的信息架构原则:组织性:信息应该按照一定的分类、层次和结构进行组织，以方便用户快速找到他们需要的内容。可视化:使用视觉元素(如图标、颜色、布局等)来帮助用户理解网站或应用程序的结构和功能。.一致性:相同类型的信息应该采用相同的组织方式和格式，以便用户在不同的页面或部分找到相同的信息时不会感到困惑。可搜索性:为了方便用户查找需要的信息，应该在网站或应用程序上提供搜索功能。易用性:信息和功能的布局和导航应该简单明了，让用户能够快速而准确地找到所需信息。反馈机制:为了让用户更好地理解网站或应用程序的结构和功能，应该提供适当的反馈机制，如鼠标悬停提示、确认对话框等。（2）关键是能设计出好的信息架构，而一个好的信息架构，应该可以能低成本与其他系统建立连接。找到该场景最合适的信息架构框架，并且能随时迭代这个架构对人、对信息、对任何内外部要素的连接能力。（3）分类：层次结构也叫树形结构，是常见的网站信息架构模式，上面举例的Wordpress的信息架构就是典型的层次结构。树形结构中箭头的方向不一定是自上而下的，也可能是自下而上或者是双向的，而内容层之间也会因为一些关联链接的存在而存在同层次间的指向箭头。矩阵结构矩阵结构比较注重“维”的概念，即从多维的角度来检索信息，如时间、地域、内容分类等，典型的应用就是内容管理系统（CMS）网站或者电子商务类网站，比如你浏览豆瓣的电影时可以筛选：2010年—美国—科幻，也许这个时候《钢铁侠2》就呈现在你面前了。线性结构看到线性结构也许你马上会想到面包屑，它将网站中重要的一个信息架构路线展现了出来，即使它无法为你提供你在网站上的平面坐标，但至少它显示了你现在正处于关键线路的哪个点上；当然，网站的一些关键路径一般也是按照线性结构涉及的，比如用户注册流程或电子商务网站的购买流程等。网站分析与信息架构根据网站业务模式的不同，可以选择适合自己网站的信息架构的模式，无论是上面的哪种信息架构模式，只要设计和运用合理，用户便能够在你的网站上以方便的形式、快的速度找到他们需要的信息。（2）色调(色相)就是对色彩的一种直观感受，色调是指物体反射的光线中以哪种波长占优势来决定的，不同波长产生不同颜色的感觉，色调是颜色的重要的特征，它决定了颜色本质的根本特征。（3）明度指颜色的亮度，不同的颜色具有不同的明度，例如黄色就比蓝色的明度高，在一个画面中如何安排不同明度的色块也可以帮助表达画作的感情，如果天空比地面明度低，就会产生压抑的感觉。（4）饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分（灰色）的比例。含色成分越大，饱和度越大；消色成分越大，饱和度越小。2.论述题：根据P75网页UI设计相关的《行业形象色彩表》，从中找出3种网页界面色系，结合设计案例附图进行分析。（30分）答:（1）红色也常被用作警告、危险、禁止、防火等标识色搭配在网页颜色的应用中,单纯以红色为主色调的网站相对较少,多用作辅助色、点睛色，以达到陪衬、醒目的效果。红色与少量黄色相搭配，会使其热力强盛，趋于躁动、不安，极富动感和张扬的个性。红色与黑色的搭配在商业设计中被誉为商业成功色，在网页设计中也比较常见。红黑搭配常被用于较前卫时尚、个性的娱乐休闲区网页中。红色与灰色、黑色等暗

色调搭配使用，给人以现代、激进的感觉。粉红色是红色系中的冷色系，这类颜色的组合多用于女性主题，如化妆品、服装等，鲜嫩血充满诱惑，容易营造出柔情、娇媚、温柔、甜蜜、纯真、诱惑和艳丽等气氛。（2）白色1分析:白光是所有颜色光线的集合，白色反射所有的光线，不吸收任何可见光，因此白色被作为纯

粹、虚无、轻盈、光明及金属的象征。在商业设计中，白色具有洁白明快纯真和清洁的意象。白色是网页

设计中通用的颜色,它具有容易突出彩度的特性，当一个页面设计未使用白色时,往往会感觉空间减弱，容

易造成猜度不够明确、页面沉闷等反应。2

搭配:很少有纯白色的网页，通常与其他色彩搭配使用。黑色与

白色表现出了两个极端的亮度，这两种颜色搭配使用通常可以表现出都市化，现代的感觉。因为黑色和色的搭配给人以特殊的严肃感，所以也经常被用于庄重的场合。（3）黑色1搭配:黑色的内涵最为丰富和复杂，黑色具有很强的感染力，能够表现出特有的高贵显得严肃、庄严和坚毅。另外，黑色还具有恐怖、烦恼、忧伤、消极、沉睡、悲痛甚至死亡等意象。黑色用在宗教网站

中显出严肃和庄严。2

搭配:黑色是一种流行色,适合于许多色彩搭配。黑色还具有高贵、稳重、科技的意

象，是许多科技网站的主色调配合其他辅助色.营造出科技的神秘感。另外在一些音乐网站中也常常用黑色，为主色调,营造出炫酷的氛围。3.请从网页设计导航表现形式、视觉风格、网页布局、网页UI配色等方面分析下列几个案例？（30分）答:网站页而中用来传递信息的元素主要有文字、图片、多媒体动画、视频。页面布局应将这些不同内容进行

合理排列布局，使得用户更有效的抓住重点，页而布局需要结合用户的行为习惯进行考虑。国外的一些研究机构和学者曾组织过关于网页阅读习惯的视觉轨迹研究。研究结果表明用户浏览网站的视觉路线类似于

字母”F"型。所谓F型模式，即用户浏览网页时首先从网页最左上看起，看完前面几行的大部分内容，越

往下看的越短，只有左边一部分内容被看到，形成F型浏览轨迹，F型浏览轨迹也正好符合人们从左到右

的书写习惯。因此，对于页面布局来说，应将网页重要的元去放在左侧，并日以符合F形状的形式来放署。UI设计·形考任务三1.请参照P77-97用软件制作任意一个WEB登入界面设计。（30分）可以采用网上的图片资源制作作品，注意不得使用与国家法律法规政策相违背的，（1）保留原始的层文件，无层文件的作业无效；（2）可自行网上寻找下载和使用（注意所选图片内容健康向上，不得出现与国家政策和法律相冲突的内容）；（3）采用的设计软件不限。2.请参照P167的内容，用软件制作一个移动端微信图标。（30分）（1）保留原始的层文件，无层文件的作业无效；（2）采用的设计软件不限。3.请参照第三章的内容，为“听书”软件设计制作一个手机APP图标。（40分）（1）保留原始的层文件，无层文件的作业无效；（2）可以借鉴其他作品，但不得抄袭，保持图标设计的原创性。（3）采用的设计软件不限。UI设计·形考任务四1.请参照P139的天气图标制作方法，自己创意并设计制作3个不同风格和款式的天气图标。可以借鉴其他作品，但不得抄袭，保持图标设计的原创性。（30分）（1）保留原始的层文件，无层文件的作业无效；（2）三个天气图标创意需有区别，风格不同；（3）采用的设计软件不限。2.请参照第三章的手机APP制作方法，为一家名叫“吃货”的外卖送餐手机APP程序创意并设计制作1个APP图标。（20分）（1）保留原始的层文件，无层文件的作业无效；（2）设计需紧扣主题，保持原创，符合手机APP图标设计的要求和特点，制作规范，视觉美观。（3）采用的设计软件不限。3.请参照第三章的内容，自己创意设计一款手机音乐播放器的界面。（50分）（1）保留原始的层文件，无层文件的作业无效；（2）设计需紧扣主题，保持原创，符合播放器界面设计的要求和特点，制作规范，视觉美观。（3）采用的设计软件不限。

形考任务五考核任务形式:各分部自行设计与安排。要求:1.若采用日常学习记录的方式，要求学生提交本课程学习过程中的自我评价，评价内容建议包括日常自主学习情况、到课情况、参与讨论情况、作业提交情况、学用结合情况等方而的具体说明和相关数据。2.若分部自行设计或组织的学习活动，根