设计思维 - 设计每日一贴---北京兰亭妙微/UI设计公司

172022-1

杰出的作品就是在普通的作品上“搞破坏”

seo达人

这样的，

以及这样的。

第一眼看过去我只想送他一句：你确定不是在搞破坏？但多看几眼你就会觉得很过瘾，没有这些“搞破坏”的处理方式，这些作品就只是一张普通的图片而已，而被破坏后，它们就成为了一件艺术品，有一种神秘、不安、顽皮的感觉。

其实很多设计作品也会采用类似的手法，通过把一张普通的图片、一个平庸的版面进行破坏，从而得到一件优秀的设计作品。

01.破坏图片

破坏图片通常有这么几个做法：

❶ 在图片上面直接排文字

与通常大家刻意让图片与文字处于分离状态、互不干扰的排版方式不同，下面这些作品都是毫不避讳的把文字直接打在图片上，这类型的作品图片通常要比较大，视觉张力才会更强。

❷ 在图片上面覆盖色块再加文字

这种破坏方式比第一种更绝，下面这些作品直接用色块压住图片，并且还是压住图片比较重要的部分，这种方式可以使得色块上的文字被进一步重视，视觉冲击力极强。

❸ 将图片进行裁剪

比如把一张完整的图片一分为二，可以使画面变得更有趣、更有设计感。

02.破坏文字

即通过对文字进行一些特殊的处理，降低其识别性或破坏其结构，但并不会阻碍内容的传达，反而使画面更具视觉冲击力，更令人印象深刻。

❶ 用图片遮挡文字

为了不阻碍信息的传播，通常只是用图片压住少数文字的局部，或者图片本身有一定的透明度。

❷ 用色块遮挡文字

色块的不透明度通常也是低于100%的，所以效果类似于用有色透明胶贴在文字上，破坏效果杠杠的。

❸ 用文字遮挡文字

通常是用另一种颜色、另一种字体的文字，叠加原有的文字上面，形成文字交错的效果，画面的层次感和冲击力会同时得到增强。

❹ 裁剪文字

对文字进行裁剪再重组，在不影响文字识别性的基础上，使其更有形式感和设计感，裁剪的方式通常为斜切。

03.破坏版式

即原本整体排版比较和谐的版面，被某一完全不同的局部排版动作打破，版面效果从安静、平稳开始变得活跃、高调。常见的几种破坏方式有：

❶ 文本绕排

即文字沿着某个图片或者某一路径的外轮廓进行排版，造成原本完整的文字块好似被挖去了一部分的效果，这种破坏方式比较适合报纸、杂志或画册的排版。

▲上图的色块文字也被当作是图片来处理。

❷ 文字混排

即把标题或者某些关键词，用与版面其他文字完全不同的字号、颜色、排版方式或者字体来排版，使得整个版面被严重破坏，后者的字号往往需要很大。

04.破坏背景

即在原本干净的背景中加入图片或者图形，使版面在视觉上变得更加跳跃，但是由于这些元素都是位于背景层，所以对正文不会造成实际性的干扰。需要注意的是：这些图片和图形绝对不会是那种很漂亮、很正规的，否则就达不到破坏的效果。

05.破坏文字/版式

比如利用色块覆盖住原本版面中的部分文字，然后在色块上用不同于之前的排版方式排列一些文字，于是就有了双重破坏的效果。当然，被覆盖的文字要么不重要，要么只是覆盖住了局部而已。

06.破坏文字/图片

即通过某种处理方式对版面中的图片和文字进行整体破坏，例如：

❶ 用色块或图片同时遮挡住原本版面中的文字和图片。

❷ 同时对版面中的文字或图片使用某种特效，比如错位裁切，这种做法通常是为了表达某种诉求。

07.破裂的效果

塑造一种冲破或破裂的效果

比如人物或动物从一张扁平、完整的画面中冲出来，好像捅破一张报纸一样，呈现出冲破的伪3D效果。

再比如把一张完整的画面做出被撕裂或破碎的效果，好似墙壁开裂或者玻璃被击碎的瞬间，这种破坏方式也可以让原本常规的画面变得更有视觉冲击力，以及更有深意。

做多了干干净净、整整洁洁、很美好的设计，是不是觉得有点无聊、乏味，受众估计也有这种感觉，所以何不搞搞破坏，打破这种安静的状态，给作品一点不一样的东西，这样的作品或许才更有生机。在设计的世界里，没有哪种做法是绝对正确的，也没有哪种做法是绝对不行的。当然这些出格的设计形式最好要吻合品牌的调性，或者能够帮助表达设计内容，不是纯粹为了破坏而破坏。

原文地址：葱爷（公众号）

作者：葱爷

转载请注明：学UI网》杰出的作品就是在普通的作品上“搞破坏”

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1659)

172022-1

什么是设计中的对比？

对比是设计中的一个重要设计原则，因为对比能够有效组织界面信息，并构建设计层次，通过这样来向用户传递关键重要信息。

合理准确的运用对比原则可以有效的提高设计质感，当然如果过渡使用对比有时候也会适得其反，比如颜色对比过于强烈，反而影响了视觉阅读。

有了对比原则，我们在组织信息排版、质感塑造等都能快速有效的进行设计，下面我们来看看在UI设计中如何应用颜色和形状对比原则。

#O1.颜色对比

色彩对比中，应用较多的就是色相对比、冷暖对比、明度对比等。两种以上色彩组合后，由于色相差别而形成的色彩对比效果称为色相对比。它是色彩对比的一个根本方面，其对比强弱程度取决于色相之间在色相环上的距离（角度），距离（角度）越小对比越弱，反之则对比越强。

色相环

如上图，在色相环上，色相之间的角度大小就决定了对比的强烈程度，因此我们在选择色彩对比时候需要注意。

例如，下面这张设计图就是青绿色与紫色之间的对比，属于色相对比

下面红色和黑色组合，形成强烈的对比。

当然在色彩对比中除了色相对比，还有明暗对比

上图配色色板中，分别应用色相和明度之间的对比。

#O2.形状对比

形状对比一般是有规则和无规则形状，比如上面的圆形和液态的有机图形进行组合，前者较为规整，后者往往弯曲且不对称，二者搭配使用可形成良好的对比。

那么在UI设计中的形状对比一般都是在棱角之间出现较多或者图标符号。

如上图几何形状，它在UI设计中一般都是容器形式存在。形状用好了也可以打破传统的固有的规整设计思路，从而在众多产品中形成竞争。

比如这样的形状应用，和现有市面上规整的图形设计形成明显的差异点。

色彩的包装也可以使用不同形状来定义，差异化中图形设计的趣味性。

Google的Materials you Android 12设计语言的出现，将不同形状容器的组合在设计中，演变出多种组件容器，这样的思路，值得我们深入思考与学习，为什么我们之前就想不到这样的思路？

形状对比在产品设计中的应用有更多无限可能，现在最难的还是大家的思维限制，希望以一种开放的心态去挑战设计更多可能性。

界面中圆形和方形的形状容器混合设计。

#O3.大小对比

在UI设计中对比其实就是差异化，实现信息层次的一种方式。在使用大小对比时候，大的元素就需要更大，小的就让它更小，不能拖泥带水，不大不小。

当遇到颜色相同的版式设计，可以通过大小来做层级区分。

上图界面设计中，标题文字最大，周边运用留白，使得信息层级区分更明显。

定位图标最大化显示在地图中心区域，聚焦，引起用户的关注和留意。

好了，今天文章差不多到这，我个人觉得图形的对比用好后将是构建竞争力最有效的设计手段，突破同质化壁垒，大家下去可以多去练练，找到设计的感觉。

原文地址：功夫UX（公众号）

作者：功夫UX

转载请注明：学UI网》做设计这么多年，发现这个技巧真的很实用，但很多人都忽略了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1486)

172022-1

底部标签栏动效设计 10 佳案例

seo达人

01. 多层颜色叠加的动效表达

图标动效是底部标签栏动效表达最常用的形式，动效的形式也是丰富多样，各自都有属于自己的特点。如何才能完美的结合动效进行演变，还能带来差异化的效果，是动效设计过程中构思的主要方向。

自如 APP 的设计整体感官体验都是做得非常不错的，在底部标签栏动效设计中，采用多层颜色叠加动效，呈现出来的动感和视觉感官很棒。多层颜色的变化增强了点击过度的吸引力，结合动效的流畅度强化了状态变化的存在感，能够让用户明确自己的操作路径。

02. 弹性十足的动效设计

动态相较于静态表达而言，不仅丰富了感官体验，也带给用户操作的趣味性，动感的体验更能吸引用户的关注度。动效设计的流畅度和趣味性决定了点击欲，动效演变过程中的感官强度决定了用户的记忆度。

喜马拉雅 APP 底部标签栏动效设计，弹性十足的效果让人过目不忘，有种想要反复点击的欲望。弹性动效变化中流畅自然，统一的短线表达强化了元素的一致性，点击后的内部缩小版也做到了风格统一。是一个非常不错的动效案例，动效设计技巧值得收藏。

03. 循环动效让你感受时刻在场

动效存在于底部标签栏设计中的目的是为了强化点击状态，突出当前功能的存在感，让用户明确自己的操作路径。在体验的众多产品中，图标动效通常是在点击状态之后进行过度而存在，只播放一遍。循环播放算是一种差异的体现，因此体验的时候做了记录。

在机场 APP 底部标签栏的图标动效，点击状态进行图标动效过度以外，动效将循环播放，时刻突出其存在感。循环动效让用户感受时刻在场，明确自己的操作路径，不会迷失方向。

04. 流畅的上下滚动式切换设计

图标动效在底部标签栏设计中运用最为普遍，而通过动效进行内容切换式设计相对较少。开眼 APP 利用上下滚动的动效来设计底部标签栏，给设计师们提供了另一种设计解决方案。

纯图标展示会增加用户的理解成本，而通过点击之后的文字表达可以提高用户的理解度。通过点击之后的滚动形式切换文字和图标，动效非常顺畅自然，体验度非常友好。

05. 图标动效结合基因符号

如何在设计层面体现产品特性，形成差异化的设计，是设计师不断探索的方向。结合品牌元素形成品牌基因是比较常用的形式，也有从产品属性层面出发，提炼出基因符号或者体现产品属性的符号。

作业帮 APP 在进行底部标签栏设计时，图标动效在演变过程中结合加减乘除（+-x÷），突出产品属性。提取了学习中大家熟知的符号，运用到动效的表达中，不仅增加了动效的趣味表达，也突出了产品特点。

06. 收缩式交互动效设计

动效除了在元素层表达以外，也可以结合交互动作表达，当交互动作变化时，以动效的形式实现收缩式底部标签栏设计。

马蜂窝旅游 APP 在进行底部标签栏突破的过程中，除了采用新颖的悬浮层设计以外，在上滑浏览内容时采用隐藏局部功能的处理方式，让内容的输出面积更大。在下滑或者停顿的过程中恢复默认导航，探知用户行为习惯并给出不同的交互反馈，带给用户更高的操作体验和互动趣味性。

07. 带你感受水花四溅的动效

动效的表达往往细节的构思最为重要，大方向的设计差异不大，体现出细节的设计才能带给用户更有温度的体验。在细微之处突出自己的特点和强化品牌元素，哪怕只是一个细微的符号表达或者动效变化，都值得深入推敲。

斗鱼 APP 底部标签栏动效设计结合了水花四溅的感觉，在点击图标进行演变过度时，图标四周会随机弹出小圆点，就像水花四溅的感觉。这种动效的体验就像你要去抓鱼，鱼儿受到惊吓激起水花四溅，带给用户亲切自然的场景体验。动效设计流畅自然，趣味性表达增强了用户的点击欲，一个非常不错的案例设计。

08. 动效简化设计表达

图标动效在演变过程中通常改变了默认和点击状态，动效过后需要有明显的区分，动效结果的设计尤为重要。

淘票票 APP 底部标签栏动效表达之后采用更为简洁的设计风格，利用简单的几何图形组成面性图标。动效流畅自然，动效之后的设计处理技巧是一个不错的构思，越是简单的图形越能被记忆。如何把简单的图形设计得有特点，结合动效的演变是一个思考的方向。

09. 动效让设计突破束缚

所谓的规范并不是限制我们突破的枷锁，“规范是死的，人是活的”。我们要做灵活的设计，而不是受制于规范的束缚性设计。

美团外卖 APP 底部标签栏图标设计结合 IP 元素，突出了自身设计的差异，也强化了品牌曝光。在图标动效的表达层面，不仅过度流畅自然，点击后的变化突破了规范性质的标签栏高度。突破束缚的设计效果也是显而易见的，用户当前路径的操作非常显著，也是一种不一样的设计处理技巧。

1

10. 利用动效打个响指

一个俏皮可爱的动效总能让人印象深刻，不仅可以吸引用户关注和记忆，也能形成自己的独特风格。

BOSS 直聘 APP 底部标签栏动效设计中，有一个特别讨巧的动效案例。在“有了”这个模块结合了打响指的动效表达，就相当于有了一个想法，不自觉的打了一下响指，非常的贴合寓意表达。一个简单的动作不仅准确的表达出模块含义，差异化的动效表达突出了该栏目的存在感，提升了用户的关注度。

小结

感官体验是为了记录优秀的设计处理技巧，多看、多分析、多总结，才能有助于提高我们的项目设计效率。关于底部标签栏的动效设计还有很多优秀的案例，本期仅仅作为抛砖引玉，所选案例仅代表个人喜好，希望可以带给大家更多灵感启发。

文中案例选择和描述如有补充，欢迎大家留言交流，我们互相进步。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》底部标签栏动效设计 10 佳案例

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1843)

172022-1

插画教程 | BlingBling小静物绘制过程

seo达人

给大家分享一个在B站直播的小静物的绘制过程。完整的无广告演示请查看B站的视频，也欢迎大家加我们的群，直播会在群内通知。

教程案例：

一、草稿

先动手画草稿~选勾线-头墨画笔把果子的形状画出来，画的时候可以轻松一些。注意疏密与大小变化，把节奏感画出来。

二、填色

1.上色之前给背景填充了一个颜色，我一般不会在纯白的画布上填色。果子、树枝、叶子都分图层上固有色，方便后面修改。

2.果子图层根据光源用喷枪笔刷画出颜色的变化，离光源近的偏橙黄，远的偏红紫。

3.每块的颜色上完之后，根据光源画出投影。

三、刻画

1.在果子的图层上新建图层，把把画布放大了去画出每个果子的形状与遮挡关系，形状不好的要及时去调整。

2.用喷枪画笔把背景加上简单的光影，让背景不至于太单调。

3.继续细化，不断的去调整果子的关系，想把果子画的晶莹剔透一些，所以反光画的比较强烈，最后再点上高光，水润的感觉就马上出来啦。

4.给视觉中心的果子加了一些高光点，增加质感。

5.利用色阶、色彩平衡等图层调整画面，让光影更强烈，再用杂点笔刷加一点光点，最后打上id就完成啦。

原文地址：空青肆绘（公众号）

作者：风绽

转载请注明：学UI网》插画教程 | BlingBling小静物绘制过程

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1808)

172022-1

阿红爱上了阿绿，要怎么配才会好看？

seo达人

原本相爱的两个颜色

阿红与阿绿，

因色彩过度的差异化，

被主宰颜色的色环拆分成了180度。

这个距离比横跨中国最远的

抚远县到瑞丽市的5414公里还要遥远，

并写上了咒语让他们永远都不能靠近。

[优化输出图像]

一旦让红绿色接近，

就会被大众盖上红配绿是最丑配色的骂名。

如此遥远的红绿色跨度，怎么配才会好看？

调整高低的纯度进行配色，则是在告诉我们，感情上有一定的性格差异才能取长补短，让两者色彩的使用不在那么单一化，而明度的亮暗变化像是女生时常过山车的情绪，对错完全看脸色。

当你用礼物表达情愫而不知如何使用时，红绿不同的纯度与明度配色下，可以找到最适合的那个情景帮助你俘获对方的芳心。

还是那个礼物，加入红绿配色和文字后，过高的纯度配比使得产品变得尤为浮夸，加上本身产品的金色与高纯度的红绿结合在一起时，仿佛印证着那个永远都无法靠近的诅咒。

阿绿深爱着阿红，为了阿红它可以舍弃自己鲜亮的外表，改变自身明度的亮暗，让阿红成为整张画面的聚焦点，对比之下，我们看到的不是诅咒让他们无法靠近，而是付出才是打破诅咒的唯一真理。

[调整输出图像大小]

但是诅咒的封印过于强大，相同的配色换了一个产品后又回到了原点，面对困难，红绿色选择了共同进退，一起调低了纯度的色彩，达到符合产品本身的调性。

[优化输出图像]

多尝试改变配色的比例是生活柴米油盐之外所带来的的仪式感，也是维护感情最可靠的良药。

一个吹风机，红绿对等的配色，像是在诉说着平淡无趣的生活。

试着改变配色的比例，给生活做出一些改变，让吹风机下生活的朴素感，多些有趣的行为。

不仅这样，还可以尝试改变配色的方向和形状，当阿绿跌跌撞撞的奔向你，对阿红说着：你也不能一个人离去，我们无论如何要在一起。

[优化输出图像]

红配绿的诅咒在这一刻被真爱彻底瓦解，就像现在的配色质感，证明了红配绿是真的好看。

正逢圣诞节更适合

红配绿的案例

▽

步骤1：

在画布中填充红色底并用绿色作为描边，将圣诞节英文放置到画面最上方居中，并利用五角星填充到文字中形成独特性。

步骤2：

阿绿爱上了阿红，为了给阿红过节日，想着法的变出圣诞树的阿绿让自己成为这个圣诞节最绿的仔。

步骤3：

线条绘制一个三角区域，利用三角结构的构图方式，对齐进行放置文字编排。

步骤4：

合理使用参考线会帮助排版更加快捷，并且整个版式会显得干净利落，分布均衡，四角的小铃铛是阿绿给阿红特地准备的小心思。

最后我们看下版式的框架，配色与构图是相互存在的，好用的构图如果没有好的配色基础，也依然难以做出好的设计，就是这样，喵~~~

，

试着改变配色的比例，给生活做出一些改变，让吹风机下生活的朴素感，多些有趣的行为。

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》阿红爱上了阿绿，要怎么配才会好看？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1704)

162022-1

设计思考和生活

资深UI设计者

APP载入记忆，从哪里退出，就从哪里载入，减轻对特殊群体的打扰

不知道大家有没有这种苦恼，不管啥app，一打开就是弹出各种活动弹窗和广告，卡到想摔手机（以下分析，高端机大佬请忽略）。

分析思考

虽然产品为了促销和增加用户粘性，经常性的开展各种活动，来诱使用户参与，但是，还是有很大一部分用户不会参与，甚至看都不想看一下就点击关闭，下面用部分用户举例说明。

(1)将软件当作纯工具的用户：这部分用户使用你的软件，完完全全是因为你的软件能满足他的纯需求

，他不想参与任何活动，你只要给他解决问题就可以了。比如“酷狗”，A用户可能在一个悠闲的下午，心情到位了，一如往常的想听听他之前收藏的歌曲迎合一下自己的小情绪，而他一打开酷狗，开屏页是5S广告，首页又弹出活动广告，如果误点了，说不定还要跳到哪位小姐姐的直播间去（酷狗的流氓引流手段，本人误点了很多次，次奥，人家用户压根就不喜欢看直播，你的后台不清楚？），而这个直播的加载过程非常卡顿和费时间，而你也不想看直播，再使用手势返回操作，结果多划了一次，又退出产品了，需要重新进，这个时候你是不是要裂开了？好心情都变坏了，甚至一边卧槽一边想当场摔了旧鸡换新鸡或者卸载软件！（特别是用了1年以上的安卓鸡）

(2)特殊群体用户：包含非适龄用户（年龄过大或者过小），非同等语言的用户（沟通有代沟，三观不同步）。

例如“全民K歌”，现在推出一个活动，要为祖国庆生pk，那么在推送的时候，是不是要考虑推送的人群，像那种只听唱摇滚嘻哈的，你认为他们会参加？就算他们参加，作品会不会跑题？会不会因为一个作品不符合节日气氛而让不明真相的网友喷的狗血淋头？既然这样，那你推送给他的意义就不再了，说不定适得其反。（有的朋友可能就要开杠了：全员推送，可以最大程度的唤起用户参与，就算不参与，也可以形成告知的效应，但我上面那条说了，部分用户手机卡顿，用户只想简简单单的用你的软件解决需求，你如果不考虑他们这部分人群的使用感受，就要天天挨喷）

问题总结：

遇到以上的问题，用户要么忍让，要么就是换软件，如果因为这些原因流失了用户，非常不值得（可能你会说，天下乌鸦一样黑，换了软件也逃不出这个套路，是的，市场的软件运营起来都是这个套路，搞钱！搞钱！搞好多钱！但是我相信，一款为用户着想的产品，最后不一定能赚大钱，但用户一定会感激产品的细节，为他流畅的解决了生活所需！比如微信干净的的聊天界面）。还有值得注意的一点，这部分用户如果能照顾好，将会成为你最忠实的用户，就拿将软件当纯工具的用户举例吧，ta很懒，你的软件是他的工具，只要你功能还在并且好用，他基本不会去换软件，即使别的软件摆在眼前，他都不会去下载（除非给他钱，相信我，钱到手了，他发现软件不好用或者用不惯，他会麻溜卸载），因为对他来说，用哪个软件，都只是工具而已，他用惯了你的，又觉得你的软件用起来很流畅，所以会一直用，只要留着他，他就可能随时在你软件上面消费。

细节思考，解决问题

上面的问题，其实就是同一个软件，需要以不同的方式去对待不同的用户的问题。

现在互联网各种ai技术均已成熟，且大体量的产品基本都有自己的后台去分析用户的操作习惯和路径，形成用户画像或用户的心智模型数据，我们掌握着这种数据，可以去使用以下方式对待小众的特殊群体。（拒绝杀熟）

(1)精准投送，减轻对特殊用户群的打扰：比如那个在“全面K歌”里面只听唱嘻哈摇滚的用户，通过后台分析，构建属于他的用户画像，然后下次推送“为祖国庆生“的活动时，则可以不必为他强制弹窗推送，留一个icon入口足够了，减少他的操作，给他足够流畅的体验。

(2)载入记忆，从哪里退出就从哪里进入：用户都很懒，特别是设备不好的用户，每次打开应用，载入时很卡顿，甚至在打开的过程中会放弃，那么我们可以基于用户画像，让那些特殊群体上次从哪里退出，就从哪里进入，（这里我解释一下为什么是对特殊群体才这样，因为如果都这样，首页不是没人看了嘛，活动还要不要做？产品还要不要吸金？打工人还要不要发工资？）而特殊群体，，，真的，他不想消费，你把刀架到他脖子上，他都不会消费。

结尾

我们做产品，要服务大众，也要为公司产生收益，但这不是我们放弃特殊用户的理由，微信之所以成功，是因为他真正做到了全民皆可用，聊天界面简洁，纯粹的为人民服务的好工具。甚至每一次小功能的更新都能上热搜，我们的产品比不得微信，但是我们服务用户的态度可以像它看齐。愿在坐的各位都能做出属于自己的“微信“

文章来源：站酷作者：一剑生死

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1420)

162022-1

B端设计师·如何从0到1建立3D规范及组件库

资深UI设计者

大家好，新年了，先祝大家新年快乐。这次分享一下自己学习道路上的小总结，仅此而已，以做纪念。希望能和大家多多交流。感谢。瑞思拜~

本次给大家带来一篇关于如何从0到1的建立一个符合自己产品调性的3D组件库，以及如何运用到日常的工作中去，并可以大幅度提升设计师产出的效率，起到降本增效的作用，还可以赋能给你的业务（尽量体现在汇报PPT中），让你在写年中年度总结的时候不会被问到，“你的价值又在哪里呢？”这种不得不回答的问题。虽然自己感觉还是做的不成熟，但是还是想分享给大家，自己也做一个沉淀，继续努力。我想在你看完这篇文章并且可以做出尝试以后，你和你的老板一定会喜欢。

一.首次升级改版

我们现在看到的无论是阿里云，华为云，腾讯云，金山云等等这些优秀的云产品设计当中，都在大量的使用3D建模渲染与2.5D风格互相搭配的运用。京东云官网也分别在4月和10月份各做了一次大的改版升级，很有幸都有参与到当中，那么就先说4月份的品牌站改版，以下的效果，用C4D的默认渲染器完全可以做到。

1.早期2.5D的积累

这次的改版是第一次从2.5D风格转向3D风格的探索性尝试。再此之前，设计师们有着3年多的2.5D风格组件库的大量积累。面向新用户以全新的面貌向用户传递科技引领，助力全球产业数字化升级，推动实体经济高质量发展的使命。

早期同学们积累的2.5D组件库。

第一次升级后的组件库。

第二次升级后的组件库。

2.组件库及规范的建立

在3D规范的产出过程中，我们严格围绕着新的设计策略「通用」和「差异」两个点相互融合，以提炼设计通用的元素，差异以规范为基础。根据不同的场景化的突出特点，3D及留白节奏的合理使用，突出3D的干脆，严谨，从而约束好网站的整体调性，让用户无论是在视觉感官体验上还是使用体验上都十分舒适。所以我们最后得到的四个关键词即为：探索、开放不封闭、共生攻坚和用户信赖。

3.建立组件库的四个维度

为了利用三维与二位的冲突感凸显视觉表现的主体信息，强化是觉得一致性。表达出通透和呼吸的开放组合。因而我们映射到了色彩，质感，字体，构成四个维度上。

/1.色彩：

在色彩上以京东红为底色，黑色代表着科技专业以及智慧未来。在规范出主色调的同时为了保持京东科技品牌调性的一致性规定了品牌的业务色及辅助色，同时也规范了使用颜色建议的搭配以及占比关系，作为设计师使用时的有效参考。

/2.字体：

在字体上，规定京东朗正体为品牌名称级产品名称字体，在楼层中的字体为方正兰亭黑系列，英文字体为思源黑体。字体行高的1.5倍行距，段落间的上下间距为字号的1倍。

/3.构成：

在构成上，用高度概括简单干脆的几何形式展现，既可以突出文字的信息层级，又渲染了整体的气氛进而增强了页面层级更加清晰的效果，强化了严谨的几何形体，让用户感受到秩序化。

/4.质感：

在质感上，三种不同的材质——金属材质、发光材质以及磨砂玻璃材质。

4.渲染及模型参数

在规范好了基础的四个关键点后，进行了渲染的尝试，最后投票确定了一套大家都认可的效果。并且产出了预设工程文件，方便设计师建立白模且通过设计评审后直接导入进行渲染。

5.动画的渲染及精灵图的制作

为了满足页面中部分鼠标移入移出的交互效果，我们渲染了动效以及精灵图的制作。关于精灵图的制作，在之前的文章当中我们有详细的说明和制作方法，这里就不再赘述。

以上就是我们的第一次3D视觉升级，这一次升级做的还是比较系统且完善的。从构建组件的价值开始到设计策略——竞品分析——实现策略——规范要求——模型——颜色——质感——构成——渲染——动画——应用场景和最后的开发上线。

第二次升级改版

那么到了10月份，为了更加贴合业务和升级产品调性。进行了第二次的改版，这一次的改版我使用了新的OC渲染器以及在原有的基础上做了完善和调整。

1.通用底座的新增

幸运的是这一次改版我就顺手了很多，还是老生常谈规定了规范说明、模型、品牌颜色、质感、构成方式等等。新增了对通用底座的规范。更加规范了使用。

2.HDR环境贴图

由于使用了OC渲染器，对环境的设定以及HDR贴图的使用变的十分重要，尝试了很多效果。

3.灯光参数

至于打光，没有做过度的布置。在环境亮度满足的情况下，只用了2盏补光，并且做了参数的说明。

4.组件配色占比

规定了每种颜色的占比参考。

5.组件渲染实例

下面看一些我们渲染出来的实例。以及我们优秀的小伙伴建模并渲染的Banner。

那么以上就是本文的全部内容，希望能对大家的日常工作有一些帮助。很多地方还不成熟，会继续沉淀把更好的东西分享给大家。瑞思拜。

文章来源：站酷作者：秦能补拙
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2150)

132022-1

让数据更美！5个实用的数据图表设计技巧

seo达人

1) 颜色的运用

颜色的巧妙运用能为数据提供更加丰富的内涵。以最常见的红、黄、绿三种颜色为例，分别代表了不好、中性、好的意思。

现在越来越多的产品愿意使用品牌色作为图表的主色调，通过调整品牌色的深浅程度，做成一组同色系的色板供图表使用，其中颜色越深代表数值越大，颜色越浅代表数值越小。

如果觉得红黄绿这些颜色太普通，还可以考虑使用蓝色和橙色这类互补色作为调色板。

蓝橙色的搭配相较于红绿色更具有活力，用蓝色表示正值，橙色表示负值，对用户来说也容易理解。

对于颜色的运用，最重要的是考虑可访问性，不仅是图表本身颜色的对比，还要考虑图表与背景色之间也要具有足够高的对比度。

2) 线条和纹理

除了使用不同的颜色，还可以在图表中添加线条或者纹理效果来构建多种多样的图表样式。

▲选择一个基础色，在基础色的基础上添加点、横线、竖线、斜线、网格等多种填充样式，构成一套颜色统一但内容差异化的柱状图系统。

▲线条也可以添加不同的纹理效果。由多种不同颜色的实线组成的折线图往往很难让用户快速理解其中的意思，我们可以为折线添加各种样式的虚线，来提高图表的可用性。

3) 响应性设计

如果要在手机上展示图表信息，需要考虑手机屏幕的尺寸对于图表的适配性。例如PC端屏幕宽度更大，更适合展示多个竖向的柱状图。

同样一组图表如果放到手机端展示，采用横向的条形图会更合适且合理。

▲手机屏幕宽度小，如果PC端的图表直接照搬过来，在一屏上只能显示几个图表，而且还需要用户左右滑动来查看更多图表。

这样的照搬不仅无法一下展示所有图表，缺少直观性和对比性，还会增加用户操作负担，显然是不可取的。

▲如果觉得在手机上使用横向的条形图成本太高，又想让用户一下看到图表的所有内容，可以考虑使用“屏幕旋转”提示，告知用户把手机横过来看图表效果会更好。

4) 标签

标签是图表重要的组成部分，标签的长度、大小都会影响图表整体的效果。

比如有的图表尺寸很小，空间有限，但是标签却很长，如果尽可能在有限的空间中将标签展示清楚，值得我们去思考。

▲在图表中并非所有内容都要始终可见，图表中的数据图就可以传达大部分的信息。如果觉得图表中展示的标签过多，可以隐藏次要的信息，通过鼠标悬浮或点击来触发这些内容。

▲悬停状态是隐藏次要数据同时避免图表在视觉上看着太复杂的解决方法。在悬停时透露更多信息是渐进式披露的重要用途，用户可以在需要时进行交互，并且默认情况下不会造成页面混乱。

另外设计图表的时候，要做到提前规划标签导航，确定长标签的展示方式，考虑怎么放置不会让图表显得太臃肿。

5) 排版和层级结构

现在有很多仪表盘设计得很简约、很现代，这类仪表盘使用超大字号的加粗字体展示几项最重要的信息，既突出重点，又让整个页面有层次和对比。

▲类似的排版能够吸引用户的注意力，通过前期研究确定几个用户最关心的内容，然后将这些内容重点展示，起到强调作用。

最后

最后设计夹整理了深浅两套数据图表源文件, 文件已打包好, 大家后台回复关键词即可领取。

领取方式：关注公众号，后台回复【数据图表】获取源文件

慢慢来比较快，希望对你有帮助！

原文地址：CLip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》让数据更美！5个实用的数据图表设计技巧

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1618)

132022-1

工作经验｜ B 端产品组件设计细节及经验分享（六）

seo达人

1、树形选框和穿梭框的区别？

有同学问我：树形选框和穿梭框有什么区别？

其实这两种组件方案都可以解决 “处理多种选项” 的问题，两者的不同点如下：

树形选框

单一列表的树形选框，其特点为：

1. 通常适用于选项少的场景，不需要频繁上下滚动鼠标查看，选择后的选项结果一目了然。

2. 在页面中占的空间小，也可以放置在下拉菜单中使用。

3. 一般更强调关联性和层级性。比如权限与角色之间的关联；角色与角色之间的上下级关系和权限包含关系。

穿梭框

双列列表的穿梭框，其特点为：

1. 用直观的方式在两栏中移动元素，完成选择行为。一列为源列表，一列最终被构建的项目列表，用户可以看到两个列表中的项目并进行操作，“数据源” 和 “结果” 清晰可见。

2. 占用更多空间，可以展示选项的更多信息，也可以包含更多结构，但左右两列的选项结构须保持一致。

3. 一般强调权限是用于 “给予” 而不是 “复制” ，比如可以用于描述：一个权限从 A 手中转到 B 手中，B 拥有权限的同时，A 不再具备权限。

大家可以对应业务场景，选择更适合的组件。

2、按钮的状态设计

有同学对我说，他看到有的平台按钮的状态分为鼠标 “悬停”、“点击” 和 “按下” 三个样式；有的平台的按钮 “点击” 和 “按下” 的状态一致。所以按钮的状态是根据什么来做定义的呢？是不是越全面越好呢？

1. 按钮状态的设计理念

其实关于按钮的状态分类，在能够给用户基本操作反馈的前提下，并没有绝对的好坏之分。平台之间出现这些差别的原因是由设计系统的设计理念和风格来决定。

举个例子，下图是一个比较夸张的案例：某个组件系统的设计理念是【尽可能模仿真实世界中的交互状态】，图中按钮模仿的就是真实世界中的物理按钮反馈状态，但由于页面上的二维世界不具备三维世界中的“海拔/高度”的概念，所以更多是通过改变或增加颜色、动效、投影等，对按钮进行“高度”的体现。

对于真实世界的按钮，有一些关键的大按钮，在按下去之后会有一种 “咔嗒” 的碰触感，意在告诉用户你已经成功按下了按钮，这对应到二维世界，就是图中按钮的“点击“的效果。

而物理世界的按钮在按完之后虽然会弹回到原位，但很有可能是慢慢恢复到原位，也很有可能是不会回到 100% 的原位，比原位稍微矮一些，所以图中点击后的状态相比于默认状态就缺少了按钮下边缘的厚度感，或者是颜色变得更浅 / 更深，以此来体现差异。

以上所说的组件设计风格，是一种拟真的设计风格。也有一些公司的设计语言，可能是扁平化，追求极简主义，所以会省略这当中的过程，只传达给用户最干脆、直接的反馈。

因此组件的状态效果，在能够给用户明确基本操作反馈的前提下，并不是 “对错” 或 “好坏” 的问题，而是由根据产品定位、功能特性和产品用户的行为偏好等因素来定的设计理念所决定的。

2. 组件状态是不是越全面越好？

这个问题最重要的判断标准是：业务 / 产品是否需要。在业务组件库搭建的初期，一定是以业务为主，“从业务中来，到业务中去” 。当你的业务中对于同一个组件有大、中、小的尺寸需求时，你再做规定也并不晚。这样的好处是：

做好的尺寸规定直接运用到业务中，有现成的检验场景；
不至于白费功夫，做了一大堆的尺寸分类和说明但无处应用；
尽可能减少设计师在查找和使用组件时的多种选项干扰。

另外要注意，如果做了多种尺寸，你需要详细的规范每一种尺寸可以使用的场景和注意事项，避免误用和混用。

很多时候并不是内容越全越好。“全” 但不好用，也会带来新的问题。

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》工作经验｜ B 端产品组件设计细节及经验分享（六）

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1929)

132022-1

画面很空怎么办？最彻底的一次改稿案例

seo达人

最彻底改稿开始了！

看到这张图时，最吸引眼球的恐怕并不是产品而是鲜艳的色彩。

吸取颜色后发现三者色系都非常饱和，影响到了视觉对于主次的着重点。

配色上的占比弱化了产品无法被直观的表达，甚至体现不出产品本身的品质。

产品在一张画面中，除了解决信息内容的编排外，还需要帮助这个产品烘托出整体的氛围感，就像如今都需要美化包装的时代中，酒香不怕巷子深恐怕已经很难再去吸引住客户的目光。

我们分别以艺术、商业、极简三种需求方向来对这次的设计进行三次改稿，记得收藏关注起来。

偏抽象化的圆形表现出灯在聚焦光源的过程，符合具有艺术造型的灯饰所传达的美学。

常规的文字编排貌似影响了所要传达的艺术魅力

换！

用画面四周塑造一个外边框，沿着边框放置文字编排，可最大化的提升内部视觉空间，将着重点锁定在产品上。

嫌背景太简单？那填个色吧，看起来刺眼怎么办？

那就弱化背景的色彩，减少对视觉与产品的影响。

[优化输出图像]

最常用的编排构建原理，可以有序建立出视觉和信息的层级。

放大文字占满上下的版面，产品放置在中心点，利用色块分割出主次关系。

作为商业性案例，增加光感是必不可少的，把灯打开以提升画面的质感氛围。

[优化输出图像]

放置文字信息时，想必大多数甲方对金色的执念已经深入骨髓，那就换成金色，以满足客户的同时，也解决了文字主题的醒目。

[优化输出图像]

再来对比下画面氛围对商业性设计的重要性。

[优化输出图像]

一个纯底，一次简单的图文编排，沿着视线引导下的信息切入产品，点亮了简单却有品质的生活。

想到粉丝说老板喜欢有撞色的设计，于是在上方增加一个互补的绿色。

利用冷暖与色彩的强弱关系制造出引导视线的作用。

回到原图，同样也是冷暖的撞色，但产品是在中心，而不是在左右两侧，缺少明显的强弱关系会容易干扰视线引导的方向。

[优化输出图像]

最后来自粉丝的反馈！

源图像

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》画面很空怎么办？最彻底的一次改稿案例

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2086)

首页

01.破坏图片

02.破坏文字

03.破坏版式

04.破坏背景

05.破坏文字/版式

06.破坏文字/图片

07.破裂的效果

什么是设计中的对比？

#O1.颜色对比

#O2.形状对比

#O3.大小对比

教程案例：

一、草稿

二、填色

三、刻画

步骤1：

步骤2：

步骤3：

步骤4：

1) 颜色的运用

2) 线条和纹理

3) 响应性设计

4) 标签

5) 排版和层级结构

最后

1、树形选框和穿梭框的区别？

2、按钮的状态设计

分类

日历

链接

个人资料

存档