小程序的設計，和App設計一樣(yàng)嗎？

2022-08-31    分類： App設計

微信的最近一次更新，小程序入口變淺了很多。最近使用的小程序，被(bèi)放置在微信打開(kāi)後(hòu)初始頁面(miàn)的下拉菜單中，而且給的下拉欄空間非常充足。爲了讓培養用戶小程序習慣和讓更多人了解小程序，微信開(kāi)發(fā)團隊還(hái)推出了“跳一跳”小程序遊戲。

小編的朋友小王最近就接了一筆小程序私單，因爲之前沒(méi)接觸過(guò)小程序設計，他是按照做App思路做的，所以全程他基本就這(zhè)樣(yàng)…
随著(zhe)小程序的普及，設計師們也接到了不少小程序設計的私單，爲了避免和小王一樣(yàng)的慘痛經(jīng)曆。小編今天就通過(guò)分析幾款應用，跟大家聊一聊App和微信小程序設計的異同。
商城類
蘑菇街App和小程序的界面(miàn)對(duì)比非常典型。

首先，看到看到小程序的一印象就是簡潔、扁平。App頭欄的banner在小程序中消失了，換成(chéng)了主題色背景加“領紅包”字樣(yàng)。（紅包領完後(hòu)頭欄位置上移動縮小，背景不變）實物icon到小程序中都(dōu)變成(chéng)了簡約的線性圖标配以加大後(hòu)的字體。第三欄雖使用了實物圖片，但整體增加灰度，頁面(miàn)的統一性加強。其次，下滑後(hòu)會(huì)發(fā)現，小程序比app少了水平滾動列表，直接在一級頁面(miàn)顯示商品信息，使用用戶的一句話短評來代替直播、專題推薦。

這(zhè)樣(yàng)整體看上去界面(miàn)顯得更輕量，符合小程序的設計需求。值得注意的是小程序頁面(miàn)上特地加了一句，“本商城爲騰訊投資企業，全場包郵，官方保證”。這(zhè)真的要給産品經(jīng)理點個贊了，因爲用App的人大多是忠實用戶，但在微信端用戶很可能(néng)是通過(guò)朋友圈、群聊一次使用。而願意使用小程序的用戶，一般來講對(duì)微信信任度較高，這(zhè)句話無疑是給新用戶打了一劑強心針，順便抱了騰訊爸爸的大腿。
同樣(yàng)是依賴社區和UGC内容生産起(qǐ)家的小紅書，小紅書的小程序端可以說是非常符合設計師審美了：極簡。
底部tabbar隻有兩(liǎng)個内容——“首頁—我的”，一級頁面(miàn)沒(méi)有任何引導和功能(néng)分區，隻能(néng)看商品和搜商品。不得不說，在衆多使用橫線劃分欄的小程序中，使用卡片式豎排列的小紅書非常吸引人。
二級頁面(miàn)（商品詳情頁）比較像淘寶，有用戶推薦和商品詳情，但都(dōu)采取了“一拉到底”方式。點開(kāi)關于某個商品的用戶推薦後(hòu)，才會(huì)出現App“發(fā)現”功能(néng)下的内容。從邏輯上講，小紅書是把App的并列功能(néng)換成(chéng)了串聯功能(néng)/觸發(fā)功能(néng)，才做到了頁面(miàn)的極簡。
不過(guò)小紅書的“極簡風”一定程度地暴露了在用戶吸引方面(miàn)的自信哈哈，不知道(dào)實際引流效果，我們且看小紅書日後(hòu)小程序界面(miàn)更新動向(xiàng)。
資訊類
資訊類的小程序一定程度分擔了微信公衆号的部分功能(néng)，在小程序上發(fā)布文章、讨論，要比公衆号來的靈活方便，也成(chéng)爲了日後(hòu)的一種(zhǒng)發(fā)展趨勢。
一個要說的案例就是《好(hǎo)奇心日報》小程序，它和App一樣(yàng)，頂部Navber分爲新聞和讨論兩(liǎng)部分，部分讨論被(bèi)植入到新聞欄目中，沒(méi)有底部導航欄。但是App内的水平滾動列表和Q字懸浮按鈕消失了。

這(zhè)款App中的懸浮按鈕實際上承擔了應用的大量功能(néng)。按鈕的消失意味著(zhe)用戶無法在小程序中登錄、使用社交功能(néng)，也不能(néng)在二級頁面(miàn)中進(jìn)行評論（可以匿名點贊）。正如小程序名字的變更，它更像一本電子“雜志”。好(hǎo)奇心日報在功能(néng)上做了減法。
取消社交功能(néng)是否合适呢？我們再對(duì)比一下钛媒體小程序。

App和小程序選擇了不同的主題色，但都(dōu)是品牌顔色，湖藍看起(qǐ)來更爲活潑，但個人感覺沒(méi)有黑色凸顯品味。（如下圖）公司可能(néng)考慮到了小程序和App目标受衆不同，小程序端用戶更年輕。
底部導航欄除“發(fā)現—活動”一欄外相同，都(dōu)有用戶登錄界面(miàn)，用戶可以實現登錄、收藏、評論等，但更重要的原因，是小程序上同步了App内的付費課程，社交功能(néng)是連帶效果。
回到我們剛才的問題，小程序是否需要社交功能(néng)？要看開(kāi)發(fā)小程序的主要目的和社交功能(néng)的增益效果。比如像知乎頭腦王者這(zhè)樣(yàng)的小程序遊戲，需要通過(guò)好(hǎo)友間同台競争來“刺激”用戶持續答題，因而應有社交功能(néng)。
總結
通過(guò)分析這(zhè)兩(liǎng)類應用，我們可以探讨以下小程序設計經(jīng)驗。
1. 輕設計
總的來說，小程序都(dōu)相較于App化繁爲簡，突出主要功能(néng)。還(hái)可以將(jiāng)并聯功能(néng)改爲串聯/觸發(fā)功能(néng)來實現頁面(miàn)的簡化，如小紅書。
2. 注意統一性
小程序的色彩、圖标、風格應和App内一緻，但是要考慮目标受衆的不同做适量更改。減少banner、實物圖标的使用，要實現頁面(miàn)簡化和色彩統一。
3. 是否應當使用水平滾動列表
這(zhè)一點從技術上講是可以實現的，但是目前大多數小程序都(dōu)不采用這(zhè)樣(yàng)的做法，但也有像豆瓣評分這(zhè)樣(yàng)的小程序在使用。水平滾動列表和垂直滾動列表在小程序中是二選一關系，一個若爲可以無限拉動，另一個應爲有限。
4. 注意加載動效
小程序内容的輕量也有一個重要原因——減少打開(kāi)時間，用戶對(duì)于小程序的等待時間要比App少很多。此時加載動效就能(néng)夠作爲一個留住用戶的加分項。
5. 導航欄樣(yàng)式
小程序的底部導航欄較爲死闆，配置空間爲2-5個，且圖标和文字空間規定嚴格。可以多實用頂部導航欄和懸浮導航按鈕。比如頭腦王者就通過(guò)“知乎狗”作爲懸浮按鈕導流用戶到知乎熱榜小程序。
今天的分享就到這(zhè)裡(lǐ)啦~胖友們，你們在設計小程序的過(guò)程中還(hái)積累了什麼(me)經(jīng)驗？可以在評論區分享出來喲：）

當前标題：小程序的設計，和App設計一樣(yàng)嗎？
标題路徑：

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有App設計等

廣告

聲明：本網站發(fā)布的内容（圖片、視頻和文字）以用戶投稿、用戶轉載内容爲主，如果涉及侵權請盡快告知，我們將(jiāng)會(huì)在第一時間删除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。内容未經(jīng)允許不得轉載，或轉載時需注明來源： 創新互聯

猜你還(hái)喜歡下面(miàn)的内容

h5響應式網站建設

App設計知識

行業網站建設