最近讀了 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 設備的屏幕是用戶體驗的核心。用戶不僅在上面瀏覽優美的文字、圖片和視頻，還要和多點觸摸屏進行交互（即使有時候用戶甚至看不到屏幕）。