快好知 kuaihz

淘宝无线端字体设计,你都用心了吗?

很头疼如何增加无线端的转化率?很头疼如何将如此多的产品信息放进如此小的无线端页面里?很头疼如何才能做出一个高大上的无线端页面?今天,跟大家一起来探讨下无线端的文字应用技巧吧。

正文

但是,无线端有别于PC端,它的可编辑空间比PC端小很多很多,如天猫PC端首页可编辑空间最大宽度可达1920px, 而无线端的首页可编辑空间只有608px。PC端详情页可编辑空间达790px,无线端的只有480px,且总体大小限制在1.5M以内。如此有限的空间,加上我们无线购物时环境光通常比较微弱。文字的应用遇到了较大的挑战,我们得在有限的空间里,塞进我们清晰产品图,清晰文字卖点,清晰活动信息,清晰产品内容等等,同时我们又属于考虑到用户体验,通过页面引导客户了解清晰我们的产品,这给不少设计师带来了许多烦恼,下面,我就为大家分享下,在无线端文字应用的一些技巧

一. 提炼文字信息

大麦电商发现,在我们制作无线端页面的时候,照搬PC端所有的信息明显是不现实的。把PC端的详情照搬到无线端

1. 文字多的话,文字会被缩放得很小很小,大部分文字都会处以一个看不清的状态。

2. PC端的详情较为复杂,暂且不说能否满足无线端1.5M的这个要求,就是满足了,加载速度也会受到一定程度的影响。

3. 产品的表述及页面的视觉效果会受到很大程度的影响。

从而无线端页面的用户体验,导致我们的无线端点击转化下降,甚至影响我们整个品牌的形象。那我们该如何把PC的信息表达到无线端呢?我们可以对文字进行提炼概括

方法一,将一些形容性的,装饰性的文字删除或者精简,保留能表达主要内容的文字,从而达到提炼的效果。例如:

调整前 调整后

方法二,从这段文字中提炼出简短的一句话,作为这段文字的标题,然后再稍微精炼下这段文字,用以作为对标题的详细阐述与装饰。

例如:

调整前 调整后

二. 合理布局+优化文字排版方式

大麦电商发现,将文字提炼好后,接下来我们从布局出发,充分的做好画面布局,合理利用每一块空间,在文字排版上多花心思,让文字信息带给客户一个舒适的视觉体验。无线端用户使用的屏幕比PC端的小很多,文字信息也相对较小。在排版时我们需要注意:

1.文字周围不宜有过多的装饰,以免导致画面过于复杂,影响阅读;

2.文字呈现位置不宜空间不宜过于狭窄;

3.文字与背景的需有较强的对比度,否则易读性就会受到很大的影响。用户阅读文字卖点时就会显得很困难,甚至会直接忽略掉文字。

以下是一些不合理布局的例子:

一个好的排版布局,可以增加页面的整体美观,使文字更加易读,为用户带来更好的体验。常见的一些较好的布局排版方式有:通过左图右文,左文右图,以文字作为主体产品为装饰等方式。通过这些排版方式,使得文字更为清晰易读,跟图片也结合得更为紧密。让用户有一个舒适的视觉体验,增加点击转化率。如下:

三. 设置适合的行距

行距就是每一行文字的距离,它同样跟我们阅读时的视觉体验息息相关。特别是在文字较小的情况下,一个适合的行距显得尤为重要。

1.当行距太紧凑的时候,用户阅读的时候很容易就会跳到下一行,也很难从行尾扫视到下一行的行首,影响文字的易读性。

2.行距太宽的时候,每一行文字就形成一个单独的段落,而空白的文字行距就变成了阻断文字的视觉断流,使整段文字失去了连贯性。

(错误例子)

那么怎样的行距,才能让用户阅读得最舒适,最适合我们的无线端页面文字呢?一般,我们在设置行距时,可以以字号作为基数,而由于无线端的空间有限,行距的大小设置在字号的1.2~1.5倍为宜。在这个比例下,文字的易读性会大大提升,让用户看的舒适的同时,能清晰表达出我们的卖点。例如,我们的字号是18号字,那么我们的行距设置为21~22号字是最合适的,如下图:

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:淘宝  淘宝词条  用心  用心词条  字体  字体词条  无线  无线词条  设计  设计词条  
电商双11

 2016天猫双11抢红包攻略

2016天猫双十一网购狂欢节就要到了,每年的双十一都有许多红包、打折等活动,今年也不例外,我们最关心的是如何得到最实惠的东西。今天,小编就给大家介绍下2016天...(展开)

电商淘宝

 关于淘宝造物节的那些事

淘宝造物节是什么?淘宝造物节时间是几号?最近有很多网友问小编淘宝造物节的事,对于首届淘宝造物节大家还是有很多的不解,下面跟小编一起来看下。2016淘宝造物节是什...(展开)