美丽说网站特点

美丽说等网站特点
调研报告
美丽说与蘑菇街
美丽说和蘑菇街是目前国内互联网最大的两个纯买家分享社区，主要为女性用户提供分享和交流的平台，两个网站在功能上几乎是一模一样的，都包括了热点推荐、逛街、福利社、搭配、达人等功能，但是在实现上也有一些细微的差别，其区别和各自的特点表现在以下方面：
特点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庞大用户群和腾讯公司的实力发展迅速，值得关注。