订阅摹客文章

免费获取优质的设计资讯!

文章分类
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

设计资源 > 设计文章 > 2018年国外最具创意网页设计20例!【附教程】

2018年国外最具创意网页设计20例!【附教程】

Cherry
2018-12-19
92250

随着网页设计需求的日益增长,创意网页设计作品似乎越来越少。设计师如何才能打破已有的设计模式,设计出有创意的网页?小编为大家提供了20例国外优质创意网站设计欣赏,帮助设计师快速找到设计灵感!对于部分交互效果,小编利用自己常用的原型工具制作了教程,简单易懂可供参考。


创意网站设计欣赏

小主们还在为创意网页设计烦恼吗?不妨赶紧欣赏一下这些范例吧!小编根据网站主要显示/交互效果,将这20例极具创意的网页设计范例进行分类展示并提供了相关教程。


图片/页面切换效果

1. India May Home (电商类网站)


主要交互效果: 图片切换效果。

India May Home是一个为顾客提供购买家居装饰,长衫,旅行配件,珠宝,摩洛哥油和异国香味蜡烛的创意网页设计模板。网站的图片画质清晰,图片切换效果方便顾客更好地浏览商品及折扣信息。

India May Home网站界面


2. Le Mugs (餐饮类网站)


主要交互效果:图片切换,滚动区悬浮按钮,点击切换页面。

Le Mugs是一个法国餐饮网站,清晰的图片画质和明亮色彩的搭配让网站高大上十足。流畅的页面滚动和点击切换页面效果,让顾客能够一览食物和餐厅特色。

Le Mugs网站界面


3. Gizmo (服务类网站)


主要交互效果:点击切换页面。

Gizmo是一个关于房地产租售服务的网站,主页背景动图可以自动切换。为了引导用户浏览更多信息,主页底部可以点击箭头图标切换至更多网页信息页面。

Gizmo网站界面


4. Nike Reactor (电商类网站)


主要交互效果:页面跳转。

Nike Reactor 是一个极具创意的电商网站,除了酷炫的动画之外,承载这些创意效果的便是随处可见的页面跳转效果。

Nike Reator 网站界面


如何实现页面跳转效果?

页面跳转在许多创意网页设计中都是不可或缺的交互效果。在小编使用的这款设计工具中有两种实现方式:一种是组件与页面设置交互实现跳转;另外一种是在右侧设置页链接!关于具体使用方法,小主们可以直接看页链接教程。

页面跳转效果预览:https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.htm...


滚动效果

5. Madma visconti (电商类网站)


主要交互效果:图片纵向滚动。

Madma visconti是一个饰品电商类网站,页面布局左右分明。顾客可以通过滚动主页右侧区域查看饰品图片,简洁方便。

madma visconti网站界面

6. Entreprenorsgtan (租售信息类网站)


主要交互效果:字体滚动效果。

Entreprenorsgtan 是一例商务办公区租赁类的创意网站设计欣赏,除了主页背景动图之外,中间的滚动字体也是一大亮点。

Entreprenorsgtan网站界面

7. Alafut (餐饮类网站)

主要交互效果:商品横向滚动。

Alafut 是一个以西餐和啤酒为主的餐厅网站,网站主页提供了食物和简餐信息。页面中间的商品横向滚动不仅解决了页面空间的窘迫,又全面地展示了商品。简直是餐饮类创意网页设计模板!


如何实现滚动效果?

在有限空间的创意网页设计中,滚动区效果必不可少。Mockplus有现成的滚动区组件,可以直接使用。从软件中拖出滚动区放至工作区,在右侧属性面板可以设置横向或纵向滚动。设置完成后,双击进行编辑内容。编辑完成后,就可以预览页面滚动效果。

效果预览链接:https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.htm...


弹出效果

8. Monyssb (食物类网站)


主要交互效果:图标随页面掉落,右上角弹出菜单。

Monyssb作为一个食物类网站,以黑色为背景色的设计十分大胆。页面分布的食物小图标使页面看起不会单调沉闷,随页面掉落的食物图标更是趣味十足。右上角的菜单图标,点击后会弹出食物分类信息。这真的是小编最喜欢的一个创意网页设计了!

Monyssy网站界面


9. Konstolymp (电商类网站)


主要交互效果: 图标自动显示,右上角弹出菜单。

Konstolymp 是一个售卖橄榄的商品类网站。主页在载入时会渐渐出现左侧的橄榄、椰子等图标。顾客点击右上角的菜单按钮可以了解网站和商品详情。

Konstolymp网站界面


10. Not an other bill (电商类网站)


主要交互效果:鼠标经过,显示弹出菜单。

Not an other bill 是一个典型的电商网站,整体页面设计比较简洁。展示的图片种类丰富却不繁杂,页面随处可见弹出元素,主页有弹出菜单、弹出面板;商品有类似弹窗的效果。看得出来弹出效果在创意网页设计中也有自己的一席之地!

Not an other bill网站界面


11. Teatr Lalka (节目类网站)


主要交互效果:图标晃动,右上角关闭弹出。

Teatr Lalka 是唯一一例TV/戏剧秀创意网页设计模板,网站首页跳动的木偶和弹出面板中的小图标呈现的是满满Drama风。

Teatr Lalka网站界面


如何实现弹出效果?

小编不会用代码,制作原型基本靠这款神器。实现弹出效果,Mockplus也有各种自带的组件,例如弹窗弹出面板弹出菜单等。基本都是根据自己设计需要,从组件库里拖出来相应的组件进行设置。设置完毕后,就可以进行效果预览了。

效果预览链接:https://run.mockplus.cn/4I8j24WRQgMJHRDf/index.htm...


鼠标Hover变化效果

12. Ticktocktea (电商类网站)

主要交互效果:鼠标经过时变色。

Ticktocktea 是一个以茶为主要商品的网站,网站主页的时钟和文字都在顾客脑海中植入下午茶概念。页面整体色彩搭配大胆,并利用鼠标经过变色实现动效,打破网站的呆板。可以说是在不变中实现万变的创意网站设计模板了!

Ticktocktea网站界面.


13. Koox (食物类网站)


主要交互效果:面板弹出,静态图标Hover显示,文字Hover变色。

Koox 是一个具有极简风的食物网站,网站主色调为绿色,给顾客一直干净新鲜的感觉。在单调色彩的网页中植入不单调的Hover显示图标、文字Hover变色效果;使网站不再单调。

Koox网站界面


14.VT Mangazine (杂志类网站)

主要交互效果:鼠标点击显示图片。

VT Mangazine 是一个极具视觉冲击的杂志网站,网站以时尚图片为主。在交互方面,大量采用鼠标显示图片的方式带来有趣的用户体验。充分利用好这种交互效果,也能实现千变万化的创意网页设计!

 VT Mangazine网站界面


如何实现鼠标Hover显示图片或文字变色?

在Mockplus中实现这个效果就更简单了!从组件库中选择文字,在右侧的属性面板中通过“颜色”属性中设置鼠标经过时变色,根据需要设置变更的颜色即可。而Hover显示图片则从组件库中选取图片组件,在右侧属性面板中将其透明度设置为0。然后在透明度中设置交互为鼠标经过时显示透明度为100即可。

效果预览链接:https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.htm...


图片轮播效果

15. Carpe Diem (酒店类网站)


主要交互效果:图片轮播。

Carpe Diem 作为一个度假酒店的创意网页设计模板,除了上述的弹出菜单等交互元素,图片轮播也是其不可或缺的组成部分。图片精致且具有创意的图片轮播设计,帮助顾客快速全面地欣赏酒店的美景从而完成下单操作。

Carpe Diem网站界面


16. Vallier (餐饮类网站)


主要交互效果:主页图片轮播。

Vallier 这个餐饮网站除了左侧留出的菜单区域,右侧的图片轮播图跟Carpe Diem网站有异曲同工之妙。看来图片轮播在展示商品方面是一个不错的交互选择!

Vallier网站界面


如何实现图片轮播效果?

在Mockplus的组件库中拖出图片轮播组件,点击组件即可根据需要添加图片。添加完图片后,即可保存预览啦!小编个人觉得快速简单!

图片轮播效果预览链接:https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.htm...


其他效果

17. Top PadDock Café (餐饮类网站)

主要交互效果:进度条,走马灯效果。

Top PadDock Café 是一个以美食为主的餐厅网站,页面滚动更方便了解食物信息。视频播放的进度条让顾客了解加载进度,而走马灯效果显示的文字增加页面的生气。

Top PadDock Café网站界面


如何实现进度条和走马灯效果?

Em....小编太懒了小编太懒了,直接甩出它们官网的教程好了小摹做原型之进度条

请各位大佬收下!对了关于走马灯效果,就是通过上面的滚动区做的,多了一个滚动区跟自己做移动交互的设置而已。

走马灯效果预览链接:https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.htm...


18. Lopesce (食物类网站)

主要交互效果:滚动变色,其他效果。

Lopesce 不用介绍小主们都能发现是个零食网站,动画风格的食物元素图标和页面真的可爱到爆!滚动变色的交互效果令人印象深刻,是不可多得的创意网页设计!

Lopesce网站界面

呃,滚动变色这个,小编还没想出来怎么做....等研究出来了再补充,嘻嘻!


19. Humbert & Poyet (房屋租赁类网站)

主要交互效果:图片滚动,文字飞入效果。

Humbert & Poyet 是一个集酒店、住宅、餐厅和零售业务为一体的创意网站设计模板。除了页面纵向滚动,文字飞入也是其交互中的一大亮点。

Humbert & Poyet网站界面


如何实现图片滚动和文字飞入效果?

图片滚动效果就不多说了,麻烦各位小主翻翻上面的滚动区教程。文字飞入效果可以通过Mockplus的单行文字组件实现。将文字放到工作区外,并选择组件进行触发设置。例如,点击组件文字移动和显示交互同时工作。设置完毕后,将文字设置为不可见状态即可。

文字飞入效果预览链接:https://run.mockplus.cn/4I8j24WRQgMJHRDf/index.htm...


20. Ha Interactive (食物类网站)

主要交互效果:文字滚动,图片缩放效果。

Ha Interactive 是一个电商类创意网页设计模板。除了满足网站基础功能的设计,首页图片的缩放效果令人眼前一亮。文字横向滚动效果也为其增色不少,也是其跻身创意网站设计欣赏之列的重要原因。

Ha Interactive 网站界面


如何实现文字滚动和图片缩放效果?

老规矩,文字滚动效果可以用横向滚动区实现。基本设置可以参考上面的滚动区教程和走马灯教程。图片缩放就更加简单了!从Mockplus中拖出图片组件,将连接点拖至自己(图片组件本身)。然后设置交互方式为缩放,触发方式(点击时,载入时,双击时等)可以根据自己需要进行选择。缩放倍数、执行时长、自动回转根据需求在右侧交互栏中设置。

图片缩放效果预览链接:https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.htm...

在网页设计中缺乏灵感在所难免,看完小编进行整理的20例创意网页设计,相信小主们或多或少有了设计灵感! 在平时设计中也不乏有灵感缺失的时候,小编如果没有及时根据提供相关的创意网站设计欣赏。小主们可以从以下这些网站中寻找设计灵感哦!其中,Awwwards网站还提供了许多创意网页设计模板哟!


国外设计灵感网站推荐

Behance

Dribbble

Pinterest

Awwward

【来啦!彩蛋君】Mockplus个人版免费赠送福利!限时限量!

Mockplus对接iDoc了,将原型接入产品工作流,增加了原型标注、评论、对比设计稿、全貌呈现等功能,诚邀体验!赠送Mockplus个人版!数量有限,先到先得!

专属激活码:Mock2019;

激活数量:限量150个;

有效期:2019年9月30日

激活地址:https://www.mockplus.cn/user/upgrade (登录/注册后输入激活码即可)

Plus,发布Mockplus原型到iDoc,还有更多大礼等你拿!

上一篇
联合国国际贸易中心采购数十套Mockplus终身版

Jongde   12/21

摹客 · Veer设计大赛已逾千人报名参赛

Jongde   12/17

下一篇
咨询客服

帮助群:651432826

服务邮箱:service@jongde.com