电商类 App 是日常使用频次非常高的应用，它们的每一次更新改版不仅是业务的拓展、用户需求的满足，同时也是消费趋势的引领与跟随。
近期淘宝 App 的许多页面都有了较大的改动，在分析淘宝改版的基础上，通过几个关键页面的分析对比淘宝、京东、苏宁易购三大综合类电商平台的产品设计，希望此篇文章能让大家对电商类 App 的产品设计有更深的认识。
前阵子淘宝进行了改版，这次改版循序渐进，并做了较多的 A/B 测试。
1. 主要改版页面
上图是淘宝几个主要改版页面。从视觉上看，很明显的大圆角卡片、去线条，整体风格统一轻质化。大圆角卡片追随了 iOS11 的风格（App Store 中尤为突出），卡片使信息更加聚焦，模块感更强；圆角卡片本身也比原先的卡片式增加了更多细节；大圆角卡片亲和力高，更加活泼，也符合淘宝人群的定位。
上图为5个 tab 的页面，这次统一了头部的颜色，强调了品牌，统一性方面也得到了提升。
以下是从单个页面的角度进行改版分析。
2. 个人首页
△ 旧版图为除夕的截图，颜色方面先不讨论
新旧版本的对比，可以看出88会员、卡券包优先级提高，会员信息更加集中、突出。这也印证了这两年会员机制的火热，拉新成本和难度都越来越高的情况下，巩固老用户才能带来更多的价值。
新版的卡片式很突出，去掉了大部分的线条，转而用块面来代替线条表达层级关系。
「我的订单」部分 icon 样式发生了变化（7. 7. 2 版），从填充式转变为线条式，突出了 icon 右上角的数字，但这一点在测试版本中又改回来了（后面讨论）。
88会员和物流这两块内容滚动呈现，真正是动效解决问题，从时间轴来解决信息量大而空间局限的问题，同时动态效果增加了用户吸引度。
在测试版中，这个页面主要看到两个点的变化，一个是 icon 改为原来的填充式，一个是动效滚动的节奏。
icon 的问题个人猜想是因为体量与重要性、位置的问题，线条式的体量弱于填充式。在「我的淘宝」页面中，最重要的信息是「我的订单」，因此需要一定的突出。另外在测试版里，「我的订单」的上面固定的广告位放置了旅行青蛙的广告，此位置的突出性导致其弱化了底下的「我的订单」，占用了原先「我的订单」的 C 位，因此测试版考虑到更全的场景（有广告），从而将 icon 的样式换回了体量大的填充式。
动效滚动是上面说的88会员和物流，7. 7. 2版本里两个滚动是同时进行的，而7. 7. 8的测试版中两个滚动是错开的。上下同时滚动会让人有些混乱，会让人认为这两块的信息是相互关联的。
3. 店铺首页
这一块做的 A/B 测试。店铺页面的改动较大，导航做了较大调整。新版将常用操作和重要功能放到了底部固定；二级导航中的内容让商家自定义选择，从而满足不同店铺的需求；新版一级二级导航较旧版层级关系明确了许多。
再来说说这次的 A/B 测试，这次的测试时间比较长（从7. 7. 2到目前的7. 8. 2都在，目测到8. 0应该会给出一个结果）。店铺页在导航上的大改动，会在一定程度上对已经形成习惯的老用户造成冲击，对页面重新适应和学习，有点类似于前摄抑制（在认知心理学上指之前学习过的材料对保持和回忆以后学习的材料的干扰作用）。新版设计的目的一是方便用户初期快速学习，二是中后期快速使用。对于中后期的快速使用就需要一段时间的铺垫来获得数据。该次测试应该是区分各种不同的用户，简单来说测试新用户、老用户分别对于新旧版本的学习，以及他们对新版本熟悉之后的使用。
4. 物流详情
这一块可以说是样式上的大改。用可视化来表现包裹正处的位置以及即将进行的操作，增强用户感知（降低理解难度），进一步提升对商品信息的把控感。比原先仅仅是文字展示而言生动了许多，样式接近外卖等待中的订单页面。可视化固然可以展示更多的信息，但是在用户非训练的情况下信息传递的速度未必比文字要更快，不同的人对图形的理解也会有所偏差。不过介于外卖 App 的页面已经对很多用户进行了教育，相信这种理解上不会有太大难度。但是依然要在后续优化中逐渐突出信息的重点。
物流详情页除了样式的巨大变化，还有一个特点就是场景化细分，不同的场景做出了差异化。例如仅仅是物流详情页，根据不同的场景：发货未揽件 – 已揽件未配送 – 快递员配送中 – 到达菜鸟驿站/其他快递点 – 已签收等，页面突出的信息均有所区别。已揽件时突出快递信息，配送时突出配送员信息等。
从场景细分做差异化，让用户获取当前最需要的信息这件事的出发点无疑是很好的，但是从上图中，仅是快递信息这一类信息，就出现了三种样式（如上图），并且位置也不统一。如果用户是购买了几件不同店家的商品，这时快递员打电话来说我是XX快递的，快递给你放在了某某地方，这时我想知道这是啥商品的时候，于是我就打开了物流详情，来找快递信息，发现快递信息居然不在原来的地图底下了，找了好一会才发现放到了快递员下方。这个例子也就是说在非常见场景下获取某个信息时可能需要付出额外的学习成本。
不过在7. 7. 8的测试版本中，又将快递信息的样式减为两种，算是一种妥协。本人认为，场景细分出发点是好的，但在样式和位置两点中，最好至少有一点是固定不变的，这样才不会过多增加用户的学习成本，也能涵盖一些小概率场景。
5. 动效
这两张图都是店铺页面顶部的动效，当用户向下滑动页面时，顶部的信息会出现变化，也算是细分场景的一种，通过动效的方式完美过渡，过渡的流畅感会让用户对该平台增加些许好感。
我的淘宝这一页的动效解决问题在上面有说到，右边的有好货页面，当用户在滑动页面时，攻略推荐一栏的图片有依次展现的效果，吸引眼球，小有惊喜。
总结来看，淘宝改版的设计角度可以总结为：设计追随目标，品牌、会员突出，追随设计趋势，细分场景，可视化展现和流畅动效。另外淘宝对设计、测试的态度上来说，设计解决实际问题，设计需要验证，测试要严谨。
这里只选了京东和苏宁易购两个与淘宝进行了几个关键页面比较，以下主要从视觉的角度谈一下有哪些问题，这里几乎不牵扯业务、页面跳转等问题。
1. 首页
淘宝：整体看起来没有什么硬伤，没有用卡片风格。
京东：这边也是继淘宝改版后不久改版上线。这边首屏的 icon 这一块的卡片式生硬，大有为了卡片而卡片既视感，京东秒杀这块的整齐度不高，也有些左重右轻。「每日逛」这种装饰性较强的风格也与整体卡片式简洁风格不符。「东家小院」楼层次级标题的颜色跳跃，大有喧宾夺主之感。
苏宁易购：目前还没有改版。掌上抢这楼层整齐度不高，和京东类似，同时缺少层次感，部分有渐变部分没有，非常不统一。「逛实惠」楼层视觉不平衡，而且信息层级很有问题。
2. 搜索结果页
风格：淘宝这页用了无框设计，省去了中间的分割线，商品图片尺寸较大；从左到右，图片尺寸越来越小，分割线从无到细到粗，整体效果上淘宝和京东效果比易购的好。
标签：在标签的处理上，易购的标签非常强，在页面上非常突出，喧宾夺主；京东的标签弱化，与淘宝类似，但完全不同类的标签样式相同（秒杀与自营），会让人觉得有些混乱。
图文编排：淘宝和京东都没有硬伤，比较和谐，但易购的图片和文字大小间距比例不和谐，图片与线框无论在视觉效果上还是像素上都没有对齐；易购底部没有适配 iPhone X。
3. 分类页
风格：淘宝用了明显的卡片，去线条；而京东也用了卡片，卡片感微弱，是为了统一性而做；易购仍然是线框区分，整体区分效果不佳。
品牌：淘宝和京东在文字的处理上没有用更多的色彩，而易购的色彩运用得非常多，削弱品牌感，且没有带来任何优势。
4. 商品详情页
此页面我仅从节奏感这一个角度来看，上图已经标出了每个页面的节奏感给我的感受。淘宝整体的节奏感比较好，轻重缓和；京东和易购在节奏感上做的都有些问题，重节奏之间无轻节奏的调和会缺乏呼吸感。
5. 购物车
风格效果：淘宝没有用卡片风格；京东用了卡片，导致大量留白，同时没有带来任何优势，苏宁易购整体稍显拥挤，没有亮点。
图文编排：淘宝整体非常和谐；京东图片均使用了白底，这点很好保持了统一性；京东使用了大量的设计细节，字号、粗细、字体、颜色等等非常丰富，但整体效果并没有很理想，稍显琐碎与凌乱；苏宁易购的文字大小与间距处理不和谐而带来拥挤感。
其他细节：京东标签不同于搜索结果页的弱化，而是非常强化，导致视觉焦点混乱，个别按钮非常小，操作不便；易购标签处理上比京东收敛；易购底部 tab 与其他部分没有区分，浮框像广告，效果不佳，数量修改框的描边太硬，比例不和谐。
6. 个人首页
整体风格：淘宝和京东都是明显的卡片式，苏宁易购是广义上的卡片式。
这里主要说一说易购的问题：首屏出现「我的专场」的大片不平衡色块非常不合适，部分 icon 效果不佳，另外有一些内容上的 bug。
7. 订单
淘宝和京东的订单页个人认为没有什么硬伤，淘宝有个适配的问题。苏宁易购的问题比较多，首先是顶部「常购清单」中没有商品的 bug，然后是图片与购物车等地方的风格不符，商品之间分割线有时有有时无，间距有问题等等。
综合上面具体页面的分析可以看出淘宝在 UI 设计上的优势：追随设计趋势、统一性、排版和谐等。
关于统一性这一点，可能有人说京东做的更好，因为它几乎所有页面都用了卡片风，而淘宝没有。个人认为，设计风格是次于设计目标的，如果这种设计风格不能很好满足该页面的设计目标，建议还是以设计目标为重；如果仍然强制使用该风格的话，会得不偿失。淘宝的做法是把卡片这种风格归类为轻质化风格，除了卡片以外，还有去线条、色块等等设计语言，因此并非强调一定要使用卡片形式。
作为用户，在很多时候会很容易判断出一个网站的用户体验是否优秀，因为主观感受是很难被欺骗的。但是作为网站的设计者和开发者，角色转换之后，所需要面对问题就复杂得多。身为构建者，要让体验尽善尽美需要花费大量的时间精力来完善整个体验的闭环。今天为你所整理的这7个 UX设计的原则，能够帮你更好地进行网站的 UX设计，并且尽可能地将整体的用户体验提升到一定高度。
想要创造难忘的用户体验，自然要围绕着用户体验本身来进行设计。甚至在某种意义上来说，数据和内容也应该是服务于体验的， 它们应该以什么样的体验来呈现出来，这是设计者需要反复思考和琢磨的问题。
图形、布局、文本和交互元素之间的协同工作才能创造体验，任何一个维度缺一不可，单纯的信息展示是不够的。
想让你的网页能在互联网上大量的信息中脱颖而出，体验是至关重要的。现代网页中大量的视觉和交互内容存在，是为了能通过体验直击人心，这样才能在激烈的竞争中存活。
如果你认为网站内容是用来读的，那就错了。现代用户的注意力集中的时间非常短，绝大多数用户在浏览信息的时候，都是快速扫视，而非逐字逐句地仔细阅读，信息的展现一定要直观、清晰，确保能够一瞥就能看明白。借助信息图表和视觉，更快地传达信息和数据。
你需要让你的内容更加吸引用户，绝大多数用户会为触动它们的信息和内容而驻足，当他们想要了解更多的时候，才会点击，了解更多。
用户只需要半秒就能判断出网站设计和内容，你需要尽量让网站的交互和指引足够清晰，显而易见。不要让按钮难以被用户发现，在首页上放上一大堆的按钮和链接，不如通过视觉上的引导，让用户注意到最关键的那个 CTA按钮。
通过迭代和测试，不断地优化和提升网站的易用性。有的设计对于绝大多数的用户都非常有用，凸显最重要的选项，允许隐藏额外的功能，并且为用户提供显示全部的选项。
除了清晰的设计，整体的一致性也很重要。统一的配色、交互和图形能够让用户对于后续的操作有更清晰的预期，减少用户在后续操作过程中探索的力度，这是通过统一性设计提升产品易用性的一种方式。
当某个设计元素在其他地方很常见的时候，它就已经形成了特定的 UI 模式，尽量不要去修改它，哪怕是很富有创意的方式。当你将这种约定俗成的元素修改成其他样子的时候，用户需要花费比平时更长的时间来判断它究竟是什么。这种认知负荷将会影响整个网站的使用效率和转化率。比如汉堡图标，比如网站登录入口的位置（右上角）。没有必要在这种地方重新「标准化」。
对于链接、导航、布局这样基本的元素，应该始终优先考虑其可用性，在此基础上再发挥创意。
虽然非传统的设计很酷，但是它的可用性问题同样很大。创造性的设计同样是需要控制其程度和平衡，如果非要打破常规，尽量控制好程度，并且一次最多打破一条规则，不能更多。
在开始创建网站和 APP 之前，你应该对于你的目标客户群体有足够清晰的了解，这样才能更好地为他们来设计界面。
一旦你清楚地了解了你的用户，就能了解他们的需求和愿望，并且设计出符合他们预期的界面和体验。这个时候，你的竞争对手能够为你提供灵感和想法。注意对方的色彩，布局，风格和功能。
尽可能使用你的受众已经熟悉的 UI 模式和 UI 元素，能够更快让他们上手。在此基础上，适当地进行差异化的设计，这样效率更高。
当你确定了受众之后，记得尽量把他们的反馈纳入到你的设计当中。
当界面中优先放置最重要的元素，通过视觉层次来凸显它们，确保用户能够更快注意到它们。在设计中，有很多方法能够凸显内容，但是最有效的方法始终是让它们更大更醒目。
视觉层次的构建能够让网站内容更加清晰，也更加富有功能性。
Peter Moville 在 usability.gov 这个网站上列举出了用户体验设计的关键因素，它的核心价值在于通过不同的维度更好地掌控用户体验的质量：
除了上面的维度之外，还有一些值得参考的 UX设计的质量衡量标准：
用户体验设计的目标不仅仅是让产品本身更优秀，更重要的是从情感层面上和用户产生关联。有界面而没有体验，这样的产品在今天的竞争中是活不下去的。
从用户的操作流程上来说，如果用户想使用一个功能，必然首先要发现它。如果连功能入口都找不到，后续的用户体验也无从谈起。而筛选功能可以帮助用户对功能信息进行快速的定位，缩短用户的查找时间，这篇文章我就来跟大家聊一下筛选功能。
三种常见基本样式
首先要明确一个概念，筛选功能并不是普通的单一功能项，它和导航一样是一个体系。既然是体系，必然有最基本的组成部分。筛选功能（体系）常见的样式有以下三种：tab类，(下拉)列表类，标签类。这三种样式是筛选功能最基本的组成元素，不管你产品的筛选功能做的有多么复杂，都可以看成是这三种基本元素的不同组合形式。
Tab
Tab是最常见的筛选样式，一个tab项代表一个筛选维度，直接平铺的展示出来，用户很容易感知到。
根据方向我们可以将tab分为横向栏tab和侧向栏tab。横向栏tab可展示2-5个选项，如果超过了5个，那么就需要用户滑动才能看到。所以当筛选维度过多的时候，我们可以考虑使用侧向栏tab，京东商品分类这里用的就是典型的侧向栏tab，我数了一下总共40个选项，这里如果使用横向栏tab用户可能要侧向滑动8屏，操作成本过高。
当然当选项过多的时候，我们还有一个法子，就是使用弹框，用户点击后可以看到全部的选项。
列表式
列表式也可称之为list，其特点就是占用空间小。因为它可以将选项隐藏起来，用户需要点击才能看到所有的选项，因此在有限的空间里可以展示更多的筛选维度。碍于手机屏幕尺寸的限制，列表式筛选现在应用的越来越普遍。
列表式筛选的样式其实有很多。可以做成popover类，actionsheet类，activityview类。这些样式很难去说谁好谁坏，这里我就只是列举出来，具体用哪种样式，大家自己来判断。
标签式
对于标签式，很难进行准确的定义，我更倾向于将单选按钮，多选按钮，switch等统称为标签式，标签式只能针对单一条件进行筛选，这点和tab很类似。标签式很少单独出现，多数情况下都是与tab和列表式结伴而行。
在淘宝里用户可以点击视图icon来切换视图模式，这就是典型的标签式筛选。
当然以上三种只是最常见的筛选元素，其余的还有输入框，滑块，地区/日期选择器等主要用于信息录入的组件。
常见的筛选体系
了解了最基本的元素，接下来看一些比较复杂的筛选样式。上面我也提到了任何产品的筛选体系都可以看成是这三种基本元素的不同组合形式。为了让大家更好的理解，我一一举例来说明：
tab+tab:
tab之所以受到青睐，是因为其较低的学习成本。每一个tab代表一个类别，而且是直接展示给用户看的，所以很多产品的筛选功能都会优先考虑使用tab。即使功能结构复杂到无法用一层tab来完成筛选任务，设计师也会考虑使用双层tab样式（tab+tab）的样式。（PS.当然下图应该算是segment control+tab）
tab+列表式：
当产品不断的发展，功能结构愈发的复杂，过于扁平的tab已经无法满足筛选的需求。以看电影这个场景为例，用户的需求是找到合适的影片和电影院。对于用户来说，衡量一家电影院会从地址、票价、品牌和特色服务（支持改签、IMAX厅等）这四个角度入手。这些筛选需求很难通过tab来完成，我们需要列表式的协助。
tab+列表式+标签：
当产品的功能结构进一步复杂，这也给筛选功能增加了新的难题。以boss直聘来说，这里的筛选项主要分为四个：排序方式（推荐/）、工作地点、公司规模、岗位要求。其中后三个筛选项包含大量的条件，特别工作地点，需要进一步定位到街道或地铁站。对于这种多维度，深层级的筛选需求我们可以使用tab+列表式+标签的样式。
这里我选择boss直聘的另一个原因在于它的tab数用户是可以自己增减的，每一个tab代表一条求职意向，最多可以添加3条求职意向。
筛选体系的容器
筛选体系是由众多筛选项组成的，这些筛选项需要一个“容器”来承载。上面说的boss直聘用的是下拉列表，这种样式其实还比较简单的，我们可以看一些功能更加复杂一点的产品，比如各大电商平台。这里使用的是抽屉式筛选框，说它是抽屉式，因为它跟抽屉一样，用的时候可以拉出来，不用的时候可以关起来，节省了空间。从某个角度来说，我们可以把抽屉式看成列表式的一个放大版。抽屉式筛选框可以容纳更多的筛选条件，像我在上面提到的输入框，多选按钮都可以在这里使用。
从底部弹出的动作栏也比较常见，这里使用了滑块和单选按钮。
Airbnb的筛选功能以浮层为载体，还使用比较少见的switch和stepper。
当然Airbnb筛选功能最大的亮点在于可以向用户即时反馈筛选结果的数目，用户不太可能会进入搜索结果为0的空页面，避免无效操作。
以上说的筛选体系都比较传统，大部分都是基于对现有结果进行筛选，其实我们可以对筛选功能进行前置。例如，我们可以在用户进行搜索之前就对结果进行筛选。
甚至在新用户第一次使用产品的时候，可以让用户填写一些个人信息以便进行个性化推送。
筛选功能的存在意义在于帮助用户对功能信息进行快速的定位，对筛选功能进行适度的前置可以简化用户的操作流程，同样可以达到节省用户时间的目的。
总结：
大家在日常使用APP过程中也可以带有目的性，发现一些好看的UI或是好的交互点可以截图保存和思考：为什么这么设计？目的是什么？分析其优势之处，还可以和竞品的相似交互进行对比，始终相信“不积跬步 无以至千里”，通过在点滴中慢慢积累，今后当你遇到类似的问题时就可以快速回忆起这些知识点，自然就可以运用自如，thanks~
在这里先给大家分享一组近期APP使用过程中发现的UI&交互知识点，大家可以一起学习交流，对于个人观点不认同的可以在下面留言探讨，thanks~
产品即场景，体验又贯穿整个产品~孰重孰轻早已分不清
产品即场景，而场景化核心要素之一的“体验”，是其中最重要的一项。
本文从体验出发，结合AARRR（用户增长）模型进行阐述，其中我认为该模型的使用必须是在产品搭建的场景下才能运作的。而其中涉及每一步的良好体验刚好又反哺场景的完善。
从获取-激活-留存-转化-传播每一个步骤中都存在内部因素和外部因素。本文只讲内部因素，产品从最开始的外部获客，转向产品内部的使用体验，再转向外部传播的这么一个过程。
文章不是教案，更不是真理。希望大家带着批判的眼光去看待每一篇文章。毕竟思辨精神才是形成独立思维的法宝。由于文章较长，我会分成上下两部分发布，进入正文：
获取（ACQUISITION）分为三个部分：
一：自然流量的获取
自然流量的获取，我们能干涉其中的体验非常少，只能打磨产品本身。但是自然流入的用户一定是基于以下几个点中的其中一个或多个。我们或许可以干涉体验前~
1.某个社会现象、热点所引发的相关功能性需求（例如前不久滴滴司机杀害空姐事件，引发多少芳龄少女的恐慌。提高了强烈的安全意识，这时候你会发现App Store里面一款app杀了出来“怕怕”（有兴趣的朋友自行下载体验），正是这个社会热点现象引发的自然流量暴增。当然也不排除产品借这个热点营销自己的产品）
2.某个痛点确确实实需要解决（当某类用户存在某个痛点时，会自己通过搜索或者同类产品对比选择一款产品进行使用，如果你的产品刚好能帮助使用者解决痛点，那么你成功吸引了用户。）
3.纯粹进行产品的体验（产品发烧友、同类竞品的体验人员、无意中下载的等）。我们称为无效流量，因为这部分用户一般是不太可能成为产品的忠实粉丝的。他没有明确的目的、没有明确要解决的痛点。
二：运营推广的获取
运营推广这个名词在互联网诞生之前就已经存在了。只是说原来传统的营销手段即产品-价格-渠道-促销开始逐渐失效。转而变为场景化的运营推广。将推广落实到具体的小场景中。
1.线上推广
其中线上推广包含线上营销活动（营销活动又分为已有话题进行营销【可以选择融入当前的热点话题类似节日、娱乐圈大事件等】&【提供话题痛点解决方案进行营销】和制造话题营销【创造业内的话题】【通过深度用户进行制造话题】、优惠活动（包括邀请好友得好礼、会员优惠、某个节日优惠等）。线上推广无非就是通过网络搭建虚拟场景，通过场景边界的不断延伸，覆盖吸引更多的用户参与进来。
2.线下推广
线下推广包含地推（地推不可避免的会带来2部分的人群：被地推活动中的奖品吸引的人；确实被产品的介绍所吸引的人）、海报&代言（同样会有2部分人群：被明星效应所吸引的人；被产品介绍所吸引的人）、门店的互相导流合作。线下推广效率远远没有线上推广来的快。但是对于需要线下场景的产品来说，这又是必不可少的。
三：社群自传播
通过单点击破，这就需要运营团队有很好的洞察能力，找到符合产品调性的社群，通过事件引爆该社群或者社区，让社群成为你产品的拥护者和传播者。
1.通过老带新的模式进行获取用户
当产品与老用户之间建立很好的纽带关系后，老用户自然会以个人为中心，向外帮你宣传产品。
2.引爆社群
通过各类社区，找到符合你产品的目标人群。通过对该社群的研究，运用社群内部语言或者表达，调动整个社群帮你发力。有点及面的扩散，称之为“气球理论（很细的一根针就能戳爆气球）”这同样是能引爆传播性特别重要的一点。
3.参与感（社会关系绑定）
当你周围的人都在转发或者都在使用的时候，如果你不了解或不使用的话，会引起个体的孤独感。也就是说“他们都在玩，我不玩就落伍了”，但是这种情况在产品推广的前期一般不太会出现。当传播势能达到一定程度的时候，才会出现刷爆朋友圈！
激活（ACTIVATION）分为二个部分：
当用户从外部导流进产品后，这时用户的去或留都跟产品&业务有关。如何让用户在进入产品后自然而然的进行使用也就是防呆原则。对，通过引导或者吸引使用者进行下一步操作。（打个比方，你去一家陌生的餐厅，进去后没任何人招呼你，没人告诉你要去选位置或者点菜，是不是有不知所措的感觉，我想你很快就会另寻他家吧）
一：进入产品后的操作引导
1.视觉引导（包括页面元素优先级、页面元素突出强弱进行视觉上的引导，很常见的就是：在你第一次使用某个产品时，会引导使用者进行第一步第二步的操作，降低用户对产品的陌生感）
2.动效引导（通过页面浮层的形式教育用户如何进行操作，这也是在产品设计中，对新用户的一种引导方式）说到底就是为了消除用户对新鲜事物的陌生感和手足无措感。
二：产品本身是否能激起用户的探索欲
当然这个问题本身是建立在是否能真正的帮助用户解决某些方面的痛点。否则再强的探索欲，也跟你产品本身没有关系。如何激起用户的探索欲？
1.产品整体视觉表现、使用流程的体验是不是够吸引人，是不是有属于产品本身吸引人的点。（当年的path效果，直接将它送上全民热潮之巅）
2.产品是否对使用者产生持续的吸引能力，产品前期只有不断的通过各种方式刺激用户。（产品体验优化、活动力度、宣传方式、让惠让利等）但需要注意的是：过度营销不等于有效刺激。
3.产品的任务流程设置是否合理，正常情况都是由简单到复杂的程度设置任务，由于用户的沉默成本，当完成一定任务后，就会沉淀下来慢慢成为产品的忠实用户。（摩拜产品是先让用户填写个人信息，最后才提示充值押金，站在使用者的角度来看，已经把个人信息都出卖给平台了，还在乎那200多块钱吗？不然你让他把流程倒过来试试，先充钱，再填信息。保证没多少人会用）。流程设置就像钩子一样，慢慢慢慢的把用户勾住。
上半部分先到这里，下半部分会从“留存”“转化”“传播”角度进行展开~
多数人能够成为很厉害的设计师，很厉害的产品经理。凡事都会有所谓的套路，当你熟知了解某个行业，或者多个行业的套路时。你会站在更高的视角看待问题，同样你会走的比人家更远更快。所谓的套路，是基于个人而言，可能你有个很好的导师能够告诉你以往的经验。但是我更认为，套路是通过一步步看似笨拙的努力不断总结不断归纳
峰终定律是由诺贝尔奖得主 DanielKahneman 提出的，百度百科上它是属于心理学上的定义。
我把它结合了自己的理解应用在设计学上可以解释为：
用户在使用某个硬件产品，软件产品或者服务系统来完成自己目标的过程中，用户情感地图曲线的波峰（体验最好）、波谷（体验最差）、结束点的体验，决定用户对整个过程的体验评价。
而在过程中体验好与不好体验的比重，好与不好体验的时间长短，对记忆几乎没有影响。
这一定律主要是阐述人对过去体验的记忆由两个因素决定，一个是「高峰」，一个是「结束」。
把用户情感地图曲线和峰终定律结合起来，简单画一张图：
既然用户整体体验与整个过程中好坏综合无关，只跟几个关键点有关，那么可以得到一个公式：
用户整体体验评价（E）=（y1-y2）+y3
y1，y2，y3 可以称为关键时刻 MOT（Moment Of Truth）
这两天和包子聊到宜家的峰终定律，突然明白了为什么我们有些课程调研，大家都喜欢去宜家调研了。
虽然它的店员很少，找货物也要自己找椅子搬下来，就算只买一件家具也需要逛完整个商场，但是每次逛完结束的时候都可以吃那个特别好吃的「一元冰淇淋」呀，这就是它的「终」。
而在逛的过程中，就像包子讲的，它的体验模式很棒，把产品作为空间的一部分。曾经有一位宜家的老顾客也说，宜家商品物有所值，展区实用，产品随意试用，大概这就是它的「峰」吧。
扔一个我的学习小伙伴包大佬的分析：
如果说峰终定律怎么影响互联网产品的用户体验的话，可以先举几个体验差的例子。
很多时候，用户在某个平台完成某个任务后，会出现很多引诱用户点击的赞助商的内容。比如问卷星，每次填完，任务结束的时候，它还会打着抽奖的名义接广告……
再举个例子，你有没有过在某些 app 注册账号，登录 or 注册很多次却失败的情况，或者花了很久时间才注册 or 登录成功？原因可能是账号密码错误，可能是注册流程过多跳出率过高，可能是填写信息冗杂……
如果这款产品不是用户刚需的话，最终会导致很多用户卸载它，就算你之后流程的体验再好，用户根本无法体验到最后。
一款好的产品不仅能够解决用户的「痛点」，也能刺激用户的「痒点」，更能打造用户的「爽点」。
有一些产品能在用户使用的过程中利用峰终定律打造 「爽点」，提升用户体验。
如果用外卖这个来举例子的话，应该算是一个大的服务系统，它会涉及到很多方，比如消费者，商家，骑手等，而这一整个服务系统的设计，只针对消费者而言，流程也会十分复杂，其中利用峰终定律考虑的就更多了。
那就其中用户（消费者）与饿了么 app 的交互流程来举例的话，用户点外卖这个任务：
从打开 app——选择店——选择美食——付款，用户的任务已经结束了，但是饿了么会在结束的时候，给用户一个分享领取红包的福利，用户会觉得自己获得了很大的优惠，体验会十分好，这也就是利用了峰终定律的「终」。
我发现游戏里面对峰终定律是用得最多的，曾经玩过 lol，王者荣耀，吃鸡手游……
如果问曾经玩 lol 或者王者最爽的时候是什么时候，那大概是：比赛过程中的 First blood，penta kill ，killing spree，legendary，you have slained an enermy 等这些配音和画面的视觉刺激吧。
按照常规的模式是，杀人后系统直接提示「您已经杀灭了一名敌人」，但是它会去强化这种杀人的体验，将杀人的场景分为多种类型，通过视觉上的弹框击杀提示与配音上的激励叠加，把杀人的体验不断深化，做到，另外在推塔和偷掉水晶的时候是不是也是最爽的时候呢？我觉得这里就利用了峰终定律的「峰」。
我记得在游戏结束的时候，比如 lol 里面推掉水晶的时候，游戏画面会停止几秒，然后再出现水晶慢慢破灭，加上大大的「胜利」二字，有的时候回到大厅还需要等几秒的时间。
王者荣耀，吃鸡这类在游戏结束的时候也会给用户很多激励，明明可以在结束后直接回到大厅，但它们会延长这些胜利或者失败的体验，如果胜利，当然是爽，还想再拥有这样的体验，继续打；如果是失败，那再接再厉，想拥有赢的体验，继续打……
总之就是会让用户上瘾。它们会把这些用户体验做到，在游戏结束的时候这些的体验就利用到了峰终定律的「终」。
「峰终定律」改善用户体验的步骤：
在《用户体验的要素》一本书中，Jesse James Garrett 将用户体验分为了五个层级，战略层，范围层，结构层，框架层，表现层。
其中在框架层里面有一个很重要的概念就是导航设计，作者对导航设计的定义是：元素的组合，允许用户在信息架构中穿行。
我觉得可以把导航设计理解为：我们从用户的心智模型出发，结合业务目标，对信息架构的一个梳理，来帮助用户完成目标。
通过自己手机里几十款 app，总结了以下六种导航设计模式，包括：标签导航，宫格导航，侧边导航，列表导航，菜单导航，轮播导航……
简单介绍了它们的优缺点，适用场景，以及一些衍生导航与相关案例……（不过导航设计一定是视产品和情况而定的，并没有确定的依据与理论）
标签导航分很多种，有底部标签导航，顶部标签导航，底部标签导航又可以衍生出舵式导航，顶部标签导航又可以分为静态或者是动态导航……
底部标签导航是最基本的导航，几乎绝大部分 app 中都在用，tabbar 位于页面最底部，一般3-5个 tabbar，有文字+icon，也有纯 icon 形式，但大部分是文字+icon 的形式，我想是减少用户记忆负担吧，如下：
而关于底部标签导航的优点，缺点以及适用场景也简单整理了：
我发现很多用户发布或者生产内容的 app 会将底部标签导航进行变体，很多人把它称为舵式导航，就像这种：
中间的「+」一般是发布的意思，并且是 app 里面使用最频繁的一个功能，一般都会重点突出。并且，该标签中很多时候会有二级导航，二级导航里可扩展性就比较强，如图：
而顶部标签导航顾名思义就是 tabbar 位于顶部，最早知道它是在 Material Design 里面，因为 Google Pixel 手机底部存在物理导航，所以将标签导航置于顶部不会显得突兀。它很少用作一级导航，一般是二级导航比较多，而且我发现顶部标签导航，几乎都是纯文字的形式，比如：
突然想到今天交互设计课上的时候，老师讲的人机交互里，重要的操作放在大拇指可触达的范围内。
而顶部标签导航，如果是点击标签进行操作的话，用户单手操作就十分不方便，所以我发现体验好的 app 的顶部操作导航都是可以直接通过左右滑动屏幕的交互来切换。
而当标签类目过多的时候，可以通过左滑展现更多标签，比如很多新闻阅读类的 app：
如果是可以滑动查看更多的话，一定要通过一些方式告诉用户可以滑动查看更多，比如最后一个标签隐藏一半的方式等：
关于顶部标签导航的优缺点以及适用场景，如下：
宫格导航，也是十分常见的导航形式，除了一些工具类 app 外，大部分是作为二级页面展示出来，并且以 icon+文字的形式居多。
如果将宫格的 icon 换成 picture 的形式的话，可以衍生出一种新的类似于卡片式导航的形式 ，可以通过垂直滑动来切换，比如：
那，如果宫格信息太多，我发现很多 app 会采用分类展示的形式，并且通过水平滑动的方式来切换，比如：
但是上面两种可以垂直或者水平滑动的形式，一定要让用户知道是可以水平或者垂直滑动的，采取的是边界地方信息只展示一半的形式，告诉用户可以继续滑动……
除此之外，宫格导航还可以在电商里面运用，在首页的运营内容块，它可以根据内容的重要性调整模块的大小，比如：
关于宫格导航的优缺点和适用场景，如下：
有些书里面会把侧边导航叫做抽屉导航，这类导航其实比较少了，原本也是从 Google Material Design 里面提取出来的概念，一般会在首页呈现一个主要功能，将其他不常用的功能收纳放到侧边导航里，比如：
而关于侧边导航的优缺点以及适用场景，如下：
列表导航也是十分常见，几乎在每一个 app 里面都会存在，大部分时候是作为二级导航存在，但是也会存在于一级导航的时候，比如邮箱，iOS系统自带的设置等。
一般在列表导航里都会有下一个层级，可以通过箭头来告诉用户是否有下级菜单。
当列表信息比较多的时候，可以对列表进行分类，可以添加小标题或者直接分隔开。比如：
而在有些列表导航里，我们还需要展示给用户一些预览信息，比如 iOS系统里的健康，个人信息里的一些基本数据展示，如下：
关于列表导航的优缺点以及适用场景，如下：
其实菜单导航也可以称为下拉导航。这也是今天上交互设计课的时候，老师以微信的「+」为例子介绍的一种导航形式。最初了解这种导航形式也是来源于 Material Design 里面的 Menu。
Menu 是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。
比如：
当信息层级变多的时候，菜单导航里要展示一层或者两层信息，比如大众点评采取的形式：
关于菜单导航的优缺点以及适用场景，如下：
还有一些导航比如轮播导航，完全的沉浸式体验，高度简洁的导航，比如天气，但是这种导航因为轮播点的大小不会很明显，所以用户很难快速感知自己所在位置，并且轮播导航轮播的数量也不宜过多 。
其实导航的类型应该还有很多，并且在一个 app 里面几乎不可能只使用一种导航，哪怕只是一个页面，也会存在多种导航的组合形式，比如：
描边插画：可以简单理解为众多线面结合图标组合在一起，互相呼应而组成一个大画面。画面中的元素除了面以外，还具有描边，因此也叫描边插画。
本文内容：文章会详解如何画一张描边插画，教程素材没有用我之前的插画来做步骤分解，而是新画了一张插画以作示范，绘画原理都一样，理解原理就好。除了具体步骤以外，会针对一些易犯错误的地方添加重点标记。
一点建议：看完文章后，可以按照我分享的方法来临摹一遍，但我更趋向于小伙伴们能够发挥自己的想象力，做一张属于自己的原创插画。画完后若有不清楚的地方，欢迎在我的公众号中添加微信并附带插画，可给予建议。
这次插画的主题源自于我的一个梦：在草地上，遗落的帆布鞋里面长满了鲜花，小鸟守在花的旁边歌唱。
确定主题后，把脑海里的画面画出来，可以画在纸上，也可以用数位板在 ps 里面画，按照个人习惯就好。我比较喜欢手绘，因此在纸上画。
新建画布1600*1200
视图-勾选对齐点
在描边插画中，常见的问题之一就是描边的粗细问题. 以及描边间关系的处理问题。
描边粗细问题（下图以之前的四季插画为例子）
描边间关系处理
描边设置
描边的粗细是根据画布大小而决定的，1600*1200的画布，我习惯用 8pt 的粗细的线条，但是如果画布是1200*900，8pt 则显得过粗。具体的粗细可以根据情况而调整。
布尔运算法
形状断点重连法
形状生成器
钢笔勾勒法
钢笔勾勒法顾名思义就是用钢笔直接描出物体的外形。在这个插画中，植物的形状比较随性，因此用钢笔直接勾勒比形状剪切要快。绘制的过程中，注意调整线条的平滑度. 弧度，使其规整。在此不作示范。
最近看到 kit8 大神的画，突然想到如果白线运用在线性插画会怎样，就尝试了这种风格。把线稿复制一层置于顶上，改成白色，2px 粗细的线，然后向旁边移动错位，破一下画面沉闷的感觉。
看到这里，你应该也发现了，画面是比较灰的，因为我都是选择低饱和度的颜色，如果需要调整，就在 AI 中把插画导出 SVG 格式。然后拖到 PS 里面进行色相饱和度的调整。
在颜色调整过程中，遇到喜欢的配色就保存下来，这样一张插画就完成了。
我们都知道一个版面中必定有版心的概念。何为版心呢？版心就是除去天头、地脚和左右页边距余下的区域，也是我们页面内容的摆放空间。下图中灰色块的区域就是此页面的版心。
知道了版心，那么何为版面率呢？版面率就是版心所占页面的比例，通俗一点讲就是版面的利用率。
上面左图中版心的面积非常大，四周的余白少，版面的利用率高，所以版面率就高。右图版心面积小，版面利用率比左图低，所以版面率就低一些。
版面中也有满版与空版的概念。如上图，满版就是没有天头地脚与左右页边距的，此时版心即整个版面，版面利用率为100%。空版就是版面利用率为0%的。从满版到空版之间的版面率是递减的关系。
说完版面率的概念我们再来说一说版面率对画面气质的影响。
一般来说版面率越高，视觉张力就越大，版面也会更活泼与热闹；反之，版面率越小，给人感觉就越典雅与宁静，版面也会更有格调。
上图中高版面率的海报相对于低版面率的更热闹与活泼；低版面率的则更典雅。
画册中也是一样的，上图是我早些年做的一个案例。同样的内容跟图片，只是版面的利用率不同，我们可以发现右边低版面率的作品更安静和典雅。
版面率的高低能够影响版面的气质，所以我们实际工作中也要根据项目的气质分配合适的版面率。比方说典雅气质的项目我们就要用低版面率版面，如果用高版面率显然是与项目本身的气质相悖的。
说完版面率我们再来说一下留白，留白的概念大家都懂。而这里所说的留白更多的是指页面的负空间。
页面中去除内容后的空间就是负空间，如下面这个页面。
图中灰色块代表图和文字信息等内容，除去这些图片和文字后，页面中的其他空间都可以看作是负空间，也就是留白。当然，留白并不一定是白色，所有除去页面内容后的空间都是负空间，如上图右侧案例，黑色部分即此页面的留白。
负空间的多少即是留白的多少。留白的多少我们可以用留白率来表示，如上图，负空间小的留白肯定少，留白率就低。负空间大的的留白肯定多，留白率就高。
留白率就是版面留白的多少，实际上与版面率的概念差不多，如下。
空版留白最多，满版留白最少。当然这也不是绝对的，有的作品中虽然是满版，但空间广阔，比如天空什么的，都可以当作留白来看待。
上面说来留白率跟版面率也有一定的关联，所以他们对画面气质的影响也是如出一辙的。我们可以先来看一下低留白率与高留白率的几个作品。
通过这几个作品我们可以看出留白少的信息更丰富，版面更有活力，也更热闹，亲和力也更强。而留白多的更雅致，更安静典雅，更有格调跟品质感，但亲和力稍弱。
下面进行案例演示吧，首先看一看文案。
这一步我们需要把文案的层级关系拉开，大中小区分的明显一点。这个文案的层级关系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是无尽的森林 ＞ 小文字信息的。
首先我们做一个有张力的版面，那么我们可以想一想什么样的版面是有张力的呢？
首先版面率要大，其次留白要小，让版面中的信息紧凑一点。
上图就是对版面的布局，可以看到图片是出血版的，没留天头与左右页边距。这样做的目的也是使版面率更大。
布局做好之后我们把图片与编排好的文字放置上去就可以了，如下。
上图可以看到留白比较少，符合留白率低的理论，虽然具备张力，但不是很明显。这种情况下我们可以改变一下底色使之感觉留白率更低，如下。
做完了留白少版面率高的，我们再来做一个典雅一点的。
根据本篇文章的内容思考一下什么典雅与安静的的排版版面率与留白率分别是什么样的？
一定是低版面率和较多留白的版面更能体现典雅与安静感。所以我们在版面安排上要使其留白更多，同时版面率要小一点。下图就是一个基本布局。
最后我们再根据版面布局置入图片微调一下就可以了，如下。
版面率跟留白率都能够影响版面的气质，我们做项目的时候具体问题具体分析，根据项目气质去设定版面率跟留白率的大小。
蓝蓝设计的小编 http://www.lanlanwork.com