首页

082022-2

1.从业务视角出发

首先需要理解“业务”的范畴，指的是公司层面和产品层面出发，这个问题会影响产品体验、市场占有率、收益、活跃度等关键性问题。我们从业务视角出发挖掘产品问题，可以从两个视角切入：公司发展战略和产品需求。

举个例子，公司下个季度的需求目标，是要提升产品的语音交互次数（语音唤醒次数）。

我们拿百度地图来举例，除了导航，语音就是比较核心的一个功能。我们在使用百度地图时，有时候会使用语音输入地址功能，然后发起导航。在导航过程中，继续唤醒语音为你提供服务，那么这个唤醒的频次，就是这次公司下个季度的战略发力方向。如果这次设计中没有去着重解决这个问题，那么我们下个季度的目标也是无法完成的。

所以大家应该明白理解业务目标了，在做设计前，是一定要了解业务视角下的产品具体需求，这样才能真正解决具体问题。

2.从用户视角出发

回到用户身上，洞察问题，也是挖掘产品问题的主要手段。例如：我们需要思考为谁而设计？这些用户的行为习惯这样？他们的喜好及影响到他们操作使用的问题是哪个？用户期待产品是什么样子的？他们印象中产品应该是怎样？

从用户视角洞察问题，常用的方法有，桌面研究，用户画像，用户旅程图等。

桌面研究：日常用户反馈收集，应用商店收集整理。

用户画像：用户人群细分，不同类型用户需求痛点研究，一般情况下，如果需要这一步，都需要用研同学加入，毕竟他们比设计师更专业可靠。通过用研研究分析，我们可以知道用户期待的产品会是怎样的气质？性格特点。

用户旅程图：按照用户使用产品全流程，需构建一个用户体验路径中的各个时间段的做的任务和触点。例如：一个运动产品分为运动前、开始运动、运动中、运动结束等4个大阶段，那么你要做的就是研究这4个阶段体验糟点研究和分析。分析出来的结论用于设计指导。

通过上面我们可以看出，用户视角出发可以通过三个方向去做，当然并不是每个层面都需要做，你可以选择其中一个点深入。

3.从行业竞品视角出发

从竞品视角出发，帮助我们对照竞品找出自身产品问题，取长补短。从竞品视角出发我们一般都是看什么？以设计师视角为例，分析行业竞品，首先从目标出发，在竞品中找到一部分关键性设计策略。

看功能：竞品核心功能怎么做的？功能布局差异化怎么做的？然后和自家产品进行对比优劣分析。

看体验：核心功能体验路径如何做的？峰值体验如何创造？情感化场景如何设定的。

看视觉：看品牌DNA如何打造，品牌多元化场景穿透思路，品牌差异化创新设计思路。

从行业竞品视角出发，逐步分析设计机会点，在同质化的今天，找到解决策略。

4.写在最后

今天主要讲了，设计改版或者设计探索前期的必备工作，洞察产品问题。如何才能真正的找对问题，洞察到设计机会点。本文从三个视角切入：业务视角、用户视角、行业竞品视角切入，三者环环相扣，系统化思考产品的本质问题。

从侧面也反应出，设计师需要具备多元化思维，多个维度立体化思考，才能精确地定位问题，为产品找到准确的发力方向。

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

作者：Tony

转载请注明：学UI网》做设计改版前，如何准确洞察产品问题

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

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

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

评论(0) 浏览(1037)

082022-2

进了大厂后，我才知道原来我的细节差这么多！

seo达人

01 这个叠加是假的

我看钉钉群里有人问下面这种风格的图标是用的什么模式叠加的：

我之前有做过类似的，其实这个叠加的效果是假的，和毛玻璃一样的原理，中间叠在一起的地方，其实是一个单独的图形：

我们把这个单独的图形加上一个渐变色，放在最上面，效果就出来了：

这个渐变的是可以任意更换颜色的：

所以，这个叠加效果，并不是我们想象中那样用叠加模式调出来的。

反正我是这样做的，供大家参考。

02 包装的问题

下面这组练习，单从图标来看其实是没有啥问题的：

统一性啥的都还ok，但是毁在包装上了，比如黑色方块下面尽量就不用加投影了，太脏了：

其次就是黑色下面的背景色用了一块浅紫色，毫无关联性，不如直接用灰色，或者如果色块是深紫色，背景是浅紫色，那也ok：

总之就是要有一定的关联性，不然就会比较奇怪。

03 关于圆角的和谐性

其实我们在看圆角的时候，并不仅仅只是一组图标之间的统一，单个图标的圆角统一也要注意。

比如之前有一次优化的图标，就是因为图标顶部和底部的圆角大小不一：

今天看的这个是优惠券的：

也是感觉有点难受，但是如果是下面这个优惠券就精致很多：

其实也是因为图标内部圆角统一的问题，都是直角就会舒服很多，但外轮廓是大圆角，里面是尖角就会比较难受。

04 为什么这组半原创没有原版耐看

有一位星友做了一组半原创练习，原版是这组：

半原创是这组：

我们会发现，原创的图标没有原版耐看，为什么呢？

因为原版的细节足够丰富，但是半原创的细节就很单薄，比如我们看原版的奖杯，底座加了两侧矩形，如果只是一条横线就会相对非常单薄普通：

再比如这个放大镜，把手也并不只是一条竖线，而是分了两段，加了细节：

按照这个理念来分析，我们可以发现半原创的几个图标，只有第四个看起来比较耐看，因为它的细节相对比较丰富，可以跟得上原作，其他都相对单薄一些。

虽然第二个钱包纽扣那里也加了两层，但是疏密度有点问题，而且也比较常规。

05 看几组星友精选的练习

最后再看几位同学的精选打卡，非常用心：

第一组是donna的！

融合很多细节，也有很多自己的想法，变得更加丰富、精致、统一，非常优秀：

第二组是小7的

统一性做了很好的优化，又加入了自己的断线想法：

第三组是慢格调的：

很精致，疏密度、大小、长短高矮，用色比例全都进行了统一性调整，非常优秀。

也融入了很多自己的想法，继续加油：

总结

今天就先分享这么多了，每天进步一点点，现在开始，永远不晚！

原文地址：菜心设计铺（公众号）

作者：菜心设计铺

转载请注明：学UI网》进了大厂后，我才知道原来我的细节差这么多！

评论(0) 浏览(929)

082022-2

快学，简单出彩的刷屏级弥散光教程来了

seo达人

什么是弥散光感？

弥散光感的形成，一般由单色或者多色模糊渐变混合，形成虚实集合的模糊效果。在这其中还可以加入不同的元素使其具有新奇和记忆点，来丰富单调乏味的画面，增加画面空间层次感，增添画面的细节，还能聚焦产品的记忆点、优化信息层级，让平淡无奇的排版瞬间活了起来，下面我们就来看看弥散光感的一些优点。

弥散光感的优点

1. 丰富设计细节，增添画面感

2. 聚焦重点，吸引目光

3. 营造空间层次感

弥散光感常用的形式

1. 虚实结合

一侧进行虚化模糊，另一侧保持清晰的轮廓，整体从观感上多了一些动感变化效果。因此，不管作为版面的主视觉，还是作为辅助部分都能有不错的效果。

2. 单体模糊虚化

将一种或者两种以上颜色进行全部模糊虚化掉，一般多作为背景装饰来使用。在此基础还可以加上不同的元素，再增加一点噪点质感，细节满满。

3. 多重混合

使用多种不同模糊方案或手法，以弥散光感为基础，来达到视觉聚焦和丰富设计细节，增添画面感和空间层次感。

如何设计这种弥散光感？

看到这里大家都肯定要嚷嚷，光说不练假把式，安排上菜，我们先从简单的开始，萝卜要一个一个吃，坑要一个一个的埋，翠花，上酸菜！

第一步

首先我们来设计一个banner,这个案例就用最简单的高斯模糊来做，这种全弥散的渐变实现起来比较简单，颜色我设置为如图三个颜色和三个圆形。

第二步

为了保留模糊参数的后期可编辑行，模糊之前，先给三个圆形转换为智能对象，可以三个一起起智能对象，也可以单个一个个的智能对象，后者的好处是可以随时调整图形的位置与大小。然后给智能对象一个高斯模糊（滤镜-模糊-高斯模糊）

第三步

高斯模糊后，有时候有的颜色融合的不是很好，这个时候我们可以通过调整图层叠加模式或者透明度，让颜色之间融合的更协调，案例中我觉得青色过于实了，降低一下透明度70%，到这里，基本的背景就完成了。弥散光感背景就是这么简单！

第四步

确定信息层级

我根据之前的梳理和自己的意愿，把文案分为了4个层级，中文英文的主题信息作为最高层级存在；然后我想突出时间，所以把它放在第二层级，其他元素依次往后排。

第五步

添加主文案

我们先确定大标题，然后再用小字来进行版面的填充与平衡，让整体的文字排版形成视觉层次变化与平衡。由于图形位于对角线位置，在文字分布上我顺应这个构图方式。英文和中文之间互相叠压一点，这是压抑不住都要买的节奏啊！颜色一黑一白加强之间的对比关系。

第六步

添加第二、三层级内容

为了让版面的保持视觉上的平衡，二、三层级的内容和主题内容形成交错穿插，让整体的文字排版形成视觉上的一个层次变化。

第七步

细化排版

到这一步，整体排版基本完成了，但整体感觉信息之间比较独立，我们添加一些装饰元素，让画面更整体饱满紧凑。OK，一张banner完工

马上要过年了，新的一年，换新的工作，所以这次的案例就为大家做个作品集封面，俗话说：作品封面做的好，工资翻番少不了。

第一步

确定信息层级

作品集文案的内容并不如一些展览海报类那么多，所以在整体的编排上难度不是很大，根据内容需要找到自己想要突出的重点即可。

信息文案一般大致上可以分为三种类型，①主题信息适合作为主标题存在；②与活动相关的具体信息则次之，当然，我们也可以根据内容选择性的突出其中某一项，如价格、时间或是其他；③其他的补充辅助性信息，这类的信息一般作补充说明，相对不是很关键，所以适合作为装饰性的元素来放在需要的地方。

第二步

弥散光感背景

建立4个大小不同的圆形，填充不同的颜色，然后单独给每一图层智能对象后，调整各自的模糊数值。根据需要调整图层叠加样式或者透明度

第三步

添加虚实渐变

①光这样的话，稍显单调，所以我们再加点料。新建一个圆形，填充浅蓝色，然后新建2个图层并创建剪贴蒙板，用柔边画笔画深浅2个大小不一的颜色，然后把3个图层合并一个智能对象。

②给智能对象一个场景模糊（滤镜-模糊画廊-场景模糊），场景模糊具有定义不同模糊量的多个模糊点来创建渐变的一种模糊效果。将多个图钉添加到图像，并指定每个图钉的模糊量，从而达到一种虚实模糊不同的模糊效果。本案例定义2个模糊点，一个模糊量0.一个为60，通过一边模糊，一般不模糊来达到一种虚实结合的变化，

③为了让背景更丰富有层次感，再用①的方式再新建一个圆形，填充不一样的颜色，然后执行场景模糊，图层叠加为“色相”，效果如图。

第四步

添加文案信息

为了体现层次空间感，大标题我用虚实模糊的圆形压住一部分，交错穿插，让整体的文字排版形成视觉上的一个层次变化。

第五步

细化排版

细化排版，添加一些辅助元素，填补版面的负空间，这件，一个作品集封面就完成了。

这次来运用光圈模糊做一个展览海报。

“光圈模糊”对图片模拟浅景深效果，选择“光圈模糊”（滤镜-模糊画廊-光圈模糊），将在图像上放置默认的光圈模糊图钉、单击图像可以添加其他模糊图钉，说明:A. 锐化区域 B. 渐隐区域 C. 模糊区域，拖动句柄移动它们以重新定义各个区域。拖动模糊句柄以增加或减少模糊。一个图片中可以添加多个光圈模糊进行重复叠加来达到不同的效果。