舌尖上的餐飲網(wǎng)頁(yè)設(shè)計(jì)是如何煉成的?（第3期）

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

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

舌尖上的餐飲網(wǎng)頁(yè)設(shè)計(jì)是如何煉成的?（第3期）：




繼前兩期的網(wǎng)頁(yè)參考后，我們迎來(lái)了第三期網(wǎng)頁(yè)設(shè)計(jì)靈感，通過(guò)一些群友和粉絲私聊后得知：大家對(duì)餐飲領(lǐng)域的網(wǎng)頁(yè)作品呼聲較高，閑來(lái)之余，收集了4款不錯(cuò)的餐飲網(wǎng)站設(shè)計(jì)作品參考，來(lái)看看這方面的網(wǎng)頁(yè)該如何設(shè)計(jì)！說(shuō)到餐飲，你能想到什么？我想肯定是熱氣騰騰、熱辣辣、酸甜脆爽等等這些關(guān)鍵詞，我們經(jīng)常在餐飲設(shè)計(jì)里面看到很多都是暖色系，司空見(jiàn)慣了。要知道餐飲業(yè)要吸引吃貨，不只是在口碑上下功夫，有一個(gè)好看又好吃的網(wǎng)站能更好地加速品牌傳播。

餐飲網(wǎng)站的作用不僅僅是門(mén)面裝飾，更是用來(lái)傳達(dá)品牌調(diào)性和美食理念，不同的餐飲品類(lèi)會(huì)有不同的特色差異，這些差異也影響著網(wǎng)站的設(shè)計(jì)走向。簡(jiǎn)單舉個(gè)例子，一個(gè)素食餐廳，如果在網(wǎng)站上是采用那種“油膩”“肉感”的畫(huà)風(fēng)，這樣只會(huì)讓用戶感覺(jué)你不專(zhuān)業(yè)，沒(méi)有把握好美食的精髓。所以，餐飲網(wǎng)站設(shè)計(jì)必須是要匹配美食氣質(zhì)的。例如，日式料理講求食材新鮮，清淡，精致，健康，那么在網(wǎng)站設(shè)計(jì)上，可以走淡雅極簡(jiǎn)的路線，或者帶點(diǎn)小清新，展示食材的加工過(guò)程，突出自然新鮮的感覺(jué)。今天分享幾款網(wǎng)頁(yè)界面設(shè)計(jì)，和我們見(jiàn)到的餐飲類(lèi)官網(wǎng)有所不同，站在設(shè)計(jì)角度來(lái)說(shuō)，藝術(shù)觀賞性比較強(qiáng)，設(shè)計(jì)比較大膽，思維超前，一起來(lái)看看~

丸千千代田水產(chǎn)

魚(yú)生壽司海鮮類(lèi)網(wǎng)站




一個(gè)非常有趣的橫屏滑動(dòng)海鮮魚(yú)生類(lèi)網(wǎng)頁(yè)，在以往我們的認(rèn)知里面網(wǎng)頁(yè)滾動(dòng)都是從上到下預(yù)覽的，而這款網(wǎng)頁(yè)交互設(shè)計(jì)可能要顛覆你的認(rèn)知，它則是左到右進(jìn)行展示的。




在滾動(dòng)的同時(shí)頁(yè)面的一些元素進(jìn)行錯(cuò)落有致的出現(xiàn)

整體風(fēng)格以手繪插畫(huà)為主，色彩選用海洋藍(lán)為主色，導(dǎo)航為左側(cè)導(dǎo)航，排版布局很有章法考究。




靈感網(wǎng)站↓

http://www.marusen.co.jp/recruit/

魚(yú)生刺身料理

極簡(jiǎn)刺身料理網(wǎng)頁(yè)設(shè)計(jì)參考







一款日式料理網(wǎng)站，此網(wǎng)站設(shè)計(jì)中采用了大量的留白，以此讓界面看起來(lái)非常簡(jiǎn)潔干凈、高雅。除此之外，所有的配圖都非常高清，產(chǎn)品配色豐富多彩，在黑白色的襯托下顯得很搶吸眼球，主次關(guān)系處理的非常巧妙。





你會(huì)發(fā)現(xiàn)，該站中很多頁(yè)面和導(dǎo)航則采用了豎版排列方式，有點(diǎn)類(lèi)似我們傳統(tǒng)文化中的書(shū)寫(xiě)方式，這樣的排版一下子給頁(yè)面增添了不少文藝色彩，略顯精致！

靈感網(wǎng)站↓

http://www.kagaman.co.jp/










Wild Souls

少女心爆棚的網(wǎng)頁(yè)參考




第一次看到有人將果醬類(lèi)網(wǎng)頁(yè)做的色彩如此豐富，瞬間感覺(jué)滿滿的少女心爆棚，此款整個(gè)網(wǎng)頁(yè)里面比較喜歡他的版式和色彩搭配，我們先來(lái)看看這個(gè)帥氣的首頁(yè)↓




看到這里你會(huì)發(fā)現(xiàn)整個(gè)頁(yè)面非?？蓯?ài)，很多元素都是用手繪完成，色彩亮麗醒目，又不搶整體關(guān)系，設(shè)計(jì)體驗(yàn)挺棒的，其中有個(gè)交互細(xì)節(jié)和大家分享下，我們鼠標(biāo)移動(dòng)到可以點(diǎn)擊的地方時(shí)鼠標(biāo)則變成了一個(gè)小眼睛，被觸發(fā)的頁(yè)面會(huì)出現(xiàn)一點(diǎn)交互動(dòng)畫(huà)，提醒用戶已選定當(dāng)前狀態(tài)！




下面則是他們的線下店鋪，整個(gè)品牌設(shè)計(jì)風(fēng)格和配色裝修高度保持和官網(wǎng)一致




靈感網(wǎng)站↓

https://www.wildsouls.gr/

Chocolaphil

極簡(jiǎn)刺身料理網(wǎng)頁(yè)設(shè)計(jì)參考

最后再和大家分享一個(gè)糕點(diǎn)類(lèi)網(wǎng)站，說(shuō)實(shí)話，初次看到這種網(wǎng)站時(shí)感覺(jué)不像是做糕點(diǎn)的那種調(diào)性，因?yàn)槭醉?yè)看著很科技風(fēng)，有人肯定會(huì)誤以為是手機(jī)或者平板類(lèi)官網(wǎng)，滿屏飛的蛋糕會(huì)當(dāng)成裝飾品。





靈感網(wǎng)站↓

https://chocolaphil.com/

小 結(jié)

網(wǎng)頁(yè)設(shè)計(jì)參考學(xué)習(xí)系列文章已經(jīng)發(fā)了三期內(nèi)容了，后續(xù)還會(huì)延續(xù)下去，至于大家想找什么樣的都可在底部留言或者私信告知！





官宣！壹念視覺(jué)PC端官網(wǎng)上線啦！

中國(guó)風(fēng)網(wǎng)頁(yè)設(shè)計(jì)，表示無(wú)從下手？（第一期）

推薦給設(shè)計(jì)師看的個(gè)人&工作室網(wǎng)頁(yè)設(shè)計(jì)（第2期）