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