下拉刷新相信大家已经是司空见惯了，几乎所有的产品都会有这一功能，这一交互的首创是源于twitter，后来慢慢流行开来，下拉刷新其实也不只是在首页存在，在产品很多页面中普遍存在。
下拉刷新的动效设计现在的趋势真是越来越多样化，早已不再局限于早期系统的刷新样式，各大产品都设计了拥有自己特色的刷新动效，将自己的品牌基因融合进去，并加以趣味活泼的文案修饰，给人一种惊喜感，可以加深了用户对产品的印象，这种做法可谓是一举多得。
3.持续下拉进入产品二楼
还有一个值得提一下的就是盒马的二楼是“盒尔蒙”业务，是专门卖成人用品的，刚开始知道这个模块的时候有点吃惊，毕竟盒马是一家主营生鲜的电商，竟然玩起了跨界突然开始卖起了成人用品，尺度是不是有点大啊；可能市场上对成人商品的需求比较大，毕竟购买成人用品大部分还是线上购买比较多，毕竟线下购买可能很多人难免会有点不好意思，隐私得不到保证，而且价格比较贵，这样一想盒马想和阿里、网易分一杯羹也可以理解。盒尔蒙的三大竞争力是：品质保障、30分钟达、隐私包装，相信光“30分钟达”这一条就足够有竞争力了，貌似有点扯远了…盒尔蒙为什么要在二楼售卖，可能毕竟盒马的主营业务还是生鲜，总感觉生鲜和成人用品要是杂揉在一起销售难免会有点奇怪，放到二楼可以保证2个模块的独立性，可以互不打扰。
可能还有一些产品首页也有二楼这一功能，我就不一一举例了，大家有兴趣的就自己研究研究吧。
4.城市/地址定位
b.美团外卖首页顶部定位是精准到具体地址，因为平台需要根据用户定位范围X公里内进行美食推荐，点击地址进入收货地址页面，构成：城市切换(比如给其它城市亲人朋友点餐情况)+搜索收货地址(针对当前已选城市搜索具体地址)+当前定位+重新定位+我的收货地址(地址标签)+附近地址(方便快速选择新地址)+新增地址(这个功能很有必要，可以快速链接到新增地址页面)。这种页面构成常见于需要及时配送的平台，因为需要考虑商品的时效性，需要当日达/1小时达等，还比如：饿了么、每日优鲜、盒马…
不同产品对于定位功能的诉求是不一样的：电商类首页顶部不保留定位功能入口；团购类产品首页定位到区/县/市等;外卖/及时配送类产品首页需要定位到具体地址；可以根据产品需求具体应用。
5.搜索模块
搜索入口形式一般有2种，一种就是搜索框，还有一种就是点击搜索icon进入搜索页面。先来说说搜索框，这种形式最为普遍，因为搜索框是直观的形式，大多数产品都是采用这种方式，因为用户一进入首页就可以看见，目的性比较强，电商类产品这种形式比较普遍，组成形式：搜索框+搜索icon+热搜关键词(+扫一扫/相机扫描识别)，热搜关键词是根据运营需要或是数据推荐不定时更换的，如果热搜词刚好是用户感兴趣的，可以点击搜索框进入搜索页，直接点击搜索，减去了还要输入关键词的繁琐步骤；当然产品使用第二种搜索icon的方式也蛮多的，常见于垂直类电商或是阅读类产品等，这类产品将搜索功能进行了弱化，可能搜索内容并不是用户的主要诉求，用户只想进来随便看看和逛逛。
a.扫一扫/相机扫描识别：通过扫描条码或商品进行识别，得出搜索结果和类似商品；
b.关键词联想：这个功能十分重要，可以减少用户输入，每输入一个字段就要加载一次，将联想的结果展示出来，方便用户快速找到目标搜索对象；
c.清空关键词button：一键点击快速清空错误关键词或更换新的关键词；
d.返回/取消/搜索button：如果搜索框左侧没有返回button，右侧就会有取消button；如果左侧有返回button，右侧取消button可以变为搜索button；
e.分类tab：针对当前分类下进行关键词搜索，更加快速、准确；
f.历史搜索+清空搜索记录：保留历史搜索记录可以方便用户一键点击，再次进行搜索，可以避免重复操作，当然删除搜索记录也很必要，可以减少页面无用信息的占比，也可以有效保护用户的搜索隐私；
h.语音输入：用户通过语音直接说出关键词，免去输入步骤，可以方便老年人/残疾人或是特殊场景下也能使用搜索功能；
i.输入键盘：进入搜索页键盘默认弹出；搜索button最好设置在键盘上，会更加方便；关键词输入结束后用户上下滑动查看搜索结果时键盘要自动收起；
还有很多产品细节差异上的功能和搜索结果页面的内容就不展开说了，有机会再详细说一说。
6.扫一扫
d.京东：顶部扫码识别/拍照识别/ARtab+识别历史+交易记录+输入条形码+操作文字提示+手电筒+底部付款码/支付优惠/相册照片二维码识别/会员码；没有看出页面底部放置付款码/支付优惠/会员码功能的用意，点击是跳转到下级页面，是否有点多余？相册照片二维码识别功能不应该穿插其中，个人感觉体验不是很好；
1.导航的形式
导航的类别有：
底部标签式导航：最常见、最常用、最符合用户习惯的样式，导航中的首选样式。根据拇指热区图显示，拇指的最佳操作区域是只有页面的三分之一，所以标签导航常位于页面底部，一般作为全局导航使用；导航的内容最直观，不会被隐藏，并且被选中的标签会高亮显示，明确告诉用户当前所在位置，用户可以轻松点击标签进行页面切换；
舵式导航：也叫点聚式导航，其实我感觉可以归到底部标签式导航一类，因为在两者搭配使用时，它常作为核心功能入口放在中间位置，形成了对称，故而叫做舵式导航；设计上会和其他标签有明显区分并重点突出了自己，很容易吸引用户的注意力，也有鼓励用户使用该功能的意味，但是因为过于明显所以会弱化其他功能入口；比如带有社交属性的产品，会希望用户多发布一些UGC内容，常采用这种导航形式；这类导航里常放置用户最多使用的或是产品最重要的功能，拓展的功能数量不宜过多；
列表式导航：这种导航形式很常见，可能常见到我们平时都没察觉到这类竟然也是导航，在视觉上整齐美观，几乎所有产品都会用到，列表式导航和宫格式导航类似，只是在表现形式上的不同，列表式导航的表现形式有很多，比如纯文字/icon+文字/文字+图片等；数量上也可以很多，并没有局限性，因为用户是上下滑动查看的方式；常作为二级导航和其他导航搭配进行使用，因为不方便用户切换功能，并且太靠下的列表可能点击率不高；
悬浮式导航：这种导航形式也比较常见，现在的手机屏幕比较大，用这种导航方式也越来越多了，常作为二级辅助导航使用，在阅读类或工具类产品中比较常见，；点击导航常伴有动效并出现若干功能，这些功能聚合在悬浮导航内，节省了屏幕空间，但是会对用户的视觉形成干扰；
小结：导航形式对产品来说不是单一的存在，尤其在产品功能结构都日益趋于繁杂庞大的今天，导航间进行组合使用已是常态，也是一种大趋势，所以在进行产品设计的时候需要结合自身的需要具体分析，使用适合自身的导航形式，毕竟适合自己的才是最好的。
常见的banner设计比例有2:1和16:9，当然这不是固定的，高度可以根据产品需要来定，比如电商类产品首页空间比较宝贵，banner高度就会相对紧凑，以节省页面空间。我们在设计banner时最好使用屏幕最大的宽度尺寸进行设计，即：安卓(@4x)—宽度1440px(各个公司可能后台上传尺寸不一样，仅做参考)，这样做虽然会多占资源，但是在适配下面的各个屏幕时可以避免可能出现模糊不清的状况。
自从iPhoneX问世之后，为了避免刘海对banner的干扰，越来越多的产品取消了之前状态栏和导航栏全透明的效果，将banner放到了导航栏下面；目前电商中京东还保留着原来的样式，这类样式需要注意的点有：
留出顶部危险区域：状态栏和导航栏底下为危险区域，危险区域内不要出现文字等重要内容；
顶部黑色透明遮罩：因为banner的颜色不可控，为了突出状态栏，开发会在顶部设置自上而下的黑色遮罩，数值为70%—0%；
上滑时显示状态栏和导航栏底色：开发会设置一个数值，比如通常是一个状态栏和导航栏的总高度，即128px(@2x)，在页面整体上滑128px时，状态栏和导航栏会由全透明变成不透明显示出底色/渐变色；
3.分类模块入口
分类模块入口一般位于首页banner下面，在电商、团购类等产品中是十分常见的形式。很多用户可能不知道搜索什么关键词或是目的性比较强的来寻找某一商品，这种快捷的分类入口就会显得很方便。
分类模块一般有1-2页，数量4-20个不等；因为第一页的点击率普遍较高，所以请将最重要的分类放在第一页，要让用户触手可及，而第二页放相对次要的分类；也可以将第一页最后一个分类设置为”更多分类“，这样做可以减少一页，但是里面分类的点击率可能会不高；
icon的设计上普遍是面性图标或者面性图标+圆形/方形底色(渐变色)，因为这样视觉上图标会显得比较饱满；面性图标的设计上不单单只是反白效果，还可以添加一些设计细节对比，会显得更有层次；这里不建议使用线性图标，因为会显得视觉冲击力太弱，不够突出；
4.“资讯/新闻/快报/头条”入口
5.底部标签栏
标签栏在上面的导航模式中已经提到过了，这里就来具体的说一下：
设计上：标签栏高度为98px(@2x)，标签栏内的字体作为提示作用，字号为20px；标签的数量一般有3-5个，icon的设计上要保持简约并且能够精准传达释义，也可以进行品牌基因的融入来突出自己的调性和其他产品的差异化；常用的是线性和面性两种，一般进行结合使用以表明选中状态；iOS11之后面性icon开始流行，用品牌色进行区分；另外icon的设计要保持统一，比如线性icon的粗细、圆角角度大小、开口的大小等都要保持一致，这样用户看起来也会比较赏心悦目；
反馈方面：可以分为视觉和听觉两方面；视觉上当前选中状态要和其他icon有明显区分，比如线性和面性的区分、颜色的区分等，以表明当前所在的页面位置；另外，点击时icon伴有动态效果，可以增加趣味性，也是现在比较常见的反馈方式；听觉上的反馈是指在点击icon时会伴有点击音效，比如facebook；
隐藏功能：再次点击icon置顶页面功能。用户熟知的置顶页面功能是点击状态栏或是点击置顶button，可能很多用户没有发现或是很少用到——再次点击当前页面标签栏icon是可以进行页面置顶的，可能很多产品都有这一功能，但是没有对用户进行很好的引导，反观之，淘宝和MONO在上滑时会在标签栏进行置顶页面的引导，体验较好；另外淘票票采用的是双击标签栏icon进行置顶页面，应该是为了避免用户的误操作，导致用户正在浏览的内容上移，需要再次滑动很久才能找到，但这样的交互可能很多用户都不会知道；
为了获得沉浸式体验，标签栏在用户浏览时可以进行隐藏，比如上滑时收起、下滑时显示出来；
6.加载方式
分步加载：顾名思义，就是一步一步的加载，优先加载占用资源比较小的内容；分两种情况：第一种先加载文字再加载图片，图片的突然出现会打扰到用户，这种体验不佳，已经慢慢被舍弃了；第二种就是先加载出页面的框架再加载出页面的内容，比如先加载图片占位符，占位符可以是灰色或产品主色(+logo或icon)/彩色(后台设置颜色，随机出现)，接着再加载页面文字，最后再加载占位符位置上的图片；这种加载方式的好处是可以让用户快速页面整体的大致结构，体验较好；
懒加载：指在用户使用到时才会加载，以免造成流量和资源的浪费，比如用户刷feed流时，上滑被看见时再加载出图片内容，再往底下看不见的位置可能只加载出文字和框架；
智能加载：指在不同网络环境的下，加载的内容也不一样。比如在4G网络下，为了给用户节省流量，页面中进行加载文字内容和普清图片，不对视频进行加载或只加载标清视频，但是考虑一部分用户的流量比较多，所以现在也会给用户提供自己选择的权利，比如弹窗提醒用户是否使用流量加载或切换高清模式；而在wifi条件下，则是可以自动加载高清图片或视频；