微信的最近一次更新,小程序入口變淺了很多。最近使用的小程序,被放置在微信打開后初始頁面的下拉菜單中,而且給的下拉欄空間非常充足。為了讓培養(yǎng)用戶小程序習(xí)慣和讓更多人了解小程序,微信開發(fā)團(tuán)隊(duì)還推出了“跳一跳”小程序游戲。
小編的朋友小王最近就接了一筆小程序私單,因?yàn)橹皼]接觸過
小程序設(shè)計(jì),他是按照做App思路做的,所以全程他基本就這樣…
隨著小程序的普及,設(shè)計(jì)師們也接到了不少小程序設(shè)計(jì)的私單,為了避免和小王一樣的慘痛經(jīng)歷。小編今天就通過分析幾款應(yīng)用,跟大家聊一聊App和微信小程序設(shè)計(jì)的異同。
商城類
蘑菇街App和小程序的界面對比非常典型。
首先,看到看到
小程序的一印象就是簡潔、扁平。App頭欄的banner在小程序中消失了,換成了主題色背景加“領(lǐng)紅包”字樣。(紅包領(lǐng)完后頭欄位置上移動(dòng)縮小,背景不變)實(shí)物icon到小程序中都變成了簡約的線性圖標(biāo)配以加大后的字體。第三欄雖使用了實(shí)物圖片,但整體增加灰度,頁面的統(tǒng)一性加強(qiáng)。其次,下滑后會(huì)發(fā)現(xiàn),小程序比app少了水平滾動(dòng)列表,直接在一級(jí)頁面顯示商品信息,使用用戶的一句話短評(píng)來代替直播、專題推薦。
這樣整體看上去界面顯得更輕量,符合小程序的設(shè)計(jì)需求。值得注意的是小程序頁面上特地加了一句,“本商城為騰訊投資企業(yè),全場包郵,官方保證”。這真的要給產(chǎn)品經(jīng)理點(diǎn)個(gè)贊了,因?yàn)橛肁pp的人大多是忠實(shí)用戶,但在微信端用戶很可能是通過朋友圈、群聊一次使用。而愿意使用
小程序的用戶,一般來講對微信信任度較高,這句話無疑是給新用戶打了一劑強(qiáng)心針,順便抱了騰訊爸爸的大腿。
同樣是依賴社區(qū)和UGC內(nèi)容生產(chǎn)起家的小紅書,小紅書的小程序端可以說是非常符合設(shè)計(jì)師審美了:極簡。
底部tabbar只有兩個(gè)內(nèi)容——“首頁—我的”,一級(jí)頁面沒有任何引導(dǎo)和功能分區(qū),只能看商品和搜商品。不得不說,在眾多使用橫線劃分欄的小程序中,使用卡片式豎排列的小紅書非常吸引人。
二級(jí)頁面(商品詳情頁)比較像淘寶,有用戶推薦和商品詳情,但都采取了“一拉到底”方式。點(diǎn)開關(guān)于某個(gè)商品的用戶推薦后,才會(huì)出現(xiàn)App“發(fā)現(xiàn)”功能下的內(nèi)容。從邏輯上講,小紅書是把App的并列功能換成了串聯(lián)功能/觸發(fā)功能,才做到了頁面的極簡。
不過小紅書的“極簡風(fēng)”一定程度地暴露了在用戶吸引方面的自信哈哈,不知道實(shí)際引流效果,我們且看小紅書日后小程序界面更新動(dòng)向。
資訊類
資訊類的
小程序一定程度分擔(dān)了微信公眾號(hào)的部分功能,在小程序上發(fā)布文章、討論,要比公眾號(hào)來的靈活方便,也成為了日后的一種發(fā)展趨勢。
一個(gè)要說的案例就是《好奇心日報(bào)》小程序,它和App一樣,頂部Navber分為新聞和討論兩部分,部分討論被植入到新聞欄目中,沒有底部導(dǎo)航欄。但是App內(nèi)的水平滾動(dòng)列表和Q字懸浮按鈕消失了。
這款A(yù)pp中的懸浮按鈕實(shí)際上承擔(dān)了應(yīng)用的大量功能。按鈕的消失意味著用戶無法在小程序中登錄、使用社交功能,也不能在二級(jí)頁面中進(jìn)行評(píng)論(可以匿名點(diǎn)贊)。正如
小程序名字的變更,它更像一本電子“雜志”。好奇心日報(bào)在功能上做了減法。
取消社交功能是否合適呢?我們再對比一下鈦媒體小程序。
App和小程序選擇了不同的主題色,但都是品牌顏色,湖藍(lán)看起來更為活潑,但個(gè)人感覺沒有黑色凸顯品味。(如下圖)公司可能考慮到了小程序和App目標(biāo)受眾不同,小程序端用戶更年輕。
底部導(dǎo)航欄除“發(fā)現(xiàn)—活動(dòng)”一欄外相同,都有用戶登錄界面,用戶可以實(shí)現(xiàn)登錄、收藏、評(píng)論等,但更重要的原因,是小程序上同步了App內(nèi)的付費(fèi)課程,社交功能是連帶效果。
回到我們剛才的問題,
小程序是否需要社交功能?要看開發(fā)小程序的主要目的和社交功能的增益效果。比如像知乎頭腦王者這樣的小程序游戲,需要通過好友間同臺(tái)競爭來“刺激”用戶持續(xù)答題,因而應(yīng)有社交功能。
總結(jié)
通過分析這兩類應(yīng)用,我們可以探討以下小程序設(shè)計(jì)經(jīng)驗(yàn)。
1. 輕設(shè)計(jì)
總的來說,
小程序都相較于App化繁為簡,突出主要功能。還可以將并聯(lián)功能改為串聯(lián)/觸發(fā)功能來實(shí)現(xiàn)頁面的簡化,如小紅書。
2. 注意統(tǒng)一性
小程序的色彩、圖標(biāo)、風(fēng)格應(yīng)和App內(nèi)一致,但是要考慮目標(biāo)受眾的不同做適量更改。減少banner、實(shí)物圖標(biāo)的使用,要實(shí)現(xiàn)頁面簡化和色彩統(tǒng)一。
3. 是否應(yīng)當(dāng)使用水平滾動(dòng)列表
這一點(diǎn)從技術(shù)上講是可以實(shí)現(xiàn)的,但是目前大多數(shù)小程序都不采用這樣的做法,但也有像豆瓣評(píng)分這樣的小程序在使用。水平滾動(dòng)列表和垂直滾動(dòng)列表在小程序中是二選一關(guān)系,一個(gè)若為可以無限拉動(dòng),另一個(gè)應(yīng)為有限。
4. 注意加載動(dòng)效
小程序內(nèi)容的輕量也有一個(gè)重要原因——減少打開時(shí)間,用戶對于
小程序的等待時(shí)間要比App少很多。此時(shí)加載動(dòng)效就能夠作為一個(gè)留住用戶的加分項(xiàng)。
5. 導(dǎo)航欄樣式
小程序的底部導(dǎo)航欄較為死板,配置空間為2-5個(gè),且圖標(biāo)和文字空間規(guī)定嚴(yán)格??梢远鄬?shí)用頂部導(dǎo)航欄和懸浮導(dǎo)航按鈕。比如頭腦王者就通過“知乎狗”作為懸浮按鈕導(dǎo)流用戶到知乎熱榜小程序。
今天的分享就到這里啦~胖友們,你們在設(shè)計(jì)
小程序的過程中還積累了什么經(jīng)驗(yàn)?可以在評(píng)論區(qū)分享出來喲:)
文章標(biāo)題:小程序的設(shè)計(jì),和App設(shè)計(jì)一樣嗎?
瀏覽地址:http://redsoil1982.com.cn/news/194408.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有App設(shè)計(jì)等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)