搜狐白社会与开心网UI界面对比分析

个人主页

1、导航

极赞,且采用了少见的跟随窗口滚动的方式。由于整体配色清淡一致的缘故,这样也不觉得打搅,不 过就牺牲了导航常用的深色系,使导航不够醒目,利弊参半。我猜测原因是这样的:为了及时通知消息(当页面拉到较低位置的时候),又要把标签栏走马灯的提示 效果让给Web im,只好让导航条跟着滚了。

找人的输入框容易被误解为“找好友”,其实是全站搜索,刚开始有点错愕,适应后也满好。新通知和通知拉层的设计极赞,必引为己用。

白社会导航

开心网导航

2、Banner

其实谈不上是Banner……,或者算是形象版头吧。

视觉上和导航并不统一,但基本忽略了这一点。看见有人说那个大太阳是白社会的天气预报,大笑。Boss圈圈和“生活在别处”都是小众趣味的文艺腔, 无视之。音乐播放器的UI极赞,神来之笔,比开心体贴许多,协调又趁手。但经常忍不住去点那个“随便听点什么”,猛点,点它不动。

3、内容版头

一句话发布框是向FB的致敬之作,下面的三个小图标其实很好用,但我很怀疑纯图标会使得点击率下降500%,不及FF直接用文字表述的清晰。右侧的小报/等级/金币/打卡信息简洁紧凑,花絮效果居多,且数字颜色太浅,虽然与整体融合度佳,却削弱了概念上的感染力。

任务模块是神来之笔,把UCH的创造给发扬光大,极赞。但遇到我不喜欢的任务,还关不掉,成天在那里死皮赖脸地挂着。这点开心做得好很多,绝不会在主要界面上设置强奸性的元素。包括等级,积分,也有人“偏生不喜欢”的。白社会的风格化终归不够大气。

4、左侧导航

清爽归清爽了,和谐归和谐了,毛病始终在那里,就是字太纤细,远不及开心的醒目。为了使组 件导航条更突出一些,图标没跟着12号字一起瘦身,又使得图标大过文字,进一步削弱了组件标题的视觉权重。唉,白社会就是死要面子活受罪。像开心那样用 14号加粗字体又怎么了?丑是丑一些,用起来实在。导航,自然以点击顺手为最高原则。别拿设计人员的美学来摆架子。

在左导航和动态区之间有一个折页效果,是很漂亮,但我不喜欢。过多的立体感会增加整个页面的复杂印象。好的产品设计,应该丰富而不复杂。炫技无益而有害。

5、中央动态区域

对这块似乎褒贬不一,我持整体贬低的态度,可能是因为媒体出身,很强调“通透”“流畅 ”“统一”这些概念。而白社会强调的是“丰富”“活泼”“快速定位”,完全另一套概念。换句话说,可能无法直接地盖一个“优/良/中/差”这样的印章。得 看用户的喜好。比如像我这样的用户,喜欢自上而下的顺序阅读,就很反感,觉得它样式和颜色太多,花,乱,看得头晕。而另一些用户喜欢跳跃性阅读,随便挑着 看,有可能就觉得它重点突出,丰富活泼。

我经常大发议论说,用户印象是永远没有错的。用户感受都是对的。只是看我们最终能取悦多少用户,他们是大众还是小众,是否能取悦到我们想要的用户。 从这个角度来看,白社会的动态区域UI恐怕放弃面太大,因为我这一类的用户并非少数。这也是我持整体贬低态度的原因,不仅仅出于个人好恶。

具体到细节,将动态类别过滤用下拉菜单的方式放在区域右上角,想法很不错,却又犯了拘泥于图标的老毛病。我觉得那玩意儿挺好用的,就是想不起来去用 它。或者说,我看不见它,就算看见了也意识不到这哥们是干什么的。原则上,如果用户没有强烈的主动使用需求,但确实又能有效改善其体验,我们尽可能使用文 字链接而不是图标,以引导用户建立这个习惯。白社会的设计师虽然强悍,却有不少美学上的固执。

而把动态过滤的设置链接放在全局右下(这回你终于用文字链接了吧),应用过分高端。既然整个区域是跳跃性浏览,3lian素材,到末尾的时候很容易“跳过去”,此处 所受的重视就比顺序浏览更少。此外,30多条动态对吧,也只能跳着看,页面太长了,很难拉到底。拉到底的第一反应不是短暂的停顿,而是快速回弹,怎么看得 见右下键浅浅的“设置”两个字。

关于白社会的动态过载,泥沙俱下,我在之前的文章里详细讲过,这就特别需要用户手动来过滤一些不爱的内容,免得被其赶跑,动态过滤设置也就特别重要。结果功能入口被丢在如此冷清的角落里,非常不明智,如韩信在项王帐下,仅一执戟郎中耳。

全局右下的“设置-查看更多新鲜事”,我们部门去年给这种交互效果取了个名字叫“滚筒式”翻页,很好用——就是不好点。TW整条通栏可点击,用起来 多舒服。虽然白社会在学FB,可人家略微居中的点击位置顺手不少。不过我喜欢白社会点击更多链接后的loading提示,轻巧顺畅,比FB的更好。

最后说两个花絮,在可回复的动态中,只要有第一个人回复,内容动态下面的窄评论框就会缺省展开,估计是认为这条信息有可能具备讨论价值。取材自FB的引导交流的思路极赞。在白社会中,可赞的交互设计确实多不胜数,看得我又爱又恨。必引为己用。

而用户发布内容后,在自己首页的动态区域内亦可见,也很棒。用户直观地意识到自己的动作被融入了整个社交动态环境之中,确信发布成功,将为人所知;也就更容易树立对整个动态环境的认知度和认同度。同时也便于查看好友对自己发布内容的回复。

时间: 2025-01-01 10:41:50

搜狐白社会与开心网UI界面对比分析的相关文章

使用AsyncTask异步更新UI界面及原理分析

概述: AsyncTask是在Android SDK 1.5之后推出的一个方便编写后台线程与UI线程交互的辅助类.AsyncTask的内部实现是一个线程池,所有提交的异步任务都会在这个线程池中的工作线程内执行,当工作线程需要跟UI线程交互时,工作线程会通过向在UI线程创建的Handler传递消息的方式,调用相关的回调函数,从而实现UI界面的更新.AsyncTask抽象出后台线程运行的五个状态,分别是:1.准备运行,2.正在后台运行,3.进度更新,4.完成后台任务,5.取消任务,对于这五个阶段,A

Windows Phone灵魂诠释:Metro UI界面完全解析

Metro在微软的内部开发名称为" typography-based design language"(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro UI,这包括:Windows媒体中心.Zune播放器等等.该技术已于2010年初(美国)获得Metro UI专利批准(USPTO).Metro UI最新的应用是windows phone 7智能手机系统,并将应用于未来的Windows 8.Office 和 Xbox 360产品中.  

新浪搜狐网易腾讯iPhone手机微博对比分析

文章描述:新浪搜狐网易腾讯iPhone手机微博对比分析. 一.登陆页(以下图片顺序均为新浪微.腾讯.搜狐.网易) 微博登录界面(新浪.腾讯) 微博登录界面(搜狐.网易) 四款iphone微博客户端从页面上看,只有网易和腾讯的支持记住用户名和密码,实际操作后就会发现,其实大家都是默认记录的.并且新浪微博支持多账户切换,默认记录为最后一个登陆的用户.外观上,除了新浪微博客户端增加了"微博广场"的内容推广对新用户有写引导以外,其他三家基本相同. 新浪微博支持多帐户切换 多贴一张新浪的多账户切

设计理论:分类信息网站UI界面设计

对于分类信息网站,目前已经有很程序的UI界面结果,不过对于一个新网站来说,照搬成熟的网站结构不一定是件好事,因为你的网站的内容与用户是不确定的,所以对于初期的分类信息网站来说界面做的越简单层次越少可能效果更好. 前几天有个朋友做了一个类似赶集网那样的分类信息网站,觉得链接太多视觉太乱,让我帮忙看看UI(避免广告嫌疑就不给网站地址了),基本上是赶集的小翻版.在信息分类上,是这么做的:大类分房产.招聘.车辆买卖.交友等等这样的大类,每个大类下面再细分需求,比如房屋求租.合租.二手房.日租房.商铺-一

北京seo:团购行业的两个案例对比分析

团购(B2T)行业2010年的新产物,现在已经迅速在全国各大城市成熟起来,成为众多消费者追求的一种现代流行.时尚的购物方式,因为它有效的防止了不成熟市场的暴利.个人消费的盲目.抵制了大众消费的泡沫.目前拉手网,G团网,美团,懒人团购网,团宝网,QQ团,大众点评团,糯米团等团购网站占尽很大的市场.而其它的团购网站也纷纷揭竿,来抢这一块市场. 今天北京seo对团800和我是团长这两个网站进行对比分析,主要是给朋友分析的,在这里也分享给各位朋友. 一.两个网站的友情链接对比: 1.团800友情链接页面

超多干货的UI界面动效设计指南

腾讯同学的教程一向都是良心之作,今天这篇长文收罗了常见的UI动效设计方法,不仅有案例,而且分析透彻入微,从表现形式到动效的作用,对用户产生的影响,都有全面专业的解说.今年动效也是一大热门,想自我提升的同学可以放手来学习了. 概要 xavieryuan:UI是基于静态页面来设计的,页面之间通过跳转切换.在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理.这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑.与此相反,在卡通领域,由于使用了足够的动画效果,用户

H5、React Native、Native应用对比分析

每日更新关注:http://weibo.com/hanjunqiang  新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候,一则是因为H5发展到一定程度的受限:二则是移动市场的迅速崛起强调团队快速响应和迭代:三则是用户的体验被放大,用户要求极致的快感,除非你牛x(例如:12306最近修改手机号需要用户自己发短信接收验证码).

淘宝vs拍拍购买流程对比分析

近几年电子商务发展迅猛,而今年各http://www.aliyun.com/zixun/aggregation/7757.html">独立网店.购物平台更是雨后春笋般冒出来,并都已站稳脚跟.对于这么多购物网站,我们来筛选一些比较知名的站点进行优劣势对比分析. 目标:由于购物是一个很复杂的过程,有选购和购买两方面,这篇文章主要就购买流程进行展开分析,寻找最佳购买体验. 场景: 只分析购买流程,所以我们假定买家已找到一个目标商品(不排除还有别的想买)购买实物.统一采取支付宝支付.由于并非所有平

高德地图新旧UI大对比 哪里更好看更好用了?

近日,高德地图推出了全新7.6.6版本,对APP进行了大改版,尤其是在视觉和交互方面取得了突破性的改进.全新高德地图的UI改变不仅让视觉体验变好,更是交互的全新升级.下边我们就来看一看,全新的高德地图和旧版(7.6.5版本)相比,哪些地方更好看也更好用了? UI首页界面大改版简约.美观又便捷 打开高德地图APP,我们就发现全新的高德地图首页界面更加精简,图标由4个按钮精简成为3个.原来版本中的"路线"和"导航"两个按钮合并为了一个"路线"按钮.相