5大黄金准则帮你设计移动端邮件

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

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

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

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

  一、保持简洁

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

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

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

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


  二、注重邮件目标和折叠

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

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

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


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


  三、调整字体和图片

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

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

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

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

  邮件宽度基于最大的单元

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

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


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

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

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


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

  四、自定义链接和按钮

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

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

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

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

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


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

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

  五、添加间距

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

时间: 2024-11-05 04:50:58

5大黄金准则帮你设计移动端邮件的相关文章

产品原型设计的8大黄金定律

原型设计,困扰很多新手级产品经理的老大难.其实原型设计没有想象的那么难,熟能生巧,掌握8大黄金定律即可. 我自己碰到.看到或者听到的大部分错误并不是因为选择了错误的工具或者方法.大多数错误都来自以下情况: 原型设计过度或者不够. 对错误的东西进行原型设计. 没有设定对原型的期望. 有效原型设计就是找到平衡并设定期望.本文会揭示我们开发的有效原型设计八条指导原则,无论使用什么方式或者工具,这些原则都适用. 无论你有丰厚原型设计经验或者只是想了解以下,都能从八条指导原则受益. 原则一:了解受众和意图

用户与界面的三大黄金准则

一款软件界面的设计会影响到该软件的用户体验度,像前两天新出来12306新版购票系统,比起老版来说,有很多改观的地方,界面颜色多于美眼的橙色.舒适的天蓝色为主.还有很多功能上做了修正.如图: UI(User Interface)也就是用户界面,对于软件开发者来说,再熟悉不过了,UI设计在一个系统中的重要性是不容忽视的.在长期的界面设计进化中,产生了三条"黄金准则":置用户于控制之下.减少用户的记忆负担和保持界面一致.这些黄金规则成了指导用户界面设计原则的基础. 1. 置用户于控制之下 软

编程-听说是今年最难毕设,实时数据采集管理软件,大神们帮我看看。

问题描述 听说是今年最难毕设,实时数据采集管理软件,大神们帮我看看. 实时数据采集管理软件设计:后台数据采集服务软件 要求只在数据发生变化时记录该数据及发生变化的时间,且采集过程不能独占CPU的时间(即采用事件触发的形式申请CPU采集并记录数据),并能实时地观察数据采集情况,且要求当数据发生超限时及时报警. 要求以PC机资源(如声卡)开发,设计出外部资源的通用接口. 求问具体该怎么做?涉及到什么技术? 解决方案 用实时数据库,有现成的产品. 解决方案二: 请问那个现成的产品是什么啊?

java eclipse-java程序功能设计分析和程序基本组成框架结构 大神们帮帮忙

问题描述 java程序功能设计分析和程序基本组成框架结构 大神们帮帮忙 package com.mingrisoft.ballot; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.WindowAdapter; import java.awt.event.WindowEven

新手建站必知的20条SEO黄金准则

中介交易 SEO诊断 淘宝客 云主机 技术大厅 笔者近日拜读了SEO大师Theresa Sheridan在http://www.seo-news.com发表的头条文章Twenty Basic Tips for SEO Newbies深受感触.发现我们追求多年的所谓高深莫测的SEO其实很简单,知识有时候我们把他想得太复杂了.现翻译出来供大家参考,对新手应该有很大帮助,至少可以避免从开始就误入SEO迷途.原文翻译如下: 如果你有个网站并期望通过这个站来维持生活,从从长远考虑,作为站长就不得不了解一些

求救-大神们帮帮忙,小米手机实现拍照照片上传怎么弄的?为啥别的手机可以,他的不兼容呢?

问题描述 大神们帮帮忙,小米手机实现拍照照片上传怎么弄的?为啥别的手机可以,他的不兼容呢? 小米手机实现拍照照片上传怎么弄的?为啥别的手机可以,他的不兼容呢? 解决方案 因为小米手机的系统深度定制过的,建议root下 解决方案二: 1.小米也是安卓系统,通过QQ就可以将照片传入电脑.也可将电脑的照片传入手机. 2.你也可以通过USB,连接电脑与手机,直接拷贝. 解决方案三: 应该可以吧,我看到有那个功能,不行就问问客服

css 程序入门-求大神们帮帮忙,滚动条设置宽度

问题描述 求大神们帮帮忙,滚动条设置宽度 设置滚动条的宽度,最好滚动条没有,还有滚动条效果,没有设置宽 解决方案 如何在LWUIT设置滚动条的宽度如何在LWUIT设置滚动条的宽度select下拉框宽度设置问题(自适应宽度,水平滚动条) 解决方案二: http://www.php100.com/html/it/qianduan/2015/0114/8366.html

国外优秀的网站设计:创意大导航单页面网站设计

在国外优秀的设计网站中,开始流行一种这样的Web创意设计风格:整站由一个单一页面组成,通过设置锚点的方式,利用JavaScript技术,实现网站内容的滑动导航.这种创意十足的Web设计效果,可以很大程度上给人一种流畅华丽的动画震撼,沉醉于其美妙的操作设计的同时,更为网站设计者的构造灵感而折服,这里就为你搜集了10个创意大导航单页面网站设计. WeBleedDesign Gavin Castleton Two24Studios DesignSpam JP3Design MadeToKill Cla

asp.net mvc 关于FormCollection collection采集不到数据问题.大神们帮帮忙谢谢,指点一下也可以

问题描述 asp.net mvc 关于FormCollection collection采集不到数据问题.大神们帮帮忙谢谢,指点一下也可以 新手求请教!就是FormCollection collection采集不到前台的数据,之前用的时候从没出现这种问题. 解决方案 你在控制器端试试不要用FormCollection collection来接收,先试试用 public ActionResult xxxxxx(string line)来接收试试看 解决方案二: 视图转型了吗?引用mvc的js文件了