沃(wo)(wo)爾(er)(er)(er)(er)頓(dun)鏈(lian)(lian)于 2018 年搭建、部(bu)署并上(shang)線(xian)了母鏈(lian)(lian),同時還(huan)研(yan)發、上(shang)線(xian)沃(wo)(wo)爾(er)(er)(er)(er)頓(dun)鏈(lian)(lian)的(de)(de)客戶(hu)端應用,沃(wo)(wo)爾(er)(er)(er)(er)頓(dun)鏈(lian)(lian)上(shang)的(de)(de)節點能相互交(jiao)換通證(zheng)并參與(yu)到主鏈(lian)(lian)的(de)(de)維護當(dang)中。沃(wo)(wo)爾(er)(er)(er)(er)頓(dun)鏈(lian)(lian)引(yin)領(ling)人類(lei)全面進(jin)入(ru)可(ke)信(xin)賴的(de)(de)數字化(hua)生(sheng)(sheng)活——沃(wo)(wo)爾(er)(er)(er)(er)頓(dun)鏈(lian)(lian) : 一個"物聯網(wang)(wang)+區塊鏈(lian)(lian)" 的(de)(de)價(jia)值物聯網(wang)(wang)生(sheng)(sheng)態。沃(wo)(wo)爾(er)(er)(er)(er)頓(dun)鏈(lian)(lian)公(gong)司希(xi)望利(li)用區塊鏈(lian)(lian)技術引(yin)領(ling)人們全面進(jin)入(ru)可(ke)信(xin)賴的(de)(de)數字化(hua)生(sheng)(sheng)活,從而實現信(xin)息(xi)時代物聯網(wang)(wang)數據和服務(wu)的(de)(de)共(gong)識(shi)、共(gong)治、共(gong)享、共(gong)聯。
配色還原品牌原本的氣質
凸(tu)顯(xian)科(ke)技感(gan)和(he)(he)數字感(gan),以electric indigo為基(ji)準,向上引(yin)入明(ming)亮(liang)的(de)bright turquoise色(se)(se)調,搭配出撞色(se)(se)設計效果(guo)。使得品牌時(shi)尚大方,接近年輕人的(de)富有的(de)精力充(chong)沛(pei)和(he)(he)創(chuang)意無限的(de)品牌氣質。在輔助色(se)(se)上,使用黑白配色(se)(se),凸(tu)顯(xian)科(ke)技感(gan)和(he)(he)穩重感(gan),同時(shi),營造(zao)整體感(gan)和(he)(he)帶入感(gan)。
凸顯鏈接.掌控品牌的力量
在(zai)確(que)認(ren)了配色之后,WP團隊精心設計了頁面里所需要(yao)的(de)任(ren)何(he)一(yi)個(ge)icon。第(di)(di)一(yi),在(zai)icon結構上,充(chong)分表現品(pin)牌(pai)產品(pin)的(de)屬性,即鏈接;第(di)(di)二,在(zai)配色上,充(chong)分使用對撞色,營(ying)造時(shi)尚氛圍和(he)超前的(de)科技感(gan)觀;第(di)(di)三,對于關鍵icons,使用svg animation進行(xing)動(dong)畫演繹,在(zai)交(jiao)互上,通過(guo)小動(dong)畫形式,充(chong)分展示品(pin)牌(pai)感(gan),傳(chuan)達品(pin)牌(pai)定位(wei),同時(shi)大幅增(zeng)加頁面靈動(dong)感(gan)。
如何進入網站更酷--頁面載入動畫
為(wei)了營造整體感,WP團(tuan)隊(dui)充分(fen)利用(yong)waltonchain品(pin)牌所(suo)給予的想象空間(jian),使(shi)用(yong)html5 canvas技(ji)術,為(wei)其(qi)打造了2款logo revealing,便于(yu)訪(fang)問者在(zai)等(deng)待加載的3~5秒內,能夠有(you)一(yi)種(zhong)賞心悅(yue)目的體驗(yan),以下是其(qi)中一(yi)版。WP團(tuan)隊(dui),充分(fen)利用(yong)了canvas性(xing)能空間(jian),使(shi)用(yong)particles、 blur、zoom-in 等(deng)方式(shi),在(zai)網頁中實現影視后(hou)期版的加載效果。
讓頁面靈動起來--通過svg動畫增加細節動感
svg的(de)好(hao)處(chu)在(zai)于它們的(de)矢量性(xing)質,無論動(dong)(dong)(dong)畫在(zai)什么樣的(de)設(she)備上(shang),都(dou)(dou)能(neng)夠(gou)清(qing)晰(xi)的(de)呈現出來。svg動(dong)(dong)(dong)畫完全通(tong)過代碼來書寫元素運動(dong)(dong)(dong)和動(dong)(dong)(dong)畫軌(gui)跡(ji)方(fang)式,使得(de)任何(he)一個svg動(dong)(dong)(dong)畫體積都(dou)(dou)非常小,而且兼容性(xing)極佳(jia)。WP團隊在(zai)waltonchain頁面(mian)中大量采用svg動(dong)(dong)(dong)畫,來說明和展(zhan)現waltonchain如何(he)在(zai)區塊(kuai)鏈(lian)技術(shu)技術(shu)進行突(tu)破。告別枯燥(zao)的(de)數據和數碼,通(tong)過動(dong)(dong)(dong)畫的(de)形式,引人入勝(sheng)。
3D引擎的應用--使用webgl技術增添光彩
網站(zhan)首頁整體采用豎排滾動講解方(fang)(fang)式(shi)(shi),告(gao)別傳統網站(zhan)的(de)展示方(fang)(fang)式(shi)(shi)。WP團隊為waltonchain引入了(le)html5前言技術(shu),即webgl技術(shu),在canvas中(zhong)繪制3d場景,以實現(xian)頁面(mian)的(de)縱(zong)深(shen)感和(he)動態感。配合內容(rong)的(de)講解和(he)酷炫(xuan)的(de)交互方(fang)(fang)式(shi)(shi),通過(guo)短(duan)短(duan)5屏(ping)內容(rong),將waltonchain的(de)業務進(jin)行全方(fang)(fang)位的(de)講解。在感官和(he)信(xin)息獲(huo)取上實現(xian)了(le)高度的(de)平(ping)衡。
頁面風格的延伸
從首頁(ye)到內(nei)(nei)頁(ye)的(de)延伸(shen)上,WP團(tuan)隊堅持品牌調性和風格(ge),統一視覺風格(ge)和交互(hu)語(yu)(yu)言。由于walton內(nei)(nei)頁(ye)內(nei)(nei)容較(jiao)為煩躁。故(gu)沒有(you)采用(yong)更多(duo)復雜的(de)交互(hu)動畫,轉而采用(yong)更加直接的(de)方(fang)式,用(yong)一種優雅(ya)的(de)設計語(yu)(yu)言進(jin)行(xing)簡約大(da)方(fang)的(de)展示。
如何把互聯網基因充分展現出來
waltonchain專注(zhu)于區塊鏈硬件(jian)和(he)軟件(jian)的(de)研發和(he)落地(di)。其本身具備的(de)是(shi)一種擁有(you)(you)很(hen)深互(hu)聯網烙印的(de)極客精神企(qi)業。團隊(dui)年(nian)輕、富有(you)(you)前瞻思維,在(zai)品宣上(shang),我們的(de)設計團隊(dui)充分把握這一點去放大和(he)表(biao)達。
不同語言版本看起來都很不錯
WP為(wei)waltonchain設(she)計和開發了4個(ge)文(wen)(wen)(wen)字版本,每個(ge)文(wen)(wen)(wen)字由于其(qi)字體(ti)結構不同,在設(she)計開發之初,我(wo)們花(hua)費(fei)了一部(bu)分精力,研究(jiu)如何使得改文(wen)(wen)(wen)字地(di)區的用戶能夠適應我(wo)們的語法和書(shu)寫規(gui)范。對(dui)于字號大(da)小、字體(ti)顏色、標題正文(wen)(wen)(wen)等(deng)對(dui)比(bi)關系的把握,WP在策劃之初,都全盤(pan)進(jin)行(xing)了考(kao)量。
多個設備都很出色
從pc到Mac到移動端(duan),各個(ge)設備我們都進行了精心的適配工作。保證(zheng)waltonchain在(zai)全(quan)球的用(yong)戶都能(neng)夠隨時隨地的愉悅的進行網站(zhan)訪問(wen)和(he)義務咨詢(xun)。
精心設計的菜單交互
相比于普通(tong)的(de)(de)展(zhan)現方(fang)(fang)式,WP團(tuan)隊經過研發,充分利用css3效果(guo),使(shi)得菜(cai)單(dan)也富有縱(zong)深感,我們希望通(tong)過這一些細節的(de)(de)設計(ji),讓(rang)訪(fang)問(wen)者能夠(gou)更加方(fang)(fang)便快捷并(bing)不(bu)失愉悅地訪(fang)問(wen)waltonchain,能夠(gou)從(cong)(cong)數字化(hua)的(de)(de)維度全方(fang)(fang)位的(de)(de)了解這個(ge)品牌(pai),從(cong)(cong)而促進品牌(pai)的(de)(de)扎(zha)根和傳(chuan)播。