购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

实训任务1.2
图标设计

1.学习目标

(1)正确识读任务书;

(2)了解图标设计原则和风格;

(3)在完成任务1.1的基础上提出修改方案。

2.任务书(表1-4)

表1-4 任务书

3.工作准备

(1)仔细阅读工作任务书,进行分析和讨论并做好进度记录;

(2)充分了解项目背景,确定图标设计方向;

(3)结合任务书分析图标设计改版的难点;

(4)图标草图的手绘工具。

4.引入问题
图标的设计原则是什么?

1)更具识别性

图标本身的功能是第一时间传递信息。因而我们需要使用更加具象的视觉语言,使得信息传达更为准确。

2)更具一致性

在设计图标的过程中,使图标具有一致性,是一套图标系统成功的关键。这里的统一性不是指所有的图标都要用相同的元素,而是指图标线条的粗细,断点的距离,元素的大小,切割的距离,色调、风格的一致。所有的图标都用一样的元素时,用户反而会识别困难。

3)适度的情感体现

在设计图标方案时,采用丰富的造型与颜色,使页面更具亲和力,可以让用户在使用界面时,减少对产品界面的单调风格的感知(图1-11、图1-12)。

图1-11 情感化的图标1

图1-12 情感化的图标2

5.工作计划

首先每位学生根据表1-5完成相关任务;然后教师根据学生的任务完成情况提出改进意见。

表1-5 工作计划

6.实施提示

(1)认真阅读任务书和“引导性问题”中的知识点;

(2)根据任务1的分析,提出改良方案;

(3)根据大广赛图标改良方案完成创意图标设计草图。

图1-13是蓝瑶同学的手绘方案,这一套图标在大广赛原有方案的基础上进行了改良。首先,图标的外形框架更加统一,大部分图标以纸张文件作为主要造型。其次,图标信息传递更准确。例如,原来的“获奖名单”以圆角五星作为图标,不能与文字信息相匹配。目前的图标设计内容为“名单+奖杯”,表达的信息更准确。然后,图标的外观、细节设计与网页的整体风格相一致。不过,这套方案有一些细节还需要改进,图标内部的一些线条需要删减,这样能让图标更加简洁(图1-13)。

7.评价反馈

按学生自评、小组互评、教师评价三种方式评定每位学生完成学习任务的情况,并将学生自评成绩占总成绩的20%、小组互评成绩占总成绩的30%、教师评价成绩占总成绩的50%作为每位学生的综合评价结果(表1-6)。

图1-13 蓝瑶同学图标手绘稿

表1-6 评价表

8.拓展学习

扫描下方二维码,获取更多UI资讯。

图标设计 3lC0c4E/UyweOd94mavKjA/eI36yVmsCygH9+h6CflJcI0jt/Gcm7mdk0UvHaTqW

点击中间区域
呼出菜单
上一章
目录
下一章
×