竖屏思维——手机端设计新理念.docx

竖屏思维〔一〕：醒觉思维惯性

思维盲区1

明明知道“80%销售业绩来自端”，但80%资源和精力还是放在PC端

思维盲区2明明知道“大多数阅读用户来自端”，但大多数时候做的是PC端用图

思维盲区3

明明知道“屏和PC屏不同”，却不肯为屏单独做图

思维盲区4明明知道要做“大图大字”，但莫名其妙做成了小图小字

一个人拿着PC战场的思维和方法，企图在上获得成功，这叫什么，这叫刻舟求剑。

竖屏思维的五层含义

第一层含义：屏幕是竖屏，PC屏幕是横屏

第二层含义：不仅仅是竖屏，屏还有其他重要特点也被忽略了

第三层含义：用户根本不会重视你

第四层含义：不仅仅是用户，而是整个时代的用户都不会重视你

第五层含义：屏、用户的改变，是自然选择的结果

竖屏思维处于什么阶段？

1竖屏思维为什么会是全行业的思维盲区

2?当前竖屏思维远未成为主流，所以红利依旧

3竖屏思维红利来自创造力

竖屏思维〔二〕：重新认识战场

重新认识移动互联网的主战场——你并不了解屏

【屏的第1个特点】大像素小屏：不同像素密度引发了沟通障碍

【屏的第2个特点】主流的智能屏，宽度都小于8厘米,屏宽比人类双目距离小：我们都是斗鸡眼

【屏的第3个特点】

一屏一个主题?VS?一屏多个主题

一张扑克牌，可以轻易做到“瞄一眼就能马上读懂”，是用户在屏上读取信息时，最舒服、最自然、最喜欢的状态了。

有没有想过，你的打量情，应该做成“一张扑克牌”的样子？

【屏的第4个特点】

竖屏！竖屏！竖屏！

屏——人类第一次大规模面对竖屏获取信息

竖方形图：竖屏上最舒服的构图形式

【屏的第5个特点】

小屏幕大世界：一孔亦可窥豹

第一层理解：屏上的东西被缩小了

第二层理解：屏的擅长和不擅长

第三层理解：一孔亦可窥豹

竖屏思维〔三〕：重新认识用户

屏至少有以下五个特点：

用户特点1

时间零碎，没有成块的阅读时间

用户特点2

地点零乱，没有固定的阅读环境

用户特点3

耐心零落，随时准备逃离进入下一屏

用户特点4

阅读常态：跳读、挑读、瞄读、瞟读

用户特点5

根本上只看标题，长文案是小概率事件

列表页标题：决定用户是否进入

内容页标题：让用户阅读更舒服、理解更准确

如果加个标题“这就是我想要的家纺”，就大不一样。

视频标题：快速导读

用户特点6

只有下意识，害怕深度思考

用户特点7

几秒钟就完成从信息筛选、决断到跳离

用户特点8

梦游人

用户特点9

移动靶射击手

总结如下：

用户的9个特点

到此，我们已经得到了用户9个特点：

特点1：时间零碎，没有成块的阅读时间

特点2：地点零乱，没有固定的阅读环境

特点3：耐心零落，随时准备逃离进入下一屏

特点4：浅度阅读，跳读、挑读、瞄读、瞟读

特点5：只看标题，看长文案是小概率事件

特点6：下意识指引，很少深度思考

特点7：几秒钟就完成信息筛选、决断、跳离

特点8：梦游人

特点9：移动靶射击手

刀刀见血、立竿见影

第一刀纵向构图

直接针对我们的屏幕的形状，来做屏的构图。

建议手淘一屏的尺寸用：宽750*高1000，9:12竖屏。

第二刀砍掉左右留白

第一个案例：戴口罩的女孩

第二个案例：鳄鱼皮壳

第三个案例：朋友圈的小狗

第三刀?一屏一主题

第一个案例：一副眼镜的三个细节

第二个案例：看见楚楚动人的小猪

一屏一主题的表达

第三个案例：内容丰富的加湿机

第四个案例：5张扑克牌vs1张扑克牌

第四刀?左右分栏变上下分栏

第一个案例?左图右文的习惯性表达

第二个案例?无线耳机，要逼格更要内容

第三个案例?神奇的美食

第五刀，砍向标题文字的大小。

标题字高≥1/10屏高

竖屏思维不以字号为单位来衡量文字大小

案例一?PC上觉得大小刚好的标题

案例二?家纺标题

案例三?女装标题

案例四?化装品标题

案例五?微博配图标题

案例六?大至1/5屏高的标题

第六刀-一屏文案字数3行30字

案例一?牛皮癣式文案

案例二?培训教材文案

案例三?不能轻松读完的文字

案例四两行字比三行字更好

第七刀?长文案整版只用文字

案例一?图文穿插式长文案

用户根本就没读文字，即使文案写得惊天地泣鬼神也没用。

案例二?上下别离式长文案

案例三?整版文字长文案

案例四?整版文字+切割成小段落

案例五?整版文字+?小段落大标题+一半空白

人眼的注意力优先级

视频图片标题文字空白

总结：如何处理详情图上的长文案

第八刀?背景图上莫压字

案例一?背景图上压长文案

案例二?多个产品图上压多个卖点文字

案例三?在图片半透明区域上压字

案例四?两种压字方式的比照

案例五?当文字和图片彻底分开

案例六?标题并非需要独立底色

案例七底色并非要用白色

总结：背景图尽量简单?并和文字完全别离

第九刀?大胆使用近焦局部图

案例一鼻尖下的棉花

案例二