新的导航趋势的应用:翻转页面导航

2016-02-17 04:33 12 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - 平面设计 】

导读:不知道这算不算新瓶装老酒,实际上翻转页面导航并不算一个新的理念,在之前就有网站用过,不过一直没有火起来,不知道会不会像AJAX一样重新获得新的认可?

在UItrends上看到一个新的导航趋势的应用:翻转页面导航。其实这个早期一直是photoshop表现视觉效果的手法,就像kate曾经提到过的,这种效果仅仅用来代表视觉隐喻,没有什么实际内容。

新的导航趋势的应用:翻转页面导航,PS教程,图老师教程网

早期由于这种设计只有一种固定的模式,缺乏动态效果,另外冗余的样式对页面的加载速度也有不小的影响,其应用并不广泛。后来随着带宽的提升和web应用的多样化,这种表现手法被越多地方用到交互应用中,在形式上类似于开关的切换,而在功能上实现了两个tab页的跳转(只不过其中一个tab被弱化或隐藏起来)。它的交互缺陷为:只有用户点击了以后才知道页面下面隐藏的内容。

在什么地方使用这种导航形式呢?下面谈谈我的理解:(为了区分,暂且把显示在页面上的叫tab1,隐藏在下面的页面叫tab2)

1.在展现信息上,tab1显示的优先级一定高于tab2,而且tab2所实现的功能一定是建立在tab1的内容之上的--通常作为附加应用(高级应用)而存在。

07年的yahoo注册就使用了翻转页面,点击右上方的翻转tab可设置进行密码保护设置(基于登录的安全性扩展)。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

新的导航趋势的应用:翻转页面导航,PS教程,图老师教程网

新的导航趋势的应用:翻转页面导航,PS教程,图老师教程网

2.强化该功能,吸引用户关注更多的信息。在tab2所呈现的内容较多时,tab1下单屏显示会造成页面布局拥挤,用这种导航方式不仅能视觉上引起注意,还解决了新的合理布局。同时需要注意的是,这种导航仅使用于比较简单的页面,强化的重点一个足以,否则将会产生视觉噪点。

Chrome Themes 上线以后,改版页面最大的亮点就是下方那个卷起来的页脚,让人禁不住想点进去看看。这也能看出来google把Themes这个功能作为重点推荐的战略意义(对Chrome 倒感觉不出没什么,对Chrome OS 的意义就完全不一样了),估计以后也会搞得像iGoogle 的主题一样,做成开放性的库, 让全球不同的艺术细胞自由交流...有点跑题了...

新的导航趋势的应用:翻转页面导航,PS教程,图老师教程网

点进去后的主题页面。

新的导航趋势的应用:翻转页面导航,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

3.移动平台应用等。

iphone上的google maps应用以及Slashdot.org也将赞助商链接放在投票上。

新的导航趋势的应用:翻转页面导航,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160217/1578529.html

延伸阅读
标签: PS
PSwww.Tulaoshi.com透明的导航设计   透明导航设计讲解,效果很赞。
图吧导航如何进行路线导航   1)安装并打开图吧导航,点击主界面中的。   2)起点一般默认为,需要修改的可以参照接下来终点的操作。点击搜索框,在搜索界面中点击所在城市   3)选择将要到达的目的地,如选择好城市,返回搜索界面即可进行搜索。记得一定要先选择城市哦,输入完后我们可以选择性最后点击即可...
标签: 汽车
1、触摸屏一般比较难用 很多车载导航的中控屏幕都采用了触摸屏,在开车过程当中用手指去点击或者手写显得很不方便,而且大部分车型的中控屏幕都存在分辨率低、反应速度慢、手写识别度低等问题。另外开车过程中伸手去中控操作,距离也比较远,操作起来显得不是很顺手。 2、地图不带自动更新升级 大部分车载导航系统都是被...
在进入今天的主题之前,我们先来探讨导航的重要性,并分析一下门户网站中导航的表现。 导航直接影响到公司的财政收入 导航会给我们带来哪些好处?导航不光只是提供信息获取的途径,它的设计优劣会直接影响到整个公司财政收入。下面我们看一个例子(以下内容来自alibaba李凡的《设计师的商业意识》): alibaba大致的广告价格 上图反映了...
标签: PHP
  <?php $d_label=array("service"="有偿服务","teach"="家教中心","union"="校园服务联盟","job"="学生兼职","free"="信息库"); $directory=$REQUEST_URI; while($directory!="/") {   $d_text=basename($...

经验教程

424

收藏

31
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部