基于工业设计方法学的男装推荐分享网站

基于工业设计方法学的男装推荐分享网站男人帮的设计胡婷（中国矿业大学工业工程2009-1班）摘 要：随着互联网的发展，购物网站的兴起，人们的购物方式发生了划时代的转变。关于服装推荐的网站也层出不穷，像美丽说和蘑菇街等关于推荐女士穿衣打扮的网站非常火，但是关于推荐男士服饰的网站则很少，本文主要分析男士服装推荐网站男品街，改进设计了男人帮这一男装推荐分享网站。关键词：男人帮；男装推荐网站；Axure ; 工业设计购物推荐方面，男性用户往往是受到歧视的。拿当下非常火爆的美丽说和蘑菇街来说，男性一直是被排斥在外的，并且美丽说至今仍不允许男性用户注册。对于本来就不太懂得穿衣打扮的男性来说，其实他们更需要关怀! 因此，男人也有买衣服的需求，也想了解些男装穿着搭配的常识，提高下自己的审美品味。据相关数据统计，57%的男人还没有找到属于自己风格的服饰；83%的时间浪费在选不适合自己的衣服上；62%的男人因为工作繁忙从没有认真打理过自己；全国至少1亿男人的衬衫尺码错误；10个男人中有3个习惯白色袜子配黑色皮鞋 男人帮就是为此而创立的男士时尚购物分享网站，我们只专注于男性市场，为18-35岁为主的男性用户提供服饰搭配和时尚潮流的购物分享及推荐，解决男人场合着装、服饰搭配、时尚潮流、商务礼仪等方面的购物和交流需求。1. 课题简介2. 设计研究2.1用户研究 用户研究采用的方式主要是现场调查采访。得到以下几种类型用户需求。用户类型一：嘉宾：C君和D君；档案：23岁左右，理发师；爱好：上网、音乐、旅游；喜欢时尚，淘宝达人，愿意分享自己喜欢的衣服和鞋子总结C、D 君的需求：希望更多的人能跟他一样穿着，同时自己也可以从中获得成就感，最好自己也可以有很多粉丝。当然也希望可以从其他人那里学到东西，让自己保持时尚。得到网站的功能需求：可以建立个人的达人秀，上传自己喜欢的衣服搭配，最好可以链接到购买的地址。用户类型二：嘉宾：刘祥；档案：23岁；学生；爱好：看书、健身、上网、打电游。作为一名学生，闲暇之余，除了健身之外，他通常喜欢打打电脑游戏或者上网看看新闻、数码、汽车。总结刘祥的需求：希望可以找到符合学生身份也显得很时尚的衣服，价格方面最好可以便宜点。而且应该可以很快找到自己想要的东西，网站易用好用。得到网站的功能需求：要价格便宜些，可以有一些团购，对网站界面，布局和导航应该清晰有条理，人机交互设计必须合理。用户类型三：嘉宾：B 君；档案：37岁左右；商店老板；爱好：与人沟通、音乐、上网。B君也喜欢上网淘宝，但是由于体型偏胖，要想找到称心如意的衣服非常困难总结B 君的需求：希望可以找到跟他体型差不多的人，推荐一些衣服给他，同时最好相互之间可以像朋友一样交谈。得到网站的功能需求：需要建立社区分享自己喜欢的衣服，如型男社区（身材比较正常的男士居多），特殊体型男社区（偏瘦或偏胖的男士居多），还需要建立讨论组，在这里网友们可以自由讨论。用户类型四：嘉宾：韩娜；档案：23岁；矿大学生；爱好：看书、音乐、旅游。和所有的女人一样，她的衣橱整洁而又秩序，里面有各种各样的衣服，她知道在不同的场合穿什么样的衣服。唯一让她头疼的是她的男朋友，每次要出门的时候，总觉得少了点什么总结韩娜的需求：因为男朋友工作很忙，没有时间逛街买衣服，所以她只能在网上帮男朋友买，尺寸方面难免不好掌握，希望能够看到大家对衣服的尺寸的评论，上身效果如何得到网站的功能需求：大家分享后可以跟很多评论，也可以上传自己穿上以后的效果图。总结得对网站功能需求如下表：用户需求网站功能希望更多的人能跟他一样穿着，同时自己也可以从中获得成就感可以建立个人的达人秀，上传自己喜欢的衣服搭配希望可以从其他人那里学到东西，让自己保持时尚可以很快找到自己想要的东西布局和导航应该清晰有条理，人机交互设计必须合理希望可以找到跟他体型差不多的人，推荐一些衣服给他，同时最好相互之间可以像朋友一样交谈需要建立社区分享自己喜欢的衣服讨论组，在这里网友们可以自由讨论。希望能够看到大家对衣服的尺寸的评论，上身效果如何大家分享后可以跟很多评论，也可以上传自己穿上以后的效果图2.2网站解构关于女装推荐的网站比较多，关于男装推荐的网站比较少，从这些较少的男装推荐网站中我选择有代表性的网站男品街来进行解构分析。2.2.1网站的界面设计解构根据我对男品街网站的解构，该网站的界面设计主要有一下特点：1.整体布局简约，体现了一种男士精致的生活，囊括了潮男、型男、品质男的时尚选择，拒绝平庸。2.从色彩看，主基调为蓝色，蓝色非常纯净，通常让人联想到海洋、天空、水、宇宙。纯净的蓝色表现出一种美丽、冷静、理智、安详与广阔。蓝色具有沉稳的特性，具有理智和准确的意象，强调科技和效率。3.从人体工程学角度看，有颜色、图像等媒体的界面增加了视觉上的感染力，减少疲劳感；图形更具有直观、形象、信息量大的优点，使用户的操作及其观感更直接、可见和逼真，增强软件系统的可理解性和易学易用性。还有一些反馈信息和容错手段。主要有一下不足：1.整体布局非常简约，显得不够丰富，而且极大部分是静态的，缺少一些灵动。2.从导航和状态栏看，只有大的标题，如果想要进入大标题下的小标题，必须先打开大标题的页面才能跳转。3.从人体工程学角度看，主页显示的内容过多，需要下拉才能继续浏览。因此，我的网站的规划：1.整体布局也需要保持简约，主基调也采用蓝色，尽量图文并茂，多添加一些动态的东西。2.设置导航条时，鼠标移入显示子标题。3.尽量把内容显示在一页内，更新速度快一些。2.2.2 网站的操作方式解构男品街主要操作流程如下：根据我对男品街网站的解构，该网站的操作方式主要有一下特点：1.操作方式主要是鼠标移入、移出、点击、滚动，还有键盘输入，都是一些常用的操作，操作简单方便。2.操作起来条理清晰，能够引导用户做出正确操作，同时具有一定的容错能力。根据我对男品街网站的解构，该网站的操作方式主要有一下不足：1.男品街是一个倡导买家分享推荐的社区，但是总是有大量的广告性分享。2.男品街定位是推荐男士精品，分享贵于精而不在于多，总是有些比较杂乱的商品分享。因此，我的网站的规划：1.操作方式主要是鼠标移入、移出、点击、滚动，还有键盘输入，因为都是一些常用的操作，操作简单方便。2.操作起来条理也应该清晰，能够引导用户做出正确操作，同时具有一定的容错能力。3.我们会对用户分享的商品进行人工筛选，优秀的分享会推荐在潮流街的相关商品类目中。2.3技术背景分析在设计制作的过程中，主要使用了Axure RP来设计网站，Balsamiq Mockups来画网站设计草图，Flash来做动画，下面简要介绍下这三者。Axure RP 允许程序设计者为程序或者网站制作动态的线框图、流程图、以及其他所需的图表。 规范的图标文档让您在交流、记录，设计上更容易被接受，使用Axure RP 建立更简单、更专业的数据表、图。Balsamiq Mockups是一款进行网页原型设计的工具，内置很多常用的网页元素，可以让用户很方便地设计页面结构、注释交互关系。与其他原型设计工具不同的是，Balsamiq能够嵌入到Confluence、JIRA或XWiki，方便共享与协同工作。随着网络速度与品质的提升，越来越多的网站开始使用Flash来表达网站的内容，以Flash强大的动画与向量画效果来弥补一般动画与HTML指令的不足。紧接着宽频网络网络即将进入我们的生活，相信Flash将会变得更普及3. 设计工作展开3.1网站功能描述男人帮功能概述男人帮是一个聚集潮男、型男、品质男的时尚购物社区。有品位，爱网购的时尚男生都在这里，分享时尚精品链接，交流着装与网购心得。男人帮是与最会网购的男士一起逛街，挑衣服的地方，是时尚男士分享网购衣服经验的圣地。时尚达人与数百万买家聚集在这里，分享网购经验，发表对宝贝和店铺的真切评价，晒真人搭配，为你推荐衣服、帮你找差价、回答你关于搭配与护肤的各种问题。网购挑衣服，先来男人帮。最漂亮的淘宝单品-每一件都是真人推荐，只分享我喜欢的。主要功能模块有潮流街主要提供当下比较热门的男装类商品，内容主要都是由用户分享推荐的，点击链接可以直接购买；小组，由兴趣相投的人自由组成的，相互之间可以讨论和分享；达人秀，展现一些分享比较多受大家关注比较多的优秀达人的专场展。3.2网站设计规划对所解构的网站的操作流程进行优化得到了新的操作流程，按照新的操作流程，在Balsamiq Mockups 中绘制了一些主要页面的草图，然后按照草图在Axure RP 中设计页面。3.3 网站页面设计主要就首页、分享动态、个人中心等页面做介绍；1.首页设计：该页面为用户进入网站接触的第一个页面。无论是会员用户还是游客，他们对网站的第一印象都来自于此张页面。在此页面内，用户可以看到少数商品；浏览网站的公开页面，先行体验部分功能。同时在此页面进行登录、注册；2.分享动态页面设计主要显示用户的动态更新的一些分享3.中心设计4.设计总结本次网站设计，具有自身的特色和创新之处。首先以用户为中心，通过分析设计，再分析再设计的过程，反复更正。尤其用了大量工作对其他网站进行了分析研究，使交互设计更加切合用户体验的实际，其次，将被大家忽视的男士购物需求作为本网站的设计需求，旨在帮助男士打造一个属于自己的服装推荐分享网站。但是，也存在一些不足，有些交互设计仅停留在界面上，具体动作设计没有完整。在设计 “男人帮”这个网站之前，我觉得网站设计肯定是一件非常困难的事情，而且在老师告诉我们课程设计的内容的时候，感觉自己不可能完成，不过在老师的指导下，我渐渐发现，其实只要思路对了就会变得很简单，首先最重要的是要最用户调