一个网站的核心是它的功能和内容，而设计则决定了这些功能、内容如何被组织和展现出来。 对已成功的网站进行再设计重新构造它的组织和展现形式是具有挑战性的。偏偏有设计师喜欢迎难而上，尝试对facebook、google这些著名网站进行概念设计。他们通常有两条思路，一是对现有问题挖掘然后改进，二是提出完全创新的想法。 下面收集整理翻译了一些设计师的概念设计成果，其中各有优劣，有的交互让人眼前一亮，有的视觉表现优秀，有的缺乏实现的可能性，希望这些设计以及设计思路能给各位带来一些灵感。 Facebook Facebook是著名的社交网络服务类网站，于2004年2月4日上线。截至2010年7月Facebook拥有超过6亿活跃用户。 概念设计一：FacebookFacelift 设计师：BartonSmith 这是一个完成于2009年的项目，由设计师BartonSmith自发完成，其设计目的是挑战facebook原有的形式和功能。整个设计使用黑白灰fb品牌色蓝色点缀，显得干净优雅，专业成熟。 首页一些特点： 1发布工具条：发布工具条位置固定，使用户在任意页面都可以发布内容，避免了不必要操作。 2对信息流的两种筛选方式：可筛选内容提供者或内容类型。 3提供了两种feed展示形式：紧凑（compact）和完整（full）模式。 4实时feed：实时feed固定在页面底部，滚动展示好友的最近更新，鼠标经过时展开。避免了G的实时feed造成整个页面跳动的问题。 照片feed的排版形式整齐清晰。个人主页更加无缝地集成到网站中，和首页布局统一。 概念设计二：iA’s2006FacebookDesigns，Redesigned 设计师：IA 这次创新设计开始于2006年12月，是著名团队IA对fb进行的再设计，未正式发布，只在其博客上有草图发表。 他们的基本概念是：采用邮箱式（mailapplicationlike）的界面，折叠的三栏式布局逐级展开，清晰的将导航、信息流、回应三种内容区别开。如下图所示：导航（左），信息流（中），评论（右）。 默认状态下，只能看到每条feed的两条评论，要查看全部评论，需点击单条feed或者对应的评论区域。 设计非常具有前瞻性，后来Twitte也采用了这种方式，两栏折叠展开。相比fb，twitter其实更适用这种方式，因为fb强调好友间的互动，而twitter更强调信息的快速流动。 对比IA06年的概念设计和2010年的fb，可以发现： 1IA的品牌标志可用空间更大 2IA评论占用的空间更大 3早于当时的fb，IA将左导航进行分组归类，更加有序 4IA广告位少，但位置突出，无其他运营位置 概念设计三： 设计师：JustinDauer 设计师对这个设计设定的目标是：使界面简洁、更加webapp化。他认为，每天登陆fb人数超过175，000，000（2010年数据），所以用户每天进行的大量操作是重复、集中的。 界面一些特征： 1两栏布局：放弃了sns网站常见的三栏布局，给feed区域更多空间 2右侧栏集中展示用户个人内容：账户名、状态更新区，个人头像，当前状态，app，活动、聊天等 3把Fb的左侧导航放到了右侧栏的Myfacebook板块下，更app化，视觉处理也使这些入口足够显眼 4右侧部分模块可拖拽、自定义 概念设计四： 设计师：Jonaska 这是一个有视觉冲击力的界面，设计坚持了fb蓝，但采用了相对较重的颜色和质感，甚至一点点的拟物（如评论框、底部聊天窗口）。查看原图 一些小细节也不错，如：发表框的设计，赞、评论部分的设计。 概念设计五：TelerikfdeckClientforFacebook 设计师：Telerik 严格说来，这不只是一个概念设计，而是一个已发布的beta版桌面客户端MicrosoftClientforFacebookBeta。不过因为它的交互和视觉表现上都与传统fb大相径庭，而且亮点多多，所以在这里一并提出。 Feed的展示形式除了常规的按时间线列表排列以外，它还提供了网格（grid）形式和图片feed（photofeed）展示，如下： 其他概念设计： IMDb IMDb全称InternetMovieDatabase，互联网电影资料库。是一个关于电影演员、电影、电视节目、电视明星、电子游戏和电影制作的在线数据库。IMDb的资料中包括了影片的众多信息，演员，片长，内容介绍，分级，评论等。截至2010年10月8日，IMDb共收录了1，692，407部作品资料以及3，797，214名人物资料。 概念设计一：IMDBUserInterfaceConceptfilmpage 设计师：VladimirKudinov 为什么要对IMDB进行再设计？ 设计师认为现有的IMDB信息太多，大量的信息未经组织堆砌在网站上，让人找不着北。而实际上并不需要这么多的信息，浏览这类网站的人往往更关注图片、视频。所以设计的重点放在使界面简单有序，让用户轻松浏览，而不是痛苦的寻找、阅读。 用户在界面上看到的信息主要是：照片、演员、预告片、故事情节等。点击向右的箭头进入下一屏。另外，在线观看、到Amazon购买的选项也整合到了界面中。 其他更多界面请见http：www。behance。netgalleryIMDBFilmpageConcept1678386 概念设计二：IMDBWebsiteRedesign 设计师：RobAtomic IMDB的问题在于内容太多，以至于显得杂乱难以使用，因此设计师对网站信息架构进行了梳理。 Youtube YouTube是全球最大的视频分享网站，2005年2月，由三名PayPal的前任员工所创站，2006年11月，Google以16。5亿美元收购了YouTube。 概念设计一：YOUTUBE2011CONCEPT 设计师：JoshCollie 设计师本人是youtube的忠实用户，在使用过程中对网站的一些体验不满，于是决定自己动手设计。概念版中，设计师做了这样三件事： 1视频详情页简化 YouTube再设计的第一步是进行简化，去掉使用不足的功能，清理界面元素，以便使用户的注意力集中在视频上，而不是周围的细节上。如下图。评论间距也进行了调整，鼠标hover后，操作才出现。另外，整站的头部配合google产品，加入了细微的灰色渐变和google的链接蓝。 2视频详情页多列布局 设计师认为，在观看视频时，有两个很大的问题： （1）无法观看视频的同时搜索查找其他视频 （2）在阅读评论时总要向下滚动，而视频就被滚出屏幕上方了。 所以概念设计试图解决这两个问题。如下图所示，设计中有3个单独的滚动列，从左至右依次是搜索，视频和评论。当开始进行搜索后，左栏会扩展出筛选选项。当选择了一个视频时，视频在中栏加载。当选择视频后，左栏中增加一个tab，展示相关影片。 这样的设计部分受到了平板电脑使用习惯的影响，随着移动设备的广泛应用，web设计也可以从中吸取适当的体验移植过来。 评论的展示方式G的照片板块也在使用。 3搜索结果页运用网格排列 设计师用网格排列形式来展示搜索结果，而不是每条结果单独占用一行。使一屏内可看到更多搜索结果。同时使用了更大的缩略图，显得内容更丰富，更具吸引力。 搜索结果页的另一个变化是搜索筛选项。Youtube当前版本需要点击才能展开搜索筛选项，而展开后又占用过多空间。所以下图设计对搜索筛选项进行了整合，直接展示在搜索结果顶部。 设计师的详细介绍请见http：joshcollie。comYouTuberedesign 其他概念设计： Twitter 概念设计：MetroTwit 设计师：PixelTucker 这个设计追求简单、少即是多，视觉风格受WindowsPhone7的Metro语言影响。 皮肤和模块都可以自定义。 Google Google大概是世界上最著名的网站之一了吧。它是全球最大的并且最受欢迎的搜索引擎。同时google还有众多其他产品，包括gmail、map、google，以及chrome、android等。 概念设计一： 设计师：FloxDesign 概念有点类似bing，使用大图片背景，画面很美 概念设计二： 设计师：CraigReville 更多设计图见http：dribbble。comCraigRevilleprojects7692GoogleReDesign Amazon 亚马逊，是美国最大的一家电子商务公司，也是网络上最早开始电子商务的公司之一。亚马逊成立于1995年，一开始只经营网络的书籍销售，现在则扩及了范围相当广的其他产品，包括了音乐、软件、电子产品、衣服、家具等。 概念设计： 设计师：TrevorCleveland 设计是为了解决问题而存在的。Amazon的问题同样也是信息过多，导航类目繁多，图文混杂。它使用的流动布局（fluid）适合于小屏幕，而在越来越多的大屏幕、宽屏幕上看起来就显得留白过多，排版更加混乱难以阅读。因此设计师提出了以下几种方案。 更多界面请见http：www。behance。netgalleryAmazoncomHomepageRedesignExploration1109537 朋友网 概念设计： 设计师：pearlfu 今年4、5月，我抽业余时间尝试着对朋友网做概念设计，将理想中的SNS通过设计稿表达。由于抛开了平日做设计需求的种种限制，过程非常开心，设计师brella、wendy也一起出谋划策。虽然还存在着许多问题，但在此分享出来，希望能起到抛砖引玉的作用。 一直认为人是社区内最核心的元素，认识人、了解人、与人互动社区的一切都应该围绕着人来展开。因此概念设计的基本理念是：以人为核心以人为核心来导航、以人为核心筛选信息。 社区分为三大部分：社区好友、游戏好友、发现好友。其中游戏好友、发现好友分别满足社区内交友和游戏两大最旺盛的需求。 界面的基本结构是：顶部导航、左侧人、右侧内容。操作基本在一个界面内完成。 其他一些小特点： 1人物排版：头像大小根据你和好友间的亲密度有所不同，越关注、互动越多的好友头像越大，这样能直观的了解到你最关注的好友以及他的新鲜事。 2将游戏好友和社区好友分开：以保证关系链的纯净，也为游戏玩家提供方便的加好友方式 3在地图上直观的发现好友，设想能查找附近的人，也能直接在地图上画圈，圈出一个区域内的人 4人气推荐：图文混排，希望用户在漫游、游戏般的环境中发现好友。 写在最后：优秀的设计总能在功能、可用性和美观之间取得平衡。对于以上设计，你可能会有不同的看法和偏好，希望它们能对你的工作有一点点帮助、启发。 参考资料及相关链接： http：www。hongkiat。comblogconceptdesignfaceliftnotablewebsites http：www。behance。netgalleryFacebookFacelift314489 http：www。informationarchitects。jpenias2006facebookdesignsredesigned http：www。telerik。comproductsfdeck。aspx http：www。behance。netgalleryIMDBFilmpageConcept1678386 http：joshcollie。comYouTuberedesign http：www。metrotwit。com （本文出自TencentCDCBlog，转载时请注明出处）
