产品视觉页面元素及交互动作趋势，下拉刷新功能你了解吗？

hwyzw

    雷锋网按：本文作者天行（微信公众号），互联网从业人员。

    一个物品的界面设计往往包含许多图标和其他物件，这些物件体现了该物品的核心用途，并塑造了它的特色和感觉。无论是何种操作，大多依赖“点选”这个行为，而翻页、分栏这类功能在手机应用中基本上把“点选”变成了“滑动”这个动作，这是物品设计的一个普遍走向。下拉刷新是滑动操作的一种形式，与产品核心用途相比，它算是一个辅助功能，不过在某些应用里，这项操作又不可或缺。

    苹果系统的操作者对于图像中应用程序的这种升级手法十分熟悉：手指按住显示界面向下移动，软件会展现出一部分特定信息，随后当前界面会重新加载。

    2012年，发明了这种

    下拉更新机制，带动了应用交互方式的一个小变革，众多应用纷纷跟进，个别开发者甚至将其应用到了更高层级上！来年，公司正式公布已取得下拉刷新的技术授权，虽多次强调该授权仅用于自我保护，不会用于法律诉讼，却依然让许多企业感到担忧。幸运的是，该公司言出必行，至今未曾听闻有相关诉讼侵权事件发生。

    刷新屏幕是众多应用中的常见功能，我整理了部分常用软件的下拉刷新实例，稍后会公布关于刷新操作的归纳和全新技巧。

    每个人都可以是产品运营者，今日头条的刷新机制则比较传统，它通过下拉来更新内容，并且会标注上一次更新的具体时刻，让用户明白这次刷新是在何时完成的。这种办法常用于各类信息、商品平台或专题板块，能够应对它们持续更新的状况，同时向顾客发出及时通知，一个颇具代表性的案例是微店旗下的口袋购物、今日半价以及微店买家版，它们基本上运用了这种策略。

    美团外卖（左）与百度外卖（右）的刷新界面运用了其吉祥物或动漫角色，呈现出生动有趣的效果，有助于加深用户对品牌及用途的记忆。此类手法在众多应用程序中十分常见，例如百度糯米、大众点评、美丽说、艺龙、美拍等平台也普遍采用。

    京东左侧和优酷右侧的向下滚动页面不再仅限于内容刷新，而是增添了全新用途：开展特别活动。打开应用程序时，京东的向下滚动界面展示的是618促销活动的互动游戏，而优酷的向下滚动界面则是“暴走法条君”的推广内容。它们在原有更新机制上进行了突破性的尝试。这个模式淘宝、天猫早先已顺利应用过，在大型促销活动来临之际借助此类互动吸引顾客，提供优惠券、电子红包等福利，一方面增添参与乐趣，另一方面刺激消费者下单意愿。

    五八招聘（左侧）与淘票票（右侧）运用可爱表现手法，对使用者而言颇具吸引力，此类做法传递亲切感与真实情感，有助于缩短用户与产品间的心理距离。

   

    阿里旅行（左侧）与饿了么（右侧）在滑动时直接展示产品标识，界面整洁，风格近似产品卡通造型，有助于加深用户对品牌的印象。（备注：两者均采用“触手XX”设计，当前移动网络环境下此举颇为普遍。）

    腾讯视频与亚马逊，这两个应用的下拉界面空无一物……笔者不禁思考：既然不采用下拉刷新机制，为何不直接将顶部区域固定呢？满屏滑动的空白区域，确实令人感到不适……

    最后分享一种只有笔者这种人才爱玩的下拉页面：

    ENJOY，一款用于社交餐饮的应用，其主界面持续向下滚动即可看到所述景象。只要页面还能继续向下拖动，笔者必定会将其彻底挖掘出来……确实，这类应用更吸引像笔者这样的用户群体。从理性角度审视，这亦是一种具备优化潜力的设计，后续将具体阐述。

    市面上常见的应用程序普遍具备下拉刷新功能，从之前的说明可以了解到：下拉界面正在衍生出更多新颖或有益的功能形式，然而总体来看，许多产品开发者与界面设计人员并未充分关注这一细节，本人打算系统性地探讨一下关于下拉界面的见解。

    谈论微信“摇一摇”功能，人们都很了解，众多产品开发者对此赞赏有加，许多应用程序也加入了类似摇动的操作。产品领域的权威张小龙对此有深入见解：微信的“摇一摇”是一种以追求自然为设计理念的创作，它借鉴了人类在远古时期没有工具时需要掌握的“抓握”与“摇晃”这些基本动作。手机创造了满足人类原始反应的环境，构思“晃动”功能时，意图使其与人的自然习惯动作相吻合。

    张小龙从人的本能角度出发，进行类比推理，运用这种思维方式，我认为“触碰”、“滑动”也是人天生就有的本能，婴儿用手和嘴寻找第一口奶水，面对陌生环境也是本能地用手去探索和感知，从而建立最初的认识，手机、平板等电子设备从机械按键发展到触摸屏，正是这种思考方式的具体应用。

    一款产品的视觉页面通常由各种、icon、等元素组成，这些元素代表着这款产品的主要功能，并形成其风格和调性。不管是还是都是靠“点击”动作，而翻页、分栏等功能在移动类产品则基本由“点击”转换为“划动”的动作，这是产品的一个普遍趋势。下拉刷新属于“划动”这个动作，相对于产品的主功能，下拉刷新是一个小功能，但在一些产品中它又是必需的功能。

    小但必需，那么，目前尚被忽略的下拉刷新有哪些玩法呢？

    正如之前说明，向下滚动屏幕已经衍生出若干新奇或有益的用法，并且其作用不止于更新内容这一种。笔者打算从“向下拉动以更新”和“向下拉动但不更新”这两个角度来探讨：

    （一）下拉刷新玩法1、从产品功能出发：吸引用户、强化品牌

    先做个小互动，看图中的那个软件，往下拖时，屏幕会显现一只小动物，继续向下拖，这个小动物会拿出一个摄影工具，松开手指时发出一声快门声，请大家猜猜这个软件的用途是什么？

    公布结果：从老鼠的行为特征，人们很轻易就能想到这是一款图片分享软件。

    这种下拉更新机制，既突出了软件的主要作用，又加深了用户对品牌的理解，颇具巧思。此类方法适宜众多商品，不过所有商品都必须依据实际用途来设计，此处仅提供一种借鉴思路。

    2、从产品内容出发：提醒用户，预告内容

   

    这款App的做法值得借鉴，下拉时会显示剩余更新时间，精确到小时和分钟，为用户提供了更明确的提示。这种设计还能起到预告作用，比如告知用户距离某部作品更新还有多长时间，或者距离某个活动开始还有多久。

    （二）下拉非刷新玩法1、从产品业务出发：依托数据，创新功能

    淘宝左侧与天猫右侧的商品页面在向下滚动时会显示“个人浏览记录”以及“打折信息”，这种设计颇具新颖性。以淘宝为例，当用户查看某个商品时，若希望参照先前浏览过的另一件商品，这种情境下的使用感受相当出色，同时对于淘宝来说能够有效提升用户粘性。然而，另一种情境，即用户正在查看某件商品，下拉页面时突然出现之前浏览过的商品，而这些商品与当前查看的商品毫无关联，这种情况就显得十分突兀。

    这表明下拉页面的用途必须针对不同情况加以规划，不宜推行标准化方案，或者通过一段时间的引导，让使用者明白该功能适用于何种情境，并且需要采取方法避免无意中触发下拉页面的显示。

    淘宝、天猫的全新运营方式虽然并非包罗万象，但其开拓精神确实值得赞扬，首页向下滚动时增设的抢购优惠券、争夺小额红包等互动环节，也是由这两大平台率先尝试并推广的，这些举措都蕴含着显著的提升价值。基于商品的经营策略与实用功能考量，向下滚动页面无需刷新状态下，其实还存在诸多其他可探索的互动形式。

    许多应用程序举办活动时，常常在首页增加一个链接，促使用户通过该链接加入活动，但在实际执行时，可根据实际状况考虑采用下拉页面来替代增设链接，尤其对于偏向游戏的环节，这样做一方面能减少首页的负担，另一方面用下拉的动作取代点击按钮的行为，能够提升参与的趣味性。

    电商平台针对不同层级页面，依据商品特性与用途，专门设计搜索辅助框内容，举例来说，旅游平台某个景区页面，当用户展开选项时，会显示曾经到访过此地的游客分享的精选游记。

    ENJOY商品列表页呈现某个特定画面，这种做法显然并不被许多顾客认可和喜爱，不过能够加以改进：举办特色活动，商品列表页显示的信息可以设计成拼图样式（具体方案需根据产品特性来制定），以此吸引顾客参与其中。

    对于部分注重客户忠诚度的商品，其下拉界面可视为获取积分或参与签到，以此降低客户操作门槛。

    ……

    2、从品牌调性出发：独特风格

    品牌的特别印象，集中在它的徽记，例如看见“√”会联想到耐克，看见企鹅会想到腾讯，看见苹果会想到……这些各自行业中的领先者已经让它们的品牌越来越形象化，也就是见到某个物品就会想到它们。不过，还存在更深一层的联系，就是识别特定色彩就能联想到某个企业，例如，一见到橙色就想到阿里巴巴，一看到绿色就联想到微信……当然，这种关联并非固定不变，并非所有情况下都完全成立。

    探讨这些议题，就是说下拉页面的风格塑造，能够从品牌标识和品牌主色调这两个方向着手进行规划。

    下拉页面并非为了刷新，而是为了体现品牌特质和风格，例如依据品牌业务和定位设计Logo的系列形象，或者与用户互动来收集，并展示在下拉页面上；例如产品主色调的保持一致，背景色、线条等方面也要保持一致，并展示在下拉页面上。

    当前下拉刷新尚未得到足够关注，关键因素在于：产品功能需明确主次之分，设定优先级，下拉刷新属于次要功能，必须在完成核心功能后进行完善，同时不能干扰核心功能。笔者提出的新交互方式针对特定使用情境，并确认一个原则：在不影响核心功能的前提下，可以探索下拉刷新的优化方案。

    整体而言，下拉刷新的创意构思能够增强用户运用软件的愉悦感，塑造优质的人机互动界面，并且有助于展现产品核心优势、宣传品牌宗旨。优质的产品常常通过细致入微的环节来彰显，下拉刷新的设计拥有多样的创新可能，同样能够打造出非常考究的精妙之处。

    本文由人人都是产品经理授权雷锋网发布。未经许可，禁止转载。