接到了一個小程序的設計私單，和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個，且圖標和文字空間規定嚴格。可以多使用頂部導航欄和懸浮導航按鈕。比如頭腦王者就通過「知乎狗」作為懸浮按鈕導流用戶到知乎熱榜小程序。

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

歡迎關注微信公眾號：「優秀網頁設計」

?「超全面微信小程序開發設計合集」

• 《收藏起來！可能是最全面的微信小程序開發設計指南（附實戰案例）》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com