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

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

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

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

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

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

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

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

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

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

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

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

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

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