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

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

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

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

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

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

產(chǎn)品定位

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

目標(biāo)用戶

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

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

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

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

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

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

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

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



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






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






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





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

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

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

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

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

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

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

「資訊」放到頁面的下方菜單。



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

  返回