在日新月异的科技浪潮冲刷下,我们的生活发生着翻天覆地的变化。无线端购物无疑是这个变化浪潮里的一大主力,只需有一台智能手机,无论在何时何地,都能实现网上购物。在这大环境下,无线端的竞争越演越烈。在这竞争中,一个优秀易懂的无线端页面,无疑能让我们在竞争中增加一柄锋利的兵器。 但是,无线端有别于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号字是最合适的,如下图: 四、选择合适的字体 字体一般能分为衬线体和无衬线体。衬线简单来说是指文字结构之外的装饰性笔画,有衬线的字体叫衬线体,而没有衬线的字体则叫无衬线体。如下图,我们可以发现,将圆圈里类似的笔画全部去掉,是不会影响文字意思的表达的,那么这些笔画就叫做衬线。 调整前 调整后 例如我们常见的英文字体 Times、Times New Roman中文字体中的方正大标宋等字体等就属于衬线字,而像Arial、helvetica方正兰亭黑体 方正大黑体等就属于无衬线字。 那么,在我们选择无线端字体的时候,则需注意这两种字体的选择,衬线字的装饰性比较好,风格也相对强烈,但如果文字字号较小的话,会导致文字辨识度变低,影响阅读。因此,我们在做文字标题和一些单纯装饰性文字的时候,我们可以按照风格适当选择衬线字。但需要注意的是,在做文字标题的时候,因为内容较为主要,则不建议使用一些太复杂的衬线字体。 而我们在做说明性及介绍性文字等字号较小却是产品的详细介绍的时候,我们应选择一些如方正兰亭黑体,黑体等简约的无衬线体,使得文字在小的同时,不影响文字的易读性,方便用户阅读。通过衬线与无衬线字的结合,我们就可以很轻松的完成一个表述清晰,画面优美的无线端页面。 五、选择适合的文字状态 每一种字体,至少都有一种适合自己的最佳状态,这个状态包括字体的字号和消除锯齿的选项. 其中,在Photoshop CS6之前的版本里消除锯齿选项一般分为:无,锐利,犀利,浑厚,平滑。而CS6之后,增加了:window和windowLCD两项。 在最佳状态下是最清晰的,锯齿也是最少的。而字体在不合适的状态的情况下,字体的外观与易读性也会受到一定的影响。显而易见,在最佳状态下,文字是最清晰易读的。那么怎么找到最佳状态,我们可以通过对字体进行缩放。 字体使用是设计师们终其一生都在精雕细琢的事,每一个字体,每一个页面都是一个新的挑战,没有一成不变的规律。但是,相信通过这次分享,相信能对大家的无线端文字应用上起到一定的启发作用。我们要增加无线端的用户体验,增加点击转化率。我们只需谨记:1.精炼的文字,2. 合理布局和优化文字排版方式,3. 舒适的行距间隔 4.选用适合的字体,5.处于最佳状态,平顺无锯齿的文字, 这几点。相信大家一定能让你在无线端上呈现出优美的文字排版。