網(wǎng)站定制設(shè)計(jì)網(wǎng)站效果圖的注意事項(xiàng)

原創(chuàng)設(shè)計(jì)型網(wǎng)站一般都需要出具網(wǎng)頁(yè)效果圖，一般網(wǎng)絡(luò)公司會(huì)在初期給到客戶首頁(yè)效果圖和方案。而對(duì)于網(wǎng)站設(shè)計(jì)的效果圖我們需要注意哪些今天馬氪軟件就為大家詳細(xì)總結(jié)一下。

 

一般常見(jiàn)的網(wǎng)頁(yè)都是居中類型，設(shè)置好主內(nèi)容的寬度然后居中就好。適合門戶網(wǎng)站、平臺(tái)類網(wǎng)站、內(nèi)容比較多信息量大的站點(diǎn)。

 

另外一種是布滿全屏的網(wǎng)頁(yè)，又分為自適應(yīng)和響應(yīng)式。常見(jiàn)的全屏的后臺(tái)界面就是自適應(yīng)的，國(guó)外常見(jiàn)這種形式，一般在一些流行的設(shè)計(jì)產(chǎn)品上，科技公司網(wǎng)站和一些高逼格的站點(diǎn)較為多見(jiàn)，很多企業(yè)也正逐步采用。

 

一、溝通需求是先決條件

 

試問(wèn)銷售人員連客戶做網(wǎng)站的基本需求都沒(méi)有了解清楚，就拍著胸脯說(shuō)：noproblem？客戶要做一個(gè)什么樣的網(wǎng)站，有無(wú)參考對(duì)象？預(yù)期做網(wǎng)站的工期是多久？網(wǎng)站以什么樣的形式展現(xiàn)（電腦版）

 

1、改變銷售路子

 

千萬(wàn)不要給客戶帶去一個(gè)這樣的印象：做銷售的都這樣！信心十足，風(fēng)風(fēng)火火急躁的。

 

所以，請(qǐng)改變銷售套路、溝通交流方式和思維模式。

 

前期溝通，我們的銷售人員主要需要了解清楚客戶的訴求，客戶實(shí)在表達(dá)不出來(lái)的話也沒(méi)關(guān)系，你可以給他找一些參考建議，如果需要原創(chuàng)設(shè)計(jì)，那再交由設(shè)計(jì)師討論。

 

2、明確網(wǎng)站制作的整個(gè)工作流程

 

（1）前期大致了解客戶需求

 

（2）參考建議、設(shè)計(jì)風(fēng)格探討

 

（3）合作洽談、合作確認(rèn)，確定制作版式數(shù)量（即修改版式的次數(shù)，你要說(shuō)無(wú)限次修改，那么設(shè)計(jì)師的大刀已經(jīng)提在路上了）

 

（4）提交設(shè)計(jì)圖（草圖—低保真）

 

（5）確認(rèn)修改（6）高清效果圖

 

（7）前端代碼編寫(xiě)（8）程序后臺(tái)對(duì)接

 

（9）測(cè)試版網(wǎng)站上線（10）最終修改完善

 

（11）正式上線交付（12）進(jìn)入年維護(hù)期

 

3、企業(yè)內(nèi)部管理難

 

難其實(shí)還是難在人員管理。為什么設(shè)計(jì)師對(duì)無(wú)數(shù)次改稿非常不爽？網(wǎng)站前端也改來(lái)改去，程序員對(duì)于網(wǎng)站結(jié)構(gòu)、功能修改嗤之以鼻？產(chǎn)品經(jīng)理把握品控?zé)o從下手？一切的源頭來(lái)自于需求溝通工作沒(méi)做好！

 

不要說(shuō)客戶都是這樣，我們不要借口，或者說(shuō)銷售人員沒(méi)有事先跟客戶溝通好需求?。ㄐ枨蟛幻鞔_，后期反復(fù)事多，這是肯定的！別怪我沒(méi)提醒哦）

 

溝通不及時(shí)或不到位，造成的時(shí)間成本、人力等成本是最容易被忽視的，畢竟這沒(méi)用money去標(biāo)注。

 

加急、趕稿、改稿仿佛是設(shè)計(jì)行業(yè)本身應(yīng)該有的現(xiàn)象，沒(méi)有都好像說(shuō)不過(guò)去一樣。

 

這怕是以后設(shè)計(jì)師也會(huì)讓老板要求加班費(fèi)趕稿費(fèi)吧，畢竟要做到大家心里不太過(guò)于不平衡才不失為好的管理哦。

 

二、網(wǎng)頁(yè)UI圖片尺寸規(guī)范

 

1、PC電腦版

 

大部分的企業(yè)網(wǎng)站大都從電腦版開(kāi)始，當(dāng)然停留在上個(gè)世紀(jì)的設(shè)計(jì)風(fēng)格網(wǎng)站我們今天就不去討論了。

 

（1）電腦網(wǎng)頁(yè)設(shè)計(jì)尺寸建議

 

現(xiàn)在寬屏電腦越來(lái)越普及，但是這并不代表了網(wǎng)頁(yè)設(shè)計(jì)時(shí)候不考慮“安全距離”！

 

（2）各分辨率電腦的市場(chǎng)占有率

 

（3）各個(gè)瀏覽器界面參數(shù)與份額

 

（4）建議

 

PSD導(dǎo)出切圖，盡量使用jpg格式，并且在保證圖像質(zhì)量的前提下盡量壓縮大小。

 

如必須使用到透明png格式圖片時(shí)，也盡量壓縮小一點(diǎn)。

 

經(jīng)常有客戶會(huì)問(wèn)怎么網(wǎng)站打開(kāi)速度不是那么快？那么請(qǐng)問(wèn)一張圖就幾個(gè)MB大小，一張網(wǎng)頁(yè)打開(kāi)的速度能快到哪兒去？此外也要考慮您使用的服務(wù)器配置了。

 

2、WAP手機(jī)版

 

當(dāng)下，手機(jī)版網(wǎng)站設(shè)計(jì)尺寸寬度可以按照750px來(lái)設(shè)計(jì)，而如果要自適應(yīng)則這工作就可以交給前端。

 

對(duì)于設(shè)計(jì)來(lái)說(shuō)，選一個(gè)合適的尺寸作為正常大小和中等屏幕密度（尺寸的選取依據(jù)打算適配的硬件，建議參考現(xiàn)主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸與密度。

 

（1）iPhone手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)尺寸

 

iPhone5尺寸是640x1136px分辨率是326PPI

 

iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI

 

iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

 

（2）安卓網(wǎng)頁(yè)的設(shè)計(jì)尺寸

 

320dp：一個(gè)普通的手機(jī)屏幕（240X320，320×480，480X800）

 

480dp：一個(gè)中間平板電腦像（480×800）

 

600dp：7寸平板電腦（600×1024）

 

720dp：10寸平板電腦（720×1280，800×1280）

 

（3）ipad網(wǎng)頁(yè)的設(shè)計(jì)尺寸

 

iPad第三代第四代尺寸是（2048x1536px）分辨率是264PPI

 

iPad第一代第二代尺寸是（1024x768px）分辨率是132PPI

 

iPadMini尺寸是（1024x768px）分辨率是163PPI

 

對(duì)于移動(dòng)端開(kāi)發(fā)而言，為了做到頁(yè)面高清的效果，視覺(jué)稿的規(guī)范往往會(huì)遵循以下兩點(diǎn)：

 

首先，選取一款手機(jī)的屏幕寬高作為基準(zhǔn)(以前是iphone4的320×480，現(xiàn)在更多的是iphone6的375×667)。

 

對(duì)于retina屏幕(如:dpr=2)，為了達(dá)到高清效果，視覺(jué)稿的畫(huà)布大小會(huì)是基準(zhǔn)的2倍，也就是說(shuō)像素點(diǎn)個(gè)數(shù)是原來(lái)的4倍（對(duì)iphone6而言：原先的375×667，就會(huì)變成750×1334）。

 

問(wèn)題：

 

對(duì)于dpr=2的手機(jī)，為什么畫(huà)布大小×2，就可以解決高清問(wèn)題？

 

對(duì)于2倍大小的視覺(jué)稿，在具體的css編碼中如何還原每一個(gè)區(qū)塊的真實(shí)寬高(也就是布局問(wèn)題)

 

3、響應(yīng)式網(wǎng)站

 

網(wǎng)頁(yè)中柵格化是很常見(jiàn)，也是很保險(xiǎn)的一種做法，良好的運(yùn)用柵格化是網(wǎng)頁(yè)設(shè)計(jì)中的一大利器，但是對(duì)于像小編這種對(duì)數(shù)字不是很敏感的設(shè)計(jì)師，算間距，算內(nèi)容大小，簡(jiǎn)直崩潰，每次都要算好多次浪費(fèi)時(shí)間。下面這款小工具就完美的解決了算數(shù)這一大問(wèn)題。從此對(duì)柵格化間距說(shuō)拜拜了！

 

三、交互及特效注意

 

1、有據(jù)可查

 

設(shè)計(jì)師最好標(biāo)注好需要技術(shù)人員注意到的交互、動(dòng)效，效果實(shí)現(xiàn)方式。并且有理可依：比方說(shuō)一個(gè)效果，你想這樣實(shí)現(xiàn)，那能不能提供給程序一個(gè)類似的例子，這樣就不會(huì)造成溝通或理解上的偏差。

 

2、ICON圖標(biāo)

 

在設(shè)計(jì)圖標(biāo)的時(shí)候可以做成字體圖標(biāo)或者svg矢量格式的，具體要和前端配合完成，一般遵循文字流式，控件彈性，圖片等比縮放這3大適配技巧。

 

四、字體規(guī)范

 

1、字體選擇

 

網(wǎng)頁(yè)中一般字體的使用常為宋體、微軟雅黑。不要使用較生的字體，防止用戶因沒(méi)有安裝對(duì)應(yīng)字體樣式造成顯示錯(cuò)誤。

 

要知道，windows系統(tǒng)也自帶了40多種英文字體樣式和5種中文字體樣式。這些字體的樣式，你也可以在網(wǎng)頁(yè)設(shè)計(jì)排版時(shí)自由使用和設(shè)置不同的字體樣式。

 

所以凡是使用了windows操作系統(tǒng)的瀏覽器都可以正確的顯示這些字體，但是在其它操作系統(tǒng)里也有顯示不正常的。

 

而如果設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站之初使用了其他字體（windows不自帶的），那么就需要使用到引用字體或直接導(dǎo)入到網(wǎng)站內(nèi)。

 

而如果某個(gè)字體文件20MB多（比程序員千辛萬(wàn)苦優(yōu)化代碼后的網(wǎng)站程序還大，這就純扯淡了），那簡(jiǎn)直是不敢想象的，而且網(wǎng)站內(nèi)加載字體服務(wù)器消耗也會(huì)占據(jù)，造成網(wǎng)站打開(kāi)速度慢。

 

引入字體對(duì)于英文來(lái)說(shuō)，是合適的，因?yàn)樽煮w文件本身不大，純英文網(wǎng)站可以考慮。但是對(duì)于中文字體來(lái)講，一個(gè)字體文件可能就好幾M，既耗費(fèi)流量，又拖慢了加載速度，還會(huì)出現(xiàn)加載后字體突然變化的情況，尤其是對(duì)于移動(dòng)端來(lái)講，非常不劃算。

 

2、字體大小

 

在CSS中，最常用的描述字體大小的單位有兩個(gè)，即em和px。通常認(rèn)為em為相對(duì)大小單位，而px為絕對(duì)大小單位。但從實(shí)際應(yīng)用中來(lái)講，px像素有時(shí)也像是一種相對(duì)大小單位。比如，在一塊15寸分辨率為800×600像素的屏幕上，10px大小的文字，要比一塊10寸分辨率1024×768像素的屏幕上的10px大小的文字顯得更大一些。px為像素單位，20px表示20個(gè)像素大小，在現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)中，常被用來(lái)表示字體大小，方便且直觀。

 

五、網(wǎng)站內(nèi)部圖片

 

很能理解設(shè)計(jì)師為了追求頁(yè)面效果，切圖有時(shí)候可能一張圖片就2MB左右。但是在一般企業(yè)網(wǎng)站內(nèi)，幾MB的圖片簡(jiǎn)直是瘋狂的。要知道，愿意支付高昂服務(wù)器的企業(yè)并不是非常多的。

 

其實(shí)我們可以這么理解，你就算電腦上打開(kāi)一張圖片，如果是配置低點(diǎn)的電腦打開(kāi)效率也不高吧，也得加載一會(huì)兒PS。網(wǎng)站里打開(kāi)圖片的效能其實(shí)一個(gè)道理。

 

磨刀不誤砍柴工，如果一定要追求圖片質(zhì)量和加載速度，就別吝嗇服務(wù)器配置吧。