羅麥隨行APP首頁(yè)改版交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)

羅麥隨行APP首頁(yè)改版交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)

交互設(shè)計(jì) | 界面設(shè)計(jì) | vue開(kāi)發(fā)

交互設(shè)計(jì) | 界面設(shè)計(jì) | vue開(kāi)發(fā)

羅麥隨行app,一個(gè)與羅麥伙伴無(wú)縫鏈接的平臺(tái),這是一個(gè)讓羅麥伙伴足不出戶(hù),也能隨時(shí)隨地了解羅麥?zhǔn)聵I(yè)的平臺(tái)。羅麥微生活、羅麥微視頻、羅麥隨身工具包、羅麥電子書(shū)、羅麥科技微聚焦等版塊統(tǒng)統(tǒng)搬回家。這個(gè)App已上線(xiàn)多年未更新,客戶(hù)希望設(shè)計(jì)公司自由發(fā)揮,在現(xiàn)有功能上優(yōu)化交互和視覺(jué),完成首頁(yè)改版。

藍(lán)藍(lán)設(shè)計(jì)下載了這個(gè)軟件,查閱了相關(guān)競(jìng)品:安利等公司的APP設(shè)計(jì)及國(guó)外的優(yōu)秀設(shè)計(jì)作品。作為一個(gè)使用者,仔細(xì)的研究了APP目前的功能特點(diǎn),內(nèi)容更新頻率,按照產(chǎn)品運(yùn)營(yíng)的思維,重新梳理了交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)。在基本沒(méi)有客戶(hù)參與的情況下,設(shè)計(jì)出首頁(yè)的提案。

產(chǎn)品定位

羅麥隨行——口袋里的多媒體工具包。
掌握公司動(dòng)態(tài),一點(diǎn)知曉羅麥?zhǔn)拢?
多欄目、多類(lèi)別,總有一款適合你;
微生活,為生活,多彩羅麥盡顯科技力量;
海量信息,智能捕捉,羅麥的多元展示之窗。

目標(biāo)用戶(hù)

北京羅麥科技集團(tuán)是一家集科研開(kāi)發(fā)、生產(chǎn)運(yùn)營(yíng)、銷(xiāo)售服務(wù)于一體的多元化高新技術(shù)企業(yè),直銷(xiāo)企業(yè)。這款軟件致力于為廣大營(yíng)銷(xiāo)人員和消費(fèi)者提供優(yōu)質(zhì)的產(chǎn)品和卓越的服務(wù)。 通過(guò)線(xiàn)渠道購(gòu)買(mǎi)羅麥產(chǎn)品。

設(shè)計(jì)風(fēng)格

設(shè)計(jì)風(fēng)格參考羅麥科技官網(wǎng)的logo色調(diào),綠色和紅色的結(jié)合,突出品牌的主題。在保持APP整體設(shè)計(jì)語(yǔ)言的一致的前提下;頁(yè)面布局按照我們的理解進(jìn)行適當(dāng)?shù)膬?yōu)化,以更加貼近用戶(hù)使用場(chǎng)景。 整體設(shè)計(jì)簡(jiǎn)約、優(yōu)雅、創(chuàng)新。

首頁(yè)界面設(shè)計(jì)

改版希望從不增加功能的情況下,對(duì)產(chǎn)品的功能、交互、視覺(jué)呈現(xiàn)進(jìn)行重組和設(shè)計(jì)。我們重新梳理整個(gè)app現(xiàn)有的功能,改變?cè)惺醉?yè)單調(diào)不美觀(guān)的現(xiàn)狀,在首頁(yè)增加了一些便于用戶(hù)操作和促進(jìn)用戶(hù)購(gòu)買(mǎi)的內(nèi)容。豐富首頁(yè)內(nèi)容,減少用戶(hù)操作,提升用戶(hù)體驗(yàn),目的是使App成為企業(yè)營(yíng)銷(xiāo)、銷(xiāo)售的利器。

羅麥隨行APP首頁(yè)改版交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)-首頁(yè)

遠(yuǎn)東移動(dòng)門(mén)戶(hù)-交互設(shè)計(jì)

頂部模塊--包括「搜索框」「消息入口」「banner」三個(gè)功能。搜索框能幫用戶(hù)快速定位想要的內(nèi)容提高易用性, banner展示主推產(chǎn)品促進(jìn)用戶(hù)消費(fèi)。
入口模塊--入口圖標(biāo)簡(jiǎn)化成四個(gè),去掉「全景展示」和「麥享視聽(tīng)」,「資訊」放到頁(yè)面下面的菜單,「麥享定制」分開(kāi)突出展示。
整體依舊采用和logo主題色保持一致的設(shè)計(jì)語(yǔ)言進(jìn)行設(shè)計(jì),保證圖標(biāo)的可讀性和示意性,準(zhǔn)確表達(dá)出功能的含義。
消息通知--重要消息主動(dòng)推給用戶(hù)。
「麥享定制」--分成兩個(gè)在首頁(yè)展示,用戶(hù)可快速進(jìn)入到需要的頁(yè)面,減少操作。



直播提示--直播從下面菜單提上來(lái)作為一個(gè)單獨(dú)區(qū)域,更加直接的提高用戶(hù)的觀(guān)看興趣。






產(chǎn)品展示--「排行榜」「小編推薦」「好物推薦」這三個(gè)區(qū)域都是產(chǎn)品展示區(qū),將熱銷(xiāo)的、用戶(hù)需要的產(chǎn)品主動(dòng)推給用戶(hù),從而促進(jìn)消費(fèi)。






最新視頻—短視頻、直播引流是目前市場(chǎng)比較火熱的,所以在首頁(yè)有個(gè)單獨(dú)的展示區(qū)域,減少用戶(hù)操作步驟,同時(shí)在首頁(yè)默認(rèn)展示四個(gè),根據(jù)用戶(hù)的不同需求,如果想繼續(xù)看就點(diǎn)擊「加載更多」,如果不需要直接劃過(guò)繼續(xù)瀏覽下面內(nèi)容。





最新資訊—通過(guò)調(diào)研資訊更新的并不是很多,而且也不是app的主要功能,原app用大量空間展示并不合理。 所以將資訊模塊在保留的基礎(chǔ)上弱化。 菜單欄—通過(guò)線(xiàn)面結(jié)合的方式重新設(shè)計(jì),顏色同樣采用綠色和紅色。菜單欄在保留原有內(nèi)容的基礎(chǔ)上增加了「資訊」。

羅麥隨行APP首頁(yè)改版交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)
羅麥隨行APP首頁(yè)改版交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)

方案二和原型較為接近,以視覺(jué)美化為主,整體在功能布局上沒(méi)有做太多的延伸。

Banner通過(guò)弧形巧妙的和主功能菜單聯(lián)系在一起,增加頁(yè)面的趣味性,使頁(yè)面更加活潑,banner在后,4個(gè)菜單在前,體現(xiàn)了兩個(gè)層次的空間感。

將頁(yè)面原來(lái)快捷入口的「麥享定制」和「直播」單獨(dú)提出來(lái),引進(jìn)用戶(hù)的關(guān)注和轉(zhuǎn)化率。

公司新聞分為大卡片的焦點(diǎn)新聞和列表類(lèi)新聞。

大卡片的焦點(diǎn)新聞因?yàn)閿?shù)量不多不會(huì)頻率更新,交互方式上改為橫向播動(dòng),以節(jié)省空間。

「資訊」放到頁(yè)面的下方菜單。



整體色調(diào)還沿用之前的紅色,暖色調(diào)可以激發(fā)用戶(hù)的購(gòu)買(mǎi)欲,比如「淘寶」「京東」「拼多多」等熱門(mén)的購(gòu)物軟件都是以暖色調(diào)為基礎(chǔ)。

  返回