目录
第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<p>目录</p> <p>第1 章 APP UI 设计的原理</p> <p>1.1 APP UI 设计的概念 2</p> <p>1.2 APP UI 与用户体验 2</p> <p>1.3 APP UI 设计的点、线、面 3</p> <p>1.3.1 点 3</p> <p>1.3.2 线 4</p> <p>1.3.3 面 4</p> <p>1.4 尺寸与规则 5</p> <p>1.4.1 IOS 5</p> <p>1.4.2 Android 6</p> <p>1.5 APP UI 设计的原则 7</p> <p>1.5.1 突出性原则 7</p> <p>1.5.2 商业性原则 7</p> <p>1.5.3 趣味性原则 8</p> <p>1.5.4 艺术性原则 8</p> <p>1.6 APP UI 设计的法则 9</p> <p>1.6.1 形式美法则 9</p> <p>1.6.2 平衡法则 9</p> <p>1.6.3 视觉法则 10</p> <p>1.6.4 联想法则 10</p> <p>1.6.5 直接展示法则 10</p> <p>第2 章 APP UI 设计的基础知识</p> <p>2.1 UI 与色彩 12</p> <p>2.1.1 色相、明度、纯度 13</p> <p>2.1.2 主色、辅助色、点缀色 13</p> <p>2.1.3 邻近色、对比色 15</p> <p>2.2 APP UI 设计的布局 15</p> <p>2.2.1 对称式 16</p> <p>2.2.2 曲线式 16</p> <p>2.2.3 倾斜式 17</p> <p>2.2.4 中轴式 17</p> <p>2.2.5 文字式 17</p> <p>2.2.6 图片式 18</p> <p>2.2.7 自由式 18</p> <p>2.2.8 背景式 19</p> <p>2.2.9 水平式 19</p> <p>2.2.10 引导式 19</p> <p>第3 章 APP UI 设计的基础色</p> <p>3.1 红 21</p> <p>3.1.1 认识红色 21</p> <p>3.1.2 洋红& 胭脂红 22</p> <p>3.1.3 玫瑰红& 朱红 22</p> <p>3.1.4 鲜红& 山茶红 23</p> <p>3.1.5 浅玫瑰红& 火鹤红 23</p> <p>3.1.6 硅红& 壳黄红 24</p> <p>3.1.7 浅粉红& 勃艮第酒红 24</p> <p>3.1.8 威尼斯红& 宝石红 25</p> <p>3.1.9 灰玫红& 优品紫红 25</p> <p>3.2 橙 26</p> <p>3.2.1 认识橙色 26</p> <p>3.2.2 橘色& 橘红 27</p> <p>3.2.3 柿子橙& 热带橙 27</p> <p>3.2.4 橙色& 阳橙 28</p> <p>3.2.5 橙黄& 杏黄 28</p> <p>3.2.6 蜂蜜色& 米色 29</p> <p>3.2.7 沙棕色& 琥珀色 29</p> <p>3.2.8 驼色& 咖啡色 30</p> <p>3.2.9 巧克力色& 重褐色 30</p> <p>3.3 黄 31</p> <p>3.3.1 认识黄色 31</p> <p>3.3.2 黄& 铬黄 32</p> <p>3.3.3 金& 香蕉黄 32</p> <p>3.3.4 鲜黄& 月光黄 33</p> <p>3.3.5 柠檬黄& 万寿菊黄 33</p> <p>3.3.6 香槟黄& 奶黄 34</p> <p>3.3.7 土著黄& 黄褐 34</p> <p>3.3.8 卡其黄& 含羞草黄 35</p> <p>3.3.9 芥末黄& 灰菊色 35</p> <p>3.4 绿 36</p> <p>3.4.1 认识绿色 36</p> <p>3.4.2 黄绿& 苹果绿 37</p> <p>3.4.3 墨绿& 叶绿 37</p> <p>3.4.4 草绿& 苔藓绿 38</p> <p>3.4.5 芥末绿& 橄榄绿 38</p> <p>3.4.6 枯叶绿& 碧绿 39</p> <p>3.4.7 绿松石绿& 青瓷绿 39</p> <p>3.4.8 孔雀石绿& 铬绿 40</p> <p>3.4.9 孔雀绿& 钴绿 40</p> <p>3.5 青 41</p> <p>3.5.1 认识青色 41</p> <p>3.5.2 青& 铁青 42</p> <p>3.5.3 深青& 天青色 42</p> <p>3.5.4 群青& 石青色 43</p> <p>3.5.5 青绿色& 青蓝色 43</p> <p>3.5.6 瓷青& 淡青色 44</p> <p>3.5.7 白青色& 青灰色 44</p> <p>3.5.8 水青色& 藏青 45</p> <p>3.5.9 清漾青& 浅葱色 45</p> <p>3.6 蓝 46</p> <p>3.6.1 认识蓝色 46</p> <p>3.6.2 蓝色& 天蓝色 47</p> <p>3.6.3 蔚蓝色& 普鲁士蓝 47</p> <p>3.6.4 矢车菊蓝& 深蓝 48</p> <p>3.6.5 道奇蓝& 宝石蓝 48</p> <p>3.6.6 午夜蓝& **蓝 49</p> <p>3.6.7 浓蓝色& 蓝黑色 49</p> <p>3.6.8 爱丽丝蓝& 水晶蓝 50</p> <p>3.6.9 孔雀蓝& 水墨蓝 50</p> <p>3.7 紫 51</p> <p>3.7.1 认识紫色 51</p> <p>3.7.2 紫& 淡紫色 52</p> <p>3.7.3 靛青色& 紫藤 52</p> <p>3.7.4 木槿紫& 藕荷色 53</p> <p>3.7.5 丁香紫& 水晶紫 53</p> <p>3.7.6 矿紫& 三色堇紫 54</p> <p>3.7.7 锦葵紫& 淡丁香紫 54</p> <p>3.7.8 浅灰紫& 江户紫 55</p> <p>3.7.9 蝴蝶花紫& 蔷薇紫 55</p> <p>3.8 黑、白、灰 56</p> <p>3.8.1 认识黑、白、灰 56</p> <p>3.8.2 白& 月光白 57</p> <p>3.8.3 雪白& 象牙白 57</p> <p>3.8.4 10% 亮灰&50% 灰 58</p> <p>3.8.5 80% 炭灰& 黑 58</p> <p>第4 章 APP UI 设计的元素</p> <p>4.1 标志 60</p> <p>4.1.1 简约素雅的标志设计 61</p> <p>4.1.2 趣味多彩的标志设计 62</p> <p>4.1.3 标志设计技巧——</p> <p>图文结合的设计方法 63</p> <p>4.1.4 标志设计欣赏 63</p> <p>4.2 图案 64</p> <p>4.2.1 风格多变的图标设计 64</p> <p>4.2.2 应用界面的图案设计 66</p> <p>4.2.3 图案设计技巧——造型独特的图案 67</p> <p>4.2.4 图案设计赏析 67</p> <p>4.3 色彩 68</p> <p>4.3.1 缤纷多彩的色彩设计 69</p> <p>4.3.2 单一色调的色彩设计 70</p> <p>4.3.3 色彩设计技巧——统计图的应用 71</p> <p>4.3.4 色彩设计欣赏 71</p> <p>4.4 字体 72</p> <p>4.4.1 应用中的字体设计 73</p> <p>4.4.2 图标中的字体设计 74</p> <p>4.4.3 字体设计技巧——文字样式</p> <p>的修改 75</p> <p>4.4.4 字体设计赏析 75</p> <p>4.5 导航栏 76</p> <p>4.5.1 顶部与底部的导航栏设计 77</p> <p>4.5.2 “汉堡包菜单”的导航栏设计 78</p> <p>4.5.3 导航栏设计技巧——适用屏幕旋转的设计 79</p> <p>4.5.4 导航栏设计赏析 79</p> <p>4.6 主视图 80</p> <p>4.6.1 骨骼型的主视图设计 81</p> <p>4.6.2 **型的主视图设计 82</p> <p>4.6.3 主视图设计技巧——采用不同的设计版式 83</p> <p>4.6.4 主视图设计赏析 83</p> <p>4.7 工具栏 84</p> <p>4.7.1 固定工具栏设计 85</p> <p>4.7.2 浮动工具栏设计 86</p> <p>4.7.3 工具栏设计技巧——带搜索功能的工具栏 87</p> <p>4.7.4 工具栏设计赏析 87</p> <p>4.8 设计实战:社交软件用户信息界面设计 88</p> <p>4.8.1 设计思路 88</p> <p>4.8.2 配色方案 88</p> <p>4.8.3 版面构图 90</p> <p>4.8.4 色彩 90</p> <p>4.8.5 字体 91</p> <p>4.8.6 导航栏 91</p> <p>第5 章 APP UI 设计的行业分类</p> <p>5.1 游戏类APP UI 设计 93</p> <p>5.1.1 游戏类APP UI 设计——休闲类游戏 94</p> <p>5.1.2 游戏类APP UI 设计——动作冒险类游戏 95</p> <p>5.2 社交类APP UI 设计 97</p> <p>5.2.1 社交类APP UI 设计——电话短信 98</p> <p>5.2.2 社交类APP UI 设计——聊天交友 99</p> <p>5.3 购物类APP UI 设计 101</p> <p>5.3.1 购物类APP UI 设计——服装类 102</p> <p>5.3.2 购物类APP UI 设计——产品类 103</p> <p>5.4 工具类APP UI 设计 105</p> <p>5.4.1 工具类APP UI 设计——地图导航 106</p> <p>5.4.2 工具类APP UI 设计——天气预报 107</p> <p>5.5 生活类APP UI 设计 109</p> <p>5.5.1 生活类APP UI 设计——旅游 110</p> <p>5.5.2 生活类APP UI 设计——外卖 111</p> <p>5.6 娱乐类APP UI 设计 113</p> <p>5.6.1 娱乐类APP UI 设计——音乐播放器 114</p> <p>5.6.2 娱乐类APP UI 设计——视频播放器 115</p> <p>5.7 阅读类APP UI 设计 117</p> <p>5.7.1 阅读类APP UI 设计——小说阅读器 118</p> <p>5.7.2 阅读类APP UI 设计——漫画阅读器 119</p> <p>5.8 拍摄美化类APP UI 设计 121</p> <p>5.8.1 拍摄美化类APP UI 设计——相机 122</p> <p>5.8.2 拍摄美化类APP UI 设计——美化图片 123</p> <p>5.9 新闻类APP UI 设计 125</p> <p>5.9.1 新闻类APP UI 设计——新闻资讯 126</p> <p>5.9.2 新闻类APP UI 设计——报纸杂志 127</p> <p>5.10 设计实战:办公类APP UI设计流程详解 129</p> <p>5.10.1 设计思路 129</p> <p>5.10.2 配色方案 129</p> <p>5.10.3 版面构图 130</p> <p>5.10.4 首页 131</p> <p>5.10.5 收件箱 132</p> <p>5.10.6 编写邮件 132</p> <p>第6 章 APP UI 设计的风格</p> <p>6.1 ** 134</p> <p>6.1.1 **——登录页面的UI 设计 135</p> <p>6.1.2 **——页面提示弹窗的UI 设计 136</p> <p>6.2 清新 138</p> <p>6.2.1 清新——明亮色彩的UI 界面设计 139</p> <p>6.2.2 清新——形象可爱的UI 设计 140</p> <p>6.3 科技 142</p> <p>6.3.1 科技——指纹识别UI界面设计 143</p> <p>6.3.2 科技——天气预报UI界面设计 144</p> <p>6.4 凉爽 146</p> <p>6.4.1 凉爽——颜色 147</p> <p>6.4.2 凉爽——干净简洁的UI界面设计 148</p> <p>6.5 美味 150</p> <p>6.5.1 美味——烹饪类应用的UI界面设计 151</p> <p>6.5.2 美味——订餐类应用的UI界面设计 152</p> <p>6.6 热情 154</p> <p>6.6.1 热情——色彩明快的UI界面设计 155</p> <p>6.6.2 热情——活力四射的运动类UI 界面设计 156</p> <p>6.7 高端 158</p> <p>6.7.1 高端——**品应用的UI 设计 159</p> <p>6.7.2 高端——个人定制的UI 设计 160</p> <p>6.8 浪漫 162</p> <p>6.8.1 浪漫——粉色系桌面的UI 界面设计 163</p> <p>6.8.2 浪漫——应用花朵元素的UI 界面设计 164</p> <p>6.9 硬朗 166</p> <p>6.9.1 硬朗——游戏页面中坚硬感UI 设计 167</p> <p>6.9.2 硬朗——稳定沉稳的UI 设计 168</p> <p>6.10 纯净 170</p> <p>6.10.1 纯净——简约纯洁的UI界面设计 171</p> <p>6.10.2 纯净——线条感十足的UI图标设计 172</p> <p>6.11 复古 174</p> <p>6.11.1 复古——像素游戏的UI界面设计 175</p> <p>6.11.2 复古——使用传统物品进行UI 图标设计 176</p> <p>6.12 扁平化与拟物化 178</p> <p>6.12.1 扁平化风格 179</p> <p>6.12.2 拟物化风格 180</p> <p>6.13 设计实战:手机游戏启动界面设计 182</p> <p>6.13.1 设计思路 182</p> <p>6.13.2 配色方案 182</p> <p>6.13.3 版面构图 184</p> <p>6.13.4 凉爽 184</p> <p>6.13.5 硬朗 185</p> <p>6.13.6 清新 185</p> <p>第7 章 APP UI 设计秘籍</p> <p>7.1 UI 设计中的版式布局 187</p> <p>7.2 通过实例来了解UI 界面 188</p> <p>7.3 颜色的合理搭配 189</p> <p>7.4 图标的物理尺寸与实际尺寸 190</p> <p>7.5 常用的集中设计尺寸 191</p> <p>7.6 MBE 风格的设计 192</p> <p>7.7 开放式路径图标的妙用 193</p> <p>7.8 列表的设计方式 194</p> <p>7.9 字体的使用 195</p> <p>7.10 页面空间的节省 196</p> <p>7.11 贴近场景的显示切换 197</p> <p>7.12 欢迎页面的设计 198</p> <p>7.13 交互方式的设计 199</p> <p>7.14 视觉风格的设计 200</p>显示全部信息前 言前言
本书是笔者对从事APP UI 设计工作多年的一个总结,是让读者少走弯路寻找设计捷径的实用手册。书中包含了APP UI 设计必学的基础知识及经典技巧。本书不仅有理论和精彩的案例赏析,还有大量的模块启发你的大脑,锻炼你的设计能力。
希望读者看完本书后,不只会说:“我看完了,挺好的,作品好看,分析也挺好的。”这不是笔者编写本书的目的。我们希望读者会说:“本书给我更多的是思路的启发,让我的思维更开阔,学会了设计的举一反三,知识通过吸收消化变成自己的。”这是笔者编写本书的初衷。
本书共分7 章,具体安排如下
第1 章 APP UI 设计的原理,介绍APP UI 设计的概念,用户体验,点、线、面,尺寸与规则,设计的原则,设计的法则,是*简单、*基础的原理部分。
第2 章 APP UI 设计的基础知识,其中包括UI 与色彩、APP UI 设计的布局。
第3 章 APP UI 设计的基础色,从红、橙、黄、绿、青、蓝、紫、黑、白、灰10 种颜色,逐一分析讲解每种色彩在APP UI 设计中的应用规律。<p>前言</p> <p>本书是笔者对从事APP UI 设计工作多年的一个总结,是让读者少走弯路寻找设计捷径的实用手册。书中包含了APP UI 设计必学的基础知识及经典技巧。本书不仅有理论和精彩的案例赏析,还有大量的模块启发你的大脑,锻炼你的设计能力。</p> <p>希望读者看完本书后,不只会说:“我看完了,挺好的,作品好看,分析也挺好的。”这不是笔者编写本书的目的。我们希望读者会说:“本书给我更多的是思路的启发,让我的思维更开阔,学会了设计的举一反三,知识通过吸收消化变成自己的。”这是笔者编写本书的初衷。</p> <p>本书共分7 章,具体安排如下</p> <p>第1 章 APP UI 设计的原理,介绍APP UI 设计的概念,用户体验,点、线、面,尺寸与规则,设计的原则,设计的法则,是*简单、*基础的原理部分。</p> <p>第2 章 APP UI 设计的基础知识,其中包括UI 与色彩、APP UI 设计的布局。</p> <p>第3 章 APP UI 设计的基础色,从红、橙、黄、绿、青、蓝、紫、黑、白、灰10 种颜色,逐一分析讲解每种色彩在APP UI 设计中的应用规律。</p> <p>第4 章 APP UI 设计的元素,其中包括标志、图案、色彩、字体、导航栏、主视图、工具栏。</p> <p>第5 章 APP UI 设计的行业分类,其中包括9 种不同行业的APP UI 设计的详解。</p> <p>第6 章 APP UI 设计的风格,其中包括12 种不同的视觉印象。</p> <p>第7 章 APP UI 设计秘籍,精选14 个设计秘籍,让读者轻松愉快地学习完*后的部分。本章也是对前面章节知识点的巩固和理解,需要读者动脑筋去思考。</p> <p>本书特色如下</p> <p>轻鉴赏,侧重实践。鉴赏类书籍,看完自己还是设计不好;本书则不同,增加了多个动手的模块,可以让读者边看边学边练。</p> <p>章节合理。第1~3 章主要讲解APP UI 设计的基本知识,第4~6 章介绍APPUI 设计的元素、行业分类、风格,*后一章以轻松的方式介绍14 个设计秘籍。</p> <p>针对性强。由设计师编写,写给设计师看,而且知道读者的需求。</p> <p>模块丰富。案例解析、设计技巧、配色方案、设计欣赏、设计秘籍在本书都能找到,全方位地满足读者的所有需求。</p> <p>本书是本系列图书中的一本。在本系列图书中读者不仅能系统地学习APP UI设计,而且还有更多设计专业的图书供读者选择阅读。</p> <p>本书希望通过对知识的归纳总结、趣味的模块讲解,开阔读者的思路,避免一味地照搬书本内容,推动读者多做尝试、多理解,增加动脑、动手的能力。希望通过本书能激发读者的学习兴趣,开启设计的大门,帮助您迈出**步,圆您一个设计师的梦!</p> <p>本书由孙芳编著,其他参与本书编写的人员还有柳美余、苏晴、郑鹊、李木子、矫雪、胡娟、马鑫铭、王萍、董辅川、杨建超、马啸、孙雅娜、李路、于燕香、孙芳、丁仁雯、张建霞、马扬、王铁成、崔英迪、高歌。</p> <p>由于编者水平有限,书中难免存在错误和不妥之处,敬请广大读者批评和指正。</p> <p>编 者</p>显示全部信息免费在线读第 2章 APP UI 设计的基础知识
UI 即用户界面的简称,UI 设计是指对软件的人机交互、操作逻辑、界面美观的整体设计,好的UI 设计不仅可以使软件变得有个性有品位,还可以使软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。
随着互联网时代的腾飞与手机、平板电脑等移动端的迅速崛起,界面设计师的需求量也日益增加,从事界面设计的“美工”也随之被称之为“UI 设计师”或“UI 工程师”。其实软件界面设计就像工业产品中的工业造型设计一样,是建立在科学性之上的艺术设计,是产品的重要卖点,一款���品拥有美观的界面会给人带来舒适的视觉享受,拉近人与商品的距离。本章主要从颜色、版式两方面进行讲解。
2.1 UI 与色彩
色彩是十分重要的科学性表达,是主观上一种行为反应,在客观上是一种刺激现象和心理表达。色彩*大整体性就是画面的表现,把握好整体色彩的倾向,再去调和色彩的变化,才能做到更有具体性。色彩是一种诉说人情感的表达方式,对人的心理和生理都会产生一定的影响。在设计中,可以利用人对色彩的感受来创造富有个性层次的画面,从而使设计更加突出。
红——780 ~ 610nm
橙——610 ~ 590nm
黄——590 ~ 570nm
绿——570 ~ 490nm
青——490 ~ 480nm
蓝——480 ~ 450nm
紫——450 ~ 380nm
2.1.1 色相、明度、纯度
色彩的属性是指色相、明度、纯度三种性质。

目录
第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.针对性强。针对设计师、专业学生、培训机构等,编写内容始终围绕此类人群。 2.实用性强。注重引导设计师的思维模式、设计理念、创意创新,可以应对设计师日常工作中遇到的问题,及急需补充的知识。 3.版面美观。注重案例及精彩赏析的选择,大量**作品让本系列图书更美观大气、更具设计感,采用铜版印刷更精美。 特色: 轻松学习配色法则,知识易懂、案例易学 本系列图书全面讲解了综合色彩、服装、网页、海报招贴、平面广告、展示陈列、商品包装、品牌形象、室内家居、商业广告、APP UI、VI与标志、字体、图形创意、软装饰、书籍装帧领域内相关的配色原理、基础知识、基础色、设计风格和类型、时尚元素以及配色设计秘籍,让读者快速掌握配色设计的方法和规律。 配色方案精彩呈现,动手实践、发散思维 每本书中都安排了案例解析、设计技巧、配色方案、设计欣赏、设计实战、设计秘籍经典模块,不仅丰富了服装配色的内容,而且还增强了实用性,从而提升读者的设计敏锐度以及对配色的判断能力。