移动端UI设计

移动端UI设计是数字媒体艺术专业的必须课程。本书通过对数字移动媒体UI设计理论知识与制作规范，详实的案例讲解使读者具备一定设计界面与图标的审美能力与制作能力。能较好的将学习理论知识与实际案例相结合，使读者更容易理解同时也容易掌握制作软件的能力。本书共分为11章，第1章对数字移动媒体基础理论知识进行介绍。第2章介绍UI设计的基础知识、第3章介绍了图形创意表达方法。第4章介绍了图标设计的方法规范与流程。第5章介绍了图标设计的风格表达。第6章介绍了数字移动媒体UI设计规范。第7章介绍了数字媒体UI的板式构成。第8章介绍了数字移动媒体UI的色彩设计。第9章主要介绍了不同风格的UI图标设计与制作案例。第10章介绍了数字移动媒体的主题式UI整体设计。第11章介绍了优秀UI界面设计赏析。

第 1 章 UI版式布局与形式美 1.1 导航设计 002 1.1.1 跳板式 002 1.1.2 列表菜单式 003 1.1.3 陈列馆式 003 1.1.4 仪表式 004 1.1.5 超级菜单式 004 1.1.6 图标轮盘式 004 1.1.7 图片式 005 1.2 界面布局设计 006 1.2.1 竖排列表 006 1.2.2 横排方块 006 1.2.3 九宫格 007 1.2.4 Tab 007 1.2.5 多面板 007 1.2.6 手风琴 008 1.2.7 弹出框 008 1.2.8 侧边栏 008 1.2.9 标签式 009 1.3 界面设计的形式美法则 009 1.3.1 重复与近似 009 1.3.2 渐变与节奏 010 1.3.3 对比与调和 010 1.3.4 比例与适度 011 1.3.5 变化与统一 011 1.3.6 虚实与留白 012 V 移动端UI设计 第 2 章 UI情感化设计与视知觉原则 2.1 UI中的情感化设计 014 2.1.1 何为情感化设计 014 2.1.2 苹果公司UI设计的情感化之路 014 2.1.3 情感化设计在UI设计中的作用 016 2.2 格式塔视知觉原则 018 2.2.1 相似性 018 2.2.2 接近性 018 2.2.3 连续性 019 2.2.4 闭合性 019 2.2.5 图形与背景 019 第 3 章 UI色彩设计与心理效应 3.1 色彩原理 022 3.1.1 色彩的概念 022 3.1.2 色彩的属性 023 3.1.3 数字色彩 023 3.2 色彩的对比与调和 024 3.2.1 色彩对比 025 3.2.2 色彩对比的种类 026 3.2.3 色彩的调和 028 3.2.4 色彩调和的种类 029 3.3 色彩的心理效应 030 3.4 色彩搭配的技巧 034 3.4.1 主色、副色、点缀色构成原则 034 3.4.2 色彩搭配的原则 034 3.4.3 主体色搭配的技巧 035 3.4.4 色环搭配指南 036 第 4 章 图标的创意设计 4.1 图标色彩搭配与应用 040 4.1.1 经典色系 040 4.1.2 图标与界面配色注意事项 043 4.2 图标的基本知识 046 VI 目 录 4.2.1 图标概述 046 4.2.2 图标分类 046 4.2.3 图标设计流程 049 4.3 图标风格表达 050 4.3.1 扁平化设计 050 4.3.2 拟物化设计 053 4.3.3 扁平化+拟物化 055 4.4 图标创意表达 056 4.4.1 图标创意构想―头脑风暴 056 4.4.2 图形轮廓联想――图形联想 057 4.4.3 图标草图表达――视觉手绘 058 4.5 图标制作基础实训――时钟图标 058 第 5 章 流行元素设计案例 5.1 UI的字体效果 067 案例1：星星字体效果 067 案例2：牛仔布料字体效果 069 案例3：烟雾水墨字体效果 076 案例4：霓虹灯字体效果 080 案例5：斑点字体效果 083 案例6：立体字效果 084 案例7：车灯字体效果 086 5.2 UI图标的质感表现 089 案例8：瓷器质感效果 089 案例9：木纹质感效果 093 案例10：金属质感效果 097 案例11：布料质感效果 101 案例12：玻璃质感效果 106 案例13：塑料质感效果 113 案例14：皮质质感效果 118 5.3 立体UI图标设计 137 案例15：3D字体图标设计 137 案例16：手机应用图标设计 140 案例17：面具表情图标设计 144 VII 移动端UI设计 案例18：企业Logo图标设计 148 案例19：VR实验室Logo设计 154 5.4 功能图标案例设计与制作 156 案例20：汽车HMI图标制作 156 案例21：办公文件管理图标制作 162 案例22：收音机图标制作 167 案例23：手电筒图标制作 173 案例24：天气预报图标设计 176 5.5 UI局部功能设计与案例制作 179 案例25：登录UI设计 179 案例26：导航图标UI设计 179 案例27：导航栏设计 181 案例28：主题图标设计 187 第 6 章 主题式UI创作案例研究 6.1 民间工艺主题UI设计 193 案例1：一石砖 193 案例2：民艺 196 6.2 怀旧主题UI设计 200 案例3：老物件 200 案例4：时光π 207 6.3 书卷文化主题UI设计 210 案例5：余音 210 6.4 汉像画主题UI设计 214 案例6：汉像画 214 6.5 六一儿童节主题UI设计 219 案例7：童说童画 219 案例8：糖友记 223 6.6 亲子阅读主题UI设计 225 案例9：Light·House 225 案例10：檬阅 230 6.7 保护小动物主题UI设计 233 案例11：Pet-life 233 案例12：爱宠 236 VIII 目 录 6.8 快乐涂鸦主题UI设计 238 案例13：乐涂 238 案例14：萌叽 241 第 7 章 优秀作品展示 作品1 《木活字》 246 作品2 《北京楼燕儿》 248 作品3 《龙龙带你识九城》 249 作品4 《千年活字VR虚拟体验馆设计》 250 作品5 《收集年味》 251 作品6 《晓红豆》 253