我为什么不留白——手机页面设计

我为什么不留白

昨天写了篇文章（电商详情设计思路——http://www.zcool.com.cn/article/ZNjIwMTQw.html）提到了手机端页面的设计特点今天补上。

讲干货之前呀我喜欢来点铺垫，扯点相关的行业背景，或者数据啥的不感兴趣的同学可以直接跳过这个装逼环节

首先我们来听两首歌（哎吆我擦多希望这个一个现场讲座那样装逼更有感觉）

1、《加州旅馆》（Hotel California）

2、《东方红》

《加州旅馆》

美国著名乡村摇滚乐队老鹰乐队（Eagles）的歌曲，由乐队鼓手Don Henley担任主唱，单曲发行于1977年2月22日，收录在乐队第五张录音室同名专辑《加州旅馆》中。时至今日其经典的吉他旋律、诡异莫名的歌词内容、感人心弦的悲世情怀，至今都是乐迷的最爱，我相信大家也挺喜欢的。

创作背景

60年代是美国音乐界的自由创作时期，摇滚乐的流行成为60年代自由与反叛思想的象征，然而其盛况也逐渐造成了乐手日益糜烂的生活态度。吸毒和淫乱几乎成了每个美国摇滚乐手在70年代走的同一条堕落之路，金钱与享乐成为了摇滚音乐在70年代的新形象。

同为音乐人的老鹰乐队看到这样的事实，却无能为力。乐手们已经将这种沉迷的生活看成了是音乐界的常态，摇滚乐手们周围总充满了漂亮的姑娘和糜烂的生活。于是，乐队创作了这首《加州旅馆》。

《东方红》

1964年，由周恩来总理一手促成的，为庆祝建国15周年而举办的大型革命音乐舞蹈史诗《东方红》正是以此歌为开篇曲。“东方红”从某种程度上来讲，已经成了中国精神的另一种代称。

我想问的是两个都是60年代的歌曲，先在《加州旅馆》还被大家听，但是你告诉我你还听《东方红》吗？

我在这里要说的不是洋气和土气这么肤浅的问题，我要说的是人的意识形态的问题。美国在60年代人的意识形态已经跟我们现代差不多了（当然了他们50多年来意识形态没有多大变化）

看看我们60年代（文革）人人绿军装

70年代工装背带裤、假领子、小白鞋、的确良

80年代蝙蝠衫、棒针衫、滑雪衫、牛仔裤、回力鞋

90年代西装衬衫、紧身裙，T恤衫，耐克已成为奢侈的潮流。

这里只通过穿衣打扮来看不同时代的意识形态展现，当然意识形态取决于很多因素。

是一种对事物的感观思想，它是观念、观点、概念、思想、价值观等要素的总和。意识形态不是人脑中固有的，而是源于社会存在。人的意识形态受思维能力、环境、信息（教育、宣传）、价值取向等因素影响。不同的意识形态，对同一种事物的理解、认知也不同。

意识形态不要只停留在PC&好看

所以做手机端设计的时候，你要明确一点你不是在做平面也不是在做PC

好了扯远了回归正题

上面说了意识形态（不同时期人的意识不同）下面结合意识形态说手机页面的设计。在说之前需要结合一下信息传播媒介的变化及不同媒介的画面设计的不同。下面分个时代可能分的并不是很准确（大家轻喷）只是为了阐释信息经过的几个时代。

1、纸媒时代——排版

纸媒传统意义上是指报纸、杂志等以纸张为载体的媒体。

1949-1978年之间大众接受信息的方式主要是口口相传及少量的国家印刷的xx语录等纸媒；

1978-1982年之间普通大众接触信息的主要方式是报纸，杂志，书籍等以纸张为载体的媒介；

2、电视时代——平面设计发展

1982-1996年之间电视普及

3、互联网1.0时代——多元化设计开始

1996-2005年之间电脑普及

4、互联网2.0时代——设计分类、ui、交互、视觉……

2005-2011手机普及

5、互联网3.0时代——设计市场相对饱和

2011-至今智能手机普及

这个时代由于信息过载，我们的耐心似乎渐渐的没有了。在做移动端设计的时候如果还是带着PC思维惯性！那么你的客户将离你越来越远。

下面是雷大大发的一条微博（不知道为什么突然想说“are you ok？”）

你给boss的图是不是这样的？

无论是设计还是摄影，下面的图都可以说——是优秀的作品。

但是你摸着自己的良心说看得清文字吗？

PC思维惯性

没有移动设计意识；根本没有移动端设计呀有木有

手机用户啥样？

1、没时间、没耐心看

2、只看标题和图片

3、只有竞争对手才会仔细看你（哈哈哈来电商运营巴拉巴拉你关注的店铺，产品经理巴拉巴拉手机上的app，射鸡湿看看自己的收藏哈哈哈哈）

4、心不在焉的走马观花

5、想想自己玩手机时的那个死德性哈哈哈哈

请看下图，这么多字！尼玛看晕了！草！不看了走人！

用户看不想看的，设计再美也没鸟用！

能理解加粗、描边、大红色的意思了吗？意思就是要突出重点而非直接加粗描边

移动端设计四大原则

1、竖构图      2、大图文     3、文字少    4、说人话

竖构图      大图文，内容撑满画面文字放大几倍

文字少    说人话，通俗易懂不要装逼（虽然我很装逼哈哈哈哈）

用户和你真正想看的

1、竖构图——大图文

2、不要左右留白

3、一屏一个卖点

4、上下分栏

5、标题字号48以上

6、文字少于30字

7、长文案整版只用文字（大字号）

8、纯色背景图文分开（产品别跟字黏糊一块）

9、大胆用特写局部图

10、用好间隔和空白（说的上下不是左右哈）