網(wǎng)頁設(shè)計中，切圖輸出是指設(shè)計師將手邊繪制完成的原始圖稿轉(zhuǎn)換成網(wǎng)頁用的圖片格式、并交由下一位人員網(wǎng)頁排版的重要步驟。選擇適合的圖片格式不但可以將讓設(shè)計得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節(jié)省下載時間、有效的減少服務(wù)器的負(fù)擔(dān)。

以設(shè)計師最常用的 Photoshop 以及 Illustrator 為例，都提供了「儲存為網(wǎng)頁用…」的功能。與默認(rèn)的存盤模式不同，在這個模式中，軟件提供了仿真圖文件輸出的質(zhì)量調(diào)整、檔案大小控制等針對網(wǎng)頁圖文件需求的選項(xiàng)：

相信許多人都知道網(wǎng)頁設(shè)計中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他們之前的實(shí)際差別跟到底何時該選擇何種格式。經(jīng)常發(fā)生的情況是，選擇 GIF 后的輸出結(jié)果看起來變得很糟，于是 PNG （24）似乎突然間風(fēng)行了起來，不論圖檔尺寸是不是因此多了好幾倍。

JPEG

由于舊型計算機(jī)系統(tǒng)以及文件系統(tǒng)的限制，計算機(jī)檔案文件名與擴(kuò)展名被規(guī)定為 8.3 的格式，因此 JPEG 的附檔名被縮寫為 .JPG。JPEG可以說是人們最熟悉的圖檔格式了，相信在數(shù)字相機(jī)普及的現(xiàn)在，幾乎每臺數(shù)字相機(jī)、照相手機(jī)都可以（甚至只能）輸出 JPEG 格式的圖檔。JPEG是一種很典型的使用破壞性壓縮（lossy compression）的圖檔格式，也就是說使用者每次進(jìn)行 JPEG 的存檔動作后，圖檔的內(nèi)容都會遭到破壞，這個特性在肉眼辨識下并不明顯，但卻可以有效的降低圖檔的檔案大小。

這是Suyee同學(xué)的一篇老文章了，而分享總結(jié)的經(jīng)驗(yàn)還是很值得大家思考，千萬不要養(yǎng)成舊文就不讀不看不想不練的習(xí)慣，這只會禁錮雙手，麻痹大腦。
收藏再多新文章，卻不去看，還有何意義呢？

開篇啰嗦了一下，但這的確是很多同學(xué)們需要改正的壞習(xí)慣。2013年就要過去了，回首看看，今年你在思想認(rèn)知、設(shè)計手法、團(tuán)隊(duì)協(xié)作、溝通演講上有了哪些進(jìn)步。

相關(guān)閱讀：
思想認(rèn)知：《電線桿上的用戶體驗(yàn)設(shè)計》
設(shè)計手法：《設(shè)計要出彩？來看八大創(chuàng)意理論應(yīng)用篇》
團(tuán)隊(duì)協(xié)作：《團(tuán)隊(duì)合作中用photoshop時應(yīng)該注意什么》
溝通演講：《寫給設(shè)計師：如何與工程師一起工作》

好咯，進(jìn)入正文：隨著開放平臺日益增多，衍生出來的各類應(yīng)用服務(wù)也就呈不斷增長的趨勢。這些應(yīng)用服務(wù)的站點(diǎn)設(shè)計也可謂是五彩斑斕，燦若繁星。我們可以來找找這些網(wǎng)站的設(shè)計是否有規(guī)律可循。

可以從幾個方面來分析:

色彩

Amoderneden

從它的整體色彩配圖元素構(gòu)建等不難看出，這是一個關(guān)于兒童教育有關(guān)的網(wǎng)站，推的就是寓教于樂的產(chǎn)品服務(wù)。

Paraply

他們?yōu)橛脩舻漠?dāng)前位置提供降雨預(yù)報服務(wù)。憂郁的藍(lán)色預(yù)示著雨雪的降臨，與雨傘保護(hù)感強(qiáng)烈的紅色相對比顯得相得益彰。

@親愛的蔥 數(shù)據(jù)可視化在當(dāng)前是一個熱門話題，旨在借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。但是，這并不就意味著，數(shù)據(jù)可視化就一定因?yàn)橐獙?shí)現(xiàn)其功能用途而令人感到枯燥乏味，或者是為了看上去絢麗多彩而顯得極端復(fù)雜。為了有效地傳達(dá)思想概念，美學(xué)形式與功能需要齊頭并進(jìn)，通過直觀地傳達(dá)關(guān)鍵的方面與特征，從而實(shí)現(xiàn)對于相當(dāng)稀疏而又復(fù)雜的數(shù)據(jù)集的深入洞察。

然而，設(shè)計人員往往并不能很好地把握設(shè)計與功能之間的平衡，從而創(chuàng)造出華而不實(shí)的數(shù)據(jù)可視化形式，無法達(dá)到其主要目的，也就是傳達(dá)與溝通信息。

如今學(xué)習(xí)應(yīng)用數(shù)據(jù)可視化的渠道有很多，你可以跟蹤一些專家博客，但更重要的一點(diǎn)是實(shí)踐/實(shí)操，你必須對目前可用的數(shù)據(jù)可視化工具有個大致了解。以下是Netmagzine列舉的二十大數(shù)據(jù)可視化工具，無論你是準(zhǔn)備制作簡單的圖表還是復(fù)雜的圖譜或者信息圖，這些工具都能滿足你的需要。更加美妙的是，這些工具大多免費(fèi)。

第一部分：入門級工具

1.Excel

Excel的圖形化功能并不強(qiáng)大，但Excel是分析數(shù)據(jù)的理想工具，上圖是Excel生成的熱力地圖

作為一個入門級工具，Excel是快速分析數(shù)據(jù)的理想工具，也能創(chuàng)建供內(nèi)部使用的數(shù)據(jù)圖，但是Excel在顏色、線條和樣式上可選擇的范圍有限，這也意味著用Excel很難制作出能符合專業(yè)出版物和網(wǎng)站需要的數(shù)據(jù)圖。但是作為一個的內(nèi)部溝通工具，Excel應(yīng)當(dāng)是你百寶箱中必備的工具之一。

這是一個讀圖的時代，浮躁的人們或許對超過150個的文字都讀不下去，所以，信息圖應(yīng)運(yùn)而生，搭配上優(yōu)秀而又吸引人的圖片，再加上一小段精煉的文字，足夠吸引人而又不至于耽誤太多的時間,在閱讀一張張精彩的信息圖之余，我們也常常會產(chǎn)生制作屬于自己的精美信息圖的沖動，只是往往是心有余而力不足.不過還好，有眾多提供在線制作信息圖的工具,比如creately就是其中的佼佼者。

什么是信息圖(Infographics)

根據(jù)維基百科的解釋:
信息圖形（Information graphics），又稱為信息圖（Infographics），是指數(shù)據(jù)、信息或知識的可視化表現(xiàn)形式。信息圖形主要應(yīng)用于必須要有一個清楚準(zhǔn)確的解釋或表達(dá)甚為復(fù)雜且大量的信息，例如在各式各樣的文件檔案上、各個地圖及標(biāo)志、新聞或教程文件，表現(xiàn)出的設(shè)計是化繁為簡。公元1958年，Stephen Toulmin提出了一種圖形化的理論模型，后來成為有影響力的理論及其應(yīng)用。

制作信息圖的目的在于用圖像的形式表現(xiàn)需要傳達(dá)的數(shù)據(jù)、信息和知識。信息圖示中的元素未必要和所表達(dá)的信息在語義上一致，但是必須達(dá)到向受眾清晰傳達(dá)正確信息的標(biāo)準(zhǔn),這里介紹幾個知名的提供信息圖的網(wǎng)站

確保工作區(qū)整潔有序

合理的圖層排序和分組便于設(shè)計師理解所有元素的對應(yīng)位置。把它比作一個生產(chǎn)車間，要是你把所有的工具到處扔，害得你的工頭什么都找不到，你還有好日子過么？

同一對象的多個圖層歸入一個文件夾

這是一條重要的規(guī)則。圖層歸組讓你的圖層變得有序，你不需要單獨(dú)為每一個圖層命名，只要命名組就行了。
例如：如果一個按鈕由按鈕圖標(biāo)和說明文字組成，那么應(yīng)該把它們歸入一個”按鈕”的文件夾；菜單本身是一個一組一組的按鈕對，歸入一個”菜單”組，并且所有背景層也將歸入”背景”這個文件夾。

原則就是：文件夾分組在邏輯上應(yīng)該符合你的布局結(jié)構(gòu)。

如果一個對象包含幾個圖層，就應(yīng)該把它們歸入一個文件夾

新幻燈的版本為34/1，修改日期11月27

通常我們會把好幾個不同版本的元素放在一個文件里，像同一個按鈕不同的背景。

但為了避免忘記這一撮奇怪的隱藏圖層其實(shí)是同一個背景的不同版本，最好還是好好給他們歸組。最簡單的辦法就是創(chuàng)建一個”背景”文件夾，把所有的版本背景都放到里面。但更理想的方法是復(fù)制整個”按鈕”文件夾并根據(jù)不同的版本命一樣的名。這樣就可以很清楚地知道這是一個按鈕的3個不同版本。

這樣分組，你的同事就能理解這些按鈕是三個版本

這里收錄的100句有關(guān)設(shè)計的事情，似乎更像是設(shè)計經(jīng)典語錄，它們之中肯定會有一句能夠讓您共鳴，甚至大徹大悟。

好吧，美妙的句子很多，開門見山，就讓我們迅速開始吧。

零：項(xiàng)目背景

百度網(wǎng)盟推廣平臺是配合網(wǎng)盟推廣用戶的在線營銷平臺，推廣客戶可以在平臺上實(shí)現(xiàn)全方位的推廣管理，包括搭建賬戶結(jié)構(gòu)、配置預(yù)算、定向方式、監(jiān)控賬戶投放效果等等復(fù)雜的賬戶操作。但是由于系統(tǒng)的復(fù)雜度和功能性的增加，原有的系統(tǒng)對新功能的支撐顯得有些捉襟見肘，所以在今年8月份，我們開始了對系統(tǒng)體驗(yàn)的分析和優(yōu)化工作。

一：產(chǎn)品理解

廣告投放平臺廣義上屬于商業(yè)產(chǎn)品體系，商業(yè)產(chǎn)品和用戶產(chǎn)品在體驗(yàn)的關(guān)注點(diǎn)上是有顯著區(qū)別的。最大的區(qū)別就是使用需求不同，商業(yè)產(chǎn)品一般不會出現(xiàn)在我們?nèi)粘Ｉ钪?，大部分都是在工作時，或者是特定的時段內(nèi)才會使用到。所以把握好商業(yè)產(chǎn)品的特性，是做好商業(yè)產(chǎn)品用戶體驗(yàn)的關(guān)鍵。

研究一個產(chǎn)品的特性，一個比較簡單的方法就是觀察產(chǎn)品的“零容忍點(diǎn)”，也就是產(chǎn)品的哪些特性如果不能夠滿足用戶，用戶就會產(chǎn)生強(qiáng)烈反感，甚至放棄使用。比如說現(xiàn)在非?；鸬囊苿踊ヂ?lián)網(wǎng)應(yīng)用，也就是app產(chǎn)品，用戶的零容忍點(diǎn)基本上會停留在視覺層面上。因?yàn)槲覀兊囊苿釉O(shè)備分辨率較高以及產(chǎn)品的使用場景（都是近距離使用）的關(guān)系，用戶對產(chǎn)品的視覺效果會非常嚴(yán)苛，如果產(chǎn)品的icon或者界面丑陋，基本上就不會用了。但是，對于一些小說站點(diǎn)或者視頻站點(diǎn)來說，視覺就不是用戶最主要關(guān)注的了，這類產(chǎn)品，用戶最關(guān)注的是他們的內(nèi)容，如果內(nèi)容不夠好，別人有的你沒有，那么用戶就會離開，即使你的界面十分精美，只能是華而不實(shí)。同樣，如果把思路切換到商業(yè)產(chǎn)品上，我們會發(fā)現(xiàn)用戶最在意的是能夠能夠在使用的功能滿足和節(jié)約時間。因?yàn)樯虡I(yè)產(chǎn)品更像是一個用戶的工具，如果工具不能夠操作，那么用戶就沒有使用的動力了。因此，對于商業(yè)產(chǎn)品來講，功能>性能>易用>美觀。

所以，對于商業(yè)產(chǎn)品設(shè)計師來說，我們的思維中要一直有一個聲音，那就是我們的優(yōu)化是不是能夠真正的提高用戶的效率，在效率和效果面前，我們要強(qiáng)迫自己選擇前者。

二.可用性走查

平臺系統(tǒng)的復(fù)雜度之高，超出預(yù)期，怎樣衡量復(fù)雜系統(tǒng)的操作效率提升是體驗(yàn)優(yōu)化的一個難題，思考之后，把產(chǎn)品的易學(xué)性作為我的設(shè)計出發(fā)點(diǎn)，就是通過統(tǒng)一、規(guī)范的系統(tǒng)能夠讓用戶更容易學(xué)習(xí)和掌握平臺產(chǎn)品具體的使用方法。

對整個系統(tǒng)超過30個頁面進(jìn)行可用性走查，根據(jù)用戶體驗(yàn)設(shè)計要素，把系統(tǒng)按照結(jié)構(gòu)層、框架層和表現(xiàn)層來進(jìn)行梳理。結(jié)構(gòu)層解決用戶如何導(dǎo)到某個頁面，做完去哪里。在梳理結(jié)構(gòu)層的過程中不具體思考交互方式，只是從任務(wù)出發(fā)，來看流程和結(jié)構(gòu)上能不能滿足功能，在滿足功能的基礎(chǔ)上有沒有提升的空間。框架層則解決頁面的具體布局和交互方式，對系統(tǒng)頁面的控件、布局等詳細(xì)梳理，尋找改進(jìn)空間。表現(xiàn)層解決產(chǎn)品的視覺呈現(xiàn)。

雖然互聯(lián)網(wǎng)發(fā)展迅速，但是利用Banner來推廣產(chǎn)品，依然是王道。
很多公司都采用這種形式進(jìn)行宣傳，優(yōu)點(diǎn)多多：便宜、效果可監(jiān)測、行之有效。
現(xiàn)在呢，假設(shè)有客戶讓你幫忙設(shè)計個Banner廣告，你要怎么設(shè)計呢？要怎么提高廣告的點(diǎn)擊率呢？

下面將詳細(xì)講述Banner設(shè)計的14條建議。

1. 選擇最有效的Banner尺寸

恐怕現(xiàn)在的設(shè)計師最怕聽到的兩個字就是“大氣”。
“你對設(shè)計稿有什么要求呢？” “哦，我希望大氣一些！”“。。。?！?br /> “您覺的哪些地方不滿意呢？”“嗯，就是希望再大氣一些！”“。。。?！?br /> “你看這次的視覺稿，風(fēng)格怎么樣？”“挺好的，稍微大氣一些就OK”“。。。?！?br /> 這些對話一點(diǎn)也不夸張，都是同行們常常抱怨的話題。設(shè)計師已經(jīng)無數(shù)次倒在了這兩個字下。
不過，抱怨并不能解決所有問題。那么我們該考慮如何解決這個令人頭疼的形容詞呢？ 簡單分析，從兩種不同類型的需求說起

第一種：商務(wù)性質(zhì)中的“大氣”

簡約的頁面風(fēng)格容易受到用戶的喜歡，而且能給用戶帶來一定的安全感。拿IBM這個來說，頁面給人的第一感覺是專業(yè)和安全。焦點(diǎn)圖構(gòu)成也比較簡單，左側(cè)醒目的標(biāo)語用了簡單的漸變，右側(cè)也運(yùn)用了簡單的幾何圖形。下面幾個例子也是如此，還有一些沒有列舉出來的，比如大家很熟悉的apple官網(wǎng)。

一個LOGO對于一家企業(yè)的重要性不用我說相信大家也都知道，不管是從視覺的品牌傳播方面，還是對于傳達(dá)企業(yè)對內(nèi)對外的精神和文化理念方面，小小的一個LOGO都處在一個舉足輕重的位置。好了，廢話不多說，開始正題。

有人說“即使一把火把可口可樂燒得精光，它也能憑借著它的LOGO東山再起?！爱?dāng)然了，至于有沒有人說過，我們無法考證。但是這句話充分說明了一個LOGO所能發(fā)揮的作用。下面我從5個方面來說明如何才是一個好的LOGO:

1． LOGO應(yīng)該有代表性的寓意

中國銀行的LOGO的經(jīng)典之處也不用我來多廢話，我們來看一看它所包含的寓意：

（1）首先，既然是中國銀行，它的圖形部分中間實(shí)際上是一個中國的“中”字；

（2）其次，外圓中方的造型，則代表著中國的古錢幣，將銀行這一特性表達(dá)出來；

（3）再次，圓形的外觀則指中國銀行面向全球，著眼世界。

2． LOGO的用色

一個好的LOGO應(yīng)該有能夠表達(dá)企業(yè)特性的色彩

上圖中，同為美國的2家著名企業(yè)的LOGO,都是以大量的字母為基礎(chǔ)造型的LOGO

給觀者的感覺卻是截然不同的兩種感覺,色彩的運(yùn)用起到了很重要的作用