小(xiǎo)程序的设计，和App设计一样吗？

2022-08-31    分(fēn)类： App设计

微信的最近一次更新(xīn)，小(xiǎo)程序入口变浅了很(hěn)多(duō)。最近使用(yòng)的小(xiǎo)程序，被放置在微信打开后初始页面的下拉菜单中，而且给的下拉栏空间非常充足。為(wèi)了让培养用(yòng)户小(xiǎo)程序习惯和让更多(duō)人了解小(xiǎo)程序，微信开发团队还推出了“跳一跳”小(xiǎo)程序游戏。

小(xiǎo)编的朋友小(xiǎo)王最近就接了一筆(bǐ)小(xiǎo)程序私单，因為(wèi)之前没接触过小(xiǎo)程序设计，他(tā)是按照做App思路做的，所以全程他(tā)基本就这样…
随着小(xiǎo)程序的普及，设计师们也接到了不少小(xiǎo)程序设计的私单，為(wèi)了避免和小(xiǎo)王一样的惨痛经历。小(xiǎo)编今天就通过分(fēn)析几款应用(yòng)，跟大家聊一聊App和微信小(xiǎo)程序设计的异同。
商(shāng)城类
蘑菇街(jiē)App和小(xiǎo)程序的界面对比非常典型。

首先，看到看到小(xiǎo)程序的一印象就是简洁、扁平。App头栏的banner在小(xiǎo)程序中消失了，换成了主题色背景加“领红包”字样。（红包领完后头栏位置上移动缩小(xiǎo)，背景不变）实物(wù)icon到小(xiǎo)程序中都变成了简约的線(xiàn)性图标配以加大后的字體(tǐ)。第三栏虽使用(yòng)了实物(wù)图片，但整體(tǐ)增加灰度，页面的统一性加强。其次，下滑后会发现，小(xiǎo)程序比app少了水平滚动列表，直接在一级页面显示商(shāng)品信息，使用(yòng)用(yòng)户的一句话短评来代替直播、专题推荐。

这样整體(tǐ)看上去界面显得更轻量，符合小(xiǎo)程序的设计需求。值得注意的是小(xiǎo)程序页面上特地加了一句，“本商(shāng)城為(wèi)腾讯投资企业，全场包邮，官方保证”。这真的要给产品经理(lǐ)点个赞了，因為(wèi)用(yòng)App的人大多(duō)是忠实用(yòng)户，但在微信端用(yòng)户很(hěn)可(kě)能(néng)是通过朋友圈、群聊一次使用(yòng)。而愿意使用(yòng)小(xiǎo)程序的用(yòng)户，一般来讲对微信信任度较高，这句话无疑是给新(xīn)用(yòng)户打了一剂强心针，顺便抱了腾讯爸爸的大腿。
同样是依赖社區(qū)和UGC内容生产起家的小(xiǎo)红书，小(xiǎo)红书的小(xiǎo)程序端可(kě)以说是非常符合设计师审美了：极简。
底部tabbar只有(yǒu)两个内容——“首页—我的”，一级页面没有(yǒu)任何引导和功能(néng)分(fēn)區(qū)，只能(néng)看商(shāng)品和搜商(shāng)品。不得不说，在众多(duō)使用(yòng)横線(xiàn)划分(fēn)栏的小(xiǎo)程序中，使用(yòng)卡片式竖排列的小(xiǎo)红书非常吸引人。
二级页面（商(shāng)品详情页）比较像淘宝，有(yǒu)用(yòng)户推荐和商(shāng)品详情，但都采取了“一拉到底”方式。点开关于某个商(shāng)品的用(yòng)户推荐后，才会出现App“发现”功能(néng)下的内容。从逻辑上讲，小(xiǎo)红书是把App的并列功能(néng)换成了串联功能(néng)/触发功能(néng)，才做到了页面的极简。
不过小(xiǎo)红书的“极简风”一定程度地暴露了在用(yòng)户吸引方面的自信哈哈，不知道实际引流效果，我们且看小(xiǎo)红书日后小(xiǎo)程序界面更新(xīn)动向。
资讯类
资讯类的小(xiǎo)程序一定程度分(fēn)担了微信公众号的部分(fēn)功能(néng)，在小(xiǎo)程序上发布文(wén)章、讨论，要比公众号来的灵活方便，也成為(wèi)了日后的一种发展趋势。
一个要说的案例就是《好奇心日报》小(xiǎo)程序，它和App一样，顶部Navber分(fēn)為(wèi)新(xīn)闻和讨论两部分(fēn)，部分(fēn)讨论被植入到新(xīn)闻栏目中，没有(yǒu)底部导航栏。但是App内的水平滚动列表和Q字悬浮按钮消失了。

这款App中的悬浮按钮实际上承担了应用(yòng)的大量功能(néng)。按钮的消失意味着用(yòng)户无法在小(xiǎo)程序中登录、使用(yòng)社交功能(néng)，也不能(néng)在二级页面中进行评论（可(kě)以匿名点赞）。正如小(xiǎo)程序名字的变更，它更像一本電(diàn)子“杂志(zhì)”。好奇心日报在功能(néng)上做了减法。
取消社交功能(néng)是否合适呢(ne)？我们再对比一下钛媒體(tǐ)小(xiǎo)程序。

App和小(xiǎo)程序选择了不同的主题色，但都是品牌颜色，湖(hú)蓝看起来更為(wèi)活泼，但个人感觉没有(yǒu)黑色凸显品味。（如下图）公司可(kě)能(néng)考虑到了小(xiǎo)程序和App目标受众不同，小(xiǎo)程序端用(yòng)户更年轻。
底部导航栏除“发现—活动”一栏外相同，都有(yǒu)用(yòng)户登录界面，用(yòng)户可(kě)以实现登录、收藏、评论等，但更重要的原因，是小(xiǎo)程序上同步了App内的付费课程，社交功能(néng)是连带效果。
回到我们刚才的问题，小(xiǎo)程序是否需要社交功能(néng)？要看开发小(xiǎo)程序的主要目的和社交功能(néng)的增益效果。比如像知乎头脑王者这样的小(xiǎo)程序游戏，需要通过好友间同台竞争来“刺激”用(yòng)户持续答(dá)题，因而应有(yǒu)社交功能(néng)。
总结
通过分(fēn)析这两类应用(yòng)，我们可(kě)以探讨以下小(xiǎo)程序设计经验。
1. 轻设计
总的来说，小(xiǎo)程序都相较于App化繁為(wèi)简，突出主要功能(néng)。还可(kě)以将并联功能(néng)改為(wèi)串联/触发功能(néng)来实现页面的简化，如小(xiǎo)红书。
2. 注意统一性
小(xiǎo)程序的色彩、图标、风格应和App内一致，但是要考虑目标受众的不同做适量更改。减少banner、实物(wù)图标的使用(yòng)，要实现页面简化和色彩统一。
3. 是否应当使用(yòng)水平滚动列表
这一点从技术上讲是可(kě)以实现的，但是目前大多(duō)数小(xiǎo)程序都不采用(yòng)这样的做法，但也有(yǒu)像豆瓣评分(fēn)这样的小(xiǎo)程序在使用(yòng)。水平滚动列表和垂直滚动列表在小(xiǎo)程序中是二选一关系，一个若為(wèi)可(kě)以无限拉动，另一个应為(wèi)有(yǒu)限。
4. 注意加载动效
小(xiǎo)程序内容的轻量也有(yǒu)一个重要原因——减少打开时间，用(yòng)户对于小(xiǎo)程序的等待时间要比App少很(hěn)多(duō)。此时加载动效就能(néng)够作為(wèi)一个留住用(yòng)户的加分(fēn)项。
5. 导航栏样式
小(xiǎo)程序的底部导航栏较為(wèi)死板，配置空间為(wèi)2-5个，且图标和文(wén)字空间规定严格。可(kě)以多(duō)实用(yòng)顶部导航栏和悬浮导航按钮。比如头脑王者就通过“知乎狗”作為(wèi)悬浮按钮导流用(yòng)户到知乎热榜小(xiǎo)程序。
今天的分(fēn)享就到这里啦~胖友们，你们在设计小(xiǎo)程序的过程中还积累了什么经验？可(kě)以在评论區(qū)分(fēn)享出来哟：）

当前标题：小(xiǎo)程序的设计，和App设计一样吗？
标题路径：

网站建设、网络推广公司-创新(xīn)互联，是专注品牌与效果的网站制作，网络营销seo公司；服務(wù)项目有(yǒu)App设计等

广告

声明：本网站发布的内容（图片、视频和文(wén)字）以用(yòng)户投稿、用(yòng)户转载内容為(wèi)主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文(wén)章观点不代表本网站立场，如需处理(lǐ)请联系客服。電(diàn)话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新(xīn)互联

猜你还喜欢下面的内容

h5响应式网站建设