和大家分享一下，杨杨在年前做的一套新年主题图标，整个过程成长很大，也希望能给大家一些启发。
其实一套主题图标对于一个刚毕业的大学生来说，难度不小，但只要愿意学习，还是可以攻克重重困难，最后把需求做好的。
新年嘛，关键词的发散就不多说了，无非就是鞭炮、对联、福、灯笼等等。
我们直说重点：
对于风格，应该如何选择呢，比如有描边扁平风格：
△ Martin David作品
有轻质感的拟物风格：
△ Man King作品
这里可以给大家一个参考维度：
界面常驻功能性图标一般会使用描边、扁平风格的图标，而对于节日主题图标，图标如果太平会显得比较冷静，所以加一些质感的渲染会更有气氛。
而且增加质感一定程度上可以弥补造型上的不足，而且很出效果，对于时间有限的需求，是个不错的选择。
所以这次新年主题图标的需求，我们选择了轻质感的风格。
由于没有做图标的经验，所以第一版的样式犯了一些基础型的问题：
有不足不可怕，可怕的是不知道不足在哪里，所以清晰有条理的找到问题也是我们设计必须具备的能力。
我们从以下三个维度进行问题拆解，供大家参考
灯笼是五个图标中做的相对比较稳的一个。
问题和优化方向都有了，接下来就是调整了！
首先我们来优化造型方面的。
既然我们要做立体化质感的图标，那图标就不能太平，原有的鞭炮角度太正，所以在角度上进行了优化。
并且因为一个鞭炮有些太单调，所以把数量增多，优化如下：
除了鞭炮以外，我们认为那个鼓的造型本身不够饱满，短时间内比较难出效果，所以及时更换了元素——锦鲤（锦鲤和推荐貌似还点关系）：
多次调整后，图标在立体化方面有了很重要的突破。
之前的颜色有些偏暗，有些发黄，所以我们定了一个颜色规范，在主色上都使用统一的颜色，这样在延展的时候，就不容易跑偏：
只要严格保持颜色规范的使用，不停的对比调整，一定可以让一套图标的颜色不跑偏。
咱不说一组图标，每个都有亮点，但至少有一个是相对比较特别的，这是非常有必要的，否则整体看起来就会非常平庸。
产生亮点的方法有很多，比如风格、透视、颜色、品牌基因等等。
由于我们在风格、颜色等方面都已经固定，所以选择在品牌基因的维度出发进行优化。
一说到品牌基因，我们就可以联想到吉祥物，由于又是鼠年的新年主题，所以我们将自己的吉祥物黑子与老鼠的元素结合，让「吉祥物黑字」穿上了「老鼠外衣」，并且手举春联：
可谓是整组图标最大的亮点，这个生产创意的方法其实很常用，大家一定要多多练习。
最后我们看一下优化前后的效果：
优化前：
优化后：
文章来源：优设 作者：菜心设计铺
编者按：这篇文章来自 UI 设计师 Diana Malewicz，她在日常工作中会非常注意 UI设计的流行趋势，而这篇总结就是她梳理总结的10个小趋势。它们更多的是偏向 UI 视觉方面，并不涉及到体验和交互。
最近我花了不少时间来观察 UI 设计的发展趋势，我偶然间注意到了不少很有意思的苗头，或者说设计趋势。我认为这些设计趋势，能够在不久的将来塑造更加独树一帜的UI 。
下面是我所梳理总结出来的 10 种趋势。
的确，新拟物化是2020年处于风口浪尖的一种视觉风格，无论你喜欢不喜欢，觉得它可行不可行，它现在都已经是一个确定的、成型的风格，并且会持续存在着。
不过，新拟物化从最初诞生到现在，已经有一定的改变了，并且在向着更加复杂、完善的方向发展，有着更为良好的可访问性，开始具备更多拟物化的设计特征，但是更加新鲜、现代，并且更能渲染出独特的氛围感。
渐变这种设计趋势正在进入两极分化的一个阶段。一方面，在视觉设计领域，一部分渐变变得更加夸张，但是在 UI 设计领域，无论是背景、UI元素（比如按钮、卡片和图形），渐变依然存在，只不过会显得更加微妙柔和。
在 UI 设计领域，还有的设计师会使用双色渐变，并且结合模糊效果，让它更加柔和。
几何元素既可以作为背景来使用，也可以作为装饰细节，让你的设计越来越有趣。几何元素在最近几年受到的关注非常多，在设计上的应用也颇为广泛，甚至有人将几何元素拼接成为马赛克，最终呈现出来的视觉效果非常酷！
必须说，我个人是非常喜欢这种设计趋势的。我已经看到了很多令人惊艳的、轻巧且极富美学价值的背景设计，它们用明亮柔和的色彩铺满背景，展现出极强的色彩和搭配的技巧。
使用色调柔和的背景能够让整个设计都显得现代而沉静，清新，让内容真正抓住用户的注意力。
插画毫无疑问是非常流行的。不过，不论是配色还是视觉风格，无论是什么样的插画风格，最终的目标依然是要契合产品和 UI，所以很多插画都选择了相对扁平的风格，或者选择模拟类似3D的视觉外观。相比于每个数字项目都在使用的免费图片，插画真的是向前走出了一大步！
在这篇文章当中，我有分享在 UI 中使用插画的一些简单技巧：
和传统的规则的几何图形不同，抽象而不规则的图形可以让界面显得更加不拘一格和好玩，更通俗的来讲，就是让 UI 界面更加「有机」，我认为这是一件好事。使用钢笔工具在原始的圆形和矩形上进行编辑，尝试不同的轮廓，承载不同的颜色和渐变效果，最后生成的效果会非常有趣。如果你不想去自己绘制，可以尝试一下 Blobmaker 这个工具，能够帮你节省时间~
深色模式在这2年绝对是人所共知的一个设计风尚了，如今的深色模式 UI 设计已经深入到各个不同的应用。简单来说他是整个界面配色反转之后的效果，便于用户在深夜更轻松地浏览界面信息。只不过在具体的设计实施上，深色模式远不是简单的色彩反转就可以实施的，有很多注意事项，尤其是在对比度控制上，具体可以看看下面的文章：
最初大家在 Dribbble 上会倾向于使用非标准的排版布局方式来呈现UI界面，后来这种展现方式开始逐渐在实际的设计项目中应用开来。在实际的设计当中，绝大多数情况下都会挑选30度到50度之间的倾斜角度。这种方法非常不错，可以多尝试。
阴影是拟物化设计当中最重要的视觉元素之一，而如今它又再次大规模流行开来了。只不过相比于之前「沉重」的阴影，柔和的弥散阴影在美学上更加令人愉悦，通常，阴影会让 UI 元素的「可点击感」更强，并且有助于区分界面中的层次结构。在这篇文章当中，我有详细说明：
实际上早在 iOS 7 的时代，曾经一度流行过笔触纤细且字体宽度比较窄的字体，不过很庆幸这个时代过去了。现在所流行的字体更加讲究字体的可读性，字体的外轮廓都大体趋近于正方形，外观显得更加大气而现代。如果你正在寻找类似这样的字体，可以试试 Poppins、Montserrat、Gilroy、Sofia Pro、Proxima Nova 等字体。
这篇总结，基本上都是基于我个人对于趋势的观察和了解，在我看来，它们都有着非常强大的生命力，UI 设计的未来会更加富有希望。
图形是平面设计的核心元素之一，故图形设计也是设计师必须掌握的重要能力，不论是海报设计、广告设计、包装设计、UI 设计、Logo 设计都离不开图形设计，其中最具代表性的还是要数 Logo 中的图形设计，所以葱爷从 logo 图形入手，总结了 6 个最常用的图形设计方法。
加法是图形设计中最常见、最实用的方法，即把两个或两个以上的元素组合成一个新的图形。
加法操作方式主要有两种：
第一种：将两个或两个以上元素的图形拼接或组合在一起，得到的新图形中虽然含有加法中的每一个元素，但外形轮廓已不是他们当中的任何一个图形，即它们都是新图形的子图形，这种相加的方式关键在于找到各元素可以巧妙连接的点，或者可以完美组合的方式。
△ 字母C与钻戒组合在一起。
△ 将树叶与咖啡杯巧妙连接起来。
△ 广州塔与「品」字融合在一起。
△ 字母U与H组合。
第二种：将元素 A 融合进元素 B 中，得出的图形在外形上仍保持着元素 B 的大体特征，但是元素 A 也完美地融入在里面。即 B 是母图形，A 是子图形，这种方式的关键在于元素 A 是否能完美地融入元素 B 当中。
△ 游戏手柄是子图形，河马是母图形。
△ 爱心是子图形，狐狸是母图形。
△ 海浪是子图形，树叶是母图形。
1. 实例：高音符号+眼睛
由于高音符号中间的螺旋与眼珠造型类似，所以具备了做加法的前提，但要怎么组合效果会比较好呢？我们可以尝试一下，首先我尝试了第一种方法，即把高音符和眼睛都作为新图形的子图形，如下图。
虽然两个元素都得到了完好保留，但造型不太美观、简洁，而且这两个元素的线条并没有融合起来，而是简单、粗暴的相加。所以我尝试了第二种方法，把高音符作为眼睛的子图形，如下图。
上图把两个元素完美连接了起来，整个图形比方案一简洁了不少，而且仍保有比较高的识别性，所以这个思路更靠谱，在此基础上用辅助线规范一下，这个图形设计就完成了。
即把元素 A 通过变形或者增加一点辅助元素，使其在造型上向元素 B 靠近，但仍保有图形 A 的识别性，新得到的图形介于图形 A 和 B 之间。
比喻手法成立的前提是，元素 A 与元素 B 在造型上要比较接近。
△ 通过变形把手掌比喻成鸽子。
△ 通过变形把字母V比喻成鹿头。
△ 通过在条纹状的「M」上增加一双筷子，把其比喻成面条。
1. 实例：把爱心比喻成桃子
爱心图形在外形上与桃子本来就相似，所以我们只需要在爱心上方加一片小树叶就能达到目的。
不过上图太过常规，没有设计感和独特性，所以我在爱心上做了一点加工，形成了循环的效果，如下图。
大致效果还行，接下来，我们用辅助线把这个图形比较规范地画出来就可以了。
正负形又称阴阳形，最典型的代表就是太极图，即在一个图形中，填充了颜色的部分是图形，没有填充颜色的部分也可以形成图形，正负图形通常是包围式或半包围式的。
所以正负图形设计的关键在于，既要使正形能清晰地呈现出一个图形，还得使正形的负空间也能成为一个图形，由于负形没有正形抢眼，所以负形的轮廓一定要尽量简洁、具有很强的识别性。
在 Logo 设计中，英文字母是最常被用来做正负图形的，因为英文造型够简单，且大多数字母都是包围或半包围式结构。
1. 实例：把字母D的负形设计成字母R
由于字母 D 是一个包围式结构，刚好中间有一个比较大的负形空间，所以很适合用来设计正负图形，但从下图可以看出，线结构的字母 R 并不适合做 D 的负形。
所以我们需要将 R 处理一下，使它成为一个面的图形，前后差别很大，但仍具有 R 的识别性。
调整后的 R 就可以作为 D 的负形了，其结合方式有两种，一种是全包围式的，一种是半包围式的，从下图可以看出，方案二（半包围式的）更好看、更特别一些。
同样，我们也需要对该图形进行规范。
外轮廓出来后，我们还可以在正形内增加一些细节，使其更丰富、更有层次。
还有些图形不需要全新创作，而是可以根据摄影图片描摹出来，比如很多 logo 图形喜欢描摹人物头像、雕塑、植物等图片。
由于拍摄图片的角度可能不会太好，或者整体不是特别符合我们设计的需求，所以在描摹的过程中通常要做优化调整，比如稍作简化，去掉不是特别重要的细节，只保留比较关键的部分，或适当改变其外形等等。
1. 实例：「舜皇」头像描摹
找到一张合适的图片之后，我们可以把它的明暗对比调大一点，然后在 PS 中执行图像-调整-阈值，把图片变成黑白两色，我们要做的就是把阴影部分勾出来。
当然这个过程中要主动做一些优化和调整，让这个图形要保持着跟原图比较高的相似度，且整体干净简洁，细节流畅利落。勾出大形以后加上颜色和背景，这个图形就做完了。
艺术源于生活，图形设计也是如此，但如果只是把生活中的事物直接还原成图形，未免会太过普通、没有特色，这一点在 logo 图形的设计中尤其重要。
那么如何使这些来源于生活的图形变得特别呢？其实不一定要加入其他元素，有一个很常用的方法是将原本不规则的图形几何化，比如把动物图形设计成圆形或方形。
或者用几何图形把某个元素表现出来，比如用几何图形设计英文字母就很常见。
这个方法的关键是要使图形几何化以后，仍能保持着原图形的识别性，所以我们要根据原图形本身的特点，来反复尝试看它适合转化成哪种几何图形。
1. 实例：圆形的「购」字设计
比如说「购」字，如果把它设计成矩形会很容易，但会缺少特点，因为它本身的外形就很接近矩形，所以我打算把它设计成圆形，能不能行得通呢？我们可以先在草图上试一试。
从草图中可以看出，购字还是可以设计成圆形的，于是我用比较规范的手法把它在 Ai 里画出来，这样就得到了一个圆形的「购」字，很特别也很有设计感，但仍不难看出这是一个「购」字。
置换也是图形设计中常用的手法，即用元素 A 替换元素 B 中的某个局部从而得到图形 C，这要求元素 A 与元素 B 的某个局部在造型上有一定的相似性，这样图形 C 保留元素 B 的外形特征和识别性，这一方法在字体设计中也经常会用到。
需要注意的是，置换过来的元素 A 在设计风格和细节处理上，都要与元素 B 统一。
1. 实例：猪猪冰淇淋图形设计
球形冰淇淋的上半部分是球形的，而把猪设计成圆形的图形也很多，所以用猪置换冰淇淋球也是很简单、很自然的事情。
由于雪糕筒的风格是很简洁的描边风格，所以猪的设计风格也要与其统一。
接下来只要在猪的图形上加一个雪糕筒就可以了，调整一下二者的比例关系，统一线条粗细，一个猪猪冰淇淋图形就设计好了。
图形设计的方法还有很多，大家可以通过看大量的作品来自行总结，不过，最重要的不是知道这些方法，而是懂得如何通过正确地使用它们设计出优秀的图形。牢记设计的基本原则，多观察生活中的事物，寻找不同造型的特点，并多去尝试把它们联系起来，或者是把他们用另外一种方式表现出来，长此以往，你对图形设计的感觉一定会越来越强。
作者：蓝蓝
表格，是一种最常见的信息组织整理手段，常用于信息收集、展示、数据分析、归纳整理。
UI软件设计中最常用、最基本的是表格的设计，有些软件中80%都是表格类页面，可以说，设计开发的是否易用，很影响口碑和用户的使用感受。基础的东西一定要做好，就像我们吃的主食一样，虽然都是米和面，但是各地出产各种品种口味都不相同，要根据食客的喜好选择、烹饪。今天就聊一聊最基础的表格设计、变化和常见问题。
一、基础的表格设计美化
基础的表格可变化的地方很少，可以根据当前软件开发选择的框架控件（ext/vue/jequery不同框架会有一些不一样）做色彩和风格的变化，如：加表格不同粗细的线、斑马格，中间无竖线种种的设计，有的表格需要标题很突出，有的内文突出，这就和内容焦点相关了。
为了操作直观便捷，在操作区放一些图标“删除、编辑、审核”，配合文字来使用，有的把操作类的图标放在最左边，有的放在最右侧，按行业用户习惯而定。
可以用固定表头（标题位置不变），允许用户排序，单元格内有很长的文字，设定最大字节，多内容用……替代避免转行，有小数点的数字右对齐，每列的大小可调整，这些也是设计开发中可以做好的细节部分。
二、特别宽的表格怎么设计？
有的表格的宽度，达到了屏幕的两屏和三屏，出现宽宽的横向滚动条，又有长长的竖向滚动条，但工作的人又必须看，可烦人了！很多软件都因为这个原因被吐槽。下面就介绍三种方法解决这个问题：
方法一
如果表格的标题是可以定制的，允许省略的，可以从业务角度取舍去掉无关紧要的，不常用的内容，把这部分放在点开的详细页内容中即可。这就像一个房间的断舍离：挑选、丢弃、分类、收纳，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可无的？依次排序放在顺手的位置，ui设计的道理也是相通的。
方法二
如果表格里面的内容是确定的，不可省略的，比如银行的报表就是这么长，这么多，那我们就可以从设计的角度来优化，做一个加高版的表格。
表格为什么一组信息只能一行呢？完全可以一组三行四行，在组中进行重点信息，非重点信息以及符号化的直观转变。用大小、对比、浓淡、色彩、间隔这些平面设计的基本原则，让一个普通的“山里娃”土土的表格变成一个“青春靓丽、人见人爱”自带明星气质的表格。
方法三
大表格里面嵌套小表格，利用交互设计，巧安排空间。当用户光标移至感兴趣的那行的时候，关于它更多的内容，在下方滑动撑开出现或者右边浮动出现。这个方式虽然比较土，但也确实管用。早年在看某一招聘网站的时候，每一个人的简历只要点名字就可以看到一组关键信息，便于迅速筛选，而另外一个招聘网站，就没有这个功能，每个人都要打开之后才能看见整体信息，我后来就不怎么看那个网站了。多一步操作，对典型用户就多了许多的工作量，网站和软件的使用口碑，用户粘度就是这样在为用户考虑中一点一点积累起来的。
上图：大表格里面嵌套小表格
方法不会只有这三种，其他的方法要根据当时的业务，用户使用的习惯、重点，因地制宜的去设计了。软件中的表格节省了许多程序工程师的工作量，如果做大的改动或许是巨大的工作量，如果要做变动，一定要在开始的时候就要让ui设计纳入开发体系，一生二，二生三，在前期第一批实施时越注重细节，后期就会越轻松，甚至省去几倍甚至几十倍的时间挨个页面的去纠偏、修改。
一个系统总是需要业务担当，颜值担当的核心部分，重要的页面要额外的对待、花更多的精力和时间。如果千篇一律，也就不能显示出软件产品的独到之处了。
第三 与表格配合的部分设计
第一种 “搜索查询”和“过滤”部分的设计
大多数表格的前面都有搜索过滤功能，如果搜索条件相当多，可以精选一部分主要的排成一行，其他的隐藏，点箭头再出现。整个搜索区域也可以有隐藏／显示的按钮，来给下面的表格更多的空间。
过滤条件区域可以定义好“条件名称”一致宽度，一般在八个字左右，避免有的字节多，有的字节少，行数多了，参差不齐，区块和区块之间也要定义好统一的间距，这样整体页面就显得整齐划一、条理清晰。
上图：搜索和卡片式信息的组合
第二种 表格操作部分的设计
对表格的操作“导入，导出、批量导出”有的时候这类操作有10—20个，有的时候才几个，多的时候很占地方，可以用隐藏的方法，over到表格上再出现，以节省空间。
也可以分组把同类的操作聚合在一起，把常用的放在目之所及，不常用的点后下浮出现，以节省空间，
还可以光标跟随表格的某一行，点选自动浮出一群小跟班，各种操作按钮。即节省空间，操作移动路径又很短。只是不支持批量操作。
第三种 表格和卡片式设计、统计图的整合切换
表格是可以转换成卡片式设计的，用一个卡片代替一行的展现信息，改变一种阅读的方式。
有的也可以转换图统计图表：曲线图，柱状图让用户直观的去解读，而不必一直看枯燥的数字。
日常设计中，我们可以收集一些类型海报，去分析它们的特点进行练习，逐渐熟练掌握各个风格特征。
我们知道，透过现象看本质，才能实现真正意义上的认识。其实版式设计也是一样的，归根到底，版式要素就是由文字与图形或者图片组成的，因此文字的编排、图形或图片的运用以及色彩的搭配将成为我们学习的重点。
前几天抽空看了一些美国西部电影，发现西部牛仔的形象真的是一个字，帅。他们头戴墨西哥式宽沿高顶毡帽、腰挎柯尔特左轮手枪或肩扛温彻斯特步枪、身缠子弹带、穿着牛仔裤皮上衣、以及束袖紧身多袋牛仔服、足蹬一双饰有刺马钉的高筒皮套靴、颈围一块色彩鲜艳夺目的印花大方巾、骑着快马风驰电掣，形象威猛而洒脱。
今天我们就以西部牛仔为命题设计一幅海报，看看这类海报的具体设计思路是怎样的，说到牛仔电影，就不得不提克林特伊斯特伍德演的「镖客三部曲」，牛仔的机智、勇敢、沉着、冷静体现的淋漓尽致，还有那深邃的眼神，真的是被圈粉。
那时的电影海报不多，多为手绘的形式展现，可以看出三幅海报中文字的编排跟主人物的结合非常巧妙。第一幅主标题的梯形形式，第二幅居中形式，第三幅左右环绕人物的形式，充分的使用信息解决了空间问题。
下面这三幅是电影「被解放的姜戈」的宣传海报，这是我几年前看的了，里面还有帅帅的小李子，在电影里有点坏。
上面三幅都是以剪影为主视觉，以裂开的链子为最主要视觉点，呼应电影中的核心主旨——被解放，后面两幅通过移动主视觉的位置换了构图，信息编排也随之改变。这种剪影效果十分值得借鉴。
下面进入今天的分享时间，噔噔噔噔~
我们将从网上整理好的文案进行简单的层级划分。
STEP 01 ：构图方式
这里我选用上下分割构图来进行设计，上方准备放个牛仔的形象，下面放置信息。
STEP 02 ：主体刻画
接下来我们选择一个极具张力的素材图，素材有透视的效果，枪口还起到了聚焦的作用。
下面我们来刻画主标题，牛仔的形象是硬朗冷静，所以椅子选用粗黑体，同时结合有肌理的英文字体进行编排。
这里我用封套工具做了透视的效果，同时加上色块来承载信息，这样视觉上有远近的感觉，视觉效果更丰富。
最后我们将处理好的主体和主标题都放入画面中，对人物进行适当旋转，同时标出剩余信息的大概位置。
STEP 03：信息处理
接下来我们将剩余的信息做个处理，文字右侧，加上一个牛仔骑马的剪影。
我们将处理好的信息全部放入到画面中，版式的骨骼基本就确定了。
STEP 04：优化版面
之后来搭配颜色，我们选用复古的颜色做背景，同时文字根据人物的颜色进行搭配。
做到这里，画面还是略显单薄，而且很多空间位置都没有解决，那么这个时候我们需要增加相关的元素去丰富画面，人物后面我们用混合工具做一个发射型的方框；最左侧的空间用「马背上的英雄」英文翻译占据，缩小文字部分让出空间，同时加上掉落的子弹，这里需要注意子弹的疏密关系，画面立刻就丰富起来了。
最后我们加上一个类似通缉令的复古纸张效果，同时微调信息的大小，这样整个画面就完成了。
技法讲解
画出两个大小不一样的矩形，改变矩形角度和矩形框的粗细，选中混合工具。
调整渐变的矩形数量。
用混合工具选中小巨星，拖住鼠标从小矩形中心往大矩形拉，然后松开鼠标，渐变效果就完成了。
STEP 05：样机效果
OK，设计做完了，这篇海报主要就是给大家讲解利用一些简单的几何形如何丰富画面，还有一些特殊的小技巧，比如字体的简单变形，元素的重复渐变，这些都是一些小细节，却能使你的画面上升一个档次，有时不是我们不会，而是我们没有深入的思考与借鉴。
文章来源：优设 作者：趣设记
随着大数据产业的发展，越来越多的公司开始实现数据资源的管理和应用，尤其是一些在日常生活中经常使用大屏幕的大中型企业。此时，用户界面设计者需要呈现相应的视觉效果。接下来为大家介绍大屏可视化的UI设计。
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
（图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
编者按：这是 UI 设计师 Diana Malewicz 的第二篇 UI 设计分享。这一次，她要设计的是一个控制面板的界面，如何控制不同UI元素的平衡，如何从零开始构建，相当值得学习~
欢迎来到我的「UI设计指南」第二篇！如果你对于我的第一篇文章印象不错的话，那么这一篇应该也会合你胃口：
当然，请注意一点，我创建 UI 界面的过程中，绕过了通常 UI 和产品设计应该有的「用户调研」——「用户研究」——「体验分析」这样的前置步骤，而是直接开始创建干净、一致的 UI 界面。在真实的设计项目当中，开头的这些步骤是无法忽略的！
这一次我们要设计的是仪表盘界面。那么我们从基本的想法开始。
这一次，我们将会设计一个服务于医疗行业的控制面板（实际上，这个设计的初衷来源于我的姨妈，她是一名医生，不仅要治疗病人还要处理大量的文书工作），而整个设计我将会在 Sketch 中完成。
通常，我会从一个非常低保真的线框图开始。我会创建一系列的矩形线框，然后将他们按照需求和大小进行排列，直到最终满足我的想法为止。我选择了一些随机的、但是相近的色彩，确保我能看清位置就可以了。
然后我针对哪些内容在哪里显示，进行了基本的说明。
这就是一个非常原始的界面框架了。
1. Vue 无法检测实例被创建时不存在于 data 中的 property
原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
场景：
var vm = new Vue({
data:{},
// 页面不会变化
template: '<div>{{message}}</div>'
})
vm.message = 'Hello!' // `vm.message` 不是响应式的
解决办法：
var vm = new Vue({
data: {
// 声明 a、b 为一个空值字符串
message: '',
},
template: '<div>{{ message }}</div>'
})
vm.message = 'Hello!'
2. Vue 无法检测对象 property 的添加或移除
原因：官方 - 由于 JavaScript（ES5） 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
场景：
var vm = new Vue({
data:{
obj: {
id: 001
}
},
// 页面不会变化
template: '<div>{{ obj.message }}</div>'
})
vm.obj.message = 'hello' // 不是响应式的
delete vm.obj.id // 不是响应式的
解决办法：
// 动态添加 - Vue.set
Vue.set(vm.obj, propertyName, newValue)
// 动态添加 - vm.$set
vm.$set(vm.obj, propertyName, newValue)
// 动态添加多个
// 代替 Object.assign(this.obj, { a: 1, b: 2 })
this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })
// 动态移除 - Vue.delete
Vue.delete(vm.obj, propertyName)
// 动态移除 - vm.$delete
vm.$delete(vm.obj, propertyName)
3. Vue 不能检测通过数组索引直接修改一个数组项
原因：官方 - 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化；尤雨溪 - 性能代价和获得用户体验不成正比。
场景：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
解决办法：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
拓展：Object.defineProperty() 可以监测数组的变化
Object.defineProperty() 可以监测数组的变化。但对数组新增一个属性（index）不会监测到数据变化，因为无法监测到新增数组的下标（index），删除一个属性（index）也是。
场景：
var arr = [1, 2, 3, 4]
arr.forEach(function(item, index) {
Object.defineProperty(arr, index, {
set: function(value) {
console.log('触发 setter')
item = value
},
get: function() {
console.log('触发 getter')
return item
}
})
})
arr[1] = '123' // 触发 setter
arr[1] // 触发 getter 返回值为 "123"
arr[5] = 5 // 不会触发 setter 和 getter
4. Vue 不能监测直接修改数组长度的变化
原因：官方 - 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化；尤雨溪 - 性能代价和获得用户体验不成正比。
场景：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items.length = 2 // 不是响应性的
解决办法：
vm.items.splice(newLength)
5. 在异步更新执行之前操作 DOM 数据不会变化
原因：Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
场景：
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
vm.$el.style.color = 'red' // 页面没有变化
解决办法：
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
//使用 Vue.nextTick(callback) callback 将在 DOM 更新完成后被调用
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
vm.$el.style.color = 'red' // 文字颜色变成红色
})
拓展：异步更新带来的数据响应的误解
<!-- 页面显示：我更新啦！ -->
<div id="example">{{message.text}}</div>
var vm = new Vue({
el: '#example',
data: {
message: {},
}
})
vm.$nextTick(function () {
this.message = {}
this.message.text = '我更新啦！'
})
上段代码中，我们在 data 对象中声明了一个 message 空对象，然后在下次 DOM 更新循环结束之后触发的异步回调中，执行了如下两段代码：
this.message = {};
this.message.text = '我更新啦！'
到这里，模版更新了，页面最后会显示 我更新啦！。
模板更新了，应该具有响应式特性，如果这么想那么你就已经走入了误区。
一开始我们在 data 对象中只是声明了一个 message 空对象，并不具有 text 属性，所以该 text 属性是不具有响应式特性的。
但模板切切实实已经更新了，这又是怎么回事呢？
那是因为 Vue.js 的 DOM 更新是异步的，即当 setter 操作发生后，指令并不会立马更新，指令的更新操作会有一个延迟，当指令更新真正执行的时候，此时 text 属性已经赋值，所以指令更新模板时得到的是新值。
模板中每个指令/数据绑定都有一个对应的 watcher 对象，在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时，会触发 watcher 重新计算 ，也就会导致它的关联指令更新 DOM。
具体流程如下所示：
执行 this.message = {}; 时， setter 被调用。
Vue.js 追踪到 message 依赖的 setter 被调用后，会触发 watcher 重新计算。
this.message.text = '我更新啦！'; 对 text 属性进行赋值。
异步回调逻辑执行结束之后，就会导致它的关联指令更新 DOM，指令更新开始执行。
所以真正的触发模版更新的操作是 this.message = {};这一句引起的，因为触发了 setter，所以单看上述例子，具有响应式特性的数据只有 message 这一层，它的动态添加的属性是不具备的。
对应上述第二点 - Vue 无法检测对象 property 的添加或移除
6. 循环嵌套层级太深，视图不更新？
看到网上有些人说数据更新的层级太深，导致数据不更新或者更新缓慢从而导致试图不更新？
由于我没有遇到过这种情况，在我试图重现这种场景的情况下，发现并没有上述情况的发生，所以对于这一点不进行过多描述（如果有人在真实场景下遇到这种情况留个言吧）。
针对上述情况有人给出的解决方案是使用强制更新：
如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。
vm.$forceUpdate()
7. 拓展：路由参数变化时，页面不更新（数据不更新）
拓展一个因为路由参数变化，而导致页面不更新的问题，页面不更新本质上就是数据没有更新。
原因：路由视图组件引用了相同组件时，当路由参会变化时，会导致该组件无法更新，也就是我们常说中的页面无法更新的问题。
场景：
<div id="app">
<ul>
<li><router-link to="/home/foo">To Foo</router-link></li>
<li><router-link to="/home/baz">To Baz</router-link></li>
<li><router-link to="/home/bar">To Bar</router-link></li>
</ul>
<router-view></router-view>
</div>
const Home = {
template: `<div>{{message}}</div>`,
data() {
return {
message: this.$route.params.name
}
}
}
const router = new VueRouter({
mode:'history',
routes: [
{path: '/home', component: Home },
{path: '/home/:name', component: Home }
]
})
new Vue({
el: '#app',
router
})
上段代码中，我们在路由构建选项 routes 中配置了一个动态路由 '/home/:name'，它们共用一个路由组件 Home，这代表他们复用 RouterView 。
当进行路由切换时，页面只会渲染第一次路由匹配到的参数，之后再进行路由切换时，message 是没有变化的。
解决办法：
解决的办法有很多种，这里只列举我常用到几种方法。
通过 watch 监听 $route 的变化。
const Home = {
template: `<div>{{message}}</div>`,
data() {
return {
message: this.$route.params.name
}
},
watch: {
'$route': function() {
this.message = this.$route.params.name
}
}
}
...
new Vue({
el: '#app',
router
})
给 <router-view> 绑定 key 属性，这样 Vue 就会认为这是不同的 <router-view>。
弊端：如果从 /home 跳转到 /user 等其他路由下，我们是不用担心组件更新问题的，所以这个时候 key 属性是多余的。
<div id="app">
...
<router-view :key="key"></router-view>
</div>
输出专业规范的命名，建立有效的设计文件命名系统。
项目之初大家都会建立文件夹系统，用来存放项目资源。这时大家可以运用杜威十进制的命名方式来管理文件命名，方便排序，让我们的项目文件足够清晰，在长期的项目管理中养成一种良好的命名习惯。
项目命名规则
下面以 用户端 V2.1.0_新增直售展位 虚拟项目为例，创建各资源的子文件夹，初步完成文件管理：
00_需求文档（PRD）
01_交互设计（原型）
02_设计文件（设计）
04_竞品分析
05_动效设计
06_应用素材
07_参考资料
08_会议记录
大家可以根据不同项目的性质和流程进行增删，选择最适合自己的项目文件管理方式。
在设计文件中，我们最经常接触的就是画板、图层，少则几十，多则几百，我们需要更轻松的命名排序方式来查找我们的目标，保证团队命名风格统一，清晰的场景命名更便于设计输出和协作，也可以支持后期测试用例的填写。
此时的命名目标在于清楚展示页面的从属关系，以及流程上的交互关系。
画板&图层命名规则
每个画板和图层需要根据功能模块/类型/状态结合数字来进行命名，方便我们对页面进行排序。数字可根据项目文件的操作顺序和权重的具体情况来取舍。
00首页
01详情页
02购物车
03我的
…
在 Sketch 中我们会经常用到一个批量重命名的工具插件 Rename It，这个工具可以快速批量对画板、组、图层进行重命名。文末有一篇震震张关于这个插件的介绍，大家可以学习一下。
画板和画布的命名规范，是为了让每个项目参与者都能快速找到目标，对于设计师而言，可以主动思考页面之间的关系。
一个应用通常需要导出的切图包含众多类型：
对于切图文件夹，可以通过通用文件、控件归纳等方法进行归纳管理。
对于切图命名，可以无需考虑自己的英文命名具有普适性，记得命名最初的目标是：便于团队检索定位，因为开发人员有自己的命名习惯和命名体系。
切图命名原则
标准命名原则：模块_名称_状态 ，如导航栏_按钮_点击；
全局命名规则：模块_全局_名称_状态，如导航栏_按钮_全局_点击（全局使用必须加全局标识）
注意事项
如果产品使用了两个平台的独立设计，需要 iOS 和 Android 两个手机系统的切图单独建两个文件夹，切图文件分别导出，便于前端工程师检索应用。
以上是对设计项目过程中的文件管理及命名规范的一些笔记总结，持续优化~
养成一个好的习惯从现在开始。\（ツ）/
文章来源：优设 作者：木子的小千世界
2020 年未过半，我们就看了许多从前从未见过的人和事，体验了许多从前从未想过的经历。几个月来，「历史性的」、「百年难遇的」、「前所未有的」、「恐慌性的」、「灾难性的」……这些词儿，如同弹幕一般，不停地出现在我们眼前。短短的几个月，许多人变了，许多家庭变了，许多事情变了，但生活还在继续前行。经历过特殊的时刻，在京东的我们，比以往任何一个时刻都要忙碌，也比以往任何一个时刻更能清晰地认识到：「京东的价值、京东给社会的力量」和「我们的责任」。
我们怀着期望，期待我们每一次的改变，都能给你们带来更多的能量。
2020 年初夏 618 来了，京东的生日之际，京东 APP9.0 全新升级，希望你们会喜欢～
1. 品牌力升级
5 月 20 日，京东零售集团宣布进行品牌升级，由原来的「多快好省」升级为「不负每一份热爱」。作为京东集团品牌战略承接的主阵地——京东 APP，将基于全新的品牌精神，着力于满足消费者的多元化、个性化的购物需求，持续对其创造更大的价值。用户在京东不仅仅能享受到好的购物体验，还能享受到更丰富、更用心的产品和服务。通过对京东 APP 不断地迭代升级，我们也向社会、向消费者诠释着京东的每一份用心；京东 APP 也承载着每一个家庭、每一位消费者对美好生活的向往，不负你、我、他（她）的每一份热爱。
2. 产品力升级
未来的 1-3 年，京东将继续在低线市场、低渗透品类上提速；通过对新老渠道、新老内容的矩阵开拓和整合，将单纯的线上购物，升级为全场景的复合式体验；通过新玩法的打造，增加用户的触点，提升粘性和频次。为了更好地承接京东战略与方向，京东 APP 的产品力也亟需升级。
3. 体验力升级
除了品牌力、产品力升级，每一次全新「京东 APP」的到来，也在为消费者不断提供更友好的使用体验力。我们也非常期望能够借助这次版本升级，对京东 APP 进行既精细、又完整的刻画和打磨，期待通过京东 APP9.0，与消费者进一步拉近彼此的距离，让体验更加细腻、更加灵动，全面升级消费者在京东 APP 的体验力。
结合京东 APP9.0 的品牌力、产品力、体验力的升级背景，我们追本溯源，探寻京东自己的脉络。
设计策略的延续升级
基于京东 APP 的核心目标，围绕购前、购中、购后三个环节强化用户内心感知，承接京东的战略在 APP 内的落地。
京东 APP4.0-5.0 主要围绕京东品牌对用户的传达感知进行输出，建立京东的品牌形象；京东 APP6.0 后开始加强场景能力，逐步打造可以满足千人千面的电商设计平台，直至现在，扩宽至全渠道场景，为用户提供更全面、更加细分的体验。
始终围绕产品策略
设计的迭代和产品思维绑定，始终围绕产品策略，一起共建用户的同理心；通过深耕设计解决方案、持续验证推导，来打造值得用户信赖的优质购物体验。
设计将各模块的功能与价值主张相结合，彼此进行联动，保障从产品到交互到视觉，到最后的方案落地都能围绕一个核心目标去服务。
京东 APP 设计始终都是以「产品、业务目标」为核心，围绕「品牌」「用户」「认知」三大方向，结合「设计趋势」来发力；但基于不同的情景、当下 APP 所处的环境，设计改版的侧重发力点有较大的差异；一般来说是「用一个版本来解决 1-2 个的重大体验问题」。
我们结合京东 APP8.0 以来的用户研究报告、用户反馈、各关键模块的数据、竞品对比，从「品牌」「用户」「认知」这三大维度着手，梳理京东 APP 的核心体验问题，进而推导出京东 APP9.0 要解决的核心问题，作为定义京东 APP9.0 设计策略的关键依据。
1. 品牌设计 ——京东APP8.0问题提炼
在细分用户的研究中，用户高频地提到 APP 的品牌感知过于冷静、直接、有距离感，氛围上不够活泼，也存在「京东是正品但价格会不会更贵？」的疑惑。打个比方，可能同样的价格，吆喝声越大，感受上会觉得大声的更便宜、更有爽感。
视觉定义上，一方面，栅格定义过于精细，影响了信息传递的流畅度，需要针对导购类、流程类场景进行差异化删减；主流程内的部分模块留白偏多，拉低了一定的屏效；另一方面，字体的部分梯度比较多、也比较相近，虽然视觉上较为协调和统一，但视觉噪音较大，对主体内容也有比较大的干扰。
人机交互时，过于直接地强调目的性，品牌灵动感待提升。
通过数据测试发现，核心模块的引流效率还有较大的提升空间；两个例子：1、可通过「严格控制变量，测试图片素材的引流效率」，提升「图片素材」的质量，优化核心模块的设计规范；2、通过「图片素材」的质量提升，加上对「坑位容器」动态打磨，经过数据测试，增强品牌灵动感的同时，可进一步提升屏效。
2. 用户感受 ——京东APP8.0问题提炼
细分垂直的用户群，在全流程内的感受上存在割裂感；各个垂直人群在 APP 主流程内已初步形成大的体验闭环框架，但体验闭环的细节还有待补齐与提升，对垂直人群的「权益和身份」的传达还需要在情境上更加一致。举个例子：未开通 PLUS 会员时，高净值人群对 PLUS 身份认同感还有较大提升空间。
商品的活动促销信息展示（时间、最优价格）层级隐藏较深、活动促销计算复杂难以理解，用户促销感受比较弱，所谓酒香真是怕巷子深。我们通过「用户在不同平台内促销感知」的用户测试对比发现，虽然京东的价格最优惠，但由于在表现层上没有进行强调，导致用户在价格感受上存在偏差。
产品感知较理性，主流程内氛围不够活泼，有距离感；这一点，新兴市场用户的感知尤为明显。
3. 认知统一 ——京东APP8.0问题提炼
页面框架一致性问题：主流程过往的版本较为侧重于单一模块内的设计，各个模块间堆积了较多设计不统一的问题。
页面内模块一致性问题：主流程的各个模块内，由于 「新旧版本」「需求不断叠加」等原因，也存在模块内的统一性问题，这增加了用户接受信息的负担。举个例子：APP 结算页在过去的一年内新增了较多的功能与提示场景，由于业务时间有 deadline，很多需求会采用体验降级方案，即用现有控件来设计方案，使得最终方案可能体验不够好，而这里埋下的体验隐患，日后依然要找机会解决。
业务和功能类型不断增加，这会导致页面相对臃肿，这时核心流程的框架亟需重新定义、向三维空间借力来舒展信息架构。
APP 整体的故事性连接还有待强化，货架式的流转只是骨架；各频道内、各模块内也应基于 APP 骨架保有自己横向与纵向故事线，在 APP 内注入故事性的血肉灵魂；让用户在 APP 内流转时，认知更清晰、体验更丰富。
1. 品牌力设计策略
延续、强化京东品牌，构建、升级「京东设计语言体系」 ，提升屏效。通过统一的强调，使品牌可知；通过情感化、IP 化、故事化的表达，使品牌可感。
色彩体系：延续京东品牌调性，主打京东红的品牌色，适当地通过增强配色、减少留白，在保留京东辨识度的同时，通过丰富的色彩体系降低 「冷淡、有距离」的感知。
例如：结合首页及推荐位的坑位颜色，拉通营销色彩规范，HSB 平衡所有色彩梯度；并结合算法给出冷暖色排布规则，区分内容丰富画面（包括首页核心楼层/我京工具与服务/用户资产我的钱包）及核心流程 HSB 平衡，色环关系，品牌色的延伸主导，再到单色、渐变的规律体验，全路径的感知；拉通京东品牌色同阶梯色环，推导所有辅助色色值，根据透明度及饱和度叠加，得到色彩使用场景及渐变关系；提炼营销体系核心规律，营销坑位色彩排布关系，冷暖色阶搭配，引导用户识别。
营销坑位色彩排布关系，冷暖色阶搭配，引导用户识别。（核心楼层为例）
字体体系：延续京东的字体建设，延续性的使用京东朗正和正黑体、加大主字号、精简字阶，拉开字体层级梯度，让用户的关注点更聚焦。针对下沉首页等重点业务采用异形字体，标题与利益点字号字重比重更大，强化营销引导。
icon 体系：线性图标全面 iconfont 化，减少 app 的体积；图标设计更简洁，减少隐喻的手法，让用户「一眼即懂」；平衡视觉的体积差，建立一致性的图标绘制尺寸规范；适当的设计图标互动的微动效，增加趣味性，带给用户「愉悦感」。
栅格体系：在屏效留用率上，基于 8.0 基础定义扩展 12 、24 的倍数关系，栅格做相应的简化；比如在首页/搜索/商详等页面，利用删格缩减间距，提高单屏屏效；首页核心楼层，利用减少间距，放大商品图片，压缩整体楼层高度，使核心内容更加突出，更便于用户识别到有效内容；
优化界面布局，巧用视觉动线，利用人们阅读的 f 型习惯，聚焦用户阅读内容；
素材设计体系：一方面，打磨坑位容器，采用动静态容器相结合的手法。另一方面，打磨坑位素材规范，动静态素材结合使用。同时，尝试压缩容器高度，与羚珑智能设计系统深度合作，进行素材和页面的测试，对运营设计的素材规范进行打磨，在容器高度压缩的同时提升素材质量，保证浏览效率不下降。
2. 用户设计策略
细分用户群体，增强氛围感知、让体验更丰富，层次更清晰。根据细分用户的习惯性、常识性认知，适当地把产品进行分层，让可知可感更加贴合用户；基于全局的统一，有意识细分用户的体验，加强各垂类用户最在意、最可感受的局部差异，从而让体验更加丰富。
PLUS 会员：提高 PLUS 会员身份认同，通过全流程内 PLUS 会员皮肤、氛围品牌一致性露出， 强化「PLUS 专属优惠价格计算」 「PLUS 到手价强化」等权益的感知，进而强化会员身份的感知、加强对 PLUS 会员的认同感。
家庭银发人群：渲染家庭情感氛围，强化优惠及促销的利益感知，简化整体的使用流程，中心化界面采用大字号，为银发人群设计。
新人用户：打造新人专属首页，强化新用户引导，多流程定投新人大礼包、发放新人专属优惠，全方位助力新人用户转化。
校园用户：着重打造年轻化的视觉氛围，拉近与校园用户的距离。
新兴市场用户：扭转用户品牌认知，基于特定人群偏好的氛围组织界面，提升流量分发效率。针对促销较为敏感的人群，通过设计的强调，加强用户低价感知，强化活动促销感知，打消购买顾虑。
3. 认知设计策略
品牌金字塔理论认为关于品牌认知的一系列表象指标，如认知度、美誉度、购买率、满意度、推荐率等，实际上反映了消费者对一个品牌认知的深入程度；这个理论，同样可以适用在产品的用户认知上，认知是一切的基础，产品的用户认知做好了，转化、推荐、满意度才能做好，能够被认知的产品更容易加强情感连接；反过来，不容易被用户认知、认知有负担、信息架构表现层复杂的产品，用户理解起来可能就有障碍，再叠加情感连接的设计，那有可能就是体验的自嗨了。
京东 APP9.0，将针对用户的主流程，骨骼精细化重构、优化流程动线，给用户提供一致性的体验，让认知减负。
4. 感受设计策略
消费者在只有认知的时候是理性的，而基于认知产生好感的时候就会变成感性。
在简化用户的信息认知的基础上，我们将强化打造「京东语言的品牌动效」在核心流程内的模块感知，结合产品的产品领域动态衔接的诉求，在设计上考虑动态效果对「整体上下文，故事连接性」的亮点承接，让用户理性购物的同时，感受到感性的愉悦。
1. 用心设计每一眼感受
设计策略：延续、强化京东品牌，完善并深入刻画京东设计语言；通过设计的语言体系，提升屏幕效率，从而带动流量分发效率、运营效率的提升。
首页视觉风格焕然一新，更灵动、更轻松。（通过 IP 和品牌辅形融入、优化色彩体系等方式，强化京东品牌；通过优化栅格系统、字体系统、色彩体系、动态效果，让界面的信息更加清晰，界面感受更灵动）
2. 用心对待每一个群体
设计策略：细分用户群体，增强氛围感知，让体验更丰富、层次更清晰。
设计要点：打造家庭专属购物体验，和家人一起在京东开心购物与互动。设计上通过暖色调和插画的铺陈，渲染家庭情感氛围；同时，界面采用更大字号，为父母量身定制。
设计要点：打造 PLUS 会员中心化与去中心化的购物体验链路；通过设计走查与用户测试，填补 PLUS 会员在全流程内的品牌、信息触点缺失；同时，从品牌、视觉、交互三个维度，统一设计语言、语境、对话方式，让 PLUS 会员在各个体验触点都能感受到一致的人机交互体验。
3. 用心打造每一个场景
设计策略：基于京东设计语言体系，构建场景；骨骼精细化重构主流程，构建「场景动线」，让体验更流畅。
设计要点：京东到家、便利店、商超、药品、鲜花等门店商品全面入驻京东 APP；用户在主流程内即可以直接搜索下单附近的门店商品，下单后最快 15 分钟内便可送达；由于到家场景依托于主流程，我们在设计时期望用户购物动线能与主流程统一，在商品池打通的基础上，体验上也能完美融合；同时，设计上需结合 LBS 场景特点，在主购物流程中，强化 LBS 与商品、配送的关联，突出商品促销与门店配送时效。
4. 用心打造每一条动线-多元化导购
设计策略：基于「京东视觉语言体系」，细分用户群体构建导购方式；根据用户特性，强化放大「多元」的体验。
设计要点：直播全面渗透，全流程强化直播触点，增大直播的分发场景的用户接触面积；同时，通过动态强化、设计强化的手法，加大对商家私域直播的引导，完善直播场景的体验。
5. 用心打造每一条动线-购物动线优化
设计策略：基于「京东视觉语言体系」骨骼精细化重构购物动线，统一交互、视觉语言，视觉降噪，让认知减负。
6. 用心简化每一次决策
设计策略：关键信息强曝光，统一交互视觉体验；让认知减负，决策更简单。
大促氛围优化：在主流程内突出大促的氛围感知，强化搜索列表、商详等主流程内的大促氛围；结合大促情绪指数设计氛围，逐渐调动用户的热情。根据用户的身份、商品的特性，在设计上突出重要信息，例如强化 PLUS 会员促销腰带等；同时，借助设计规范和设计组件，页面内弹层更加容易拓展、可自由配置。
到手价场景展示：商品详情、购物车内强调商品到手价，在设计上突出优惠结果的传达，让用户一眼便知。
7. 用心满足每一次闲暇
融入品牌、IP 元素，用心打造新颖、有趣、持续的互动玩法。
8. APP9.0
京东 APP9.0 是一个新开始；我们将用未来的时间，用心跟大家诠释，京东全新的品牌价值主张「不负每一份热爱」。用心对待、不负期待、不负热爱，我们在路上……由于篇幅有限，本文就不展开分析详细的设计方案了。
文章来源：优设 作者：京东设计中心JDC
蓝蓝设计的小编 http://www.lanlanwork.com