优界网

首页 > 教程经验 > 关于我们!单页设计的价值

关于我们!单页设计的价值

200

0

1

2015-07-04 00:03:53

萤火

分享一下,又不会怀孕!

本作品为转载作品,版权为作品原作者所有,感谢上传者的分享!

@米田的天空 以往电脑端页面盛行的时候,这东西显得还不算特别重要。除非是那些关注你业务的同学,很少会有人会看“关于我们”的内容。相反,在个人博客这里,却是了解博主的重要信息来源。

 

什么是关于我们:

这个页面说简单很简单,说复杂也很复杂。短短数字,就能将事情说的很清楚,配合些链接就能拓展内容。看似没什么内容可说,常常就堆积些文字上去。这不是做产品的思路,分析下看这个页面的受众,很容易划分出几种类型的用户,潜在的客户、员工和竞争对手。普通的用户较少会关注这部分内容,而前面说的三者,则是基本都看过你的简介(关于我们)。

  • 写给客户和员工:由于受公司性质的限制,不见得创意的形式会适合。这部分内容更重要是方便他们看到想要的信息。最好能将两者分开,客户更喜欢看到影响力和价值,数据型的图表和典型合作案例更符合他们的胃口;员工则更喜欢看到他们在这里的身影,对于潜在求职者,这也是了解企业的重要窗口。可以适当展示些工作环境、活动福利和公司动态。
  • 写给竞争对手:因为如果要做产品,肯定会拿同领域相似的产品做对比。同样,竞争对手也会通过这里了解你的动态。这主要指的是公司级的关于我们,如果是做为业余的个体或团体,这块内容就可以适当减弱。针对前者,这部分主要写的是你的优势,弱化劣势或干脆不提。

单页面的价值:

看到上面所说的数点,恐怕要将内容拆分成几个页面才能完成。上一个版本的关于我们确实是这样设计制作,由于不是自己经手,却要自己维护。会发现很多奇怪的问题 ?1)主要集中在页面片放置零散,维护成本过大。2)用户需要不断在切换窗口中寻找合适的信息,增加点击成本。

那么为什么么不将这些信息集中在单页面处理呢?单页面不一定就是简单,就只能代表一种功能,它其实也可以模拟完整的信息阅读顺序。这和一个交互原理“奥卡姆剃刀原理”很相似,都奉行一种“简单有效原理”,即不要用过多的东西就去简单的事情,较少的东西也能到达同一效果。尤其它是功能性的网页,能快速的找到对应的内容才是最重要的事情。

飞机稿VS正稿:

设计注定是苦逼的活,很少有机会一次通过。而优秀的产品也有类似的痛楚,第一版就完美的应用也不曾在世界存在过。在不断迭代更新的过程中,设计师主要看的应该是为什么要改?怎么改能快速简便达到目的。
请增加扉页

看似比较无聊的需求,尤其是针对功能性页面。大家肯定都知道,增加扉页就会增加用户的点击次数,如果它只是一幅画或一组动画,你觉得用户会真的看完么?特别是非首次用户,长期不更新会增加他们的烦躁感。

第一版是针对这种体验,做了迷你的扉页。即包含最简单功能的展示页。预想后面的背景可以轮换,且能很方便的更新型的内容。下部类似metro的模块则是对应的主要功能。

第二版是根据整体品牌形象做了视觉延伸,将整体形象做了统一性的处理。

第三版觉得功能部件显得复杂,将其去掉。只保留轮换效果,考虑的模型也是基于整体品牌形象。

正稿!单页面的信息:

经过上述几阶段的迭代,最后还是选择放弃上面的扉页挣扎。直接选择将关于我们链接到这样一个单页内。真正的单页面效果实现起来并不复杂。功能性页面无非是导航和主要信息的关系处理,最主要是关注分类和交互。

分类:主要层级是三层,第一大类是精彩大粤、广告服务和联系我们;第二类是旗下的分支信息,第三类是隐藏在内容里的轮换信息,像广告服务里的报价。依据分类,主要在色彩上做了区分,刚开始设想时采用的是多彩色,橙+蓝+绿以区分三大类的信息。在视觉端实现时,会发现整体显得很花哨。导航就是导航,右侧的内容区信息才是最重要。所以最终处理的手法是统一同一种色彩,并且拉大第一个类间的距离和缩短第二类信息的距离。保证观看时,能清楚区分它们间的关系即可,这块左侧的导航区只是保持辅助作用。

交互:交互模型沿用了招聘页的效果,即跟随滚动+当前栏目在导航区高亮的处理。具体可以看这篇文章里《为什么这样设计-招聘页改版》。在实践中,发生频繁变动的页面其实不太适合以上面的方法实现。尤其是有第三方的介入,往往会导致页面某些区域的点击失效,出现导航区断裂的现象。保持一致的交互,像最重要的导航交互都使用竖直的模型,也包含内容区广告服务的刊例价导航。而稍微次要的导航都采用横向交互,像图片轮换和合作案例。

代码:

1)主要的滚动代码是使用《侧边栏跟随滚动效果》,一个封装的很棒的js组件。基本能满足大部分随屏滚动的效果。唯一不是特别友好的地方是当需要滚动的组件在屏幕靠上的位置,精确点是610px以内的部分,在IE下会出现抖动的现象。最后不得不采用最傻瓜css代码的position:fixed。

2)组件轮换会影响到字体的显示,问了前端的同学。也不能给出完美的解释,只要删除那段js效果就正常了。通过写这段CSS,能使部分元素显示正常。

font-weight:normal;font-family:arial;

地址:http://gd.qq.com/gydyym.htm

【延伸阅读】
“关于我们”页面的设计范例和趋势
腾讯雇主品牌——招聘官网改版项目总结
如何让“关于我们”的页面设计会讲故事
 

已有1人赞过

+1赞

认真评论的都成大咖了

还可输入1000个字

  • 刚刚
  • 登录优界网 ×