网站界面(UI)设计-国家开放大学电大学习网形考作业题目答案

网站界面（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 图标，不是对照片和实物的重绘，它们带有特定的信息，所以你的工作是将这些信息通过图标的形式清晰的表达出来，图标是将复杂的信息通过小的象形图案展现出来。

也是APP ui设计师将抽象的实物转换成可识别性的图标。

当然，作为初学者，初次学习设计Icon图标的时候，如何通过简单的形状去表达复杂的含义是一件比较困难的事情，但是只有不断的实践才是提升的关键。

4.地理定位图案的icon 面型扁平图标绘制方法
可以举一反三的去设计别的icon 图标。

所以，关注对象所有的主要功能，划分层级，突出显示图标的关键元素是至关重要的。

少即是多，图标并不应该过度设计。

他们必须尽可能简单地传递正确信息。

如果你能发现
实训日期：成绩：
实训6 App项目UI元素设计(必做)
实训过程记录
步骤简述：
1、确立需求；在设计app界面之前，第一步的流程一定是先收集用户的需求，只有确定了用户的需求才能够更好地开发和设计app界面。

2、确定风格；根据用户的需求和受众人群的喜好去确定appUI界面的风格，因为每个年龄段的人都喜欢不一样的界面，所以要根据这些外在因素去确定。

3、图标设计；图标设计就好像是一个人的脸，UI设计师要达到的效果就是能够让人一眼看到图标就知道这款app软件是干什么的。

4、界面优化；按照app的风格选取符合图片、图集，能够使得app界面整体看起来非常舒适，给人亲切感。

5、设计切图；我们的设计稿出来之后，就会进行切图，切图能够让每一个页面看起来都很整齐；有时候你看到UI设计师们的切图之后，就能够清晰的感觉到这就是一个产品的设计图。

6.App项目交互设计定性研究：针对可能使用你的产品的人，可以是问卷、访谈,不管是以什么形式，主要是了解交互行为的五要素，也就是用户的行为，态度，资质，动力，技能。

人物角色：人物角色一般会包含一些个人基本信息，家庭、工作、生活环境描述，与产品使用相关的具体情境，用户目标或产品使用行为描述等。

一个产品通常会设计3～6个角色代表所有的用户群体。

为了准确定位人物角色，你需要对他们有所了解。

真正的了解用户并不需要华而不实的调研，最好途径就是通过协作。

7.脚本：
问题脚本& 动作脚本：基于你对人物角色的理解，设想出目标用户在使用产品中可能遇到的问题。

你可以为每一个人物角色列一个问题清单，猜想他们在使用产品时会发生的细节
实训日期：成绩：
实训7 App项目交互设计(必做)
实训内容制作元素交互效果，制作页面的交互效果。

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

需完成所有二级页面间的交互设置，如下图。

实训过程记录
步骤简述：
制作元素交互效果，制作页面的交互效果。

1.打开axure软件，进入体统页面，点击如图位置新建文档。

2.axure界面是这样的，最上面是菜单栏，靠下位置为属性栏，中间是操作区域，右侧有交互效果。

3.点击左上角的主页位置，首先我们修改左上方菜单的名字，修改名的时候单机下稍等片刻后再点击一下，就可以修改名字了，我们将index修改为中文“主页”。

4.下面的三个文件名称修改方法一样。

5.将名称修改完成后，双击主页文件，找到左下方的图片，拖入中间，然后双击图片将自己的微信主页拖入。

6.将图片位置调整为 0,0，位置后面为图片大小，也可以根据画面修改为合适尺寸。

7.剩下的“通讯录”、“发现”和“我”的操作方法相似，将图片分别置入各自菜单中。

8.下面做的就是对图片的交互处理，找到如图所示位置“热区”，将“热区”拖入图中“微信”的位置，（热区就是我们手点击的区域范围）。

9.点击右侧位置“鼠标单击时”操作效果。

10.“打开连接”-选择主页的位置，点击确定，主页位置的交互完成（当点击主页的时候，就会连接到主页的位置）。

11.然后再次点击热区，将热区放到通讯录的位置，然后按照上面的操作方法，点击鼠标的时候，打开通讯图片的链接。

12.同样的方法，将剩下的“发现”和“我”，做同样的效果处理。

13.上面的操作都只是在“主页”里面的操作，只有在“主页”点击才会跳转到别的页面，
我们所要做的是在每个页面都有同样的效果，所以我们将刚才在“主页”的交互操作分别复制到剩余三个页面中；
按住Shift分别选中四个交互效果，然后ctrl+c复制到各个页面中粘贴。

14.将全部效果做完之后，就可以点击右上角的“预览”模式在浏览其中观看效果。

15.axure软件版本的不同，页面位置或许会有些许差距。

实训日期：成绩：
实训9 向上或向下适配(必做)
实训目的通过输出不同倍率的素材，适配采用不同分辨率屏幕的设备，以获得最好的浏览效果。

实训内容分别针对iOS系统和Android系统的特点，完成向上或向下适配设备的操作。

实训要求教师指导 2 学时，学生课后练习 4 学时以上
需完成iOS系统App3种适配元素输出；Android系统App5种适配元素输出，如下图。

实训日期：成绩。