搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
如何做好无线端页面之大图大字 电商无线思维(淘宝、天猫、京东详情首页)
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
UI教程
发布时间:2020-05-08
关注
本帖最后由 黑衣人电商设计 于 2017-11-8 20:02 编辑
写在前面:现在电商90%的流量订单都来自无线端,有的商家还没有意识到这个问题,仍然把精力和资源放在pc端,有的重视到了无线端的重要性,但很多都还只是将pc端的图直接移植到无线端,并没有去针对和研究无线端的特性来设计图片,上一篇我们针对无线端的崛起做了一个很宏观的讲解,针对无线端的特性,也总结出了做好无线端页面的四大准则,今天我们讲讲第一个准则大图大字。
电商页面大致分为两个,一个是详情页,一个是承接页,包括店铺首页,二级页面我们都可以归为承接页。详情页的来源只有两种,一种是工厂提供的页面,很多经销商都是直接拿工厂详情直接卖,暂且先不说设计的好坏,可怕的是很多都是4年前或者更久的详情了,因为工厂不会每年去更新详情,另一种就是自己设计页面,不管是哪种途径来的详情页,如果没有很好的根据无线端特性来设计,或多或少都会出现一些问题,这里就图片和字体大小来展开讨论。
问题1:字太小无线端的崛起来的非常之快很准,以至于原本在pc端看起来很精致的文字排版,现在手机上看,出现大量的看不清,一般是这两种情况造成的:
1.第一种情况是文案不多,但设计师为了美观,把字排的很小,对于设计师来说,不论是从美观还是艺术性上来说,字体小一点会显得精致,高档,这在还没有无线端的时候并没有什么错,但现在90%的订单都来自无线端的时候,我们优先考虑的是要保证无线端的客户看得清,如果看都看不清,你的文案还有什么意义呢,更不幸的是恰巧买家正想看你这个文字解说,这下好了,什么鬼,居然看不清,想想这是多么糟糕的体验。
解决方案本质上,详情页介绍是为了向买家传递信息,讲述你的牛逼,是一种营销,它的功能是卖货,设计师不必过分追求设计上的美感和艺术性,保证字体能够让买家很轻松的阅读,这是最基本的。字放多大呢,这里可以大家一个参考值,以天猫详情为例,790像素下,主标题不低于48号,解说文案通常我是用30号。(个人习惯,仅做参考)
2.第二种情况是文案太多导致排版把字排很小,作为卖家总有千言万语想对买家说,我家产品怎么牛逼,真的很牛逼,真的真的很牛逼,相信我,你看这个123456点...嘚吧嘚吧,恨不得每个卖点都做一个详细的解说,文案太多,设计师很自然的会把字体排的比较小。
解决方案精简你的文案啊,大哥,可能你会说这不是废话嘛,谁不知道啊,但哥的文案就是已经精简到无法再删掉一个字了,还是有那么多,咋办?那就让他占用你多一点空间的嘛,多大点的事,字多不是错,错的是你让人看不清,长文案的处理这一点我们可以从手机厂商的页面学习,做手机应该是最注重人机交互和客户体验的,大家也可以都看看他们的页面,你会受益匪浅。
也许你会说,我不是卖手机的啊,我们也没有这么专业啊,我们当然没有这么专业,但我们要理解他们这么做背面的逻辑,为什么文字要放这么大,为什么要放这么长,为什么要竖屏排版,因为他们知道90%以上的流量和订单都是来自手机端,这是大数据的意义,让你知道客户从哪来,那为什么我们不把页面做的更适和手机浏览呢,现在越来越多的页面都趋向手机厂商页面这种排版方式了,小狗电器、焦下、babycare等等,有意识到且行动的店铺不在少数,你也许会担心这样排版那页面不是很长吗,其实你大可不必担心这个长度问题,好的客户体验才是关键,这个问题我们在下一篇来研究探讨!
问题2:图太小很多时候为了设计上的美观,一排会放到3个甚至4个小图,原来可能想要表达的细节图,结果手机上看却变成了看不清。
解决方案现在主流的手机屏幕大小是5.5寸,和5寸,相对于pc电脑,都是很小的一块屏幕,如果你想展示产品的细节那请不要吝啬,放大吧,确保手机上能够真正看到你的细节,抓住买家的眼球。
对于无线端首页很容易出现的一个问题是,有些商家会直接把pc端原封不动的直接缩小放到无线首页,直接看图吧。
解决方案对于无线首页,绝对不能直接将pc端首页缩小放上去,一定要调整图片和字体的大小,文字多的时候一定要做减法以适应手机端浏览!
最后总结下今天的知识点:无论你是怎么样的排版方式,无论你的文案有多么的丰富,也无论你的图片有多么的精美,请保证图片字体的大小,大图大字,确保手机端可以不费吹灰之力、可以很轻松的阅读浏览,而不是勉强或者仔细看才可以看的清,这是一种人机交互的客户体验。日复一日的唠叨,无线端的占比只会越来越高,越早做好无线端客户体验,就越早抢占先机,淘宝视频,还有接下来淘宝VR主图(内测中),都是一个机会,你可以拒绝学习,但你的对手不会。无线思维,做更适合手机浏览的图!
UI教程作品
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
像素图标
收藏
原型demo
收藏
APP设计
收藏
原型demo
收藏
面性图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
Load More