• 回复: 0
walton 发布于:2016-08-31 23:37:14

Redesign再设计

对已成功的网站举行再设计——大头构造它的构造和显现情势是具有挑衅性的。偏偏有设计师喜好迎难而上,测验测验对facebook、google这些驰名网站举行见解设计。他们通常有两条思路,一是对现有问题发掘然后改进,二是提出完全创新的想法。
下面网络整理+翻译了一些设计师的见解设计成果,此中各有黑白,有的交互让人面前目今一亮,有的视觉表示优秀,有的缺乏实现的大概性,盼望这些设计以及设计思路能给各位带来一些灵感。
Facebook
Facebook是驰名的交际网络办事类网站,于2004年2月4日上线。克制2010年7月Facebook拥有超过6亿活泼用户。
设计师:Barton Smith
这是一个完成于2009年的项目,由设计师Barton Smith自发完成,其设计目标是挑衅facebook原有的情势和成果。整个设计使用黑白灰+fb品牌色蓝色掩蔽,显得干净优雅,专业成熟。
首页一些特点:
1.发布东西条:发布东西条位置牢固,使用户在任意页面都可以发布内容,克制了不需要操纵。
2.对信息流的两种筛选方式:可筛选内容提供者或内容范例。
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告白位少,但位置突出,无其他运营位置
2.视频详情页——多列布局
见解设计三:
设计师: Justin Dauer
设计师对这个设计设定的目标是:使界面简练、更加web app化。他以为,每天登陆fb人数超过175 ,000,000(2010年纪据),以是用户每天举行的大量操纵是频频、会合的。
界面一些特征:
1.两栏布局:放弃了sns网站常见的三栏布局,给feed地区更多空间
2.右侧栏会合展收户个人内容:账户名、状态更新区,个人头像,捣炙荡态, app,活动、谈天等
3.把Fb的左侧导航放到了右侧栏的My facebook板块下,更app化,视觉处置也使这些入口充足显眼
4.右侧部分模块可拖拽、自定义
见解设计四:
设计师: Jonaska
见解设计五:Telerik fdeck Client for Facebook
这是一个有视觉打击力的界面,设计对峙了fb蓝,但采取了相对较重的颜色和质感,以致一点点的拟物(如批评框、底部谈天窗口)。检察原图
一些小细节也不错,如:发表框的设计,赞、批评部分的设计
设计师: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
设计师: 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的链接蓝。
设计师以为,在不美观看视破瘫,有两个很大的问题:
(1)无法不美观看视频的同时搜刮查找其他视频
(2)在阅读批评时总要向下转动,而视频就被滚出屏幕上方了。
以是见解设计试图办理这两个问题。如下图所示,设计中有3个单独的转动列,大左至右依次是搜刮,视频和批评。当开始举行搜刮后,左栏会扩展出筛选选项。当选择了一个视破瘫,视剖ё仝中栏加载。当选择视频后,左栏中增加一个tab,展示相干影片。
这样的设计部分受到了平板电脑使用风俗的影响,随着移动配置的广泛应用,web设计也可以大中吸取得当的体验移植过来。
批评的展示方式G+的照片板块也在使用。
设计师用网格罗列情势来展示搜刮结果,而不是每条结果单独有效一行。使一屏内可看到更多搜刮结果。同时使用了更大的缩略图,显得内容更丰富,更具吸引力。
搜刮结果页的另一个变化是搜刮筛选项。Youtube当前版本需要点击才华展开搜刮筛选项,而展开后又占用过多空间。以是下图设计对搜刮筛选项举行了整合,直接展示在搜刮结果顶部。
设计师的详细先容请见http://joshcollie.com/YouTube-redesign/
其他见解设计
Twitter
见解设计:MetroTwit
见解设计一:Facebook Facelift
设计师:Pixel Tucker
这个设计寻求大致、少便是多,视觉风格受Windows Phone 7的Metro语言影响。
3.提供了两种feed展示情势:紧凑(compact)和完备(full)模式。
皮肤和模块都可以自定义。
Google
Google大要是天下上最驰名的网站之一了吧。它是环球最大的并且最受欢迎的搜刮引擎。同时google另有浩繁其他产品,包罗gmail、map、google+,以及chrome、android等。
设计师: FloxDesign
见解有点沟通bing,使用大图片背景,画面很美
3.搜刮结果页——运用网格罗列
见解设计二:
设计师: Craig Reville
见解设计二:IMDB Website Redesign
更多设计图见http://dribbble.com/CraigReville/projects/7692-Google-Re-Design
Amazon
见解设计
设计师: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/
亚马逊,是美国最大的一家电子商务公司,也是网络上最夙开始电子商务的公司之一。亚马逊创建于1995年,一起头只策划网络的册本贩卖,如今则扩及了范围相称广的其他产品,包罗了音乐、软件、电子产品、衣服、家具等。
http://www.behance.net/gallery/Facebook-Facelift/314489
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/
http://www.informationarchitects.jp/en/ias-2006-facebook-designs-redesigned/
作者:Pearl
文章源头:腾讯CDC 转载请注明出处链接。
扫一扫,关注设计动量,随时参与互动。
我要评论
  • 小糖心