• 创造性和创新性的导航设计


    一个网站应该有它的独特性 - 它是一个反映的是其背后的个人或组织。当人们访问你的网站,你想让它从人群中脱颖而出,令人难忘,能过多次回访,并使用你的网站或与您取得联系。

    所以,您的网站想脱颖而出,不仅需要卓越的内容,也应该有创新而实用。问问自己,什么使您的用户更容易的生活吗?可能需要简单的搜索功能,或者导航菜单,可以使用一些打理一下。然而,个性的网站需要贯穿始终。以下网站将激起你的食欲超凡的创造力。浏览并探索他们自己。

    创意导航设计

    导航TOYBOX应始终有需要时,并亲切地消失,当用户想专注于一个特定的任务。例如,在一个网上商店的结帐设计,导航应该始终访问,但也为关键的网站功能,如结帐形式给予足够的突出。导航TOYBOX做到了这一点。

    TOYBOX

    这感觉就像你偷看后面的页面或盖的TOYBOX看看里面有什么。导航是使用方便,旋转效果的导航栏时,他们正在使用它引导用户的关注。隐藏导航还允许一个简单,干净的设计,使用户在观看项目很愉快,因为这两个项目没有注意竞争。

    信息你可能会想知道,,比如什么TOYBOX它位于,仍可以被发现在一个不显眼的导航栏在顶部。悬停效果也很有趣,与其他图像得到推回和淡出的用户集中在一个项目上。

    奥利维尔Bossel

    奥利维尔Bossel的投资组合,交互设计师,很有趣。导航元素创建爆炸的像素,当你将鼠标悬停在他们的效果。效果相当动态对比与其他干净的设计。它工作得很好,因为它作为一种视觉元素鼓励用户继续通过网站。一致的视觉语音和语调补充品牌的身份。只要通过浏览网站,用户体验设计师的作品。

    奥利维尔Bossel

    TSTO

    TSTO,设计机构,有一个简单而非正统的方法来设计,它的导航不同的是我们期待什么。导航元素固定在屏幕的每个角落,划分工作展示。创建了视觉识别与重热粉红色的字母,以及描述信息。层次清楚,但是,“工作”标签的左上角,和“联系人”和“关于”页面底部的标签。在保持的风格,正在展出的作品是在同一个沉重的粉红色字体的标题。

    TSTO

    通过点击工作,这像幻灯片呈现时,预览下一个项目,当你将鼠标悬停在箭头。图像很大,占用了大部分的页面。当用户通过点击查看大图像TSTO的身份和工作,他们得到一个清晰的思路。

    德里克· 德里克·博阿滕博阿滕的组合用一个礼貌的“你好”欢迎用户在加载时,箭头指示向下滚动。一般的设计是被低估的,它不喊你,而是轻轻地引导您完成工作。正如你从加载页面向下滚动,头和导航缩了回去,让更多的空间组合。这是一个很好的例子,导航,始终是访问的主要内容还给出了中心舞台。

    德里克 - 博阿滕

    第二个故事

    啊,良好醇水平滚动!第二个故事的网站像一本杂志在平板电脑上的应用程序。它具有创新性的,因为它不具有一个典型的Web页面的触感和它水平滚动。的内容被布置在列中,每个部分垂直滚动。过导航锚定到左边,这有助于建立的节奏。当您查看导航最大限度地减少这种组合,酒吧上空盘旋时,在左边,再次出现。您可以选择在缩略图视图或幻灯片查看投资组合。

    第二个故事互动工作室

    正如它的名字表明有严重,有严重嬉闹它有一个元素。迎接你的导航被设计成左右的气球漂浮。友好的动画创建运动,否则静态网站,为品牌定下了基调。虽然你可以回来的主页,在任何阶段,一个微妙的导航栏会出现在页面底部。该网站功能,与飞溅工作室的个性乐趣。其实,它让我想起了时髦的Flash动画的好日子(EYE4U,任何人?),但因为这个网站应该是有点顽皮,它的工作原理以及在此背景下。

    有严重

    最小的猴子

    滚动通过这种大胆的设计简单的文章,让我想起了浏览书架。悬停效果为用户挑出一篇文章的重点。这个网站上也有一个聪明的设计:当您点击一个选项卡上的“关于”和“联系”部分,页面下降到透露的信息。这是一个简单的方式提供信息,而无需重定向到另一个页面。

    最小的猴子

    然而,观看老的文章也不是那么容易,因为没有搜索功能。如果用户正在寻找一个特定的文章,他们将不得不滚动来查找。搜索功能太多不改变整体的设计将是有益的。

    LayerVault

    它是惊人的,可以有什么样的影响,一个简单,干净的布局与俏皮的色彩和有趣的动画。LayerVault平衡白色空间和微妙的动画阴谋和从事用户。动画可以用来说明一个点,引导用户通过一个网站,甚至说明了如何使用。动画并不总是这样的伎俩,,但LayerVault适用应谨慎,只有当用户在浏览页面的特定部分。结果呢?奠定了良好的页面,耐看,有吸引力的插图。

    LayerVault

    遁飞

    遁飞设计巧妙,标志动画页面正在加载新颖和时髦。导航固定在顶部,看起来像一个离港及抵港板的,好像你已经在机场!下拉菜单看起来像一个旅游清单,行之有效的主题。当你点击一个位置,然后向下滚动,所有的重要信息仍然固定在顶部,访问的内容更容易,更舒适,强悍的旅客。

    逃离Fligh

    逃生飞行最大化利用令人惊叹的摄影,其空间。这正是你想从一个旅游网站。它可以让你的冒险等待着,精美的展示了惊人的目的地有点味道。当你将鼠标悬停在一个目的地,你会发现,正是你需要知道:门票价格,天气状况,飞行时间和行程长度。你还能有什么要求呢?

    aSCIIaRENa

    调用所有ASCII爱好者!九十年代恶臭aSCIIaRENa。人们可以注册并发布新闻的墙壁上,提交自己的文字艺术,并在墙壁上的名气特色。

    Asciiarena

    照片是Sartorialst本网站上的焦点,并设计支持,毫不费力地。更重要的是,网站使用悬停效果相当优雅;字幕幻灯片从侧面再次滑出,光标之后。

    Satorialst

    后面的人SilkTricky SilkTricky是打破现状,以及他们的网站并没有放下。鼠标在图像上创建一个有趣的效果。页面上的运动创造了一种阴谋活动的用户。在此单页网站,用户不必点击从页面浏览。只需点击“查看”,所选择的文章折叠的其他文章推卸。这将是一个很好的方式来展示摄影组合,太。

    SilkTricky

    SumAll

    SumAll的布局是干净的,没有不必要的额外的,会分散用户的注意力。悬停在一个简单低调的方式,揭示了更多的信息和转换是一个扩展悬停效果。当你点击一个按钮,简洁的信息和选项出现在下面。我很喜欢,你是不是重定向到另一个网页,当你点击一个选项,而是整齐的信息出现下面的按钮。一个缺点:导航是没有反应,看着破碎而无法 ​​在较小的意见。

    SumAll

    便饭

    对不起,这一个如此热心,但聚餐呈现出梦幻般的用户体验。大方的白色空间,可以帮助用户访问他们需要什么,当他们需要的时候。表单和按钮有新鲜和开放的审美,使他们很容易发现和使用。文字和漂亮的图形的方式,引导用户通过网站。按钮和图标很好地协同工作,所有按钮和输入区感觉一致,引人入胜。位精心挑选的排版和一个微妙的,干净的用户界面如何从事取悦用户很长的路要走,这是一个很好的例子。

    便饭

    Lowdi

    单页响应布局相当精美。Lowdi使用线条和形状来衬托部分的页面,一个伟大的方式脱离传统的四四方方的布局。我爱“现在订购”按钮注册成立的线条和形状的设计。这些元素调整到你的屏幕,并设计有效地维护流贯穿始终,这使得方便观看。

    Lowdi

    Barcamp奥马哈

    Barcamp奥马哈是一个在线的活动邀请。单页的工具,有效地引导用户通过叙述一致的视觉主题。所有的本质是什么,何时何地资讯页面的顶部,但设计敦促用户向下滚动才能看到他们能找到什么。我真的很喜欢Twitter和Facebook图标的巧妙融合。

    Barcamp奥马哈

    当用户向下滚动,更多的信息提供系统,和布局保持整齐,简洁,大胆的标题。会议会谈的类别说明用简单的动画,以保持用户从事。一旦你向下滚动建设,并达到地面,正等着你的联系信息,方便。

    Combadi

    这个网站感到宁静很快,因为它的负载,精心设计的结果。虽然它不会有大量的白色空间,它不觉得幽闭恐惧症。标签悬停扩大,提供更多的信息和提高可用性。随着其他元素,这种效应传递一个通风,平静的感觉。设计反映了词汇的网站,以及各种元素的共同努力,以实现连贯一致的身份。

    Combadi

    沃勒溪水利:最后四

    悬停效果应该不仅提供更多的信息,而且还有助于网站的视觉吸引力。扩大图像,当你将鼠标悬停在该网站确实是相当漂亮。形象也改变,从灰度的全彩色标题。其效果是相当诱人。

    沃勒溪Conversy设计Comepetition的中

    提起

    奠定了网站上的产品或项目时,很容易落得静态的目录式视图。电梯的简单的悬停效果旋转显示的3-D版本的书籍。这看似微小和简单的视觉效果,真正使网站更有趣。涉及用户感觉,并可以与网站进行交互。你可以做到这一点的3-D效果。

    抬

    雪鸟

    雪鸟是一个动态的网站,涉及用户。显示当前的天气,当你将鼠标悬停在折叠,揭示本周预测。“完整报告”按钮悬停效果是潜移默化的,因为它变换成直角,圆角尚未生效。玩笑是三角形的,看起来像一种雪鸟的翅膀;上空盘旋时,他们获得较大视图展开成一个正方形。

    雪鸟

    蚀刻

    的方形部分紧紧地奠定在这个网站上,但不感到局促。在左上角的导航占用空间小,因为图标用于各种类别。您可以切换导航显示和隐藏在大视图,通过点击菜单图标。响应式设计使得在任何设备上访问的网站很容易,而失去功能或品牌号召力。

    蚀刻
     
    本文由红蜘蛛网络联盟(www.rswebun.com)编译,原文地址:http://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/
  • 相关阅读:
    Centos7 JDK8安装配置
    select2
    docker 删除多个退出的容器
    redis 批量删除多个key
    Dockerfile 文件命令
    Docker部署go示例
    php 导入 excel 文件
    rabbitmq安装
    rabbitmq之php客户端使用实例
    k8s
  • 原文地址:https://www.cnblogs.com/reweb/p/3241019.html
Copyright © 2020-2023  润新知