最近国内O2O市场火热，办公室内叫外卖的氛围也出现了前所未有的高潮。大家经常使用的外卖app有饿了么、百度外卖、美团外卖。

今天来看看饿了么、百度外卖、美团外卖的购物车设计。

像淘宝、天猫、京东等购物平台一般在一级界面就有购物车入口，而饿了么、百度外卖、美团外卖在一级界面都没有购物车入口。

这是因为两类产品的购物车的使用场景还是有所区别的：

自从几个互联网公司的产品带领了白色简洁设计，所以现在在国内不用白色的设计便不能叫做好设计。我们打开所有的应用，从娱乐到阅读，到社交工具到备份工具等等，一切都是白色。这一期我们来洗洗脑吧，看看国外优秀的其他色设计吧 >>>

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

每一个扁平化界面设计，都是我们的心灵碰撞致力于最棒的 metro ui 设计

来源：莫贝网

 如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

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

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

1.保持简洁

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

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

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

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

2.注重邮件目标和折叠

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

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

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

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

3.调整字体和图片

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

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

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

• 小字体在默认情况下被放大
• 邮件宽度基于最大的单元

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

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

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

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

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

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

关于图片

你可以为那些支持媒体查询的设备加载针对性图片（可以看看这两篇文章A Slick, New Image Swapping Technique for Responsive Emails和Optimizing images for mobile）

4.自定义链接和按钮

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

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

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

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

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

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

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

5.添加间距

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

移动未来 设计为王

一般人对於企业产品的预期，可能仅停留在功能要强大，信息要安全，能够帮助企业提高工作效率。但今时已不同往日，除此以外，人们开始更注重产品的用户体验。那么，在面对企业产品的界面设计上，有什么方法可以提升用户体验呢？接下来，蓝蓝设计为大家带来一些国内外的优秀案例以及一些设计Web App时的思考方向。

Web App 设计要点

1. 配色

颜色作为UI设计师传达情感的主要元素之一。一个明确的品牌颜色，对信任度，认知度都会有大大的提升。颜色除了能为界面提升美感，也能作为功能上的辅助。在普遍页面信息量大的企业产品中，往往一个有颜色的按钮就很容易吸引用户的视觉焦点。

Lovely是Dribbble大神Kerem Suer设计的Web App。橙色主，蓝色辅助，淡灰色为底色。这个配色既色彩鲜明，淡淡的感觉更让人长时间使用也不觉累。整体感觉和谐舒服，简洁耐看。

如果你是一个APP狂热分子，你会花大量的时间在各种APP界面设计的尝鲜中，你会明显感受到一些APP在采用着某种风格鲜明的设计语言，来标榜自己的独特之处，形成自己的界面设计风格，甚至引领设计风向。去年我们关注到随着Metro设计风格的影响和iOS7的发布，APP明显都开始尝试扁平化的设计语言了，除此之外，还有哪些显性化的设计语言崭露头角呢？

在这篇文章里，蓝蓝设计想分享一些日益显性的UI设计语言，让人一眼就记住它的风格，有一些已经随着优秀设计师的摸索，融入到国内移动产品设计里了，而有一些，确实是刚刚在萌芽阶段，需要更进一步的摸索和尝试。

一、唯一主色调 | Simple color schemes

为什么我们要定义一个界面多种颜色？仅仅用一个主色调，是不是就能够很好的表达界面层次、重要信息，并且能展现良好的视觉效果？事实上也正是如此，随着iOS7的发布，我们看到越来越多唯一主色调风格的设计，会采用简单的色阶，配套灰阶来展现信息层次，但是绝不采用更多的颜色。

天气类App是手机里不可或缺的软件之一，但是想让你的应用在众多选择中脱颖而出，UI设计就显得非常重要了。今天蓝蓝设计从Dribbble和Behance上收集了一组界面设计出众的天气类应用，风格非常丰富，创意也很惊人，绝对值得UI设计师们一看！也希望它们能给你带来灵感 ：）

Weather

探讨APP界面设计的手势操作前，蓝蓝设计想先介绍两篇文章来了解用户是如何使用手机的，以及触控屏是如何感应我们的操作的。

用户是如何使用手机的

Steven Hoober在《How Do Users Really Hold Mobile Devices?》[1]一文中指出，通过两个月的时间对1333名手机用户在公众场所（街道、机场、汽车站、咖啡馆、火车上、汽车上等）使用习惯的观察得出以下结论：

①780名用户是通过滑动、点击、打字等来操作屏幕，其他用户则仅仅是用手机来收听、观看、打电话。

②49%的用户通过单手操作，36%一手拿着手机一手操作，另有15%双手操作。

③在单手操作用户中，有33%的用户用左手拇指来操作。

④用户经常变换操作姿势和手势。

49%的单手操作用户是以下两种姿势（左手用户相反）。绿色代表容易点击区域，黄色为拇指伸展可到点击区域，红色区域超出单手可点击范围。