「猜你喜欢」当然还有很多词汇可以形容，比如：为您推荐、为您精选……经常在移动端购物的剁手一族们肯定都不会陌生。它似乎无孔不入般的存在于我们浏览的各种页面中，作为长尾内容向用户进行补充推荐。我们在浏览时可能并不会细想其背后的逻辑是什么？这样设计的原因是什么？但仔细观察就会发现，虽然它们都有共同的名字「猜你喜欢」，但在不同的运用场景下，其设计与推荐逻辑存在很大的差异化。

本文将从设计师的角度出发，全面而细致的介绍「猜你喜欢」内容设计的思考与总结。首先，先来介绍一下什么是长尾。

一. 什么是长尾

长尾（The Long Tail）这一概念是由Chris Anderson在 2004 年十月的「长尾」 一文中最早提出，用来描述诸如亚马逊和Netflix之类网站的商业和经济模式。

长尾理论是网络时代兴起的一种新理论，当商品的销售成本急剧降低时，几乎任何以前看似需求极低的产品，只要有卖，都会有人买。这些需求和销量不高的产品所占据的共同市场份额，可以和主流产品的市场份额相比，甚至更大。

二. 设计「猜你喜欢」的原因

简单了解长尾的含义后，可以清晰的知道移动电商在页面中要加入长尾设计（猜你喜欢）的原因：利用互联网移动端页面无限长的框架进行更多货品的曝光，来留住剩余未跳转流量进行商品售卖，来实现价值最大化。

三. 「猜你喜欢」常见的内容形式

「猜你喜欢」的推荐逻辑多以用户历史浏览记录或已购买记录进行推荐，而单品推荐更加贴近触达用户。因此，单品是经常运用到的展示形式，后续讲到的关于如何设计猜你喜欢也是以单品为例。同时，随着推荐逻辑的逐渐完善，为了丰富产品内容以及满足用户多维度需求，逐渐增加了关键词、促销活动、品牌、资讯等内容形式，通常以穿插的形式展示在单品列表中。

四. 如何设计「猜你喜欢」

「猜你喜欢」涉及的后台技术为ＢＩ推荐（实现模型），即将现有的用户数据进行有效整合，快速准确地提供决策依据，帮助产品做出明智的内容呈现，这里将不再多做介绍延展。主要从界面设计（表现模型）及用户分析（心理模型）这两方面出发进行分析。

在移动端购物APP界面中，运用猜你喜欢的场景大致有如下页面：首页、搜索结果页、商品详情页、购物车页、个人中心页、购买成功页、订单详情页、物流详情页、大促页面等场景。接下来，将分场景介绍在不同页面下如何设计「猜你喜欢」。

1. 首页

首页是最重要的运用场景，如京东、淘宝、严选等的首页都是以猜你喜欢作为长尾展示。用户在浏览首页时，多以无目的闲逛为主，当用户未在重点活动或栏目入口处点击跳走，此时进入长尾内容「猜你喜欢」，如何留住用户的脚步是其重点。因此首页「猜你喜欢」的推荐逻辑多以用户历史浏览记录来向用户推荐，以此来激发用户的潜在遗忘需求。

随着首页猜你喜欢运用场景的完善，后续可以单品推荐为主，增加关键词、品牌、促销活动、内容资讯、店铺等内容的穿插，既能丰富内容推荐维度，又能满足不同维度偏好的用户在闲逛时激发其潜在需求。

文章作者：Rindy 

在设计B端产品时，产品经理和设计师总会为写一个问题争执不休：在有限的页面空间，是否还能放些什么？而弹窗它可大可小，且能在当前二维页面之外衍生无限的空间，几乎可以做到所有页面能做的事，同时对于开发来说随便在html中加一个<alert>和一句话就能生成一个最简单的提示弹窗。是的，在产品设计中，弹窗真的太“方便”了！

或许正因如此，弹窗可能是产品设计中最被滥用的一种常用控件了。如果用户打开一个链接或是按钮后充斥的是一层层的弹窗，用户会感觉你的产品太复杂太难用！更糟糕的是，有的产品会很粗鲁的弹出各种“提示”、“警告”，还需要强制用户去点击或关闭——可能设计者以为这种”温馨提示“是“已用户为中心”，但很多时候我们完全可以以一种更为温和的方式来提醒用户（如toast、悬停浮层、输入框旁边的橙色文字等）。了解弹窗有哪些类型、可以做什么，能够帮助我们在设计时做出更合理的决策。

弹窗，是一种“展现于页面之上的一种信息容器”，在x、y轴的平面空间之外扩展了页面的维度和深度，它是一种比页面更灵活的信息容器。细分下来会有很多类型，但并没有一种很明确和统一的叫法。在移动应用流行以前的网页设计中，有对话框（Dialog）、警示框（Alert）、弹出层、弹框、浮层（popup）、气泡……现在，因为响应式设计和多平台统一的趋势下，甚至也有将android的toast提示、Actionbar，以及ios的透明指示层（HUD）和也算作是“弹窗”的一种。同时，非模态各种浮层和窗口，类型和用法千差万别；鉴于此，我在这里重点探讨我们在B端产品（PC端）中常用的传统意义上的“弹窗”。

以功能和用途为维度，笔者将弹窗分为三种类型：信息展示、任务、反馈。

一、信息展示

1、解释或说明

一般由用户主动触发的，包含图文信息，少数会有简单的操作按钮，如“确认”、“知道了”等等。

典型场景：欢迎界面、操作说明、帮助、功能引导、取数说明、查看详情、预览或查看大图……

这种弹窗一般用来对页面内容作补充，用户通过点击图标或文字按钮，可以在当前页面展开弹窗。比如业务介绍、图表的取数说明、操作说明和引导等，这类信息往往与当前页面紧密相关，且从属于当前语境，所以并不适合用跳转页面、并列tab其或二级页面的形式来表达，因为这样无疑会加深页面层级，增加用户的认知负担。尤其是对一些很重要的操作说明或引导，甚至可以在弹窗中使用翻页或tab页签的形式来扩充弹窗的显示空间。

需要说明的是，很多产品喜欢对那些普通的字段解释和说明也使用带遮罩的模态弹窗，并需要用户点击才显示。这是一种很糟糕的设计。这种解释说明，完全可以用一般的非模态浮层来代替，用户只需要悬停就可以快速浏览，并且快速离开（移开触发区按钮或点击空白区域）（当然，如果内容太多，可能你要考虑设计跳转到新的页面而不是使用浮层或弹窗）。

类似这种页面的补充说明，使用悬停浮层体验会更好

2、内容拓展

这种类型常见于一些图表统计页面、列表页面。由于页面布局的限制，以及突出核心需求的原则，我们只会给用户展示最关心的统计结果和字段，不会也不可能把统计图表的所有详细数据和说明展示在当前页面。而这些内容往往又并未多到需要一个新的页面来容纳（同样会增加页面层级），所以这时候就可以用弹窗来呈现。

内容扩展型的弹窗，主要有以下场景：查看详情、预览图片、数据透视、历史记录……

对于这种弹窗，模态和非模态并没有很大的差别。一般来说，如果是内容较少，并不会占用较大的屏幕面积，使用非模态的会更合适。因为用户只需要扫一眼内容就行，模态的可能会给用户一种“被打断”的感觉。而且，使用非模态的可以直接展现在目标旁边，关联性更好，同时可允许用户快速切换查看其它同类弹窗，且不会影响对其他的模块的操作和浏览。

弹窗的扩展样式——侧滑面板

还有一种比较常见的“弹窗”，会以侧滑的形式出新，而不是加遮罩层的模态弹窗。这样做的好处是，用户在查看弹窗内容的同时，不会失去当前页面的信息，方便用户进行对比、参照和检阅；同时并不会影响用户对界面其他区域的操作。这种形式一般在表格中出现较多。当然，这里的弹窗并不局限于一般的对话框样式，我们也可以使用侧滑浮层。

而对于那些信息量较大（可能有滚动条、拖拽操作等），甚至会有一些可选的支线任务或扩展操作时，建议最好使用模态的弹窗。这样可以让用户的注意力更为聚焦，且可减少可能产生的误操作（一些非模态的弹窗允许用户点击弹窗范围外区域关闭弹窗）。

渐进式的展示：

除了弹窗和二级页面，还有一种信息展示方式——渐进式的策略值得借鉴：即在页面只展示结构式信息和核心元素，更多细节信息在用户需要时再作立即呈现。当然这样造成洞察速度受到一定影响，但你能得到一个更清爽更简洁的用户界面。

今天分享的内容涵盖了整个banner的设计流程，总结了流程中牵扯到的所有步骤和相关元素与大家分享。

在上回中，我们总结了 9 种常见的banner设计风格。需要补充营养的可以看我的历史文章。

到这里就是本篇文章的所有内容，可能一下都看完有点消化不了，我也得消化消化去了~希望能帮到大家，也不枉此文。

分享最走心的设计心得，与你一起进步，我们下期见!

欢迎关注作者的微信公众号：

文/已知未知

订单所涉及到的后台系统包括订单系统、库存系统、仓库系统、物流系统、风控系统等。订单业务的流转主要依靠完善的后台系统。

本篇文章将介绍前后端订单系统，以及订单业务流程中，各业务系统之间的紧密交互。

 前端订单系统

前端订单系统主要包括 2 大块的展示：订单信息和订单状态。

1.订单信息包括以下几大要素

• 收货人信息：昵称、手机号、收货地址。必须展示要素之一，为商品发货、投递的根据；

• 所购商品信息：店铺名称、商品名称、商品规格、商品价格、商品数量。必须展示要素之一，便于用户查看/核对；

• 支付信息：订单总金额、实际支付金额、支付单号、订单号。必须展示要素之一，便于用户核对支付金额，同时在有多种优惠情况下，能够为用户详细展示实际优惠与实际支付金额；

• 促销信息：优惠金额。只当该笔订单满足某种促销条件时，进行相应的展示。

2.订单状态一般包括以下几种状态

• 未付款订单：已下单但未支付的订单，针对此类订单，平台一般会设置一个自动取消订单的时间，比如未付款订单半小时后自动取消，以释放锁定的库存；

• 待发货订单：已付款但未发货的订单，此类订单若有退款申请发生，一般需要查询仓库是否已发货，若未发货则可进行拦截，此时用户可退款；若已发货，则用户此时不能申请退款，只能收货后进行退货退款或拒收。当然，有些平台和仓库之间不能实时信息交互时，可以设置一个有效时间，此有效时间内用户可申请退款，过了此时间则订单状态变为已发货（非实际发货），不能退款；

• 待收货：已发货未收货的订单；

• 退款中：申请退款、正在处理中的订单；

• 退款失败：申请退款失败的订单，订单状态保持申请退款前的状态不变；

• 退款成功：申请退款成功的订单。当一个订单中的某个子订单申请退款成功，该订单的状态保持不变，仅该子订单的状态显示退款成功；

• 交易成功：收货成功的订单；

• 交易关闭：取消付款的订单，有时退款失败的订单也会归为交易关闭状态。

可见下图淘宝订单详情页示例。淘宝订单详情页从上至下依次显示订单状态、物流信息、收货人信息、商品信息、促销信息、支付信息。

很多时候，设计趋势并不会表现的那么明显，甚至你看到它们也不一定会注意到。但是它们也是客观存在的。通过整个一月份的观察和总结，我们认为接下来的一个月当中，圆形元素、分屏式布局和深色背景+浅色文本会成为流行的网页设计元素。

这些元素看起来都挺常用的，不过当大家开始扎堆用的时候，就以“趋势”的形式体现出来了。

1、圆形元素

从形状心理学的角度来看，圆形和环形有着完整、和谐的心理学特征，在很多不同的场合，它常常会拿来传达爱情、能量的意象。

在 Material Design 的规范中，圆形按钮被大规模运用，并且由此开始，圆形在UI设计中开始承担越来越多的责任。

不过，由于绝大多数的屏幕和画布大都是矩形的，圆形元素通常不会贴边使用，也避免了在布局进行响应式变化的过程中，圆形元素的扭曲和形变。下面的案例当中，圆形元素都被很好的运用起来，布局保持着良好的流动性。

KymberleeJay 这个网页使用圆形元素来承载首页的主要文案，背景图片中的女性人物的目光则起到了不错的视觉引导作用。

Buddha Pizza 这个页面则让文字构成圆环，围绕这批萨，创造出独特的视觉奇观。

Hotel Poispois 这个页面则使用浮动的圆形来提升视觉，它们也可以被视作为巨大的按钮，将用户导向不同的页面。

2、分屏式设计

分屏式设计很有意思，它流行一阵子之后销声匿迹，然后又回归，来来去去好几回。最近这一设计趋势又回归了，这一次回归的分屏式设计看起来更加大胆，细节的搭配上则更加微妙。

分屏式设计的好处在于，它可以更好地呈现响应式的设计，在桌面上左右分屏，在移动端上上下叠加。无论怎么呈现，用户都不会因为这种设计而错过任何的信息。

分屏式设计之下，一个屏幕同时展示两块不同的内容，也让不同的内容和元素有了对等的展示空间。

分屏式设计让用户能够自主控制交互，让他们面对不同的内容的时候能够选择自己喜欢的内容和方式来操作。

Taco Bill 的网站就是一个很好的例子，当你打开网站的时候，设计师就为用户提出了两个问题：你是想打包带走事物，还是预订之后在餐厅里吃？通过分屏的方式，用户有了两个不同的选择。分屏式的设计让用户的选择更加直观、可视化。

刚告别2017，整个沪江用户体验设计团队便投入到 2018 视觉和交互设计趋势的研究当中。经过前两年的设计趋势分析，总结当下预测未来已经成为HJUX的一项传统。事实上 2017 的设计趋势中的确有一部分内容被印证，并且应用到产品与运营设计之中。

而这次我们再次温故而知新，首先从互联网、平面媒体、时尚等相关领域分小组搜集资料，然后以颜色、图形、质感、版式等视觉维度进行研究分析，最后根据流行趋势提炼设计语言，整个过程历时一个月，总结出 2018 年视觉设计流行趋势的风格关键词。

在过程中我们发现设计趋势并非无规律可循，事实上它往往是受到社会大环境及热点等因素影响下的结果使然。同时，我们也意识到不同设计领域存在着相当多的通用性，希望这份报告能给各位从事并热爱设计的同学们带来一些启发和帮助。

一. 镭射虹彩渐变

Color-gel Laser Gradient

荧光 / 流体 / 梦幻感

1. 概念简述

荧光色自然融合下的流体渐变运用。

在科技成为近些年的热点后，设计配色也潜移默化地受其影响。镭射（激光）作为科技下的视觉产物，呈现出光彩陆离的渐变，浪漫而不失刺激，致幻而不失理性，使人有种穿越时光隧道来到异次元的梦幻感。

随着如今显示设备显色能力的提升，荧光色下的镭射虹彩渐变也在向更广的色彩领域延伸。我们预测明快，透气，强感官冲击下的镭射虹彩渐变，将成为 2018 年热议的配色方式。

2. 运用案例

由于镭射材质在光下变换莫测的炫彩感，让其在印刷，服装，甚至彩妆上都有着巨大的发挥空间。这种充满未来感的视觉体验受到当下沉浸于网络娱乐的年轻人青睐。这场色彩的狂欢已在时尚领域掀起热潮，相信很快也会在整个视觉领域大放异彩。

二. 赛博故障风格

Cyberpunk-glitch Art

霓虹 / 错位拉伸 / 未来感

1. 概念简述

蓝紫调下的故障科技风格。

上世纪 80 年代科幻小说出现一个分支——赛博朋克。自此从文学到影视都开始热衷对人工智能展开畅想。而 2018 年正处于当年小说描写的近未来年代，同时人工智能，VR，AR恰恰也是当今热议的主题之一。种种巧合让赛博故障风格开始流行于各个领域。

赛博故障风格往往以蓝紫的暗冷色调为主，搭配霓虹光感的对比色，用错位，拉伸，扭曲等故障感图形体现电子科技的未来感。

2. 运用案例

从天猫造物节到中国有嘻哈的海报，我们不难看出赛博故障风在设计领域的影响。赛博朋克张扬的调性，符合现在年轻人标榜自我的价值观。而故障艺术这种刻意展现文件损坏状态的视觉效果，令画面更加具有科技发展中的不确定和未知感。

一、费茨定律（Fitts’ Law）

1、费茨定律（Fitts’ Law）简介

费茨定律是由保罗·费茨（Paul M. Fitts）博士，在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的，时间是 1954 年；该定律被用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。

费茨定律指的是：使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。用数学公式表达为：时间 T = a + b log2(D/S+1)。

如下图：

上图中，T指的是：移动设备所需时长；a、b指的是：经验参数，它们依赖于具体的指点设备的物理特性，以及操作人员和环境等因素；D指的是：设备起始位置和目标位置之间的距离；S指的是：目标区域的面积大小。

2、费茨定律（Fitts’ Law）在设计中的应用

（1）按钮等可点击区域在合理的范围之内越大越容易点击，反之，可点击区域越小，越不容易操作。

• 案例一：比如淘宝和中国银行的手机网页端的登录页面

从下图来看，左边淘宝登录界面的信息输入区域很明显比右边中国银行登录界面信息输入区域相互之间的距离和输入面积更大一点，在视觉及输入体验上面淘宝也要比中国银行的好很多；再看两个页面的登录按钮，右边中国银行界面的按钮视觉上很小而且距离上方验证码输入框的距离很近，这样的按钮不仅不好点击还容易产生误操作，相对而言，左图淘宝页面的按钮间距和大小就很合适了，输入和点击体验比左图好很多。

• 案例二：  比如小黄车和小蓝单车首页扫码按钮

小黄车和小蓝单车首页最重要的扫码用车按钮不约而同的使用了圆形按钮，我们不看放置的位置，单看按钮大小，小黄车的明显要比小蓝单车的大很多，笔者在使用两者的时候，小黄车的操作按钮要比小蓝的舒服很多，因为小黄车的按钮比较大，比起小蓝单车的按钮更容易点击。

给予用户即时反馈是交互设计中十分重要的一个原则。它是关于系统如何即时有效地应对用户进行的操作的设计。当用户进行操作时，给予即时、恰当的反馈非常重要。

一个简单的例子就可以说明这一点：当你的电脑死机的时候，不论你点什么，电脑都不会有任何反应。系统没有了反馈，用户的内心就会很崩溃。今天我们要讨论的，是反馈中很特殊的一种：在按钮置灰的时候，应该如何提供给用户反馈？

先来看一个案例。这是一个投票的浮层，每个选手的下方有个投票按钮，每个用户每天只能投给一个选手一票。

乍看这个方案没什么问题。但如果加上投票之后的页面，问题就暴露了出来：

图 2 为了表达出“不能再投票了”，将所有按钮置灰，于是我们得到了一屏幕置灰的按钮。虽然按钮是灰色的，但按钮却依然长得是按钮的形状，还是有忍不住想点一下的欲望。

那么问题来了，此时点击这个灰色的按钮，应该弹出toast提示：“每天只能投一票哦~~~”吗？带着这个疑问，我们来研究一下置灰按钮。

置灰按钮

置灰按钮在登录注册中被广泛应用，比如微信：

左图是默认的登录页面，登录按钮置灰；当用户输入了密码（即时只有一位），则登录按钮亮起。

乍看之下只输入了一位密码就亮起，有些不合理，毕竟用户的密码位数几乎不可能是一位数，此时亮起用户也不太可能登录，反而有干扰之嫌。

但如果再细想一下，假设用户的密码是 6 位，而微信正好在 6 位的时候亮起了按钮，那么其实也是变相透露了用户密码的位数。如果设定一个最小的按钮亮起的位数呢？比如从用户输入了 6 位后开始亮起，这样也不失为一个选择，只不过比现在的方案要略复杂，没有现在这个更简单直接。

下面这个例子，应该是登录注册中，置灰按钮应用的顶配了：

在这个例子中，只有当用户输入了 11 位数字（手机号码都是 11 位）后，“获取验证码”的按钮才会亮起。这个方案就是无可挑剔，没毛病。

在登录中将按钮置灰，主要是提示用户现在按钮还不可以点击，要输入密码/手机号等信息后，才可以点击。这在一定程度上，预防了用户在没有输入的时候就点击而导致的操作失败。由于将按钮置灰，本身就是将按钮置为不可用的状态，因此置灰的按钮点击之后是不应该给出反馈信息的。

这里我们可以看到一个权衡：虽然“即时反馈”这条原则很重要，但可供性（affordance），也就是指示一个物体如何被操作，也不能违反。具体来说，一个置灰的按钮，它已经被设置为置灰的状态，就清晰地指示出按钮不能被点击；此时如果点击按钮后弹出toast，则与此时按钮的可供性不符合，因此是不可取的做法。

投票案例

分析到这里，文章开始的那个例子就明晰了：点击第 2 张图的投票按钮，不应该弹出toast。但页面中还是有很多被置灰的按钮，这个页面看起来不是很友好，笔者表示对这个页面不太满意。

顺便分享一个经验：对页面的不满意，很多时候是我做出好方案的法宝。因为不满意，所以会一直想办法优化。保持对自己不满意的页面的不妥协态度，这非常重要。

分析一下这个投票页面，在投完票之后，用户已经选择了一位选手，此时最关心的是“我是否已经投上票”了。如果对这个活动比较感兴趣，用户还可能会想要了解一下投票的排名，已经浏览一下都有哪些选手参与了投票。因此，这个页面可以改成如下这样：

更改后的方案，在用户点击投票之后，首先指明了用户投的是谁、现在多少票、排名是多少；后续的页面展示了票数的排名，从而避免了满屏都是置灰按钮的情况。

以上通过一个案例，分析了置灰按钮的使用规则。讨论让我们认识更深刻，欢迎留言讨论。

关于作者

新设计青年，2017 年度作家评选最佳人气奖。爱奇艺高级交互设计师。留德海龟，曾任职腾讯微生活、网易、宜信。 5 年交互设计经验，专注设计领域。微信公众号：新设计青年。