何德何能！老板让做套中国风网页设计，我表示无从下手？（第一期）

时间：2023-10-15 13:54:01 | 来源：网站运营

时间：2023-10-15 13:54:01 来源：网站运营

何德何能！老板让做套中国风网页设计，我表示无从下手？（第一期）：

这几年间，不知大家有没有留意到，目前我们已经开了作品集鉴赏学习专栏、电商详情页设计专栏、UI进阶干货专栏、设计神器导航专栏、设计师职场那些事专栏、设计素材教程六大系列文章专栏了。这次打算再开一个WUI网页设计鉴赏学习专栏，为什么去开这个？因为有时遇到一些小伙伴私聊问有没有科技类网页参考，有没有电商的、个人的...或是一些版式比较好的网页学习下...当这种问的多了发现很多人都是重复问一个方向，为了方便大家去找寻自己要找的页面参考，从今天起良心哥打算将这种网页设计做成系列文章推荐，方便大家去翻阅学习，除了页面鉴赏外，我们也可看看别人对网页界面交互是如何布局和优化的，也是为了方便大家日常工作中找寻参考，以上就是开这个系列专栏的目的和意义所在！




本期为第一期，将带大家一起去看看比较优秀的传统文化方面的网页界面，这些网站有的是做传统方面东西，有的则是与传统文化半点关系都不沾却用的偏古风的方式进行处理，让我们去康康他们做成什么样，今后遇到老板古风要求了就知道怎么处理了↓

鈴虫寺

第一个给大家推荐一家名为“铃虫寺”(又名华严寺)的传统寺庙网站，据悉寺内有数万只铃虫常年四季长鸣，是一个边品茗享用茶点,边静听法会开讲的地方，开山已有三百年，由华严宗的学僧凤潭上人在享保8年开创。




该站的网页设计风格整体偏中式古风，因为网站展示的是传统文化里面的东西，因此这个风格也算是“门当户对”，网站整体看完后发现页面用了大量的留白来加强空间感，加强意境，而且文字排版也有板有眼很有章法，多以竖排布局为主，显然设计师是对传统文化有很深的研究，在文字和一些图片的搭配下显得整个网站清新脱俗，一个传统网站做的很上档次！








我们先来一组页面养养眼↓







在版式上，首屏的文字排版都为右上角和左下角固定展示，此种布局形式有点类似书法和国画里面的落款形式，这样放显得页面在视觉上格外均衡、对称、平稳，俗称“立得住”







导航都采用了左侧侧滑导航，点击后从左至右展开







页面loading加载方式则采用了“三百年”这个书法文字，从描边到填充的一个过渡变化，看着还是挺有意思







该页面的鼠标交互效果做了自上而下竖排展示




界面很多左右结构布局，为强化意境增加了很多留白







同时优质网站必不可少的构成元素：高清配图

学习网站↓

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

養老ミート·株式会社

第二个推荐给大家的是一个日本牛肉制品方面的品牌网站，记得初次打开时就被他强大的视觉冲击所感染，开屏采用了一个类似山水画泼墨的感觉淡入动效，当他不完全显示出来时你会以为是那个作家的写意国画，等完全展现出来时原来是一个大黑牛！







首屏界面版式参考







列表界面版式布局







其他页面版式布局




以及他的其他商品网站都是以这种风格展示

不得不说这些页面插画、配色都很赏心悦目







谈谈里面交互动效和一些小细节

1、鼠标采用了小圆点追随，增强了页面趣味性和精致感







2、页面导航多为竖型展示，符合传统页面版式风格







3、一些图文介绍方面，图片做了隐藏，鼠标经过标题时展示相应配图，图片的动效有用一种看起来如同液体扭曲的效果，看着很有趣味性。










4、下面这个交互和我们常见的还有意识思维里面的不太一样，我们常见的顶多就是鼠标经过哪个则对应图片在相对位置变化，这个则有点反常，鼠标经过整个区域全部为当前图片。







5、话说这个牛肉部位分解图太牛逼了，点击相应部位出现相对文字介绍，而且仔细观察你会发现每个牛肉块的肌肉亮度显示不一样，这种效果应该是用SVG切图拼合的吧？







6、返回顶部有点像个小葫芦造型，看着甚是可爱







7、界面背景用的最多的一种为山水画图，在页面处理上面可以看到很多如同宣纸颗粒的效果，增强页面质感和传统风格，







8、一个好的页面除了便于操作的交互布局还有文案外，产品图质量的好坏也直接影响证整体页面的质量，该站的图片都非常高清、很有质（肉）感







9、下面这个算是产品显示页面，可以看出排列非常整体，就连里面的牛肉商品都感觉是在视觉上面大小、重量一样，产生一种均衡感，让人赏心悦目，因此可见一款优秀的网页设计不仅仅是体现在大首屏上面，只有每个部位都得“斤斤计较”才能从整体提升用户体验！

学习网站↓

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







小结

以上就是今天带大家学习的两款优秀传统网页设计，各位看完感觉怎么样？是不是有点惊艳？还有点意犹未尽？良心哥这里只是抛砖引玉，更多优秀网站希望大家带着学习的心态去多翻翻看看，传统行业很多，但是传统行业不好去设计，这不仅你需要有对这个领域有深入的研究，还得了解传统文化的章法，不然做出来东西会显得有点不伦不类，猛地一看感觉还行，但是经不起推敲，好了，本期问我们网页设计系列文章第一期，相信后面的时间里我们的专栏会越来越完善，带大家看更多的优秀作品，一起学起来~