触动人心的手机端页面设计

     

 

    这是一本结合目前手机端页面潮流的设计书，除了详细讲述手机端页面设计的各个要点（包括字体、颜色、字号、留白、布局等），还列举了众多实例（包括*、唯品会、*、Apple手机、途牛等大型手机网站页面）来帮助读者提升审美能力。全书从基础入门，图文并茂地细谈手机端的版式、细节、配图、配色等，在各个重点上帮助读者掌握手机页面设计的要领；然后传授完整的设计分析；*后通过营销角度来点评作品，让新手看完本书之后，不仅懂得怎么做一个手机页面，更懂得如何设计适合营销的手机页面。为了便于读者轻松提高，本书还介绍了一些PS小技巧（涉及配色、配图、字体设计等），并传授了一些从事页面设计的软件应用知识（涉及Ps Play、ColorSchemer Studio等软件），帮助广大设计师更好地掌握页面设计的精髓，从而得心应手地设计出优秀作品。

      林琼
      网页设计师，9年网页设计经验，熟悉网页设计发展趋势，拥有丰富的网页设计经验与技巧，对营销型网页设计有着深刻的理解，商用手机页面作品数量已过百，PC端页面设计作品更是数不胜数。曾为多家企业、医院、*店铺做过各种不同的页面设计，并很好地应用在互联网中。对于页面设计的发展潮流，有着独到且敏锐的洞察力。

第1部分 手机端设计的趋势

 

第1章 手机上网已成主流 / 3
1.1 手机端用户到底有多少 / 4
1.2 手机端设计的分类 / 4
–1.2.1 APP / 4
–1.2.2 手机端网站 / 5
–1.2.3 其他页面设计 / 7
1.3 小结 / 7

 

第2章 手机端相关市场调查 / 9
2.1 手机品牌与屏幕尺寸统计 / 10
2.2 手机屏幕分辨率统计 / 11
2.3 Photoshop 小技巧 / 12
2.4 小结 / 14

 

第2部分 细谈手机端页面设计 / 15

第3章 手机端页面设计的预备知识 / 17
3.1 了解手机用户的视线 / 18
3.2 手机端2 秒原则 / 20
3.3 小结 / 21

 

第4章 手机端页面架构 / 23
4.1 手机引导页 / 24
4.2 手机网站 / 25
–4.2.1 单屏手机站 / 26
–4.2.2 其他手机站 / 27
4.3 手机专题 / 29
–4.3.1 单屏滑动专题 / 29
–4.3.2 整页专题 / 30
4.4 小结 / 32

 

第5章 手机端页面设计元素 / 33
5.1 文字设计 / 34
–5.1.1 字号的选择 / 34
–5.1.2 字体的选择 / 35
5.2 颜色设计 / 37
–5.2.1 选主色 / 37
–5.2.2 对比色 / 41
–5.2.3 相近色 / 45
–5.2.4 选色工具 / 46
5.3 图形设计 / 49
–5.3.1 单个形状的应用 / 49
–5.3.2 多个形状的应用 / 52
–5.3.3 Photoshop 形状小技巧 / 53
5.4 留白很重要 / 56
–5.4.1 整体留白 / 56
–5.4.2 局部留白 / 61
5.5 布局设计 / 62
–5.5.1 上下布局 / 63
–5.5.2 左右布局 / 64
5.6 页面配图 / 65
–5.6.1 icon 的选择 / 65
–5.6.2 其他图片搭配 / 67
5.7 小结 / 69

 

第6章 手机端页面设计提升 / 71
6.1 主流设计 / 72
–6.1.1 扁平化设计 / 72
–6.1.2 扁平立体结合 / 76
–6.1.3 扁平技巧 / 78
–6.1.4 Photoshop 制作长投影 / 79
–6.1.5 制作不规则图形 / 83
6.2 Banner 设计 / 87
–6.2.1 Banner 的尺寸 / 87
–6.2.2 选用字体 / 89
–6.2.3 背景配图 / 91
6.3 图文并茂 / 93
–6.3.1 文字融入图片 / 93
–6.3.2 图文分离 / 95
–6.3.3 出格立体感 / 96
6.4 字体设计 / 97
–6.4.1 硬字体 / 97
–6.4.2 软字体 / 98
–6.4.3 立体字体 / 99
–6.4.4 Photoshop 制作字体 / 101
6.5 点线面的组合 / 106
–6.5.1 点 / 106
–6.5.2 线 / 107
–6.5.3 面 / 108
–6.5.4 点线面结合技巧 / 110
6.6 营销型页面 / 114
–6.6.1 网站营销概念 / 114
–6.6.2 营销型网站要点 / 115
–6.6.3 手机营销网站的技巧 / 117
6.7 小结 / 118

 

第3部分 案例分析

第7章 优秀手机端页面解析 / 121
7.1 购物类手机网站 / 122
7.2 信息类手机网站 / 138
7.3 行业类手机网站 / 151
7.4 手机专题页 / 170
7.5 手机页的各类广告 / 177
7.6 小结 / 182

       随着互联网越来越发达，智能手机迅速普及。根据中国互联网络信息中心（CNNIC）发布的第37 次《中国互联网络发展状况统计报告》，截至2015 年12 月，我国网民中，使用手机
       上网的比例为90.1%，其中仅通过手机上网的网民占18.5%。近几年，移动通信技术从2G 一直升级到现在的4G，再加上各地逐步免费开放的Wi-Fi，人们从以前单一使用电脑进行网上冲浪，到如今将大部分时间都转移到了更加方便的手机上网。很多网民使用手机上网的时间，已经远远超过了打电话的时间。手机带来的便利，使得越来越多的人注意到了手机所衍生出来的商机，众多商家纷纷开始针对手机端页面展开各式各样的营销活动，因此诞生了各种各样的应用产品。商家中代表性的有腾讯、百度、阿里巴巴、搜狐、360 等。

      手机端的营销迅速崛起，这让很多设计师们应接不暇，手机端的设计应该怎么做？如何去做好手机端的设计？尚未成熟的手机端设计路线，让众多设计师们很苦恼。作为一个资深的高级网站设计师，本书作者经过多年的美工设计研究，一路走来，亲眼见证了手机端设计从一开始的雏形发展到今天，深有感触，而且经常看到身边的菜鸟同事面对各种页面不知所措，尤其是对手机页面的设计无从下手，把好好的一个页面做成了PPT……于是萌生了编写这本书的念头，以期帮助大家学会手机端设计，提升设计能力，做出更多显得更加“高端、大气、上档次”的设计。

       手机端的设计，包括手机网站的广告设计、单屏页的设计、微信页面设计等。大家用手机打开淘宝、QQ、、微信朋友圈等，都可以大量地看到这类型的手机端设计。手机端设计是一个新的设计方向，它在屏幕、色调、营销角度等方面不同于电脑端。在设计上，手机端的要求会与电脑端的要求有很大不同。

       在本书中，一开始引导大家对手机端页面有一个基本的了解，对页面有个总体的概念，然后开始着手深入地了解手机页面设计的每个要点。书中从简单、规范的知识点开始讲述，包括字体的应用、颜色的搭配、形状的融合、留白的恰到好处、布局的规划、配图的技巧等，再结合一些手机页面设计所的小工具应用技法，让每个知识点汇聚在一起，形成一个规范性的基本的手机页面。

       在完成前面这一部分基础设计学习后，读者已经可以自己独立设计出一个基础页面，但是距离一个“高大上”的设计页面还是有一定距离的，于是，读者需要进行接下来的页面提升学习。

        在本书中会用很大的幅度来讲述基础页面的提升技法，包括扁平化设计、Banner设计、图文设计、字体设计、点线面技巧等。这些页面提升技法会从一个点、一个大的模块上对设计进行全面的提升，后再总体地让页面整个设计得到跨越式的提升，从而让手机页面的设计跟上时代的步伐，甚至引领时尚。由于知识跨越度比较大，为便于读者学习，书中还引用了大量国内外优秀案例来进行佐证。

        通过学习提升部分的内容，读者已经可以设计出一个有模有样的手机页面了，但是在创作上，或许还是会缺乏经验，缺乏灵感。所以在图书的后，设置了一章内容为作品探讨研究，也便于读者巩固前面所学的知识点，通过一些比较出名、大型的手机网站页面（例如：淘宝、、唯品会、途牛、苹果等手机网站专题）来进行探讨研究。此部分有针对性地（特别是营销角度）对页面进行解剖分析，结合前面学到的知识点，吸取网站上的优秀设计经验，揣摩设计页面时的细节，从这些手机页面里搜寻设计灵感，补足自己的缺陷，以便在设计实战中，不仅懂得怎么做一个手机页面，更懂得如何做出极具营销价值的细腻、时尚的手机页面。

      本书主要由林琼编写，参与编写工作的还有：李媛、潘国允、林阳、林虎、李丽君、梁玉群、李晓欣、谢连娣、龙凤辉、陈玉贤、廖松生、李加爱、吴建茂、吴晓彤。另特别感谢家人和朋友给予的一切支持。

      在做设计的道路上，学到的知识需要经过很多实践来让作品成熟。本书力求精确地为读者指出一条“明路”，以便大家能少走弯路，吸取众多设计师的精华，从而走上一条光明大道！

很实在的一本书，讲得很详细。对于新手，会有很大帮助。
——康冠网络公司品牌总监  丁哲

这本书一开始很基础，每个设计点都考虑到了，后面的提升看出了作者水平，不赞不行了。
——全球网络公司网络总监  贾振羽

书中的例子很好，很喜欢举例部分，说得都很实在，又容易理解，很有参考价值。
——易云科技公司设计总监  *

真材实料的书啊！没有一定水平是写不出的，推荐在学手机端页面设计的同学们都看一看。
——杰作网络公司营运总监  陈明