全国免费咨询热线:400-611-9921
 
搞定小屏!5大黄金准则帮你设计移动端邮件

2015-05-09

924

编者按:用移动端收邮件的人越来越多,如何令邮件变得清晰易读也成了一个设计难点。今天分享5个实战经验中总结的设计准则,帮你搞定小屏幕上的邮件设计>>>移动设备上的邮件设计不仅仅是一个内容填充列表,...

编者按:用移动端收邮件的人越来越多,如何令邮件变得清晰易读也成了一个设计难点。今天分享5个实战经验中总结的设计准则,帮你搞定小屏幕上的邮件设计 >>>

  移动设备上的邮件设计不仅仅是一个内容填充列表,它涉及诸多设计元素。

  对于移动设备的设计从来不是一件简单的事情。人们采用不同的方式使用网络,我们需要考虑一个全面的方案,特别是在小屏幕上使用邮件。

  让我们一起来探讨关于移动设备上的邮件设计需要考虑的问题,这些讨论并不意味着能够解答手机邮件设计上的所有问题,但这是一个好的起点。

  一、保持简洁

  严禁复杂 —— 尤其是在邮件上。始终避免使用复杂的结构,否则在小屏幕上渲染时一定会失败。请记住许多设备是不支持媒体查询的(例如谷歌邮件),所以我们不能指望成熟的内容重排技术。

  一个线性简单的布局在大多情况下都能表现良好。

  邮件的整体大小也非常重要,如果它超过了预设的大小(大概100KB),你的邮件将不能完全加载。我在所有的客户端上都没有测试出这个问题,但是谷歌邮件和IOS设备出现了这个问题。

  下面这张截图里,你能够看到用户是如何通过点击一个链接查看整个信息:这使得用户不必阅读全部邮件。

搞定小屏!5大黄金准则帮你设计移动端邮件,互联网的一些事

  二、注重邮件目标和折叠

  虽然我不是“Above the fold”问题的粉丝,不过在移动设备上阅读邮件意味我们要把上半部分放在非常重要的位置。

  让用户能够轻松地看到摘要目录,在大多数情况下都能快速浏览内容,从而引导读者深入阅读。

  邮件顶部的小段落可以做到这些。

搞定小屏!5大黄金准则帮你设计移动端邮件,互联网的一些事

  这使得一些重要的客户端(如谷歌邮件,或者IOS和OSX上的邮件)工作更便利。

搞定小屏!5大黄金准则帮你设计移动端邮件,互联网的一些事

  三、调整字体和图片

  这个话题只适用那些支持媒体查询的设备。不幸的是,对于那些不支持的设备我们没有任何办法,他们会自己调整文本与图片。

  目前,媒体查询能够被所有IOS设备支持,安卓原生邮件应用也支持(但是有一点问题并且Lollipop抛弃了这一特性支持谷歌邮件),还有最新的黑莓手机和少数的其它手机支持。

  IOS设备在字体与图片尺寸上有两个主要问题:

  小字体在默认情况下被放大

  邮件宽度基于最大的单元

  字体被放大通常不能说是一个严重的问题,但是在很多情况会导致文本超出你的布局被剪切。

  在你的CSS代码中加入这一行能够轻松解决这一问题。

搞定小屏!5大黄金准则帮你设计移动端邮件,互联网的一些事

  下面的截图你能够清楚地看到通过添加-webkit-text-size-adjus,红色区域的文本大小是如何改变的,左边的是添加后的,右边的是没添加。

搞定小屏!5大黄金准则帮你设计移动端邮件,互联网的一些事

  字体调整也影响移动设备上的用户体验。小字体在桌面设备上能够轻松阅读,但是小屏幕上就有完全不同的影响。

  看下面这个例子,右边的文字被放大了能够轻松阅读,吸引用户的目光。

搞定小屏!5大黄金准则帮你设计移动端邮件,互联网的一些事

  一般来说,在移动设备上放大文本字体是一个非常好的做法,特别是对邮件来说。因为阅读的时间很紧张你需要快速抓住用户的关注。

  四、自定义链接和按钮

  移动设备上的邮件设计对于链接需要一点技巧。

  首先考虑到将被手指点击,所以保持良好的间隔并严格限制数量。

  确保他们很容易点击并可见。此外,永远记住在内联CSS样式表中为锚添加规则:Gmail应用程序链接的样式为蓝色,默认情况下强调他们。

  一个潜在的小问题是,Gmail和IOS自动为电话号码,URL和电子邮件字符串(只是Gmail)添加链接。

  为避免IOS自动生成电话链接,你可以在你的代码中添加meta标签。

搞定小屏!5大黄金准则帮你设计移动端邮件,互联网的一些事

  Gmail的解决有一些狡猾:它通过加入一些不可见的字符,以确保字符串不会被识别为一个潜在链接。

  我用HTML实体和“中性”span标签做了一系列测试。只有用span标记打破链接的每个部分,才能获得预期结果。

  五、添加间距

  对于邮件的设计我有一个最新的建议就是考虑增大文本内容的内边距,这能够显著提升邮件可读性。


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
关键词:纵天科技,广州品牌网站建设公司,广州网站制作公司,广州网站建设,广州网站设计,网站建设,手机网站开发,品牌设计,用户体验
热门标签
广州做网站营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭