交互——“惊艳”的导航设计案例欣赏


简洁高效的导航菜单设计,能够有效优化搜索,改善用户体验。今天,我们将研究一些网页导航设计方案。这些案例新颖夺目,生动有趣,原创前卫,令人过目难忘。其中有些设计的复杂程度更将超乎你想象。


推选这些案例,不光是因为这些创意的原创性,还有包含其中的先进设计技巧,可以启发灵感,帮助大家对网页导航设计领域有更多的认知和了解。



1

Jova



Jova的导航菜单干净、整洁、均衡且布局得当。细直线条,网格布局,黑白配色方案以及清新醒目的排版,拼出了几何韵味十足的优雅界面。浅色的背景,与之相得益彰。



2

Beloesuhoe



这个设计团队很巧妙地找到了一个让网站抓人眼球的方案。乍一看,似乎这是一个常规的背景图,但是红色的光标点和菜单标题则告诉我们这一切并不像看起来那么简单。实际上,菜单项是可交互的,只要点击画面上的指示牌,就可以跳转到目标页面。这是基于虚拟现实的一个相当有趣的解决方案。



3

First Person



First Person网站最大的特色就是它那精巧、超现实的立方体情景图。设计师对细节的刻画,对透视的精准把握使之更引人入胜。不可思议的是,这个立方体还有白天黑夜两个不同的场景变化。当然了,这并不是这个网站的主导航,它的作用只是为了能够吸引到你的注意力。不过,它的超细节展示配上动态场景支持绝对是酷炫爆表。



4

Mint Design Company



Mint Design Company网站让人耳目一新。通过动画表现,手绘插画风格的页面顿时活灵活现。网站里的所有元素包括导航都是以契合整体艺术风格的手法来设计的。每页菜单都有两版风格,一种是包豪斯式极简主义的写生,另一种则是巴洛特式的华美,这两种风格之间采用了令人愉悦的效果进行平滑转换。



5

Vive Latino



为了使登陆的页面从众多的网页中脱颖而出,设计师在这里借用了涂鸦的方法。清爽的单色配上手写字体,加上几十个微小的移动字符,它不仅成功营造出了一种热闹的盛日氛围,还是一个让人很有点击冲动的导航菜单。



6

Pete Nottage



Pete Nottage的在线作品集以绚丽的颜色为标志,它们赋予网站积极和富有创造力的气息。多彩扁平化风格元素组成的城市风景其实是一个主导航,模拟的是游乐场场景。网站不仅加入了各种动态效果,如移动的汽车和游艇,还允许你通过点击来移动其中的元素。这个设计有趣且让人欲罢不能。



7

Mathilde Jacon



Mathilde Jacon的作品集的首页呈现出的是一个有着特殊交互的循环导航,非常有意思。在这里,这个作品集将最重要的部分留给了导航;环形里的每段都是一个单独的链接。



8

Moira Young



由于其精致的登陆页笼罩着一种强烈的自然主题氛围,Moira Young 的网站散发着优雅和微妙的魅力。它的导航不像以往一样显眼;每一个链接都隐藏在靠近树的一个个缓缓闪动的光点上。



9

Bancolombia



就像前一个例子,首页呈现是一个景观画面并充满着动态要素。然而,值得一提的是,它需要依靠Flash播放器,这与HTML5时代格格不入。



10

Nat-Ant



这个网站采用的极简主义风格是很值得关注的。这种极简风格延续到功能键和整个页面。登陆页面上只有几个分散的功能键,以及大片的留白。他们以一种不同寻常的方式诠释出这种极简主义。



11

Love Carmen Rose



Love Carmen Rose 的在线作品集通过别具匠心的复杂图像幕布彰显其个性。此外该幕布还扮演浑然一体的导航工具的角色。“欢迎”部分看起来显然相当错综复杂。



12

Orillo



Orille网站采用一个细致的白描式控制台恭迎者它的访客。它简洁有力又不失雅致,用户在整个浏览过程中,不仅可以借助它导航,还可以通过它做很多别的事情。不过网站的移动端和平板电脑使用了另外一种页面载入方式,还是要用电脑网页来浏览才能一睹全貌。



13

OK Kid



借助先进的技术,OK Kid(德国著名乐队)网站采用全屏的视频作导航。超强的视觉冲击力让人叹为观止。



14

The Colors of Motion



Colors of Motion仿佛带你经历一次浏览经典美国戏剧的可爱旅程。该网站在电影情节之间有一个极具原创性且诱人的导航。它没有任何标志,只有多彩的一系列超薄条纹或方格,带你穿越下一帧画面。



15

HelloNicolas



这个线上作品集总在第一时间抓住用户注意力。这位艺术家用了一种新的手法,包括用抢眼的方式来演示作品。布局被划分为相对比较宽,全屏跃动的条纹,每个都华丽地展示着挑选过的作品。



16

Grimouville



想通过grimouville开启一段简要而难忘的旅行?你可以访问这个顶尖的网站。它提供的一些城市沿途有趣的交互元素可以让你感觉真的走在城市的街道上。



17

Leidgens Piscines



首页将其让人难忘的外观归功于两个基本组成部分:壮观的视频背景定下高逼格,导航让你更有效地探索项目。由于其精巧的线型让置于中心的额外导航恰到好处;每个菱形以一段简短的视频作为特色支撑着标题。



18

Soppo



通过网格导航菜单,Soppo展现出可爱的格子风。设计师巧妙地运用纯色色块和图片进行混搭,并为每个单元块添加了感知鼠标方向的图片遮罩效果。



19

Visit Brazil



Visit Brazil确实是一个标志性的概念性网站。它的页面通过在房间里的巡游,形成了一种交互式浏览,每一个元素都在讲述它们自己的故事,展示巴西不同地方的旅游文化。



20

Alexandru Nastase



Alexandru Nastase网站的设计师巧妙地利用字体得到一个相当直观的外观,从而打造一个有趣的页面,文字导航都灵巧地环绕着这个页面布局下来,塑造出独特的层次感。



 总结 


另类的,不平凡的导航解决方案总是可以吸引并激发用户的兴趣。他们将网站升华为一个杰作。


然而,无论你的导航看起来有多迷人和不寻常,对于导航来说不受干扰地直达目标对用户来说始终是头等大事,所以不炫技,懂得拿捏分寸至关重要的。



文章转载自公众号@京东设计中心JDC,

图源来自网络


交·互·设·计·专·业·院·校·推·荐



1

   帕森斯设计学院

   Parsons School of Design


帕森斯设计与技术专业分为两个体系:游戏设计和创意科技。从此,程序语言将是你的第二语言。

设计和技术专业设计与科技专业关注的是现代媒体、交流方式以及体验化设计。通过平时的课程、集体项目、实习和一些大型的活动参与,同学们有机会接触到真实的计算艺术、计算机排版等。学校有一些相关项目,同学们可以有机会参与实践,这是该专业学生的一个珍贵的资源。而作为设计与科技专业的同学,你要做的不仅仅是一个人有想法地独立创作,而是要学会交流,因为你所创作的东西是将人和人练习在一起的媒介,是要吸引别人眼球的东西,例如游戏等。如果你是一个对生活不感兴趣,不乐于观察的人,那么你就算不上一个合格的设计和科技专业的学生。



2

   卡耐基梅隆大学

   Carnegie Mellon University


卡耐基梅隆大学(CMU)是世界上最早开设交互设计专业的学校之一,它结合了之前交互设计(Interation Design IXD)和视觉传达与信息设计(Communication Planning and Information Design CPID)两个专业的精髓。

这里的新课程将研究设置与人,团体和自然世界之间的相互作用的背景之下。 学习MDes专业的学生参与基于研究调查的服务设,旨在促进向更可持续未来的转变。



3

   纽约视觉艺术学校

   School of Visual Arts


SVA是国际艺术教育领域公认的领导者与创新者。SVA 其优越的地理位置为学生提供了更好的艺术创作平台和自我提升的空间,为学生提供了良好的学习环境,培育学生的创新能力及实验能力,促使学生养成强烈的自我认知感并有意识地树立明确的发展目标。该校大学部最受欢迎主修为:广告、 平面设计、插画。知名的毕业生有Keith Haring凯斯·哈林、平面设计大师David Carson大卫·卡森、2005年的威尼斯影展最佳短片金狮奖得主林见坪导演也是毕业自本校。SVA的热门部门是cartoon and illustration dep. 这是在创校时就已成立的部门,多年来校内赢得全美设计或绘画大奖的多为此部门的学。SVA自豪的一点是,同一个老师所教出来的学生皆具有独特的风格,以及独立思考的能力。



后台回复“交互设计+学校名”,

获取该院校独家申请攻略



艺界交互/工业设计导师推荐 👇


 


都人华艺界交互/工业设计教学总监

清华大学工业设计硕士


都老师毕业于清华美院本科和研究生院,师从“中国工业设计之父”柳冠中先生。都老师目前任职某知名互联网公司设计总监,擅长指导工业设计及交互设计专业。另外都老师具有跨界设计经验,参与多个景观及城市规划项目。都老师在研究生阶段获得设计界知名的“红点奖”。都老师指导的学生成功申请到罗德岛及卡内基梅隆大学。