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

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

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

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

一、溝通需求是先決條件

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

1、改變銷售路子

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

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

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

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

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

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

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

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

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

（7）前端代碼編寫（8）程序后臺對接

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

（11）正式上線交付（12）進入年維護期

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

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

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

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

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

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

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

1、PC電腦版

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

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

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

（2）各分辨率電腦的市場占有率

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

（4）建議

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

如必須使用到透明png格式圖片時，也盡量壓縮小一點。

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

2、WAP手機版

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

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

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

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

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

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

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

320dp：一個普通的手機屏幕（240X320，320×480，480X800）

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

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

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

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

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

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

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

對于移動端開發(fā)而言，為了做到頁面高清的效果，視覺稿的規(guī)范往往會遵循以下兩點：

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

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

問題：

對于dpr=2的手機，為什么畫布大小×2，就可以解決高清問題？

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

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

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

三、交互及特效注意

1、有據(jù)可查

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

2、ICON圖標(biāo)

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

四、字體規(guī)范

1、字體選擇

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

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

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

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

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

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

2、字體大小

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

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

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

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

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

分享標(biāo)題：網(wǎng)站定制設(shè)計網(wǎng)站效果圖的注意事項
網(wǎng)站鏈接：http://www.muchs.cn/news26/66476.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、動態(tài)網(wǎng)站、服務(wù)器托管、網(wǎng)站制作、云服務(wù)器、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)