动静有法:Sketch+PrincipleUI设计基础教程

动静有法:Sketch+PrincipleUI设计基础教程

查阅电子书
手机扫码
  • 微信扫一扫

    关注微信公众号

因版权原因待上架

编辑推荐

本书详细介绍了Sketch在UI设计中的应用,使读者熟悉移动端UI设计规范及设计要点。

内容简介

本书共15章,首先介绍了UI设计及Sketch入门知识。然后通过一个完整的音乐类App设计,采用循序渐进的方式,引导读者逐渐了解Sketch的基础操作,以及整个App的交互设计、静态界面设计、图标设计。最后介绍如何配合常用插件进行App设计完成后的输出,以及利用Principle软件对App进行动效设计。

本书适合移动端UI设计师、设计爱好者阅读,也可以作为移动端UI设计师、交互设计师、UI设计爱好者的参考用书。

作者简介

作者张怡琪,笔名张小碗儿,曾就职于腾讯、青果灵动,网络热门教程《30分钟拟物图标速成记》作者,站酷超人气作者,曾获得站酷推荐设计师、UI中国推荐设计师等头衔。

章节目录

版权信息

内容简介

第1章 初识UI设计

1.1 什么是UI

1.1.1 认识UI设计

1.1.2 UI设计存在的理由

1.1.3 什么是好的UI设计

1.2 UI设计师的工作内容

1.2.1 头脑风暴

1.2.2 交互设计

1.2.3 界面设计

1.2.4 动效设计

1.2.5 切图与标注

1.2.6 辅助研发

1.3 设计师常用软件

第2章 Sketch设计入门

2.1 初识Sketch

2.1.1 Sketch是什么

2.1.2 Sketch在UI设计中的优势

2.1.3 Sketch的团队价值

2.1.4 Sketch未来的发展空间

2.2 如何获取Sketch

2.2.1 下载Sketch

2.2.2 安装Sketch

2.2.3 激活Sketch

2.3 初见Sketch

2.4 了解Sketch主界面

2.4.1 菜单栏

2.4.2 工具栏

2.4.3 页面

2.4.4 图层

2.4.5 画布

2.4.6 检查器

2.4.7 导出

第3章 发现音乐App交互原型图设计

3.1 发现音乐App产品需求文档解读

3.1.1 了解产品需求文档

3.1.2 了解用户群体

3.1.3 产品功能解读

3.2 设计产品交互原型图

3.2.1 为什么要做交互原型图

3.2.2 交互原型图的展示方式

3.3 在Sketch中绘制交互原型图所需要的工具

3.3.1 Insert(添加)工具

3.3.2 Group(编组)工具

3.3.3 Radius(圆角半径)工具

3.3.4 测量功能

3.3.5 对齐功能

3.3.6 元件的创建

3.4 利用Sketch绘制产品交互原型图

3.4.1 创建文档

3.4.2 创建画板

3.4.3 标记非设计区域

3.4.4 选择交互稿色系及明度

3.4.5 绘制首页交互稿

3.4.6 绘制“喜欢”界面交互原型图

3.4.7 绘制“朋友”界面交互原型图

3.4.8 绘制“播放界面”交互原型图

3.4.9 绘制“音乐列表”界面交互原型图

3.4.10 绘制“电台界面”交互原型图

3.5 交互原型图动效初体验

3.5.1 Sketch的Link原型功能介绍

3.5.2 通过原型功能进行产品原型初体验

3.6 作业:绘制产品原型图

第4章 功能图标设计

4.1 了解功能图标

4.2 功能图标的设计思路及技巧

4.3 功能图标的点击范围及显示范围

4.4 功能图标的尺寸规范

4.5 功能图标的视觉平衡

4.5.1 为什么要遵守视觉平衡

4.5.2 计算视觉平衡缩进值

4.5.3 计算各基本形尺寸

4.6 Sketch的布尔运算工具

4.7 利用Sketch绘制功能图标

4.7.1 绘制“侧边栏icon”

4.7.2 绘制“添加icon”

4.7.3 绘制“音乐列表icon”

4.7.4 绘制““icon/返回””

4.7.5 绘制“循环播放icon”

4.7.6 绘制“下载icon”

4.7.7 绘制“留言icon”

4.7.8 绘制“点赞icon”

4.8 作业:绘制产品内的功能图标

第5章 应用图标设计

5.1 当下同类App图标设计风格分析

5.2 应用图标的传导含义

5.3 为应用图标选择元素

5.4 为应用图标选择颜色

5.5 Sketch的STYLE(样式)功能

5.5.1 Fills(填充)

5.5.2 Borders(描边)

5.5.3 Shadows(阴影)和Inner Shadows(内阴影)

5.5.4 Blurs(模糊)

5.5.5 删除未使用的样式

5.5.6 复制与粘贴样式

5.6 利用Sketch绘制应用图标

5.6.1 绘制图标的扁平状态

5.6.2 绘制图标的轻拟物状态

5.6.3 绘制图标的拟物状态

5.7 作业:绘制应用图标

第6章 发现音乐App主界面设计

6.1 竞品分析(音乐App界面设计风格)

6.2 Sketch文本处理功能介绍

6.2.1 创建文本

6.2.2 文本检查器

6.2.3 文本Alignment(对齐)功能

6.2.4 Text Options(文本选项)

6.2.5 文本样式的复制与粘贴

6.2.6 创建文本样式

6.2.7 在图层中应用文本样式

6.2.8 路径上的文本

6.2.9 将文本转换为路径

6.2.10 解决缺少字体的问题

6.3 Sketch中的Mask(蒙版)功能

6.4 利用Sketch绘制产品主界面

6.4.1 首页设计

6.4.2 “喜欢-界面”设计

6.4.3 “朋友-界面”设计

6.4.4 “播放-界面”设计

6.5 作业:设计产品主界面

第7章 发现音乐App二级界面设计

7.1 回顾二级界面交互设计稿

7.2 利用Sketch及插件绘制产品二级界面

7.2.1 “音乐列表-界面”设计

7.2.2 “电台-界面”设计

7.2.3 搜索系列界面设计

7.2.4 搜索歌手系列界面设计

7.3 作业:完成产品二级界面绘制

第8章 头像设计

8.1 头像的位置

8.2 主流头像设计风格分析

8.3 头像设计思路分析

8.3.1 了解需求

8.3.2 寻找特点

8.3.3 元素设计

8.4 利用Sketch设计产品内的小头像

8.5 作业:绘制小头像

第9章 产品切图与标注

9.1 产品的切图

9.1.1 切图的存储方式

9.1.2 了解切图结构

9.1.3 了解切图的命名

9.2 产品设计稿标注

第10章 养成设计好习惯

10.1 如何在Sketch中添加库

10.2 如何使用库与更新库

10.3 文件整理

第11章 UI设计动效入门

11.1 初识Principle

11.1.1 为什么要学习动效制作

11.1.2 为什么要选择Principle(Sketch的好搭档)

11.2 如何获取Principle

11.2.1 Principle的下载

11.2.2 Principle的安装

11.2.3 Principle的激活

11.3 了解Principle主界面

11.3.1 菜单栏

11.3.2 工具栏

11.3.3 检查器

11.3.4 图层

11.3.5 画布

11.3.6 预览窗口

11.4 Sketch文件的导入

11.4.1 Sketch文件的整理

11.4.2 导入文件该注意的事项

11.5 导出视频文件和GIF文件

第12章 Principle Animation

12.1 Principle补间动画的图层命名

12.2 Principle补间动画中的关键帧

12.3 Principle中的动画速度曲线

12.4 发现音乐App的动效制作

12.4.1 发现音乐App的动效结构分析

12.4.2 发现音乐App的动效设计

12.4.3 发现音乐App列表页动效设计

12.4.4 作业:通过Principle Animation制作界面动效

第13章 Principle Drivers

13.1 了解Principle Drivers

13.2 Principle Drivers——Page(翻页)动画

13.3 首页banner翻页动画设计制作

13.3.1 联动动画——Scroll(滚动)

13.3.2 音乐列表动画设计

13.4 联动动画——Drag(拖动)

13.4.1 联动动画——Drag(拖动)动画制作

13.4.2 电台界面拖动动画设计

第14章 Mirror预览

14.1 Sketch Mirror的使用方法

14.2 Principle Mirror的使用方法

第15章 UI设计进阶之路

15.1 时刻了解行业设计风格的趋势和变化

15.2 全链路设计师

15.3 大量练习

15.4 突破瓶颈期

后记

动静有法:Sketch+PrincipleUI设计基础教程是2021年由电子工业出版社出版,作者张怡琪。

得书感谢您对《动静有法:Sketch+PrincipleUI设计基础教程》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。

购买这本书

你可能喜欢
素描综合基础教程 电子书
素描与美术的关系,就像树根与大树,繁茂的枝叶因为稳固的树根而显得更加有分量。素描是美术的起点,更是入门的基础。《素描综合基础教程》因此为你而来,它对结构、透视、光影、质感等绘画的必备知识进行了系统的归纳和分析,内容力求严谨实用。全书从初学者的角度出发,从介绍铅笔素描的基础知识开始,让读者了解常见物象的形体结构,使读者能够轻松画出准确的形体。接下来介绍了光对物体的影响,让读者明白物体体积感和光影之间
色铅笔基础教程 电子书
色铅笔是一种易于掌控的绘画工具,叠色手法非常灵活,比水彩容易修改。所以,有一定素描基础的读者,可以轻松用色铅笔开始全新的彩色绘画之旅。本书共4章。第1章从画材的分析开始,让读者了解色铅笔绘画基础技法。第2章介绍了三大面、五大调、色彩的基础名词等基础内容。第3章用读者喜闻乐见的题材,通过简单易学的绘画步骤,提升读者的绘画能力,器重每个案例都有侧重点,或色感培养、或技法应用、或画面营造等。第4章用最容
吉他入门基础教程 电子书
这是一本成年人学习吉他的入门基础教程。本书根据成年人的学习特点,将吉他学习中的一些知识点和简单技术问题串在一起,安排和选用了一些简单的基础练习,比如视唱练习、击拍练习等,旨在为成年人的吉他学习奠定一定的基础。本书还针对每一章的讲解要点特意安排了指法弹奏练习和乐曲强化训练,作者更是花费了不少心思重新编配了简化的吉他流行曲目,将吉他学习的知识点和技术点融入到这些经典曲目中,让学习吉他真正变成一件快乐而
素描静物基础教程 电子书
素描是绘画的基础,无论是水彩、仰粉还是油画,抑或其他形式的绘画,都是建立在素描基础上的,所以学好素描能使你轻松地转化到其他形式的绘画中去。素描的前期学习首先要掌握结构、透视,也就是我们所说的结构素描,之后再去学习怎么表现静物的体积、质感,最后开始学对一整幅画面的把控。本书分为5章,第1章教你认识什么是素描、素描绘画中要学习的知识有哪些;第2章的内容开始从结构素描转化到静物中,这是对静物素描的第一步
钢琴入门基础教程 电子书
这是一本成年人学习钢琴的入门基础教程。本书根据成年人的学习特点,将钢琴学习中的一些知识点和简单的技术问题串在了一起,安排和选用了一些简单的基础练习,比如说视唱练习、击拍练习等,旨在为成年人的钢琴学习奠定一定的基础;然后又针对每一章的讲解要点特意安排了指法弹奏练习和乐曲强化训练,而作者更是费了不少心思重新简单编配了传统曲目,将钢琴学习的知识点和技术点融入到这些经典曲目中,让学习钢琴真正变成一件快乐而