返回  

小屏设备上电子邮件界面的7个设计技巧

2017/4/18 18:30:52 来源:深圳网站建设Clh

有多少用户在手机或平板电脑上浏览电子邮件?这个事件发生的比例可能比你想象的更高,据提供电子邮件跟踪软件制造商Litmus的调查报告,2016年中,所有电子邮件有54%是通过在移动设备上进行浏览的。

这意味着你的大部分电子邮件可能正在通过移动设备被查看。你是否在考虑设计一个更适合在移动设备上查看的电子邮件呢?以下是使你的电子邮件设计更适合在移动设备上查看的几点提示。


1.排列

尽管大多数的电子邮件在PC端的屏幕上查看可能看起来效果更好一些,但是少并不代表没有,移动设备上查看仍然需要我们重点考虑。大多数移动端的邮件都是通过版块堆叠成列的形式展示信息的,这样导致的结果只能是你将面临滚动超长的电子邮件或尴尬的内容流。

选择纵向排列为整齐一列的视觉格式。这样你可以清楚的识别你的内容,从一种设备到另一种不同的设备,因为你确保了它们拥有一致的外观和感觉,这将很容易阅读和浏览。即使在桌面显示器上,首选格式也是一列,因为许多用户在较小的预览窗格中查看电子邮件,而不是全屏。

通过一列格式的网页设计方案将帮助你在在设计电子邮件的模式上保持统一。给用户一个想法——能够一步操作相关的电子邮件选项。添加多级消息可能会使注意力不足的用户头晕目眩。所以,只需给用户一个可以轻松实现目的的选择。


2.使用按钮来指示链接

移动端应当尽量避免使用文本的内部链接。对于用户来说,它们太小、太不显眼了,以至于用户没能注意甚至点击不到它们。至于按钮的选择上,它应该足够大,以保证用户能够注意并轻易的点击到它,而不至于误触其他元素被错误地激活。

通过使用明亮的颜色和大的描述性文本按钮,以便用户准确了解自己即将点击以及将会出现的页面内容。按钮可以作为任何类型的网站购买、分享内容或任何操作的媒介。考虑大型样式按钮,填充小屏幕的大部分宽度,以便能够轻松访问这个网站设计,无论用户使用什么类型的设备。

包括初始滚动位置的按钮。你应该有一个视觉提示,能够让收件人马上知道邮件中包含了他们需要采取的行动。


3.增加文字字号大小

文本字号小是移动电子邮件的杀手。大多数具有响应模板的电子邮件软件能够实现文本字号大小根据终端的不同而自动切换,以匹配相应的屏幕大小,但这并不总是发生。

· 内容文本的字号设置至少为14点的大小(但是不要过大,十六点也是一个很好的参数);

· 在邮件标题上,你可以选择22点字号,并考虑粗体或颜色,使标题更突出;

· 小标题至少为18点。


4.调整图像大小

图像需要适当地适合屏幕。想想图像的形状,大小和内容,以便它们在小型设备上是可读的。

许多包含图像的电子邮件经常会被水平裁剪。

更大,更规则的图像将在移动设备上能够呈现最佳的效果。考虑使用响应图像技术,以便能够更直观和完整的查看整个内容。


5.包括适当的空间

增加元素周围的间距和文本块之间的间距,使一切更容易在较小的屏幕上阅读。可读的电子邮件是可以转换用户的。

原理是这样的,用户在移动设别上打开电子邮件的时,该消息会被标记为已读,这会使得用户在另一个设备找到它的机会变得很低。所以你不会希望收到一个凌乱或难以阅读的电子邮件。

白色空间可以使消息显得更轻,更易于访问,更易于阅读。应该很容易查看和了解。思考如何通过设计最低限度获得最佳效果——并提高点击率。


6.考虑图像块

图像块是营销类电子邮件真正需要考虑的因素。特别是对于那些正在使用Microsoft Outlook等客户端软件进行业务的用户来说。假设一种情况:当用户在你的邮件中找不到任何图像时会怎么样呢?

通过添加图像来替代文本来执行此操作,不过这里有一种新的形式,通过想我那网页设计中使用HTML和CSS来制作弹窗按钮,而不是单纯的添加图像文件,平衡设计和文字和图像,这是一个很好的办法。

虽然这不是每个人的解决方案,但根据我们的内容类型,它可以是一个考虑因素。


7.保持头标题简短

长标题在小屏幕上看起来会显得更长。你可以先写下你需要表达的语句,然后提炼出里面能能够概括整句话的一小段语句作为邮件的标题。这也适用于主标题。

使用带有积极性的动词和视觉强烈的图像来帮助吸引用户。在主题行的前40个字符中包含最重要的词,以最大限度地增加用户在打开电子邮件之前看到的机会。

考虑一个更加精简的主题标题版本。用主标题提出问题并在标题中回答。给用户一个理由,想要了解更多,并与你提供的电子邮件进行交互。


总结

事实上,没有什么既定的公式可以提高用户打开你电子邮件的机率。但是,你至少通过设计可以让每个消息看起来都很棒,并且易于阅读,这是势在必行的解决方案。

了解用户在移动设备上打开的电子邮件的最佳方法是通过测试。每个用户都有所不同。看看过去的电子邮件,看看哪些在移动端是用户最经常或最喜欢的。



----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务