关于我们
![]() ![]() |
移动端UI元素图形创意设计案例教程 读者对象:计算机软件技术专业学生、计算机数字媒体专业学生、平面设计专业学生、包装设计专业学生、产品设计专业学生等。
本书对接1+X职业技能等级证书考试内容,融入课程思政内容,是岗课赛证融通的项目化教材。本书以培养学生的UI元素图形创意能力为根本,结合绘图软件的功能演示,通过案例有针对性地讲解UI项目的设计过程及软件的操作步骤,从而达到让学生熟练掌握绘图软件的目的。案例所使用的软件包括Photoshop、Illustrator和After Effects。全书共10个项目,项目1是概述,包含UI设计的基础知识和3个软件的功能简述。项目2~项目9是各个案例的分步解析,通过案例讲解界面构图、图形元素和色彩、字体规范等。项目10是综合实战,包括从项目分析、策划和设计到制作规范和如何完成的全过程讲解。本书不仅可以帮助学生迅速进入职场角色,还提供了丰富的教学资源帮助教师快速开课。本书主要适合作为软件技术专业,以及UI方向和艺术设计类相关专业的高职本科、专科学生的教材。
魏云柯,硕士研究生毕业于四川大学,任教于广东科学技术职业学院。现任软件技术UI方向团队负责人,澳门设计师协会会员,中外设计研究院理事。有多年设计和一线教学经验,设计作品曾获得亚洲设计联盟主办首届亚洲设计双年展入选作品,并在韩国展出;秘鲁“水”主题海报设计比赛入选作品,并在秘鲁展出;中国创意设计年鉴.2018/2019金奖一项、银奖两项、铜奖一项;第七届中国高等院校设计大赛一等奖一项、三等奖两项;第10届中国高校美术作品学年展三等奖等。指导学生参加大学生广告艺术大赛、广东省大学生计算机设计大赛等获得多个等级奖。
项目1 概述............................................................................................ 001
1.1 UI 设计的概念和设计原则 ....................................................................... 001 1.2 UI 设计的流程 ......................................................................................... 003 1.3 UI 元素的分类 ......................................................................................... 007 1.4 UI 版面和字体设计 .................................................................................. 009 1.4.1 版面设计的思路 ......................................................................... 010 1.4.2 版面设计的步骤 ......................................................................... 015 1.4.3 字体设计在图标和弹出窗口中的运用 ......................................... 016 1.4.4 字体设计的方法和步骤 ............................................................... 017 1.5 UI 色彩和图形设计概述 .......................................................................... 019 1.5.1 UI 色彩运用法则......................................................................... 019 1.5.2 色彩规范的制作 ......................................................................... 021 1.5.3 图形设计在UI 中的运用 ............................................................. 022 1.5.4 图形设计的方法和步骤 ............................................................... 023 1.6 绘图软件Photoshop 界面工具和功能简述.............................................. 024 1.7 绘图软件Illustrator 界面工具和功能简述 ................................................ 027 1.8 动效软件After Effects 界面工具和功能简述 ........................................... 028 项目2 小学霸英语App 功能图标设计及绘制方法........................................... 030 2.1 功能图标的概念 ...................................................................................... 030 2.2 功能图标范例——已上线 ........................................................................ 030 2.3 功能图标的设计原则 ............................................................................... 032 2.4 功能图标的风格类型 ............................................................................... 035 2.5 功能图标的设计步骤 ............................................................................... 036 2.6 完整项目课堂演示+ 学生实操 小学霸英语App 底部标签栏图标设计及 绘制方法 ................................................................................................. 042 2.6.1 项目相关知识 ............................................................................. 042 2.6.2 项目准备与设计 ......................................................................... 042 2.6.3 项目实施 .................................................................................... 044 2.6.4 项目总结 .................................................................................... 055 2.7 拓展练习 ................................................................................................. 056 项目3 甜在心App 图标设计及绘制方法....................................................... 058 3.1 App 图标的概念 ...................................................................................... 058 3.2 App 图标范例——已上线 ........................................................................ 058 3.3 App 图标的设计原则 ............................................................................... 064 3.4 App 图标的设计步骤 ............................................................................... 064 3.5 完整项目课堂演示+ 学生实操 甜在心App 图标设计及绘制方法 ............ 070 3.5.1 项目相关知识 ............................................................................. 070 3.5.2 项目准备与设计 ......................................................................... 070 3.5.3 项目实施 .................................................................................... 072 3.5.4 项目总结 .................................................................................... 089 3.6 拓展练习 ................................................................................................. 091 项目4 桃兔社交通信App 图标和个人页设计及绘制方法.................................. 092 4.1 色彩的重要性 .......................................................................................... 092 4.2 什么是色彩 ............................................................................................. 092 4.3 色彩搭配方法 .......................................................................................... 096 4.4 优秀的图标和界面配色案例赏析 ............................................................. 099 4.5 使用绘图软件设置色彩 ........................................................................... 101 4.6 完整项目课堂演示+ 学生实操 桃兔社交通信App 图标和个人页设计及 绘制方法 ................................................................................................. 107 4.6.1 项目相关知识 ............................................................................. 107 4.6.2 项目准备与设计 ......................................................................... 108 4.6.3 项目实施 .................................................................................... 109 4.6.4 项目总结 .................................................................................... 124 4.7 拓展练习 ................................................................................................. 125 项目5 怪鱼旅行App 引导页设计及绘制方法..................................................126 5.1 引导页的概念 .......................................................................................... 126 5.2 引导页范例——已上线 ........................................................................... 126 5.3 引导页的设计原则................................................................................... 129 5.4 引导页的类别 .......................................................................................... 130 5.5 引导页的设计步骤................................................................................... 136 5.6 完整项目课堂演示+ 学生实操 怪鱼旅行App 引导页设计及绘制方法 ..... 139 5.6.1 项目相关知识 ............................................................................. 140 5.6.2 项目准备与设计 ......................................................................... 140 5.6.3 项目实施 .................................................................................... 142 5.6.4 项目总结 .................................................................................... 149 5.7 拓展练习 ................................................................................................. 150 项目6 “不期而遇”女装促销Banner 设计及绘制方法....................................152 6.1 Banner 的概念 ........................................................................................ 152 6.2 Banner 的设计原则 ................................................................................. 153 6.3 Banner 的设计步骤 ................................................................................. 155 6.4 完整项目课堂演示+ 学生实操 “不期而遇”女装促销Banner 设计及 绘制方法 ................................................................................................. 163 6.4.1 项目相关知识 ............................................................................. 164 6.4.2 项目准备与设计 ......................................................................... 164 6.4.3 项目实施 .................................................................................... 165 6.4.4 项目总结 .................................................................................... 170 6.5 拓展练习 ................................................................................................. 170 项目7 好又省家装详情页一屏和个人页一屏设计及绘制方法...............................172 7.1 详情页和个人页的概念 ........................................................................... 172 7.2 详情页和个人页范例——已上线 ............................................................. 173 7.3 详情页和个人页的设计原则 .................................................................... 180 7.4 详情页和个人页的设计步骤 .................................................................... 185 7.5 完整项目课堂演示+ 学生实操 好又省家装详情页一屏和个人页一屏设计 及绘制方法 ............................................................................................. 188 7.5.1 项目相关知识 ............................................................................. 188 7.5.2 项目准备与设计 ......................................................................... 188 7.5.3 项目实施 .................................................................................... 191 7.5.4 项目总结 .................................................................................... 194 7.6 拓展练习 ................................................................................................. 195 项目8 “Weather Icons”动态图标设计及绘制方法......................................196 8.1 动态图标的概念 ...................................................................................... 196 8.2 动态图标范例——已上线 ........................................................................ 197 8.3 动态图标的类型 ...................................................................................... 199 8.4 After Effects 操作入门 ............................................................................ 203 8.5 完整项目课堂演示+ 学生实操 “Weather Icons”动态图标设计及 绘制方法 ................................................................................................. 206 8.5.1 项目相关知识 ............................................................................. 208 8.5.2 项目准备与设计 ......................................................................... 208 8.5.3 项目实施 .................................................................................... 208 8.5.4 项目总结 .................................................................................... 215 8.6 拓展练习 ................................................................................................. 216 项目9 怪鱼旅行App 首页版式设计及绘制方法...............................................217 9.1 了解移动端界面版式设计 ........................................................................ 217 9.2 优秀的移动端App 首页版式范例——已上线 .......................................... 217 9.3 App 界面的布局构成 ............................................................................... 219 9.4 App 界面的设计原则 ............................................................................... 229 9.5 App 界面的设计规范 ............................................................................... 231 9.6 完整项目课堂演示+ 学生实操 怪鱼旅行App 首页版式设计及绘制方法 ... 232 9.6.1 项目相关知识 ............................................................................. 232 9.6.2 项目准备与设计 ......................................................................... 233 9.6.3 方案一项目实施 ......................................................................... 233 9.6.4 方案二项目实施 ......................................................................... 248 9.6.5 项目总结 .................................................................................... 249 9.7 拓展练习 ................................................................................................. 250 项目10 怦然乐动App 界面设计及绘制方法...................................................251 10.1 App 界面设计概述 ................................................................................ 251 10.2 项目启动 ............................................................................................... 251 10.3 项目调研与分析 .................................................................................... 252 10.4 系统设计 ............................................................................................... 260 10.5 视觉设计 ............................................................................................... 264 10.6 完整项目课堂演示+ 学生实操 怦然乐动App 界面 设计及绘制方法 ..... 268 10.6.1 项目相关知识 ........................................................................... 268 10.6.2 项目准备与设计 ....................................................................... 268 10.6.3 项目实施 .................................................................................. 268 10.6.4 项目总结 .................................................................................. 271 10.7 拓展练习 ............................................................................................... 272
你还可能感兴趣
我要评论
|