基于工業(yè)設(shè)計(jì)方法學(xué)的男裝推薦分享網(wǎng)站

1、基于工業(yè)設(shè)計(jì)方法學(xué)的男裝推薦分享網(wǎng)站男人幫的設(shè)計(jì)胡婷（中國(guó)礦業(yè)大學(xué)工業(yè)工程2009-1班）摘 要：隨著互聯(lián)網(wǎng)的發(fā)展，購(gòu)物網(wǎng)站的興起，人們的購(gòu)物方式發(fā)生了劃時(shí)代的轉(zhuǎn)變。關(guān)于服裝推薦的網(wǎng)站也層出不窮，像美麗說(shuō)和蘑菇街等關(guān)于推薦女士穿衣打扮的網(wǎng)站非常火，但是關(guān)于推薦男士服飾的網(wǎng)站則很少，本文主要分析男士服裝推薦網(wǎng)站男品街，改進(jìn)設(shè)計(jì)了男人幫這一男裝推薦分享網(wǎng)站。關(guān)鍵詞：男人幫；男裝推薦網(wǎng)站；Axure ; 工業(yè)設(shè)計(jì)購(gòu)物推薦方面，男性用戶往往是受到歧視的。拿當(dāng)下非常火爆的美麗說(shuō)和蘑菇街來(lái)說(shuō)，男性一直是被排斥在外的，并且美麗說(shuō)至今仍不允許男性用戶注冊(cè)。對(duì)于本來(lái)就不太懂得穿衣打扮的男性來(lái)說(shuō)，其實(shí)他們更需要關(guān)

2、懷! 因此，男人也有買(mǎi)衣服的需求，也想了解些男裝穿著搭配的常識(shí)，提高下自己的審美品味。據(jù)相關(guān)數(shù)據(jù)統(tǒng)計(jì)，57%的男人還沒(méi)有找到屬于自己風(fēng)格的服飾；83%的時(shí)間浪費(fèi)在選不適合自己的衣服上；62%的男人因?yàn)楣ぷ鞣泵臎](méi)有認(rèn)真打理過(guò)自己；全國(guó)至少1億男人的襯衫尺碼錯(cuò)誤；10個(gè)男人中有3個(gè)習(xí)慣白色襪子配黑色皮鞋 男人幫就是為此而創(chuàng)立的男士時(shí)尚購(gòu)物分享網(wǎng)站，我們只專(zhuān)注于男性市場(chǎng)，為18-35歲為主的男性用戶提供服飾搭配和時(shí)尚潮流的購(gòu)物分享及推薦，解決男人場(chǎng)合著裝、服飾搭配、時(shí)尚潮流、商務(wù)禮儀等方面的購(gòu)物和交流需求。1. 課題簡(jiǎn)介2. 設(shè)計(jì)研究2.1用戶研究 用戶研究采用的方式主要是現(xiàn)場(chǎng)調(diào)查采訪。得到以下幾

3、種類(lèi)型用戶需求。用戶類(lèi)型一：嘉賓：C君和D君；檔案：23歲左右，理發(fā)師；愛(ài)好：上網(wǎng)、音樂(lè)、旅游；喜歡時(shí)尚，淘寶達(dá)人，愿意分享自己喜歡的衣服和鞋子總結(jié)C、D 君的需求：希望更多的人能跟他一樣穿著，同時(shí)自己也可以從中獲得成就感，最好自己也可以有很多粉絲。當(dāng)然也希望可以從其他人那里學(xué)到東西，讓自己保持時(shí)尚。得到網(wǎng)站的功能需求：可以建立個(gè)人的達(dá)人秀，上傳自己喜歡的衣服搭配，最好可以鏈接到購(gòu)買(mǎi)的地址。用戶類(lèi)型二：嘉賓：劉祥；檔案：23歲；學(xué)生；愛(ài)好：看書(shū)、健身、上網(wǎng)、打電游。作為一名學(xué)生，閑暇之余，除了健身之外，他通常喜歡打打電腦游戲或者上網(wǎng)看看新聞、數(shù)碼、汽車(chē)。總結(jié)劉祥的需求：希望可以找到符合學(xué)生身份

4、也顯得很時(shí)尚的衣服，價(jià)格方面最好可以便宜點(diǎn)。而且應(yīng)該可以很快找到自己想要的東西，網(wǎng)站易用好用。得到網(wǎng)站的功能需求：要價(jià)格便宜些，可以有一些團(tuán)購(gòu)，對(duì)網(wǎng)站界面，布局和導(dǎo)航應(yīng)該清晰有條理，人機(jī)交互設(shè)計(jì)必須合理。用戶類(lèi)型三：嘉賓：B 君；檔案：37歲左右；商店老板；愛(ài)好：與人溝通、音樂(lè)、上網(wǎng)。B君也喜歡上網(wǎng)淘寶，但是由于體型偏胖，要想找到稱(chēng)心如意的衣服非常困難總結(jié)B 君的需求：希望可以找到跟他體型差不多的人，推薦一些衣服給他，同時(shí)最好相互之間可以像朋友一樣交談。得到網(wǎng)站的功能需求：需要建立社區(qū)分享自己喜歡的衣服，如型男社區(qū)（身材比較正常的男士居多），特殊體型男社區(qū)（偏瘦或偏胖的男士居多），還需要建立討

5、論組，在這里網(wǎng)友們可以自由討論。用戶類(lèi)型四：嘉賓：韓娜；檔案：23歲；礦大學(xué)生；愛(ài)好：看書(shū)、音樂(lè)、旅游。和所有的女人一樣，她的衣櫥整潔而又秩序，里面有各種各樣的衣服，她知道在不同的場(chǎng)合穿什么樣的衣服。唯一讓她頭疼的是她的男朋友，每次要出門(mén)的時(shí)候，總覺(jué)得少了點(diǎn)什么總結(jié)韓娜的需求：因?yàn)槟信笥压ぷ骱苊?，沒(méi)有時(shí)間逛街買(mǎi)衣服，所以她只能在網(wǎng)上幫男朋友買(mǎi)，尺寸方面難免不好掌握，希望能夠看到大家對(duì)衣服的尺寸的評(píng)論，上身效果如何得到網(wǎng)站的功能需求：大家分享后可以跟很多評(píng)論，也可以上傳自己穿上以后的效果圖?？偨Y(jié)得對(duì)網(wǎng)站功能需求如下表：用戶需求網(wǎng)站功能希望更多的人能跟他一樣穿著，同時(shí)自己也可以從中獲得成就感可以建

6、立個(gè)人的達(dá)人秀，上傳自己喜歡的衣服搭配希望可以從其他人那里學(xué)到東西，讓自己保持時(shí)尚可以很快找到自己想要的東西布局和導(dǎo)航應(yīng)該清晰有條理，人機(jī)交互設(shè)計(jì)必須合理希望可以找到跟他體型差不多的人，推薦一些衣服給他，同時(shí)最好相互之間可以像朋友一樣交談需要建立社區(qū)分享自己喜歡的衣服討論組，在這里網(wǎng)友們可以自由討論。希望能夠看到大家對(duì)衣服的尺寸的評(píng)論，上身效果如何大家分享后可以跟很多評(píng)論，也可以上傳自己穿上以后的效果圖2.2網(wǎng)站解構(gòu)關(guān)于女裝推薦的網(wǎng)站比較多，關(guān)于男裝推薦的網(wǎng)站比較少，從這些較少的男裝推薦網(wǎng)站中我選擇有代表性的網(wǎng)站男品街來(lái)進(jìn)行解構(gòu)分析。2.2.1網(wǎng)站的界面設(shè)計(jì)解構(gòu)根據(jù)我對(duì)男品街網(wǎng)站的解構(gòu)，該網(wǎng)站

7、的界面設(shè)計(jì)主要有一下特點(diǎn)：1.整體布局簡(jiǎn)約，體現(xiàn)了一種男士精致的生活，囊括了潮男、型男、品質(zhì)男的時(shí)尚選擇，拒絕平庸。2.從色彩看，主基調(diào)為藍(lán)色，藍(lán)色非常純凈，通常讓人聯(lián)想到海洋、天空、水、宇宙。純凈的藍(lán)色表現(xiàn)出一種美麗、冷靜、理智、安詳與廣闊。藍(lán)色具有沉穩(wěn)的特性，具有理智和準(zhǔn)確的意象，強(qiáng)調(diào)科技和效率。3.從人體工程學(xué)角度看，有顏色、圖像等媒體的界面增加了視覺(jué)上的感染力，減少疲勞感；圖形更具有直觀、形象、信息量大的優(yōu)點(diǎn)，使用戶的操作及其觀感更直接、可見(jiàn)和逼真，增強(qiáng)軟件系統(tǒng)的可理解性和易學(xué)易用性。還有一些反饋信息和容錯(cuò)手段。主要有一下不足：1.整體布局非常簡(jiǎn)約，顯得不夠豐富，而且極大部分是靜態(tài)的，

8、缺少一些靈動(dòng)。2.從導(dǎo)航和狀態(tài)欄看，只有大的標(biāo)題，如果想要進(jìn)入大標(biāo)題下的小標(biāo)題，必須先打開(kāi)大標(biāo)題的頁(yè)面才能跳轉(zhuǎn)。3.從人體工程學(xué)角度看，主頁(yè)顯示的內(nèi)容過(guò)多，需要下拉才能繼續(xù)瀏覽。因此，我的網(wǎng)站的規(guī)劃：1.整體布局也需要保持簡(jiǎn)約，主基調(diào)也采用藍(lán)色，盡量圖文并茂，多添加一些動(dòng)態(tài)的東西。2.設(shè)置導(dǎo)航條時(shí)，鼠標(biāo)移入顯示子標(biāo)題。3.盡量把內(nèi)容顯示在一頁(yè)內(nèi)，更新速度快一些。2.2.2 網(wǎng)站的操作方式解構(gòu)男品街主要操作流程如下：根據(jù)我對(duì)男品街網(wǎng)站的解構(gòu)，該網(wǎng)站的操作方式主要有一下特點(diǎn)：1.操作方式主要是鼠標(biāo)移入、移出、點(diǎn)擊、滾動(dòng)，還有鍵盤(pán)輸入，都是一些常用的操作，操作簡(jiǎn)單方便。2.操作起來(lái)?xiàng)l理清晰，能夠引導(dǎo)

9、用戶做出正確操作，同時(shí)具有一定的容錯(cuò)能力。根據(jù)我對(duì)男品街網(wǎng)站的解構(gòu)，該網(wǎng)站的操作方式主要有一下不足：1.男品街是一個(gè)倡導(dǎo)買(mǎi)家分享推薦的社區(qū)，但是總是有大量的廣告性分享。2.男品街定位是推薦男士精品，分享貴于精而不在于多，總是有些比較雜亂的商品分享。因此，我的網(wǎng)站的規(guī)劃：1.操作方式主要是鼠標(biāo)移入、移出、點(diǎn)擊、滾動(dòng)，還有鍵盤(pán)輸入，因?yàn)槎际且恍┏Ｓ玫牟僮?，操作?jiǎn)單方便。2.操作起來(lái)?xiàng)l理也應(yīng)該清晰，能夠引導(dǎo)用戶做出正確操作，同時(shí)具有一定的容錯(cuò)能力。3.我們會(huì)對(duì)用戶分享的商品進(jìn)行人工篩選，優(yōu)秀的分享會(huì)推薦在潮流街的相關(guān)商品類(lèi)目中。2.3技術(shù)背景分析在設(shè)計(jì)制作的過(guò)程中，主要使用了Axure RP來(lái)設(shè)計(jì)網(wǎng)

10、站，Balsamiq Mockups來(lái)畫(huà)網(wǎng)站設(shè)計(jì)草圖，F(xiàn)lash來(lái)做動(dòng)畫(huà)，下面簡(jiǎn)要介紹下這三者。Axure RP 允許程序設(shè)計(jì)者為程序或者網(wǎng)站制作動(dòng)態(tài)的線框圖、流程圖、以及其他所需的圖表。 規(guī)范的圖標(biāo)文檔讓您在交流、記錄，設(shè)計(jì)上更容易被接受，使用Axure RP 建立更簡(jiǎn)單、更專(zhuān)業(yè)的數(shù)據(jù)表、圖。Balsamiq Mockups是一款進(jìn)行網(wǎng)頁(yè)原型設(shè)計(jì)的工具，內(nèi)置很多常用的網(wǎng)頁(yè)元素，可以讓用戶很方便地設(shè)計(jì)頁(yè)面結(jié)構(gòu)、注釋交互關(guān)系。與其他原型設(shè)計(jì)工具不同的是，Balsamiq能夠嵌入到Confluence、JIRA或XWiki，方便共享與協(xié)同工作。隨著網(wǎng)絡(luò)速度與品質(zhì)的提升，越來(lái)越多的網(wǎng)站開(kāi)始使用Fla

11、sh來(lái)表達(dá)網(wǎng)站的內(nèi)容，以Flash強(qiáng)大的動(dòng)畫(huà)與向量畫(huà)效果來(lái)彌補(bǔ)一般動(dòng)畫(huà)與HTML指令的不足。緊接著寬頻網(wǎng)絡(luò)網(wǎng)絡(luò)即將進(jìn)入我們的生活，相信Flash將會(huì)變得更普及3. 設(shè)計(jì)工作展開(kāi)3.1網(wǎng)站功能描述男人幫功能概述男人幫是一個(gè)聚集潮男、型男、品質(zhì)男的時(shí)尚購(gòu)物社區(qū)。有品位，愛(ài)網(wǎng)購(gòu)的時(shí)尚男生都在這里，分享時(shí)尚精品鏈接，交流著裝與網(wǎng)購(gòu)心得。男人幫是與最會(huì)網(wǎng)購(gòu)的男士一起逛街，挑衣服的地方，是時(shí)尚男士分享網(wǎng)購(gòu)衣服經(jīng)驗(yàn)的圣地。時(shí)尚達(dá)人與數(shù)百萬(wàn)買(mǎi)家聚集在這里，分享網(wǎng)購(gòu)經(jīng)驗(yàn)，發(fā)表對(duì)寶貝和店鋪的真切評(píng)價(jià)，曬真人搭配，為你推薦衣服、幫你找差價(jià)、回答你關(guān)于搭配與護(hù)膚的各種問(wèn)題。網(wǎng)購(gòu)挑衣服，先來(lái)男人幫。最漂亮的淘寶單品-每

12、一件都是真人推薦，只分享我喜歡的。主要功能模塊有潮流街主要提供當(dāng)下比較熱門(mén)的男裝類(lèi)商品，內(nèi)容主要都是由用戶分享推薦的，點(diǎn)擊鏈接可以直接購(gòu)買(mǎi)；小組，由興趣相投的人自由組成的，相互之間可以討論和分享；達(dá)人秀，展現(xiàn)一些分享比較多受大家關(guān)注比較多的優(yōu)秀達(dá)人的專(zhuān)場(chǎng)展。3.2網(wǎng)站設(shè)計(jì)規(guī)劃對(duì)所解構(gòu)的網(wǎng)站的操作流程進(jìn)行優(yōu)化得到了新的操作流程，按照新的操作流程，在Balsamiq Mockups 中繪制了一些主要頁(yè)面的草圖，然后按照草圖在Axure RP 中設(shè)計(jì)頁(yè)面。3.3 網(wǎng)站頁(yè)面設(shè)計(jì)主要就首頁(yè)、分享動(dòng)態(tài)、個(gè)人中心等頁(yè)面做介紹；1.首頁(yè)設(shè)計(jì)：該頁(yè)面為用戶進(jìn)入網(wǎng)站接觸的第一個(gè)頁(yè)面。無(wú)論是會(huì)員用戶還是游客，他們對(duì)

13、網(wǎng)站的第一印象都來(lái)自于此張頁(yè)面。在此頁(yè)面內(nèi)，用戶可以看到少數(shù)商品；瀏覽網(wǎng)站的公開(kāi)頁(yè)面，先行體驗(yàn)部分功能。同時(shí)在此頁(yè)面進(jìn)行登錄、注冊(cè)；2.分享動(dòng)態(tài)頁(yè)面設(shè)計(jì)主要顯示用戶的動(dòng)態(tài)更新的一些分享3.中心設(shè)計(jì)4.設(shè)計(jì)總結(jié)本次網(wǎng)站設(shè)計(jì)，具有自身的特色和創(chuàng)新之處。首先以用戶為中心，通過(guò)分析設(shè)計(jì)，再分析再設(shè)計(jì)的過(guò)程，反復(fù)更正。尤其用了大量工作對(duì)其他網(wǎng)站進(jìn)行了分析研究，使交互設(shè)計(jì)更加切合用戶體驗(yàn)的實(shí)際，其次，將被大家忽視的男士購(gòu)物需求作為本網(wǎng)站的設(shè)計(jì)需求，旨在幫助男士打造一個(gè)屬于自己的服裝推薦分享網(wǎng)站。但是，也存在一些不足，有些交互設(shè)計(jì)僅停留在界面上，具體動(dòng)作設(shè)計(jì)沒(méi)有完整。在設(shè)計(jì) “男人幫”這個(gè)網(wǎng)站之前，我覺(jué)得網(wǎng)站設(shè)計(jì)肯定是一件非常困難的事情，而且在老師告訴我們課程設(shè)計(jì)的內(nèi)容的時(shí)候，感覺(jué)自己不可能完成，不過(guò)在老師的指導(dǎo)下，我漸漸發(fā)現(xiàn)，其實(shí)只要思路對(duì)了就會(huì)變得很簡(jiǎn)單，首先最重要的是要最用戶調(diào)