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

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

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

一、溝通需求是先決條件

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

1、改變銷售路子

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

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

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

2、明確網站制作的整個工作流程

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

（2）參考建議、設計風格探討

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

（4）提交設計圖（草圖—低保真）

（5）確認修改（6）高清效果圖

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

（9）測試版網站上線（10）最終修改完善

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

3、企業內部管理難

難其實還是難在人員管理。為什么設計師對無數次改稿非常不爽？網站前端也改來改去，程序員對于網站結構、功能修改嗤之以鼻？產品經理把握品控無從下手？一切的源頭來自于需求溝通工作沒做好！

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

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

加急、趕稿、改稿仿佛是設計行業本身應該有的現象，沒有都好像說不過去一樣。

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

二、網頁UI圖片尺寸規范

1、PC電腦版

大部分的企業網站大都從電腦版開始，當然停留在上個世紀的設計風格網站我們今天就不去討論了。

（1）電腦網頁設計尺寸建議

現在寬屏電腦越來越普及，但是這并不代表了網頁設計時候不考慮安全距離”！

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

（3）各個瀏覽器界面參數與份額

（4）建議

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

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

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

2、WAP手機版

當下，手機版網站設計尺寸寬度可以按照750px來設計，而如果要自適應則這工作就可以交給前端。

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

（1）iPhone手機網頁的設計尺寸

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

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

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

（2）安卓網頁的設計尺寸

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

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

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

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

（3）ipad網頁的設計尺寸

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

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

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

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

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

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

問題：

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

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

3、響應式網站

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

三、交互及特效注意

1、有據可查

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

2、ICON圖標

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

四、字體規范

1、字體選擇

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

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

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

而如果設計師在設計網站之初使用了其他字體（windows不自帶的），那么就需要使用到引用字體或直接導入到網站內。

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

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

2、字體大小

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

五、網站內部圖片

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

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

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

分享標題：網站定制設計網站效果圖的注意事項
網站鏈接：http://m.newbst.com/news26/66476.html

成都網站建設公司_創新互聯，為您提供網站設計公司、動態網站、服務器托管、網站制作、云服務器、網站營銷

廣告

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