标签归档:设计

维基百科的首页(2)

索引:

维基百科的首页(1)

维基百科的首页(2)

维基百科的首页(3)

沿承前一篇所说,平日里,维基百科首页各栏目板块中出现内容的绝大多数,取决于用户贡献,借助人工和计算机工具的帮助来实现首页的日常更新。这是维基式大规模协作凝聚在一个页面上的成果。

于此同时,维基百科——出于与许多商业网站类似或不同的目的——也有着对整个页面设计进行改版的需求。首页改版的突出特点是低频次、较大动作、需要大范围的意见,这样的变化与日常的栏目内容更新相比,活动的筋骨大得多,社群所需要做的是更多的商讨、协调和实质性的编辑活动,而且所有这些并非来自组织流程严密的企业或机构。

这就是有意思的地方。

如果你注意看,会发现最近一段时间,中文维基百科首页改版的社区公告信息正在站内顶端滚动,提示着一个新的议题正在社区内搅动着网站运营的齿轮。

一些历史

关于首页的历史,最早可以追溯到2001年,当时的首页存于旧服务器(zh.wikipedia.com)中,简陋且文字为英文。翌年10月,在转移至新服务器之后,中文维基百科——尽管依旧非常简陋——有了新的域名(zh.wikipedia.org)和汉字化的首页。

2001年7月24日的中文维基百科首页

2001年7月24日的中文维基百科首页,查阅自archive.org的WayBackMachine。页面上,英文表达的歉意、老版的维基logo和文末的“维奇百科”都是亮点。

在此后百科条目和维基社区不断壮大和活跃的日子里,首页页面也在悄然经历着迅速的变化:CSS修饰的加入、简繁汉字的转换、栏目的更迭……甚至连口号也在为了愈加达意而变化着。

『涓涓不塞,将为江河。』

『海不让水,以成其大。』

『海纳百川,有容乃大。』

——首页前后三版的口号

2004年2005年和2006年,中文维基百科首页的设计出现了三次改版,均是在经过(半个月至三个月时间不等的)讨论、投票之后得出最终结论。相较于几年前,这个页面的观赏性和实用性无疑都得到了大的提升,而且非常明显。这是规模协作所取得成果的一个剖面,那些填充其中的,饱满而晶莹的果肉的成长,既要归功于那些设计方案的贡献者,也少不了参与讨论、投票的维基人。

2009 – 2010年首页改版计划

上一段提到的2006年首页设计,维持了三年半之久。不得不说这是一款优秀的设计——底色合理而富有变化,文本的排布更适合阅读,内容也足够丰富。这个方案由维基人究极人类贡献。之所以提到设计者的id,是因为09 – 10年的改版最终应用方案的设计同样出自于其手,只不过当时他已使用另一个名称。

2009 – 2010年的改版大致起始于2009年10月,有维基编辑者在社群的互助客栈中提出了对首页进行设计改版的建议,建议增加『面对读者的资料请求』和『社团活动消息』两部分内容以提升首页价值。

这个建议迅速得到了众多维基编辑者的相应,更大范围的讨论开始展开,这个范围体现在参与讨论的人数、改版议题之方案的数量和深度上。讨论一直延续了几个月,在此期间,专门的改版计划页面被建立以用于计划的实践,各式设计作品被提交以投入问答或众议形式的讨论。至2010年1月底,一共提交23个方案(含保留原设计)。

第一阶段的投票自1月15日始,至28日终,历两周时间,按简单多数制筛出票数最高的五个方案作品。其中Upsuper(即改名的维基人究极人类)的作品在第一阶段获得最高的91票,维持原有首页设计的提议获51票排第二。

2月1日至10日为第二阶段投票,投票规则小做变化,不过依旧以多数原则为标准。Upsuper的方案不出意外以73个有效支持票成为新首页的设计中标方案。

2010年3月27日,这个以白、浅蓝为主色调的设计正式披上首页。这个版本在上一篇博文中提到,清新有序,相当悦目,撰写本文的今天依旧应用在中文维基百科的首页上。

2012年12月20日的中文维基百科首页

2012年12月20日的中文维基百科首页

 2012年首页设计建议

于是又到了近三年之后。

『中文版首頁也用了快三年了,不妨藉著中文維基百科十週年的機會,在未來數個月籌備更換新首頁的工作,反正目前英文那邊有大量作品可以參詳。』

——维基人Kevinhksouth

2012年11月初,正值英文版首页改版,也趁着中文维基百科十周年的当口,又有人在互助客栈提出更新首页的建议,立马得到不少人的支持。于是,组织者和参与者又一次行动了起来。

12月初,针对首页展示内容的构想讨论结束。『(增加)更多有助提高参与度的连结』、『移除颜色选择按钮』等建议得到『普遍赞成』,一些建议没有共识,另一些则遭致大多数人反对。此后,立足于这个结论展开为期约一个半月的设计提交阶段。截至旧年年底,共有14套设计提交(不包括一个作者自行撤回的方案)。一些方案由作者参考其他语言版本的维基百科首页设计而成,或参考其他维基人作品的元素、概念或建议。

照例,其他无暇贡献设计方案或不会设计的维基编辑,可以对提交的方案指手画脚,提出见解供其作为参考;当然也有对既有提案实在看不下去而奋起投入生产的群众。

一大群人在讨论中苦苦寻求着共识,这就是维基百科。

个人比较倾向于Gakmo的作品(头部设计除外,不过更中意他所参考的匈牙利语维基百科首页的设计)、Danielinblue的作品(不过稍显平庸)以及小梨花的作品(非常大胆,突出了图片,不过恐怕难以付诸实践)。

同时,个人觉得目前尚未出现足够有说服力的方案。或许在『增加什么板块、使用什么色调、是不是应该有圆角、图片的比例占几成』之外,在实用性与美观度的见解和纷争之上,众口难调。

要不投身其中,要不静观其变,总之,一切交给『多数人的暴政』吧。XD

小巧精致,中间路线

Fancy Box

北半球的夏天过去了,冬天来了,Fancy蓝幽幽的冰棍依旧静悄悄地竖立在那。

初次登入thefancy.com首页,如果不仔细看,还以为是到了某个启用图片主题的Tumblr站点。浅灰色的背景配合直排的瀑布大图,在滑动滚轮的过程中,视觉焦点一直紧凑地落在边长为310px或640px的方格图片上。

若没有在首页推荐看到满意的物事,导航条可以派上用场,除去传统的分类,还有礼物推荐的选项。只可惜按颜色搜索的结果不甚准确。

头部导航条偏左侧,原木色shuffle条随鼠标下坠。信手一拽,随机跳至某个商品页,祝君好运,不满意重来。

网站形式(瀑布流+SNS系统)和商品图片上偌大的”Fancy it”(中文为”喜欢“)让人联想起Pinterest和”repin”按钮,图片的分享也由社交ID连结到一块儿。然而,不同于Pinterest,Fancy从一开始就走上了闪购的商业化道路。从桌面端web到移动端的app,美图就是商品,用户就是消费者。

说到”闪购“一词,页面上有着琳琅满目图片的Fab.com是另外一个闪购新星。别具创意的商品有着细致的文字介绍,可以通过简单的操作完成下单和支付。Fab是有着漂亮界面的专卖设计感商品的Amazon。Fancy在这方面显得有些半吊子,除了品牌的衍生品,Fancy基本没有自营商品,用户上传和采集来的图片有可能指向的是一个非电商网页。

Fancy在走一条中间路线。

这条小径的一侧是美丽却也透着几分诡异的图片类社区森林,另一侧则是风力颇劲的电商草原。

走这样一条路,Fancy的策略是迈精致些的步子。除了视觉与交互的设计,除了社交、搜索、导航、随机、关联的推荐项,Fancy还有着”Live Support”功能,由专人实时提供顾问式的购买推荐。

多数的箭头指向了“发现”,因此它被称为一个导购网站,力求用户快速找到需要买的商品。但这不够,Fancy一定也在积极地寻求卖家将更多的售卖环节落在这个网站内,因而当我拽动shuffle条,跳出的商品信息侧栏很可能带有购物车按钮,可以直接完成支付购买。

蜂鸟也有五脏六腑。

从感官式上的“发现”到获取商品信息,再到购买,所有的步骤都在一念之间。竭尽所能做好第一步,因为在第一步中,涵盖了Attention、Interest、Desire太多东西,而后才是最终实现Action,越来越多的购物网站开始这么做,Fancy也在以自己的方式装饰着页面,并探索着模式。

Is Small Beautiful?

“不和谐街区”,巴塞罗那

巴塞罗那的格拉西亚大道(Passeig de Gràcia)有这样一个街区,它位于Carrer del Consell de Cent和Carrer d’Aragó两个交叉路口之间,也就百来米的距离内,却囊括了四位现代主义建筑大师的手笔。但是由于四人的建筑风格不同,导致了整个街区略显诡异,于是此街区被命名为“不和谐街区”(Manzana de la Discordia)。

好奇,但没条件去。忙里偷闲,祭出Google Streetview。

在巴塞罗那城境内搜索Manzana de la Discordia。

没错就这儿了,拽街景小人下锅。推荐下到西北往东南方向的车道上,因为主要的几个不和谐分子都处在街区的西南一侧。

不下不知道,一下去发现若干杯具:格拉西亚大道貌似在街景小车取景的日子里不知是在修路还是挖水管,大段立着蓝色挡板,煞风景;另外,街道绿化做的不错,不过成片的树木也成了挡楼的杀器。

F11点起。降临人间的左手边就是本次旅行的第一站——Casa Lleó Morera(莫雷拉之家,也可意译为“狮子和桑树之家”)。

这栋建筑始建于1864年,Lluís Domènech i Montaner在1902年进行了改造。由于其装饰上有许多狮子和桑树的图案,所以被命名为狮子与桑树之家。由于处在路口的位置,门面很大,加之外部装帧略显华丽,非常显眼。

大建筑师Lluís的其他作品包括圣十字圣保罗医院、加泰罗尼亚音乐宫等等,均是联合国教科文组织世界遗产名录中的文化建筑。

雾太大,召唤Panoramio照片君。

就在Casa Lleó Morera的西北处隔壁,是Enric Sagnier设计的建筑Casa Mulleras。

不过关于这栋建筑知名度较低,相关介绍也比较少。Enric最著名的手笔是与他儿子共同完成的供奉耶稣圣心的巴塞罗那圣心圣殿。

路灯不错。XD

继续向前,又发现一出悲剧,原本的三号景点——Casa Amatller——居然被一块偌大的广告牌遮住主体建筑(莫非是要进化成完全体)。大汗淋漓之际,再次召唤照片君。

Casa Amatller(阿马特耶之家)是Josep Puig i Cadafalch的作品。与前两位建筑家类似,Josep也是一位活跃的加泰罗尼亚本土艺术家,包括加泰罗尼亚政府宫在内的诸多历史建筑依旧存在于巴塞罗那市内。

隔壁,是本次旅行的最后一站,也是最重要的一处建筑。

Casa Batlló(巴特略之家),位于格拉西亚大道43号,与Carrer d’Aragó的交叉路口。说它最重要,不仅仅是因为它长相最不和谐最点题,同时也是因为它出自于最著名的加泰罗尼亚现代主义大师Antoni Gaudí(安东尼·高迪)之手。

这栋房子的奇葩体现在窗台、外壁、拱顶、烟囱等等每一个角落。2005年,Casa Batlló被拓展为世界遗产名录“安东尼·高迪的作品”中的一员。这项世界遗产中的其他成员包括雄伟的圣家教堂、靓丽的桂尔公园等等。


夜晚的Casa Batlló在灯光的映衬下,会像这样散发出神奇的氤氲。

不得不感叹高迪的过人之处。大手笔有大手笔的宏伟壮阔,小艺术又有着小艺术的独到精致。当然,我们所看到的精美,大多只是依附于外观之上的视觉效果;Casa Batlló离奇的空间构造和充满生命力的曲线在高迪的设计中有着什么样的深层意味,“不和谐街区”其他建筑家赋予了建筑成果以何种意义,大概就是智者见智了。

最后说一句:浓缩在“不和谐街区”的巴塞罗那乃至加泰罗尼亚的现代主义风格,隶属于19世纪末、20世纪初的西方新艺术运动。

不和谐街区集体照一张(缺Casa Lleó Morera)结束今天行程。

旅行结束,解散。

几款常用Android Pad应用在横屏下的横向滑动手势交互比较

使用的机型是10.1吋的Motorola Xoom MZ606,系统刷的EOS的ICS 4.0.3。上擂选手都是社交大众脸:腾讯QQ HD(v1.8.1)、新浪微博HD(v2.4.0)、人人HD(v2.3.1.0)。在横屏下使用横向滑动操作进行人机交互,且看各位选手表现如何。

三款app虽性质有别,但在横屏的状态下的界面版式类似:左侧为信息源列表/信息流;右边用于显示来自于点击左边信息所展现的具体信息内容。对于左右两侧信息,上下滑动的操作基本上都是对列表或页面的翻滚,也有在顶部时下拉即为刷新操作的情况(如新浪微博 HD信息流部分和QQ HD的空间信息流,人人HD在当前版本并未采用此种设置)。而横向滑动的交互大致为对模块位置的调整,或对某些模块进行展示or关闭状态的更改。下面就对这三款应用横向滑动的异同进行比较。

  • QQ

在聊天状态中,点击左侧好友,右侧(较中间)部分即会显示聊天栏。拖动聊天栏向右侧滑动就能关闭该模块。

如果继续展示来自于点击聊天栏的内容,如打开好友的个人资料,聊天栏就会被“挤”至偏左侧,右侧用于呈现具体资料内容。

对已打开的共两个信息页(聊天栏+资料页)集体往右侧挪,就会腾出左侧的好友列表,但最右侧的资料页不会被完全关闭,而是一个“半遮面”的情况。此时若将其往左滑动,会回到上面一张图中的状态。而如果需要关闭资料页,只需再次往右拖拽一次,就会回到第一张图的状态。

同样的操作不仅限于聊天功能,也适用于这款应用中的其他功能模块,如内置的QQ空间等等。

需要指出的是,在QQ HD中,横向滑动的交互设计做得比较细致。滑动会带来一种“弹性”的摩擦感和质感,令使用者感觉自己并不是在跟一块屏幕较劲。而且在对窗口拉至其并不能到达的位置的操作中,窗口也不会呆板地“不动”,它会“象征性”地随手指挪动小短距离,然后弹回原位,实质上是避免了给用户产生一种“不听指挥”的感觉。

  • 新浪微博

Android平板版的新浪微博,左侧为微博信息流。最常见的操作是点击左边的某条微博,然后在右部呈现出微博正文和转/评内容。

此时点击右侧信息,比如个人资料,新跳出的窗口就会覆盖原有右侧的内容。

上方有不是很明显的“返回”按钮,但是在这里,实际上还有另外一种方法回到前一张图的状态——向右滑动拖拽。

不过这个操作若没有提示和探索,恐怕很难被发现;而且这个滑动的效果感觉起来比较生硬,不能给人留下深刻印象;除此之外,在右侧只有一个信息窗口,没有“层叠”的情况下,滑动交互不能实现关闭该信息内容的结果,只能通过点击右上角小小的“关闭”按钮方能达到目的。

  • 人人

人人的Android Pad版,左边依旧默认显示信息流,右边呈现具体信息内容。

右侧信息向右滑动可关闭该窗口。有一个小亮点,向左滑动具体信息窗口,它的位置随即就会跳到左边,就跟下图显示的这样。

人人app的滑动虽说不上流畅,但也不是很迟缓,至少还说得过去。

对比三款应用,单从横向滑动这项交互手势操作上看,QQ占据了上风,可实现单窗口和多窗口的位置调整和关闭操作,滑动效果形象生动,体验良好。人人也做得可圈可点,虽然在视觉效果上还有差距,但已经植入了较为丰富的滑动操作交互。相比较而言,不仅是从本文比较的内容看还是其他方面,新浪微博的Android Pad版app就比较粗糙,用户体验也大大不及Android手机版。