您的位置: 首页 > 资讯 > 设计

提升设计品质的8种布局方案

艺术中国 | 时间: 2010-04-14 14:47:14 | 文章来源: 中国设计之窗

 

2.标签卡导航元素

本质上标签卡导航和滑门效果是差不多的技巧。它们都能帮你把一大片内容放到一小块区域里。标签卡导航很常见,但也有很多不常见的运用方式。我们这里 关注的是在一个页面内部的标签卡,而不是用于在不同页面之间跳转的标签样式主导航。标签卡很明显地将内容划分到不同区块,最终又把他们融合到占地面积很小 的一个区块中。

标签卡的样式范例出众的背景,大的可点击区域,明显的分割第一个例子来自 Mac Pro网站 的“Performance”部分,其标签元素的组织非常值得学习。这些标签卡上的文字都十分易读,可点击区域很大,各标签视觉上的区分也很明显,这正是 大部分用户期待的样式啊。你也应该能注意到,当前标签卡上还有着十分微妙的渐变背景,与主内容区块很好地融合在了一起。未激活的标签背景则略暗,主内容区 块在其上有微弱的投影,这种做法加强了深度感和立体效果。十分简单而有效的技巧。

Screenshot

按钮区分的简洁标签卡

以下是另一个利用标签卡紧凑地展示信息的实例。根据 Atebits 的布局结构,介绍性内容的空间被挤压,不太适合做成多区块样式。所以他们介绍内容的三大部分被组织到了标签中,保持了布局的整洁有序。再一次地,当前标签 卡的背景与主内容区融合,不活动标签卡则是较暗的灰色背景。你同样也会发现标签卡之间有着漂亮的分割线,使得每个标签卡看起来都像是独立的按钮。

Screenshot

   上一页   1   2   3   4   5   6   7   下一页  


 

凡注明 “艺术中国” 字样的视频、图片或文字内容均属于本网站专稿,如需转载图片请保留 “艺术中国” 水印,转载文字内容请注明来源艺术中国,否则本网站将依据《信息网络传播权保护条例》维护网络知识产权。

打印文章    收 藏    欢迎访问艺术中国论坛 >>
发表评论
用户名   密码    

留言须知

 
 
延伸阅读