蘑菇街App和小程序的界面對比非常典型。如圖:
蘑菇街小程序界面的第一印象就是間接、扁平,而且去掉了APP首屏的banner,換成了主題色背景。實物icon到小程序中都變成了簡約的線性圖標并配上了加大后的字體。接下來的一欄使用了實物圖片,但整體增加灰度,頁面的統(tǒng)一性加強。
其次,比App少了水平滾動列表,直接在一級頁面顯示商品信息,使用用戶的一句話短評來代替直播、專題推薦。
這樣整體看上去界面顯得更輕量,符合小程序的設(shè)計需求。
再來看下小紅書的小程序端的界面:
一級頁面沒有任何引導(dǎo)和功能分區(qū),只能看商品和搜商品。不得不說,在眾多使用橫線劃分欄的小程序中,使用卡片式豎排列的小紅書非常吸引人。二級頁面就有點像淘寶的詳情頁,這種極簡風(fēng)是很受大家歡迎的。
所以,總結(jié)上面小程序商城ui頁面實例分析,小程序在ui設(shè)計上要注意以下幾點?
1、 輕設(shè)計
總的來說,小程序相較于App都化繁為簡,突出主要功能。還可以將并聯(lián)功能改為串聯(lián)/觸發(fā)功能來實現(xiàn)頁面的簡化。
2、 注意統(tǒng)一性
小程序的色彩、圖標、風(fēng)格應(yīng)和App內(nèi)一致,但是要考慮目標受眾的不同做適量更改。減少banner、實物圖標的使用,要實現(xiàn)頁面簡化和色彩統(tǒng)一。
3、 是否應(yīng)當使用水平滾動列表
目前大多數(shù)小程序都不采用這樣的做法,但也有像豆瓣評分這樣的小程序在使用。水平滾動列表和垂直滾動列表在小程序中是二選一關(guān)系,一個若為可以無限拉動,另一個應(yīng)為有限。
4、 注意加載動效
小程序內(nèi)容的輕量也有一個重要原因:減少打開時間,用戶對于小程序的等待時間要比App少很多。此時加載動效就能夠作為一個留住用戶的加分項。
5、 導(dǎo)航欄樣式
小程序的底部導(dǎo)航欄較為死板,配置空間為2-5個,且圖標和文字空間規(guī)定嚴格??梢远嗍褂庙敳繉?dǎo)航欄和懸浮導(dǎo)航按鈕。比如頭腦王者就通過「知乎狗」作為懸浮按鈕導(dǎo)流用戶到知乎熱榜小程序。
廣力云多用戶商城系統(tǒng)本著以小程序賦能傳統(tǒng)行業(yè),讓產(chǎn)業(yè)擁有科技的靈魂的使命,打造特色的社區(qū)拼團系統(tǒng),結(jié)合微分銷與社交電商玩法,利用大數(shù)據(jù)分析為社區(qū)團購運營賦能。廣力云,一個智慧的商業(yè)新零售電商生態(tài)系統(tǒng)。
添加客服微信