美丽说网站特点

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

美丽说等网站特点
调研报告
美丽说与蘑菇街
美丽说和蘑菇街是目前国内互联网最大的两个纯买家分享社区,主要为女性用户提供分享和交流的平台,两个网站在功能上几乎是一模一样的,都包括了热点推荐、逛街、福利社、搭配、达人等功能,但是在实现上也有一些细微的差别,其区别和各自的特点表现在以下方面:
特点1页面布局
美丽说使用的是横向接近100%的布局方式,这样做的好处是可以更充分的利用空间,使页面内容显得更加丰富;而蘑菇街使用的是横向80%的页面布局,这也是目前国内大部分网站所用的布局方式,这种方式使页面看上去更美观。

图1是两个网站首页的截图。

图1
特点2页面表现形式
美丽说在表现形式上使用的是仿pinterest的“图钉式”分享,即把分享的图片以类似于图钉钉在墙上的方式随意的摆放,给人一种随意,慵懒的感觉,符合女性用户“逛街时”的特性如图2。

而蘑菇街相对来说就比较正式,使用的是传统的“表格式”的表现形式,这种风格给人一种严肃却又不失优雅的感觉,如图3。

图2
图3
特点3首页前端技术
在前端,美丽说采用的是页面内容动态加载技术,当用户在拖动滚轮向下浏览的时候,图片会动态加载。

这种做法的好处是,一是页面加载速度快,二是节约了流量,因为不可能每个用户浏览页面时从头滚到尾的,这种方法很值得我们借鉴。

至于技术上的实现,可以有多种方式,不过使用的时候要注意不同浏览器兼容性不同的问题。

而蘑菇街采用的仍然是传统的全部加载技术,即把首页中的内容一次性全部加载进去。

网页内容动态加载技术
第一种方法是修改源代码中的img中的src名称,通过JS 绑定窗口事件,在触发之后替换img 标签里的src图片路径名称。

Javascript代码如下:
1.<script>
2.imgLoad();
3.window.onscroll = function(){ imgLoad(); }
4.
5.function pageTop()
6.{
7.return document.documentElement.clientHeight
8.+Math.max(document.documentElement.scrollTop,
document.body.scrollTop);
9.}
10.
11.function imgLoad()
12.{
13.varimg = document.images;
14.for(vari=0; i<img.length; i++)
15.{
16.var o = img[i];
17.varvtop = getPosition(o).top;
18.vargggggggg = o.gggggggg;
19.gggggggg = o.getAttribute(‘gggggggg‘);
20.varsrc = o.src;
21.src = o.getAttribute(‘src’);
22.if (vtop<= pageTop())
23.{
24.if(!src)
25.{
26.o.src = gggggggg;
27.o.setAttribute(‘src’, gggggggg);
28.}
29.}
30.}
31.}
32.</script>
第二种方法是通过jQuery滚动加载插件scrollLoading。

scrollLoading的使用:
不管怎样,首先调用jQuery库文件,还有jquery.scrollLoading.js,可以直接在页面的某处添上如下的代码:
<scripttype="text/javascript"src="/ajax/libs/jquery/1.4.1/j query.min.js"></script>
<scripttype="text/javascript"src="/study/js/mini/jquery. scrollLoading-min.js"></script>
此插件的方法名就是scrollLoading,所以,直接:包装器.scrollLoading();就可以实现滚动加载效果了,如下:
$(".scrollLoading").scrollLoading();
表示所有class 为scrollLoading
的元素绑定了滚动加载的方法。

当然,还需要做点小动作的。

元素默认是不加载的,那么真正的加载地址显然要预先在元素上放置的,例如新浪微博默认把头像地址绑在了一个自定义的”dynamic -src”属性上,见下图:
在HTML5中,以data-开头的自定义属性都是合法的,且地址可以是图片,页面等。

所以,我设定了绑定地址的自定义属性为”data -url”,此属性值设为真实的图片(或页面)地址就可以了。

例如下面:
<div class="scrollLoading" data-url="loaded.html">加载中...</div>
会在滚动时加载名为loaded.html 的页面,并自动替换里面的内容。

对于常用的图片,还有一点小问题,就是其默认的src 图片地址。

其src 地址不能是真实的图片地址(否则会直接一次性全部加载),也不能是空地址或是坏地址,否则IE
浏览器下会出现很惊悚的红叉叉。

我的做法是默认链接的是一个1px
* 1px 的gif 透明图片(大小很小),同时可以透出后面加载中gif 动画图片,当滚动加载的时候直接把此gif 图片替换掉。

于是,对于图片,可能就有类似下面的代码:
<imgclass="scrollLoading"data-url="/image/study/head /s180/1.jpeg" src="/study/image/pixel.gif" width="180" height="180"style="background:url(/study/image/loadin g.gif) no-repeat center;" />
ScrollLoading 可选参数
scrollLoading 是个很简单很小的插件(无注释YUI compressor min 版仅508B ),所以参数也很少,就一个,见下表:
另外,此插件只适用于页面默认滚动条的动态加载。

对于内部div 之类的滚动加载不支持。

腾讯与新浪微博
特点1新账号收录速度
以前在两个平台各自注册了一个账号都是“snstest123”,把基本资料填写好后,搜索发现腾讯的收录快,直接可以找到这个新注册的账号;而新浪却没有找到。

说明腾讯微博对于新用户注册处理这一方面处理速度较快。

特点2 流量、电量等对比
新浪微博在流量、电量、启动时内存占用方面表现较好,但上传图片时不支持图片质量选择,由此带来流量问题。

404K的照片,新浪微博上传消耗流量104.1K,压缩比为25.7%;使用腾讯微博默认质量上传331.8K,压缩比为82.1%、使用“中”质量上传消耗流量55.3K,压缩比为13.7%。

特点3植入广告、用户体验
广告植入方面,新浪与腾讯微博都有比较多的僵尸粉和专业做广告的,其中新浪微博尤其多。

应用逻辑上,两者均无大的缺陷;腾讯微博有方便的“返回”和“回主页”功能,新浪微博则不易操作。

页面布局上,新浪微博和腾讯微博均把两项重要的功能:“写微博”和“刷新”功能放在左上和右上角,操作性和易用性较差;进入微博详情时,腾讯微博提供浮层功能按钮,更好的利用了手机屏幕中间2/3的黄金区域,如下图:
UI界面上,新浪微博中规中矩,缺乏亮点;腾讯微博界面清新,但是功能菜单使用非通用图标而且缺乏用户引导,给用户使用带来了不便。

操作体验上,腾讯微博提供首次操作简单引导功能,发送微薄成功后能立马可见,新浪微博需要手动刷新才能见,造成易用性的差距;腾讯微博表情沿用QQ表情,而新浪微博表情显得鸡肋,呆板无趣;腾讯微博提供方便的“存草稿”
功能,可在“我的资料”查看,新浪微博保存后不知所踪;腾讯微博大厅采用“块状”模块,避免了用户上下翻页之苦(如下);新浪微博初始页面默认为上次推出页面,腾讯微博则为微博首页,更加方便。

总的来说,腾讯微博给用户带来的操作体验要优于新浪微博。

总结
通过对用户体验、功能特点等方面的分析可以看出,安卓版微博手机客户端中,腾讯微博优于新浪微博;对用户数量而言,受网页版微博平移的影响,新浪微博用户多于腾讯微博,但腾讯微博依靠QQ庞大用户群和腾讯公司的实力发展迅速,值得关注。

相关文档
最新文档