UI，其實就是所有軟件的門面，點擊的按鈕，框架都是由UI工作人員完成，網(wǎng)頁設(shè)計其實就是UI的一種，只是和游戲UI，軟件UI有差別。比如說，手機(jī)的界面：現(xiàn)在的手機(jī)界面就比較好看，你要完成的就是讓大家看的清楚，看的舒服。軟件UI：比如說360軟件，現(xiàn)在的360軟件比較新穎，更加美觀，從點擊360圖標(biāo)的那一刻起都是UI工作人員的功勞，當(dāng)然也有無形的編程人員的參與。網(wǎng)頁的就更簡單了，我們打開所有的網(wǎng)站就是網(wǎng)頁設(shè)計人員做出來的總結(jié)，好比一輛汽車有發(fā)動機(jī)，但是要有開關(guān)，我們可以不用開關(guān)，可以用線路搭伙來啟動。我們?yōu)榱藛幽硞€軟件，其實可以直接輸入代碼來啟動，但是我們用了按鈕。UI的工作內(nèi)容就是讓大家更清楚，簡單的操作我們所需要的一切

UI即User Interface（用戶界面）的簡稱。UI設(shè)計則是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現(xiàn)軟件的定位和特點。UI還有其它的意義，如Unit Interval，Univ of Iowa，Unlock Instruction，Urgent Interrupt。網(wǎng)頁UI，在漫長的軟件發(fā)展中，界面設(shè)計工作一直沒有被重視起來。做界面設(shè)計的人也被貶義的稱為“美工”。其實軟件界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要賣點。一個友好美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點。界面設(shè)計不是單純的美術(shù)繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設(shè)計，是純粹的科學(xué)性的藝術(shù)設(shè)計。檢驗一個界面的標(biāo)準(zhǔn)既不是某個項目開發(fā)組領(lǐng)導(dǎo)的意見也不是項目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計要和用戶研究緊密結(jié)合，是一個不斷為最終用戶設(shè)計滿意視覺效果的過程。

手機(jī)UI主要針對移動客戶端，比如手機(jī)、pad 等，網(wǎng)頁UI主要則針對的是電腦顯示器中需要的網(wǎng)頁UI設(shè)計等，原理一樣，尺寸是不一樣的哦。

IPAD現(xiàn)在UI的設(shè)計都是要用最大的尺寸，也就是現(xiàn)在IPAD3的2048*1536來設(shè)計的，因為現(xiàn)在蘋果的規(guī)定必須是要用高清的，所以都是用這個尺寸來弄的，我就吃過虧！桌面圖標(biāo)一般是1024*1024，再需要多大就輸出多大。

對于剛?cè)胄械腢I設(shè)計師，最容易犯的錯就是在設(shè)計移動APP時，不懂什么尺寸或者用哪種屏幕的尺寸是最適當(dāng)?shù)?？為了解決這個問題，今天我們就簡單的為大家整理做UI時最基礎(chǔ)的尺寸規(guī)范。現(xiàn)象首先說現(xiàn)象，大家都知道移動端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其是Android，你會聽到很多種分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640×960, 640×1136, 750×1334, 1242×2208。不要被這些尺寸嚇倒。實際上大部分的app UI設(shè)計和移動端網(wǎng)頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規(guī)律可循。像素密度要知道，屏幕是由很多像素點組成的。之前提到那么多種分辨率，都是手機(jī)屏幕的實際像素尺寸。比如480×800的屏幕，就是由800行、480列的像素點組成的。每個點發(fā)出不同顏色的光，構(gòu)成我們所看到的畫面。而手機(jī)屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。剛好兩倍，然而兩款手機(jī)都是3.5英寸的。所以，我們要引入最重要的一個概念：像素密度，也就是PPI（pixels per inch）。這項指標(biāo)是連接數(shù)字世界與物理世界的橋梁。Pixels per inch，準(zhǔn)確的說是每英寸的長度上排列的像素點數(shù)量。1英寸是一個固定長度，等于2.54厘米，大約是食指最末端那根指節(jié)的長度。像素密度越高，代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多，就是因為它的像素密度翻了一倍。倍率與邏輯像素再用iPhone 3gs和4s來舉例。假設(shè)有個郵件列表界面，我們不妨按照PC端網(wǎng)頁設(shè)計的思維來想象。3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會變得特別寬。但兩款手機(jī)其實是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會小到根本看不清字。在現(xiàn)實中，這兩者效果卻是一樣的。這是因為Retina屏幕把2×2個像素當(dāng)1個像素使用。比如原本44像素高的頂部導(dǎo)航欄，在Retina屏上用了88個像素的高度來顯示。導(dǎo)致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質(zhì)卻更清晰。在以前，iOS應(yīng)用的資源圖片中，同一張圖通常有兩個尺寸。你會看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片準(zhǔn)備好，iOS會自己判斷用哪張，Android道理也一樣。由此可以看出，蘋果以普通屏為基準(zhǔn)，給Retina屏定義了一個2倍的倍率（iPhone 6plus除外，它達(dá)到了3倍）。實際像素除以倍率，就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。Android的解決方法類似，但更復(fù)雜一些。因為Android屏幕尺寸實在太多，分辨率高低跨度非常大，不像蘋果只有那么幾款固定設(shè)備、固定尺寸。所以Android把各種設(shè)備的像素密度劃成了好幾個范圍區(qū)間，給不同范圍的設(shè)備定義了不同的倍率，來保證顯示效果相近。像素密度概念雖然重要，但用不著我們自己算，iOS與Android都幫我們算好了。如圖所示，像素密度在120左右的屏幕歸為ldpi，160左右的歸為mdpi，以此類推。這樣，所有的Android屏幕都找到了自己的位置，并賦予了相應(yīng)的倍率：ldpi [0.75倍]mdpi [1倍]hdpi [1.5倍]xhdpi [2倍]xxhdpi [3倍]xxxhdpi [4倍]各型號iPhone的倍率比較簡單，我們后面會講到。那么Android手機(jī)那么多，具體怎么分？哪些手機(jī)是幾倍的倍率呢？我們先看一張表，這是友盟2014年10月到2015年03月的數(shù)據(jù)：就目前市場狀況而言，各種手機(jī)的分辨率可以這樣粗略判斷。雖然不全面，但至少在1年內(nèi)都還有一定的參考意義：ldpi 如今已絕跡，不用考慮mdpi [320x480]（市場份額不足5%，新手機(jī)不會有這種倍率，屏幕通常都特別?。﹉dpi [480x800、480x854、540x960]（早年的低端機(jī)，屏幕在3.5英寸檔位；如今的低端機(jī)，屏幕在4.7-5.0英寸檔位）xhdpi [720x1280]（早年的中端機(jī)，屏幕在4.7-5.0英寸檔位；如今的中低端機(jī)，屏幕在5.0-5.5英寸檔位）xxhdpi [1080x1920]（早年的高端機(jī)，如今的中高端機(jī)，屏幕通常都在5.0英寸以上）xxxhdpi [1440x2560]（極少數(shù)2K屏手機(jī)，比如Google Nexus 6）自然地，以1倍的mdpi作為基準(zhǔn)。像素密度更高或者更低的設(shè)備，只需乘以相應(yīng)的倍率，就能得到與基準(zhǔn)倍率近似的顯示效果。不過需要注意的是，Android設(shè)備的邏輯像素尺寸并不統(tǒng)一。比如兩種常見的屏幕480×800和1080×1920，它們分別屬于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到邏輯像素為320×533和360×640。很顯然，后者更寬更高，能顯示內(nèi)容。所以，即使有倍率的存在，各種Android設(shè)備的顯示效果仍然無法做到完全一致。單位不難發(fā)現(xiàn)，真正決定顯示效果的，是邏輯像素尺寸。為此，iOS和Android平臺都定義了各自的邏輯像素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp。說實話，兩者其實是一回事。單位之間的換算關(guān)系隨倍率變化：1倍：1pt=1dp=1px（mdpi、iPhone 3gs）1.5倍：1pt=1dp=1.5px（hdpi）2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）3倍：1pt=1dp=3px（xxhdpi、iPhone 6）4倍：1pt=1dp=4px（xxxhdpi）單位決定了我們的思考方式。在設(shè)計和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計Android應(yīng)用時，有的設(shè)計師喜歡把畫布設(shè)為1080×1920，有的喜歡設(shè)成720×1280。給出的界面元素尺寸就不統(tǒng)一了。Android的最小點擊區(qū)域尺寸是48x48dp，這就意味著在xhdpi的設(shè)備上，按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上，則是144x144px。無論畫布設(shè)成多大，我們設(shè)計的是基準(zhǔn)倍率的界面樣式，而且開發(fā)人員需要的單位都是邏輯像素。所以為了保證準(zhǔn)確高效的溝通，雙方都需要以邏輯像素尺寸來描述和理解界面，無論是在標(biāo)注圖還是在日常溝通中。不要再說“底部標(biāo)簽欄的高度是96像素，我是按照xhdpi做的”這樣的話了。Web怎么辦移動端頁面的絕對單位仍然是px，至少代碼里這么寫，但它的道理也和app一樣。由于像素密度是設(shè)備本身的固有屬性，它會影響到設(shè)備中的所有應(yīng)用，包括瀏覽器。前端技術(shù)可以善加利用設(shè)備的像素密度，只需一行代碼，瀏覽器便會使用app的顯示方式來渲染頁面。根據(jù)像素密度，按相應(yīng)倍率縮放。以iPhone 5s為例，屏幕的分辨率是640×1136，倍率是2。瀏覽器會認(rèn)為屏幕的分辨率是320×568，仍然是基準(zhǔn)倍率的尺寸。所以在制作頁面時，只需要按照基準(zhǔn)倍率來就行了。無論什么樣的屏幕，倍率是多少，都按邏輯像素尺寸來設(shè)計和開發(fā)頁面。只不過在準(zhǔn)備資源圖的時候，需要準(zhǔn)備2倍大小的圖，通過代碼把它縮成1倍大小顯示，才能保證清晰。實際應(yīng)用大家最關(guān)心的還是實際運用，畫布該怎么設(shè)置。我們就iOS、Android、Web三個平臺來分別梳理一下。不過在這之前，我要為使用PS進(jìn)行設(shè)計的朋友介紹一個小技巧。之前我說過，我們要以邏輯像素尺寸來思考界面。體現(xiàn)到設(shè)計過程中，就是要把單位設(shè)置成邏輯像素。打開PS的首選項——單位與標(biāo)尺界面，把尺寸和文字單位都改成點（Point）。這里的點也就是pt，無論設(shè)計iOS、Android還是Web應(yīng)用，單位都用它。當(dāng)然，各平臺單位名稱還是要記住的。這里我們用的只是它的原理，不用在意名稱。要調(diào)節(jié)倍率，則通過圖像大小里的DPI來控制。這個DPI，其實就是PPI，像素密度。有個常識大家都知道，屏幕上的設(shè)計DPI設(shè)成72，印刷品設(shè)計DPI設(shè)成300。為什么是這兩個數(shù)字？首先說300，這和人眼的分辨能力有關(guān)。由于1英寸是固定長度，每1英寸有多少個像素點決定了畫質(zhì)清晰程度。之前說過，這就是像素密度，也就是DPI。DPI達(dá)到300以上，其細(xì)膩程度就會給人真實感，像真實世界中的物件。相反，DPI只有10的話，在你一個食指指節(jié)大小的長度內(nèi)只有10個像素，這明顯就是馬賽克了。所以印刷品要設(shè)成300，才能保證清晰。再說72，這有一定的歷史原因。最早的圖形設(shè)計是在mac電腦上進(jìn)行的，mac本身的顯示器分辨率就是72。PS中把圖像DPI也設(shè)成72，就能保證屏幕上顯示的尺寸和打印尺寸相同，便于設(shè)計。72的PC顯示器分辨率逐漸成為一種默認(rèn)的行業(yè)標(biāo)準(zhǔn)，這套規(guī)則就這么沿用下來?，F(xiàn)在回到正題，我們怎么通過DPI來調(diào)節(jié)倍率？既然屏幕本身的分辨率是72，DPI設(shè)成72剛好是1倍尺寸，那設(shè)成72的兩倍就是倍率為2的屏幕了，就這么簡單。下面來看看3個平臺各自的畫布設(shè)置：IPhoneiPhone的屏幕尺寸各不相同，我說的是邏輯像素尺寸，這確實是讓人很頭疼的事情。如果想用一套設(shè)計涵蓋所有iPhone，就要選擇邏輯像素折中的機(jī)型。從市場占有率數(shù)據(jù)來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320×568。上升勢頭最猛，未來有望登上第一的是iPhone 6的屏幕。倍率為2，邏輯像素375×667。按照這兩種尺寸來設(shè)計，都是比較主流的做法?？梢约骖櫠桃恍┑膇Phone 4s，大一點的6 plus也不會過于空曠。不過在切圖的時候要注意，由于iPhone 6 plus的3倍圖是由2倍圖放大而來，所以位圖要注意保證清晰。Android都說Android碎片化嚴(yán)重，但它現(xiàn)在反而比iOS好處理。因為如今的Android屏幕邏輯像素已經(jīng)趨于統(tǒng)一了：360×640，就看你設(shè)成幾倍了。想以xhdpi為準(zhǔn)，就把DPI設(shè)成72×2=144。想以xxhdpi為準(zhǔn)，就把DPI設(shè)成72×3=216。對于那些比較老的低端機(jī)，寬度是480px的那批，畫面確實會小一些，顯示內(nèi)容會更少。稍微留意一下，重要內(nèi)容盡量保持在界面中上部分。當(dāng)然，這些機(jī)型不出一年就會被邊緣化，基本淘汰?，F(xiàn)在能運轉(zhuǎn)的也是當(dāng)作功能機(jī)在用，軟件多了必卡無疑，用戶體驗無從談起。不作考慮也是OK的。Web手機(jī)端網(wǎng)頁就沒有統(tǒng)一標(biāo)準(zhǔn)了，比較流行的做法是按照iPhone 5的尺寸來設(shè)計。倍率2，邏輯像素320×568。這樣的做法比較實在，倍率2的屏幕無論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平，頁面加載速度快。當(dāng)然，缺點就是在倍率3的設(shè)備上看，圖片不是特別清晰。如果追求圖片質(zhì)量，愿意犧牲加載速度，那么可以按照最大的屏幕來設(shè)計。也就是iPhone 6 plus的尺寸，倍率3，邏輯像素414×736?？偨Y(jié)移動端的尺寸比PC端復(fù)雜，關(guān)鍵就在倍率。但也正因為倍率的存在，把大大小小的屏幕拉回到同一水平線，得以保證一套設(shè)計適應(yīng)各種屏幕。站在這條水平線的角度看，會發(fā)現(xiàn)它很好理解。

對于剛?cè)胄械腢I設(shè)計師，最容易犯的錯就是在設(shè)計移動APP時，不懂什么尺寸或者用哪種屏幕的尺寸是最適當(dāng)?shù)?？為了解決這個問題，今天我們就簡單的為大家整理做UI時最基礎(chǔ)的尺寸規(guī)范。現(xiàn)象首先說現(xiàn)象，大家都知道移動端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其是Android，你會聽到很多種分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640×960, 640×1136, 750×1334, 1242×2208。不要被這些尺寸嚇倒。實際上大部分的app UI設(shè)計和移動端網(wǎng)頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規(guī)律可循。像素密度要知道，屏幕是由很多像素點組成的。之前提到那么多種分辨率，都是手機(jī)屏幕的實際像素尺寸。比如480×800的屏幕，就是由800行、480列的像素點組成的。每個點發(fā)出不同顏色的光，構(gòu)成我們所看到的畫面。而手機(jī)屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。剛好兩倍，然而兩款手機(jī)都是3.5英寸的。所以，我們要引入最重要的一個概念：像素密度，也就是PPI（pixels per inch）。這項指標(biāo)是連接數(shù)字世界與物理世界的橋梁。Pixels per inch，準(zhǔn)確的說是每英寸的長度上排列的像素點數(shù)量。1英寸是一個固定長度，等于2.54厘米，大約是食指最末端那根指節(jié)的長度。像素密度越高，代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多，就是因為它的像素密度翻了一倍。倍率與邏輯像素再用iPhone 3gs和4s來舉例。假設(shè)有個郵件列表界面，我們不妨按照PC端網(wǎng)頁設(shè)計的思維來想象。3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會變得特別寬。但兩款手機(jī)其實是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會小到根本看不清字。在現(xiàn)實中，這兩者效果卻是一樣的。這是因為Retina屏幕把2×2個像素當(dāng)1個像素使用。比如原本44像素高的頂部導(dǎo)航欄，在Retina屏上用了88個像素的高度來顯示。導(dǎo)致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質(zhì)卻更清晰。在以前，iOS應(yīng)用的資源圖片中，同一張圖通常有兩個尺寸。你會看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片準(zhǔn)備好，iOS會自己判斷用哪張，Android道理也一樣。由此可以看出，蘋果以普通屏為基準(zhǔn)，給Retina屏定義了一個2倍的倍率（iPhone 6plus除外，它達(dá)到了3倍）。實際像素除以倍率，就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。Android的解決方法類似，但更復(fù)雜一些。因為Android屏幕尺寸實在太多，分辨率高低跨度非常大，不像蘋果只有那么幾款固定設(shè)備、固定尺寸。所以Android把各種設(shè)備的像素密度劃成了好幾個范圍區(qū)間，給不同范圍的設(shè)備定義了不同的倍率，來保證顯示效果相近。像素密度概念雖然重要，但用不著我們自己算，iOS與Android都幫我們算好了。如圖所示，像素密度在120左右的屏幕歸為ldpi，160左右的歸為mdpi，以此類推。這樣，所有的Android屏幕都找到了自己的位置，并賦予了相應(yīng)的倍率：ldpi [0.75倍]mdpi [1倍]hdpi [1.5倍]xhdpi [2倍]xxhdpi [3倍]xxxhdpi [4倍]各型號iPhone的倍率比較簡單，我們后面會講到。那么Android手機(jī)那么多，具體怎么分？哪些手機(jī)是幾倍的倍率呢？我們先看一張表，這是友盟2014年10月到2015年03月的數(shù)據(jù)：就目前市場狀況而言，各種手機(jī)的分辨率可以這樣粗略判斷。雖然不全面，但至少在1年內(nèi)都還有一定的參考意義：ldpi 如今已絕跡，不用考慮mdpi [320x480]（市場份額不足5%，新手機(jī)不會有這種倍率，屏幕通常都特別?。﹉dpi [480x800、480x854、540x960]（早年的低端機(jī)，屏幕在3.5英寸檔位；如今的低端機(jī)，屏幕在4.7-5.0英寸檔位）xhdpi [720x1280]（早年的中端機(jī)，屏幕在4.7-5.0英寸檔位；如今的中低端機(jī)，屏幕在5.0-5.5英寸檔位）xxhdpi [1080x1920]（早年的高端機(jī)，如今的中高端機(jī)，屏幕通常都在5.0英寸以上）xxxhdpi [1440x2560]（極少數(shù)2K屏手機(jī)，比如Google Nexus 6）自然地，以1倍的mdpi作為基準(zhǔn)。像素密度更高或者更低的設(shè)備，只需乘以相應(yīng)的倍率，就能得到與基準(zhǔn)倍率近似的顯示效果。不過需要注意的是，Android設(shè)備的邏輯像素尺寸并不統(tǒng)一。比如兩種常見的屏幕480×800和1080×1920，它們分別屬于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到邏輯像素為320×533和360×640。很顯然，后者更寬更高，能顯示內(nèi)容。所以，即使有倍率的存在，各種Android設(shè)備的顯示效果仍然無法做到完全一致。單位不難發(fā)現(xiàn)，真正決定顯示效果的，是邏輯像素尺寸。為此，iOS和Android平臺都定義了各自的邏輯像素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp。說實話，兩者其實是一回事。單位之間的換算關(guān)系隨倍率變化：1倍：1pt=1dp=1px（mdpi、iPhone 3gs）1.5倍：1pt=1dp=1.5px（hdpi）2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）3倍：1pt=1dp=3px（xxhdpi、iPhone 6）4倍：1pt=1dp=4px（xxxhdpi）單位決定了我們的思考方式。在設(shè)計和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計Android應(yīng)用時，有的設(shè)計師喜歡把畫布設(shè)為1080×1920，有的喜歡設(shè)成720×1280。給出的界面元素尺寸就不統(tǒng)一了。Android的最小點擊區(qū)域尺寸是48x48dp，這就意味著在xhdpi的設(shè)備上，按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上，則是144x144px。無論畫布設(shè)成多大，我們設(shè)計的是基準(zhǔn)倍率的界面樣式，而且開發(fā)人員需要的單位都是邏輯像素。所以為了保證準(zhǔn)確高效的溝通，雙方都需要以邏輯像素尺寸來描述和理解界面，無論是在標(biāo)注圖還是在日常溝通中。不要再說“底部標(biāo)簽欄的高度是96像素，我是按照xhdpi做的”這樣的話了。Web怎么辦移動端頁面的絕對單位仍然是px，至少代碼里這么寫，但它的道理也和app一樣。由于像素密度是設(shè)備本身的固有屬性，它會影響到設(shè)備中的所有應(yīng)用，包括瀏覽器。前端技術(shù)可以善加利用設(shè)備的像素密度，只需一行代碼，瀏覽器便會使用app的顯示方式來渲染頁面。根據(jù)像素密度，按相應(yīng)倍率縮放。以iPhone 5s為例，屏幕的分辨率是640×1136，倍率是2。瀏覽器會認(rèn)為屏幕的分辨率是320×568，仍然是基準(zhǔn)倍率的尺寸。所以在制作頁面時，只需要按照基準(zhǔn)倍率來就行了。無論什么樣的屏幕，倍率是多少，都按邏輯像素尺寸來設(shè)計和開發(fā)頁面。只不過在準(zhǔn)備資源圖的時候，需要準(zhǔn)備2倍大小的圖，通過代碼把它縮成1倍大小顯示，才能保證清晰。實際應(yīng)用大家最關(guān)心的還是實際運用，畫布該怎么設(shè)置。我們就iOS、Android、Web三個平臺來分別梳理一下。不過在這之前，我要為使用PS進(jìn)行設(shè)計的朋友介紹一個小技巧。之前我說過，我們要以邏輯像素尺寸來思考界面。體現(xiàn)到設(shè)計過程中，就是要把單位設(shè)置成邏輯像素。打開PS的首選項——單位與標(biāo)尺界面，把尺寸和文字單位都改成點（Point）。這里的點也就是pt，無論設(shè)計iOS、Android還是Web應(yīng)用，單位都用它。當(dāng)然，各平臺單位名稱還是要記住的。這里我們用的只是它的原理，不用在意名稱。要調(diào)節(jié)倍率，則通過圖像大小里的DPI來控制。這個DPI，其實就是PPI，像素密度。有個常識大家都知道，屏幕上的設(shè)計DPI設(shè)成72，印刷品設(shè)計DPI設(shè)成300。為什么是這兩個數(shù)字？首先說300，這和人眼的分辨能力有關(guān)。由于1英寸是固定長度，每1英寸有多少個像素點決定了畫質(zhì)清晰程度。之前說過，這就是像素密度，也就是DPI。DPI達(dá)到300以上，其細(xì)膩程度就會給人真實感，像真實世界中的物件。相反，DPI只有10的話，在你一個食指指節(jié)大小的長度內(nèi)只有10個像素，這明顯就是馬賽克了。所以印刷品要設(shè)成300，才能保證清晰。再說72，這有一定的歷史原因。最早的圖形設(shè)計是在mac電腦上進(jìn)行的，mac本身的顯示器分辨率就是72。PS中把圖像DPI也設(shè)成72，就能保證屏幕上顯示的尺寸和打印尺寸相同，便于設(shè)計。72的PC顯示器分辨率逐漸成為一種默認(rèn)的行業(yè)標(biāo)準(zhǔn)，這套規(guī)則就這么沿用下來?，F(xiàn)在回到正題，我們怎么通過DPI來調(diào)節(jié)倍率？既然屏幕本身的分辨率是72，DPI設(shè)成72剛好是1倍尺寸，那設(shè)成72的兩倍就是倍率為2的屏幕了，就這么簡單。下面來看看3個平臺各自的畫布設(shè)置：IPhoneiPhone的屏幕尺寸各不相同，我說的是邏輯像素尺寸，這確實是讓人很頭疼的事情。如果想用一套設(shè)計涵蓋所有iPhone，就要選擇邏輯像素折中的機(jī)型。從市場占有率數(shù)據(jù)來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320×568。上升勢頭最猛，未來有望登上第一的是iPhone 6的屏幕。倍率為2，邏輯像素375×667。按照這兩種尺寸來設(shè)計，都是比較主流的做法?？梢约骖櫠桃恍┑膇Phone 4s，大一點的6 plus也不會過于空曠。不過在切圖的時候要注意，由于iPhone 6 plus的3倍圖是由2倍圖放大而來，所以位圖要注意保證清晰。Android都說Android碎片化嚴(yán)重，但它現(xiàn)在反而比iOS好處理。因為如今的Android屏幕邏輯像素已經(jīng)趨于統(tǒng)一了：360×640，就看你設(shè)成幾倍了。想以xhdpi為準(zhǔn)，就把DPI設(shè)成72×2=144。想以xxhdpi為準(zhǔn)，就把DPI設(shè)成72×3=216。對于那些比較老的低端機(jī)，寬度是480px的那批，畫面確實會小一些，顯示內(nèi)容會更少。稍微留意一下，重要內(nèi)容盡量保持在界面中上部分。當(dāng)然，這些機(jī)型不出一年就會被邊緣化，基本淘汰。現(xiàn)在能運轉(zhuǎn)的也是當(dāng)作功能機(jī)在用，軟件多了必卡無疑，用戶體驗無從談起。不作考慮也是OK的。Web手機(jī)端網(wǎng)頁就沒有統(tǒng)一標(biāo)準(zhǔn)了，比較流行的做法是按照iPhone 5的尺寸來設(shè)計。倍率2，邏輯像素320×568。這樣的做法比較實在，倍率2的屏幕無論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平，頁面加載速度快。當(dāng)然，缺點就是在倍率3的設(shè)備上看，圖片不是特別清晰。如果追求圖片質(zhì)量，愿意犧牲加載速度，那么可以按照最大的屏幕來設(shè)計。也就是iPhone 6 plus的尺寸，倍率3，邏輯像素414×736?？偨Y(jié)移動端的尺寸比PC端復(fù)雜，關(guān)鍵就在倍率。但也正因為倍率的存在，把大大小小的屏幕拉回到同一水平線，得以保證一套設(shè)計適應(yīng)各種屏幕。站在這條水平線的角度看，會發(fā)現(xiàn)它很好理解。

一、UI設(shè)計、平面設(shè)計、網(wǎng)站設(shè)計的簡單介紹：①-UI設(shè)計的定義：UI即User Interface(用戶界面)的簡稱。UI設(shè)計是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。軟件設(shè)計可分為兩個部分：編碼設(shè)計與UI設(shè)計。UI的本意是用戶界面，是英文User和 Interface的縮寫。從字面上看是用戶與界面2個部分組成，但實際上還包括用戶與界面之間的交互關(guān)系。在飛速發(fā)展的電子產(chǎn)品中，界面設(shè)計工作一點點的被重視起來。做界面設(shè)計的“美工”也隨之被稱之為“UI設(shè)計師”或“UI工程師”。其實軟件界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要賣點。一個電子產(chǎn)品擁有美觀的界面會給人帶來舒適的視覺享受，拉近人與商品的距離，是建立在科學(xué)性之上的藝術(shù)設(shè)計。檢驗一個界面的標(biāo)準(zhǔn)既不是某個項目開發(fā)組領(lǐng)導(dǎo)的意見也不是項目成員投票的結(jié)果，而是終端用戶的感受。②-平面設(shè)計的定義:平面設(shè)計（graphic design），也稱為視覺傳達(dá)設(shè)計，是以“視覺”作為溝通和表現(xiàn)的方式，透過多種方式來創(chuàng)造和結(jié)合符號、圖片和文字，借此作出用來傳達(dá)想法或訊息的視覺表現(xiàn)。平面設(shè)計師可能會利用字體排印、視覺藝術(shù)、版面（page layout）、電腦軟件等方面的專業(yè)技巧，來達(dá)成創(chuàng)作計劃的目的。[1]  平面設(shè)計通?？芍钢谱鳎ㄔO(shè)計）時的過程，以及最后完成的作品。平面設(shè)計的常見用途包括標(biāo)識（商標(biāo)和品牌）、出版物（雜志，報紙和書籍）、平面廣告，海報，廣告牌，網(wǎng)站圖形元素、標(biāo)志和產(chǎn)品包裝。例如，產(chǎn)品包裝可能包括的商標(biāo)或其他的藝術(shù)作品、編排文本和純粹的設(shè)計元素，如風(fēng)格統(tǒng)一的圖像，形狀，大小和顏色。組合是平面設(shè)計的最重要的特性之一，尤其是當(dāng)產(chǎn)品使用預(yù)先存在的材料或多種元素融合。③-網(wǎng)站設(shè)計的定義：簡單來說，網(wǎng)站設(shè)計的目的就是產(chǎn)生網(wǎng)站。簡單的信息如文字，圖片（GIFs， JPEGs，PNGs）和表格，都可以通過使超文件標(biāo)示語言、可擴(kuò)展超文本標(biāo)記語言等標(biāo)示語言放置到網(wǎng)站頁面上。而更復(fù)雜的信息如矢量圖形、動畫、視頻、聲頻等多媒體檔案則需要插件程序來運行，同樣地它們亦需要標(biāo)示語言移植在網(wǎng)站內(nèi)。網(wǎng)頁設(shè)計是設(shè)計過程的前端（客戶端）的設(shè)計通常用于描述一個網(wǎng)站，包括寫標(biāo)記，但是這是一個灰色地帶，因為這還覆蓋了網(wǎng)絡(luò)的發(fā)展。網(wǎng)頁設(shè)計師預(yù)計將有意識的可用性，如果他們的作用，需要創(chuàng)建標(biāo)記，那么它們也有望成為最新的網(wǎng)頁易讀性指引。網(wǎng)站設(shè)計(Web Design)，網(wǎng)站設(shè)計是一個把軟件需求轉(zhuǎn)換成用軟件網(wǎng)站表示的過程，就是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用Dreamweaver、photoshop等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊（信息），或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)（網(wǎng)絡(luò)服務(wù)）。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊（信息）或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站它是由域名（俗稱網(wǎng)址），網(wǎng)站源程序和網(wǎng)站空間三部分構(gòu)成。其中域名它是類似于互聯(lián)網(wǎng)上的門牌號碼，是用于識別和定位互聯(lián)網(wǎng)上計算機(jī)的層次結(jié)構(gòu)式字符標(biāo)識，與該計算機(jī)的互聯(lián)網(wǎng)協(xié)議（IP）地址相對應(yīng)。而網(wǎng)站設(shè)計是設(shè)計師通過像Frontpage或Dreamweaver等工具來對網(wǎng)站進(jìn)行編輯的！二、UI設(shè)計、平面設(shè)計、網(wǎng)站設(shè)計所需的工具：1、UI設(shè)計所需的軟件工具：從左開始一次為：Photoshop、Illustrator、CorelDraw、Indesign、Fireworks、DreamWeaver、Flash 、HTML5、CSS(Cascading Style Sheets)、Axure RP Pro 7.0、IOS、Android。2、平面設(shè)計所需的軟件工具：Photoshop、Illustrator、CorelDraw、Indesign、Fireworks、PageMaker。3、網(wǎng)站設(shè)計所需的軟件工具：①Photoshop：學(xué)習(xí)圖像處理、編輯、通道、圖層、路徑綜合運用;圖像色彩的校正;各種特效濾鏡的使用;特效字的制作;圖像輸出與優(yōu)化等,靈活運用圖層風(fēng)格，流體變形及褪底和蒙板，制作出千變?nèi)f化的圖像特效。②Freehand：不論是個人作品設(shè)計、公司徽標(biāo)、海報制作，都可以輕松完成，應(yīng)用于廣告、印刷等行業(yè)③CorelDraw：通過CorelDRAW9的全方面的設(shè)計及網(wǎng)頁功能融合到現(xiàn)有的設(shè)計方案中，制作矢量的插圖、設(shè)計及圖像，出色地設(shè)計公司標(biāo)志、簡報、彩頁、手冊、產(chǎn)品包裝、標(biāo)識、網(wǎng)頁及其它。④Illustrator：學(xué)習(xí)圖形繪制、包裝、宣傳頁的制作，讓你更加方便地進(jìn)行LOGO及CI設(shè)計，不到一個月，您就會成為一名真正的美術(shù)大師，在 Photoshop的基礎(chǔ)上再學(xué)它如虎添翼，效率成倍提高。⑤Microsoft FrontPage    如果你曾對Word很熟悉，那么相信你用 FrontPage進(jìn)行網(wǎng)頁設(shè)計一定會非常順手。使用FrontPage制作網(wǎng)頁，你能真正體會到“功能強(qiáng)大，簡單易用”的含義。頁面制作由FrontPage中的Editor完成，其工作窗口由3個標(biāo)簽頁組成，分別是“所見即所得”的編輯頁，HTML代碼編輯頁和預(yù)覽頁。FrontPage帶有圖形和GIF動畫編輯器，支持CGI和CSS。向?qū)Ш湍０宥寄苁钩鯇W(xué)者在編輯網(wǎng)頁時感到更加方便。FrontPage最強(qiáng)大之處是其站點管理功能。在更新服務(wù)器上的站點時，不需要創(chuàng)建更改文件的目錄。FrontPage會為你跟蹤文件并拷貝那些新版本文件。FrontPage是現(xiàn)有網(wǎng)頁制作軟件中惟一既能在本地計算機(jī)上工作，又能通過Internet直接對遠(yuǎn)程服務(wù)器上的文件進(jìn)行工作的軟件。⑥Netscape編輯器Netscape Communicator和Netscape Navigator Gold3.0版本都帶有網(wǎng)頁編輯器。如果你喜歡用Netscape瀏覽器上網(wǎng)，使用Netscape編輯器真是簡單方便!當(dāng)你用Netscape瀏覽器顯示網(wǎng)頁時， 單擊編輯按鈕，Netscape就會把網(wǎng)頁存儲在硬盤中，然后就可以開始編輯了。你也可以像使用Word那樣編輯文字、字體、顏色，改變主頁作者、標(biāo)題、背景顏色或圖像，定義描點，插入鏈接，定義文檔編碼，插入圖像，創(chuàng)建表格等，是不是與FrontPage 2000還有些像?但是，Netscape編輯器對復(fù)雜的網(wǎng)頁設(shè)計就顯得功能有限了，它連表單創(chuàng)建、多框架創(chuàng)建都不支持。Netscape編輯器是網(wǎng)頁制作初學(xué)者很好的入門工具。如果你的網(wǎng)頁主要是由文本和圖片組成的，Netscape編輯器將是一個輕松的選擇。如果你對HTML語言有所了解的話，能夠使用Notepad或Ultra Edit等文本編輯器來編寫少量的HTML語句，也可以彌補Netscape編輯器的一些不足。⑦Adobe Pagemill    Pagemill功能不算強(qiáng)大，但使用起來很方便，適合初學(xué)者制作較為美觀、而不是非常復(fù)雜的主頁。如果你的主頁需要很多框架、表單和Image Map圖像，那么Adobe Pagemill的確是你的首選。   Pagemill另一大特色是有一個剪貼板，可以將任意多的文本、圖形、表格拖放到里面，需要時再打開，很方便。⑧Claris Home Page    如果使用Claris Home Page軟件，你可以在幾分鐘之內(nèi)創(chuàng)建一個動態(tài)網(wǎng)頁。這是因為它有一個很好的創(chuàng)建和編輯Frame(框架)的工具，你不必花費太多的力氣就可以增加新的Frame(框架)。而且Claris Home Page 3.0集成了FileMaker數(shù)據(jù)庫，增強(qiáng)的站點管理特性還允許你檢測頁面的合法連接。不過界面設(shè)計過于粗糙，對Image Map圖像的處理也不完全。⑨DreamWeaver    自制動態(tài)HTML動畫的網(wǎng)頁DreamWeaver是一個很酷的網(wǎng)頁設(shè)計軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它還能通過拖拽從頭到尾制作動態(tài)的HTML動畫，支持動態(tài)HTML(Dynamic HTML)的設(shè)計，使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。DreamWeaver還采用了Roundtrip HTML技術(shù)。這項技術(shù)使得網(wǎng)頁在DreamWeaver和HTML代碼編輯器之間進(jìn)行自由轉(zhuǎn)換，HTML句法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計者可以在不改變原有編輯習(xí)慣的同時，充分享受到可視化編輯帶來的益處。 DreamWeaver最具挑戰(zhàn)性和生命力的是它的開放式設(shè)計，這項設(shè)計使任何人都可以輕易擴(kuò)展它的功能。⑩Fireworks  第一款徹底為Web制作者們設(shè)計的軟件Fireworks的來頭實在不小，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。Fireworks是專為網(wǎng)絡(luò)圖像設(shè)計而開發(fā)，內(nèi)建豐富的支持網(wǎng)絡(luò)出版功能，比如Fireworks能夠自動切圖、生成鼠標(biāo)動態(tài)感應(yīng)的javascript。而且Fireworks具有十分強(qiáng)大的動畫功能和一個幾乎完美的網(wǎng)絡(luò)圖像生成器(Export功能)。它增強(qiáng)了與dreamweaver的聯(lián)系，可以直接生成dreamweaver的Libaray甚至能夠?qū)С鰹榕浜螩SS式樣的網(wǎng)頁及圖片!??Flash    讓你的網(wǎng)頁動起來Flash是用在互聯(lián)網(wǎng)上動態(tài)的、可互動的shockwave。它的優(yōu)點是體積小，可邊下載邊播放，這樣就避免了用戶長時間的等待。FLASH可以用其生成動畫，還可在網(wǎng)頁中加入聲音。這樣你就能生成多媒體的圖形和界面，而使文件的體積卻很小。FLASH雖然不可以像一門語言一樣進(jìn)行編程，但用其內(nèi)置的語句并結(jié)合JavaScripe，您也可做出互動性很強(qiáng)的主頁來。有人曾經(jīng)說過：下個世紀(jì)的網(wǎng)絡(luò)設(shè)計人不會用FLASH，必將被淘汰出局!我相信這句話沒錯!??HotDog Professional   制作要加入多種復(fù)雜技術(shù)的網(wǎng)頁HotDog是較早基于代碼的網(wǎng)頁設(shè)計工具，其最具特色的是提供了許多向?qū)Чぞ?，能幫助設(shè)計者制作頁面中的復(fù)雜部分。HotDog的高級HTML支持插入marquee，并能在預(yù)覽模式中以正常速度觀看。這點非常難得，因為即使首創(chuàng)這種標(biāo)簽的Microsoft在FrontPage中也未提供這樣的功能。HotDog對plug-in的支持也遠(yuǎn)遠(yuǎn)超過其他產(chǎn)品，它提供的對話框允許你以手動方式為不同格式的文件選擇不同的選項。但對中文的處理不很方便。HotDog是個功能強(qiáng)大的軟件，對于那些希望在網(wǎng)頁中加入CSS、Java、RealVideo等復(fù)雜技術(shù)的高級設(shè)計者，是個很好的選擇。??HomeSite    制作可完全控制頁面進(jìn)程的網(wǎng)頁Allaire的HomeSite是一個小巧而全能的HTML代碼編輯器，有豐富的幫助功能，支持CGI和CSS等等，并且可以直接編輯perl程序。HomeSite工作界面繁簡由人，根據(jù)習(xí)慣，可以將其設(shè)置成像Notepad那樣簡單的編輯窗口，也可以在復(fù)雜的界面下工作。HomeSite更適合那些比較復(fù)雜和精彩頁面的設(shè)計。如果你希望能完全控制你制作的頁面的進(jìn)程，HomeSite是你最佳選擇。不過對于生手過于復(fù)雜。??Microsoft Visual Studio是美國微軟公司的開發(fā)工具包系列產(chǎn)品。    該系列的版本有：2003、2005、2008、2010、2012、2013、2015、2015 RTM和未來的版本;適合開發(fā)動態(tài)的aspx網(wǎng)頁，同時，還能制作無刷新網(wǎng)站、webservice功能等。??Jbuilder一個可視化JAVA開發(fā)工具。它是在Java2平臺上開發(fā)商業(yè)應(yīng)用程序、數(shù)據(jù)庫、發(fā)布程序的優(yōu)秀工具。它支持J2EE，所以程序員可以快速的轉(zhuǎn)換企業(yè)版Java應(yīng)用程序。    不論是各種版本，均適合使用其開發(fā)出JSP網(wǎng)頁。三、UI設(shè)計、平面設(shè)計、網(wǎng)站設(shè)計的設(shè)計方向/方法/步驟/流程：1、UI設(shè)計方向UI是用戶界面，是英文User和 interface的縮寫。從字面上看是用戶與界面2個組成部分，但實際上還包括用戶與界面之間的交互關(guān)系，所以這樣可分為3個方向，他們分別是：用戶研究、交互設(shè)計、界面設(shè)計。①、用戶研究用戶研究包含兩個方面：一是可用性工程學(xué)（usability Engineering），研究如何提高產(chǎn)品的可用性，使得系統(tǒng)的設(shè)計更容易被人使用、學(xué)習(xí)和記憶；二是通過可用性工程學(xué)的研究，發(fā)掘用戶的潛在需求，為技術(shù)創(chuàng)新提供另外一條思路和方法。用戶研究是一個跨學(xué)科的專業(yè)，涉及可用性工程學(xué)、人類功效學(xué)、心理學(xué)、市場研究學(xué)、教育學(xué)、設(shè)計學(xué)等等學(xué)科。用戶研究技術(shù)是站在人文學(xué)科的角度來研究產(chǎn)品，站在用戶的角度介入到產(chǎn)品的開發(fā)和設(shè)計中。用戶研究通過對于用戶的工作環(huán)境、產(chǎn)品的使用習(xí)慣等研究，使得在產(chǎn)品開發(fā)的前期能夠把用戶對于產(chǎn)品功能的期望、對設(shè)計和外觀方面的要求融入到產(chǎn)品的開發(fā)過程中去，從而幫助企業(yè)完善產(chǎn)品設(shè)計或者探索一個新產(chǎn)品概念。他是得到用戶需求和反饋的途徑，也是檢驗界面與交互設(shè)計是否合理的重要標(biāo)準(zhǔn)。②交互設(shè)計這部分指人與機(jī)之間的交互工程，在過去交互設(shè)計也由程序員來做，其實程序員擅長編碼，而不善于與最終用戶交互。所以，很多的軟件雖然功能比較齊全，但是交互方面設(shè)計很粗糙，繁瑣難用，學(xué)習(xí)困難。使用這樣的軟件后，不是使人聰明與進(jìn)步而是讓人感到愚弄與羞辱。許多人因為不能操作電腦軟件而下崗失業(yè)，這樣的交互使電腦成為讓人恐懼的科技怪獸。于是我們把交互設(shè)計從程序員的工作中分離出來單獨成為一個學(xué)科，也就是人機(jī)交互設(shè)計。他的目的在于加強(qiáng)軟件的易用、易學(xué)、易理解，使計算機(jī)真正成為方便地為人類服務(wù)的工具。③界面設(shè)計在漫長的軟件發(fā)展中，界面設(shè)計工作一直沒有被重視起來。做界面設(shè)計的人也被貶義的稱為“美工”。其實軟件界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣，是產(chǎn)品的重要買點。一個友好美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點。界面設(shè)計不是單純的美術(shù)繪畫，他需要定位使用者、使用環(huán)境、使用方式并且為最終用戶而設(shè)計，是純粹的科學(xué)性的藝術(shù)設(shè)計。檢驗一個界面的標(biāo)準(zhǔn)即不是某個項目開發(fā)組領(lǐng)導(dǎo)的意見也不是項目成員投票的結(jié)果，而是最終用戶的感受。所以界面設(shè)計要和用戶研究緊密結(jié)合，是一個不斷為最終用戶設(shè)計滿意視覺效果的過程。2、平面設(shè)計的設(shè)計方法/步驟：①、調(diào)查 調(diào)查是了解事物的過程，設(shè)計需要的是有目的和完整的調(diào)查。背景、市場調(diào)查、行業(yè)調(diào)查（關(guān)于品牌、受眾、產(chǎn)品……）、關(guān)于定位、表現(xiàn)手法、……調(diào)查是設(shè)計的開始和基礎(chǔ)（背景知識）。②、內(nèi)容 內(nèi)容分為主題和具體內(nèi)容兩部分，這是設(shè)計師在進(jìn)行設(shè)計前的基本材料。③、理念 構(gòu)思立意是設(shè)計的第一步，在設(shè)計中思路比一切更重要。理念一向獨立于設(shè)計之上。也許在你的視覺作品中傳達(dá)出理念是最難的一件事。④、調(diào)動視覺元素 在設(shè)計中基本元素相當(dāng)于你作品的構(gòu)件，每一個元素都要有傳遞和加強(qiáng)傳遞信息的目的。真正優(yōu)秀的設(shè)計師往往很“吝嗇”，每動用一種元素，都會從整體需要出發(fā)去考慮。在一個版面之中，構(gòu)成元素可以根據(jù)類別來進(jìn)行劃分，如可以分為： 標(biāo)題、內(nèi)文、背景、色調(diào)、主體圖形、留白、視覺中心等等。平面設(shè)計版面就是把不同元素進(jìn)行有機(jī)結(jié)合的過程。例如在版式當(dāng)中常常借助框架（也叫骨骼），就有很多種形式，規(guī)律框架和非規(guī)律框架，可見框架和隱性框架；還有在字體元素當(dāng)中，對于字體和字型的選擇和搭配的好壞就是一個非常有講究的。選擇字體風(fēng)格的過程就是一個美學(xué)判斷的過程，還有在色彩這一元素的使用上，能體現(xiàn)出一個設(shè)計師對色彩的理解和修養(yǎng)。色彩是一種語言（信息），色彩具有感情，能讓人產(chǎn)生聯(lián)想，能讓人感到冷暖、前后、輕重、大小等等。善于調(diào)動視覺元素是設(shè)計師必備的能力之一。⑤、選擇表現(xiàn)手法 手法即是技巧，在視覺產(chǎn)品泛濫的今天要想把受眾打動以并非易事，的視覺作品已被人們的眼睛自動的忽略掉了。要把你的信息傳遞出去有幾種方法呢？一種是完整完美的以傳統(tǒng)美學(xué)去表現(xiàn)的設(shè)計方式，會被受眾欣賞閱讀并記住。二種是用新奇的或出奇不意的方式可以達(dá)到（包括在材料上）三種是瘋狂的廣告投放量，進(jìn)行地毯式的強(qiáng)行轟炸。而我們更需要那一種呢？雖然三種方法都能達(dá)到目的，但我們清楚他們的回報是不同的。我們在三大構(gòu)成中學(xué)過很多種圖形的處理和表現(xiàn)手法，如對比、類比、夸張、對稱、主次、明暗、變異、重復(fù)、矛盾、放射、節(jié)奏、粗細(xì)、冷暖、面積等形式。另外還有從圖形處理的效果上又有手繪類效果，如油畫、鉛筆、水彩、版畫、蠟筆、涂鴉……還有其他的如攝影、老照片、等等。那么你要選擇那一種呢？這取決于你的目的和目標(biāo)群體，以及你的設(shè)計水平。⑥、平衡 平衡能帶來視覺及心理的滿足，設(shè)計師要解決畫面當(dāng)中力場的平衡，前后銜接的平衡，平衡感也是設(shè)計師構(gòu)圖所需要的能力，平衡與不平衡是相對的，以是否達(dá)到主題要求為標(biāo)準(zhǔn)。平衡分為對稱平衡和不對稱平衡，包括點、線、面、色、空間的平衡。⑦、出彩 記住，你要創(chuàng)造出視覺興奮點來升華你的作品。⑧、關(guān)于風(fēng)格 作為設(shè)計師有時是反對風(fēng)格的，固定風(fēng)格的形成意味著自我的僵死，但風(fēng)格同時有是一個設(shè)計師性格、喜好、閱歷、修養(yǎng)的反映，也是設(shè)計師成熟的標(biāo)志，以為“了解大同，才能獨走邊緣”。⑨、制作 檢查項目包括：圖形、字體、內(nèi)文、色彩、編排、比例、出血等。要求：視覺的想象力和效果要賞心悅目，而更重要的是被受眾理解！3、網(wǎng)站設(shè)計的設(shè)計流程：①、網(wǎng)站設(shè)計流程一：確定風(fēng)格網(wǎng)站的風(fēng)格通過網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式可以概括出一個站點的個性:是粗獷豪放的，還是清新秀麗的;是溫文儒雅的，還是執(zhí)著熱情的;是活潑易變的，還是墨守成規(guī)的。在明確自己想給人以怎樣的印象后，要找出網(wǎng)站中最有特色的東西，就是最能體現(xiàn)網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點強(qiáng)化、宣傳。風(fēng)格的形成不是一次定位的，你可以在實踐中不斷強(qiáng)化、調(diào)整、改進(jìn)。②、網(wǎng)站設(shè)計流程二：搜集素材查找并收集有關(guān)的文字、圖片、聲音、影像等素材，并對所收集的素材進(jìn)行整理、處理。③、網(wǎng)站設(shè)計流程三：網(wǎng)站布局首頁頁面：首頁主題還體現(xiàn)在logo及網(wǎng)站標(biāo)題上。準(zhǔn)確概括的首頁主題可以很好幫助用戶選擇自己有確切需求的網(wǎng)站。首頁導(dǎo)航：網(wǎng)站導(dǎo)航可以看做是對網(wǎng)站內(nèi)容的分類把網(wǎng)站的內(nèi)容進(jìn)行細(xì)分方便用戶跟據(jù)個人需求選擇瀏覽相應(yīng)欄目頁面。首頁內(nèi)容：頁面的內(nèi)容布局需先對網(wǎng)站的用戶群體進(jìn)行需求分析把用戶關(guān)注最多的內(nèi)容放置在首頁的最重要位置。一般按照用戶的瀏覽方式頁面內(nèi)容布局按照內(nèi)容重要程度由左上到右下進(jìn)行布置。④、網(wǎng)站設(shè)計流程四：LOGO設(shè)計怎樣設(shè)計logo是許多網(wǎng)站設(shè)計師比較頭疼的事情，在設(shè)計之前要進(jìn)行基本的調(diào)研分析，也就是對該企業(yè)做全面的調(diào)查，然后就是要挖掘所需要的素材，最后就是進(jìn)行設(shè)計開發(fā)了，這也是最重要的一步，只有經(jīng)過反復(fù)的推敲修改，才能設(shè)計出令人滿意的標(biāo)志。⑤、網(wǎng)站設(shè)計流程五：導(dǎo)航設(shè)計在設(shè)計導(dǎo)航之前，要充分的分析用戶需要什么？從導(dǎo)航的有效性、實現(xiàn)度和利用率來設(shè)計導(dǎo)航。⑥、網(wǎng)站設(shè)計流程六：banner設(shè)計在設(shè)計banner之前，要和客戶溝通一下他們想在banner上突出什么重點，然后有針對的展現(xiàn)banner上的內(nèi)容。當(dāng)我們確定重點之后，banner的色彩搭配要明亮干凈要與整個頁面相協(xié)調(diào)。⑦、網(wǎng)站設(shè)計流程七：友情鏈接設(shè)計設(shè)計網(wǎng)站的友情鏈接要考慮一下網(wǎng)站優(yōu)化的問題，鏈接一定不能是滾動的，因為滾動的鏈接沒有人交換，最好是在底部一一列出來。四、注意事項視覺會給人帶來一連串的生理上的、心理上的、情感上的、行動上的反應(yīng)，設(shè)計是視覺經(jīng)驗的科學(xué)，他包括兩個方面，一個是不以人為而改變的即生理感受的人的基本反應(yīng)，另一個是隨即的或不確定因素構(gòu)成。如個人喜好，性格等等、等等。1、相對穩(wěn)定的方面：主要是生理上的視知覺，人們的一些視覺習(xí)慣、視覺流程、視覺邏輯，如從上到下，從左到右，喜歡連貫的、重復(fù)，喜歡有對比的，還有在顏色方面人們最喜歡的其實是有對比的互補色等等。這都是跟人們的生理上的習(xí)慣有關(guān)，都是人生理機(jī)能的本能反應(yīng)。作為設(shè)計師應(yīng)該對這些知識能充分了解、靈活運用，設(shè)計是對人本的關(guān)注，首先應(yīng)對文化與人的感知方式這些相對穩(wěn)定的方面進(jìn)行研究，并且需要我們在實踐中去總結(jié)。2、不穩(wěn)定的方面：不穩(wěn)定的方面主要是指情感、素質(zhì)、品位、閱歷上的不同，在設(shè)計過程中你需要具備一定的判斷和把握能力，你需要客觀和克制，才能完成卓越的設(shè)計。3、設(shè)計思維的科學(xué)：設(shè)計是必須具有科學(xué)的思維方法，能在相同中找到差別，能在不同當(dāng)中找到共同之處，能掌握運用各種思維方法，如縱向關(guān)聯(lián)思維和橫向關(guān)聯(lián)思維以及發(fā)散式的思維，善于運用科學(xué)的思維方式找到奇特的新的視覺形象，才能不斷發(fā)現(xiàn)新的可能。平面視覺的科學(xué)其實是一個很大很深的學(xué)問，只有在這門學(xué)問的健全和深入的推廣，才能保證設(shè)計水平的普遍提高。在這里只是拋磚引玉式的提出這一觀點，還需要日后結(jié)合其他學(xué)科的研究成果進(jìn)行系統(tǒng)的整理和論述。

首先需要對UI設(shè)計和網(wǎng)頁美工各自的職責(zé)范疇進(jìn)行解讀：UI設(shè)計：UI其實是用戶界面（User interface）的簡稱 ，而用戶界面是指人和機(jī)器互動過程中的界面。UI設(shè)計就是設(shè)計人機(jī)交互過程中所需的元素和步驟。以移動端的手機(jī)為例，手機(jī)上的界面都屬于用戶界面。用戶通過這個界面向手機(jī)發(fā)出指令，手機(jī)根據(jù)這些指令所產(chǎn)生相對應(yīng)的反饋。而設(shè)計這套界面視覺的人被稱呼為UI設(shè)計師。美工：一般是指對平面，色彩 ，基調(diào)，創(chuàng)意等進(jìn)行堆砌的技術(shù)人才，分為平面美工、網(wǎng)頁美工和三維美工。一般需要精通Photoshop等設(shè)計軟件。美工專業(yè)大部分因為電子商務(wù)的興起而發(fā)展的職業(yè)，主要負(fù)責(zé)公司形象包裝、網(wǎng)站優(yōu)化、產(chǎn)品宣傳畫冊、電子商務(wù)專題設(shè)計等工作。UI設(shè)計和美工的區(qū)別在于：1.美工，顧名思義，就是美化網(wǎng)站的外表。更深層次的就是突出網(wǎng)站本身的內(nèi)涵。而UI設(shè)計師這一職位的真正含義并非是美工（或者說絕不是僅僅做“美化”工作而已）。2.準(zhǔn)確的說UI設(shè)計師是指專門研究和設(shè)計產(chǎn)品的用戶使用界面，目的是在滿足功能的前提下通過圖形界面的合理設(shè)計使用戶更容易理解和操作，從而提高產(chǎn)品在用戶心目中的形象。3.兩三年前的網(wǎng)頁考慮的是界面的好看，所以做靜態(tài)界面的人都叫美工，基本上頁面的結(jié)構(gòu)都不用考慮了，都是固定的了，要做的就是客戶喜歡什么風(fēng)格把它做出來就行。而這兩年網(wǎng)頁要求交互性有效性越來越強(qiáng)，用戶體驗也受到了重視 ，在設(shè)計的要求設(shè)計師從用戶的使用角度去安排設(shè)計，這就是UI設(shè)計師。4.不容置疑，UI是IT的一部分，而且是一種只有在IT發(fā)展到一定程度才會出現(xiàn)的產(chǎn)物，IT的發(fā)展經(jīng)歷了從功能的實現(xiàn)到對美的追求到人性化；同時它也是美術(shù)的范疇，因為它是以審美為基礎(chǔ)去配合用戶動作的過程。所以，只能實現(xiàn)功能的IT產(chǎn)品已經(jīng)不能滿足用戶的需要求了，而只從美術(shù)的角度去考慮也會導(dǎo)致忽略用戶使用方面過程方便性。5.所以，總的來說UI和美工的區(qū)別在于UI主要關(guān)注的是用戶的操作體驗，而美工則是頁面效果，注重的頁面知識。

這個完全要看自己的基礎(chǔ)和愛好，如果是學(xué)美術(shù)或者設(shè)計出身當(dāng)然是學(xué)洗UI要好一些，但是如果是學(xué)習(xí)計算機(jī)或者編程出身就學(xué)習(xí)前端要好一些。首先說一下兩個崗位的聯(lián)系和區(qū)別現(xiàn)在網(wǎng)站前端工程師和美工是兩個完全不同的職位，兩者的工作內(nèi)容也是完全不同的。從2013年開始，一些的中小型的公司也開始將網(wǎng)站前端和美工分離，到目前，基本所有的專業(yè)的開發(fā)網(wǎng)站的公司都是設(shè)置了網(wǎng)站美工和網(wǎng)站前端兩職位，其工作內(nèi)容和職責(zé)是完全不同的。首先說一下開發(fā)一個網(wǎng)站的大致流程：客戶提出需求——>網(wǎng)站美工根據(jù)客戶的需求設(shè)計效果圖并得到客戶的認(rèn)可——>網(wǎng)站前端工程師使用前端代碼將效果圖做成靜態(tài)的網(wǎng)頁——>后臺開發(fā)人員填充后臺數(shù)據(jù)——>測試完成上線。根據(jù)以上的流程應(yīng)該可以知道美工和前端的工作分工是不同，現(xiàn)在兩者沒有任何交集只是團(tuán)隊合作，具體的職責(zé)和內(nèi)容如下：1、網(wǎng)站美工網(wǎng)站美工一般是學(xué)美術(shù)或者設(shè)計出身，精通photoshop、AI、AE等平面設(shè)計工具，其在網(wǎng)站開發(fā)過程的中的職責(zé)就是按照客戶或者公司的需求設(shè)計出符合客戶需求和界面或者顏色符合大眾視覺的網(wǎng)站效果，如根據(jù)不同行業(yè)的需求設(shè)計顏色、設(shè)計界面風(fēng)格等，其工作的最后成果就是網(wǎng)站的效果圖。2、網(wǎng)站前端工程師網(wǎng)站前端工程師不參與任何的設(shè)計，直接將網(wǎng)站美工制作的網(wǎng)站效果圖使用ps按照效果圖進(jìn)行切片并使用html、css、js等代碼進(jìn)行網(wǎng)頁的制作，最終編寫出符合w3c標(biāo)準(zhǔn)的兼容各個主流瀏覽器的靜態(tài)頁面，同時還需要按照后臺開發(fā)人員的要求留下一些后臺數(shù)據(jù)的接口。所以說網(wǎng)站前端工程師的是編程而不是設(shè)計。