何德何能！老板讓做套中國(guó)風(fēng)網(wǎng)頁(yè)設(shè)計(jì)，我表示無(wú)從下手？（第一期）

時(shí)間：2023-10-15 13:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-15 13:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

何德何能！老板讓做套中國(guó)風(fēng)網(wǎng)頁(yè)設(shè)計(jì)，我表示無(wú)從下手？（第一期）：

這幾年間，不知大家有沒(méi)有留意到，目前我們已經(jīng)開(kāi)了作品集鑒賞學(xué)習(xí)專(zhuān)欄、電商詳情頁(yè)設(shè)計(jì)專(zhuān)欄、UI進(jìn)階干貨專(zhuān)欄、設(shè)計(jì)神器導(dǎo)航專(zhuān)欄、設(shè)計(jì)師職場(chǎng)那些事專(zhuān)欄、設(shè)計(jì)素材教程六大系列文章專(zhuān)欄了。這次打算再開(kāi)一個(gè)WUI網(wǎng)頁(yè)設(shè)計(jì)鑒賞學(xué)習(xí)專(zhuān)欄，為什么去開(kāi)這個(gè)？因?yàn)橛袝r(shí)遇到一些小伙伴私聊問(wèn)有沒(méi)有科技類(lèi)網(wǎng)頁(yè)參考，有沒(méi)有電商的、個(gè)人的...或是一些版式比較好的網(wǎng)頁(yè)學(xué)習(xí)下...當(dāng)這種問(wèn)的多了發(fā)現(xiàn)很多人都是重復(fù)問(wèn)一個(gè)方向，為了方便大家去找尋自己要找的頁(yè)面參考，從今天起良心哥打算將這種網(wǎng)頁(yè)設(shè)計(jì)做成系列文章推薦，方便大家去翻閱學(xué)習(xí)，除了頁(yè)面鑒賞外，我們也可看看別人對(duì)網(wǎng)頁(yè)界面交互是如何布局和優(yōu)化的，也是為了方便大家日常工作中找尋參考，以上就是開(kāi)這個(gè)系列專(zhuān)欄的目的和意義所在！




本期為第一期，將帶大家一起去看看比較優(yōu)秀的傳統(tǒng)文化方面的網(wǎng)頁(yè)界面，這些網(wǎng)站有的是做傳統(tǒng)方面東西，有的則是與傳統(tǒng)文化半點(diǎn)關(guān)系都不沾卻用的偏古風(fēng)的方式進(jìn)行處理，讓我們?nèi)タ悼邓麄冏龀墒裁礃?，今后遇到老板古風(fēng)要求了就知道怎么處理了↓

鈴蟲(chóng)寺

第一個(gè)給大家推薦一家名為“鈴蟲(chóng)寺”(又名華嚴(yán)寺)的傳統(tǒng)寺廟網(wǎng)站，據(jù)悉寺內(nèi)有數(shù)萬(wàn)只鈴蟲(chóng)常年四季長(zhǎng)鳴，是一個(gè)邊品茗享用茶點(diǎn),邊靜聽(tīng)法會(huì)開(kāi)講的地方，開(kāi)山已有三百年，由華嚴(yán)宗的學(xué)僧鳳潭上人在享保8年開(kāi)創(chuàng)。




該站的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格整體偏中式古風(fēng)，因?yàn)榫W(wǎng)站展示的是傳統(tǒng)文化里面的東西，因此這個(gè)風(fēng)格也算是“門(mén)當(dāng)戶(hù)對(duì)”，網(wǎng)站整體看完后發(fā)現(xiàn)頁(yè)面用了大量的留白來(lái)加強(qiáng)空間感，加強(qiáng)意境，而且文字排版也有板有眼很有章法，多以豎排布局為主，顯然設(shè)計(jì)師是對(duì)傳統(tǒng)文化有很深的研究，在文字和一些圖片的搭配下顯得整個(gè)網(wǎng)站清新脫俗，一個(gè)傳統(tǒng)網(wǎng)站做的很上檔次！








我們先來(lái)一組頁(yè)面養(yǎng)養(yǎng)眼↓







在版式上，首屏的文字排版都為右上角和左下角固定展示，此種布局形式有點(diǎn)類(lèi)似書(shū)法和國(guó)畫(huà)里面的落款形式，這樣放顯得頁(yè)面在視覺(jué)上格外均衡、對(duì)稱(chēng)、平穩(wěn)，俗稱(chēng)“立得住”







導(dǎo)航都采用了左側(cè)側(cè)滑導(dǎo)航，點(diǎn)擊后從左至右展開(kāi)







頁(yè)面loading加載方式則采用了“三百年”這個(gè)書(shū)法文字，從描邊到填充的一個(gè)過(guò)渡變化，看著還是挺有意思







該頁(yè)面的鼠標(biāo)交互效果做了自上而下豎排展示




界面很多左右結(jié)構(gòu)布局，為強(qiáng)化意境增加了很多留白







同時(shí)優(yōu)質(zhì)網(wǎng)站必不可少的構(gòu)成元素：高清配圖

學(xué)習(xí)網(wǎng)站↓

https://300th.suzutera.or.jp/

養(yǎng)老ミート·株式會(huì)社

第二個(gè)推薦給大家的是一個(gè)日本牛肉制品方面的品牌網(wǎng)站，記得初次打開(kāi)時(shí)就被他強(qiáng)大的視覺(jué)沖擊所感染，開(kāi)屏采用了一個(gè)類(lèi)似山水畫(huà)潑墨的感覺(jué)淡入動(dòng)效，當(dāng)他不完全顯示出來(lái)時(shí)你會(huì)以為是那個(gè)作家的寫(xiě)意國(guó)畫(huà)，等完全展現(xiàn)出來(lái)時(shí)原來(lái)是一個(gè)大黑牛！







首屏界面版式參考







列表界面版式布局







其他頁(yè)面版式布局




以及他的其他商品網(wǎng)站都是以這種風(fēng)格展示

不得不說(shuō)這些頁(yè)面插畫(huà)、配色都很賞心悅目







談?wù)劺锩娼换?dòng)效和一些小細(xì)節(jié)

1、鼠標(biāo)采用了小圓點(diǎn)追隨，增強(qiáng)了頁(yè)面趣味性和精致感







2、頁(yè)面導(dǎo)航多為豎型展示，符合傳統(tǒng)頁(yè)面版式風(fēng)格







3、一些圖文介紹方面，圖片做了隱藏，鼠標(biāo)經(jīng)過(guò)標(biāo)題時(shí)展示相應(yīng)配圖，圖片的動(dòng)效有用一種看起來(lái)如同液體扭曲的效果，看著很有趣味性。










4、下面這個(gè)交互和我們常見(jiàn)的還有意識(shí)思維里面的不太一樣，我們常見(jiàn)的頂多就是鼠標(biāo)經(jīng)過(guò)哪個(gè)則對(duì)應(yīng)圖片在相對(duì)位置變化，這個(gè)則有點(diǎn)反常，鼠標(biāo)經(jīng)過(guò)整個(gè)區(qū)域全部為當(dāng)前圖片。







5、話(huà)說(shuō)這個(gè)牛肉部位分解圖太牛逼了，點(diǎn)擊相應(yīng)部位出現(xiàn)相對(duì)文字介紹，而且仔細(xì)觀察你會(huì)發(fā)現(xiàn)每個(gè)牛肉塊的肌肉亮度顯示不一樣，這種效果應(yīng)該是用SVG切圖拼合的吧？







6、返回頂部有點(diǎn)像個(gè)小葫蘆造型，看著甚是可愛(ài)







7、界面背景用的最多的一種為山水畫(huà)圖，在頁(yè)面處理上面可以看到很多如同宣紙顆粒的效果，增強(qiáng)頁(yè)面質(zhì)感和傳統(tǒng)風(fēng)格，







8、一個(gè)好的頁(yè)面除了便于操作的交互布局還有文案外，產(chǎn)品圖質(zhì)量的好壞也直接影響證整體頁(yè)面的質(zhì)量，該站的圖片都非常高清、很有質(zhì)（肉）感







9、下面這個(gè)算是產(chǎn)品顯示頁(yè)面，可以看出排列非常整體，就連里面的牛肉商品都感覺(jué)是在視覺(jué)上面大小、重量一樣，產(chǎn)生一種均衡感，讓人賞心悅目，因此可見(jiàn)一款優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)不僅僅是體現(xiàn)在大首屏上面，只有每個(gè)部位都得“斤斤計(jì)較”才能從整體提升用戶(hù)體驗(yàn)！

學(xué)習(xí)網(wǎng)站↓

https://www.yoro-meat.co.jp/







小結(jié)

以上就是今天帶大家學(xué)習(xí)的兩款優(yōu)秀傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)，各位看完感覺(jué)怎么樣？是不是有點(diǎn)驚艷？還有點(diǎn)意猶未盡？良心哥這里只是拋磚引玉，更多優(yōu)秀網(wǎng)站希望大家?guī)е鴮W(xué)習(xí)的心態(tài)去多翻翻看看，傳統(tǒng)行業(yè)很多，但是傳統(tǒng)行業(yè)不好去設(shè)計(jì)，這不僅你需要有對(duì)這個(gè)領(lǐng)域有深入的研究，還得了解傳統(tǒng)文化的章法，不然做出來(lái)東西會(huì)顯得有點(diǎn)不倫不類(lèi)，猛地一看感覺(jué)還行，但是經(jīng)不起推敲，好了，本期問(wèn)我們網(wǎng)頁(yè)設(shè)計(jì)系列文章第一期，相信后面的時(shí)間里我們的專(zhuān)欄會(huì)越來(lái)越完善，帶大家看更多的優(yōu)秀作品，一起學(xué)起來(lái)~