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

閱讀 ?·? 發(fā)布日期 2020-07-09 07:30 ?·? admin
網(wǎng)站定制設計網(wǎng)站效果圖的注意事項,原創(chuàng)設計型網(wǎng)站一般都需要出具網(wǎng)頁效果圖,一般網(wǎng)絡公司會在初期給到客戶首頁效果圖和方案。而對于網(wǎng)站設計的效果圖我們需要注意哪些今天馬氪軟件就為大家詳細總結(jié)一下。一般常見的網(wǎng)頁都是居中類型,設置好主內(nèi)容的寬度然后居中就好。適合門戶網(wǎng)站、平臺類網(wǎng)站、內(nèi)容比較多信息量大的站點。另外一種是布滿全屏的網(wǎng)頁,又分為自適應和響應式。常見的全屏的后臺界面就是自適應的,國外常見這種形式,一般在一些流行的設計產(chǎn)品上,科技公司網(wǎng)站和一些高逼格的站點較為多見,很多企業(yè)也正逐步采用。武漢網(wǎng)站建設網(wǎng)站設計武漢網(wǎng)站制作★網(wǎng)頁設計-599元全包;企業(yè)網(wǎng)絡推廣☆武漢網(wǎng)站優(yōu)化seo☆關鍵詞排名☆百度快照-2200元全年展示;做網(wǎng)站優(yōu)化排名-武漢網(wǎng)站建設公司?13172194676(注:選好網(wǎng)站模板,請聯(lián)系客服,百度云盤下載提取網(wǎng)站模板)m.89078p.com/wuhan/
 
 
一、溝通需求是先決條件
 
試問銷售人員連客戶做網(wǎng)站的基本需求都沒有了解清楚,就拍著胸脯說:noproblem?客戶要做一個什么樣的網(wǎng)站,有無參考對象?預期做網(wǎng)站的工期是多久?網(wǎng)站以什么樣的形式展現(xiàn)(電腦版)
 
1、改變銷售路子
 
千萬不要給客戶帶去一個這樣的印象:做銷售的都這樣!信心十足,風風火火急躁的。
 
所以,請改變銷售套路、溝通交流方式和思維模式。
 
前期溝通,我們的銷售人員主要需要了解清楚客戶的訴求,客戶實在表達不出來的話也沒關系,你可以給他找一些參考建議,如果需要原創(chuàng)設計,那再交由設計師討論。
 
2、明確網(wǎng)站制作的整個工作流程
 
(1)前期大致了解客戶需求
 
(2)參考建議、設計風格探討
 
(3)合作洽談、合作確認,確定制作版式數(shù)量(即修改版式的次數(shù),你要說無限次修改,那么設計師的大刀已經(jīng)提在路上了)
 
(4)提交設計圖(草圖—低保真)
 
(5)確認修改(6)高清效果圖
 
(7)前端代碼編寫(8)程序后臺對接
 
(9)測試版網(wǎng)站上線(10)最終修改完善
 
(11)正式上線交付(12)進入年維護期
 
3、企業(yè)內(nèi)部管理難
 
難其實還是難在人員管理。為什么設計師對無數(shù)次改稿非常不爽?網(wǎng)站前端也改來改去,程序員對于網(wǎng)站結(jié)構(gòu)、功能修改嗤之以鼻?產(chǎn)品經(jīng)理把握品控無從下手?一切的源頭來自于需求溝通工作沒做好!
 
不要說客戶都是這樣,我們不要借口,或者說銷售人員沒有事先跟客戶溝通好需求!(需求不明確,后期反復事多,這是肯定的!別怪我沒提醒哦)
 
溝通不及時或不到位,造成的時間成本、人力等成本是最容易被忽視的,畢竟這沒用money去標注。
 
加急、趕稿、改稿仿佛是設計行業(yè)本身應該有的現(xiàn)象,沒有都好像說不過去一樣。
 
這怕是以后設計師也會讓老板要求加班費趕稿費吧,畢竟要做到大家心里不太過于不平衡才不失為好的管理哦。
 
二、網(wǎng)頁UI圖片尺寸規(guī)范
 
1、PC電腦版
 
大部分的企業(yè)網(wǎng)站大都從電腦版開始,當然停留在上個世紀的設計風格網(wǎng)站我們今天就不去討論了。
 
(1)電腦網(wǎng)頁設計尺寸建議
 
現(xiàn)在寬屏電腦越來越普及,但是這并不代表了網(wǎng)頁設計時候不考慮“安全距離”!
 
(2)各分辨率電腦的市場占有率
 
(3)各個瀏覽器界面參數(shù)與份額
 
(4)建議
 
PSD導出切圖,盡量使用jpg格式,并且在保證圖像質(zhì)量的前提下盡量壓縮大小。
 
如必須使用到透明png格式圖片時,也盡量壓縮小一點。
 
經(jīng)常有客戶會問怎么網(wǎng)站打開速度不是那么快?那么請問一張圖就幾個MB大小,一張網(wǎng)頁打開的速度能快到哪兒去?此外也要考慮您使用的服務器配置了。
 
2、WAP手機版
 
當下,手機版網(wǎng)站設計尺寸寬度可以按照750px來設計,而如果要自適應則這工作就可以交給前端。
 
對于設計來說,選一個合適的尺寸作為正常大小和中等屏幕密度(尺寸的選取依據(jù)打算適配的硬件,建議參考現(xiàn)主流硬件分辨率),然后向下和向上做小、大、特大和低、高、超高的尺寸與密度。
 
(1)iPhone手機網(wǎng)頁的設計尺寸
 
iPhone5尺寸是640x1136px分辨率是326PPI
 
iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI
 
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI
 
(2)安卓網(wǎng)頁的設計尺寸
 
320dp:一個普通的手機屏幕(240X320,320×480,480X800)
 
480dp:一個中間平板電腦像(480×800)
 
600dp:7寸平板電腦(600×1024)
 
720dp:10寸平板電腦(720×1280,800×1280)
 
(3)ipad網(wǎng)頁的設計尺寸
 
iPad第三代第四代尺寸是(2048x1536px)分辨率是264PPI
 
iPad第一代第二代尺寸是(1024x768px)分辨率是132PPI
 
iPadMini尺寸是(1024x768px)分辨率是163PPI
 
對于移動端開發(fā)而言,為了做到頁面高清的效果,視覺稿的規(guī)范往往會遵循以下兩點:
 
首先,選取一款手機的屏幕寬高作為基準(以前是iphone4的320×480,現(xiàn)在更多的是iphone6的375×667)。
 
對于retina屏幕(如:dpr=2),為了達到高清效果,視覺稿的畫布大小會是基準的2倍,也就是說像素點個數(shù)是原來的4倍(對iphone6而言:原先的375×667,就會變成750×1334)。
 
問題:
 
對于dpr=2的手機,為什么畫布大小×2,就可以解決高清問題?
 
對于2倍大小的視覺稿,在具體的css編碼中如何還原每一個區(qū)塊的真實寬高(也就是布局問題)
 
3、響應式網(wǎng)站
 
網(wǎng)頁中柵格化是很常見,也是很保險的一種做法,良好的運用柵格化是網(wǎng)頁設計中的一大利器,但是對于像小編這種對數(shù)字不是很敏感的設計師,算間距,算內(nèi)容大小,簡直崩潰,每次都要算好多次浪費時間。下面這款小工具就完美的解決了算數(shù)這一大問題。從此對柵格化間距說拜拜了!
 
三、交互及特效注意
 
1、有據(jù)可查
 
設計師最好標注好需要技術人員注意到的交互、動效,效果實現(xiàn)方式。并且有理可依:比方說一個效果,你想這樣實現(xiàn),那能不能提供給程序一個類似的例子,這樣就不會造成溝通或理解上的偏差。
 
2、ICON圖標
 
在設計圖標的時候可以做成字體圖標或者svg矢量格式的,具體要和前端配合完成,一般遵循文字流式,控件彈性,圖片等比縮放這3大適配技巧。
 
四、字體規(guī)范
 
1、字體選擇
 
網(wǎng)頁中一般字體的使用常為宋體、微軟雅黑。不要使用較生的字體,防止用戶因沒有安裝對應字體樣式造成顯示錯誤。
 
要知道,windows系統(tǒng)也自帶了40多種英文字體樣式和5種中文字體樣式。這些字體的樣式,你也可以在網(wǎng)頁設計排版時自由使用和設置不同的字體樣式。
 
所以凡是使用了windows操作系統(tǒng)的瀏覽器都可以正確的顯示這些字體,但是在其它操作系統(tǒng)里也有顯示不正常的。
 
而如果設計師在設計網(wǎng)站之初使用了其他字體(windows不自帶的),那么就需要使用到引用字體或直接導入到網(wǎng)站內(nèi)。
 
而如果某個字體文件20MB多(比程序員千辛萬苦優(yōu)化代碼后的網(wǎng)站程序還大,這就純扯淡了),那簡直是不敢想象的,而且網(wǎng)站內(nèi)加載字體服務器消耗也會占據(jù),造成網(wǎng)站打開速度慢。
 
引入字體對于英文來說,是合適的,因為字體文件本身不大,純英文網(wǎng)站可以考慮。但是對于中文字體來講,一個字體文件可能就好幾M,既耗費流量,又拖慢了加載速度,還會出現(xiàn)加載后字體突然變化的情況,尤其是對于移動端來講,非常不劃算。
 
2、字體大小
 
在CSS中,最常用的描述字體大小的單位有兩個,即em和px。通常認為em為相對大小單位,而px為絕對大小單位。但從實際應用中來講,px像素有時也像是一種相對大小單位。比如,在一塊15寸分辨率為800×600像素的屏幕上,10px大小的文字,要比一塊10寸分辨率1024×768像素的屏幕上的10px大小的文字顯得更大一些。px為像素單位,20px表示20個像素大小,在現(xiàn)在的網(wǎng)頁設計中,常被用來表示字體大小,方便且直觀。
 
五、網(wǎng)站內(nèi)部圖片
 
很能理解設計師為了追求頁面效果,切圖有時候可能一張圖片就2MB左右。但是在一般企業(yè)網(wǎng)站內(nèi),幾MB的圖片簡直是瘋狂的。要知道,愿意支付高昂服務器的企業(yè)并不是非常多的。
 
其實我們可以這么理解,你就算電腦上打開一張圖片,如果是配置低點的電腦打開效率也不高吧,也得加載一會兒PS。網(wǎng)站里打開圖片的效能其實一個道理。
 
磨刀不誤砍柴工,如果一定要追求圖片質(zhì)量和加載速度,就別吝嗇服務器配置吧。