具体描述
移动UI视觉设计,是以移动设备为操作平台,对移动设备中使用的界面进行视觉设计,在创作中赋予界面情感意义,激起使用者的兴趣。视觉设计包括对界面进行风格设定、色彩搭配和功能布局等多个内容,为界面创作出华丽而实用的外衣。
《WoW!移动UI视觉设计全攻略》通过对移动设备三大主流操作系统的UI视觉设计的风格进行分析,讲解了APP用户界面的设计思路和制作过程,其中第1部分为基础篇,讲述了与移动设备相关的基础概念,以及Photoshop的绘图功能和修饰技巧;第2部分为入门篇,讲述了图标、按钮和滑块这三种基础的界面元素的设计和创作要点;第3部分为进阶篇,讲述了时间界面、播放器界面、浏览器界面、游戏界面和锁屏界面的设计要领和技巧;第4部分为提升篇,以项目要求的形式提出设计的内容,根据要求来对界面进行布局、配色和风格设定,展示给读者一个完整的APP界面的视觉设计流程。
附带的学习资源包含书中所有案例的源文件和教学视频,方便读者学习使用。《WoW!移动UI视觉设计全攻略》特别适合移动设备UI视觉设计的初学者,同时对Photoshop使用者、平面设计师和APP开发设计人员也有参考价值。
作者简介
目录信息
01互联网产品的设计9
02扁平化设计思想对移动UI视觉设计的影响12
03移动UI视觉设计的要点13
第1部分基础篇15
第1章为移动UI视觉设计铺路——入门必备15
1.1移动UI的基础概念16
1.1.1什么是移动UI16
1.1.2移动UI的应用范围17
1.1.3APP与UI视觉设计的关系17
1.1.4移动UI视觉设计的重要性18
1.1.5移动UI视觉设计的原则19
1.2移动UI视觉设计的五大阶段21
1.2.1产品定位及市场分析阶段21
1.2.2初步构思及架构设计阶段21
1.2.3修饰美化及界面设计阶段22
1.2.4界面输出及可用性测试阶段22
1.2.5产品上线及优化方案阶段22
1.3移动设备尺寸的相关概念23
1.3.1英寸23
1.3.2显示分辨率23
1.3.3像素密度24
1.4色彩对移动UI的重要性25
1.4.1色彩的基础概念25
1.4.2移动UI视觉中常用的色彩对比26
1.4.3不同颜色的情感表达27
1.4.4移动UI中的色彩级别28
1.4.5不同系统的色彩应用规范28
1.5常见的移动UI设计工具29
1.5.1矢量图形的编辑高手——Illustrator29
1.5.2强大的图形图像编辑利器——Photoshop29
1.6三大主流系统的UI设计特点30
1.6.1苹果iOS7系统——扁平化30
1.6.2安卓Android系统——极高自由度32
1.6.3微软Windows Phone8系统——极简色块33
第2章让操作更高效——Photoshop基础35
2.1五大必备的核心功能36
2.1.1控制设计对象的顺序——图层36
2.1.2调整图像的影调和色调——调整/填充图层38
2.1.3编辑图像的显示区域——蒙版39
2.1.4精确把握编辑的区域——选区40
2.1.5准确传递UI的信息——文字40
2.2七种不同的绘图工具41
2.2.1规则直角方形的绘制——矩形工具41
2.2.2圆角方形的绘制——圆角矩形工具43
2.2.3椭圆图形的绘制——椭圆工具44
2.2.4星形和多边形的绘制——多边形工具44
2.2.5线段和虚线的绘制——直线工具45
2.2.6复杂图形的绘制——自动形状工具46
2.2.7任意图形的绘制——钢笔工具47
2.3十大图层样式提升设计质感48
2.3.1组合高光和阴影——斜面和浮雕48
2.3.2修饰轮廓色——描边50
2.3.3制作凹陷外观——内阴影51
2.3.4提升内部层次——内发光52
2.3.5创建光滑表面——光泽53
2.3.6更改填充色——颜色叠加54
2.3.7打造炫彩效果——渐变叠加55
2.3.8添加花样填色——图案叠加56
2.3.9增强外部边缘光晕——外发光57
2.3.10增强立体感——投影58
第2部分入门篇59
第3章准确传递功能应用——图标的设计59
3.1与图标设计相关60
3.1.1图标的标准格式及大小60
3.1.2图标设计的三大原则63
3.1.3不同系统下图标的设计特点65
3.2图标设计案例67
3.2.1线性风格的图标制作67
3.2.2单色风格的图标制作70
3.2.3折纸效果的图标制作73
3.2.4可爱风格的图标制作77
3.2.5金属材质的图标制作82
第4章控制和调节应用程度——滑块的设计87
4.1与滑块设计相关88
4.1.1滑块的构成要素和作用88
4.1.2滑块的类型89
4.1.3不同系统中滑块的设计要点89
4.2滑块设计案例91
4.2.1简约图形组成的滑块91
4.2.2清新自然的滑块制作96
4.2.3渐变效果的滑块制作101
4.2.4粉嫩可爱风格的滑块107
4.2.5蓝色酷炫风格的滑块111
第5章接通和断开功能——按钮的设计115
5.1与按钮设计相关116
5.1.1按钮的不同状态116
5.1.2按钮形状及作用之间的影响117
5.1.3不同系统下按钮的设计风格117
5.1.4按钮设计的三大技巧119
5.2按钮设计案例121
5.2.1扁平化按钮的制作121
5.2.2白色简易效果的按钮125
5.2.3半透明按钮的制作129
5.2.4夜光效果的按钮制作133
5.2.5木制效果的按钮制作137
第3部分进阶篇141
第6章让时钟表现更有品味——时钟界面设计141
6.1翻转式时钟界面设计142
灵感构思解析142
设计元素简述143
色彩搭配技巧143
制作步骤详解143
01魔方的绘制与组合144
02界面布局制作144
03图标和文字的添加145
04变换对象制作翻转效果146
不同应用平台展示147
6.2齿轮状平板钟面设计148
灵感构思解析148
设计元素简述149
色彩搭配技巧149
制作步骤详解149
01时钟界面的绘制150
02齿轮状设置区域的制作150
03页面的组合和修饰151
不同应用平台展示152
6.3天气刻度样式的时间界面153
灵感构思解析153
设计元素简述154
色彩搭配技巧154
制作步骤详解154
01天气刻度样式的钟面绘制150
02时钟界面的组合和修饰151
03日历设置页面绘制151
不同应用平台展示158
6.4半透明线条感的时间界面159
灵感构思解析159
设计元素简述160
色彩搭配技巧160
制作步骤详解160
01界面背景的编辑161
02半透明钟面的绘制161
03页面的修饰和完善162
04事件设置界面的绘制163
不同应用平台展示164
第7章传递最美妙的音乐——播放器界面设计165
7.1带声波的播放器界面设计166
灵感构思解析166
设计元素简述167
色彩搭配技巧167
制作步骤详解167
01制作出背景界面168
02绘制音波和播放控件169
03制作专辑界面170
不同应用平台展示171
7.2清新自然风格的播放器界面设计172
灵感构思解析172
设计元素简述173
色彩搭配技巧173
制作步骤详解173
01播放界面顶栏的绘制174
02播放滑块的制作175
03对象的组合176
不同应用平台展示176
7.3冷酷简约风格的播放器界面设计177
灵感构思解析177
设计元素简述178
色彩搭配技巧178
制作步骤详解178
01绘制背景和按钮179
02绘制播放器179
03添加光盘图像180
不同应用平台展示181
7.4单色调风格的播放器界面设计182
灵感构思解析182
设计元素简述183
色彩搭配技巧183
制作步骤详解183
01播放区域的绘制184
02按钮控件的绘制185
03歌曲列表的绘制187
不同应用平台展示188
第8章把互联网装入口袋——浏览器界面设计189
8.1白色圣洁风格的浏览器界面190
构图布局解析190
设计元素简述191
色彩搭配技巧191
制作步骤详解191
01界面中基本元素的绘制192
02文字、图标与基本元素的组合193
03界面的完善和拼接194
不同应用平台展示194
8.2线性扁平风格的浏览器界面195
构图布局解析195
设计元素简述196
色彩搭配技巧196
制作步骤详解196
01界面背景的绘制197
02账号选择界面的制作197
03信息界面的制作199
不同应用平台展示200
8.3圣诞主题风格的浏览器界面201
构图布局解析201
设计元素简述202
色彩搭配技巧202
制作步骤详解202
01按钮和滑块的绘制203
02搜索栏和标题栏的制作204
03界面的完善和组合206
不同应用平台展示207
8.4暗色简约风格的浏览器界面208
构图布局解析209
设计元素简述209
色彩搭配技巧209
制作步骤详解210
01网站首页的绘制210
02购物页面的绘制211
03个人信息页面的绘制212
04搜索页面的绘制213
不同应用平台展示214
第9章让娱乐变得更享受——游戏界面设计215
9.1游戏欢迎界面设计
灵感构思解析
设计元素简述
色彩搭配技巧
制作步骤详解
01飘带的绘制
02拨号盘的绘制
03圆形进度显示的绘制
04界面的制作及对象的组合
不同应用平台展示
9.2游戏登录界面设计
灵感构思解析
设计元素简述
色彩搭配技巧
制作步骤详解
01按钮的绘制
02标题文字的制作
03加载进度条的制作
04背景的制作和对象的组合
不同应用平台展示
9.3游戏设置界面设计
灵感构思解析
设计元素简述
色彩搭配技巧
制作步骤详解
01图标的绘制
02按钮的绘制
03滑块和进度条的绘制
04界面的完善及整合
不同应用平台展示
9.4游戏玩耍界面设计
灵感构思解析
设计元素简述
色彩搭配技巧
制作步骤详解
01天气图标的绘制
02游戏分数栏及设置栏的制作
03背景的制作及对象的整合
不同应用平台展示
第10章打造独特的开启方式——解锁界面
10.1飞镖盘外形的解锁界面
灵感构思解析
设计元素简述
色彩搭配技巧
制作步骤详解
01界面背景的制作
02飞镖盘锁定对象的绘制
03添加时间及日期
04制作触碰状态下的界面
不同应用平台展示
10.2激光样式的解锁界面
灵感构思解析
设计元素简述
色彩搭配技巧
制作步骤详解
01界面背景的制作
02绘制激光发射器按钮
03制作激光发散对象
04添加文字完善界面
不同应用平台展示
10.3密码锁样式的解锁界面
灵感构思解析
设计元素简述
色彩搭配技巧
制作步骤详解
01绘制密码锁
02制作时间显示并完善界面
不同应用平台展示
10.4温度计样式的解锁界面
灵感构思解析
设计元素简述
色彩搭配技巧
制作步骤详解
01背景及时间显示的制作
02温度计的绘制
不同应用平台展示
……
第4部分提升篇
· · · · · · (收起)
读后感
用户评价
说实话,我本来以为这会是一本又厚又难懂的设计理论书,毕竟“全攻略”这个词听起来就让人望而却步。但翻开第一页我就被吸引住了,它的语言风格极其活泼,一点都不枯燥。最让我惊喜的是,它对“动效在视觉设计中的作用”这块内容进行了非常详尽的阐述。以往很多书都是一笔带过,但这本书里,作者花了整整一个章节去拆解“微交互”的设计哲学,并提供了大量可用代码片段或设计工具的实现思路。我过去总是觉得动效是锦上添花,但读完后才明白,好的动效是引导用户注意力和提供即时反馈的关键。书中不仅展示了漂亮的最终效果图,更重要的是解释了为什么这么做——背后的逻辑和用户感知变化是什么。比如,解释了如何通过过渡动画来降低用户的操作预期时间,这简直是提升App流畅感的小秘诀。此外,书中对图标设计和插画风格的统一性也有独到的见解,确保了整个App视觉语言的高度一致性,让人感觉非常专业和可靠。这本书的实操性,远超我预期的“攻略”二字。
哇,这本书真的太棒了!我最近在为我的新App设计用户界面,市面上那么多设计指南,看得我眼花缭乱,但《WoW!移动UI视觉设计全攻略》简直是我的救星。它不是那种空泛的理论堆砌,而是手把手教你如何从零开始构建一个既美观又实用的移动端界面。我尤其欣赏它对“用户体验”的深度剖析,作者没有止步于色彩搭配和字体选择,而是深入探讨了用户心理模型在界面设计中的应用。比如,它详细讲解了如何利用“格式塔原理”来优化信息的组织和呈现,让用户在第一眼就能抓住重点,这对我正在做的信息流界面优化工作帮助太大了。书中还穿插了大量的实际案例分析,从电商到工具类App,不同的业务场景对应着不同的设计策略,讲解得深入浅出,让我这种实践派选手受益匪浅。而且,作者对于新趋势的把握非常敏锐,比如对暗黑模式(Dark Mode)的系统性设计规范,讲解得比很多官方文档都清晰易懂,让我在应对不同设备和用户偏好时有了一套完整的解决方案。这本书不仅仅是一本技术手册,更像是一位经验丰富的资深设计师在耳边指导,让我对“有意义的设计”有了更深层次的理解。
作为一名有多年经验的设计师,我本以为自己对移动UI的认知已经 cukup 完善了,但这本书还是成功地颠覆了我一些根深蒂固的固有观念。它最引人注目的地方在于对“跨文化设计”和“未来趋势”的探讨。作者没有局限于欧美的主流设计风格,而是引入了大量亚洲,特别是东亚地区用户对于信息密度的偏好和交互习惯的分析,这让我的设计视野一下子开阔了不少。书中对“零接触交互”和“空间计算界面(Spatial UI)”的前瞻性讨论,虽然听起来很前卫,但作者却能用非常接地气的方式,将这些未来概念与我们当下的移动端设计实践联系起来,让人既感到兴奋又不会觉得遥不可及。这本书的价值在于,它不仅解决了我们“现在”的问题,更重要的是,它在为我们“未来三到五年”的设计方向做好铺垫。它促使我跳出日常的像素计算,去思考屏幕之外的用户需求,真正理解“移动”的本质——它是一种生活方式的延伸,而UI设计正是这种延伸的界面。
我对设计规范和设计系统构建非常感兴趣,而《WoW!移动UI视觉设计全攻略》在这方面展现了惊人的深度和广度。它并没有停留在介绍Sketch或Figma的某个工具功能上,而是真正教你如何搭建一套可扩展、可维护的设计系统。书中详尽地描述了从原子组件(如按钮、输入框)到分子、有机体层级的构建过程,并强调了“设计令牌”(Design Tokens)在跨平台协作中的重要性。这一点对我至关重要,因为我们团队正在努力从零开始建立统一的设计语言库。书中对于组件库的版本管理和文档化的建议,简直是为我量身定做的“避坑指南”。作者还特别提到了如何在设计系统中融入可访问性(Accessibility)标准,这在当下越来越被重视,书中提供了很多实用的检查清单和设计调整建议,确保我们的产品能被更广泛的用户群体使用。阅读过程中,我感觉自己仿佛在跟着一个系统架构师学习如何搭建一座稳固的“设计大厦”,结构清晰,逻辑严密。
这本书的排版和视觉呈现本身就是一本教科书级别的设计作品。我很少看到一本技术类书籍能把视觉美感做到如此极致。每一个章节的布局、留白、插图的质量都达到了行业顶尖水平。这对于一本关于“视觉设计”的书来说,是至关重要的。它通过自身的例子,潜移默化地向读者展示了什么叫做“优秀的视觉呈现”。特别值得一提的是,书中对于“色彩心理学在移动UI中的应用”那一部分的配图和案例选择,非常精妙。它不像传统的心理学书籍那样抽象,而是直接展示了在不同行业场景下,特定色调如何影响用户的情绪和购买决策。例如,它对比分析了金融类App和健康类App在主色调选择上的差异,并解释了这些选择背后的用户信任度构建逻辑。这种图文并茂、理论与实践紧密结合的叙述方式,让晦涩的理论变得异常生动,我甚至会时不时地停下来,不是为了记笔记,而是单纯地欣赏它的设计美感。
棒棒哒。
棒棒哒。
棒棒哒。
棒棒哒。
棒棒哒。