微信的最近一次更新,小程序入口變淺了很多。最近使用的小程序,被放置在微信打開后初始頁面的下拉菜單中,而且給的下拉欄空間非常充足。為了讓培養用戶小程序習慣和讓更多人了解小程序,微信開發團隊還推出了“跳一跳”小程序游戲。
小編的朋友小王最近就接了一筆小程序私單,因為之前沒接觸過
小程序設計,他是按照做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://vcdvsql.cn/news8/194408.html
網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有App設計等
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯