三亚琼州学院数字媒体技术网站规划与设计报告.docx

1、三亚琼州学院数字媒体技术网站规划与设计报告美丽说产品体验报告 本文主要分为五部分：战略层、范围层、结构层、框架层、表现层（如图1）。从抽象到具体，谈谈本人对美丽说的体验和理解。图1一、战略层：用户想从网站得到什么，经营者可满足用户的什么需求美丽说是以购物分享为主要内容的垂直社区网站。此类网站在淘宝等网上购物渗透网民达到一定程度的时候，找到了一个很好地切入点，为女性分享购物经验提供了一个途径，提升用户网购体验的同时也引导了购物、促进了淘宝等电子商务网站转化率的提高。美丽说的成功在于用户定位的准确及对用户特点的准确把握。相信美丽说的团队已经对用户有过十分细致的研究，我这里将自己理解的用户群再进行下

2、划分，希望通过对用户细分和需求的探索，体验美丽说产品设计的内在逻辑。1、 浏览者登陆或不登陆网站。以浏览美图、休闲娱乐为主，并无明确目的和目标，注意力较为分散，容易在频繁的链接中迷失方向且不以为意。网站内浏览行为较频繁，对淘宝链接点击相对较少。各种标签是频繁点击的对象，喜欢不停地拖动右侧滚动条。很少主动分享宝贝，但看到喜欢的东西会mark下“我喜欢”，但比较少会评论。喜欢受热捧的东西，喜欢扎堆，喜欢人气旺和排名高的地方。喜欢看名人，但不膜拜。较少关注别人，除非风格比较喜欢，或者此人是名人。很少被关注，也不会主动想办法扩大粉丝范围，被人加关注时大多会礼貌性互粉。2、 分享狂经常登陆网站。多数是骨

3、灰级淘宝用户或重度淘宝使用者，也不乏部分想宣传店铺的淘宝店主或相关人士。另外还有些热衷上传自拍照片和图片的用户，也可归为这一类。她们比浏览者有更明确的目标，希望别人认可自己的分享。她们会较频繁地上传链接，也会主动和较为频繁地关注其他用户，甚至偶尔会在搭配栏目秀下自己，晒晒东西，或者在杂志社扮演主编或编辑，以此来扩大自己的影响力，进而获得更多的“我喜欢”标签和更多的粉丝。3、 淘店主主要目的为了宣传店铺，增加店铺流量。有些人本身既是红人又是淘宝店主，因其品位较高，号召力较好，所以即使分享自家东西，也会有很多粉丝追捧。而更多的淘宝店主则通过大量关注其他用户，大量或重复上传分享自己店铺中的东西以获得

4、较高的关注。更有一些卖家会在猪八戒等威客网站上派发关注任务，或者通过QQ群等方式刷排序。也不乏一些店主会注册若干账号，制造大量 “僵尸粉”。4、 弄潮者对时尚十分热爱的一群人，把穿衣打扮、美容护肤等理念时刻贯彻到个人的生活。敢于也热衷于尝试新的东西，希望成为众人关注的焦点，追随的对象。她们在网站中通常充当“意见领袖”的角色，拥有各自的粉丝群体，懂得包装和推广自己。她们通常是最活跃的一群人。喜欢尝试和研究网站的各种新鲜功能。会积极地与他人互动。但她们通常也同样活跃在其他相似的网站里，在各种时尚网站或社交网站中游走并且游刃有余。5、 赶潮人有着强烈改进自己的愿望，但又没有形成自身的风格，热衷跟随“

5、意见领袖”的步伐，容易受到他人的影响和追捧众人追捧的东西。她们会比较多的关注时尚达人，以美丽说等网站作为购物指南，以达人穿过或用过的东西为目标，购买所谓的流行单品。她们更热衷在美丽说等网站和淘宝之间相互跳转，喜欢最热的商品，喜欢看别人的评价，同时也容易受到这些东西的影响。以上是对这五类人群的简单描述，很多时候，这五类人群也会相互重叠。综上所述，美丽说的用户除了购物消费的需求，还存在分享、寻找、展示和交流这几方面的需求。 个人以为，网站设计的好坏在于是否较好地满足了用户需求以及是否较好地引导了用户的需求。无论范围层、结构层、框架层还是表现层都是在战略层的基础上发展而来的。以下二、三、四部分将分别

6、从范围层、结构层、框架层和表现层等方面，以“蘑菇街”为比较，发现美丽说在网站设计上的优势和不足，并探讨下可以改进的地方。二、范围层：网站的主要功能总的来说美丽说的主要功能有四大块：翻杂志、逛宝贝、搭配、福利社1、 翻杂志：杂志社是用户UGC的重要板块之一，旨在形成风格圈子，聚集志趣相投的MM，帮助MM发现自己的风格。用户可以创建专属于自己的杂志，也可以浏览或关注其他用户（1人或1+人）创建的杂志。蘑菇街也有类似“专辑”板块，新加“小组”板块也和杂志社有一定相似之处。美丽说与蘑菇街的区别：（1） 美丽说的杂志社更像传统的杂志，有主编，有编辑（有编辑权的粉丝），有读者（普通浏览者），有订阅者（加关

7、注的粉丝）。蘑菇街的专辑更像一个私人的博客，有博主，有博友，可留言评论。（2） 杂志社所展示的图片以购物链接为主，而蘑菇街的专辑则形式丰富、包罗万象，单纯的图片展示所占比例较杂志社而言更多。（3） 美丽说的杂志社会有网站编辑进行第二次筛选和类目编辑，而蘑菇街的专辑板块则是简单的标签筛选，并没有按照内容进一步细致归类。优点：（1） 杂志的形式有利于内容质量的提高。如果编辑和主编之间沟通合作得较好，则可以制造出更多更优质的内容。（2） 根据杂志主题内容进行二次编辑，可以方便用户，使其更易于找到自己想要的内容。同时可以便于网站对于内容的把控。缺点：杂志的形式会促使内容风格更趋于主流，进而形成马太效应

8、。长期看来，有可能会造成内容单一化，发展到一定程度时，也不利于吸引更多的用户。2、 逛宝贝这个版块下面包含衣服、鞋子、包包、配饰、美容、家居6个子类，基本上涵盖了时尚女性所关注的内容。采用了pinterest的形式，更符合女性感性和注重细节和比较的特点。美丽说与蘑菇街的区别：从功能上讲，二者在这一板块区别不大。更多的区别体现在交互和导航设计等方面，将在稍后的段落中具体分析。优点：（1） 用户UGC内容，区别于传统的时尚网站，更加贴近用户需求，方便用户发现所爱，也更加满足了用户交流和分享的需要。（2） 图片取代文字，让物品的呈现更加直接和具有说服力。链接的融入，让所见即所得成为可能，提升了网络购

9、物的体验。缺点：易受用户规模和内容质量的影响。随着用户规模的扩大，内容将更加丰富，但对于内容质量的把控也会越来越难。3、 搭配搭配板块满足了用户展示自我的需求。同时达人的建立也为普通用户树立起“意见领袖”的时尚标杆，更拉近了时尚与普通用户的距离。美丽说与蘑菇街的区别：美丽说的搭配板块包含达人板块，以展示服饰搭配为主要内容。蘑菇街的搭配板块和达人板块相辅相成，没有归属关系。达人板块里细分为三个部分：晒货达人、搭配达人、专辑作家。搭配板块则以服饰搭配为主要内容。蘑菇街在达人板块还增设蘑法汇、星探有约等栏目，同时还会不时地出现一些应时的专题。线上活动与线下活动相配合共同促进了用户活跃度的增加。 优点

10、：美丽说的搭配板块既有普通用户的搭配展示，更有已经具备一定知名度的时尚红人的搭配秀。尤其是呛口小辣椒等名人的入驻，更是为这一板块增添了吸引力和号召力，汇聚了大量人气。缺点：（1） 美丽说达人的产生更多依赖她们身上已经有的标签，如：知名博主、网络红人、专栏写手、时尚模特等。美丽说自身发现和打造红人的能力尚有待提高。（2） 交流的氛围较淡漠。用户间的互动以及交流活动不是很多。发展到一定时期，可能会影响用户活跃度和粘性。4、 福利社福利社是网站与商家互动合作的平台。在为用户提供免费使用产品机会的同时也对商家起到了很好的广告宣传作用。团购和好店形式的融入则通过更多渠道促进了商家的流量和销售。美丽说与蘑

11、菇街的区别：在免费试用和团购功能上，美丽说和蘑菇街没有太大区别。但蘑菇街没有好店这一板块。优点：（1） 免费试用申领过的程简单，产品诱惑力较大，容易在较短时间内快速聚集人气。（2） 好店板块将一些信誉度较高、口碑较好的店铺分类罗列，方便用户发现更多优质店铺。对店铺流量的导入也起到一定作用。 缺点：免费试用板块在快速聚集人气方面优势突出。但除了聚集人气，其实试用结果还可以为商家带来更好的口碑效应。相比蘑菇街，美丽说在口碑传播的处理上还有待提高。比如试用申请和试用报告是否可以有更清晰的分类，便于用户发现有用信息。关于试用报告的撰写，是否可以采取一些方法引导用户提供更高质量的报告，以及用更好的形式呈

12、现出来。 三、结构层和框架层：交互设计与界面设计风格这里所说的结构层侧重从总体来看网站的交互设计，即网站如何实现用户流量的引入，如何使用户在网站中顺畅地获取信息，如何引导用户更便捷的获得想要的信息等。框架层则侧重从细节出发，具体到每个板块，每个页面，每个功能。打开美丽说，大的导航栏主要有以下几个部分：首页、翻杂志、逛宝贝、衣服、鞋子、包包、配饰、美容、家居、搭配、达人、福利社、团购、好店。蘑菇街比美丽说多了晒货和小组的部分。下面就以美丽说与蘑菇街相互参照，尝试发现美丽说的优缺点。1、 引入流量美丽说与蘑菇街的区别：（1） 美丽说和蘑菇街都允许用户使用已有社交网的账户登录，并且可以实现本社区与其

13、他社区的部分同步。除了可使用新浪微博、QQ、淘宝等登录以外，美丽说比蘑菇街多了一个XX账号的登录方式。用户首次使用新浪微博登录美丽说时，新浪微博系统会自动替用户发布一条信息，告诉用户好友“我刚刚绑定了美丽说”（见图2）。而蘑菇街是在用户登录以后，在个人页面右侧以邀请闺蜜的方式，让用户给自己微博中的好友。（见图3） 图2图3（2） 当用户在登录美丽说或蘑菇街之前已经登陆了某类授权网站（新浪微博、QQ、淘宝、豆瓣等）时，点击美丽说的相关登陆按钮，系统则会跳转到询问页面，询问用户是否愿意授权登陆或者切换账号登陆。而蘑菇街则不会询问用户是否需要切换账号登陆。尤其当用户已经登陆新浪微博时，点击蘑菇街“微

14、博登陆”按钮，则页面直接跳转到该新浪账号的蘑菇街个人页面。优点：使用多种社区账号登陆是很好的引流量的方式。授权的登陆网站都是流量较大，用户基础较好的社区网站。美丽说在引流量上比蘑菇街更胜一筹。主要表现在与XX的合作以及在授权登陆的细节设置上。此外，美丽说在用户首次登陆时会给用户推荐大量的杂志社、好友等，可以引导用户在社区中开展活动，有利于提高用户活跃度，也有利于增加用户粘度。2、 首页美丽说与蘑菇街的区别：（1） 打开美丽说首页，用户若未登陆，则在首页上方会出现登陆和注册的提醒条。另外，对于微博登陆过美丽说的用户，在其登出后，若继续停留在美丽说页面上，则会在页面右上角出现提示，也是提醒用户登录

15、的。而蘑菇街则不会出现这些。（2） 在首页的前几个板块，美丽说和蘑菇街都对自己所擅长的项目做了重点突出。比如，美丽说突出的是杂志社板块和达人板块。蘑菇街突出的是搭配和晒货板块以及小组板块。（3） 在首页的第一个板块里，美丽说会选择一位达人作为当期封面女生。而蘑菇街则为用户呈现近期的热门活动或专题。（4） 美丽说对于衣服、包包、家居、美妆等内容的展示以多图展示为主。而蘑菇街则以单个大图展示。（5） 登陆美丽说和蘑菇街以后，网站均自动跳转到个人首页。但当点击蘑菇街的导航栏“首页”标签时，系统跳转到登陆前的首页。而点击美丽说导航栏首页标签，则仍然停留在当前页面。此外，美丽说个人首页的左侧有全部的当日

16、分享，仍采用pinterest的展示形式。而蘑菇街则以微博的形式展示。相比较，美丽说的展示形式更具吸引力。优点：（1） 美丽说首页的登陆提示设置能够较好地引导用户注册和登陆。（2） 衣服、包包、配饰等单品展示时，采用多图形式，对用户而言更加直观和有吸引力。缺点：在首页的第一个板块设置“封面女生”+网站口号的形式虽然让页面显得整齐简洁。但在对于用户的吸引力方面稍显欠缺，内容显得有些单薄。图4图53、 杂志社美丽说与蘑菇街的区别：（1） 美丽说的杂志社和蘑菇街的专辑页面都有推荐的杂志社，用户可直接在此页面关注或者进入该杂志或专辑进行浏览。但美丽说的杂志以购物链接为主，而蘑菇街除了购物分享链接还包含

17、大量的图片分享。（2） 导航标签不同。美丽说按照风格分类，如分为：欧美、甜美、复古、个性等标签。蘑菇街则按照用途分类，如分为：时尚、美容、购物、生活等标签。（3） 导航标签下方杂志社或专辑的呈现方式不同。美丽说以杂志为单位，以一个个组图的形式呈现。而蘑菇街则以专辑中的具体内容为单位，以一个个图片的形式呈现。（4） 杂志社的排名以粉丝数为衡量标准。蘑菇街的专辑则对专辑作者进行排名，排名以分享专辑和收到的喜欢数为衡量标准。（5） 在杂志社，只有主编和编辑才有资格发布新的分享，普通用户可以关注该杂志社，但没有编辑和在杂志社发言的权利。蘑菇街的专辑只有作者一人可以编辑。但普通用户不仅可以浏览和评论，还

18、可以推荐自己喜欢的专辑。优点：在杂志社可以较为轻松地找到许多内容优质的杂志，并且可以通过导航的标签找到自己喜欢的风格，进入符合个人口味的杂志圈子。4、 逛宝贝美丽说与蘑菇街的区别：美丽说的“逛宝贝”板块与蘑菇街的“逛街啦”板块在整体上没有太大的区别。用户在搜索框输入关键词进行搜索时，搜索结果均以每一个链接的原始标题关键词为搜索依据（即淘宝上该宝贝的名称）。不同的是，在搜索结果页面，美丽说增加了相关热门搜索关键词推荐，甚至增加了专区引导，引导用户点击更加详细和精准的专区页面浏览。同时用户搜索的结果除了可以按照热度和时间顺序排序，还可以按照价格指标排序。优点：美丽说的搜索功能更加完善，相关关键词推

19、荐、专页引导和价格排序等功能更符合用户的使用浏览习惯。缺点：在推荐的相关热门搜索关键词中有时会出现明显的垃圾信息。比如搜索“连衣裙”一词，在右侧关键词推荐栏会出现如下结果（见图6），当点击“特价欧美露背抹胸抹胸波西米亚前短后长礼服复合真丝修身连衣裙长裙”词条时，页面跳转到如下结果（见图7）。该页面明显是商家重复上传的链接。这种搜索推荐会影响用户的体验。 图6图75、 搭配美丽说与蘑菇街的区别：在美丽说，达人板块是从属于搭配板块的，遵循的逻辑是每个MM都可以秀自己的搭配，善于搭配的MM更有可能成为达人。蘑菇街的搭配板块是从属于达人板块的。遵循的逻辑是达人分为晒货达人、搭配达人和专辑作者，而搭配板

20、块仅仅为MM们提供一个秀场，在这里有推荐的搭配达人，但想看更多方面的达人，则可在达人板块找到。缺点：（1） 美丽说的达人很多，但是有的是擅长搭配的且乐于秀自己的，有的是审美眼光较好擅长挑选小物的等等。当用户想找与自己趣味相投的达人时，搜索难度略大。（2） 用户进入达人页面后，页面跳转到她的美丽空间，而并没有直接为用户呈现她的搭配示范信息。蘑菇街却更干脆直接一些，所谓搭配达人就是善于秀搭配的MM，当用户觉得该MM的风格是自己喜欢的风格时，点击该达人页面，系统直接跳转到该MM的搭配示范页面。且该MM的搭配图片以线性结构呈现，显得更加简洁统一。6、 福利社优点：在福利社的活动任务里，通常会要求用户将

21、申领的信息同时转发到新浪微博/人人/腾讯微博/QQ空间等，这样能够迅速扩大活动的影响范围。缺点：福利社的申领过程不够透明，用户不知道申领成功的人数，也不知道成功申领的都是哪些人。对于活动结束的商品，如果想要查看试用报告，没有一个较简单的路径实现这一目标。同时，许多用户的报告填写比较简单，仅仅是简单的文字描述，对于想要了解试穿效果、试戴效果、试用效果等的用户，没有一个便捷的途径对其进行引导。7、 我的美丽空间我的美丽海报：包含我的杂志社和我的美丽海报两部分我的美丽说：我发布的一切信息我分享的宝贝：我发布的所有购物链接信息我的照片：我发布的所有图片信息我 的：我喜欢的其他用户的分享我的杂志社：我自

22、己创办的杂志社和我关注的杂志社缺点：（1） 如果“我”是一个爱秀自己的女孩，“我”的首要目的就是记录自己的搭配点滴，并希望有人会来我的空间看这些搭配。但网站没有明确的信息引导用户去上传自己的搭配图片。同时，“我的照片”涵盖的图片种类太多太杂（含有搭配信息，也有其他上传图片信息）。那么，如果有其他用户进入该MM的个人空间，点击“她的照片”一栏，页面显示的是该MM发布的所有图片信息，这些图片信息也许会将该MM的个人真实搭配图片淹没，即使该MM有明确的个人风格，最后也不会有那么凸显了。（2） “我的分享”一般是用户上传的购物链接。但用户上传可能是因为购买过并且觉得值得分享，可能因为该商品有朋友购买过

23、并觉得值得分享，也可能因为店家希望推广自己的商品，或者可能用户根本就没买过该商品只是觉得照片上的商品显得很好看。网站应该鼓励和引导用户主动分享一些购买过的商品。而对于那些用户没有使用或购买过的商品链接，网站也可以提供一定的区分参考。（3） “我的美丽海报”页面相当于空间主人的所有分享的合集，并按照“我的杂志社”和“我的美丽海报”两个板块进行了整理。该页面相当于吸引用户继续浏览的封面，所以可以设计的更加能够展现空间主人的个性。 四、表现层：视觉设计与表现风格版面布局：美丽说页面统一采用蔷薇粉色系，配色以浅灰和白色为主，整个页面显得干净、清透，既符合女生的审美偏好，又给人深刻的印象。在美丽说的不同

24、板块页面里，都力求将文字与图片有机的整合在一起，以图为主，文字为辅，页面不会凌乱，统一大气。浏览导航：导航栏十分容易操作，基本上能够很好地引导用户浏览。 五、总结通过以上几个层次的体验和分析，发现美丽说在如下几个方面具有突出优势：1、 吸引流量通过各种细节上的产品设计，如注册登陆提示、自动微博发送微博授权登陆信息、通过微博扩散福利社活动、对注册的用户推荐好友杂志社等，实现增加流量、注册用户和传播网站的效果。2、 购物搜索导航和搜索功能都更加完善和符合用户使用习惯。用户基本上可以根据导航和搜索较轻松地找到自己需要的风格或款式。同时可以在寻找的过程中增加一些对时尚的了解（如关于时尚名词的词条诠释）

25、。3、 更优质的杂志专辑采用主编+编辑的模式有利于杂志内容的扩充丰富和质量的提升，若以杂志社为单位办活动，也较为有影响力和号召力。另外，通过网站对杂志社的导航编辑，更加方便用户寻找自己喜欢的优质杂。4、 达人质量较高美丽说集中了大批发展较为成熟、风格各异的达人用户。这些达人的进驻，为美丽说带来了她们的大批粉丝，增加了网站的吸引力和人气。同时，达人制造的内容也成为网站内容的重要组成部分，是非常重要的看点之一。5、 风格突出网站设计风格突出，视觉感较好，更符合女性的审美习惯。 同时，美丽说在如下几个方面也存在一些需要改进的地方：1、 交流氛围较淡美丽说是一个弱关系社区，用户仅仅因相似的品味聚集。因

26、此，虽然用户可以对某个商品或图片进行评论，但多数用户不会评论，因为他们只与自己关系较强的人讨论，只会对自己十分感兴趣的东西或十分关心的话题进行评论。而目前网站能够勾起用户交流欲望的只有诱人的图片，却没能制造出足够多的话题供兴趣不同的用户交流讨论。同时当用户有讨论交流的欲望时，网站也没有为其提供一个更为便捷的 “发声”途径，或者将其引导到同样具有交流欲望的其他用户那里，实现有效交流的目的。2、 用户个人空间用户个人空间是用户展示自己的一个平台，也是其他用户了解此人的一个平台。好的个人空间管理可以帮助用户更加凸显自己的个性特点，也能够为用户提供更加实用和富有吸引力的内容，进而提高用户对个人空间建设的兴趣，增加用户粘度。