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

2024年2月7日发(作者：)

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

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

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

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

可以举一反三的去设计别的icon 图标。

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

少即是多，图标并不应该过度设计。他们必须尽可能简单地传递正确信息。如果你能发现

一些可以删除的不必要元素，使它看起来更简单，更加易于识别。

手绘草图

这也是最能提高设计师图形表达力的更高效的方式。

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

实训日期： 成绩：

实训6 App项目UI元素设计(必做)

实训目的 通过实际操作，完成App项目所有页面UI的制作。

合理并美观的呈现页面中的不同功能，按照规则在页面中输入文字，按照规则实训内容 在页面中使用图片，控制好页面中元素的边距与间距。区分不同系统中需要注意的要点。

实训要求

教师指导6 学时，学生课后用20 学时或以上。

需按照策划内容完成所有二级页面内容，如下图。

实 训 过 程 记 录

步骤简述：

1、确立需求；在设计app界面之前，第一步的流程一定是先收集用户的需求，只有确定了用户的需求才能够更好地开发和设计app界面。

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

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

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

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

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

人物角色：人物角色一般会包含一些个人基本信息，家庭、工作、生活环境描述，与产品使用相关的具体情境，用户目标或产品使用行为描述等。一个产品通常会设计3～6个角色代表所有的用户群体。为了准确定位人物角色，你需要对他们有所了解。真正的了解用户并不需要华而不实的调研，最好途径就是通过协作。

7.脚本 ：

问题脚本& 动作脚本：基于你对人物角色的理解，设想出目标用户在使用产品中可能遇到的问题。你可以为每一个人物角色列一个问题清单，猜想他们在使用产品时会发生的细节

并将这些细节准备一个合理的解决方案。这个时候呢，你的交互方案的概念模型已经基本成型了，这个概念模型是通过解决问题脚本里的问题而得出的。

画线框图 & 制作原型：线框图和原型都是对你的方案进行具象化的步骤，借助当下流行的原型工具，例如Mockplus, Axure,Justinmind, Invision 等等一箩筐的工具。

8.专家评测 ：原型完成后，可以邀请设计师对你的原型做一个评估。

比较常用的评测方法是启发式评估法，而这种方法比较常见的标准是尼尔森交互设计法则。

以下是十条尼尔森交互设计法则：

(1)系统状态是否可见

(2)系统是否符合现实世界的习惯

(3)用户是否能自由地控制系统

(4)统一与标准

(5)错误防范

(6)减轻低用户的记忆负担

(7)灵活性和效率

(8)美观简洁

(9)帮助用户认知、了解错误，并从错误中恢复

(10)帮助文档

专家们各自将自己发现问题列出来，并将之与对应的法则相关联，或者根据法则来查找问题，然后专家们分别给自己的问题打分。专家们完成自己的问题列表后，一起讨论，将问题整合起来。常用的打分方法如下：4分 - 问题太过严重，一旦发生用户的进程将会终止并且无法恢复3分 - 问题较为严重，很难能恢复2分 - 问题一般严重，但是用户能够自行恢复，或者问题只会出现一次1分 - 问题较小，偶尔发生，并且不会对用户的进程产生太大影响0分：不算问题记住：评测完后别忘记修改你的线框图和原型！

10.用户评测：原型通过专家评测后，你可以找一些典型用户使用原型。你可以把任务列给他们，让他们自己尝试完成任务。中间遇到的问题可以记录下来，设计师通过观察来进行评分。比较常用的用户评测方法是Think Aloud,做法也很简单，你让用户使用原型完成指定的几个任务，让他们在使用过程中将他们的每一步和心中的想法说出来。如果他们忘记说或者不知道该怎么说，你可以适当提问。与此同时，你要将屏幕和声音录下来，可以用录屏软件或摄像头。完成后，你回放这些视频，把观察到的问题和用户报告的问题全部记录下来，与交互法则关联并且打分。

值得注意的有两点：1. 这些步骤并不是每步都是必须的，要根据项目去分析你所使用的方法。2. 这个过程中每一步都是和用户相关的，切莫主观臆断。

实训日期： 成绩：

实训7 App项目交互设计(必做)

通过交互效果的添加，展示App项目的结构关系，使用户在使用App时获得良实训目的 好的用户体验。制作元素展示动画和页面展示动画，便于开发人员准确理解UI设计意图。

实训内容 制作元素交互效果，制作页面的交互效果。

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

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

实训要求

实 训 过 程 记 录

步骤简述：

制作元素交互效果，制作页面的交互效果。

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

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

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

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

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

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

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

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

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

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

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

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

13.上面的操作都只是在“主页”里面的操作，只有在“主页”点击才会跳转到别的页面，

我们所要做的是在每个页面都有同样的效果，所以我们将刚才在“主页”的交互操作分别复制到剩余三个页面中；

按住Shift分别选中四个交互效果，然后ctrl+c复制到各个页面中粘贴。

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

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

实训日期： 成绩：

实训9 向上或向下适配(必做)

实训目的

通过输出不同倍率的素材，适配采用不同分辨率屏幕的设备，以获得最好的浏览效果。

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

教师指导 2 学时，学生课后练习 4 学时以上

需完成iOS系统App3种适配元素输出；Android系统App5种适配元素输出，如下图。

实训要求

实 训 过 程 记 录

步骤简述：

1 手机屏幕的尺寸相同，如果屏幕的分辨率越大，那么图片显示的就会越小，因为屏幕的像素越大，那么图片在屏幕中占据的空间比例也就越小。

2 手机的分辨率相同，如果屏幕的尺寸越大，那么图片显示的就会越大。

所以，为了保证在不同的机型下，实现相同的显示效果，需要综合这两个因素，即屏幕密度的概念。

先了解一下ppi及dpi的概念：

dpi是dot per inch，每英寸多少点，ppi是 pixel per inch，每英寸像素数，针对显示器的设计时，dpi=ppi(ppi表示显示设备的点密度，dpi表示印刷品点密度)

这样，我们就可以选取一个基准的ppi，然后通过比例计算出目标设备需要显示实际像素点，以保证物理尺寸的一致，在Android系统中有一个根据dpi转换的单位dp(独立设备像素)，1dp表示在屏幕点密度为160ppi时1px长度，dp与px的转换公式为px=dp*(ppi/160)通过这样转换，我们即可保证在不同的设备上，实现相同的显示效果。

对于ios系统而言，我了解的不多，通过在网上查看一些相关的知识，在此稍作总结：

在ios中也存在一个抽象的表示尺寸的概念，即点，只不过由于ios的设备差距不是特别大，不需要像android那样通过ppi进行转换计算，同时，4、4s、5、5s、6的ppi都是相同的，虽然宽度及高度有所变化，但是对于图片影响不大，只是布局的及布局的宽高需要处理，但是对于6p而言，它的ppi与之前的设备不同，如果使用同一张图的话，图片显示会变小，所以需要为6p需要更大尺寸的图片。

同时在6及6p上，有一个display zoom的概念，即放大显示，在display zoom的模式下，6会显示5s尺寸的布局，而6p会显示6尺寸的布局，这样会相当于减少了画布的大小，从而达到放大显示的目的，但是这样会造成出来的图像失真。

1. 客户端的设计原则

1）手机本身的物理特性受限引起的指南：

a) 客户端的文字输入，必须要降到最低：由于手机在输入上的低效性，在设计的过程中，应尽量减少用户的输入，如果有可能可以设置默认值，或者让用户选择目标值。

b) 客户端的信息结构好，屏与屏之间的逻辑关系清晰：由于手机屏幕都普遍较小，即使有4吋屏，那也只能展示较少的信息量，因此，在手机设计上，更需要有清晰的信息架构，用户知道当前在哪儿，并能返回到哪儿。

c) 客户端的操作、功能不要隐藏太深，重要功能都需要在界面中有适当的提示：由于手机屏幕较小，不能展示所有的信息。因此，对重要的、使用频率高的功能或信息放在最重要的位置，并在首页上展示或指示。

2）手机的移动特性引起的指南：

a) 客户端的最主要的功能操作，用单手可以完成：手机的使用情景多样性，在很多情景下，用户都只能单手来操作手机，因此，在客户端的设计过程中，需要考虑最重要的核心功能，能否单手操作完成。

b) 客户端的界面必须简洁、操作简单，操作步骤少：由于用户操作情景复杂，在使用客户端的过程可能有额外的认知负荷，因此，在设计客户端的过程中，逻辑必须简单，操作步骤也要减少。

c) 客户端的界面层次不要太深，最好不要超过3级：

d) 客户端的提示包括界面、声音、振动多种形式：用户在操作手机时，往往不会一直盯着手机屏幕看，因此，很多手机状态页面的切换，脱离了用户的视线，这时，必须要提供视觉之外的其他感觉通道的信息（如听觉、触觉等），来对用户做提示。

3）其他原则

a) 客户端UI的适配不必恪守所有的平台都保持一致，只要一些品牌的关键元素能体现即可：

b) 客户端的主要操作方式（框架、导航、按键功能及软键对应方式等）应与所承载的手机操作系统保持一致：客户端都承载在某款具体的手机平台中，而用户会对当前的手机平台很熟悉，因此，在设计的过程中，需要更好地理解当前的手机平台，并使客户端的设计与手机系统的设计逻辑保持一致。

2. 手机客户端设计适配的步骤：

个人认为，客户端的适配要以一个平台为起始，但是要着眼于多个平台。

1) 根据公司的战略，选择一个最先切入的平台；

2) 了解该平台的UI 设计规范，可用的UI 控件及交互原则；

3) 确定切入的屏幕大小，以此来设计第一个客户端，但是要考虑适配其他屏幕的可能性，是自适应来扩展或者缩小；

4) 根据平台及屏幕大小，来选择一款最典型的手机，开始客户端的交互设计。

5) 确定客户端的核心目的。如为娱乐为主的，应在设计方式更娱乐性；功能性完成目的为主的，以更易用性为主；

6) 根据客户端的功能和内容，来设计客户端的信息架构；

7) 根据UCD的原则，来完成客户端的交互原型；

在交互原型的过程中，需要考虑手机适配的三因素（平台、屏幕、触摸/非触摸），以便将来的适配。

移动设备客户端交互适配设计屏幕大小

随着各个手机操作系统的应用平台的上线，几乎所有的互联网应用都在往手机上迁移。然而手机与PC 不一样，PC经过了多年的发展，在设计上形成了很多不成文的规则，如网页的宽度都在960px左右【当然，由于整体的电脑屏幕往大尺寸及高分辨发展，除了背景宽屏自适应外，不少网页也正朝着更宽的方向上发展】。当前的手机种类繁多，手机屏幕的大小、比例各异，并且手机的屏幕本身就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性，同时还要提高每个手机屏幕的使用效率，这就存在着很多的矛盾点。

实训日期： 成绩