现今的网站越来越注重多功能的应用了,如在web中添加音乐、视频、相册、地图等元素,来满足与丰富自己网站的内容介绍和功能应用。

但是这些元素往往会与普通的web布局格格不入。有些还不是你能控制的,如在网页中插入的地图。一般来讲web中的地图应用都是来自于第三方地图接口API。里面的元素可以修改和控制的很少,只能你适应它!

而以下的6个例子中将会介绍一下,网站中功能与布局的合理搭配,为你的web设计打开思路。

ps: 讲解以图片为例,不排除网站实际变动情况!

1 Traineo

traineo.com

6个功能丰富的网站UI给你设计灵感

Traineo看起来像一个典型的早期Web2.0的布局,内容与头部可以轻松的区分开来,颜色形成了鲜明的对比让用户可以很快的找到主题内容。并同时突出了标题的内容。

这个一个非常好的例子,当有大量的内容信息与web功能时,可以同时保证两者的突出。并且给人一种清爽的感觉,而不是杂乱无章。

2 iStockphoto

istockphoto.com

6个功能丰富的网站UI给你设计灵感

iStockphoto 是一个图片的主题,相信这种布局在国内已经见过很多了。如:泡泡网

他的一大好处就是实现了功能与内容的分离。用户可以很清楚的知道图片的分类、大小、种类的选项位置,作为一个销售网站对与能让用户找到自己想要的产品是非常重要的。正确匹配的机率越大,那么你成功销售产品的机率就越大。

3 Rememble

rememble.com

6个功能丰富的网站UI给你设计灵感

Rememble是一个典型的web2.0设计,友好且圆润的边角让人看起来很舒服。右侧的登入框与按钮与侧边栏对齐,在用户浏览的时候会主动的把左右给分开,左上部分告诉我们怎么加入这个网站,左下部分则细分网站拥有的功能。并以文字加图片的形式表现,既实现了网站上下部分的统一性,又使描述更具有生动性。而导航栏下空白处中的标题描述明显而不突兀!

4 ComponentArt

6个功能丰富的网站UI给你设计灵感

这个网站使用了大量的图文混排,但他的特点是每一排的混排方式都是不同的,这是这个网站的突出点。如果以一个介绍软件功能界面的网站的话,这是一种非常好的选择。不会因重复的排列而使用户不耐烦,我们都是知道,虽然图文混排是提升阅读率的一个非常好的手段,但大了的采用难免会让人反感。虽然看着好看·····但是很难突出主题内容。

5 Purina

6个功能丰富的网站UI给你设计灵感

这个也是一种毕竟常见的布局结构,窄小的布局是内容更加紧凑,能让人一目了然。导航栏下面的相册也是恰到何处,特别是LOGO与导航栏的结合,这样就省去了多余的内容。

左下方是功能模块分栏。对于企业或者业务性的网站非常适用!

6 Burstcast

6个功能丰富的网站UI给你设计灵感
Burstcast 不仅页面简洁,且左右为产品图片与产品视频介绍,能让人看到产品就想自然而然的去了解产品的具体视频。可以明显的增加视频浏览率。下面为具体的内容介绍,去掉了导航栏设计,因为本身用户只要了解这一页信息就足以。



属性标签:

欢迎留言

页面生成消耗的时间 0.346 秒,此页面一共查询了 114 次数据库!缓存时间:2019-09-15 21:56:03你的IP为:34.231.247.139