《写给新手的APP结构指南：首页相关(上)》已经更新一段时间了，希望对大家有所帮助。今天继续给大家分享下半页首页相关功能。先来看看整体结构：△图片来自应用截图，仅供学习交流使用1.导航的形式说到导航，大家应该都不陌生了。导航是各种功能场景切换的工具，是整个产品功能的大框架。.将产品的功能有条不紊地串联起来，使功能出现在合理的位置；如果没有导航，用户在使用产品时就会手足无措，无法快速找到想要使用的某个功能。可见它的意义是非常重要的。大量。网上有很多关于导航的文章，详细介绍了导航形式的区别和优缺点。估计写多了是重复的。我在这里简单说一下。如果想看详细的文章，可以自己上网搜索。（编者按：更多导航设计文章→导航设计）导航的分类有：1.底部标签式导航底部标签式导航是最常见、最常用、也是用户最习惯的样式。导航中最流行的样式。从拇指热图来看，拇指的活跃操作区域只有页面的三分之一，所以tab导航往往位于页面底部，一般用作全局导航；导航的内容是最直观的，不会被隐藏，被选中的标签会高亮显示，明确告诉用户当前所在位置，用户可以很方便的点击标签切换页面。2.顶部标签导航这种导航也很常见。它通常与底部标签导航结合使用。作为二级辅助导航样式，tab数量一般在3个以上，可以左右切换；当然也可以作为一级导航使用，比如在Android设计规范中，将顶部标签导航作为一级导航；又如QQ音乐，作为产品的核心功能，音乐播放页面的快捷入口一直放在页面底部，所以主导航使用了顶部添加标签式导航。3.舵导航舵导航也叫集点导航。其实我觉得可以归类为底部标签导航，因为两者一起使用时，往往放在中间作为核心功能入口，形成左右对称，所以叫方向舵导航；设计会与其他标签明显区分开来，突出自己，容易引起用户的注意，也能促使用户使用该功能，但因为过于明显，会弱化其他功能的入口；例如，对于具有社交属性的产品，期望用户发布更多的UGC内容，经常使用这种导航方式；此类导航往往放置用户使用最多或产品最重要的功能，扩展功能的数量不宜过多。4.抽屉式导航抽屉式导航也称为汉堡包或侧边栏导航。这也是一种非常常见的导航样式。多用于阅读类产品，因为它可以给用户身临其境的阅读体验，抽屉式导航可以隐藏很多低频功能。节省屏幕空间，自然使页面显得简洁美观；也有一些产品的功能比较复杂，抽屉导航经常被用作辅助导航。比如QQ既有底部标签导航也有抽屉导航；有一类目的性很强的产品，比如共享单车或者打车软件，都是利用这种导航，把用户最需要的核心功能放在首页，其他的都隐藏起来，以免被人看到。干扰用户的注意力。当然，这种导航方式也有很多缺点。例如，用户可能不记得展开隐藏功能，用户需要更多操作才能进入其他功能页面。5.宫廷式导航使用这种导航风格最有代表性的是美图秀秀。这种导航在视觉上简洁直观，方便用户快速查找。同级功能之间有很大的分离感或者功能之间没有很大的关系可以采取这种导航形式。虽然这种导航形式的功能可以很多，但是还是推荐使用这种导航方式作为辅助导航。一方面，用户对这种导航形式比较陌生，接受度不一定高。另一方面，由于功能分离，用户切换其他功能可能会比较麻烦。比如微信钱包、电商、团购产品首页banner下的类目入口也属于宫廷式导航，都是作为辅助导航。6.列表导航是一种很常见的导航形式。可能太普通了，我们没有注意到它也是导航。它在视觉上整洁美观。它几乎用于所有产品。列表导航类似于宫廷导航，但在不同的表现形式上，列表式导航有多种形式，如纯文本/图标+文字/文字+图片等；数量也可以很多，没有限制，因为用户可以上下滑动查看；它经常被用作二级导航，与其他导航结合使用，因为它不方便用户切换功能，而且太低的列表可能不会有很高的点击率。7、悬浮导航这种导航形式也是比较常见的。现在手机屏幕比较大，越来越多的人使用这种导航方式。常作为二级辅助导航使用，多见于阅读类或工具类产品。.点击导航通常伴随着动态效果和多种功能。这些功能都聚合在悬浮导航中，节省了屏幕空间，但会干扰用户的视线。总结导航形式对于产品来说并不是一个单一的存在，尤其是在产品功能结构越来越复杂和庞大的今天，导航的组合使用是常态和大势所趋，所以结合起来是很有必要的设计产品。详细分析自己的需求，使用适合自己的导航形式。毕竟适合自己的才是最好的。2、顶部banner广告位banner广告几乎是所有产品都不可避免的存在。也是产品经营或盈利的方式之一。横幅数量一般为3-8个，左右滑动查看，点击进入相关主题或详情页。电商产品的banner是根据用户喜好生成的，系统推荐用户可能感兴趣的内容，点击率可想而知。常见的横幅设计比例为2:1和16:9。当然，这不是固定的。高度可根据产品需要而定。比如电商产品的首页空间比较宝贵，所以banner的高度会比较紧凑，以节省页面空间。在设计banner的时候一定要使用屏幕的最大宽度来设计，即：Android(@4x)width1440px（不同的公司可能会在后台上传不同的尺寸，仅供参考），虽然这样做会占用更多resources，但在适合下面的各个屏幕时避免了可能的模糊。自iPhoneX问世以来，为了避免刘海对banner的干扰，越来越多的产品取消了之前状态栏和导航栏的全透明效果，将banner放在导航栏下方；这种风格的风格，这种风格需要注意的点是：1.将顶部危险区域状态栏和导航栏底部保留为危险区域，不要显示重要内容，如作为危险区域中的文本。2.顶部黑色透明遮罩由于banner颜色不可控，为了突出状态栏，开发会在顶部设置一个自上而下的黑色遮罩，取值为70%-0%。3、上滑时显示状态栏和导航栏的背景色。开发会设置一个值，比如状态栏和导航栏的总高度为128px（@2x）。当页面滑动到128px时，状态栏和导航栏导航栏会由全透明变为不透明显示背景色/渐变色。3、分类模块入口分类模块入口一般位于首页banner下方，是电商、团购等产品中非常常见的一种形式。许多用户可能不知道要搜索什么关键字，或者正在寻找具有强烈目的的特定产品。这个快速分类入口会很方便。分类模块一般有1-2页，页数为4-20；因为***页的点击率普遍较高，请把最重要的分类放到***页，方便用户访问。第二页放了相对较小的类别；也可以把第一页的第一个分类设置为“更多分类”，这样可以减少一页，但是里面分类的点击率可能不高。icon的设计一般是人脸icon或者人脸icon+圆形/方形底色（渐变色），因为icon在视觉上会显得更饱满；人脸图标的设计不仅是逆向效果，加入一些设计细节对比会显得更有层次感；这里不推荐线性图标，因为视觉冲击太弱，不够突出。4、“资讯/新闻/快讯/今日头条”入口为运营需要或一些品牌相关的宣传，或一些产品信息。这类入口通常位于首页的分类模块下，位于页面的中央。虽然位置比较显眼，但并不占用太多空间，所以用户可能不会太在意。Fonts：这里的字体一般不会使用系统默认的字体，通常设计成与品牌字体相关；比如“京东快递”的字体、京东的Logo字体都是与品牌相关联的。内容：一般采用轮播的方式，每3秒更换一次。有些是一根线，有些是两根线。点击进入相关专题页面。5.底部标签栏标签栏在上面的导航方式中已经提到了，这里就详细说一下。设计方面：标签栏的高度为98px（@2x），标签栏中的字体作为提示，字号为20px；标签的数量一般为3-5个，图标的设计应保持简洁，并能准确传达解读。可以融入品牌基因，突出自己的调性，突出其他产品的差异化；常用的有线性和曲面两种，一般结合使用，表示选中状态；iOS11后，背景图标开始流行，并进行了品牌色区分；另外，图标设计要保持一致，比如线性图标的粗细、圆角的大小、开口的大小等，这样用户看起来会更顺眼。反馈：可分为视觉和听觉两个方面。视觉上，当前选中状态要与其他图标有明显区别，如线性与平面的区别、颜色等，以表明当前页面位置；另外，图标在点击时带有动态效果，可以增加兴趣，也是现在常见的反馈方式；听觉反馈是指点击图标时，会伴随点击音效，如facebook。隐藏功能：再次点击该图标可固定首页功能。用户很熟悉通过点击状态栏或点击置顶按钮将页面置顶的功能。很多用户可能找不到或者很少使用：再次点击当前页面标签栏中的图标，将页面置顶。许多产品可能具有此功能，但对用户没有很好的指导。相比之下，淘宝和MONO在向上滑动时会在标签栏中引导首页，体验更好；应该是为了避免用户误操作，导致用户正在浏览的内容上移，需要很长时间才能再次找到，但这种交互可能很多用户都不知道。为了获得沉浸式体验，tabbar可以在用户浏览时隐藏，比如上滑时缩回，下滑时显示。6、加载方式加载方式并不局限于首页，而是贯穿于整个产品。加载是指用户正在执行某项操作，服务器处理后将数据反馈给用户。用户不知道在这个过程中花费了多少时间，所以需要一种加载方法来提供反馈，减少用户输入。焦虑。网上关于loading的文章很多，这里简单说一下。如果你想了解更多，你可以自己搜索。1.下拉刷新加载这种加载方式在上一篇文章的第2点“下拉刷新”中已经提到过，这里不再多说。2.进度条加载多用在web端。这种加载方式不知道具体的加载时间。它可以在开始时加载得更快，在最后加载得更慢。这样用户会更愿意等待，但是在loading的时候不能加载。卡住;使用这种方式的移动端并不多，大部分都是H5页面，因为这种加载方式会过于吸引用户的眼球，而且加载速度快的时候可能不会显示进度条。3、全屏加载是指用户进入新页面时的加载方式。在一次加载完所有内容之前，他们看不到任何内容，自然无法操作，所以最好使用有情感的加载动画设计，因为有趣的动态反馈可以避免用户焦虑；但是在网络条件不好的情况下，加载时间过长会让人不耐烦，所以这种加载方式的跳出率比较高。4.分段加载这种加载方式也可以说是上拉刷新加载。使用场景一般是用户滑动到feed流底部后继续向上滑动或者点击加载数据；制作交互式文档时，应注明为一次性加载多少条数据，视产品本身需求而定。比如只加载内容，一次可以加载50条数据，而带图片的内容数据一次可以加载25条。我体验过微信朋友圈。动态数据一次加载20条（自己统计的，不一定准确）。5、分步加载顾名思义就是分步加载，优先占用资源少的内容。有两种情况：第一种是先加载文字再加载图片。图片的突然出现会给用户带来困扰。这种体验不好，逐渐被抛弃；第二种是先加载页面的框架，再加载页面的内容，比如先加载图片占位符，占位符可以是灰色或者产品的主色（+logo或者图标）/颜色（颜色设置在背景中，随机出现），然后加载页面文本，最后在placeholder位置加载图片；这种加载方式的好处是可以让用户快速了解页面的整体结构，体验更好。6、懒加载是指只有在用户使用的时候才会加载，避免流量和资源的浪费。比如当用户滑动feed流的时候，当用户向上滑动看到的时候会加载图片的内容，然后底部看不见的位置可能只会加载Text和frame。7.loading常用于阅读产品。指的是预测用户下一步的操作，提前加载下一页的内容，减少用户进入下级页面时加载所需的时间；可以和下面的Smartloading一起使用。比如wifi情况下可以使用preloading，4G下不做preloading，节省流量，体验更好。8、智能加载，即在不同的网络环境下，加载的内容是不同的。例如在4G网络中，为了给用户节省流量，页面加载了文字内容和标清图片，不加载视频或者只加载标清视频。但考虑到部分用户流量较大，现在会为用户提供选择的权利，比如弹窗提醒用户是否使用流量加载或切换到高清模式；而在wifi条件下，它可以自动加载高清图片或视频。总结加载方式多种多样，同一个页面可能有多种加载方式。目的是节省时间和提高用户体验。忘掉当下的等待，加深品牌记忆也是一大设计趋势；加载动效的位置可以合理利用页面的位置，减少对用户的干扰；在加载失败的情况下，给出Feedback结果，并可以让用户重新加载。综上所述，这就是主页的全部。首页看起来很普通，其实涉及的功能很多，有些还比较隐蔽。不同的产品有不同的首页功能布局。我在这里谈论产品。一些常用的功能没有深入讨论，希望有机会在以后的文章中详细说说。
