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

风一样的男子SS

风一样的男子SS

2016-02-17 04:33

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

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

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

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

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

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

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

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

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

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

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

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

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

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

点进去后的主题页面。

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

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

3.移动平台应用等。

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

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

展开更多 50%)
分享

猜你喜欢

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

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
新的导航趋势的应用:翻转页面导航

Tab导航与侧边抽屉导航的巅峰对决

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
Tab导航与侧边抽屉导航的巅峰对决

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

Photoshop设计导航:圆角矩形导航

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop设计导航:圆角矩形导航

设计教程:响应式页面导航设计解析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
设计教程:响应式页面导航设计解析

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

2024网页导航设计趋势和案例作品分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
2024网页导航设计趋势和案例作品分享

凯立德导航怎么模拟导航

手机软件 应用软件
凯立德导航怎么模拟导航

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

关于网上购物付款流程设计的12个建议

关于网上购物付款流程设计的12个建议

国外软件公司LOGO标志设计流程

国外软件公司LOGO标志设计流程
下拉加载更多内容 ↓