专栏名称: 交互设计学堂
系统学习交互知识,就找老D。干货分享、在线培训、行知书院三大版块帮你提升自己。 最新资讯-全是干货还有老D点评,每天推送; 交互培训-在线课程帮助小伙伴进入交互行业,只要3个月; 行知书院-老D帮小伙伴们解读经典设计书籍,都是“硬”知识。
目录
相关文章推荐
交互设计学堂  ·  人工智能产品+ ... ·  3 天前  
字体设计  ·  按你的年龄预估字体大小 ·  4 天前  
庞门正道  ·  不当榜一大哥。 ·  5 天前  
ZaomeDesign  ·  新作丨ROARINGWILD深圳壹方城店 ... ·  4 天前  
ZaomeDesign  ·  每日灵感丨十二月十七日 ·  6 天前  
51好读  ›  专栏  ›  交互设计学堂

视觉交互都超棒!20多个风格多样的日式企业网站设计

交互设计学堂  · 公众号  · 设计  · 2017-05-02 19:50

正文

♝点击上方“交互设计学堂”关注我们,送电子书


我想很多设计师都认同或喜欢日本的设计,不管是建筑、产品、包装,在网页设计方面,也有值得我们学习的地方。

今天精选了20+日式 Web Design 作品,有餐饮、产品专题页、互联网、设计工作室等行业,从这些案例可以看出设计师是绞尽脑汁去设计好一个网站,而不是简单的「美观」,除了做到精美、大胆的网页布局,同时还增添一些细节交互动效,使网页变得更加精彩。

下面大家一起来欣赏这20个漂亮的日本网站,请不要光看,要懂得「思考」,这就是高级设计师与初级设计师的区别。

500 Colored Pencils

http://www.felissimo.co.jp/500/

一支彩铅都要做这么漂亮的专题页,可见日本对设计、对品牌包装的重视程度。左右滑动的 JS 特效很好玩,看到这500支彩铅,小编也有点心动了

G-A

http://www.g-a.co.nz

话说只有设计水平到一定程度后,才这么大胆做这种设计吧?

Kirin

http://ryotei.kirin.jphttp://ryotei.kirin.jp

这是一家餐饮企业的品牌网站,很少餐饮企业愿意花这么多精力和资金做一个品牌网站,可见日本对设计的重视和大陆不是一个档次。。

kirin 里面的很多大胆排版方式很漂亮,像是 VI 手册般的平面设计,但又比 VI 好一点,因为多了些动态效果,还有个强大之处就是,这排版还支持响应式。

SERAKU

https://www.seraku.co.jp

这是一家互联网机构,网站采用了双语言(日语+英文),以日式插画作为首屏页面,让首页拥有强大的视觉吸引力。网站的英文字体、数字没有使用系统自带,而是其它嵌入式字体,以视觉优先。

Gina

http://gina.tokyo

Gina 也是一个餐饮食品网站,这个首页的视觉离不开摄影师的功劳,漂亮的摆拍摄影让首页增添不少美感。

Toshin-Sekai

http://toshin-sekai.com

一家网站杂志媒体网站,日后你要设计信息类的网站,这个时尚版式是不错的参考对象。

网站的导航菜单直接隐藏了,采用「面包屑」导航,展开后,是这样子:

Udatsu

https://udatsu.co.jp

单单是用鼠标移动左侧导航的哪一个细微交互,这也已经很不错了。要懂得思考啊,同学们。

Newgraduate

https://newgraduate.nyle.co.jp

简约时尚的网页设计。

Carborocco

http://carborocco.com

干净的页面布局,有时候只用图片排版可能会很单调,比如有些地方空白太多,所以设计师就加了一些图形来做点缀,每个页面都很 nice,所以不要光看首页,其它页面也点点看哦!

B-Monster

https://www.b-monster.jp

上面的排版太过有特色?太个性?好吧,来个中规中矩的给你看。

Tamanabokujo

http://www.tamanabokujo.jp

手绘风格的导航设计也是很有意思哦。

Aozoramokuzai

http://www.aozoramokuzai.com

也是中规中矩的页面排法,这种网站 Banner 的视觉也重要。这家木材厂的横幅就使用了视频来做,效果也相当不错。

Danielspatzek

http://www.aozoramokuzai.com

一个设计师的个人网站,创意十足呢!特别是动效超 cool,实现起来估计也相当麻烦的。(但这个不是日本网站)

Foodfloor

http://www.isetanspecial.com/foodfloor/

美食 APP 着陆页的设计

Orangina

http://orangina.jphttp://orangina.jp

只彩2种颜色搭配的网站,蓝色+黄色,效果也很棒呢,你怎么看?

Kirameki Dental Land

http://kirameki-dental-land.jp

一家专注儿童牙齿健康机构的网站,导航使用了与 LOGO 相衬的多彩点缀,使整体视觉看起来活跃不少。

Suzuka 2017 专题页设计

http://sp.walkerplus.com/suzuka2017/

Kyoeiseicha

https://www.kyoeiseicha.co.jp

kyoeiseicha 是一家卖茶的企业品牌,网站采用自然界的绿色作为主色,首屏 Banner 使用了不规则的形状图案,还有就是图像方面也用上了「高清图片」的质量,这才能使得网页看起来不会低端、劣质,以后记得不要省那几个流量啦!

Koshibasaki

https://www.koshibasaki.com

某明星的介绍页

Descente

http://ss2017.descente.jp

Kenjiokabe

http://kenjiokabe.com

静静的用图片记录生活点滴:

以上优秀 Website 均摘自设计导航推荐的:MUUUUU, 4db, straightline 以及 81-web日本网页设计画廊,大家有空的时候不妨到这里找找日本的网站灵感。

转载自:优设

原文链接:http://www.uisdc.com/japanese-enterprise-website-design

欢迎投稿:[email protected]


加老D私人微信18605817040,和老D一起学交互,老D会在朋友圈多发干货文章哦。新手小伙伴可以问老D3个专业问题哦。


交互设计学堂已经开设了新的栏目-行知书院,旨在帮助小伙伴们来高效的学习现在市面上优秀的用户体验书籍比如《交互设计精髓》等等,同时结合老D的工作经验来帮助你们从不同的高度和角度来解读书中的内容。每天一课,积少成多。已有134位小伙伴加入。详细了解行知书院