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

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

什么是关于我们：

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

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

单页面的价值：

看到上面所说的数点，恐怕要将内容拆分成几个页面才能完成。上一个版本的关于我们确实是这样设计制作，由于不是自己经手，却要自己维护。会发现很多奇怪的问题  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

【延伸阅读】
“关于我们”页面的设计范例和趋势
腾讯雇主品牌——招聘官网改版项目总结
如何让“关于我们”的页面设计会讲故事
 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。

【特色推荐】
设计讲座：定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音（YY频道：15335158）分享实战经验。
设计微博：我们拥有粉丝量25万的人气微博@优秀网页设计 ，欢迎大家关注及时获取设计资源。
设计导航：史上最赞最全面的设计师网址导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：