术与道 移动应用UI设计必修课
- 书籍语言：简体中文
- 下载次数：9896
- 书籍类型：Epub+Txt+pdf+mobi
- 发布日期：2025-09-06
- 连载状态：全集
- 书籍作者：余振华
- 图书编号：9787115418814
- 运行环境：pc/安卓/iPhone/iPad/Kindle/平板
- 下载
编辑推荐
站酷推荐设计师余振华力作；站酷网总编辑纪晓亮作序；ZCOOL站酷总经理梁耀明、UI中国总经理董景博力荐；平面设计师、交互设计师、产品经理等相关人士的必读之书。
规则会演变，可是产生规则的原因不会；知识会迭代，但是知识背后的逻辑不会。本书正是作者多年对设计知识和规则的总结，观察书中的每一个知识点，你会发现，每个案例都是作者自己尝试、对比和思考的总结，带领大家努力去明白每一个规则背后的原因，研究推动每一次设计变化的逻辑。 目录
| 01 基础知识 |
| 1.1 什么是UI设计 / 20 |
| 1.1.1 UI的相关概念 / 20 |
| 1.1.2 UI的学习方法 / 22 |
| 1.2 什么是App / 25 |
| 1.2.1 App的概念 / 25 |
| 1.2.2 App的开发流程 / 25 |
| 1.3 智能手机的屏幕 / 26 |
| 1.3.1 英寸（Inch） / 27 |
| 1.3.2 像素（Pixel） / 27 |
| 1.3.3 分辨率（Resolution） / 28 |
| 1.4 网点密度与像素密度 / 28 |
| 1.4.1 网点密度（DPI） / 28 |
| 1.4.2 像素密度（PPI） / 29 |
| 1.4.3 DPI与PPI / 29 |
| 1.4.4 逻辑分辨率与像素倍率 / 30 |
| 1.4.5 视网膜屏幕 / 30 |
| 1.5 常见手机屏幕规格 / 31 |
| 1.5.1 热门手机规格 / 31 |
| 1.5.2 热门手机分辨率 / 33 |
| 1.6 iPhone 6 Plus的屏幕 / 34 |
| 1.7 智能手机的传感器 / 37 |
| 1.7.1 摄像头 / 37 |
| 1.7.2 麦克风 / 38 |
| 1.7.3 GPS / 38 |
| 1.7.4 电子罗盘 / 39 |
| 1.7.5 重力感应器 / 39 |
| 1.7.6 加速度传感器 / 40 |
| 1.7.7 光线传感器 / 41 |
| 1.7.8 距离传感器 / 41 |
| 1.7.9 气压传感器 / 42 |
| 1.7.10 三轴陀螺仪 / 43 |
| 02 设计风格 |
| 2.1 风格 / 46 |
| 2.1.1 什么是设计风格 / 46 |
| 2.1.2 如何确立设计风格 / 47 |
| 2.2 颜色 / 50 |
| 2.2.1 认识色彩 / 50 |
| 2.2.2 RGB与HSB / 50 |
| 2.2.3 颜色搭配基础 / 52 |
| 2.3 如何选择颜色 / 53 |
| 2.3.1 常见App的颜色 / 53 |
| 2.3.2 颜色的性格 / 55 |
| 2.4 字体 / 61 |
| 2.4.1 衬线体和无衬线体 / 61 |
| 2.4.2 系统内置字体 / 62 |
| 2.4.3 什么时候选择内嵌字体 / 62 |
| 2.4.4 如何使用内嵌字体 / 63 |
| 03 图标与图片 |
| 3.1 App图标特点 / 66 |
| 3.1.1 独特的图形 / 66 |
| 3.1.2 表意准确 / 67 |
| 3.1.3 谨慎用色 / 67 |
| 3.1.4 避免使用大量文字 / 68 |
| 3.1.5 避免使用照片 / 68 |
| 3.1.6 适应不同场景 / 69 |
| 3.2 App图标设计流程 / 69 |
| 3.2.1 第一步：寻找隐喻 / 69 |
| 3.2.2 第二步：抽象图形 / 70 |
| 3.2.3 第三步：竞品分析 / 71 |
| 3.2.4 第四步：确定风格 / 71 |
| 3.2.5 第五步：调整细节 / 72 |
| 3.2.6 第六步：场景测试 / 73 |
| 3.3 App图标设计方法 / 74 |
| 3.3.1 正负形组合 / 74 |
| 3.3.2 折叠图形 / 75 |
| 3.3.3 局部提取 / 75 |
| 3.3.4 线性图标 / 75 |
| 3.3.5 透明渐变 / 76 |
| 3.3.6 色块拼接 / 76 |
| 3.3.7 图形复用 / 76 |
| 3.3.8 背景组合 / 77 |
| 3.4 iOS图标规范 / 77 |
| 3.4.1 iOS图标适配 / 77 |
| 3.4.2 iOS图标标准 / 78 |
| 3.5 Android图标规范 / 79 |
| 3.5.1 Android图标适配 / 79 |
| 3.5.2 图标的视觉统一 / 80 |
| 3.5.3 Android图标标准 / 81 |
| 3.6 设计线性图标 / 83 |
| 3.6.1 线性图标的风格 / 83 |
| 3.6.2 线性图标的绘制方法 / 84 |
| 3.7 像素对齐 / 87 |
| 3.7.1 像素为什么要对齐 / 87 |
| 3.7.2 像素如何对齐 / 88 |
| 3.7.3 像素缩放的对齐 / 89 |
| 3.7.4 像素对齐的微调 / 89 |
| 3.8 图片的使用 / 89 |
| 3.8.1 矢量图与位图 / 89 |
| 3.8.2 图片的格式 / 90 |
| 3.8.3 图片的使用 / 91 |
| 3.8.4 图片的存储 / 92 |
| 3.8.5 图片的比例 / 92 |
| 04 iOS系统界面 |
| 4.1 栏 / 94 |
| 4.1.1 状态栏 / 94 |
| 4.1.2 导航栏 / 94 |
| 4.1.3 标签栏 / 95 |
| 4.1.4 工具栏 / 96 |
| 4.2 内容视图 / 97 |
| 4.2.1 表格视图 / 97 |
| 4.2.2 文本视图 / 99 |
| 4.2.3 Web视图 / 99 |
| 4.3 临时视图 / 100 |
| 4.3.1 对话框 / 100 |
| 4.3.2 操作列表 / 100 |
| 05 Android系统界面 |
| 5.1 导航机制 / 102 |
| 5.1.1 硬件特性 / 102 |
| 5.1.2 iOS导航机制 / 102 |
| 5.1.3 Android导航机制 / 103 |
| 5.2 界面布局 / 105 |
| 5.2.1 结构差异 / 105 |
| 5.2.2 操作栏 / 106 |
| 5.2.3 多任务 / 107 |
| 5.3 消息推送 / 108 |
| 5.3.1 推送方式 / 108 |
| 5.3.2 通知方式 / 109 |
| 5.4 操作方式 / 110 |
| 5.4.1 编辑 / 110 |
| 5.4.2 选择 / 111 |
| 5.4.3 复制粘贴 / 112 |
| 5.4.4 删除 / 113 |
| 5.5 Android系统的插件 / 114 |
| 5.5.1 桌面插件 / 114 |
| 5.5.2 设计趋势 / 114 |
| 06 建立规范 |
| 6.1 组建规范 / 116 |
| 6.1.1 设计规范的目的 / 116 |
| 6.1.2 规范的组成 / 116 |
| 6.2 颜色规范 / 119 |
| 6.2.1 为什么选择HSB / 119 |
| 6.2.2 创建调色板 / 120 |
| 6.2.3 调色板应用 / 121 |
| 6.3 文字规范 / 123 |
| 6.3.1 iOS系统 / 123 |
| 6.3.2 Android系统 / 123 |
| 6.3.3 系统字号 / 123 |
| 6.4 布局 / 125 |
| 6.4.1 框架 / 125 |
| 6.4.2 顶部导航栏 / 126 |
| 6.4.3 顶部标签栏 / 126 |
| 6.4.4 底部标签栏 / 127 |
| 6.5 图片规范 / 127 |
| 6.5.1 用户头像 / 127 |
| 6.5.2 商品图片 / 129 |
| 6.5.3 无数据图片 / 129 |
| 07 设计组件 |
| 7.1 控制元素 / 132 |
| 7.1.1 活动指示器 / 132 |
| 7.1.2 进度指示器 / 132 |
| 7.1.3 页码控制器 / 134 |
| 7.1.4 刷新控件 / 134 |
| 7.1.5 滑动器 / 137 |
| 7.1.6 开关 / 137 |
| 7.1.7 步进器 / 137 |
| 7.2 筛选器 / 138 |
| 7.2.1 选择器 / 138 |
| 7.2.2 日期时间选择器 / 138 |
| 7.2.3 分段控件 / 139 |
| 7.2.4 选项卡 / 139 |
| 7.2.5 排序 / 140 |
| 7.2.6 地区选择 / 140 |
| 7.3 表单控件 / 141 |
| 7.3.1 单选框 / 141 |
| 7.3.2 复选框 / 142 |
| 7.3.3 文本框 / 142 |
| 7.3.4 下拉框 / 143 |
| 7.3.5 表格 / 144 |
| 7.4 按钮规范 / 144 |
| 7.4.1 背景 文字 / 144 |
| 7.4.2 背景 图标 / 145 |
| 7.4.3 图标 文字 / 146 |
| 7.4.4 文字 / 146 |
| 7.5 其他组件 / 147 |
| 7.5.1 加载更多 / 147 |
| 7.5.2 非模态浮层 / 147 |
| 7.5.3 模态浮层 / 148 |
| 08 导航设计 |
| 8.1 扁平导航 / 150 |
| 8.1.1 标签导航 / 150 |
| 8.1.2 舵式导航 / 151 |
| 8.1.3 宫格式导航 / 152 |
| 8.2 内容主导式导航 / 153 |
| 8.2.1 陈列式导航 / 153 |
| 8.2.2 旋转木马式导航 / 154 |
| 8.3 列表式导航 / 155 |
| 8.3.1 列表式 / 155 |
| 8.3.2 抽屉式 / 156 |
| 8.4 其他导航 / 157 |
| 8.4.1 点聚式导航 / 157 |
| 8.4.2 瀑布式导航 / 158 |
| 09 界面设计 |
| 9.1 首页 / 160 |
| 9.1.1 搜索栏 / 160 |
| 9.1.2 标签栏 / 161 |
| 9.1.3 卡片式设计 / 161 |
| 9.1.4 楼层设计 / 162 |
| 9.2 列表页 / 163 |
| 9.2.1 消息列表 / 163 |
| 9.2.2 横向卡片 / 163 |
| 9.2.3 瀑布流 / 164 |
| 9.3 详情页 / 165 |
| 9.3.1 全局按钮 / 165 |
| 9.3.2 快速通道 / 166 |
| 9.4 个人中心 167 |
| 9.4.1 头像区域 / 167 |
| 9.4.2 个人信息 / 168 |
| 9.4.3 功能模块 / 169 |
| 9.5 启动页 / 170 |
| 9.5.1 品牌宣传类 / 170 |
| 9.5.2 首页样式类 / 171 |
| 9.5.3 情感故事类 / 172 |
| 9.5.4 节日氛围类 / 173 |
| 9.6 引导页 / 173 |
| 9.6.1 功能介绍类 / 173 |
| 9.6.2 使用说明类 / 176 |
| 9.6.3 情感故事类 / 177 |
| 10 设计适配 |
| 10.1 iOS系统适配 / 180 |
| 10.1.1 设计基准 / 180 |
| 10.1.2 设计适配 / 181 |
| 10.1.3 适配规则 / 182 |
| 10.2 Android系统适配 / 183 |
| 10.2.1 密度独立像素 / 183 |
| 10.2.2 设计基准 / 184 |
| 10.2.3 适配方法 / 185 |
| 10.3 iOS系统适配Android系统 / 185 |
| 10.3.1 设计目的 / 185 |
| 10.3.2 换算关系 / 185 |
| 10.3.3 适配方法 / 186 |
| 10.4标注设计 / 186 |
| 10.4.1 标注基准 / 187 |
| 10.4.2 标注方法 / 187 |
| 10.5 点九图 / 189 |
| 10.5.1 什么是点九图 / 189 |
| 10.5.2 如何制作点九图 / 191 |
| 10.6 切图 / 191 |
| 10.6.1 界面切图 / 191 |
| 10.6.2 图标切图 / 192 |
| 10.6.3 命名规则 / 192 |
| 11 手势应用 |
| 11.1 为什么使用手势 / 194 |
| 11.2 常用手势操作 / 195 |
| 11.2.1 单击 / 195 |
| 11.2.2 双击 / 195 |
| 11.2.3 上下滑动 / 196 |
| 11.2.4 左右滑动 / 196 |
| 11.2.5 拖曳 / 197 |
| 11.2.6 张开 / 闭合 / 197 |
| 11.2.7 长按 / 198 |
| 11.2.8 摇晃 / 198 |
| 11.3 手势设计禁忌 / 199 |
| 11.3.1 使用标准手势 / 199 |
| 11.3.2 定义标准手势 / 199 |
| 11.3.3 使用简单手势 / 199 |
| 11.3.4 手势使用说明 / 199 |
| 12 设计资源 |
| 12.1 网站资源 / 201 |
| 12.2 图标资源 / 202 |
| 12.3 图片资源 / 203 |
| 参考文献 / 204 |
作者简介
余振华是站酷的推荐设计师，他有十余年GUI、WUI设计的从业资历，在多家国内专业网站发表过众多设计研究文章，有着多年设计团队管理经验，负责过流量千万级的电商网站运营、下载量亿级的无线设计团队管理。目前他正积极探索视觉设计在工作中的实践运用，建立相关的规范和标准，指导更多的设计师成长。 个人荣誉：2011年获得“站酷推荐设计师”称号2012年《旅行箱》App获得豌豆荚设计奖、应用奖2012年《91桌面主题设计大赛》奖2013年《康佳Muse UI 首届手机主题设计》奖2013年《新浪天气通插件设计》奖2013年《中国电信手机云桌面手机主题设计》三等奖2014年《中华万年历》App累计下载量一亿，日活破千万