移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--手机appUI设计--
简单地讲，分类就是按照种类、等级或性质分别归类。
某种事物无论是按什么分类，只要是属于同一种分类，就一定有一个共同的属性，而这个属性就是分类的依据。
假如手机是指“移动便携性的通讯设备”，那么小米手机、华为手机、苹果手机等，虽然系统不同、性能配置不同、外观设计不同，但是都可以归类到手机，因为它们都具备“移动便携性的通讯设备”这一共同属性。
再举个很简单的例子，苹果、梨子、芒果都可以划分为水果，因为他们具备“多汁且主要味觉为甜味和酸味，可食用”的属性（定义来自百度百科），这些属性是归属于这个分类的必要条件。基于这个分类，我们比较容易判断得出，生菜不是水果，因为虽然具备可食用性，但是不具备“多汁且主要味觉为甜味和酸味”。
分类可以把杂乱的事物变得规整，把凌乱的信息按照某些维度划分，使事物更加清晰。
前两年风风火火的垃圾分类，就是一个例子。生活中所有物品废弃后都可以成为垃圾，如果不进行垃圾分类，处理成本高且污染环境。而垃圾分类，就是将垃圾按一定规定或标准将垃圾分类储存、投放和搬运。
既然分类是按照某种方式进行组织，那我们需要明确了解，分类方式必须让用户易于理解。所以，分类本身是否合理，很大程度上取决于人们能否容易理解分类。
“简单的组织模式具有清晰的界限——是非分明。这样，用户才能明确知道到哪里去找自己想要的东西。因此，要多找一些用户，询问他们的分类标准。如果众口不一，或者根本就难以回答，你就有麻烦了。”
垃圾分类很火还有一个原因，因为用户经常不知道什么物品属于什么垃圾，这就对垃圾分类产生很大的阻力，网上一时间有了很多识别物品垃圾分类的产品功能。
我之前使用三星手机，每次想要在设置里面寻找某功能，都很让人烦躁，因为手机设置里定义的某功能的分类方式，与我们的认知并不一致，这就会造成寻找时及其低效的情况，同时也会引起强烈不满，这意味着，如果你忘了某事物的具体名称，而分类方式与心理模型所认知的分类方式不一致，你就极难找到。（不过三星很有意思的一点是，尽管在设置的分类项里找不到，但是往往能在设置项下方的推荐查找处找到相应功能，这就很魔幻。）
分类本身就是将混乱的事物进行归类，这带来一个很明显优点，就是便于用户查找，只要用户明确某事物属于哪一分类，便能相对轻松地找到。
比如我们想要寻找某款好用的修图软件，但是不知道具体名称，想要在应用商店的众多应用里，寻找某款应用，比较常用的方式就是搜索或者分类。
分类可以将应用按不同用途进行划分，比如视频、拍摄、工具、社交等。通过这些分类，可以很大程度上缩小我们的寻找范围，这就是分类的高效性。
分类还有隐藏属性，就是对比性。许多用户使用分类时，也会喜欢进行对比。
还是以修图软件为例子，你想要某款修图软件，于是你通过分类，找到了一批修图软件，而你本身并不知道什么软件好。分类将相同属性的软件聚合到一起，一定程度上可以帮助你基于某种维度进行对比，正好可以让你更轻松地对比哪款软件更适合你。
分类是否合理，还需要看分类本身是否足够全面。理论上，我们通过分类划分事物，则分类需要可以将这些食物完全囊括。如果分类本身无法囊括这些事物，就会造成用户寻找时的盲区，证明这种分类方式本身不合理。
假如用户去逛淘宝，想要找某物品，但是翻了很多分类，仍然找不到，这时大概率就不会再通过分类进行寻找了，而这种糟糕的体验，也会让用户对这个产品的分类变得很失望。
刚才说到，同一分类是围绕同一个属性的。但是，同一个事物，本身可以有很多种分类方式。而我们需要保证的是，事物在同一分类里的具有唯一性。
一首歌，如果按照语言体系维度进行划分，一般可以划分为华语、英语、日语等。还可以按照流派维度来划分，一般可以划分为电子、轻音乐、摇滚、说唱等。
我们对事物的认识方式是立体的，事物可以被按照不同维度进行不同分类也就不足为怪了。同一个事物，甚至同一个人，是可以有多种分类方式的。
说完分类的许多属性，我们聊聊在互联网产品中，用户会在什么场景下使用分类？我们又该如何设计分类功能？
首先，用户会在什么场景下使用分类？从产品层面，分类是便于人们查找某事物的一种方式，因为相对比较清晰、高效。
这里有个很关键的点，就是“查找”。也就是说，分类的使用场景，偏向于人们有相对明确的目的。用户的行为路径是有主动的查找需求。
互联网产品，查找某事物，最常见的方式是搜索，浏览，分类。而这几种方式都有不同点，分类侧重于“属性”区分。
大部分用户使用分类时，行为特点是相对主动的。此时用户未必有十分明确的目标，但大致知道想要什么。比如你想和朋友聚餐，不知道具体吃什么，这时候你打开了大众点评，你只知道要吃中餐，这时你可以在中餐的分类里去找适合你的店。
用户的目标如果十分清晰，则更适合直接搜索，因为这比起分类查找的路径更短也更高效。
总结一下，我们要设计分类功能，需要从用户的角度来观察分类这件事情。：
· 用户主要的行为模式：人找内容。
· 有目标但不够明确。
我们需要先了解分类的细分层级，分类的层级大部分不超过 4 层，但会因不同产品的定义不同而有所区别。
一般来说，第一层是颗粒度相对较大的，接下来会层层在上一层的基础上细化。
以京东的分类为例：
第一层：奢侈品，箱包，手机等；
第二层：手机包含：热门品牌、手机类型、运营商、手机配件；
第三层：热门品牌包含：苹果、华为、OPPO、VIVO、小米等；
第四层：苹果手机包含：iPhone 12、iPhone 11等；
最少的层级是两层，比如垃圾分类：
第一层：可回收垃圾、干垃圾、湿垃圾、有害垃圾；
第二层：具体的垃圾物品。
就体验层面而言，建议分类层级避免超过 3、4 层，尽管本身可能会提升细分度，便于用户查找。但由于分类方式本身必须与用户的理解相契合，如果太多层分类，用户需要思考目标内容在哪一分类。经过几层判断后，才能找到目标内容，这对于用户的理解成本是比较高的。
此外，太多层级不利于用户在不够熟悉分类方式时快速了解某分类下的具体事物。如果用户对分类的划分方式理解错误，就需要返回继续查找，效率低、使用门槛高。
当然也不能盲目追求尽可能短的分类层级。两个层级可能无法满足查找需求，因为内容量庞大，所以还需要更多的过滤，需要依据产品类型而定。
由于目前许多产品都发展到相对成熟的状态，所以设计分类功能时，一般不需要对分类方式再进行划分，主要原因是相同类型的产品，分类方式大同小异。用户的理解习惯上，对于某事物的分类也有基本的认知。现在设计分类功能，主要是对页面交互及视觉层级进行重新设计和调整。
我们会梳理常见的分类交互框架，从分类入口、页面布局等层面可以看到产品中分类功能的定位强弱。这里列举的分类形式，会根据产品的主功能进行阐述。比如电商类就是商品分类、旅游类就是地点分类等。
以京东 App 为例，京东把分类功能作为一个主要的页面模块。分类 tab 占据了 App 的第 2 个底部 tab。
使用京东的用户，购买的目的性相对较强，京东主打的就是自营正品和快递速度，商品与淘宝相比会少很多，但依然很全。用户习惯上，“逛”的属性没有淘宝那么强。首页以功能区+信息流为主，偏向于商品分发+逛信息流，而分类功能则主要满足相对明确目的用户需求。
京东分类页左侧为一级分类，右侧为二、三级分类。侧边导航将分类竖排的最大优点是能够充分利用屏幕空间，提升分类类型的展示效率。适用于分类类型多、分类层级多的场景。右侧页面信息灵活性较高，可以配置运营位，如放置运营 Banner ，且支持左右滑动 Banner 。下方一般放置二、三级分类。
右侧页面滑动时，顶部有辅助查找二、三级分类的导航分类标签，便于用户快速查找：
切换一级分类：这种框架切换分类的方式主要有两种：1、点击左侧导航栏进行切换；2、向上滑动右侧页面进行切换。用户习惯上，第 1 种方式会更高效，而第 2 种切换方式会更自然，更符合手势操作。
以【推荐分类】为例，右侧【常用分类、专场推荐、热门分类】都是归属于【推荐分类】的。为了便于用户更好区分页面分类层级，页面向上滑动时，通常会设计继续上拉切换的提示。目的是提醒用户，该部分已经滑动到底了，继续上滑会切换到下一部分，明确区分不同分类。
上滑的另外一种模式，以宜家为例，宜家聚焦于家居用品，分类类目没有大型电商 App 那么多。左侧是一级导航【灯具照明、装饰品等】，右侧分类标题与左侧导航一一对应，并且分类之间无明确的页面分隔区分，所以滑动时无需设计切换到下一部分的提示。
以上讲的，右侧页面均是二、三级分类入口，并不是具体的。分类层级或类型少的情况下，右侧可以尝试放置具体内容，比如华为应用市场的处理形式。
需要注意：
1、左侧导航占据了屏幕纵向的固定位置，从而缩减了页面宽度。
2、由于层级多，左右侧均是分类入口，用户无法在页面直接看到具体商品/内容。在电商产品上，用户容易区分不同分类类目下是什么商品。但可能在某些 App 上，用户未必清晰所要寻找的内容在哪一分类类目下，可能造成用户流失。
3、如果没有具体的内容呈现，对于内容、商品等分发效率也存在影响。
顶部导航型的优点是将多级分类与具体内容结合在一个页面，可通过点击或者滑动切换不同分类，将触达具体内容的路径尽可能减少，提升具体内容的曝光。
以掌阅 App 为例：最高层为一级分类，可滑动。第二层是二级分类，更精准分类挑选。第三层导航偏向于筛选。第四层为具体内容，用户无需通过页面跳转就能查看。这种设计特点很明显：内容曝光 > 分类效率。由于一级分类不多，可以通过左右滑动查看，避免浪费页面空间。二级分类类型多，采用折叠的形式将分类收起，点击可以展开更多二级分类。
显而易见的，多层分类在顶部排列，视觉效果并不佳。默认状态下，占用页面顶部的空间。这种结构，在设计时为了能够节省页面空间，二、三级导航会伴随用户向上滑动的手势折叠，提升内容的曝光效率。用户在滑动场景下，会更聚焦于页面具体内容而非导航，所以折叠的设计比较巧妙。
这种设计由于具体内容曝光的效率高，受到许多产品的青睐，适合于资讯类、内容类等产品。比如微博首页，微博侧重于内容的主动推荐，所以将分类弱化为一行导航栏，页面主体为具体内容推荐。用户浏览的内容有相对固定的倾向，比如会喜欢看综艺、社会、美妆等内容，并没有很强的寻找不同分类的诉求。
若用户想要设置常用的分类频道，可点击【+】展开，查看常用频道。由于频道比较多，而横滑 Tab 左右滑动的效率较低，所以微博选择了展示部分常用频道。如果用户想查看更多频道，还能在展开的页面里进行配置。这种设计为分类功能的设计带来了更多自定义性。
知乎的处理逻辑与微博一致：
淘宝的分类相比于一般电商类的产品，会比较特别，常见的电商类产品的分类模式和上面介绍的京东 App 比较相似。但淘宝已经往全面信息流化的方向发展，为了推动用户在淘宝中“逛街”，甚至连分类都已经往信息流化的方向发展。
淘宝的分类功能正在弱化，不像京东、苏宁占据着底部第 2 个 tab 的位置，而是在首屏功能区的最后一位。点击后，也不再是常规的侧边导航，而是强化商品外显。
淘宝分类页除了上方的一、二级分类，下方都是商品推荐，向上滑动就是瀑布流，增强商品而弱化分类效率。
如果用户想看其他分类，可以通过左右滑动切换。如果希望查看更多分类，需点开旁边的”更多“按钮，通过”更多“按钮进入的页面，侧重于高效展示分类。淘宝有信心这么做，一部分原因可能基于对算法推荐的信心，我发现不同手机看到的分类顺序并不一致。
以 B 站为例，B 站的分区页面的设计形式为展示番剧、国剧、放映等所有一级导航，而将细分层级隐藏到下一级页面。
这种设计方式适合一级分类类型很多，且重点在于高效呈现这些分类类型的场景。二级页面聚焦于具体的内容，可以避免将一、二级分类堆叠在一个页面，满足用户对查找分类的效率的要求，避免过载的信息量使页面变得复杂。但显而易见的，这种结构不利于用户在当前页面直接看到下一层级内容。
App store 整体逻辑与 B 站一致，区别在于排列方式为列表型排列。
vivo 应用商店也是聚焦型分类，但是会把二级分类呈现出来，与侧边导航型分类很相似，区别在于这里是整列表滑动。
前面讲到，分类是具有多种维度的。以“好好住”为例，有居室、面积、风格、预算、特色等维度。
上面“好好住”的几个维度之间，没有上下层级之分，均属于同一层级，所以层级是并列而非递进的，这种情况更适合采用筛选的处理形式。同样的，由于顶部筛选类型多，占据过多的页面空间，当页面上滑后，筛选可折叠以节省页面空间，同时更聚焦与具体内容。
设计分类功能，要先明确分类的维度，以及用户是否容易理解，避免造成与用户认知习惯相冲突从而影响功能使用的情况。
整体上，通过分类功能找目标内容的路径应该避免太长，因为这会影响到内容曝光效率及用户对分类之下的具体内容的感知。
分类本身是一种信息组织与呈现方式，设计时需要对产品信息本身有足够理解，才能有针对性地思考交互框架。分类功能的交互框架多样，每种都有优点和缺点，需要根据产品定位及诉求（优先展示分类，还是优先展示具体内容）采用适合的交互形式。
需要注意的是，有的产品的主功能甚至没有很明确的分类，比如淘票票，定位是买电影票，而人们看的电影具有很强的时效性，能不能看到电影几乎完全取决于电影何时上映，重点更侧重于向用户推荐最近的电影。
以上分析了分类功能、罗列了比较常见的分类功能设计形式，希望能帮助到各位。
文章来源：站酷 作者：热风_
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--手机appUI设计--
这一年，更多的是关于交互的思考。如果说界面是外表的话，那么交互就是其灵魂，只有交互合理的产品，才能够让用户更好的使用，而交互细节成熟的产品对体验上的提升则更巨大。写这篇的起源是平日在设计评审时或多或少会遇到以下的交互问题：
在思索如何能够尽量避免遗漏细节的过程中，发现状态可见性原则对于这些细节有比较重要的指导意义。这一原则想必大家都不陌生，但可能并没有引起大家的重视，且网上大部分文章对于此原则的解释都比较简短。因此在探索过程中产出了这篇比较详尽的关于状态可见性原则的深度解读。目录如下，重点已圈好～
大家可以根据上述目录来进行选择性阅读，当然全文阅读也是极好的～
我们在开头阐述了可能遇到的一些问题。而以上情况的出现，都源自于我们在设计时思考的不够全面，很多时候都忽略了某些情况下的设计，导致有些关键体验上的问题未被发现。我们可以看下微博和知乎在断网下点赞的例子。
可以看到，微博在断网下依然有点赞动作的反馈，且没有任何异常提示，这样会导致用户大多数以为此次操作是成功的。但知乎在断网情况下，点赞是不能生效的，且有消息提示“异常提醒”。这样的话其实就能够让用户明白此次操作没有成功。在这种场景下，微博的点赞就属于“不恰当的反馈”。而这些设计，都可以归因于状态可见性原则的范畴。
让我们先了解一下状态可见性原则的定义。这是尼尔森(Jakob Nielsen)-人机交互学博士，于1995年1月1日发表了「十大可用性原则」。而可用性原则位于十大可用性原则之首。
虽然只有这么一句话，但其中包含的意义比较重大。我们现在所使用的系统，都运用了状态可见性原则，如果没有，那么系统几乎会掉入不可用的现象。而系统在使用体验上的差异性，有很大一部分原因也在于可见性原则运用的好与坏。
我们来举一个生活中的例子来帮助大家理解。当你手机没电，你用充电器连接手机时，在连接的一瞬间（恰当时间），手机状态发生变化（恰当反馈）让你成功获取手机正在充电的信息（系统状态）。如果在某个环节出现问题，比如连接上手机2分钟后（不恰当时间），手机状态才发生变化。那么你肯定会认为哪里出现了问题。这就是状态可见性原则的基础运用。
那么我们如何能够深刻理解一个原则呢，最简单的做法就是将其拆分，并结合实例理解。下面通过原则拆解来进行深刻解读。
我们将拆解分为以下三个部分，下面的篇幅会更详尽地进行说明
时间在这里指的就是系统的响应时间，而合理则可以理解为时间的长短。这句话可以理解为从用户执行操作到反馈出现的间隔时间是否正常，是否有影响到用户的正常体验。
当我们在进行打字输入时，我们敲击键盘的同时，屏幕上就会出现对应的文字。而如果出现文字的反应时间过长，我们就会感觉到明显的卡顿，此时的响应时间就会变得“不合理”。
根据Robert B. Miller在他的研究《人机对话的响应时间》中以及其它相关资料，制作得出以下结论图
以上是人机交互响应时间的总览，接下来细节深化每个时间点对应的操作。
我们先看100ms以内的。我们平时使用的小组件动画，比如说按钮反馈，勾选反馈，以及其他需要瞬时反馈的操作，基本都是在100ms内完成的。
在看100ms-1s区间的，在这个期间进行的动画，用户能够很清晰的看见动画发生的过程，而又不显得迟钝。我们普通UI中应用的动画则大部分在100ms-500ms这个范围内。【为何在这个时间内呢，个人的理解是：对于发生在UI界面内的动画，100ms内的动画太快，人只能感受到开始和结束的状态，不能看见发生过程，因此一般大于100ms，而500ms是用户即时感知的最长时间，因此小于这个范围内的动画较为合理】
最后看下1s-10s这个区间的：在这个阶段，最有可能进行的就是相关页面的加载行为，或者某些小型文件的上传和预览。针对于这种情况，我们一般会在加载进行中，添加对应的加载效果，来缓解用户的焦虑和等待情绪。
最后则是10s以上的，一般用于大型文件的上传或者弱网环境的加载过久。
大约10秒钟后，用户的情绪将达到极限，内心将开始产生疑惑，超过10秒，用户往往会离开网站，而不是试图继续恢复他们一开始想要做的事情。
因此，我们在进行系统设计中，需要对超过这一时间内的行为，进行对应的反馈。比如加载超过10s的时候，我们是不是需要给用户提供离开的选项，或者提示用户重新加载这样一种行为。我们可以看下高德和美团在加载中的例子
我们可以看到，在到达10s后，美团自动给出了一个当前网络不可用的，请检查网络的提示，并终止了加载进程。而高德地图则是没有任何提示，自动结束了加载。相比之下，美团能够让用户明白为什么中断了该进程，也就拥有了更好的用户体验。
且对于一般情况下都超过10s以上的形式，我们无须让用户停在当前页面等待。比如微博或者抖音的视频上传，一般会消耗比较久的时间，因此当用户点击上传后，都只会留一个小地方来展示上传进度，用户随时可以做其他的事情，这样有效避免了用户长时间等待的问题。
以上则是常见的在合理时间内的表现，但目前也存在一些特殊场景：
比如时间延迟，图虫和微博会在用户停留几秒后增加评论区域的显示，根据用户停留时间，判断用户对当前内容感兴趣，以此来增加用户的互动。
类似的这种设计还有抖音的评论分享，当超过一定时间后，评论图标自动变为朋友圈图标。而在PC端，也有一个很典型的案例，不知道大家注意到没有，就是关于hover的延迟。我们在使用hover显示时，一般可能大家认为中的都是鼠标移动上去立刻显示，但在某些应用场景中，延迟300ms再进行hover显示，会更合理，举例如下：
大家可以看到上图，在你快速移动时，是不会显示下方的补充说明的。在停留大概300ms后，则会出现提示。其实这里对应了两种用户场景。第一种是快速移动的场景，有利于用户切换不同页签时不打扰用户；而在停留时，用户则是想要看更详细的信息。因此在这里使用hvoer延迟既能不打扰用户，也能满足用户的不同需求。
这里是之前做的一个案例，就是由于没有考虑到hover延迟，从而使得用户在快速移动时会让hover的信息产生干扰。
以上的内容都是针对于时间的详细解释。只有了解在对应的时间系统处于哪种状态，我们才能够满足状态可见性原则中“恰当的时间”这一原则。从而更好的对系统进行对应的交互设计，让用户在使用产品时获得优秀的体验。
按照目录接下来应该讲反馈了，但在反馈之前想先提及一下页面信息呈现。只有当用户理解当前页面所表达的信息后，才能够进行接下来的操作，从而得到对应的反馈。在这里主要提及两个点，一是核心信息，二是预期信息。
一个用户界面如果没有核心信息的呈现，那么给到用户的反馈是很弱的，用户第一眼都不知道从界面中能够获取什么内容。尤其是在移动端核心信息的呈现更为重要：
比如上述两个案例，在界面上只呈现了最重要的内容，移除了其他全部干扰内容，让用户更聚焦。当然平时接触到的不可能全部是这种页面，我们在页面信息呈现较多时，也需要进行重点信息的呈现。在这里放一个动态的案例让大家对比一下重点区分的形式
除了核心信息，还有预期信息的呈现，说白了其实就是元素的可交互性与不可交互性。当事情按照用户预计的方向运行时，用户会有强烈的控制感。在PC上，用户可以使用鼠标悬停来判断该元素是否可交互，但在移动设备上，用户只能通过点击来判断是否为交互元素。
这就要求我们在移动端设计时需要清晰地考虑到可交互元素与不可交互元素在外观上的区分。我们先来看一个关于微信的例子：
大家可以看一下微信的数字呈现，除了默认的黑色字体外，是不是还出现了一种浅蓝色字体。而你点击蓝色字体，则发现可以调出动作面板。而黑色字体则不会。
这就是利用颜色的区分来引导告知用户部分信息的可点击性。而目前关于移动端可交互元素如何设计，如何让评审时不再听到“你这个看着像不可点的”这句话。根据相关资料和过往项目，总结出以下几点：
首先根据目前人们的认知，基础控件类型的都是可以操作的，比如按钮，导航栏、底部标签栏等。下图为工作中做的一些基础控件：
抛开基础控件，剩余重点是文字类。文字类在不加任何提示的情况下，用户会默认为不可操作的对象。一般我们通过下列几种方式来体现其可操作性。
介绍了可交互性，那么再来讲一下不可交互性的元素。不可交互的部分有一个非常重要的点，就是应该需要让用户认识到该元素为什么是不可交互的，不对用户造成困扰。
不可交互的处理方式一般分为置灰和隐藏两种方式。我们首先来看看置灰无反馈类别的使用场景：
还会存在一种置灰有反馈类别的使用场景，而对于非按钮类状态的置灰，经过资料和相关调研，发现可以根据其使用场景来设置是否给出反馈，比如网易云音乐的音乐列表场景。
除开置灰的另一种场景就是隐藏，工具类应用对于隐藏这个操作使用得较多，比如我们平时使用得sketch和figma也基础应用了这一操作场景。
好了，说完了用户界面的相关内容，只有了解上述内容，让用户明白界面哪些是可交互，哪些不可交互。才能够让用户进入到下面的“恰当反馈“。
在这里我先讲手势操作，因为手势操作是前提，然后再讲反馈设计。
反馈的前置条件是操作，我们在加餐中已经告知了如何引导用户操作，但在移动端中可能还包含一些隐藏的手势操作，利用不同的手势可以达成不同的操作响应。我们来看一下这个案例：
这是即刻对同一个控件进行了两种手势的定义，但大部分用户可能对于第二种长按手势的功能其实是不知道的。这样的功能来说对于新手用户来说是处于不易发现的“彩蛋“功能。又比如下方的知乎双击点赞，以及最近微博更新的连续点击效果：
如果我在这里不进行事先说明，可能部分用户还不知道。但好在上述两种方式的设计前提是建立在不影响主功能使用的，用户依旧可以通过其他操作来完成。
说这些的是为了表明，我们在设计反馈时，要考虑到手势操作的用户认知程度，一些特殊的手势操作虽然能提高用户的操作效率，但用户如果都不能发现，何谈提高效率，更多的作为“隐藏彩蛋”功能出现。因此我们在产品设计中要尽量注意去使用常规手势而不是非常规手势。下列归纳了部分手势：
大部分情况下我们其实使用“点击”和“滑动”就可以完成大部分系统操作。如果我们需要加其他操作最好在用户第一次进入时加上引导。
当然，在某些情况下，我们是需要将常用的操作，转化为不常用的操作，来防止用户发生误操作，比如下方的keep在运动中停止的按钮，考虑到运动的场景，单纯的点击很容易被误触。因此keep对“结束”这一功能采用“长按+引导”的方式来防止用户误操作：
OK，接下来正式进入反馈这个环节。
反馈就是当用户对于系统进行相关的操作后，系统对应引起的一系列变化。反馈从类型上可以分为视觉反馈、听觉反馈和触觉反馈。
听觉反馈和触觉反馈在这里简单讲一下，一般在我们的设计中使用的比较少，听觉反馈目前用的最多的是语音助手和地图类工具在息屏时后的反馈，比如下方的高德地图反馈，能够让你在进行开车或骑行时，即使关掉屏幕，也能通过语音反馈知道此时正在导航中：
而震动反馈最开始是在苹果内的应用，包括你在知乎上进行点赞，appstore下载应用，都会进行对应的反馈，让你的感受“实体化”，提升使用体验。
而目前在其他app上，也逐渐开始了应用，比如大家熟知的微信“拍一拍”，在拍头像的同时会伴随着震动反馈；以及iMessage的反馈，它会在烟花绽放的那一刹那有震动反馈，给用户更真实和有趣的体验。
好了，最后来讲视觉反馈，视觉反馈是我们目前最常见的反馈，也是平日里接触最多的交互反馈。视觉反馈可以分为以下三种类型：
控件反馈举一个最常见的案例，就是我们按钮的状态变化，我们通常可以看到状态有以下几种变化：
大家对上述按钮的状态可能都比较熟悉，但在很多情况下可能会忽略一些其他控件的点击状态，比如我们看下方的一个例子：
这是点击“收藏”按钮时两个不同点，一个没有点击状态的感应，一个有。这其实也是之前我比较疑惑的一个点，从功能性上来讲，它并不影响后续的使用。但这种点击状态在官方文档上到底有没有明确说明呢，特意去查了下官方文档，在IOS中的设计原则中有这么一段描述（黑字加粗部分）
并且在IOS的原生应用中，基本都遵循这一原则：
虽然有这样一条原则说明，但并没有特别严苛的规定我们必须要这样做，因为即使没有这种反馈，也不会特别影响用户的整体操作，更多的是带来使用体验上的提升。因此大家可以在平日的使用中根据产品的设计阶段，特别是在优化体验的时候，可以考虑这一部分。接下来我们看一下页面反馈
当我们触发的可交互元素不涉及页面的跳转，那么此时的反馈多数用于当前页面本身的反馈。而一般是由alert、toast、action sheet等来构成的。我们需要利用这些控件来对用户的相关操作给出反馈，比如下面躺平和夸克的例子，当用户操作时有对应的后续反馈：
再来看一个有对比性的例子：
上图是QQ音乐和网易云音乐对于退出账号这一场景采用的不同控件，那么这两种控件哪种使用得更为合理。从用法上来说，两者都没有错误，但目前的移动端设计在这个场景逐渐倾向左侧的设计形式。因为从使用程度上来说，左侧的Action sheet 的级别会弱于右侧的Alert，对用户的打断程度会更弱，且Action sheet可以通过点击空白处来取消，而右侧的alert在移动端大部分都是模态的，只能通过操作来取消。
因此对于这两种需要根据使用场景来进行区分。一般来讲，Alert更适合用于对系统操作有一定风险或者很重要的操作【需要引起用户强烈注意】，Action sheet则相对于Alert更轻量化，对用户的打断较弱。
关于页面反馈这部分还有些控件有比较细致的区分。比如toast提示适用于更轻量化的场景反馈，因为全网弹窗相关的内容也有很多了，在这里不细讲。但大家在使用控件时需要注意下列IOS官网上的一个原则规定：
原则上尽量不去打断用户，给予轻量化的信息反馈，除非是某些需要引起特别注意的场景。关于这个的举例，我们可以看下京东和淘宝在加入购物车的例子：
淘宝是使用传统的toast来进行加入成功的反馈，而京东则是利用一个小动画来达到告知用户已加入成功的提示。相比之下京东的提示则更加有趣和轻量。因此我们除开传统的控件外，也可以利用动效来进行更为恰当的反馈。最后，我们来讲一下页面跳转反馈：
这可能是大部分设计师都一直忽略的问题。在我们的设计说明中，也一直很少涉及到页面跳转的单独说明。而开发一般会按系统默认的方式去设计。
那么在页面跳转中，一般涉及到以下几种方式，左右切换，上下切换以及联动性切换。很多设计师其实并没有太注意左右切换和上下切换的区别方式。那么在这里进行详细的说明下：
最常见的跳转就是左右切换。在大多数情况下，我们一般采用的是这类跳转方式。且该方式应用在大多数应用程序中：
这种方式也跟我们平时的视觉顺序有关，我们一般看事物都是从左到右的顺序来进行的。这种场景普遍存在于界面中，比如一般性的页面切换，功能进入等；接下来我们继续讲上下跳转：
根据资料总结上下跳转的场景应用有以下：
1.触发的新页面相对于当前页面是临时性的操作 (微信发红包，新添加群人员，新建笔记本，新建话题等)，一般用上下的跳转方式：
2.跳转前后的页面存在比较紧密的强关联性，想让两个页面的联系更紧密，可以采用这种方式。比如QQ音乐和网易云的歌曲列表和播放页之间就采用的这种方式。
大家观察一下，同样的上下跳转方式，为什么网易云的整体看上去更加自然柔和呢，除了运动节奏外，还因为在整体的运动过程中，网易云以唱片为联动点，将两个页面联系起来，从而更加地柔和，这也就是接下来要讲的第三个跳转方式：联动跳转。
这种跳转方式一般会以页面中的某个控件作为前后页面的承载点，从而让两个页面的联系非常紧凑，视觉上更加舒适美观，但同时开发难度也比较大，适用于比较固定的某些页面。除了我们熟悉的APP Store外，我们看下面两个案例：
联动页面的好处，就是能整体的页面衔接的更加柔和自然。我们也可以发现，在很多的概念设计中，用得最多的过渡动效也是这种联动设计，比如下方来自Sang Nguyen的概念设计
因为要想提升页面的整体柔顺效果，目前来看联动的方式是最为好的，但同时其实现难度也较大。
这是原则拆解的最后一个小部分，其实就是通过前面两部分的拆解，原则已经讲述得差不多了。而让用户了解，在我看来，就是我们给予用户的反馈能够让用户看懂。
首先看下这个案例：
大家可以看到文案一的整体表述，其实会让用户迷茫，到底哪个是撤回的操作，哪个是取消的操作。而文案二整体的文案和按钮都有非常清晰的指向，能够让用户清晰理解其意图，达到继续操作的目的。我们再看一下开头的知乎反馈的例子，其实设计上还可以更进一步：
通过文案二的进一步设计，能够让用户在知道操作异常的同时知其原因，帮助用户快速解决当前问题。其实文案这部分的内容，在个人看来，一是尽量少用专业术语或者含糊不清的词语来反馈给用户；二是在告知用户出错时，尽量附带简短的原因说明。这样用户更好地去理解想要表述的内容。
OK。写到最后，你会发现以上所讲的内容，其实都是在阐述一个原则——“状态可见性原则：系统应该在合理的时间内通过适当的反馈，始终让用户了解正在发生的事情。”相信大家现在已经知道什么是合理的时间，什么是恰当的反馈，以及如何让用户理解。通过这样的一个原则，我们能够更好地去考虑到交互上的细节呈现，例如一个可交互元素的不同状态，点击后的反馈等。其实原则整体与我们的很多知识相关联，这也是知识体系的一部分。
最近学到的关于知识体系的认知，就是你在学习一个新的知识的同时，能够把你的旧知识串联起来，这样你的整体知识才不会碎片化，而是体系化。通过这样的方式，你在透彻认知一个原则的同时，能够联想到各种关联场景，从而能够把整体的设计及交互做得更完善。
最后想说：经典的原则之所以经典，你会发现虽然它是很早之前提出来的，但具有时代超前性。在面对如今产品应用场景和形态都发生巨大变化的当下，它仍然适用。
文章来源：站酷 作者：进击的M
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配，本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。
1. 背景色
iOS 平台在深色模式下的背景色展示是动态的，分为基础、升起（例如，弹出框或半浮层）。如下图中 iOS 系统的两个界面，相同样式的组件在基础层与升起层显示的是不同的两组颜色。
从 iOS14 的色彩规范中可以发现随着界面高度的升起，系统定义的三级背景色也同步进行了一级上升。
iOS 通过这种背景色统一升级的处理方式来达到多任务窗口叠加的视觉隔离效果，但相对的开发成本也较高。
再来看看 Android 平台深色模式下不同层级间背景色的显示规律。
Android 把页面分为从“0dp”到“24dp”的 10 个不同高度的显示层级，通过在同一背景色上叠加不同透明度的白色来区分显示层级。相对于 iOS 的整体背景色升级，Android 的背景色分级逻辑则更加的简单易用。
2. 文字色
iOS 的规范中定义了 4 个等级的文字色，一级文字色为黑白纯色，二到四级文字色为色相偏蓝的半透明色，通过降低同一颜色的不透明度数值来进行分级。
Android 的文字色分为 3 个等级，与 iOS 的共同点是都用了半透明颜色，也都采用了降低不透明度的方式来进行分级。不同点是 Android 文字色使用的黑色与白色，没有添加色相。
使用带有透明度的字色能够避免相同字色与背景色相融的问题。以 Android 为例，三级文字色与 10 种背景色叠加后都具有较高的识别度。
iOS 则通过一套半透明字色可以适应基础与升起两种不同背景色的使用场景。
3. WCAG
iOS 人机界面准则和 Material design 在深色模式的建议中，都提到了文字信息需满足 WCAG 无障碍阅读的 AA 标准。
WCAG 全称为 Web 内容无障碍指南，其中包含分为可感知性、可操作性、可理解性、可兼容性四项原则的相关建议，这些建议可使网站内容更容易访问。WCAG 从高到低分别是 AAA、AA、A 三个等级。其中 AA 要求文字与背景对比度不小于 4.5:1。
感兴趣的朋友可以通过下面链接进行深入了解： https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
也可以通过下面的色彩对比计算器进行对比度检验（下图为翻译后展示）https://www.msfw.com/Services/ContrastRatioCalculator
这里我拿 iOS 在深色模式下的主次两级字色与基础、升起背景色做了一下对比度检验，得到的结果均满足 WCAG 无障碍阅读的 AA 标准。这里再给大家推荐一个可以同时对多个颜色进行对比度检验的网站 https://hexnaw.com
4. 彩色
iOS 人机界面准则的彩色方案中给出了 9 种颜色。如下图所示的深浅配色方案以 RGB 与 HSB 两种属性进行对比。
https://baike.baidu.com/item/HSB
图中左侧以 RGB 属性展示的各项参数差值较大，没有明显的规律性；右侧以 HSB 属性展示的各项参数差值较小，其中靛青与紫色 HS 数值相同，仅有 B 的数值有所差异，但整体来看依然没有一个完整的规律。
相较 iOS 系统彩色方案的单独订制，Android 系统的配色方案则是一整套渐变梯度由“50-900”的色彩库。
在 Android 的色彩工具中还可以自定义配色方案，在色板中选取一个主题色，对应梯度值为 500，通过一套算法来自动获取其他梯度的辅助色。
为了在深色主题中提供更大的灵活性和可用性，Android 官方建议在深色主题中使用较浅的色调（200-50），而不使用默认的主题颜色（饱和色调范围为 900-500）。
总结来看两大平台在深色模式的适配上都各有所长，在整体的视觉体验上 iOS 更加鲜亮突出，Android 则更加柔和舒适。
iOS 更加注重细节体验，在整体的色彩规范中的很多颜色都是单独定义的，这也印证了 iOS 13 发布后苹果官方向用户所表达的“屏幕上的每个元素都经过精心设计”这一理念。而 Android 的色彩规范中无论从背景色、文字色还是彩色都遵循着一个梯度规律。
深色模式改版设计的前期工作除了调研两大平台的指导规范外，我们还对已上线深色模式的竞品 app 进行了调研，调研的主要目标是背景色、文字色的色相与亮度展示效果。（以下截图时间为 2020 年 2 月份）
腾讯新闻，主背景无色相，次级背景无色相，一级文字无色相亮度较高，次级文字无色相亮度极低。文字与背景对比度高，主要信息比较突出。
网易新闻，主背景色相偏蓝，次级背景色相偏蓝，一级文字无色相亮度较高，次级文字无色相亮度极低。文字与背景对比度高，主要信息比较突出。
凤凰新闻，主背景无色相，次级背景无色相，一级文字无色相亮度偏低，次级文字无色相亮度极低。文字与背景对比度低，主要信息不够突出。
以 3 个 APP 首页来对比，可以明显的感觉到凤凰新闻首页的信息展示不够突出，在日间场景下体验极差。
深色模式并不是简单的把整个界面反色了那么简单，还是要考虑到所有用户的需求。凤凰新闻作为资讯类 app 用户在夜间使用的场景也有一定的占比。深色模式的改版不仅要在日间满足使用需求，还要保证夜间的视觉刺激相对柔和。所以，在设计配色方案时就不能使用对比度极高的纯黑色背景与纯白色文字，只能在各种灰色中搭配出最优方案。
经过多稿背景色与文字色的搭配尝试后，最终确定了下图中所框选的配色方案。这个方案整体背景色与二三四级文字色在色相上略微偏蓝，相较于无色相背景更具有活力，在视觉体验上信息层级的区分也更加明确。
在各种方案尝试设计的过程中对颜色的色相、饱和度、亮度的选取都是随机的，目的是在短时间内进行快速试错来确定配色方向。
本次改版的目标中还需要重新构建色彩规范，所以还需要对这稿配色的选用进行细致的打磨，在色彩对应的 HSB 参数中进行细微的调整使整套配色方案有律可循。
最终方案在四级背景的色相与饱和度方面进行了统一，对亮度的递增梯度统一为 5。对比初选方案在视觉上变动也很微弱，却使色彩分级规律一目了然。那么依照此方式也可以对文字色与彩色也进行了一轮打磨。
对于文字色在深色模式优化调整的基础上也对浅色模式下的文字色进行了调整，使深浅模式下两套字色更具有规律性。
在文字色的使用上凤凰新闻没有参照两大平台规则使用带透明度的颜色，主要原因是从自身实际出发，考虑到端内的文字色使用场景部分是用于半透明背景色上的，如果文字色与背景色均带有透明度，叠加后的体验会很差。
凤凰新闻的功能图标以线性为主，通常搭配文字一起使用，所以对图标颜色的定义与文字色是保持一致的。
在彩色的规范梳理中浅色模式下保持不变，仅对深色模式下颜色的亮度进行了调整，使深浅色模式下颜色的亮度对比有了统一的规则。
当然我们还需要对新的背景色与一二级文字色进行检验，看看是否满足 WCAG 无障碍阅读的 AA 标准，也就是常规尺寸文本对比度高于 4.5 : 1。
下图就是凤凰新闻客户端的新版色彩规范，在规范中除了上述的主要的通用颜色外也有部分是单独定义的颜色，这些颜色多用于独立或特定的场景下。
在完成色彩规范的重构后，重新输出界面样稿与旧版进行对比。
通过设计稿对比老版夜间模式与新版深色模式，能够直观的感受到新版在信息浏览上体验更好。
1. 色值替换
在着手进行色值替换时，iOS 开发小哥反馈给我凤凰新闻全端跟色值有关的代码有 2000+条，如下图中是日夜间对应的这条代码样式。
如此多的色值代码多数是相同色值在不同场景中重复使用，但彼此却又完全无关联，还有很多是日积月累的旧色值未被删除。如逐条替换费时费力效率极低，后期的维护也极其麻烦。
为了提高适配效率以及便于后期维护，使得之后的色值替换可以达到全局响应的目的。由设计师与开发人员共同建立一个色值对照表。
此表中设计命名主要基于色彩规范，用于设计师团队间的沟通协作。工程命名由开发人员提供，主要用于设计师与开发人员的在设计走查中进行高效的沟通协作。
以凤凰新闻 iOS 端为例，优化后的色值代码库如下图，由原来的 2000 多条色值代码变成了 30 多条色值代码「宏」。
在 iOS 开发工具 Xcode 的可视化文件夹中看起来就更加直观了。
之后的色值使用开发人员只需要调用代码库中相应的「宏」即可，后续版本迭代中如有对通用色值的调整只需修改相应的「宏」代码即可完成全端替换。
以这种方式快速完成首轮色值替换后很多页面的色值会出现错误，需要 UI 设计师持续的进行走查反馈，再由开发人员根据反馈进行修改校正。
以 iOS 端为例在深色模式色值走查过程中设计师分批次以 PDF 格式反馈给开发人员的，开发人员在修改反馈问题的同时设计师也在进行下一批问题的整理，这样同步进行的效率会更高。
2. 切图替换
切图替换场景相对比较多，同样延用色值走查的协作方式，设计师分批修改开发同步进行替换。开发小哥提供切图的方式就是直接扔过来一个全端切图包，需要设计师修改切图颜色后以原命名重新发回去。当打开切图包后顿感一阵头大，切图总数有近千张之多。
虽然切图很多但其中有一部分是已经无用的老切图，在替换的过程中也对端内切图重新进行了一轮梳理，删除了很多无用和重复的切图，同时也对凤凰新闻 app 的体积进行了瘦身。
在切图的替换过程中比较费时的是对同一切图存在多张的情况进行整理，梳理出该切图的所有使用场景然后反馈给开发人员进行统一调用，之后如再次修改即可完成全局替换。
除 icon 外还需要对默认图与缺省图进行替换。
3. 特殊适配
凤凰新闻客户端需要进行特殊适配的场景主要是图集与小视频界面，这两个界面仅有一套色值与 icon，界面中的元素需要单独处理，在切换深色模式后避免出现错误。
4. 界面展示
Dark Mode 适配是一项费时费力的巨大工程，也是探索和优化用户体验的全新挑战。本文主要描述了凤凰新闻 APP 在 Dark Mode 适配中的一整套心路历程，从规范、设计以及实现的角度对整个项目进行复盘总结。
文章来源：优设 作者：凤凰网设计中心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
优惠券是我们电商中最常见的活跃用户的一种方式，简单的设计就能带来巨大的客流量。虽然小小的一张优惠券并不会占用太多的版面，也不会浪费太多的色彩去装饰，但想要知道优惠券的种类、特点，还需要我们认真剖析，仔细揣摩。
今天就和大家分享一下关于优惠券设计的那些事儿～
通常在活动、促销、甩卖等场景中，我们最常用到的手段无疑是优惠券了，为什么被众多设计师和商家所喜爱，也是源于它的这几大优点。
1. 提升用户活跃度：
人们总是对 “降价”、“打折” 这样的字眼充满了兴趣，用户也习惯于在了解到商品的价格及优惠力度后再决定购买，所以有优惠的商品才更具有吸引力。
2. 增加产品曝光量：
用户一券在手，总是让人忍不住翻看可以使用的商品，这无形中增加了平台商品的曝光量。同时好的优惠券会在用户的口口相传中得到推广，这对平台、商家和产品来说，都是一个很好的展现自己口碑的机会。
3. 刺激用户的潜在购买需求：
当用户的购买行为背后没有充分的购买动机，交易就会轻易的受到其他因素的影响而中断。优惠券的出现满足了用户 “赚到” 的心理，用户就愿意为潜在的购物需求买单。
4. 提升用户的购买力：
用户的购买力和收入水平成正比，和商品价格呈反比，当价格受到优惠时，用户的购买力也可以得到相应改善。
体验券
一般针对新品或测试产品向用户免费发放的体验券，意在吸引用户的关注，倾听用户的意见，有时体验券也会以邀请码的形式出现。
△ 体验券（图片来源：京东智联云官网）
代金券（又称现金券）
一般使用门槛较低，不会有金额、数量等方面的要求，可以直接使用，若购买商品不够券面金额，通常情况下是不退还差额的，如：新人大礼包、无门槛红包和员工福利等。
满减券
通常会有订购数量、订单总价、产品种类等方面的要求，满足条件的订单才可享受满减，如：生活缴费商品满 ¥100 减 ¥2 优惠券。
打折券
打折券是直接对商品进行打折，一般商品较贵，购买的用户较少，或者用户订购量大会采用此类型优惠券，如：8.8 折优惠券等。
单品券为购买单一商品时使用的优惠券；
系列产品券为购买某种特定系列产品时所使用的优惠券，用户只需要购买指定系列的产品就可以享用这张优惠券，如：购买无线宝 WiFi5 系列产品优惠券等；
品类券为购买某一类商品时使用的优惠券，如：购买清洁类、医药类、生鲜类等优惠券；
品牌券为购买某一品牌商品时使用的优惠券，如：购买华为、京东云等品牌产品所用的优惠券。
店铺优惠券则是店铺自行发放的，如：关注有礼、抽奖、新老顾客回馈等；
平台优惠券是由平台直接发放给用户的优惠券，针对的目标群体范围较广，如：购物津贴、百亿补贴等；
政企消费券成本由政府、企业和平台共同承担，意在提升某些地区消费者的消费能力和消费水平，如：北京消费券等。
说到拉新，我们总会遇到一些一点诚意都没有的优惠券，例如：劳斯莱斯 “5 元代金券”。实际上这也是一种吸引用户关注的方法，成为了人们口口相传的调侃。
下面是 “京东智联云官网活动” 拉新引流的新人礼包，我们可以看到 “新人千元大礼包” 字样，新用户在完成注册任务之后就可以领取相应优惠券。
通常情况下，我们使用 “代金券” 进行拉新。代金券的价值相当于同等金额的现金，购物时直接使用，一般不会有过于苛刻的门槛，用户使用起来方便，所以对新用户的吸引力极大。在设计时我们需要注意以下几点：
设计目标 – 吸引新用户；刺激用户的购买需求；使其真正成为我们的用户。
任务模块 – 除了优惠券本身外，设计时还应该注意各任务模块的衔接与规划，如：用户登录、注册、用户的信息填写等。
门槛值设定 – 门槛值设置较小的优惠券才具有较强的吸引力。对于新用户来说，用户不需要购买太多商品，也不用局限于某个商品的使用。对于设计师而言，需要考虑门槛值和商品成本之间的关系。
面额设定 – 优惠券面额的设定可以很好的反应我们吸引消费者所付出的成本，控制获客成本也是拉新过程中的重要环节，设计师应该清楚了解用户喜好，剖析哪种互动方式可以在降低成本的同时扩大优惠券和商品的吸引力。
时间设定 – 这里可以强调优惠券使用时间的展示，方便用户在有效期内即时使用，避免浪费。
当然，每一种优惠券都有 “促活” 的属性，不管是优惠还是打折无不吸引着消费者的注意。例如：每年的 “京东 618” 和 “京东智联云 11.11 大促（下图）” 都是采用了各种优惠券来吸引用户完成交易的。
促活一般是电商发展的关键时期，设计上会呈现出：短期内让利、时间短促、宣传、优惠券种类不限等特点。
小结：
其实优惠券的作用还有很多，它还可以解决用户存留等问题。由于篇幅有限这里就不过多展开，期待小伙伴们一起思考和挖掘。
收益预估：设计前预先判断本次活动的成交量，计算每单的收益大小以及总收益。
使用范围：根据活动的目的，确定使用范围（ “平台”、“品类”、“品牌”、“店铺” 等）。
使用门槛：每种优惠券都有相应的使用门槛，这是保证商家不会亏损的重要环节。
领取上限：设置领取上限，一方面根据商品库存的多少，尽可能照顾到更多有需要的用户；另一方面也可以表明优惠并不是那么轻易就会得到，增加优惠券的吸引力。
使用有效期：如果优惠券的使用期过长或没有有效期，那就和降价没有什么区别了。
通常活动结束后设计师要对本次设计进行复查，通过调研判断优惠券对用户的吸引力。一方面从定量的维度考量，我们要对用户的浏览量、领取量、使用率、实际下单量和用户参与程度进行观测；另一方面从定性的维度分析用户的实际感受，用户在体验完成后是否愿意再次光临或推荐给亲友，也是我们需要考查的方面。
文章来源：优设 作者：JellyDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
