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

网站界面（UI）设计

实训3完成App项目原型的制作（必做）

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

教师指导2学时，学生课后8学时或以上。
需完成二级页面原型，如下图。

实训要求

实训过程记录

步骤简述：

01框架搭建

1.新建页面

底部导航分为5个部分，所以也对应着五个页面。在制作时先不考虑登录等其他页面，只做
主界面。

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

2.在文件夹下面添加页面，底部导航点击每个图标跳转后对应的页面。由于该原型底部导航
分为5个部分，所以在主界面下是五个子页面。每个子页面可以继续添加子页面，类似下图
中我——个人主页，代表页面内跳转的页面。

2.页面布局

一个简易的页面基本都会包括状态栏、导航栏与标签栏（即底部导航）。

一般来说移动端的页面制作时尺寸设置为375*667

状态栏高20（状态栏可以下载AXURE元件库进行导入，也可以自己制作。）

导航栏高44

底部导航高49

除了这些以外的位置，便是可以放置主要内容的地方。

建议初学者可以直接使用矩形工具包括中间部分，再设置为动态面板。（蓝色框线部分即是
放置主要内容的地方，右键设置为动态面板后即可双击此动态面板进入编辑）
注意，在右边样式部分，需要对动态面板进行选择“按需滚动”，这样才可以在预览时看到
所有编辑的部分。
02底部导航+页面跳转

了解完大致的框架搭建与页面的布局，那么就开始制作底部导航吧。网上许多教程都是状态
的转换，虽然预览效果一样，但是对于制作一个APP而言还是不对的。

1.首先先添加一个母版，命名为底部导航。
2.接着选择好图片和文字，熟练运用组合，居中等将导航排布整齐。

一个图标与其对应文字为一个组合，方便后面的交互情形添加。

3.五个页面，对应该底部导航的五个状态。所以既要挑好选中前的图标，也要挑好选中后的
图标。在这里我只对图标进行了改变表示选中。一般情况下文字颜色也会相应改变。

4.在状态1对其他图标组合进行交互设置。选中店铺组合，在右侧进行设置。
5.以此类推，将后面四个图标组合与页面进行相应的设置。然后复制多四个状态，再改变一
下选中时的图标样式。注意每个状态中都要保证其他四个图标组合具备交互情形，才能让页
面跳转成功。

6.右键母版——添加到页面，将该底部导航的母版设置到每个页面中，注意位置的摆放。

7.在工作区打开每个页面，并对页面进行交互设置。例如打开店铺页，设置如下。
8.给页面设置不同的内容，进行预览，就可以看到切换的效果啦。

实训日期：成绩：

实训5设计制作App项目图标组(必做)

（1）通过图标组的绘制，确定App项目UI的风格。（2）在熟练使用软件工具的
实训目的
同时，熟悉不同系统对图标制作的要求。
（1）完成底部标签栏图标的设计制作。（2）完成App功能图标的设计制作。（3）
实训内容
完成App导航栏上功能图标的设计制作。
教师指导2学时，学生课后用8学时或以上。
需给出图标组效果和图标组交互效果，如下图。

实训要求

实训过程记录

步骤简述：

1.使用最简单的图形

简单的形状可以组合成复杂的图标。你只需要从不同的角度去观察他们。将注意力放
在每一个图标是如何通过简单元素组合而成的。

2.还有一种纯色的线性风格。比如我们在阿里巴巴矢量图标库下载的所有图标大部分都是
这种纯色的。
3.所谓的icon图标，不是对照片和实物的重绘，它们带有特定的信息，所以你的工作是
将这些信息通过图标的形式清晰的表达出来，图标是将复杂的信息通过小的象形图案展现
出来。

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

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

4.地理定位图案的icon面型扁平图标绘制方法

可以举一反三的去设计别的icon图标。
所以，关注对象所有的主要功能，划分层级，突出显示图标的关键元素是至关重要的。
少即是多，图标并不应该过度设计。他们必须尽可能简单地传递正确信息。如果你能发现
一些可以删除的不必要元素，使它看起来更简单，更加易于识别。
手绘草图
这也是最能提高设计师图形表达力的更高效的方式。

6.使用最简单的图形绘制图标。你可以更加直观方便的得到反馈和做出修改。所以尝试使
用几何形状去构建图标，并且通过