蓝蓝设计收集了UI设计前辈们的一些关于图片优化的技巧，在此收拢到一起，对于各个方法的优化原理做了一些研究，希望能给大家对于图片优化这一块起到抛砖引玉的作用。提高朋友们的界面设计能力！

下面来给大家介绍一下图片的一些基本原理和优化的方法：

1.JPG原理与优化
JPG是一种对彩色或灰阶之类连续色调图形作压缩和解压缩的标准．这个标准是由ISO/IEC JTC1/SC29 WG10所订定。
压缩算法为正、反离散余弦转换，如下图：

页面的加载时间是每一个UI设计师都担心的数据，或者至少是每个UI设计师都应该担心的问题。图片的大小肯定是一个需要留意的问题。这就是为什么蓝蓝设计在这里写了几个有助于优化页面中的图片的小技巧，这些小技巧将有助于大家解决这个问题，这些小技巧也可以在你需要优化图片的时候提供很多帮助。提高大家的网站界面设计能力！

TinyPNG
TinyPNG是使用智能有损压缩技术，来减小png图片的大小。

网页设计中往往需要大量部署图片。网站设计的品质取决于图像，如果一个网站的界面设计图像品质精良，那么体验将非常的棒。
可以去看看那些优秀UI设计师和开发者的作品，他们往往非常注意图像的优化。既保证了图片的质量，又适度压缩图像，以提高加载速度。

蓝蓝设计将介绍多种极佳的图像优化工具，可以在日常应用中帮助你。

Online Image Optimizer（在线）

The Online Image Optimizer是一款在线压缩图像工具。支持本地上传图像进行压缩（最大不超过2.86MB）。可以选择图像输出类型。默认输出格式设置为和输入图像格式相同。

网上挤满了各种各样的UI设计方案，事实上我们已经有一套套的方案可遵循。但！设计永无止境！哪怕是一个注册表单的界面设计，也值得再细心研究。下面蓝蓝设计给出注册表单设计5个小技巧

1、别让用户重复填写相同的内容

几乎每个人都经历过这样一个事实：注册时被要求填写邮箱地址两次或重复输入密码。但是这其实是没有必要的。仅填写一次，因为用户一般都记得自己常用的邮箱地址和密码。假设哪天用户忘记密码了可以通过邮箱找回，再多此一举填写两次反而更加容易导致用户流失。

下面是一些非常值得参照的表单设计：

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

用户是如何使用手机的

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

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

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

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

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

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

一般人对於企业产品的预期，可能仅停留在功能要强大，信息要安全，能够帮助企业提高工作效率。但今时已不同往日，除此以外，人们开始更注重产品的用户体验。那么，在面对企业产品的界面设计上，有什么方法可以提升用户体验呢？

接下来，蓝蓝设计为大家带来一些国内外的优秀案例以及一些设计Web App时的思考方向。

Web App 设计要点

1. 配色

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

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

现在扁平化风格在网页设计方面已经有许多优秀的范例了，比如蓝蓝设计这些移动端界面设计案例就有很多我们可以借鉴学习的地方。但是移动端的界面设计扁平化风格较少，今天蓝蓝设计从Behance和Dribbbl收集的这一组移动端的扁平化界面设计就该好好看看咯，学习一下它们优秀的细节和配色吧 : ）

Seznam.cz Email Client Concept

扁平化界面设计越来越火爆，那么在弱化视觉效果的情况下，有UI设计师提到该从交互方面使体验更加愉悦，现在很多App界面设计也在努力朝这一方向发展，等都足以让人期待交互的未来。

今天蓝蓝设计收集总结了一组移动端的App动画设计，同学们可以学习一下。

1、flipboard：

利用上下动画来切换到下一个界面（由于网慢数据没有加载出来）；

随着互联网信息爆炸式增长，用户浏览单个网页时，并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看，那么朋友们和蓝蓝设计一起了解如何在设计中建立良好的视觉层级！

一、 视觉层级为什么重要

左侧是设计师期望用户的浏览方式，右侧为用户实际的浏览方式—摘自《Don’t make me think》

用户来到一个网站有他自己特定的目标，如阅读新闻、购物、查看新消息，然而信息量太大，逐一查看需要大量时间，这就要求网站设计能抓住主流用户特征，将重点推送给他，用户找到自己的目标或感兴趣的点，才有可能继续浏览或产生下一步动作，否则就会离开。

优秀的编码和优秀的设计之间是相辅相成的。不幸的是，视觉设计能力偏弱的人通常会觉得自己缺乏天赋，换句话说，就是人们要么觉得自己具有出众的美学天赋，要么就是这方面的白痴。对这个说法，我可不敢苟同。

如果你在一个小团队里面身兼数职，却又没有多少美学基础。又或者你觉得你们的项目在视觉上还有更多发挥的空间，那么这篇文章就是写给你的。蓝蓝设计将谈到传统的5个消除丑陋艺术设计的元素和原则（或者至少能够进行一定程度的掩盖）

1.来点留白

大多数的UI设计开发者并不在意添加空白的像页边距，填充，行高，或者其他任何增加空白的CSS属性。识别出开发者设计的界面设计是很容易的：文本都是紧紧地挨着边缘的，没有任何留白，而且屏幕元素之间是通过直线来实现分割的，而不是空白。

<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDOWS: 2; TEXT-TRANSFORM: none; TEXT-INDENT: 0px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; MAX-WIDTH: 100%; WHITE-SPACE: normal; ORPHANS: 2; LETTER-SPACING: normal; HEIGHT: auto; COLOR: #525252; VERTICAL-ALIGN: middle; BORDER-TOP: 0px; BORDER-RIGHT: 0px; WORD-SPACING: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="'Two examples of space. The first box reads " src="http://uisdc.qiniudn.com/wp-content/uploads/2013/04/space.png" frontier.??? final The ?Space... reads, box second you?? on in closing are walls the like feel ever you Do>