最新国家开放大学电大《网站界面UI设计》形考作业参考答案.docx

《最新国家开放大学电大《网站界面UI设计》形考作业参考答案.docx》由会员分享，可在线阅读，更多相关《最新国家开放大学电大《网站界面UI设计》形考作业参考答案.docx（11页珍藏版）》请在第一文库网上搜索。

1、最新国家开放大学电大网站界面(UD设计形考作业参考答案网站界面(U1)设计形考作业学习过程表现：现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可缺少的一部分，网络成了我们获取知识和信息的一种便捷工具，现在的网民也在不断的增多，所以，了解和学习网络知识是我们作为一名大学生迫切所需的。我利用闲暇的时间，对网页设计进行了初步的认识和了解，并基本掌握网站界面(UI)设计的相关技能。通过对网页设计书籍的翻阅，我学习到了一些关于建设网站和制作网页的知识，在实践查阅资料时，对(UI)设计也有所了解。我还了解了一些基础的网络技术。通过学习，我对计算机有了更深层次得到了解，也有了更浓厚的

2、兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。在这个过程中，我同样认识到网页设计不是一门学科的独秀，而是多种课程的综合。内容是整个网页的核心。在网页设计之前必须明确网页的内容、安排。优秀网页设计是要建立在平凡的基础上的。然后在具体的规划一个网页时,可以用树状结构先把每个页面的内容大纲列出来，尤其要制作一个大的网站(有很多页面)的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，很浪费时间和财力。大纲列出来后，还必须考虑每个页面之间的链接关系。是星形，树形，或是网形链接。这也是判别一个网站优劣

3、的重要标志。链接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。框架定下来了，然后开始一步一步有条理，有次序地做来，就胸有成竹得多，也会为主页将来发展打下良好的基础。下一步，就以动手制作具体内容了，题材选定，框架选定，接下来就开始往主页里面填内容。总体来说，通过这个假期对网页设计的学习，有收获也有遗憾。但是，我已经迈入了网页设计的大门，只要我再认真努力的去学习，在今后的闲余时间学习制作网页的更多知识以实现自身技能的提高，我坚信将来设计出的网页会更加专业，更加华丽，使它最终成为自己的一项技能。形考作业一实训3完成APP项目原型的制作实训目的通过制作APP产品原型，将策划书的内容可视化，将每一

4、个页面中的功能可视化，使设计出的U1符合APP功能需求实训内容确定APP产品应用的系统，确定U1页面的基本结构和布局，根据策划书和思维导图完成APP功能页面的绘制，为相关页面建立超链接。掌握原型制作软件的使用。实训要求教师指导2学时，学生课后8学时或以上。需完成二级页面原型，如下图。实训过程记录步骤简述：O1框架搭建1.新建页面底部导航分为5个部分，所以也对应着五个页面。在制作时先不考虑登录等其他页面，只做主界面。1 .在页面部分（注意不是概要部分）添加文件夹命名为主界面，放置主界面的页面。2 .在文件夹下面添加页面，底部导航点击每个图标跳转后对应的页面。由于该原型底部导航分为5个部分，所以在

5、主界面下是五个子页面。每个子页面可以继续添加子页面，类似下图中我一一个人主页，代表页面内跳转的页面。3 .页面布局一个简易的页面基本都会包括状态栏、导航栏与标签栏（即底部导航）。一般来说移动端的页面制作时尺寸设置为375*667状态栏高20（状态栏可以下载AXURE元件库进行导入，也可以自己制作。）导航栏高44底部导航高49除了这些以外的位置，便是可以放置主要内容的地方。建议初学者可以直接使用矩形工具包括中间部分，再设置为动态面板。（蓝色框线部分即是放置主要内容的地方，右键设置为动态面板后即可双击此动态面板进入编辑）注意，在右边样式部分，需要对动态面板进行选择“按需滚动”，这样才可以在预览时看

6、到所有编辑的部分。02底部导航+页面跳转了解完大致的框架搭建与页面的布局，那么就开始制作底部导航吧。网上许多教程都是状态的转换，虽然预览效果一样，但是对于制作一个APP而言还是不对的。1 .首先先添加一个母版，命名为底部导航。2 .接着选择好图片和文字，熟练运用组合，居中等将导航排布整齐。一个图标与其对应文字为一个组合，方便后面的交互情形添加。3 .五个页面，对应该底部导航的五个状态。所以既要挑好选中前的图标，也要挑好选中后的图标。在这里我只对图标进行了改变表示选中。一般情况下文字颜色也会相应改变。4 .在状态1对其他图标组合进行交互设置。选中店铺组合，在右侧进行设置。5 .以此类推，将后面四

7、个图标组合与页面进行相应的设置。然后复制多四个状态，再改变一下选中时的图标样式。注意每个状态中都要保证其他四个图标组合具备交互情形，才能让页面跳转成功。6 .右键母版一一添加到页面，将该底部导航的母版设置到每个页面中，注意位置的摆放。7 .在工作区打开每个页面，并对页面进行交互设置。例如打开店铺页，设置如下。8 .给页面设置不同的内容，进行预览，就可以看到切换的效果啦。实训5设计制作APP项目图标组实训目的（1）通过图标组的绘制，确定APP项目U1的风格。（2）在熟练使用软件工具的同时，熟悉不同系统对图标制作的要求。实训内容（1）完成底部标签栏图标的设计制作。（2）完成APP功能图标的设计制作

8、。（3）完成APP导航栏上功能图标的设计制作。实训要求教师指导2学时，学生课后用8学时或以上。需给出图标组效果和图标组交互效果，如下图。实训过程记录步骤简述：1使用最简单的图形简单的形状可以组合成复杂的图标。你只需要从不同的角度去观察他们。将注意力放在每一个图标是如何通过简单元素组合而成的。2 .还有一种纯色的线性风格。比如我们在阿里巴巴矢量图标库下载的所有图标大部分都是这种纯色的。3 .所谓的icon图标，不是对照片和实物的重绘，它们带有特定的信息，所以你的工作是将这些信息通过图标的形式清晰的表达出来，图标是将复杂的信息通过小的象形图案展现出来。也是APPUi设计师将抽象的实物转换成可识别性

9、的图标。当然，作为初学者，初次学习设计Icon图标的时候，如何通过简单的形状去表达复杂的含义是一件比较困难的事情，但是只有不断的实践才是提升的关键。4 .地理定位图案的icon面型扁平图标绘制方法可以举一反三的去设计别的icon图标。所以，关注对象所有的主要功能，划分层级，突出显示图标的关键元素是至关重要的。少即是多，图标并不应该过度设计。他们必须尽可能简单地传递正确信息。如果你能发现一些可以删除的不必要元素，使它看起来更简单，更加易于识别。手绘草图这也是最能提高设计师图形表达力的更高效的方式。6.使用最简单的图形绘制图标。你可以更加直观方便的得到反馈和做出修改。所以尝试使用几何形状去构建图标

10、，并且通过观察别人的图标作品是如何做到的。实训日期：成绩:实训6App项目UI元素设计实训目的通过实际操作，完成APP项目所有页面Ij1的制作。实训内容合理并美观的呈现页面中的不同功能，按照规则在页面中输入文字，按照规则在页面中使用图片，控制好页面中元素的边距与间距。区分不同系统中需要注意的要点。实训要求教师指导6学时，学生课后用20学时或以上。需按照策划内容完成所有二级页面内容，如下图。实训过程记录步骤简述：1、确立需求；在设计app界面之前，第一步的流程一定是先收集用户的需求，只有确定了用户的需求才能够更好地开发和设计app界面。2、确定风格；根据用户的需求和受众人群的喜好去确定appUI

11、界面的风格，因为每个年龄段的人都喜欢不一样的界面，所以要根据这些外在因素去确定。3、图标设计；图标设计就好像是一个人的脸，U1设计师要达到的效果就是能够让人一眼看到图标就知道这款app软件是干什么的。4、界面优化；按照app的风格选取符合图片、图集，能够使得app界面整体看起来非常舒适，给人亲切感。5、设计切图；我们的设计稿出来之后，就会进行切图，切图能够让每一个页面看起来都很整齐；有时候你看到UI设计师们的切图之后，就能够清晰的感觉到这就是一个产品的设计图。6 .App项目交互设计定性研究：针对可能使用你的产品的人，可以是问卷、访谈,不管是以什么形式，主要是了解交互行为的五要素，也就是用户的

12、行为，态度，资质，动力，技能。人物角色：人物角色一般会包含一些个人基本信息，家庭、工作、生活环境描述，与产品使用相关的具体情境，用户目标或产品使用行为描述等。一个产品通常会设计36个角色代表所有的用户群体。为了准确定位人物角色，你需要对他们有所了解。真正的了解用户并不需要华而不实的调研，最好途径就是通过协作。7 .脚本:问题脚本&动作脚本：基于你对人物角色的理解，设想出目标用户在使用产品中可能遇到的问题。你可以为每一个人物角色列一个问题清单，猜想他们在使用产品时会发生的细节并将这些细节准备一个合理的解决方案。这个时候呢，你的交互方案的概念模型已经基本成型了，这个概念模型是通过解决问题脚本里的问

13、题而得出的。画线框图&制作原型：线框图和原型都是对你的方案进行具象化的步骤，借助当下流行的原型工具，例如Mockp1us,Axure,Justinmind,Invision等等一菱筐的工具。8 .专家评测：原型完成后，可以邀请设计师对你的原型做一个评估。比较常用的评测方法是启发式评估法，而这种方法比较常见的标准是尼尔森交互设计法则。以下是十条尼尔森交互设计法则：(1)系统状态是否可见(2)系统是否符合现实世界的习惯(3)用户是否能自由地控制系统(4)统一与标准(5)错误防范(6)减轻低用户的记忆负担(7)灵活性和效率(8)美观简洁(9)帮助用户认知、了解错误，并从错误中恢复(10)帮助文档专家

14、们各自将自己发现问题列出来，并将之与对应的法则相关联，或者根据法则来查找问题，然后专家们分别给自己的问题打分。专家们完成自己的问题列表后，一起讨论，将问题整合起来。常用的打分方法如下：4分问题太过严重，一旦发生用户的进程将会终止并且无法恢复3分问题较为严重，很难能恢复2分问题一般严重，但是用户能够自行恢复，或者问题只会出现一次1分问题较小，偶尔发生，并且不会对用户的进程产生太大影响。分：不算问题记住：评测完后别忘记修改你的线框图和原型！10.用户评测：原型通过专家评测后，你可以找一些典型用户使用原型。你可以把任务列给他们，让他们自己尝试完成任务。中间遇到的问题可以记录下来，设计师通过观察来进行

15、评分。比较常用的用户评测方法是Thii1kAIOUd,做法也很简单，你让用户使用原型完成指定的几个任务，让他们在使用过程中将他们的每一步和心中的想法说出来。如果他们忘记说或者不知道该怎么说，你可以适当提问。与此同时，你要将屏幕和声音录下来，可以用录屏软件或摄像头。完成后，你回放这些视频，把观察到的问题和用户报告的问题全部记录下来，与交互法则关联并且打分。值得注意的有两点：1.这些步骤并不是每步都是必须的，要根据项目去分析你所使用的方法。2.这个过程中每一步都是和用户相关的，切莫主观臆断。实训日期：成绩:实训7APP项目交互设计实训目的通过交互效果的添加，展示APP项目的结构关系，使用户在使用APP时获得良好的用户体验。制作元素展示动画和页面展示动画，便于开发人员准确理解UI设计意图。实训内容制作元素交互效果，制作页面的交互效果。实训要求教师指导2学时，学生课后用16学时或以上。需完成所有二级页面间的交互设置，如下图。实训过程记录步骤简述：制作元素交互效果，制作页面的交互效果。1打开axure软件，进入体统页面，点击如图位置新建文档。2 .axure界面是这样的，最上面是菜单栏，靠下位置为属性栏，中间是操作区域，右侧有交互效果。3 .点击左上角的主页位置，首先我们修改左上方菜单的名字，修改名的时候单