設計分享：響應式網頁中的圖片設計技巧

設計分享：響應式網頁中的圖片設計技巧

       響(xiang)應(ying)式(shi)網(wang)頁(ye)設(she)計(ji)已(yi)經(jing)是(shi)如(ru)今(jin)當(dang)之(zhi)無(wu)愧(kui)的(de)標(biao)準(zhun)配(pei)置(zhi)了(le)，我(wo)們(men)需(xu)要(yao)響(xiang)應(ying)式(shi)的(de)技(ji)術(shu)來(lai)應(ying)對(dui)日(ri)漸(jian)碎(sui)片(pian)化(hua)的(de)屏(ping)幕(mu)尺(chi)寸(cun)。而(er)網(wang)頁(ye)中(zhong)的(de)圖(tu)片(pian)和(he)圖(tu)庫(ku)的(de)響(xiang)應(ying)式(shi)設(she)計(ji)，也(ye)是(shi)其(qi)中(zhong)的(de)重(zhong)點(dian)難(nan)點(dian)，他(ta)們(men)是(shi)網(wang)頁(ye)中(zhong)最(zui)常(chang)見(jian)，也(ye)是(shi)最(zui)直(zhi)觀(guan)可(ke)見(jian)的(de)元(yuan)素(su)。打(da)開(kai)一(yi)個(ge)漂(piao)亮(liang)精(jing)致(zhi)的(de)網(wang)站(zhan)

，然(ran)而(er)其(qi)中(zhong)的(de)圖(tu)片(pian)和(he)圖(tu)庫(ku)看(kan)起(qi)來(lai)怎(zen)麼(me)都(dou)和(he)頁(ye)麵(mian)不(bu)匹(pi)配(pei)，這(zhe)樣(yang)的(de)情(qing)況(kuang)恐(kong)怕(pa)是(shi)最(zui)讓(rang)人(ren)抓(zhua)狂(kuang)的(de)了(le)。

       如ru果guo要yao設she計ji好hao響xiang應ying式shi的de圖tu片pian和he圖tu庫ku，那na麼me接jie下xia來lai所suo聊liao到dao的de設she計ji技ji巧qiao
，或huo許xu能neng給gei你ni提ti供gong一yi個ge明ming確que而er係xi統tong的de思si路lu。它ta們men並bing不bu涉she及ji到dao具ju體ti代dai碼ma的de實shi現xian，更geng多duo牽qian涉she到dao設she計ji過guo程cheng和he處chu理li手shou法fa
，做zuo好hao了le這zhe些xie工gong作zuo，具ju體ti實shi現xian起qi來lai就jiu不bu難nan了le。

        一、考慮高寬比

       PC端duan的de圖tu片pian瀏liu覽lan體ti驗yan和he移yi動dong端duan的de圖tu片pian瀏liu覽lan體ti驗yan是shi完wan全quan不bu同tong的de

，對dui於yu絕jue大da多duo數shu的de網wang站zhan而er言yan，圖tu片pian展zhan示shi的de位wei置zhi都dou很hen相xiang近jin，大da同tong小xiao異yi。而er設she計ji師shi的de任ren務wu，是shi要yao確que保bao網wang站zhan隨sui著zhe屏ping幕mu和he設she備bei變bian化hua的de時shi候hou
，圖tu片pian的de展zhan示shi不bu會hui在zai頁ye麵mian布bu局ju伸shen縮suo變bian化hua過guo程cheng中zhong變bian得de奇qi怪guai和he天tian真zhen。這zhe個ge時shi候hou要yao始shi終zhong牢lao記ji圖tu片pian的de高gao寬kuan比bi，並bing且qie始shi終zhong控kong製zhi高gao寬kuan比bi不bu會hui改gai變bian。

       我們再回到PC端duan的de網wang頁ye中zhong，大da幅fu的de背bei景jing圖tu或huo者zhe置zhi於yu頁ye麵mian頂ding端duan的de圖tu片pian看kan起qi來lai非fei常chang漂piao亮liang，可ke是shi當dang它ta切qie換huan到dao移yi動dong端duan設she備bei中zhong的de時shi候hou，首shou先xian屏ping幕mu比bi例li和he方fang向xiang就jiu不bu同tong了le，那na麼me，他ta是shi否fou還hai那na麼me好hao看kan呢ne，圖tu片pian被bei縮suo小xiao之zhi後hou，信xin息xi的de呈cheng現xian是shi否fou會hui丟diu失shi？它ta是shi否fou會hui被bei拉la伸shen？這zhe個ge時shi候hou，圖tu片pian的de高gao寬kuan比bi就jiu顯xian得de特te別bie重zhong要yao了le。控kong製zhi原yuan始shi圖tu片pian不bu被bei拉la伸shen，同tong時shi讓rang圖tu片pian所suo展zhan示shi出chu來lai的de部bu分fen高gao寬kuan比bi能neng夠gou盡jin可ke能neng合he理li的de匹pi配pei對dui應ying的de屏ping幕mu，這zhe樣yang也ye就jiu不bu不bu擔dan心xin響xiang應ying式shi斷duan點dian過guo多duo，導dao致zhi你ni需xu要yao上shang傳chuan過guo多duo的de圖tu片pian。

        二

、尺寸和比例的一致性

        響(xiang)應(ying)式(shi)設(she)計(ji)就(jiu)不(bu)能(neng)不(bu)說(shuo)斷(duan)點(dian)。為(wei)了(le)照(zhao)顧(gu)不(bu)同(tong)的(de)屏(ping)幕(mu)
，我(wo)們(men)需(xu)要(yao)將(jiang)圖(tu)片(pian)裁(cai)剪(jian)成(cheng)不(bu)同(tong)比(bi)例(li)不(bu)同(tong)尺(chi)寸(cun)的(de)大(da)小(xiao)，而(er)這(zhe)也(ye)直(zhi)接(jie)影(ying)響(xiang)著(zhe)整(zheng)個(ge)設(she)計(ji)與(yu)開(kai)發(fa)流(liu)程(cheng)。許(xu)多(duo)人(ren)僅(jin)僅(jin)隻(zhi)是(shi)將(jiang)圖(tu)片(pian)上(shang)傳(chuan)到(dao)CMS係統中，就希望他能以完美的樣式呈現出來。

        每mei張zhang圖tu片pian都dou應ying當dang被bei裁cai剪jian為wei合he理li的de尺chi寸cun
，並bing且qie放fang置zhi在zai理li想xiang的de位wei置zhi上shang，確que保bao他ta們men會hui以yi用yong戶hu期qi望wang的de樣yang式shi呈cheng現xian出chu來lai
，後hou端duan可ke能neng會hui在zai這zhe件jian事shi情qing上shang花hua費fei相xiang當dang的de時shi間jian和he精jing力li。這zhe些xie努nu力li都dou是shi值zhi得de的de。

        三、使用輪播圖或者圖庫

        輪(lun)播(bo)圖(tu)控(kong)件(jian)或(huo)者(zhe)圖(tu)庫(ku)控(kong)件(jian)是(shi)網(wang)站(zhan)中(zhong)常(chang)見(jian)的(de)載(zai)體(ti)
，並(bing)且(qie)也(ye)可(ke)以(yi)更(geng)加(jia)自(zi)如(ru)的(de)管(guan)理(li)的(de)圖(tu)片(pian)。尤(you)其(qi)是(shi)當(dang)你(ni)使(shi)用(yong)了(le)哪(na)些(xie)比(bi)較(jiao)著(zhu)名(ming)的(de)或(huo)者(zhe)適(shi)配(pei)範(fan)圍(wei)比(bi)較(jiao)廣(guang)的(de)第(di)三(san)方(fang)控(kong)件(jian)的(de)時(shi)候(hou)
，控(kong)製(zhi)元(yuan)素(su)圖(tu)片(pian)的(de)粗(cu)活(huo)重(zhong)活(huo)基(ji)本(ben)上(shang)都(dou)會(hui)被(bei)這(zhe)些(xie)控(kong)件(jian)接(jie)手(shou)過(guo)去(qu)。

        不過我們之前提到的圖片長寬比和尺寸大小的控製同樣也是需要注意的，否則一樣會讓網頁的展示效果變尷尬。

        除(chu)此(ci)之(zhi)氣(qi)，還(hai)需(xu)要(yao)注(zhu)意(yi)在(zai)什(shen)麼(me)樣(yang)的(de)場(chang)合(he)使(shi)用(yong)什(shen)麼(me)樣(yang)的(de)控(kong)件(jian)，如(ru)果(guo)你(ni)擁(yong)有(you)若(ruo)幹(gan)高(gao)品(pin)質(zhi)的(de)圖(tu)片(pian)或(huo)者(zhe)需(xu)要(yao)推(tui)薦(jian)特(te)定(ding)的(de)文(wen)章(zhang)或(huo)專(zhuan)題(ti)，那(na)麼(me)，你(ni)需(xu)要(yao)使(shi)用(yong)幻(huan)燈(deng)片(pian)輪(lun)播(bo)圖(tu)控(kong)件(jian)。如(ru)果(guo)你(ni)擁(yong)有(you)大(da)量(liang)的(de)待(dai)展(zhan)示(shi)圖(tu)片(pian)
，可(ke)以(yi)縮(suo)小(xiao)展(zhan)示(shi)也(ye)不(bu)影(ying)響(xiang)可(ke)讀(du)性(xing)問(wen)題(ti)的(de)話(hua)
，不(bu)妨(fang)使(shi)用(yong)圖(tu)庫(ku)類(lei)的(de)控(kong)件(jian)來(lai)展(zhan)示(shi)。

        四、盡量避免使用圖片說明

        雖然圖片說明能讓你的圖片信息更加豐富，但是它會非常直接的影響到網頁的運作。圖片的說明屬性假如之後
，確實能在PC端擁有良好的渲染效果，但是在小屏幕上問題常常不斷，為了不讓這些細節的可用性的問題影響用戶體驗
，盡量避免使用就好了。

        五
、圖片和視頻混用要當心

        ruguowangzhanzhongtongshicunzaitupianheshipinleideduomeiti
，yonghuheshejizheyinggaidoushinenggoujieshoude，shenzhixuduoyonghuyijingxiguanlezheyangdesheji。danshiyaozhuyideshi，jishizaitongyigeyemianzhong，yejinliangbuyaorangtupianheshipintongshicunzaiyutongyigekongjianhuozhequkuaizhong。yexuzheyangkanqilaihenxuanku，yexuyibufentupianheshipinnenggoudaqilai，danshigengduodeshipinhetupianhennanzaichicunshangbaochiyizhi，daozhizonghuiyouyibufentupianhuozheshipinliuxiakongbaihejianxi。zuihaodefanganjiushijiangliangzhefenkaizhanshi，bimianlemeitishuxinghechicunshangdechayiyuchongtu。zhejihushiyongyurenheshejiyuansu，ertupianheshipinyoushen。

        六、削減不必要的元素

        一yi般ban情qing況kuang下xia，用yong戶hu其qi實shi是shi熟shu知zhi如ru何he同tong輪lun播bo圖tu這zhe類lei控kong件jian進jin行xing交jiao互hu的de。除chu非fei你ni的de設she計ji和he我wo們men的de認ren知zhi有you著zhe巨ju大da的de差cha異yi
，以yi至zhi於yu必bi須xu使shi用yong其qi他ta的de導dao航hang方fang式shi來lai引yin導dao用yong戶hu。盡jin量liang隻zhi保bao留liu用yong戶hu需xu要yao的de元yuan素su
，把ba事shi情qing簡jian單dan化hua
，不bu要yao給gei予yu太tai多duo的de選xuan擇ze。其qi實shi簡jian單dan化hua之zhi後hou的de設she計ji可ke以yi提ti升sheng你ni的de轉zhuan化hua率lv。

        七、隻使用高素質

       雖然這個道理不言自明
，但是它仍然必須反複提醒。如果你沒有高素質的圖片，那麼還不如幹脆不要用圖片得了。現在
，高素質、高gao分fen辨bian率lv的de圖tu片pian比bi以yi往wang任ren何he一yi個ge時shi代dai都dou顯xian得de必bi需xu和he重zhong要yao。用yong戶hu不bu會hui花hua費fei時shi間jian去qu看kan一yi個ge圖tu片pian素su質zhi低di下xia的de網wang站zhan。大da家jia的de屏ping幕mu都dou已yi經jing是shi視shi網wang膜mo屏ping幕mu了le，低di素su質zhi的de圖tu片pian在zai這zhe樣yang的de屏ping幕mu上shang顯xian得de更geng加jia無wu法fa直zhi視shi。既ji然ran大da家jia都dou在zai追zhui求qiu頂ding尖jian的de視shi覺jiao效xiao果guo，那na麼me高gao素su質zhi圖tu片pian無wu疑yi是shi必bi需xu品pin。

       總結

       dangnidewangzhanhaichuyuxiangkuangtuhuizhijieduandeshihou，zuihaojiangduozhongshebeidezhanshixiaoguodounarukaolvzhonglai，suiranzheyangkanqilaiyoudianmafan，danshihuiranghouqishengxinhenduo，congchangyuanlaikanshixiangdangzhidede。