再设计Redesign

标签: 视觉设计 fackbook Redesign 在设计 网页设计 | 发表时间:2011-10-28 11:53 | 作者:CDCer Mark
出处:http://cdc.tencent.com

  一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来。

  对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的。偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计。他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法。

  下面收集整理+翻译了一些设计师的概念设计成果,其中各有优劣,有的交互让人眼前一亮,有的视觉表现优秀,有的缺乏实现的可能性,希望这些设计以及设计思路能给各位带来一些灵感。

 

Facebook
  Facebook是著名的社交网络服务类网站,于2004年2月4日上线。截至2010年7月Facebook拥有超过6亿活跃用户。

 

概念设计一:Facebook Facelift
设计师:Barton Smith

  这是一个完成于2009年的项目,由设计师Barton Smith自发完成,其设计目的是挑战facebook原有的形式和功能。整个设计使用黑白灰+fb品牌色蓝色点缀,显得干净优雅,专业成熟。

  首页一些特点:
  1.发布工具条:发布工具条位置固定,使用户在任意页面都可以发布内容,避免了不必要操作。
  2.对信息流的两种筛选方式:可筛选内容提供者或内容类型。
  3.提供了两种feed展示形式:紧凑(compact)和完整(full)模式。
  4.实时feed:实时feed固定在页面底部,滚动展示好友的最近更新,鼠标经过时展开。避免了G+的实时feed造成整个页面跳动的问题。

  照片feed的排版形式整齐清晰。个人主页更加无缝地集成到网站中,和首页布局统一。

 

 

概念设计二:iA’s 2006 Facebook Designs, Redesigned
设计师:IA

  这次创新设计开始于2006年12月,是著名团队IA对fb进行的再设计,未正式发布,只在其博客上有草图发表。
  他们的基本概念是:采用邮箱式(mail-application like)的界面,折叠的三栏式布局逐级展开,清晰的将导航、信息流、回应三种内容区别开。如下图所示:导航(左),信息流(中),评论(右)。

  默认状态下,只能看到每条feed的两条评论,要查看全部评论,需点击单条feed或者对应的评论区域。

  设计非常具有前瞻性,后来Twitte也采用了这种方式,两栏折叠展开。相比fb,twitter其实更适用这种方式,因为fb强调好友间的互动,而twitter更强调信息的快速流动。

  对比IA 06年的概念设计和2010年的fb,可以发现:
  1.IA的品牌标志可用空间更大
  2.IA 评论占用的空间更大
  3.早于当时的fb,IA将左导航进行分组归类,更加有序
  4.IA广告位少,但位置突出,无其他运营位置

 

概念设计三:
设计师: Justin Dauer

  设计师对这个设计设定的目标是:使界面简洁、更加web app化。他认为,每天登陆fb人数超过175 ,000,000(2010年数据),所以用户每天进行的大量操作是重复、集中的。

  界面一些特征:
  1.两栏布局:放弃了sns网站常见的三栏布局,给feed区域更多空间
  2.右侧栏集中展示用户个人内容:账户名、状态更新区,个人头像,当前状态, app,活动、聊天等
  3.把Fb的左侧导航放到了右侧栏的My facebook板块下,更app化,视觉处理也使这些入口足够显眼
  4.右侧部分模块可拖拽、自定义

 

概念设计四:
设计师: Jonaska

  这是一个有视觉冲击力的界面,设计坚持了fb蓝,但采用了相对较重的颜色和质感,甚至一点点的拟物(如评论框、底部聊天窗口)。查看原图

  一些小细节也不错,如:发表框的设计,赞、评论部分的设计。

 

概念设计五:Telerik fdeck Client for Facebook
设计师:Telerik

  严格说来,这不只是一个“概念设计”,而是一个已发布的beta版桌面客户端——Microsoft Client for Facebook Beta。不过因为它的交互和视觉表现上都与传统fb大相径庭,而且亮点多多,所以在这里一并提出。
  Feed 的展示形式除了常规的按时间线列表排列以外,它还提供了网格(grid)形式和图片feed(photofeed)展示,如下:

 

 

其他概念设计:

 

IMDb
IMDb全称Internet Movie Database,互联网电影资料库。是一个关于电影演员、电影、电视节目、电视明星、电子游戏和电影制作的在线数据库。IMDb的资料中包括了影片的众多信息,演员,片长,内容介绍,分级,评论等。截至2010年10月8日,IMDb共收录了1,692,407部作品资料以及3,797,214名人物资料。

概念设计一:IMDB User Interface Concept——film page
设计师:Vladimir Kudinov

  为什么要对IMDB进行再设计?

  设计师认为现有的IMDB信息太多,大量的信息未经组织堆砌在网站上,让人找不着北。而实际上并不需要这么多的信息,浏览这类网站的人往往更关注图片、视频。所以设计的重点放在使界面简单有序,让用户轻松浏览,而不是痛苦的寻找、阅读。

  用户在界面上看到的信息主要是:照片、演员、预告片、故事情节等。点击向右的箭头进入下一屏。另外,“在线观看”、“到Amazon购买”的选项也整合到了界面中。

其他更多界面请见http://www.behance.net/gallery/IMDB-Filmpage-Concept/1678386

 

概念设计二:IMDB Website Redesign
设计师: Rob Atomic

  IMDB的问题在于内容太多,以至于显得杂乱难以使用,因此设计师对网站信息架构进行了梳理。

 

 

Youtube
YouTube是全球最大的视频分享网站,2005年2月,由三名PayPal的前任员工所创站,2006年11月,Google以16.5亿美元收购了YouTube。

概念设计一:YOUTUBE 2011 CONCEPT
设计师: Josh Collie

  设计师本人是youtube的忠实用户,在使用过程中对网站的一些体验不满,于是决定自己动手设计。概念版中,设计师做了这样三件事:
  1.视频详情页——简化
  YouTube再设计的第一步是进行简化,去掉使用不足的功能,清理界面元素,以便使用户的注意力集中在视频上,而不是周围的细节上。如下图。评论间距也进行了调整,鼠标hover后,操作才出现。另外,整站的头部配合google产品,加入了细微的灰色渐变和google的链接蓝。

  2.视频详情页——多列布局
  设计师认为,在观看视频时,有两个很大的问题:
  (1)无法观看视频的同时搜索查找其他视频
  (2)在阅读评论时总要向下滚动,而视频就被滚出屏幕上方了。

  所以概念设计试图解决这两个问题。如下图所示,设计中有3个单独的滚动列,从左至右依次是搜索,视频和评论。当开始进行搜索后,左栏会扩展出筛选选项。当选择了一个视频时,视频在中栏加载。当选择视频后,左栏中增加一个tab,展示相关影片。

  这样的设计部分受到了平板电脑使用习惯的影响,随着移动设备的广泛应用,web设计也可以从中吸取适当的体验移植过来。
  评论的展示方式G+的照片板块也在使用。

3.搜索结果页——运用网格排列
  设计师用网格排列形式来展示搜索结果,而不是每条结果单独占用一行。使一屏内可看到更多搜索结果。同时使用了更大的缩略图,显得内容更丰富,更具吸引力。
  搜索结果页的另一个变化是搜索筛选项。Youtube当前版本需要点击才能展开搜索筛选项,而展开后又占用过多空间。所以下图设计对搜索筛选项进行了整合,直接展示在搜索结果顶部。

  设计师的详细介绍请见http://joshcollie.com/YouTube-redesign/

 

其他概念设计:

 

Twitter
概念设计:MetroTwit
设计师:Pixel Tucker

  这个设计追求简单、少即是多,视觉风格受Windows Phone 7的Metro语言影响。
  皮肤和模块都可以自定义。

 

Google
Google大概是世界上最著名的网站之一了吧。它是全球最大的并且最受欢迎的搜索引擎。同时google还有众多其他产品,包括gmail、map、google+,以及chrome、android等。

概念设计一:
设计师: FloxDesign
  概念有点类似bing,使用大图片背景,画面很美

 

 

概念设计二:
设计师: Craig Reville


更多设计图见http://dribbble.com/CraigReville/projects/7692-Google-Re-Design

 

Amazon
  亚马逊,是美国最大的一家电子商务公司,也是网络上最早开始电子商务的公司之一。亚马逊成立于1995年,一开始只经营网络的书籍销售,现在则扩及了范围相当广的其他产品,包括了音乐、软件、电子产品、衣服、家具等。

概念设计:
设计师:Trevor Cleveland

  设计是为了解决问题而存在的。Amazon的问题同样也是信息过多,导航类目繁多,图文混杂。它使用的流动布局(fluid)适合于小屏幕,而在越来越多的大屏幕、宽屏幕上看起来就显得留白过多,排版更加混乱难以阅读。因此设计师提出了以下几种方案。

  更多界面请见http://www.behance.net/gallery/Amazoncom-Homepage-Redesign-Exploration/1109537

 

朋友网
概念设计:
设计师:pearlfu

  今年4、5月,我抽业余时间尝试着对朋友网做概念设计,将理想中的SNS通过设计稿表达。由于抛开了平日做设计需求的种种限制,过程非常开心,设计师brella、wendy也一起出谋划策。虽然还存在着许多问题,但在此分享出来,希望能起到抛砖引玉的作用。

  一直认为人是社区内最核心的元素,认识人、了解人、与人互动……社区的一切都应该围绕着人来展开。因此概念设计的基本理念是:以人为核心——以人为核心来导航、以人为核心筛选信息。

  社区分为三大部分:社区好友、游戏好友、发现好友。其中游戏好友、发现好友分别满足社区内交友和游戏两大最旺盛的需求。

  界面的基本结构是:顶部导航、左侧人、右侧内容。操作基本在一个界面内完成。

  其他一些小特点:
  1.人物排版:头像大小根据你和好友间的亲密度有所不同,越关注、互动越多的好友头像越大,这样能直观的了解到你最关注的好友以及他的新鲜事。
  2.将游戏好友和社区好友分开:以保证关系链的纯净,也为游戏玩家提供方便的加好友方式
  3.在地图上直观的发现好友,设想能查找附近的人,也能直接在地图上画圈,圈出一个区域内的人
  4.人气推荐:图文混排,希望用户在漫游、游戏般的环境中发现好友。

  写在最后:优秀的设计总能在功能、可用性和美观之间取得平衡。对于以上设计,你可能会有不同的看法和偏好,希望它们能对你的工作有一点点帮助、启发。

参考资料及相关链接:
http://www.hongkiat.com/blog/concept-design-facelift-notable-websites/
http://www.behance.net/gallery/Facebook-Facelift/314489
http://www.informationarchitects.jp/en/ias-2006-facebook-designs-redesigned/
http://www.telerik.com/products/fdeck.aspx
http://www.behance.net/gallery/IMDB-Filmpage-Concept/1678386
http://joshcollie.com/YouTube-redesign/
http://www.metrotwit.com/

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=4416)

相关 [设计 redesign] 推荐:

再设计Redesign

- Mark - 腾讯CDC
  一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来.   对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法.

Redesign——iphone中的“再”设计

- FreeQs++ - 用户体验与交互设计
很久以前看过一本书,讲的是一些设计师如何把已有产品、品牌进行重新设计,既保持原有特色,又焕然一新. 工作中似乎充满着“再”设计,无论是网站改版,还是外面产品的复制模仿,或是一些成功产品的跨平台、操作系统的移植….. 尤其,随着移动app的发展和升温,PC端的产品有逐渐向手机端移植的趋势. 如何将一款pc端产品成功移植到手机端,必然要对交互操作进行“再”设计.

为了设计而设计

- - 幻风阁|kent.zhu'sBlog
我有个习惯,每天晚上睡前会搜罗一遍最新的App用用. 最开始的时候ios的App还相对比较朴实,强调功能的实用性,后来不知何故吹起一阵ios的App必须足够精美的怪风. 于是乎,各类App纷纷上演换装游戏,一个比一个做的精美,即使是一个很工具性的应用也把自己浓妆艳抹的往坐台小姐的风格搞……. 上周末跟Tony和Angela在下厨房喝茶闲聊,我说目前的移动产品设计可以分为2类,一类是做给用户用的,一类是做给设计师们欣赏与收藏的.

杯盖设计

- Yu - 创意设计-有趣、时尚、另类的创意
微向上的设计,在倒水完毕的时候可以让水滴顺着杯盖回流到杯子中,而不会随意的滴下来. 虽然是细小的设计,但是考虑的却是生活的便利.

简约设计

- - 淘宝网通用产品团队博客
写下这个标题,那么首先得要明确什么叫简约. 简约就是让用户操作简单,让用户更快的达到自己的目的. 一个产品在于解决一个需求,如何让用户最好的完成需求就成为一个产品经理首先得要解决的问题. 那么在日常工作中,我们又有什么可以做的呢. 在《简约至上》里面有四种策略,但是有的东西太高级了,在平时的工作未必能够用得上,所以我自己来提炼一下,看看日常工作中能够遇到并且可以解决问题的方法.

HBase表设计

- - 互联网 - ITeye博客
默认情况下,在创建HBase表的时候会自动创建一个region分区,当导入数据的时候,所有的HBase客户端都向这一个region写数据, 直到这 个region足够大了才进行切分. 一种可以加快批量写入速度的方法是通过预先创建一些空的regions,这样当数据写入HBase时,会按 照 region分区情况,在集群内做数据的负载均衡.

ODS设计

- - 开源软件 - ITeye博客
在一般的数据仓库应用系统中,根据系统体系结构的不同,数据仓库设计的内容和范围不尽相同,并且设计方法也不尽相同,下面的两幅图示分别表示带有ODS的 数据仓库应用系统体系结构和不带ODS的数据仓库应用系统体系结构. 本文将说明两个体系结构上的差异以及这种差异造成的设计方法的不同,并且重点介绍带有 ODS的体系结构中数据仓库的设计方法.

移动产品设计之设计

- crystal - 互联网的那点事
移动产品设计最大的差异点在于用户使用场景的变化,场景的变化引发了交互方式巨大的变化,从而也使得信息呈现方式有所不同,再加上硬件设备的差异,最终使得2者千差万别了. 所以,移动产品设计之设计应该首先从用户的使用场景出发,同时考虑用户的硬件设备差异,综合以上2点去帮助用户完成某个任务. 按照我的理解,场景、任务、用户可以称之为设计的三要素,每一个设计实际上都是试图去帮助用户在某个场景下完成某个任务的.