最近读了 Steve Krug 的《Don’t Make Me Think》，这本书对于 Web 和移动可用性设计有着很有趣的见解。对于其他可用性设计的书来说，这本书更加的浅显易懂。

一、Don't make me think！！！

        贯彻本书的一大定律就是：别让我思考！

        作为这个信息爆炸的社会的一员，我们已经失去了耐心去仔细浏览 Web 或移动端页面内容的习惯。“ 扫描”，变成了人们使用网络的方式。中国传统观念对于“ 不求甚解” 多含贬义，然而对于如今的我们，不求甚解已经成为了常态，那么如何让用户得到最舒服的体验呢？那就是不要让用户动脑思考。

一、动态：动画表达的设计应用

” 动态 “的设计常常能使页面的呈现更加动感，有活力，富有吸引力。具体来说，” 动态” 的设计在产品应用中常用于以下几种情形：

1.1. 丰富内涵

先试试为这段产品介绍做设计：

• Dropbox 可让您将所有照片、文档和视频随身携带，并轻松进行共享。
• 您可从您所有的电脑、iPhone、iPad 以及网络访问保存在 Dropbox 的任何文件。
• 有了 Dropbox，您的一切重要记忆资料和工作内容皆触手可及！

首先来看看图片的呈现：

故事说起在一个冰冷幽暗的夜晚上，我正思考的十分重要的人生问题，这周末该去那里 happy 好呢？是宅在家里好呢，或者宅在家里好呢，还是宅在家里好呢？这时，万年隐身的 QQ 竟然浮起浅色聊天框，我去！不得了，居然是女神主动联系我，女神一定是因为我俊朗的五官，185 的模特身材而深深地迷恋上我了，呵呵呵呵呵呵。

序：设计对于我们技术人员来说也是一门不可或缺的知识，学习设计就像学习一门新的语言一样，它也有遵从自己的一套规则。知道越多关于设计的知识，你就越能理解设计师的工作和意义，和设计师的交流也会更加畅通无阻。下面主要围绕 3 个方面给大家介绍设计的基础知识：

1、What is design?
2、What to learn?
3、How to design?

总结起来就是：2W1H。

由于文章篇幅较长，所以分成 3 篇来介绍，分别是：

Web 设计基础知识（一）
Web 设计基础知识（二）
Web 设计基础知识（三）

/***************************接上文  《Web 设计基础知识 (二)》*****************************/

2) layOUT

1) Layout-布局四原则（principles）

1、contrast 对比

序：设计对于我们技术人员来说也是一门不可或缺的知识，学习设计就像学习一门新的语言一样，它也有遵从自己的一套规则。知道越多关于设计的知识，你就越能理解设计师的工作和意义，和设计师的交流也会更加畅通无阻。下面主要围绕 3 个方面给大家介绍设计的基础知识：

1、What is design?
2、What to learn?
3、How to design?

总结起来就是：2W1H。

由于文章篇幅较长，所以分成 3 篇来介绍，分别是：

Web 设计基础知识（一）
Web 设计基础知识（二）
Web 设计基础知识（三）

/****************************接上文  《Web 设计基础知识 (一)》**************************/

2、What to learn?

在做好设计之前，首先你需要学习一些基本的知识：Colors（颜色）  +  layOut（布局）

1) Color

序：设计对于我们技术人员来说也是一门不可或缺的知识，学习设计就像学习一门新的语言一样，它也有遵从自己的一套规则。知道越多关于设计的知识，你就越能理解设计师的工作和意义，和设计师的交流也会更加畅通无阻。下面主要围绕 3 个方面给大家介绍设计的基础知识：

1、What is design?
2、What to learn?
3、How to design?

总结起来就是：2W1H。

由于文章篇幅较长，所以分成 3 篇来介绍，分别是：

Web 设计基础知识（一）
Web 设计基础知识（二）
Web 设计基础知识（三）

/************************** 文章华丽开场*******************************/

你是否关注过浏览、点击图片这个微妙的过程，不同的图片展现、交互方式各带来什么样的观感？本文聚焦于图片浏览这个过程以及如何使用 CSS3 和第三方库来提升体验。

先看下 Pinterest、Flickr等时下热门图片分享类网站。

Pinterest

用户实施了 pin这一动作后，图片信息以board形式集合，每个board里的图片呈现规矩的网格布局，这种布局适合于有限集合的排列。

让我们停下想想，为了 “分散” 的注意力而采用了瀑布流式，那么究竟每张图片用多大尺寸合适，能够降低用户面对满屏图片时的不适感？不同尺寸图片如何排放？在移动端又需要采用什么布局？怎么解决多张图片加载的性能问题？这些问题留待思考。

Pinterest 每张图的宽度是固定的，高度也可获取，这样在渲染页面的时候就可以先确定位置而不是等加载到图片资源。

译自：
A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App
原作者：Kyle leads
译者：  TAT.sheran

注：该文章大约 3000 字。它覆盖了移动端网页交互体验优化的很多不同方面的实际解决方案，用来优化你的网页运行速度。注意不是让你的站点运行的有多快，而是让你的用户感觉有多快。

当下在移动端构建一个优秀的网站逐渐变得越来越简单。无论是响应式设计还是自适应式，只要清楚你要做的样式，精心制作一个好看的站点就不是什么问题。

CSS3 UI Lib 库是由腾讯 AlloyTeam 前端开发团队建立，主要收集国内外友好体验和创意的界面组件 Demo。它除了使用CSS3技术外，还使用了HTML5，JS，JX，jQuery 等技术，来达到完美的外观表现以及交互体验。此项目自 2011年10月份成立以来，经过团队一年多的整理和收集，已经趋于成熟。

• CSS3 UI Lib 库：Http://CSS3Lib.alloyteam.com

ios 平台特点

使用 iOS 的设备拥有一些共性，这些特点会影响其程序的使用体验。与这些特性相适应的程序会更加成功，与设备一起为用户提供超凡的使用体验。

无论尺寸如何，屏幕都是最重要的

        iOS 设备的屏幕是用户体验的核心。用户不仅在上面浏览优美的文字、图片和视频，还要和多点触摸屏进行交互（即使有时候用户甚至看不到屏幕）。