新書推薦：
《
财之道丛书·太古传：商业帝国200年
》
售價：HK$
153.6
《
不要相信你所想的一切：如何停止过度思考，克服焦虑、自我怀疑和自我破坏
》
售價：HK$
50.4
《
万历四大征（全两册）
》
售價：HK$
117.6
《
凝望：我的摄影与人生
》
售價：HK$
129.6
《
工业机器人从基础到实战
》
售價：HK$
153.6
《
重症产科.1
》
售價：HK$
71.8
《
财之道丛书·表层的真理：当代经济学与社会
》
售價：HK$
105.6
《
世界服饰艺术史
》
售價：HK$
309.6
|
| 編輯推薦： |
|
超全实例：本书在编写过程中以实际的界面设计案例制作重点为线索，依次从界面元素设计基础、界面元素制作、各类风格图标的设计再到*后的综合UI界面设计实战，几乎囊括了所有与界面设计相关的专业知识，真正做到超全面。? 大量案例100 ：本书的案例足有100 ，可谓全面又丰富，同时每个案例都经过精心编写，将细节及整体的视觉表现完美地讲解，真正的超值之选。? 超详细案例详解：本书中所有案例全部为详情文字操作说明与实际操作相结合的写作手法，通过阅读文字与观察操作步骤中的图像达到边学边操作的目的。? 特色的段落讲解：作者根据多年的教学经验，将界面设计中常见的难点及疑点通过细致的讲解及提示的形式展现出来，使读者在学习的过程中能真正掌握技能。? 超值套餐：本书附增超值资料包，内容包括所有案例的调用素材和源文件，并包含本书所有课堂案例的高清多媒体有声视频教学录像文件。
|
| 內容簡介： |
《APP移动界面美化设计案例100+》一书通过大量的综合案例，介绍了如何设计与制作APP移动界面，本书分为9章，从前至后依次讲解界面设计的基础知识及制作重点，每章都包括了界面及元素制作的细节，从界面元素设计基础、常用按钮及旋钮的制作、各类风格图标到综合UI界面设计实战逐一进行讲解，使读者由浅入深，逐步了解界面设计思路与制作过程。本书以一种全新的授受方式，为读者呈现界面设计中的重点与制作方法，使读者全面、深入地掌握各种风格界面的设计案例，从而成为界面设计的高手。
《APP移动界面美化设计案例100+》还为读者提供多媒体语音视频教学内容，读者可通过扫描手机二维码获得，不但收录了本书中所有的调用素材及源文件，同时还包含了本书所有实例的多媒体高清有声视频录像，让读者的界面学习之路更加顺达，让学习效率翻倍。
本书内容专业、简练，操作案例精美实用、讲解详尽，适合UI设计入门者及爱好者阅读，同时也适合各类院校设计专业的学生阅读使用，还可以作为高等院校平面设计、网站设计、游戏设计等相关专业的教辅图书及相关师生的参考用书。
|
| 關於作者： |
|
魏学智：助理研究员，九三学社社员；北京市学习指导师，高级色彩搭配师；北京印刷学院艺术设计专业文学学士，北京工业大学软件工程专业硕士；现工作于北京开放大学，京学网课程资源建设主管；设计开发的课程多次获教育部及行业系统大奖，并著有多部畅销图书。吕小星：教授，九三学社社员；沈阳工业大学工学学士，北京理工大学工学硕士；北京市高校教学名师，国家精品课程多媒体技术基础及应用主持、主讲。中国多媒体专业委员会委员，《中国图像图形学报》审稿专家。现任北京开放大学教授，校学术委员会委员。曾出版多部多媒体技术教材，并获得北京市精品教材奖。
|
| 目錄：
|
目录
第1章 图标与界面设计基础 ........... 1
实战1 认识界面UI设计 ............. 2
实战2 智能手机操作系统有哪些 2
实战3 界面设计常用单位 ............ 3
实战4 界面设计常用图像格式 .... 3
实战5 低保真与高保真原型设计 4
实战6 界面设计常用的软件 ........ 4
实战7 按钮图标尺寸要求 ............ 5
实战8 界面设计准则 . 6
实战9 界面设计与团队合作关系 7
实战10 界面设计色彩学 .............. 7
实战11 色彩的含义 ... 8
实战12 常见界面设计配色方案 10
实战13 界面设计配色秘笈 ........ 11
第2章 界面元素设计基础 .............15
实战14 搜索框 ......... 16
实战15 下单按钮 ..... 19
实战16 下载按钮 ..... 20
实战17 简洁进度条 . 21
实战18 音量滑动条 . 22
实战19 糖果进度条 . 23
实战20 开关元素 ..... 27
实战21 确认及取消按钮 ............ 29
实战22 状态按钮 ..... 30
实战23 下载指示栏 . 33
实战24 图标应用栏 . 38
实战25 下拉式菜单 . 41
实战26 信息接收控件 ................ 43
实战27 运行进度标示 ................ 48
实战28 信息图标 ..... 51
第3章 常用按钮及旋钮的制作 ......55
实战29 简洁按键开关 ................ 56
实战30 立体多边形按钮 ............ 57
实战31 滑动按钮 ..... 60
实战32 播放控制按钮 ................ 63
实战33 滑动调节按钮 ................ 66
实战34 五维按键 ..... 71
实战35 音量旋钮 ..... 76
实战36 简洁旋钮 ..... 80
第4章 超强表现力之写实风格 ......85
实战37 写实SIM卡 .. 86
实战38 写实收音机 . 88
实战39 质感金属云 . 92
实战40 写实光盘 ..... 97
实战41 质感日历 ... 102
实战42 质感CD包装 ................. 108
第5章 主流扁平图标与界面的设计 ........... 115
实战43 循环图标 ... 116
实战44 扁平分享图标 .............. 117
实战45 拼贴APP图标 ............... 120
实战46 信封图标 ... 122
实战47 回收文件管理界面 ...... 124
实战48 信息对话界面 .............. 126
实战49 企业管理登录界面 ...... 129
实战50 美食APP界面 ............... 130
实战51 智能手表界面 .............. 133
实战52 简洁音乐播放界面 ...... 134
实战53 简洁天气界面 .............. 137
实战54 运动图标 ... 142
实战55 加速图标 ... 144
实战56 清新音乐图标 .............. 147
实战57 文件管理图标 .............. 149
实战58 新闻应用图标 .............. 152
实战59 网球游戏图标 .............. 154
实战60 餐厅元素图标 .............. 156
实战61 资讯图标 ... 158
实战62 盾牌图标 ... 160
实战63 卫士应用图标 .............. 162
第6章 苹果风格界面图标的设计 165
实战64 苹果音乐图标 .............. 166
实战65 经典应用商店图标 ...... 167
实战66 秋景主题登录界面 ...... 170
实战67 主题天气界面 .............. 172
实战68 私人电台界面 .............. 175
实战69 邮件图标 ... 177
实战70 无线连接图标 .............. 181
实战71 社交应用图标 .............. 184
实战72 天气图标 ... 186
实战73 涂鸦应用图标 .............. 187
实战74 时钟图标 ... 191
实战75 调节器图标 .................. 193
实战76 炫彩开关图标 .............. 195
实战77 宠物乐园图标 .............. 198
第7章 流行风图标界面的设计 ....205
实战78 美丽拍图标 .................. 206
实战79 粉色控制图标 .............. 210
实战80 简洁时钟图标 .............. 213
实战81 存储数据界面 .............. 218
实战82 游客统计界面 .............. 222
实战83 财富应用图标 .............. 225
实战84 简洁罗盘图标 .............. 230
实战85 简洁进程图标 .............. 235
第8章 常用图标界面设计集合 ....239
实战86 股票应用图标 .............. 240
实战87 清新邮件图标 .............. 243
实战88 清新音乐图标 .............. 246
实战89 生产力APP登录界面 ... 248
实战90 mini音乐播放器 ........... 254
实战91 计算器界面 .................. 258
实战92 数据进程界面 .............. 261
第9章 UI界面综合设计实战 .......269
实战93 日程应用界面 .............. 270
实战94 酒店登录界面 .............. 272
实战95 iPhone汇率换算界面 ... 275
实战96 四叶草插件界面 .......... 282
实战97 Android概念手机界面 . 288
实战98 手机游戏个人界面 ...... 299
实战99 Windows 10手机界面 .. 304
实战100 iPad旅游应用界面 ..... 307
|
| 內容試閱：
|
前言
随着时代的发展，现代人类通信正步入一个全新的阶段，回首多年前，人们对于通信产品的需求还很原始，那些设备的功能十分单一，只具备最简单的通信能力。而经过发展潮流的洗礼，到今天，人们对于通信设备的要求已经越来越高，比如更为宽屏幕的手机、多媒体设备、平板电脑等，这些通信、数码设备的功能正变得越来越强大，从多媒体应用、社交娱乐、智能应用甚至到移动支付等无所不包，丰富了人们的生活，带来了很多便利，而且这些设备的操作界面与多年前也大不一样了，变得更加友好、更加智能。本书所讲解的，正是关于当下智能设备界面的设计与制作。本书全面讲解智能设备界面的设计、美化，通过大量的实例，全方位解读界面设计知识，从基础进阶到高级，循序渐进地依次解读界面设计与制作的重点及要领。本书的目的，是讲解如何设计出精美漂亮的界面，专注于美学在界面设计中的应用，并与案例完美融合，让读者达到一个全新的设计水准。本书特色与亮点超全实例：本书在编写过程中以实际的界面设计案例为线索，内容从界面元素设计基础、界面元素制作、各类风格图标的设计再到最后的综合UI界面设计实战，几乎囊括了所有与界面设计相关的专业知识，真正做到了超全面。大量案例：本书的案例足足达到100 ，如此大量的案例可谓全面而丰富，每个案例都经过精心编写，对细节及整体的视觉表现做完美的讲解，是真正的超值之选。超精细案例详解：本书中的所有案例全部采用与实际操作相结合的图文配合写作手法，读者通过对文字的阅读及观察操作步骤中的图像，可达到边学边操作的目的。特色的段落讲解：作者根据多年的教学经验，将界面设计中常见的难点及疑点通过详解及提示的形式展现出来，使读者在学习的过程中能真正掌握所学。超值附赠套餐：本书提供下载资源，内容包括所有案例的调用素材和源文件，读者可通过扫描手机二维码获得。书中各案例的有声教学视频皆可直接扫码观看。本书由魏学智、吕小星共同编著，参与编写的还有余昊、桑晓洁、王世迪、吕保成、蔡桢桢、王巧伶、胡瑞芳、夏红军、王香、张田田等，在此感谢所有创作人员对本书付出的艰辛，特别感谢北京开放大学对本书的大力支持。当然，在创作的过程中，限于作者水平，书中难免会有不足之处，希望广大读者批评指正。如果在学习过程中发现问题，或有更好的建议，欢迎发邮件到bookshelp@163.com与我们联系。 编 者
第7章 流行风图标界面的设计APP本章介绍本章讲解流行风图标界面设计，流行风，顾名思义，是指当下最流行的图标设计风格，本章精选了当下流行的多个实例，从最实用和流行的风格入手，对图标界面的制作进行完全展示，通过对此种风格的了解和学习，可以完全掌握当下流行风图标界面的设计方向。要点索引学会美丽拍图标的绘制学习简洁时钟图标的绘制了解财富应用图标的制作思路掌握存储数据界面的设计掌握游客统计界面的设计
实战78 美丽拍图标
本例讲解美丽拍图标制作，整个制作过程十分简单，重点在于图标的中细节的刻画，为平面图形添加相应的图层样式，制作出具有立体视觉效果的图形，最终效果如图7.1所示。图7.1 最终效果Step 01 绘制矩形并添加阴影1 选择菜单栏中的【文件】|【新建】命令，在弹出的对话框中设置【宽度】为600像素，【高度】为450像素，【分辨率】为72像素英寸，新建一个空白画布，将画布填充为深蓝色R：9，G：18，B：32。2 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为白色，设置【描边】为无，【半径】为60像素，在画布中按住Shift键绘制一个圆角矩形，此时将生成一个【圆角矩形 1】图层，如图7.2所示。图7.2 绘制图形3 在【图层】面板中，选中【圆角矩形 1】图层，单击面板底部的【添加图层样式】按钮，在菜单中选择【渐变叠加】命令，在弹出的对话框中将【渐变】更改为蓝色R：35，G：160，B：254到青色R：62，G：255，B：248，完成之后单击【确定】按钮，如图7.3所示。图7.3 设置渐变叠加 4 选择工具箱中的【椭圆工具】，在选项栏中将【填充】更改为蓝色R：36，G：160，B：254，设置【描边】为无，在【圆角矩形 1】图层中的图形底部位置绘制一个椭圆图形，此时将生成一个【椭圆1】图层，如图7.4所示。图7.4 绘制图形5 选中【椭圆 1】图层，选择菜单栏中的【滤镜】|【模糊】|【高斯模糊】命令，在弹出的对话框中将【半径】更改为110像素，完成之后单击【确定】按钮，如图7.5所示。图7.5 设置高斯模糊6 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为黑色，设置【描边】为无，【半径】为50像素，在图标底部后方位置绘制一个圆角矩形，此时将生成一个【圆角矩形 2】图层，如图7.6所示。图7.6 绘制图形7 选中【圆角矩形 2】图层，按Ctrl T组合键对其执行【自由变换】命令，单击鼠标右键，从弹出的快捷菜单中选择【透视】命令，拖动变形框将图形变形，完成之后按Enter键确认，如图7.7所示。图7.7 将图形变形8 选中【圆角矩形 2】图层，按Ctrl Alt F组合键打开【高斯模糊】命令对话框，在弹出的对话框中将【半径】更改为3像素，完成之后单击【确定】按钮，如图7.8所示。图7.8 设置高斯模糊9 在【图层】面板中，选中【圆角矩形 2】图层，单击面板底部的【添加图层蒙版】按钮，添加图层蒙版，如图7.9所示。10 选择工具箱中的【画笔工具】，在画布中单击鼠标右键，在弹出的面板中选择一种圆角笔触，将【大小】更改为150像素，【硬度】更改为0%，如图7.10所示。图7.9 添加图层蒙版 图7.10 设置笔触11 将前景色更改为黑色，在其图像上部分区域涂抹，将其隐藏，如图7.11所示。图7.11 隐藏图像Step 02 绘制标志图形1 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为白色，设置【描边】为无，【半径】为30像素，在图标位置绘制一个圆角矩形，此时将生成一个【圆角矩形 3】图层，如图7.12所示。图7.12 绘制圆角矩形32 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为黑色，设置【描边】为无，【半径】为5像素，在刚才绘制的图形靠左侧位置绘制一个圆角矩形，此时将生成一个【圆角矩形 4】图层，如图7.13所示。图7.13 绘制圆角矩形43 选中【圆角矩形 4】图层，按Ctrl T组合键对其执行【自由变换】命令，当出现变形框以后，在选项栏中【旋转】后方的文本框中输入45，再分别将图形高度缩小，宽度增加，完成之后按Enter键确认，如图7.14所示。4 选择工具箱中的【删除锚点工具】，单击图形左侧锚点将其删除，再将图形稍微移动，如图7.15所示。图7.14 变换图形 图7.15 删除锚点5 在【图层】面板中，选中【圆角矩形 3】图层，单击面板底部的【添加图层蒙版】按钮，为其添加图层蒙版，如图7.16所示。6 按住Ctrl键单击【圆角矩形 4】图层缩览图，将其载入选区，将选区填充为黑色，将部分图形隐藏，完成之后按Ctrl D组合键将选区取消，如图7.17所示。图7.16 添加图层蒙版 图7.17 隐藏图形提示隐藏图形制作镂空效果之后【圆角矩形 4】图层无用，可以将其删除。7 选择工具箱中的【圆角矩形工具】，在选项栏中将【填充】更改为白色，设置【描边】为无，【半径】为5像素，在刚才绘制的图形靠右侧位置绘制一个圆角矩形，此时将生成一个【圆角矩形 4】图层，如图7.18所示。图7.18 绘制图形8 以刚才同样的方法对【圆角矩形 4】图层中的图形进行变换并删除部分锚点后，适当移动图形，如图7.19所示。图7.19 删除锚点并移动图形Step 03 制作细节部分1 选择工具箱中的【钢笔工具】，在选项栏中单击【选择工具模式】按钮，在弹出的选项中选择【形状】，将【填充】更改为无，【描边】更改为无，在图标位置绘制1个不规则图形，此时将生成一个【形状1】图层，如图7.20所示。图7.20 绘制图形2 在【图层】面板中，选中【形状1】图层，单击面板底部的【添加图层样式】按钮，在菜单中选择【内阴影】命令，在弹出的对话框中将【颜色】更改为青色R：56，G：210，B：254，【不透明度】更改为50%，【距离】更改为6像素，【大小】更改为13像素，如图7.21所示。图7.21 设置内阴影3 在【图层】面板中，选中【形状 1】图层，单击面板底部的【添加图层蒙版】按钮，为图层添加图层蒙版，如图7.22所示。4 选择工具箱中的【画笔工具】，在画布中单击鼠标右键，在弹出的面板中选择一种圆角笔触，将【大小】更改为50像素，【硬度】更改为0%，如图7.23所示。图7.22 添加图层蒙版 图7.23 设置笔触5 将前景色更改为黑色，在其图像上部分区域涂抹将其隐藏，如图7.24所示。图7.24 隐藏图像6 在【图层】面板中，选中【形状 1】图层，将其拖至面板底部的【创建新图层】按钮上，复制1个【形状 1 拷贝】图层，如图7.25所示。7 选中【形状 1 拷贝】图层，按Ctrl T组合键对其执行【自由变换】命令，单击鼠标右键，从弹出的快捷菜单中选择【垂直翻转】命令，完成之后按Enter键确认，将图形向下移动至与原图形相对的位置，双击其图层样式名称，在弹出的对话框中取消勾选【使用全局光】复选框，将【角度】更改为-120度，完成之后单击【确定】按钮，如图7.26所示。图7.25 复制图层 图7.26 变换图形8 在【图层】面板中，选中【形状 1 拷贝】图层，将其拖至面板底部的【创建新图层】按钮上，复制1个【形状 1 拷贝2】图层，如图7.27所示。9 选中【形状 1 拷贝2】图层，按Ctrl T组合键对其执行【自由变换】命令，将图形向右侧移动并适当旋转，完成之后按Enter键确认，再选择工具箱中的【直接选择工具】适当调整图形锚点，再双击其图层样式名称，在弹出的对话框中取消勾选【使用全局光】复选框，将【角度】更改为-60度，完成之后单击【确定】按钮，如图7.28所示。图7.27 复制图层 图7.28 变换图形10 选择工具箱中的【矩形工具】，在选项栏中将【填充】更改为无，设置【描边】为无，在图标靠右侧位置绘制一个矩形，此时将生成一个【矩形 1】图层，将其移至【圆角矩形 4】图层上笔触，将【大小】更改为60像素，【硬度】更改为0%，如图7.34所示。图7.33 添加图层蒙版 图7.34 设置笔触16 将前景色更改为黑色，在图像上部区域涂抹，将其隐藏，这样就完成了效果制作，最终效果如图7.35所示。图7.35 完成了制作
|
|
購物車/收銀台(
0
) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
