设为首页 加入收藏

TOP

导航之变—移动网站的导航设计(三)
2011-12-10 21:39:32 来源: 作者: 【 】 浏览:2069
Tags:导航 移动 网站 设计
 

三、 导航样式的变化

· 利用系统特性变形

常用的变形方式有:

1)  调用系统控件

通过结合移动终端的控件特性,可以在较小的尺寸范围内完成导航的再设计。如上图cnet移动网站中,导航内搜索框用搜索按钮代替,二级项目改用下拉选择器,充分利用了移动端控件特性。

2)利用系统交互特性

Sevnthsin的首页导航设计巧妙地应用了触屏手机可拖动元素的特性。用户拖拽相应的图标到中心圆点位置即可完成导航,进入该网站。

· 动态效果的变化

Web动态导航菜单也叫浮出菜单(fly-out menu)或弹出菜单(pop-up menu),通常是鼠标悬停或者点击导航选项时出现。在PC上动态菜单一般为横向或者纵向展开。

在移动端:

1)  低端机,不支持折叠展开效果,原网页动态菜单通常处理为列表形式。通过按键控制光标逐步移动选择每个子项目。

2)  高端机,处理成手风琴折叠(Accordion)或者层级目录形式,通过点击展开二级项目。

手风琴折叠的优点:不用跳转页面;缺点:次级展示内容有限;

层级目录形式的优点:可以展示较多内容;缺点:需要进入下一级页面。

下图中亚马逊的导航采用了当前折叠展开的方式而ESPN的则采用了层级导航方式。

 

 
首页 上一页 1 2 3 4 下一页 尾页 3/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇C++11 标准 下一篇惠普宣布保留webOS转型为开放源代..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: