歷史回顧

PayPal是大家非常熟知的全球目前最大的在線(xiàn)支付平臺(tái)，它于1998年12月由 Peter Thiel 及 Max Levchin 建立，總部坐落在美國(guó)加利福尼亞州圣荷西市，2002年10月被全球最大的電子商務(wù)平臺(tái)eBay以15億美元收購(gòu)。

PayPal最初是 Palm Pilots 設(shè)備之間的一個(gè)轉(zhuǎn)賬功能, 又稱(chēng)”beam money”。它首創(chuàng)了用email地址作為轉(zhuǎn)賬方式，使得轉(zhuǎn)賬這一行為更加容易和方便。

下圖是PayPal在1999年的第一個(gè)版本界面：

Metro 設(shè)計(jì)是一個(gè)不容忽視的市場(chǎng)大趨勢(shì)。這是全新的用戶(hù)體驗(yàn)，將成為微軟未來(lái)的操作系統(tǒng)——Windows 8和Windows phone 的一部分。隨著移動(dòng)時(shí)代的到來(lái)，metro UI 風(fēng)格被推向新的高度，“METRO STYLE”的浪潮下，你被打濕了嗎？

Metro是由微軟公司開(kāi)發(fā)的內(nèi)部名稱(chēng)為“ typography-based design language”（基于排版的設(shè)計(jì)語(yǔ)言）。Metro UI是一種界面展示技術(shù)，和蘋(píng)果的iOS、谷歌的Android界面最大的區(qū)別在于：后兩種都是以應(yīng)用為主要呈現(xiàn)對(duì)象，而Metro界面強(qiáng)調(diào)的是信息本身，而不是冗余的界面元素。

metro這是一個(gè)全新的界面，你有足夠的空間去創(chuàng)造去發(fā)揮你的創(chuàng)意。我們?nèi)蕴幱谒某砷L(zhǎng)曲線(xiàn)的起步階段，所以面臨的挑戰(zhàn)新鮮而有趣。當(dāng)我第一次看到 WP7 的展示時(shí)，我在想，“我一定要為它設(shè)計(jì)些什么。”探索是最好的學(xué)習(xí)方式，學(xué)著為用戶(hù)創(chuàng)建一個(gè)激動(dòng)人心的用戶(hù)體驗(yàn)吧。

前言：該文收集了前輩們的一些關(guān)于圖片優(yōu)化的技巧，在此收攏到一起，對(duì)于各個(gè)方法的優(yōu)化原理做了一些研究，希望能給大家對(duì)于圖片優(yōu)化這一塊起到拋磚引玉的作用。

提到圖片，我們不得不從位圖開(kāi)始說(shuō)起，位圖圖像(bitmap)，也稱(chēng)為點(diǎn)陣圖像或繪制圖像，是由稱(chēng)作像素（圖片元素）的單個(gè)點(diǎn)組成的。這些點(diǎn)可以進(jìn)行不同的排列和染色以構(gòu)成一副圖片。當(dāng)放大位圖時(shí)，可以看見(jiàn)賴(lài)以構(gòu)成整個(gè)圖像的無(wú)數(shù)單個(gè)方塊。

常見(jiàn)的格式中JPG、PNG、GIF亦屬于位圖，所以它們的數(shù)據(jù)結(jié)構(gòu)大致相同，只是每一種圖片格式都有不同的壓縮算法，不同的掃描方式，但是優(yōu)化的方法都有一個(gè)共同點(diǎn)，都是圍繞著每個(gè)像素顏色值來(lái)下手，具體如何進(jìn)行優(yōu)化呢？
下面來(lái)給大家介紹一下圖片的一些基本原理和優(yōu)化的方法：

1.JPG原理與優(yōu)化
JPG是一種對(duì)彩色或灰階之類(lèi)連續(xù)色調(diào)圖形作壓縮和解壓縮的標(biāo)準(zhǔn)．這個(gè)標(biāo)準(zhǔn)是由ISO/IEC JTC1/SC29 WG10所訂定。
壓縮算法為正、反離散余弦轉(zhuǎn)換，如下圖：

這個(gè)世界上到底沒(méi)有設(shè)計(jì)的法則？上個(gè)世紀(jì)初，奧地利及德國(guó)的心理學(xué)家創(chuàng)立了格式塔理論（Gestalt），該理論旨在解釋人類(lèi)的行為是如何與視覺(jué)經(jīng)驗(yàn)產(chǎn)生關(guān)聯(lián)的。格式塔理論解釋了我們的眼睛對(duì)一個(gè)事物及對(duì)象的理解是一個(gè)綜合的體驗(yàn)，而不僅僅是我們所見(jiàn)的簡(jiǎn)單疊加，它還包括我們以前對(duì)該事物及對(duì)象曾經(jīng)有過(guò)的感受。我們不是心理學(xué)家，但作為一個(gè)設(shè)計(jì)者，了解格式塔理論對(duì)你在設(shè)計(jì)的把握卻非常有幫助。

精心挑選的圖片加上清晰字體，我們可以呈現(xiàn)一個(gè)吸引人的美容小冊(cè)子的設(shè)計(jì)。

凱莉在加州經(jīng)營(yíng)一家規(guī)模不大的名叫“London Hair Fare”的美容院，主要服務(wù)項(xiàng)目包括面部美容及蠟乳脫毛（waxing spa） 。該店光顧者甚多，而且那些潛在的顧客對(duì)該店的服務(wù)已經(jīng)有所了解，所以她需要的宣傳冊(cè)子是屬于那種基本型的版式——一張由信紙折疊而成的宣傳冊(cè)子，能夠簡(jiǎn)單清晰地傳達(dá)出該店的服務(wù)項(xiàng)目。在宣傳上并不需要刻意去“叫賣(mài)”，也無(wú)需采用直郵方式。其冊(cè)子主要通過(guò)人手派發(fā)及放置在店內(nèi)由顧客任意取閱。

平面廣告展示小技巧

編輯：南辰 | 時(shí)間：2013年6月21日 | 分類(lèi)：設(shè)計(jì)思想, 默認(rèn)分類(lèi) | 熱度：391° | 1條評(píng)論

【導(dǎo)讀】為了在手機(jī)屏幕給定的范圍內(nèi)展示出更多內(nèi)容，優(yōu)秀的導(dǎo)航欄設(shè)計(jì)將起到關(guān)鍵性作用，對(duì)于不同的操作也當(dāng)因地制宜地選則不同的設(shè)計(jì)方案。

　　導(dǎo)航的設(shè)計(jì)是 App 設(shè)計(jì)發(fā)展過(guò)程中很值得玩味的地方，由于移動(dòng)設(shè)備特別是智能手機(jī)的屏幕尺寸有限，設(shè)計(jì)者們通常會(huì)將屏幕空間盡量留給主體內(nèi)容，優(yōu)秀的導(dǎo)航設(shè)計(jì)會(huì)讓用戶(hù)輕松到達(dá)目的地而又不會(huì)干擾和困惑用戶(hù)。

　　經(jīng)典導(dǎo)航：tabbar

　　Tabbar 的導(dǎo)航方式是由誰(shuí)發(fā)明的筆者不得而知，不過(guò)相信大家都同意是由蘋(píng)果將其傳播開(kāi)來(lái)。不僅很多蘋(píng)果的官方應(yīng)用采用了這種設(shè)計(jì)，蘋(píng)果同樣大力推薦應(yīng)用開(kāi)發(fā)者優(yōu)先采用這種方式。從某種角度來(lái)說(shuō)，tabbar 基本就是導(dǎo)航的標(biāo)準(zhǔn)設(shè)計(jì)。

在手機(jī)產(chǎn)品的設(shè)計(jì)過(guò)程中，由于手機(jī)界面的承載能力有限，產(chǎn)品功能的不斷膨脹，必須要在用戶(hù)打開(kāi)應(yīng)用之后告知他某些新奇的功能，引導(dǎo)他完成某些主要任 務(wù)流程，讓用戶(hù)不至于迷失在陌生應(yīng)用中不知所措。幫助用戶(hù)快速掌握應(yīng)用的使用方法，體驗(yàn)到應(yīng)用的樂(lè)趣，新手引導(dǎo)成了一個(gè)必須考慮的設(shè)計(jì)環(huán)節(jié)。

用戶(hù)引導(dǎo)的直接目標(biāo)是幫助用戶(hù)更好的使用產(chǎn)品，終極目標(biāo)是提升用戶(hù)滿(mǎn)意度。雖然，大多數(shù)情況下，我們可以通過(guò)合理的設(shè)計(jì)，盡可能的簡(jiǎn)化功能，讓用戶(hù) 無(wú)需引導(dǎo)和幫助，就可以完成必要的任務(wù)。但是實(shí)際上，手機(jī)產(chǎn)品的限制和對(duì)強(qiáng)大功能的追求，導(dǎo)致這個(gè)目標(biāo)很難達(dá)到，因此越來(lái)越多的應(yīng)用開(kāi)始使用用戶(hù)引導(dǎo)來(lái)幫 助用戶(hù)快速熟悉產(chǎn)品。

隨著蘋(píng)果iPad的推出，電子雜志類(lèi)行的應(yīng)用大受好評(píng)，電子閱讀需求量不斷增長(zhǎng)。傳統(tǒng)紙質(zhì)出版物的良好的視覺(jué)效果，互聯(lián)網(wǎng)巨大的信息資源庫(kù)，將這兩者集合在一起就會(huì)誕生非常好的雜志客戶(hù)端應(yīng)用。這種雜志型客戶(hù)端應(yīng)用的最佳代表就是Flipboard。

2010年iPad最佳應(yīng)用是Flipboard。集合了Facebook和Twitter的推動(dòng)內(nèi)容，輔以格式排版，讓用戶(hù)得到了無(wú)限量的優(yōu)秀資源以及良好的閱讀體驗(yàn)。

網(wǎng)頁(yè)設(shè)計(jì)中彈出窗一般用于簡(jiǎn)短的文字介紹，是十分常用的一個(gè)代碼。通過(guò)CSS3動(dòng)畫(huà)樣式，我們可以實(shí)現(xiàn)不同交互的彈出框。

下面這個(gè)DEMO演試有19種不同動(dòng)畫(huà)效果的彈出窗，如向上、向左、右、全屏、漸變展示等等。

在線(xiàn)演試 代碼下載