标签归档:设计

小巧精致,中间路线

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手机版。