移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
01 本期讲什么？
工作中我们经常会接到一些信息卡片的设计需求，在早期很长一段时间里都困扰着我。和大多数刚入门的小白一样，当接触到这类需求的时候，下意识就是打开自己的的Eagle，找合适的参考，去借鉴排版布局。但是其实最后只知道参考这样做好看，对于作者的设计思路并不清楚。后面我尝试去总结其中的规律，也得出了自己的一些设计思路。
让我们先看下各类App中，一些比较不错的信息卡片长什么样：
图片
图标
文字
标签
按钮
布局
图片理解很简单，就是该卡片想表达的信息主体，可以是商品、风景、插画等，PGC内容图片通常由运营把控，UGC内容为用户自行上传。虽然上线后实际上传的图片，对于设计来说没有太多关系，但在设计稿中还是需要严格控制图片质量。（一定程度上也能提高过稿率）
图片挑选需要注意如下：
高清无码
主体突出且简洁
配图与文字信息相关联
多图片情况下，视线保持同一水平线或同一角度
图标的出现有以下几类：品牌特定logo、特殊字段图形化（如性别、定位、点赞、VIP、关闭等等，将字段图形化后可以减少该组件内的文本信息，方便设计排版的同时提升整体阅读体验）、氛围点缀（主要在于丰富卡片，提升设计感来吸引用户注意）
图标设计需要注意如下：
清晰度：品牌图标避免过小，导致难以分辨。
识别度：字段图形化后一定需要确保拥有足够的识别度，尽量在大众认知范围内。比如“+”可以代表添加和关注、“x”代表关闭，“大拇指”和“爱心”代表点赞、“皇冠”代表VIP等等。
风格一致：氛围点缀图标在配色上，需要保证与产品调性一致，或在色彩情绪上，与该模块传递的感受一致。还有一些细节，比如线性图标描边粗细，圆头还是方头端点，这类尽量保持一致（当然也可根据情况演变新的风格，但注意风格种类不宜过多）
文字信息处理需要注意如下：
对比：需明确页面信息权重，突出重点，便于有效传递信息。移动端常见对比方式：特殊字体对比、字号差对比、色彩对比、修饰元素（点线面）点缀对比。重点需要注意，避免在一个卡片中，采用过多不同大小字号和颜色去表现信息层级，尽量使层级精简与规范。
对齐：保证卡片内信息之间存在某种视觉联系，信息结构清晰。对齐方式分类：左对齐（符合左到右的阅读习惯，阅读体验最佳）、右对齐（阅读类文本比较少见，一般是为了将分好组的信息填充卡片四角）、居中对齐（居中传递严肃、正式感，在移动端中较少见，适合信息较少的情况下使用）
亲密性：将信息通过留白、分割线、色块等方式来成组划分，避免信息散乱。
标签处理需要注意如下：
视觉层级：一个卡片内可能出现不同类型的标签，比如同时有活动通知、优惠信息、产品关键词，这个时候就需要了解各类信息重要层级，正确选择标签形式（异型、色块、描边），帮助用户快速抓住产品重点。
极限场景：标签内字段不宜过长，需要考虑最大宽度，进行合理布局。（牵扯到屏效比）
呼吸感：合理定义标签内部文字与底板的上下左右间距，避免拥挤。
设计感：标签多数是带有活动属性，在设计手法上可以尝试破型设计，还可以尝试加入一些小图标、纹理，一方面营造活动氛围，提升产品品质感。一方面图标具有一定语义，可辅助用户识别。（适合单个特殊标签添加，而不是一类标签，因为多个一样的标签配上图标同时展示太乱）
对比度：在色块标签中需要重点注意，通常色块标签又分以下3类：有彩色底板+白色文字、带不透明度的有色彩底板+有彩色文字、消色底板+消色文字，在挑选颜色时需注意文字与底板对比足够清晰，减少阅读障碍。
按钮和标签在处理上很相似，可参照标签。
信息布局需要注意如下：
拓展性：卡片中字段的长短对布局的影响较大，字段较长且多的情况下需要的占用的空间更多，所以常见是上下布局。
屏效比：上述拓展性与屏效比的关联紧密，在卡片中，为了保证一行文字最大显示，通常文字都是单独一行，避免左右存在元素占用文字横向空间。但单独一行就意味着增加了卡片高度，虽然单个卡片内文字显示多了，但整个一屏中展示内容变少。为了便于理解上面这段话，这里我们可以看到淘宝这个案例，淘宝的推荐卡片中信息很多，在遇到文案很长的情况下，为了平衡上面讲的这个问题，使用到了如下较少见的布局方式。
合理性：在列表式左右布局中，是选择左文右图，还是左图右文。这需要看产品类型，在新闻资讯类产品中常见是左文右图，而在美食、电商类产品中是左图右文。再有在信息布局上也应符合人眼左到右，上到下的阅读习惯。
明确产品类型
明确应用场景
了解目标用户
划分信息权重
同类信息归组
增强信息对比
设计细节表现
确定最终布局
1【 明确产品类型 】
产品类型不同主要对布局产生影响。
以文字为主的产品，比如前面讲到的新闻资讯类，通常采用左文右图的布局。
原因：新闻资讯类，吸引用户产生点击的并不是因为图片，而是具体的标题，通过标题用户才能了解更多关于该卡片的信息。而美食、电商类产品则相反，这类产品图片比文字更吸引人。
2【 明确应用场景 】
卡片式：在卡片式中图片是设计的重中之重。这是因为人是视觉动物，在卡片式设计中使用高质量的图片能瞬间抓住用户的眼球。卡片式设计实现了图文的完美结合，能给用户呈现良好的视觉效果。
应用场景：
图片为主，需要利用图片给用户带来良好的视觉冲击，提升浏览过程中的趣味性，从而吸引用户长时间浏览。
适合随机推荐的内容，不适合进行查找。
丰富内容展示，适合元素较多情况，可以让各种形式的元素保持井然有序。
列表式：信息集合一般是简单的图文组合（小图+标题）或纯文本信息。由于列表垂直排列每一行内容，相对卡片式，在同样大的屏幕中可以展示更多内容，可供用户阅读信息更多，新闻类和数据类应用更青睞于这种设计。
信息直白，用户无需点击查看，即能尽可能了解内容信息，适合快速查找。
文本重要程度高于图片，需要靠标题吸引用户点击。
小屏幕应用场景。
目标受众的属性，对信息权重的划分影响很大，比如对价格敏感的用户，优惠信息的视觉层级就需要抬高。为了便于理解下面的案例，这里我定义的就是对价格敏感性用户。
4【 划分信息层级 】
定义了目标用户后，将卡片内所有元素罗列出来，并借助四象限分析的方法，对各个元素的权重进行划分。
5【 同类信息分组 】
将同类信息分组，便于后面确定元素之间的亲密性关系。
6【 增强信息对比 】
前面我们借助四象限，将信息重要程度进行了划分。接下来对元素之间亲密性和对比进行处理，设计用户浏览视线，在该过程中对案例中的元素进行如下处理：
图片：这里图片及比例保持不变
图标：将原版会员图标+字段的方式更改为图标，原因有两个：1、会员图标+字段的方式占用了较多的横向空间，导致标题字段信息展示减少，同时还导致用户在阅读完标题后，阅读下一行内容时视觉错行严重（会员图标+字段过长导致）。2、由于会员图标代表会员内容，这是绝大对数产品对用户有过的教育，所以这里重设了会员图标并单独展示。
字体：对标题字体进行加粗，（16pt，Medium），价格字体加大加粗（24pt，Medium），划线价加粗（12pt，Medium），按钮文字&活动标签文字（14pt，Medium）精简其他辅助信息层级（12pt，Regular）
标签：优惠信息标签由0.5pt改为1pt，提升视觉层级。活动标签为色块降低不透明度+有彩色文字。
按钮：由于标签为描边样式，为了拉开差异，突出按钮，所以将按钮改为实心色块。
做完上面这些后，可能大部分人觉得到这就可以了，但其实我们还可以再增加设计细节，这也是你与其他设计师拉开差距的地方。
7【 设计细节表现 】
由于案例不同，增加细节的方式不同，所以需要具体案例具体分析。在本次案例中，我通过新增图标设计以达到丰富卡片细节的作用。在活动标签中新增小喇叭图标，来增强活动氛围、增强信息视觉上的互动性、增强代入感。在按钮中新增时钟图标，配合预约文案，让用户预知操作后可能的结果，并且提升按钮视觉层级、提升点击欲望。
8【 确定最终布局 】
在布局中主要考虑两个点：
1、合理性&拓展性
由于该卡片的应用场景为推荐列表，所以这里保持原有的上下布局，遵从人眼阅读习惯。
2、屏效比
借助这个方式，使图文内容过渡顺畅，阅读体验更佳。
尽可能减少了标签对产品图的遮挡。
压缩卡片高度，最终达到提升屏效的目的。
Q1: 3张设计稿中活动标签为什么进行修改？
答：稿1到稿2，活动标签样式修改，位置调整，对应不同的用户，对于价格敏感性用户，显然稿2更能刺激他们点击。稿2到稿3，对标签样式再次进行加强。稿3到稿4，考虑该应用场景是在推荐列表中，为了避免出现多个同类型活动的卡片，导致过乱，所以修改了设计样式。
Q2:在稿3到稿4中优惠标签这一排内容，和预约按钮这一排内容，上下调整的原因是什么？
答：1、将文字区域看做一块完整的矩形区域，稿3整体看起来更完整，而稿2像是右下缺了一个角。2、在信息阅读顺序设计上，稿3的处理是优先让用户看到优惠相关信息，更加迎合价格敏感性用户的需求。
Q3:你认为最终稿还有优化空间吗？
答：这个案例，是我截图与我司相关App的。我认为如果可以，还需要再了解目标用户画像，了解用户真正在意的信息是那些，这些都会对最终方案产生影响，也只有知道这些才能得出最合适的哪个方案。这里我定义的是对价格敏感的用户，基于这类用户来说，我认为最终方案是合适的。
文章来源：站酷 作者：幺零三
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近，微信的升级迭代又一次吸引了用户的目光。苹果用户“扔炸弹、放烟花”玩得不亦乐乎，安卓用户只能默默在一旁等更新。但是也有用户吐槽，每次更新都上线一些不痛不痒的功能，真正的需求并没有被满足。微信走过了十年，伴随它的争议只增不减。
互联网冲浪三件套：苹果发布会、特斯拉降价、微信版本更新。
微信8.0上线，满屏的炸弹表情炸了，微信聊天也炸了，还挂上了微博热搜。身边的朋友开启了微信大检查，在新版微信里探险，就为了找到更新的几个功能，督促张小龙微信公开课到底交出了多少作业。
历代微信大版本更新，从来不缺关注。
跳一跳上线时热情烧了一个月，几个表情包上线还有人专门发个朋友圈。微信7.0当年的开屏动画“因你看见，所以存在”，8个字的解读被抬到哲学高度、人文主义，还有张小龙也没想到的主义，这次微信8.0开屏动画一样不缺解读。对于视频号、下拉菜单等功能介绍，也有媒体一本老不正经地整整一篇上手说明书。
放眼国内，大概从来没有一个APP能够享受这样的国民级待遇，网友也越来越懂微信版本更新的节奏：隐秘之中带着复杂，复杂之中带着试探。
谁叫它是超10亿用户的国民级APP。
张小龙说过，每天有1亿人在教他做微信。
这次微信版本更新同样不是凯旋。在很多网友在炸弹、礼花中乐此不疲，提前感受过年，另一边则是质疑和反感。有网友就明显不为“动态表情”、“状态”等新功能买单。以“炸弹”表情为例，在捕捉网友情感表达更强烈这点上，微信反射弧太长了，网友们的表情包已经领先好几年。
即使不说与苹果的iMessage的表情似曾相识，单单就高度撞脸QQ表情就让人疑惑：QQ什么时候和微信合并了？在这些网友心中，表情是微信简洁轻快风格的外皮，表情风格大改意味着微信沦陷。更多用户则吐槽，微信为什么专门更新这些不痛不痒的更新，超200M文件传输限制、朋友圈评论隐私等功能就视而不见？
尽管微信十年之际，微信官方和一些媒体都依然定调：克制，但在网友心中，微信则从“安静的美男子”变得“油腻”。
不可否认，微信越来越臃肿了，像个300斤的胖子。朋友圈、小程序、视频号……这些功能先后上线，微信用户的好感逐渐下线。早在2014年微信挥起分享限制大棒、功能臃肿开始冒头时，就有用户尝试逃离微信，选择Line等社交工具，然而由于社交关系链难以同步迁移，最终不了了之。
“天下苦微信久矣”，但网友们更苦于没有找到合适的替代品，只能一直将就着用着，不少网友拒绝更新，甚至吹起了怀念老版本微信的风潮，探讨回到微信旧版本已经成了一个大类。
对此，微信官方也不是不知道，2015年、2019年就先后强制网友更新版本，否则无法正常使用，其中2019年安卓手机上强制更新的还是微信7.0这样的大版本，手法上还是从前3Q大战里的那个少年。
除了自家兄弟QQ外，微信已经成为国内社交软件的唯一，为何还要顶着被骂，不断添加功能以及被网友视为无关紧要的更新？
其首要目的在于，防御其他社交平台的进攻，稳住流量大本营。社交是腾讯的命，而微信的王座并不是铁铸的。
一方面，00后横空出世，独特的社交习惯已经让马化腾陷入深深的担忧。为了吸引这批新用户，近年来市场上已经诞生一批社交产品，2019年初三英战吕布下，更出现了微信被“围剿”的声音。应对挑战，腾讯在2018年-2020年马不停蹄地上线了10多款社交APP，视频社交、半熟人社交、兴趣社交等等，但在市场少有水花。得不到的永远在骚动，自然这种焦虑就很大程度转化成对微信改造。
马化腾的一段讲话就例证，道出了焦虑的同时也说明微信不断更新、日益臃肿的原因：
“越来越看不懂年轻人的喜好，这是自己最大的担忧。而且用户的需求和喜好瞬息万变，95后、00后人群的需求是什么？我们每天都在研究。包括微信，没有人保证一个东西是永久不变的，因为人性就是要不断更新，可能你什么错都没有，最后就是错在自己太老了。”
另一方面，微信还面临劲敌抖音的流量争夺战。头条系已经被视为腾讯系最大劲敌，在最核心的用户时长争夺上，腾讯系在萎缩，而头条系不断增长，其中抖音作为拳头产品·“杀时间”利器，贡献最大。据抖音官方数据显示，目前其国内月活已破5亿，增长迅猛。
总共24个小时的用户时长，使用抖音的时长增长，等于使用腾讯产品减少，更何况抖音上线多闪聊天已经绕开腾讯分享限制大棒，杀入微信的社交腹地。兵临城下，看着扶不起的微视们，腾讯只能继续借道微信版本更新，加码微信视频号。
物理学有一个观点：极其巨大的物体会坍塌成黑洞。当下越来越臃肿的微信也正向着巨大超级APP前进，坍塌与否，也须警惕。
2009年，谷歌退出国内大陆市场，至此国内市场仅有搜狗搜索、360搜索，几乎没有对手的百度一骑绝尘，市值一路高涨，到2011年超越腾讯成为BAT一哥。但其后是进入长期的业务停滞，甚至错过移动互联网浪潮，被解读为战略迷失。
目前，微信官宣用户达12.5亿人，国内用户约10亿，占据八成，国内网民渗透率接近100%。可以说，微信独占国内市场，Facebook、Instagram等全球社交巨头未进入大陆市场，给了微信得天独厚的优势。
然而，也正是这种优势，或让微信面临战略迷失。
微信改变了国内用户使用习惯，也被国内用户使用习惯改变，其结果便是在海外市场水土不服，甚至在文化接近的日韩、东南亚地区都难以取代Line。
微信问世之初，视觉元素、交互设计、表情包功能常常被拿来和Line对比。迭代至今，Line仍然保持的通讯属性，主打“萌新”和“沟通”功能，而微信在各类功能的叠加后，定位越来越模糊，在拓展海外市场难以给人留下深刻印象，在国内的版本更新也伴随着不理解和吐槽。
微信的功能更新越来越四平八稳，也越来越没有记忆点。而在这个时代，对一款产品而言，没有记忆点是致命的。
文章来源：人人都是产品经理 作者：雾科技
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
