写给设计师的书APP UI设计手册

目录 第1 章 APP UI 设计的原理 1.1 APP UI 设计的概念 2 1.2 APP UI 与用户体验 2 1.3 APP UI 设计的点、线、面 3 1.3.1 点 3 1.3.2 线 4 1.3.3 面 4 1.4 尺寸与规则 5 1.4.1 IOS 5 1.4.2 Android 6 1.5 APP UI 设计的原则 7 1.5.1 突出性原则 7 1.5.2 商业性原则 7 1.5.3 趣味性原则 8 1.5.4 艺术性原则 8 1.6 APP UI 设计的法则 9 1.6.1 形式美法则 9 1.6.2 平衡法则 9 1.6.3 视觉法则 10 1.6.4 联想法则 10 1.6.5 直接展示法则 10 第2 章 APP UI 设计的基础知识 2.1 UI 与色彩 12 2.1.1 色相、明度、纯度 13 2.1.2 主色、辅助色、点缀色 13 2.1.3 邻近色、对比色 15 2.2 APP UI 设计的布局 15 2.2.1 对称式 16 2.2.2 曲线式 16 2.2.3 倾斜式 17 2.2.4 中轴式 17 2.2.5 文字式 17 2.2.6 图片式 18 2.2.7 自由式 18 2.2.8 背景式 19 2.2.9 水平式 19 2.2.10 引导式 19 第3 章 APP UI 设计的基础色 3.1 红 21 3.1.1 认识红色 21 3.1.2 洋红& 胭脂红 22 3.1.3 玫瑰红& 朱红 22 3.1.4 鲜红& 山茶红 23 3.1.5 浅玫瑰红& 火鹤红 23 3.1.6 硅红& 壳黄红 24 3.1.7 浅粉红& 勃艮第酒红 24 3.1.8 威尼斯红& 宝石红 25 3.1.9 灰玫红& 优品紫红 25 3.2 橙 26 3.2.1 认识橙色 26 3.2.2 橘色& 橘红 27 3.2.3 柿子橙& 热带橙 27 3.2.4 橙色& 阳橙 28 3.2.5 橙黄& 杏黄 28 3.2.6 蜂蜜色& 米色 29 3.2.7 沙棕色& 琥珀色 29 3.2.8 驼色& 咖啡色 30 3.2.9 巧克力色& 重褐色 30 3.3 黄 31 3.3.1 认识黄色 31 3.3.2 黄& 铬黄 32 3.3.3 金& 香蕉黄 32 3.3.4 鲜黄& 月光黄 33 3.3.5 柠檬黄& 万寿菊黄 33 3.3.6 香槟黄& 奶黄 34 3.3.7 土著黄& 黄褐 34 3.3.8 卡其黄& 含羞草黄 35 3.3.9 芥末黄& 灰菊色 35 3.4 绿 36 3.4.1 认识绿色 36 3.4.2 黄绿& 苹果绿 37 3.4.3 墨绿& 叶绿 37 3.4.4 草绿& 苔藓绿 38 3.4.5 芥末绿& 橄榄绿 38 3.4.6 枯叶绿& 碧绿 39 3.4.7 绿松石绿& 青瓷绿 39 3.4.8 孔雀石绿& 铬绿 40 3.4.9 孔雀绿& 钴绿 40 3.5 青 41 3.5.1 认识青色 41 3.5.2 青& 铁青 42 3.5.3 深青& 天青色 42 3.5.4 群青& 石青色 43 3.5.5 青绿色& 青蓝色 43 3.5.6 瓷青& 淡青色 44 3.5.7 白青色& 青灰色 44 3.5.8 水青色& 藏青 45 3.5.9 清漾青& 浅葱色 45 3.6 蓝 46 3.6.1 认识蓝色 46 3.6.2 蓝色& 天蓝色 47 3.6.3 蔚蓝色& 普鲁士蓝 47 3.6.4 矢车菊蓝& 深蓝 48 3.6.5 道奇蓝& 宝石蓝 48 3.6.6 午夜蓝& 皇室蓝 49 3.6.7 浓蓝色& 蓝黑色 49 3.6.8 爱丽丝蓝& 水晶蓝 50 3.6.9 孔雀蓝& 水墨蓝 50 3.7 紫 51 3.7.1 认识紫色 51 3.7.2 紫& 淡紫色 52 3.7.3 靛青色& 紫藤 52 3.7.4 木槿紫& 藕荷色 53 3.7.5 丁香紫& 水晶紫 53 3.7.6 矿紫& 三色堇紫 54 3.7.7 锦葵紫& 淡丁香紫 54 3.7.8 浅灰紫& 江户紫 55 3.7.9 蝴蝶花紫& 蔷薇紫 55 3.8 黑、白、灰 56 3.8.1 认识黑、白、灰 56 3.8.2 白& 月光白 57 3.8.3 雪白& 象牙白 57 3.8.4 10% 亮灰&50% 灰 58 3.8.5 80% 炭灰& 黑 58 第4 章 APP UI 设计的元素 4.1 标志 60 4.1.1 简约素雅的标志设计 61 4.1.2 趣味多彩的标志设计 62 4.1.3 标志设计技巧—— 图文结合的设计方法 63 4.1.4 标志设计欣赏 63 4.2 图案 64 4.2.1 风格多变的图标设计 64 4.2.2 应用界面的图案设计 66 4.2.3 图案设计技巧——造型独特的图案 67 4.2.4 图案设计赏析 67 4.3 色彩 68 4.3.1 缤纷多彩的色彩设计 69 4.3.2 单一色调的色彩设计 70 4.3.3 色彩设计技巧——统计图的应用 71 4.3.4 色彩设计欣赏 71 4.4 字体 72 4.4.1 应用中的字体设计 73 4.4.2 图标中的字体设计 74 4.4.3 字体设计技巧——文字样式 的修改 75 4.4.4 字体设计赏析 75 4.5 导航栏 76 4.5.1 顶部与底部的导航栏设计 77 4.5.2 “汉堡包菜单”的导航栏设计 78 4.5.3 导航栏设计技巧——适用屏幕旋转的设计 79 4.5.4 导航栏设计赏析 79 4.6 主视图 80 4.6.1 骨骼型的主视图设计 81 4.6.2 重心型的主视图设计 82 4.6.3 主视图设计技巧——采用不同的设计版式 83 4.6.4 主视图设计赏析 83 4.7 工具栏 84 4.7.1 固定工具栏设计 85 4.7.2 浮动工具栏设计 86 4.7.3 工具栏设计技巧——带搜索功能的工具栏 87 4.7.4 工具栏设计赏析 87 4.8 设计实战：社交软件用户信息界面设计 88 4.8.1 设计思路 88 4.8.2 配色方案 88 4.8.3 版面构图 90 4.8.4 色彩 90 4.8.5 字体 91 4.8.6 导航栏 91 第5 章 APP UI 设计的行业分类 5.1 游戏类APP UI 设计 93 5.1.1 游戏类APP UI 设计——休闲类游戏 94 5.1.2 游戏类APP UI 设计——动作冒险类游戏 95 5.2 社交类APP UI 设计 97 5.2.1 社交类APP UI 设计——电话短信 98 5.2.2 社交类APP UI 设计——聊天交友 99 5.3 购物类APP UI 设计 101 5.3.1 购物类APP UI 设计——服装类 102 5.3.2 购物类APP UI 设计——产品类 103 5.4 工具类APP UI 设计 105 5.4.1 工具类APP UI 设计——地图导航 106 5.4.2 工具类APP UI 设计——天气预报 107 5.5 生活类APP UI 设计 109 5.5.1 生活类APP UI 设计——旅游 110 5.5.2 生活类APP UI 设计——外卖 111 5.6 娱乐类APP UI 设计 113 5.6.1 娱乐类APP UI 设计——音乐播放器 114 5.6.2 娱乐类APP UI 设计——视频播放器 115 5.7 阅读类APP UI 设计 117 5.7.1 阅读类APP UI 设计——小说阅读器 118 5.7.2 阅读类APP UI 设计——漫画阅读器 119 5.8 拍摄美化类APP UI 设计 121 5.8.1 拍摄美化类APP UI 设计——相机 122 5.8.2 拍摄美化类APP UI 设计——美化图片 123 5.9 新闻类APP UI 设计 125 5.9.1 新闻类APP UI 设计——新闻资讯 126 5.9.2 新闻类APP UI 设计——报纸杂志 127 5.10 设计实战：办公类APP UI设计流程详解 129 5.10.1 设计思路 129 5.10.2 配色方案 129 5.10.3 版面构图 130 5.10.4 首页 131 5.10.5 收件箱 132 5.10.6 编写邮件 132 第6 章 APP UI 设计的风格 6.1 安全 134 6.1.1 安全——登录页面的UI 设计 135 6.1.2 安全——页面提示弹窗的UI 设计 136 6.2 清新 138 6.2.1 清新——明亮色彩的UI 界面设计 139 6.2.2 清新——形象可爱的UI 设计 140 6.3 科技 142 6.3.1 科技——指纹识别UI界面设计 143 6.3.2 科技——天气预报UI界面设计 144 6.4 凉爽 146 6.4.1 凉爽——颜色 147 6.4.2 凉爽——干净简洁的UI界面设计 148 6.5 美味 150 6.5.1 美味——烹饪类应用的UI界面设计 151 6.5.2 美味——订餐类应用的UI界面设计 152 6.6 热情 154 6.6.1 热情——色彩明快的UI界面设计 155 6.6.2 热情——活力四射的运动类UI 界面设计 156 6.7 高端 158 6.7.1 高端——奢侈品应用的UI 设计 159 6.7.2 高端——个人定制的UI 设计 160 6.8 浪漫 162 6.8.1 浪漫——粉色系桌面的UI 界面设计 163 6.8.2 浪漫——应用花朵元素的UI 界面设计 164 6.9 硬朗 166 6.9.1 硬朗——游戏页面中坚硬感UI 设计 167 6.9.2 硬朗——稳定沉稳的UI 设计 168 6.10 纯净 170 6.10.1 纯净——简约纯洁的UI界面设计 171 6.10.2 纯净——线条感十足的UI图标设计 172 6.11 复古 174 6.11.1 复古——像素游戏的UI界面设计 175 6.11.2 复古——使用传统物品进行UI 图标设计 176 6.12 扁平化与拟物化 178 6.12.1 扁平化风格 179 6.12.2 拟物化风格 180 6.13 设计实战：手机游戏启动界面设计 182 6.13.1 设计思路 182 6.13.2 配色方案 182 6.13.3 版面构图 184 6.13.4 凉爽 184 6.13.5 硬朗 185 6.13.6 清新 185 第7 章 APP UI 设计秘籍 7.1 UI 设计中的版式布局 187 7.2 通过实例来了解UI 界面 188 7.3 颜色的合理搭配 189 7.4 图标的物理尺寸与实际尺寸 190 7.5 常用的集中设计尺寸 191 7.6 MBE 风格的设计 192 7.7 开放式路径图标的妙用 193 7.8 列表的设计方式 194 7.9 字体的使用 195 7.10 页面空间的节省 196 7.11 贴近场景的显示切换 197 7.12 欢迎页面的设计 198 7.13 交互方式的设计 199 7.14 视觉风格的设计 200