微信的最近一次更新，小程序入口變淺了很多。最近使用的小程序，被放置在微信打開后初始頁面的下拉菜單中，而且給的下拉欄空間非常充足。為了讓培養(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)完后頭欄位置上移動縮小，背景不變）實(shí)物icon到小程序中都變成了簡約的線性圖標(biāo)配以加大后的字體。第三欄雖使用了實(shí)物圖片，但整體增加灰度，頁面的統(tǒng)一性加強(qiáng)。其次，下滑后會發(fā)現(xiàn)，小程序比app少了水平滾動列表，直接在一級頁面顯示商品信息，使用用戶的一句話短評來代替直播、專題推薦。
這樣整體看上去界面顯得更輕量，符合小程序的設(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)容——“首頁—我的”，一級頁面沒有任何引導(dǎo)和功能分區(qū)，只能看商品和搜商品。不得不說，在眾多使用橫線劃分欄的小程序中，使用卡片式豎排列的小紅書非常吸引人。
二級頁面（商品詳情頁）比較像淘寶，有用戶推薦和商品詳情，但都采取了“一拉到底”方式。點(diǎn)開關(guān)于某個(gè)商品的用戶推薦后，才會出現(xiàn)App“發(fā)現(xiàn)”功能下的內(nèi)容。從邏輯上講，小紅書是把App的并列功能換成了串聯(lián)功能/觸發(fā)功能，才做到了頁面的極簡。
不過小紅書的“極簡風(fēng)”一定程度地暴露了在用戶吸引方面的自信哈哈，不知道實(shí)際引流效果，我們且看小紅書日后小程序界面更新動向。
資訊類
資訊類的
小程序一定程度分擔(dān)了微信公眾號的部分功能，在小程序上發(fā)布文章、討論，要比公眾號來的靈活方便，也成為了日后的一種發(fā)展趨勢。
一個(gè)要說的案例就是《好奇心日報(bào)》小程序，它和App一樣，頂部Navber分為新聞和討論兩部分，部分討論被植入到新聞欄目中，沒有底部導(dǎo)航欄。但是App內(nèi)的水平滾動列表和Q字懸浮按鈕消失了。
這款A(yù)pp中的懸浮按鈕實(shí)際上承擔(dān)了應(yīng)用的大量功能。按鈕的消失意味著用戶無法在小程序中登錄、使用社交功能，也不能在二級頁面中進(jìn)行評論（可以匿名點(diǎn)贊）。正如
小程序名字的變更，它更像一本電子“雜志”。好奇心日報(bào)在功能上做了減法。
取消社交功能是否合適呢？我們再對比一下鈦媒體小程序。
App和小程序選擇了不同的主題色，但都是品牌顏色，湖藍(lán)看起來更為活潑，但個(gè)人感覺沒有黑色凸顯品味。（如下圖）公司可能考慮到了小程序和App目標(biāo)受眾不同，小程序端用戶更年輕。
底部導(dǎo)航欄除“發(fā)現(xiàn)—活動”一欄外相同，都有用戶登錄界面，用戶可以實(shí)現(xiàn)登錄、收藏、評論等，但更重要的原因，是小程序上同步了App內(nèi)的付費(fèi)課程，社交功能是連帶效果。
回到我們剛才的問題，
小程序是否需要社交功能？要看開發(fā)小程序的主要目的和社交功能的增益效果。比如像知乎頭腦王者這樣的小程序游戲，需要通過好友間同臺競爭來“刺激”用戶持續(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)使用水平滾動列表
這一點(diǎn)從技術(shù)上講是可以實(shí)現(xiàn)的，但是目前大多數(shù)小程序都不采用這樣的做法，但也有像豆瓣評分這樣的小程序在使用。水平滾動列表和垂直滾動列表在小程序中是二選一關(guān)系，一個(gè)若為可以無限拉動，另一個(gè)應(yīng)為有限。
4. 注意加載動效
小程序內(nèi)容的輕量也有一個(gè)重要原因——減少打開時(shí)間，用戶對于
小程序的等待時(shí)間要比App少很多。此時(shí)加載動效就能夠作為一個(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)？可以在評論區(qū)分享出來喲：）
當(dāng)前標(biāo)題：小程序的設(shè)計(jì)，和App設(shè)計(jì)一樣嗎？
標(biāo)題路徑：http://www.rwnh.cn/news8/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)請盡快告知，我們將會在第一時(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)
