老譚童鞋認(rèn)為移動(dòng)端的設(shè)計(jì)還是比較難搞,不光是APP,還有微信、手機(jī)網(wǎng)站等界面的UI設(shè)計(jì)方案和布局。
今天25學(xué)堂的老譚童鞋跟大家聊聊移動(dòng)端首頁設(shè)計(jì)的三種設(shè)計(jì)方案與產(chǎn)品思維。我們就開門見山。
第一種移動(dòng)APP首頁設(shè)計(jì)方案:入口導(dǎo)流型的首頁界面設(shè)計(jì)
這種方式也是目前我們最常見的一種移動(dòng)端首頁設(shè)計(jì)方案。
就是采用宮格形勢(shì)的首頁布局:精簡(jiǎn)首頁的內(nèi)容呈現(xiàn),而提供活動(dòng)banner、主要頻道、品類、搜索等入口,同時(shí)告訴用戶我們主要的一些產(chǎn)品和功能。引導(dǎo)用戶盡快引入二級(jí)頁面產(chǎn)生PV。也就是說,首頁不再是真正的消費(fèi)內(nèi)容和與用戶對(duì)話的主場(chǎng)景,而更多的是起到分流的作用。
比如:途牛APP、支付寶APP、攜程APP、返利網(wǎng)APP等。
25學(xué)堂就跟大家舉例3個(gè)來說下這種移動(dòng)端首頁設(shè)計(jì)的方案和布局。目前市場(chǎng)上70%都是以這樣的布局和方案為主導(dǎo)。包括有一些工具型的APP也是采用這樣的首頁布局方式。
優(yōu)點(diǎn):就是簡(jiǎn)單明了,直接了當(dāng),功能很清晰,引導(dǎo)用戶想要干就干嘛。首頁頁面也相對(duì)比較短。
缺點(diǎn):不會(huì)與用戶產(chǎn)生消費(fèi)、對(duì)話反饋的場(chǎng)景,換句話說,交互少。如果分類不合理,也會(huì)導(dǎo)致用戶選擇困難癥。
第二種移動(dòng)APP首頁設(shè)計(jì)方案:瀑布流的首頁界面設(shè)計(jì)
把移動(dòng)端首頁是打造用戶消費(fèi)內(nèi)容最主要的場(chǎng)景。典型的做法就是在首頁可以無限加載內(nèi)容。一些時(shí)尚電商網(wǎng)站,如閃購(gòu)類網(wǎng)站唯品會(huì)APP、聚美優(yōu)品APP、禮物說APP、微博APP等,花瓣網(wǎng)APP和國(guó)外的pintrest這樣的圖片社交類網(wǎng)站。當(dāng)然也有一些國(guó)內(nèi)出境游的旅游APP首頁設(shè)計(jì)。
具體的我們來看看瀑布流的首頁界面設(shè)計(jì):
案例一:住邏輯APP 首頁設(shè)計(jì)
案例二:壁紙圖片類APP首頁設(shè)計(jì);
優(yōu)點(diǎn):采用這樣的APP首頁設(shè)計(jì)方式,用戶可以在首頁盡可能的完成自己想要的交互和消費(fèi)場(chǎng)景。減少層級(jí)的跳轉(zhuǎn)。
缺點(diǎn):形勢(shì)比較單一,缺乏趣味性和游戲性。加載過長(zhǎng)出現(xiàn)一些延時(shí)等問題。體驗(yàn)欠佳。
第三種移動(dòng)APP首頁設(shè)計(jì)方案:對(duì)話列表型
這樣的APP首頁設(shè)計(jì)偏向社交軟件。比如微信APP、qq、whatAPP從APP產(chǎn)品思維方面考慮,其實(shí)這類APP首頁也是一個(gè)主要的交互消費(fèi)場(chǎng)景。
優(yōu)缺點(diǎn),我相信大家天天在用,不用25學(xué)堂的小編再來強(qiáng)大了,微信已經(jīng)改變了我們的生活,同時(shí)也已經(jīng)習(xí)慣了這樣的生活場(chǎng)景和移動(dòng)端的操作習(xí)慣。
方案二和方案三相結(jié)合的方式這樣的APP首頁設(shè)計(jì)算是社交的標(biāo)配了。
第四種移動(dòng)APP首頁設(shè)計(jì)方案:地圖導(dǎo)航型
這一類的APP首頁設(shè)計(jì)基本都是以地圖為主要功能點(diǎn)的一些APP。知名的就是滴滴打車和快的打車、uber等等。
這類APP首頁設(shè)計(jì)的優(yōu)缺點(diǎn):
優(yōu)點(diǎn):依據(jù)地圖來做一些LBS功能的APP。也是在首頁與用戶進(jìn)行了密切的交互場(chǎng)景。移動(dòng)體驗(yàn)更好。
缺點(diǎn):有一定的局限性。并不是每一個(gè)用戶和APP都會(huì)用到這樣的地圖界面。
最后:25學(xué)堂的小編建議各位app設(shè)計(jì)師可以從產(chǎn)品的角度來分析和使用哪些合適的場(chǎng)景首頁設(shè)計(jì)。也算是給大伙拋磚引玉吧!
全站高品質(zhì)素材免費(fèi)下載!