小程序的設計，和App設計一樣嗎？

2022-08-31 分類： App設計

微信的最近一次更新，小程序入口變淺了很多。最近使用的小程序，被放置在微信打開后初始頁面的下拉菜單中，而且給的下拉欄空間非常充足。為了讓培養用戶小程序習慣和讓更多人了解小程序，微信開發團隊還推出了“跳一跳”小程序游戲。

小編的朋友小王最近就接了一筆小程序私單，因為之前沒接觸過小程序設計，他是按照做App思路做的，所以全程他基本就這樣…

隨著小程序的普及，設計師們也接到了不少小程序設計的私單，為了避免和小王一樣的慘痛經歷。小編今天就通過分析幾款應用，跟大家聊一聊App和微信小程序設計的異同。

商城類

蘑菇街App和小程序的界面對比非常典型。

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

這樣整體看上去界面顯得更輕量，符合小程序的設計需求。值得注意的是小程序頁面上特地加了一句，“本商城為騰訊投資企業，全場包郵，官方保證”。這真的要給產品經理點個贊了，因為用App的人大多是忠實用戶，但在微信端用戶很可能是通過朋友圈、群聊一次使用。而愿意使用小程序的用戶，一般來講對微信信任度較高，這句話無疑是給新用戶打了一劑強心針，順便抱了騰訊爸爸的大腿。

同樣是依賴社區和UGC內容生產起家的小紅書，小紅書的小程序端可以說是非常符合設計師審美了：極簡。

底部tabbar只有兩個內容——“首頁—我的”，一級頁面沒有任何引導和功能分區，只能看商品和搜商品。不得不說，在眾多使用橫線劃分欄的小程序中，使用卡片式豎排列的小紅書非常吸引人。

二級頁面（商品詳情頁）比較像淘寶，有用戶推薦和商品詳情，但都采取了“一拉到底”方式。點開關于某個商品的用戶推薦后，才會出現App“發現”功能下的內容。從邏輯上講，小紅書是把App的并列功能換成了串聯功能/觸發功能，才做到了頁面的極簡。

不過小紅書的“極簡風”一定程度地暴露了在用戶吸引方面的自信哈哈，不知道實際引流效果，我們且看小紅書日后小程序界面更新動向。

資訊類

資訊類的小程序一定程度分擔了微信公眾號的部分功能，在小程序上發布文章、討論，要比公眾號來的靈活方便，也成為了日后的一種發展趨勢。

一個要說的案例就是《好奇心日報》小程序，它和App一樣，頂部Navber分為新聞和討論兩部分，部分討論被植入到新聞欄目中，沒有底部導航欄。但是App內的水平滾動列表和Q字懸浮按鈕消失了。

這款App中的懸浮按鈕實際上承擔了應用的大量功能。按鈕的消失意味著用戶無法在小程序中登錄、使用社交功能，也不能在二級頁面中進行評論（可以匿名點贊）。正如小程序名字的變更，它更像一本電子“雜志”。好奇心日報在功能上做了減法。

取消社交功能是否合適呢？我們再對比一下鈦媒體小程序。

App和小程序選擇了不同的主題色，但都是品牌顏色，湖藍看起來更為活潑，但個人感覺沒有黑色凸顯品味。（如下圖）公司可能考慮到了小程序和App目標受眾不同，小程序端用戶更年輕。

底部導航欄除“發現—活動”一欄外相同，都有用戶登錄界面，用戶可以實現登錄、收藏、評論等，但更重要的原因，是小程序上同步了App內的付費課程，社交功能是連帶效果。

回到我們剛才的問題，小程序是否需要社交功能？要看開發小程序的主要目的和社交功能的增益效果。比如像知乎頭腦王者這樣的小程序游戲，需要通過好友間同臺競爭來“刺激”用戶持續答題，因而應有社交功能。

總結

通過分析這兩類應用，我們可以探討以下小程序設計經驗。

1. 輕設計

總的來說，小程序都相較于App化繁為簡，突出主要功能。還可以將并聯功能改為串聯/觸發功能來實現頁面的簡化，如小紅書。

2. 注意統一性

小程序的色彩、圖標、風格應和App內一致，但是要考慮目標受眾的不同做適量更改。減少banner、實物圖標的使用，要實現頁面簡化和色彩統一。

3. 是否應當使用水平滾動列表

這一點從技術上講是可以實現的，但是目前大多數小程序都不采用這樣的做法，但也有像豆瓣評分這樣的小程序在使用。水平滾動列表和垂直滾動列表在小程序中是二選一關系，一個若為可以無限拉動，另一個應為有限。

4. 注意加載動效

小程序內容的輕量也有一個重要原因——減少打開時間，用戶對于小程序的等待時間要比App少很多。此時加載動效就能夠作為一個留住用戶的加分項。

5. 導航欄樣式

小程序的底部導航欄較為死板，配置空間為2-5個，且圖標和文字空間規定嚴格。可以多實用頂部導航欄和懸浮導航按鈕。比如頭腦王者就通過“知乎狗”作為懸浮按鈕導流用戶到知乎熱榜小程序。

今天的分享就到這里啦~胖友們，你們在設計小程序的過程中還積累了什么經驗？可以在評論區分享出來喲：）

當前標題：小程序的設計，和App設計一樣嗎？
標題路徑：http://www.kartarina.com/news8/194408.html

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

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

猜你還喜歡下面的內容

欧美日韩激情_美女国产一区_国产精品久久久久影院日本_69xxx在线

小程序的設計，和App設計一樣嗎？