八個走心網站設計讓你告別糟糕體驗
2018.11.02
wangzhanshejijishurixinyueyi，xianzaidongxiaowangyeshejiyijingchengweixiandaiwangyeyonghutiyandezhongyaozuchengbufen，buguanshiweimiaodezhuanchangdonghua，haishifugaizhenggeyemian，donghuaxiaoguowuchubuzai，rongrudongxiaodejiaohuxijierangxiandaiwangyeyuyiwangdequbiekailai。
CSS和HTML的成熟使設計師變得越來越富有創意，CSS動dong畫hua使shi他ta們men的de網wang站zhan更geng加jia個ge性xing，可ke以yi快kuai速su，輕qing鬆song地di解jie釋shi複fu雜za的de想xiang法fa，並bing指zhi導dao用yong戶hu的de行xing動dong。對dui於yu用yong戶hu而er言yan，動dong畫hua效xiao果guo讓rang網wang頁ye中zhong元yuan素su的de邏luo輯ji變bian化hua更geng加jia清qing晰xi，個ge性xing化hua的de視shi覺jiao效xiao果guo為wei用yong戶hu帶dai來lai的de愉yu悅yue感gan受shou更geng有you助zhu於yu用yong戶hu留liu存cun、增加轉化。
1、Your Plan, Your Planet
Your Plan, Your Planet是由荷蘭MediaMonks公司製作的關於可持續未來規劃的動效網頁作品。首頁導航設計以水、食物、能neng量liang等deng生sheng活huo元yuan素su為wei主zhu，鼠shu標biao滑hua動dong選xuan擇ze不bu同tong的de元yuan素su的de設she計ji技ji巧qiao與yu懸xuan停ting動dong效xiao的de結jie合he，讓rang整zheng個ge頁ye麵mian設she計ji非fei常chang富fu有you創chuang意yi和he設she計ji感gan。等deng距ju插cha圖tu的de運yun用yong讓rang打da造zao可ke持chi續xu未wei來lai的de規gui劃hua變bian得de生sheng動dong有you趣qu。同tong時shi，我wo們men也ye可ke以yi看kan到dao材cai料liao設she計ji更geng有you趣qu的de方fang麵mian。
每個生活元素的動畫效果設計和UXwenandoufeichangfuyougushixingheyindaoxing，heyonghudemeiyicihudongdouhuichanshengbutongdejieguo，meiyibucaozuodouzaichuanbohuanbaohekechixufazhandelinian，shiyigeyujiaoyulededonghuawangyesheji。
2. Species in Pieces
這是一個基於CSS的交互式動效網頁設計，它使用僅三角形片段展示30個世界上最有趣但不幸瀕臨滅絕的物種-tamenyisuipianhuadexingshixingcunyuwenzi。suoyoudesanjiaosuipianzaimeiciguodudonghuazhongzhuanbianchengbutongdeyanse，zuchengbutongdewuzhong。meigedongwudoupeiyouyigetongjitubiaoyizhiguandefangshizhanshiletamendejinhuashiyijizhunianruijiandewuzhongshuliang。shejishitongguoJavaScript和CSS將所有的過渡動作和SVG形狀聯係起來，製作成這樣一個宣傳物種保護的網站，希望能為這些物種生存做出自己的努力，也引發人類的思考。
3. New Tactics - Sneak Peak
這個案例中運用到HTML5 動(dong)畫(hua)設(she)計(ji)。微(wei)妙(miao)的(de)漸(jian)變(bian)色(se)網(wang)頁(ye)設(she)計(ji)在(zai)純(chun)色(se)背(bei)景(jing)中(zhong)運(yun)用(yong)的(de)恰(qia)到(dao)好(hao)處(chu)。顯(xian)連(lian)線(xian)的(de)漸(jian)變(bian)設(she)計(ji)和(he)實(shi)時(shi)交(jiao)互(hu)設(she)計(ji)讓(rang)深(shen)色(se)背(bei)景(jing)的(de)網(wang)頁(ye)更(geng)有(you)活(huo)力(li)。頁(ye)麵(mian)中(zhong)的(de)信(xin)息(xi)圖(tu)標(biao)可(ke)切(qie)換(huan)到(dao)不(bu)同(tong)的(de)模(mo)式(shi)對(dui)數(shu)據(ju)進(jin)行(xing)展(zhan)開(kai)和(he)縮(suo)放(fang)效(xiao)果(guo)展(zhan)示(shi)。那(na)麼(me)，初(chu)見(jian)這(zhe)個(ge)頁(ye)麵(mian)的(de)時(shi)候(hou)，你(ni)可(ke)能(neng)會(hui)問(wen)自(zi)己(ji)“我在看什麼？”。
實(shi)際(ji)上(shang)這(zhe)是(shi)兩(liang)個(ge)版(ban)本(ben)的(de)戰(zhan)術(shu)地(di)圖(tu)，旨(zhi)在(zai)幫(bang)助(zhu)解(jie)決(jue)侵(qin)犯(fan)人(ren)權(quan)的(de)問(wen)題(ti)。第(di)一(yi)個(ge)視(shi)圖(tu)是(shi)問(wen)題(ti)的(de)地(di)形(xing)或(huo)整(zheng)體(ti)健(jian)康(kang)狀(zhuang)況(kuang)的(de)地(di)圖(tu)。第(di)二(er)個(ge)是(shi)連(lian)接(jie)視(shi)圖(tu)，它(ta)說(shuo)明(ming)了(le)與(yu)此(ci)違(wei)規(gui)行(xing)為(wei)和(he)地(di)圖(tu)上(shang)其(qi)他(ta)參(can)與(yu)者(zhe)相(xiang)關(guan)的(de)個(ge)人(ren)的(de)性(xing)質(zhi)和(he)影(ying)響(xiang)。在(zai)第(di)二(er)個(ge)視(shi)圖(tu)中(zhong)連(lian)接(jie)線(xian)條(tiao)的(de)顏(yan)色(se)和(he)動(dong)畫(hua)點(dian)表(biao)示(shi)這(zhe)些(xie)關(guan)係(xi)的(de)性(xing)質(zhi)以(yi)及(ji)權(quan)力(li)或(huo)影(ying)響(xiang)力(li)。
4. Miki Mottes
這(zhe)是(shi)一(yi)個(ge)非(fei)常(chang)有(you)意(yi)思(si)的(de)插(cha)畫(hua)風(feng)格(ge)的(de)作(zuo)品(pin)集(ji)動(dong)效(xiao)網(wang)頁(ye)設(she)計(ji)。當(dang)然(ran)，這(zhe)跟(gen)作(zuo)者(zhe)本(ben)人(ren)是(shi)插(cha)畫(hua)家(jia)，動(dong)畫(hua)師(shi)和(he)設(she)計(ji)師(shi)有(you)很(hen)大(da)的(de)關(guan)係(xi)。所(suo)以(yi)，這(zhe)個(ge)有(you)趣(qu)的(de)網(wang)站(zhan)是(shi)創(chuang)作(zuo)者(zhe)風(feng)格(ge)的(de)完(wan)美(mei)展(zhan)示(shi)。如(ru)果(guo)你(ni)想(xiang)學(xue)習(xi)通(tong)過(guo)添(tian)加(jia)一(yi)些(xie)局(ju)部(bu)動(dong)畫(hua)盤(pan)活(huo)整(zheng)個(ge)網(wang)頁(ye)的(de)設(she)計(ji)，這(zhe)就(jiu)是(shi)一(yi)個(ge)很(hen)好(hao)的(de)例(li)子(zi)。
出(chu)色(se)的(de)導(dao)航(hang)欄(lan)設(she)計(ji)也(ye)可(ke)以(yi)提(ti)供(gong)良(liang)好(hao)的(de)用(yong)戶(hu)體(ti)驗(yan)。懸(xuan)浮(fu)導(dao)航(hang)欄(lan)的(de)滾(gun)動(dong)效(xiao)果(guo)使(shi)用(yong)戶(hu)在(zai)訪(fang)問(wen)網(wang)站(zhan)的(de)時(shi)候(hou)邏(luo)輯(ji)更(geng)清(qing)晰(xi)，循(xun)序(xu)漸(jian)進(jin)。如(ru)果(guo)你(ni)有(you)時(shi)間(jian)仔(zai)細(xi)瀏(liu)覽(lan)網(wang)頁(ye)，細(xi)節(jie)動(dong)畫(hua)的(de)效(xiao)果(guo)也(ye)很(hen)有(you)趣(qu)。是(shi)個(ge)別(bie)具(ju)風(feng)格(ge)的(de)動(dong)效(xiao)網(wang)頁(ye)設(she)計(ji)作(zuo)品(pin)。
5. Genesis
如果隻看首頁設計，你可能認為Genesis僅僅隻是一副插畫作品，但卻很難將它與食物和餐廳聯係起來。其實，Genesisshiyigetichangsushi，zhuanzhuyukuaisuxiuxiancanyinheyoujishushishipindewangzhan。wangyeshejitesezhiyishishoudiantongguangbiao。suizheshubiaodehuadong，suodaoquyujiangyigaoliangxianshi。danyesheji、鼠標懸停微交互設計和滾動觸發動畫效果的結合使用，使得整個網站富有神秘色彩。使用戶感到好奇，也是一種吸引用戶的方式。
6. KIKK Festival
KIKKshiyigewenhuajiaoyuleidewangye，tongguoshubiaodeyidonglujingzhanshilansemengbanxiazhenshidewangyebeijingse。pentuxiaoguodeguangbiaoxiaoguohenyouchuangyi，wangyezhonghaitianjialeyixieyouqudeyoubiaoxiaoguohekeaidexiaochahua，yuyoudongdeshubiaochanshengqimiaodeweijiaohu。
7. Onedesigncompany
在(zai)網(wang)頁(ye)設(she)計(ji)中(zhong)使(shi)用(yong)動(dong)畫(hua)的(de)好(hao)處(chu)顯(xian)而(er)易(yi)見(jian)，使(shi)網(wang)頁(ye)更(geng)加(jia)生(sheng)動(dong)。但(dan)這(zhe)也(ye)使(shi)等(deng)待(dai)和(he)加(jia)載(zai)的(de)時(shi)間(jian)變(bian)長(chang)。那(na)麼(me)在(zai)等(deng)待(dai)過(guo)程(cheng)中(zhong)為(wei)進(jin)度(du)條(tiao)加(jia)上(shang)富(fu)有(you)創(chuang)意(yi)的(de)加(jia)載(zai)動(dong)畫(hua)會(hui)改(gai)變(bian)用(yong)戶(hu)對(dui)於(yu)時(shi)間(jian)的(de)感(gan)知(zhi)，通(tong)過(guo)轉(zhuan)移(yi)注(zhu)意(yi)力(li)的(de)方(fang)式(shi)讓(rang)用(yong)戶(hu)等(deng)待(dai)感(gan)降(jiang)低(di)。簡(jian)單(dan)的(de)加(jia)載(zai)動(dong)效(xiao)比(bi)複(fu)雜(za)的(de)更(geng)好(hao)。UX文案以敘述的方式推進微交互動畫展示，也是網頁設計中常用的一種動效展示方式。
8. Marie Morelle
這是一個插畫風格的作品集網站，極具法國特色的插畫與HTML5 動dong畫hua網wang頁ye設she計ji的de巧qiao妙miao結jie合he使shi網wang站zhan很hen有you吸xi引yin力li。右you側ce導dao航hang欄lan隨sui著zhe鼠shu標biao滾gun動dong切qie換huan頁ye麵mian，伴ban隨sui的de頁ye麵mian交jiao互hu在zai簡jian潔jie設she計ji的de背bei景jing下xia顯xian得de很hen有you設she計ji感gan。
