2023年不一样的移动端那点事：APP、小程序（微信）

不一样的移动端那点事：APP、小程序（微信）许多产品经理与设计师在设计移动端界面的时候，往往对界面上需要遵循的一些通用性设计原则不是非常清晰；而这些通用性或者全局性的规章对界面设计起到了很重要的作用，知道这些不肯定会提升用户体验，但是不知道这些很可能会使界面设计消失问题。

本文笔者选取了8大热门APP，整理了一些移动端（APP、小程序）的设计规章，如APP一级页主结构设计、APP二级页主结构设计等，和大家一起来巩固下移动端设计需要了解的学问。

笔者选取的8大热门APP包括：

花瓣（图片类）肯德基（快餐类）京东（电商类）墨迹（天气类）微博（社交类）下厨房（烹饪类）知乎（学问类）雪球（资讯类）

从上图我们可以发觉，APP一级页主要包括顶部导航区、中间内容区和底部标签栏。

顶部导航区通常由搜寻条、APP核心操作功能组成。例如对于花瓣APP来说，它是一个图片素材工具，它可以关心用户发觉自身关怀的事物；因此它在顶部导航区放了一个大大的搜寻条，来吸引用户去搜寻自己想要的图片。

对于下厨房APP来说，下厨房是一个厨师和美食爱好者记录、共享美食的平台；因此该平台的内容来自于用户主动上传，同时该平台鼓舞用户之间相互共享和沟通，所以下厨房顶部导航主要功能为“上传”、“搜寻”和“消息”。

由此可见，APP顶部导航区的功能设计与APP的属性及核心目标有极大的关系。

中间内容区又分为上、中、下三部分，在APP设计中，我们需要考虑重点内容前置展现和首屏利用率；例如对于京东APP来说，它是一个专业综合网上购物商城，其销售超数万品牌，它的核心目的就是把越多的商品展现给用户，并且尽可能的提升用户的购买率。

因此京东APP的主要内容结构由上到下分为分类导航区（合理的分类，提升用户查找商品的效率）、营销区（千人千面的呈现，触达用户心智）、金刚区（页面核心功能区域，为重要子板块分发内容）、各类卖点区等；而分类导航区、营销区、金刚区占了首屏一大半的位置，各类卖点区中的京东秒杀、京东直播、每日特价等也展现在了首屏。

该类的设计模式，提升了用户的产品触达率和转化率。

2022年，Apple提出了一种移动端新的导航模式，即底部标签栏。底部标签栏满意了用户我在哪里（一般通过标签高亮的方式反馈）、我可以去哪里（其余标签）的需求。

可以说，底部标签栏不仅是设计上的飞跃，更是用户体验上的进步，通常移动端标签栏的导航数量为2-5个；在笔者统计的这8个APP中，基本上在4-5个，这是现在业内最为常用的数量。

从上图我们可以发觉，APP二级页主要包括顶部导航区和中间内容区，底部页签栏依据页面的实际状况选用。

APP二级页的顶部导航区功能有一个主要的特征是它通常带有“返回”按钮，可以关心用户很顺当地返回到上一页；同时在二级页导航区会展现当前页的标题，从而让用户知道他现在处于哪里。

由于大家在使用APP时都是右手操作原则，因此在导航区的右侧区域通常放置与当前页相关的操作性功能。

不过，导航详细功能依据页面状况，也会有些许差异。例如对于花瓣APP来说，其二级页顶部导航区包括返回上一页、点赞当前图片、共享当前图片和将图片采集的功能。

对于肯德基APP来说，其二级页顶部导航区包括返回上一页和展现当前页内容的标题。

APP二级页的中间内容区依据产品的目标不同而不同，通常来说为相关内容详情页、子版块具体展现页等；例如下厨房APP为一道菜的详情页，知乎APP为一篇文章的详情页；京东APP为发觉好货等子板块的内容聚合页，当然假如点击京东APP首页的某个详细商品，也会直接进入商品详情页。

在APP二级页中，底部标签栏为非必需。

在花瓣APP中，已经将一张图片的共享、采集、点赞等功能加在了顶部导航区的右侧，因此底部标签栏直接采纳了和一级页全都的标签栏；肯德基APP和京东APP直接取消了底部标签栏；微博APP将针对话题的转发、评论、点赞功能放在了底部标签栏上。

从上图我们可以发觉，小程序一级页和APP一级页全都，主要包括顶部导航区、中间内容区和底部标签栏。

小程序一级页中的中间内容区和底部标签栏的设计思路与APP大同小异，但其底部标签栏有时候未必有，例如肯德基APP；由于小程序当时在微信推出来的时候，就是定义即用即走的，因此小程序通常只承载简洁的功能，关心用户完成某一件大事，所以小程序可以没有底部标签栏；而顶部导航区的设计收到相关平台（微信、支付宝、百度等）设计规范的约束，需要遵循一些设计规章。

例如在微信中，微信都会在其右上角放置官方小程序菜单（包括关闭和更多功能），设计者不行对其内容自定义，但可选择深浅两种基本配色以适应页面设计风格，样式如图。

从上图我们可以发觉，小程序二级页和APP二级页全都，主要包括顶部导航区和中间内容区，底部页签栏依据页面的实际状况选用。

上面说到微信会在小程序一级页右上角放置官方小程序菜单，那么在二级页里面也不例外；但二级页通常还会多一个返回上一级的按钮，样式如图。

06APP和小程序组件库

APP和小程序都是移动端的应用，因此它们涉及到的通用组件基本是全都的，笔者为大家总结了一下，有如下几种：

按钮开关选择器输入框单选框多选框滑块倒计时表单导航栏标签栏抽屉式导航宫格式导航字母索引导航公告栏上传……在本文就不一一列举了，笔者正在间续整理这些通用组件，因此将在之后的文章中为大