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

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

       響(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)。

        一、考慮高寬比

       PCduandetupianliulantiyanheyidongduandetupianliulantiyanshiwanquanbutongde
，duiyujuedaduoshudewangzhaneryan
，tupianzhanshideweizhidouhenxiangjin
，datongxiaoyi。ershejishiderenwu
，shiyaoquebaowangzhansuizhepingmuheshebeibianhuadeshihou，tupiandezhanshibuhuizaiyemianbujushensuobianhuaguochengzhongbiandeqiguaihetianzhen。zhegeshihouyaoshizhonglaojitupiandegaokuanbi，bingqieshizhongkongzhigaokuanbibuhuigaibian。

       我們再回到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)。

        二、尺寸和比例的一致性

        xiangyingshishejijiubunengbushuoduandian。weilezhaogubutongdepingmu，womenxuyaojiangtupiancaijianchengbutongbilibutongchicundedaxiao

，erzheyezhijieyingxiangzhezhenggeshejiyukaifaliucheng。xuduorenjinjinzhishijiangtupianshangchuandaoCMS係統中，就希望他能以完美的樣式呈現出來。

        每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)。

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

        chucizhiqi，haixuyaozhuyizaishenmeyangdechangheshiyongshenmeyangdekongjian，ruguoniyongyouruogangaopinzhidetupianhuozhexuyaotuijiantedingdewenzhanghuozhuanti
，name，nixuyaoshiyonghuandengpianlunbotukongjian。ruguoniyongyoudaliangdedaizhanshitupian，keyisuoxiaozhanshiyebuyingxiangkeduxingwentidehua，bufangshiyongtukuleidekongjianlaizhanshi。

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

        雖然圖片說明能讓你的圖片信息更加豐富，但是它會非常直接的影響到網頁的運作。圖片的說明屬性假如之後，確實能在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。