文章来源：站酷

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

“个人主页”是一个听起来很熟悉，但又跟“个人中心”傻傻分不清楚的一个模块，一般情况下处于APP底Tab的最右边，通常喊它为“我的”。

这个界面看似没什么挑战可言，给设计师一种“不就是排排版的事儿嘛”的膨胀误解，认为完全在自己射程范围内，整个人都有点飘。

但最近发现，它并不像表面所呈现出的那么简单，其实里面有很多小揪揪需要深挖和思考，所以千万不能小瞧它。

好，废话不多说，上才艺。

 个人主页和个人中心的区别是？ 

讲“个人主页”前，先跟大家捋一下它俩的区别，避免混淆。首先，并没有官方定义它们的名字，只是喊的人多了也就成了它们的名字了。

所以“个人主页”也好、“个人中心”也罢，只是大家习惯性称呼，为了合作过程中大家在同一个话语体系，提效而已。

要说它们俩的区别，其实还是有的。

 什么是个人中心？

个人中心，承载着自己账号信息、设置管理、福利信息等功能的聚合地，主要用于个人信息的管理。

它常见于“工具类”产品中，如下：

对于“个人中心”，设计师要考虑的最核心是：如何解决“效率”问题。因此信息布局合理，视觉尽可能减少干扰，变得格外重要。

什么是个人主页？

个人主页，一般承载着用户个人信息、个人影响力、生产的内容等等，以此突显自己魅力或定位。

常出现在内容、社交、社区类产品中，比如以下产品：

当然，还有一些产品，它既包含“个人中心”，也包含“个人主页”，如下：

整体来看，“个人中心”偏向于个人信息的管理，更关注于“效率”；而“个人主页”偏向于展示自我，关注点更“多元”，会复杂一些，下面会细讲。搞明白了它们的区别之后，大家会发现“个人中心”相对更简单一些。

所以，这次我们先聚焦聊聊“个人主页”。

 设计“个人主页”前思考什么？

在工作中，做任何需求都应该有其目的或目标，不然所有的忙碌都容易沦为资源的浪费。“个人主页”也应有其价值和使命。

像上一趴所说，“个人主页”是为了让用户突显或塑造自己的魅力，很像是一个人的“个人名片”。那么，用户塑造个人魅力对产品有什么价值和收益呢？目标是什么呢？

拿短视频产品举例：如果用户能够在“个人主页”充分展现自己的才华和魅力，从而带来了更多浏览者的“关注”，那他们就更有动力分享或生产优质内容，进而使产品内容更加丰富；从而吸引更多新用户的浏览、留存。

更多新用户的加入、浏览、留存，让内容生产者有更多的涨粉空间，粉丝规模做起来之后再进行商业化。

这样对消费型用户、内容生产者、平台方都有利，进而处于良性循环。

这就是“个人主页”背后的大概逻辑和目的。

 如何进行“个人主页”的设计？

了解完“个人主页”存在的价值和目标之后，那么，作为产品或设计师们需要帮助用户解决几个问题：1.树立人设；2.辅助吸粉; 3.助力变现。

 1.树立人设 

人为什么需要树立人设？

树立人设，本质上是两种目的：获得认可（提升关注/约X），获得收入（提升变现能力）。

如何帮助用户快速建立人设？

个人主页里有几个区域，影响着用户建立人设：a.头图区；b.个人信息区；c.作品区；

a.头图区

头图，指的是“个人主页”顶部的图片区域。

为了让浏览者进入“个人主页”快速了解作者，头图这种处理手法，是很多社交/社区/内容类产品，“树立人设”的标配。

比如：社交类产品的头图，用户要么放自己照片，要么放风景；

大V、商家等角色的用户，会把头图打造成自己品牌的招牌，辅助浏览者快速了解自己定位。

不过，头图尺寸占比要把控好。

尺寸大小会影响界面的“屏效比”和用户“上传门槛儿”，对产品核心数据也有着千丝万缕的关系。

b.个人信息区

个人信息区，也是作者的基础资料。

一般包含着：用户的昵称、账号、简介、标签、粉丝关注量、关系链等信息。这个区域设计时需要重点考虑“信息亲密度”和“信息优先级”。

信息亲密度：指的是如何将更亲近的信息，以信息组的形式传递，减少用户认知成本。

比如下图，常见的社区或内容类产品针对“个人信息区”的处理方式（同一颜色的色块代表亲密度更强的信息。）

同时，“信息组”与“信息组”之间也需要处理好亲密度，比如“小红书”和“instagram”的“好友关系链”与“关注按钮”是放一起的，方便用户快速作出“关注”决策。

c.作品区

作品区的重要性不用多说了，它是作者“树立人设”的重要组成部分，也直接影响着浏览者是否愿意关注的关键因素。

“作品区”设计时，有2个重要因素需要考虑：“作品尺寸占比”、“作品信息外显”。

1）作品尺寸占比:

比如下图，同样是短视频产品，Before作品区一排仅1个作品，剪映2个作品，而抖音3个作品。

单从排版美丑来评价是不负责的，那么如何决策哪种处理手法“对”的呢？

这需要通过自己产品定位分析，以及通过不同布局方式进行上线测试，重点观测核心数据（用户消费时长/作品消费个数/关注率等）的影响情况来决策。

2）作品信息外显:

除了作品本身，它的“辅助信息”也是帮助用户做决策的重要因素。

比如：“Before”除了对作品热度信息（浏览量、评论量等）外显以外，更强调和引导用户进行互动，如：收藏、分享、评论、充电；“剪映”根据产品属性，更强调“使用数”和“作品的描述文案”；“抖音”作品仅外显“点赞数‘，同时通过“置顶”和“刚刚看过”提升用户决策效率。

以上可以看出，头图区、个人信息区、作品区，是让浏览者快速且准确的了解或关注内容创作者重要组成部分，也是内容创作者“树立人设”的主要手段。

 2.辅助吸粉 

辅助吸粉，换句话说也是辅助用户提升“关注率”。

不可否认，清晰的编辑个人信息，产出优质的内容，是用户吸粉的根本，我们能做的只是“助攻”。

所以，在做此类“个人主页”时，我们需要通过设计手段做个靠谱“奶妈”，有几个维度可以尝试：a.强化关注；b.沉淀粉丝。

a.强化关注

衡量粉丝多少，是通过用户是否点击“关注”了内容创作者。

因此身为产品工作人员，在个人主页设计时，除了其它信息呈现以外，在不影响页面信息合理性的情况下，尽可能强化“关注”按钮，引导用户操作。

b.沉淀粉丝

有了粉丝之后，提升粉丝忠诚度和粘性，是每一个内容生产者面临的问题，也是工作人员们需要帮内容创作者解决的。

左边是“快手”，在个人主页内有粉丝群入口；右边是“火山”，打造自己的“圈子”，粉丝们可以在里面发自己的动态，或进行互动。

这么做是为了提升内容创作者的粉丝粘性，给他们更大的空间去运营粉丝，培养感情，打造更忠诚的私域流量。

 3.助力变现 

除了树立人设、辅助吸粉以外，助力他们变现，才能使他们长期扎根于此（留在自己平台）。不然大V们会带着自己圈到的粉丝，去别的地儿赚钱，给你的产品带绿帽子。

拿知乎举例，内容创作者可以在个人主页挂自己的商品橱窗，给符合自己人设的商品带货。

也可以开通付费咨询模块，通过帮助用户解答问题实现变现。

除此之外，还可以做付费Live课程。

再来看下像哔哩哔哩、抖音、火山、QQ音乐等平台，在个人主页都有辅助用户变现的入口。

下面是“声撩”，利用用户声音的优势去变现，比如：陪打游戏（软妹子声音让王者峡谷的汉子们兴奋）、睡前陪聊、睡前连麦等等。

如果你真的很富有，且不想让妹子陪聊陪打游戏，就是单纯的想砸礼物引起注意，右图可以看出，有个入口是直接“送礼”。

这么做满足土豪诉求（博取主播注意），满足主播诉求（变现），满足平台诉求（抽成），何乐而不为。

同时，也越来越多了产品不仅解决C端用户的变现诉求，同时解决B端用户变现诉求。比如，抖音赋能商家，商家号的“个人主页”可以自定义tab，默认展示“商品”tab。

用户不仅能在这里消费作品，还能通过作品建立的信任促进购买行为。

再比如，instagram也提供B端用户开店铺功能。

以上，是关于“个人主页”如何助力用户变现的案例，其实玩法还有很多，这里仅提供一些思路，大家平常玩APP时可以多关注下。

   总结   

总的来说，“个人中心”与“个人主页”最大的区别在于：“个人中心”主要是“给自己看的”，更注重使用效率。

“个人主页”主要是“给他人看的”，更注重突显自己魅力。在满足使用效率的基础上，需要通过产品设计手段帮助用户“树立人设”、“辅助吸粉”、“助力变现”，从而使用户和平台实现双赢，打造一个更完善的生态。

以上，是“个人主页”设计相关思考，希望对你们有所帮助。

文章来源：UI中国    作者：大牙

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

网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，

接下来为大家分享一下我收集到的案例：

（以上图片均来源于网络）

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

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

本文将研究 ES6 的 for ... of 循环。

旧方法

在过去，有两种方法可以遍历 javascript。

首先是经典的 for i 循环，它使你可以遍历数组或可索引的且有 length 属性的任何对象。

for(i=0;i<things.length;i++) { var thing = things[i] /* ... */ }

其次是 for ... in 循环，用于循环一个对象的键/值对。

for(key in things) { if(!thing.hasOwnProperty(key)) { continue; } var thing = things[key] /* ... */ }

for ... in 循环通常被视作旁白，因为它循环了对象的每一个可枚举属性。这包括原型链中父对象的属性，以及被分配为方法的所以属性。换句话说，它遍历了一些人们可能想不到的东西。使用 for ... in 通常意味着循环块中有很多保护子句，以避免出现不需要的属性。

早期的 javascript 通过库解决了这个问题。许多 JavaScript库（例如：Prototype.js，jQuery，lodash 等）都有类似 each 或 foreach 这样的工具方法或函数，可让你无需 for i 或 for ... in 循环去遍历对象和数组。

for ... of 循环是 ES6 试图不用第三方库去解决其中一些问题的方式。

for … of

for ... of 循环

for(const thing of things) { /* ... */ }

它将遍历一个可迭代（iterable）对象。

可迭代对象是定义了 @@ iterator 方法的对象，而且 @@iterator 方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。

在这句话中你需要理解很多东西：

• 可迭代的对象
• @@iterator方法（ @@是什么意思？）
• 迭代器协议（这里的协议是什么意思？）
• 等等，迭代（iterable）和迭代器（iterator）不是一回事？
• 另外，生成器函数又是什么鬼？

下面逐个解决这些疑问。

内置 Iterable

首先，javascript 对象中的一些内置对象天然的可以迭代，比如最容易想到的就是数组对象。可以像下面的代码中一样在 for ... of 循环中使用数组：

const foo = [ 'apples','oranges','pears' ] for(const thing of foo) { console.log(thing)
}

输出结果是数组中的所有元素。

apples oranges
pears

还有数组的 entries 方法，它返回一个可迭代对象。这个可迭代对象在每次循环中返回键和值。例如下面的代码：

const foo = [ 'apples','oranges','pears' ] for(const thing of foo.entries()) { console.log(thing)
}

将输出以下内容

[ 0, 'apples' ]
[ 1, 'oranges' ]
[ 2, 'pears' ]

当用下面的语法时，entries 方法会更有用

const foo = [ 'apples','oranges','pears' ] for(const [key, value] of foo.entries()) { console.log(key,':',value)
}

在 for 循环中声明了两个变量：一个用于返回数组的第一项（值的键或索引），另一个用于第二项（该索引实际对应的值）。

一个普通的 javascript 对象是不可迭代的。如果你执行下面这段代码：

    // 无法正常执行 const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of foo)  



    { console.log(key,':',value) 

}

会得到一个错误

$ node test.js
/path/to/test.js:6 for(const [key, value] of foo) {
TypeError: foo is not iterable

然而全局 Object 对象的静态 entries 方法接受一个普通对象作为参数，并返回一个可迭代对象。就像这样的程序：

    const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of Object.entries(foo))  



    { console.log(key,':',value) 

}

能够得到你期望的输出：

$ node test.js
apples : oranges
pears : prunes

创建自己的 Iterable

如果你想创建自己的可迭代对象，则需要花费更多的时间。你会记得前面说过：

可迭代对象是定义了 @@ iterator 方法的对象，而且 @@iterator 方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。

搞懂这些内容的最简单方法就是一步一步的去创建可迭代对象。首先，我们需要一个实现 @@iterator 方法的对象。 @@ 表示法有点误导性，我们真正要做的是用预定义的 Symbol.iterator 符号定义方法。

如果用迭代器方法定义对象并尝试遍历：

const foo = {
  [Symbol.iterator]: function() {
  }
} for(const [key, value] of foo) { console.log(key, value)
}

得到一个新错误：

for(const [key, value] of foo) {
                          ^
TypeError: Result of the Symbol.iterator method is not an object

这是 javascript 告诉我们它在试图调用 Symbol.iterator 方法，但是调用的结果不是对象。

为了消除这个错误，需要用迭代器方法来返回实现了迭代器协议的对象。这意味着迭代器方法需要返回一个有 next 键的对象，而 next 键是一个函数。

const foo = {
  [Symbol.iterator]: function() { return { next: function() {
      }
    }
  }
} for(const [key, value] of foo) { console.log(key, value)
}

如果运行上面的代码，则会出现新错误。

for(const [key, value] of foo) {
                     ^
TypeError: Iterator result undefined is not an object

这次 javascript 告诉我们它试图调用 Symbol.iterator 方法，而该对象的确是一个对象，并且实现了 next 方法，但是 next 的返回值不是 javascript 预期的对象。

next 函数需要返回有特定格式的对象——有 value 和 done 这两个键。

next: function() { //... return { done: false, value: 'next value' }
}

done 键是可选的。如果值为 true（表示迭代器已完成迭代），则说明迭代已结束。

如果 done 为 false 或不存在，则需要 value 键。 value 键是通过循环此应该返回的值。

所以在代码中放入另一个程序，它带有一个简单的迭代器，该迭代器返回前十个偶数。

class First20Evens { constructor() { this.currentValue = 0 }

  [Symbol.iterator]() { return { next: (function() { this.currentValue+=2 if(this.currentValue > 20) { return {done:true}
        } return { value:this.currentValue
        }
      }).bind(this)
    }
  }
} const foo = new First20Evens; for(const value of foo) { console.log(value)
}

生成器

手动去构建实现迭代器协议的对象不是唯一的选择。生成器对象（由生成器函数返回）也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样：

class First20Evens { constructor() { this.currentValue = 0 }

  [Symbol.iterator]() { return function*() { for(let i=1;i<=10;i++) { if(i % 2 === 0) { yield i
        }
      }
    }()
  }
} const foo = new First20Evens; for(const item of foo) { console.log(item)
}

本文不会过多地介绍生成器，如果你需要入门的话可以看这篇文章。今天的重要收获是，我们可以使自己的 Symbol.iterator 方法返回一个生成器对象，并且该生成器对象能够在 for ... of 循环中“正常工作”。 “正常工作”是指循环能够持续的在生成器上调用 next，直到生成器停止 yield 值为止。

$ node sample-program.js
2
4
6
8 

    10



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

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。

--手机appUI设计--

 （以上图片均来源于网络）

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

  更多精彩文章：

       手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）

       手机appUI界面设计赏析（八）

      手机appUI界面设计赏析（九）

       手机appUI界面设计赏析（十）

先来了解一下项目的背景。Conduira online是一个线上的教育平台，为准备考试的用户提供有用的工具和资源。这个平台目前有一个侧边导航栏，上面有11个选项。后来由于平台的变化，将主导航的选项缩减到3个——主页、实习和课程。

导航的数量变少了，团队又迎来了新的问题：是应该继续保留侧边导航的设计样式还是切换成顶部导航的样式呢？

为了做出最合理的选择，我们需要回答三个基本的问题。

主导航中有几个选项？

在选择导航时回答这个问题很重要。这里介绍一个有趣的的交互概念叫做视觉固定（Visual Fixation）：注意力一直保持在同一个地方。

在顶部导航中，一个视觉固定点通常只适合一个选项。然而，侧边导航上的单一视觉固定点可以同时容纳两个选项。

结果很明确。与顶部导航相比，用户在一次视觉观察中可以在侧边导航上查看和感知更多菜单选项。当然顶部导航也有自己的优势，为每个菜单项赋予各自的权重，而不是让它们的重要性被其他选项分散。

对于具有过滤选项或带有二级菜单的电商网站，视觉固定的概念起到了非常重要的作用。因为在这些情况下，我们希望用户能够在单一的视觉点上尽可能多的选择。

Tips：这里的选择仅仅取决于界面上有多少选项。如果主导航的菜单项不多于5个，只需使用顶部导航，这样能够更好地控制用户在整个平台上的体验旅程。

主导航与选项优先级的关系？

用户在浏览网页或App时会有各种各样的浏览顺序，其中一种就是「F型模式」。

看起来像这样：

F型布局的特点是将注视力集中在页面的顶部和左侧:

• 用户首先以水平移动的方式浏览内容区域，这个动线构成了F型布局的顶栏；
• 接下来用户扫描页面左侧的垂直线，进行第二次水平移动浏览。随着路径越来越长，阅读覆盖的区域一次比一次短，构成了F型布局下面的部分；
• 最后用户以垂直移动的方式浏览整个页面的内容。

这种模式的含义是同一页面上的第一行文本比后几行文本受到更多的关注；每行文本左边的几个字比后面的文字接受度更多。

因此，在顶部导航中最左边的选项比其他选项具有更多的视觉权重，因为它位于主要视觉区域，优先级更高。

侧边导航采用了垂直移动，这是用户浏览网页的一个自然方向，但是选项优先级的排序是个限制。当选项的优先级相同时，可以使用侧边导航，这样用户就可以完整浏览列表并确定对他们重要的内容。

是否考虑使用二级导航？

如果是的话，可以考虑利用以下两种设计样式：

水平导航——在页面顶部设置一个主导航，在主导航下面设置二级导航进一步来区分内容。

侧边栏——在顶部设置一个主导航，然后在侧边设置一个侧边栏菜单来处理其他内容。

总结

顶部导航和侧边导航之间的选择实际上取决于以上三个基本的问题。

另外由于现在的设备有了更大的屏幕尺寸，如今许多设计趋势已转向侧边导航，因为它看起来更干净并优化了更多的屏幕空间。

最后将导航的选择归结为两点：

• 主导航包含的选项数量;
• 是希望用户根据优先级浏览项目，还是希望用户可视化地浏览并根据其偏好选择项目。

文章来源：优设    作者：Clip设计夹

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

通过分析市场上的竞品，能够让设计师在短时间内快速了解自己所做产品在整个市场中的定位。

文章来源：站酷    

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

Flutter 构建模式

目前，Flutter一共提供了三种运行模式，分别是Debug、Release和Profile模式。其中，Debug模式主要用在软件编写过程中，Release模式主要用于应用发布过程中，而Profile模式则主要用于应用性能分析时，每个模式都有自己特殊的使用场景。下面简介介绍下这几种模式：

Debug模式

Debug模式又名调试模式，Debug模式可以同时在物理设备、仿真器或者模拟器上运行应用。默认情况下，使用flutter run命令运行应用程序时就是使用的Debug模式。在Debug模式下，所有的断言、服务扩展是开启的，并且在模式对快速开发和运行周期进行了编译优化，当使用调试工具进行代码调试时可以直接连接到应用的进程里。

Release模式

Release模式又名发布模式，此模式只能在物理设备上运行，不能在模拟器上运行。使用flutter run --release命令运行应用程序时就是使用的Release模式。在Release模式下，断点、调试信息和服务扩展是不可用的，并且Release模式针对快速启动、快速执行和安装包大小进行了优化。

Profile模式

Profile模式只能在物理设备上运行，不能在模拟器上运行。此模式主要用于应用性能分析，一些应用调试能力是被保留的，目的是分析应用存在的性能问题。Profile模式和Release模式大体相同，不同点体现在，Profile模式的某些服务扩展是启用的，某些进程调试手段也是开启的。

调试模式

在 Debug 模式下，app 可以被安装在物理设备、仿真器或者模拟器上进行调试。在Debug模式下，可以进行如下操作：

断点 是开启的。

服务扩展是开启的。

针对快速开发和运行周期进行了编译优化（但不是针对执行速度、二进制文件大小或者部署）。

调试开启，类似 开发者工具 等调试工具可以连接到进程里。

如果是在 Web 平台下的调试模式，可以进行如下操作：

本次构建 没有 最小化资源并且整个构建 没有 优化性能。

为了简化调试，这个 Web 应用使用了 dartdevc 编译器。

默认情况下，运行 flutter run 会使用 Debug 模式，同时 IDE 也支持这些模式。例如，Android Studio 提供了 Run > Debug… 菜单选项，而且在项目面板中还有一个三角形的绿色运行按钮图标 。

Release 模式

当你想要最大的优化以及最小的占用空间时，就使用 Release 模式来部署 app。 release 模式是不支持模拟器或者仿真器的，使用 Release 模式意味着。

断点是不可用的。

调试信息是不可见的。

调试是禁用的。

编译针对快速启动、快速执行和小的 package 的大小进行了优化。

服务扩展是禁用的。

对于Web开发来说，使用 Release 模式意味着。

这次构建资源已经被压缩，并且性能得以优化。

这个 Web 应用通过 dart2js 编译器构建，以确保更优秀的性能。

Profile 模式

在 Profile 模式下，一些调试能力是被保留的，足够分析你的 app 性能。Profile 模式在仿真器和模拟器上是不可用的，因为他们的行为不能代表真实的性能。和 release 相比， profile 模式有以下不同：

一些服务扩展是启用的。例如，支持 performance overlay。

Tracing 是启用的，一些调试工具，比如 开发者工具 可以连接到进程里。

在 Web 平台使用Profile 模式意味着：

资源文件没有被压缩，但是整体性能已经优化。

这个 Web 应用通过 dart2js 编译器构建。

调试工具

在Flutter应用开发中，有很多工具可以帮助调试 Flutter 应用程序，常见的如下所示。

开发者工具，是一套运行在浏览器的性能及分析工具。

Android Studio/IntelliJ 和 VS Code（借助 Flutter 和 Dart 插件）支持内置的源代码调试器，可以设置断点，单步调试，检查数值。

Flutter inspector，是开发者工具提供的 widget 检查器，也可直接在 Android Studio 和 IntelliJ 中使用（借助 Flutter 插件）。检查器可以可视化展现 widget 树，查看单个 widget 及其属性值，开启性能图层，等等。

开发者工具

要调试及分析应用，开发者工具可能是你的首选。开发者工具运行在浏览器，支持以下特性：

源代码调试器

Widget 检查器，展示可视化的 widget 树； “widget select” 模式，在应用中选择一个 widget，会在 widget 树直接定位到它的位置。

内存分析

时间线视图，支持跟踪，导入及导出跟踪信息

日志视图

如果你在Debug 模式 或Profile 模式 运行，那么可以在浏览器打开开发者工具连接到你的应用。开发者工具不能用在 Release 模式 编译的应用，因为调试和分析信息都被删除了。如果你要用开发者工具分析应用，需确保使用 Profile 模式运行应用。

在这里插入图片描述

断点调试

和其他语言一样，Flutter的断点调试支持在 IDE 或编辑器（比如 Android Studio/IntelliJ 和 VS Code）、或者通过编码两种方式。

其中，开发者工具调试器如下图所示。

在这里插入图片描述

如果需要，在源代码中设置断点，然后点击工具栏中的 【Debug】 按钮，或选择 【Run】 > 【Debug】即可开启调试功能。

在这里插入图片描述

开启调试后，可以在控制台看到如下一些信息。

底部的 Debugger 窗口会显示出堆栈和变量信息。

底部的 Console 窗口会显示详细的日志输出。

调试基于默认的启动配置，如果需要自定义，点击选择目标下拉按钮，选择 Edit configuration 进行配置。

在进行断点调试时，使用得最多的就是单步调试，三个单步调试按钮在暂停后会变为可用状态。

使用 Step in 来进入被调用的方法，在遇到方法内的第一行可执行代码时结束。

使用 Step over 直接执行某个方法调用而不进入内部；该按钮在当前方法内按行执行。

使用 Step out 来跳出当前方法，这种方式会直接执行完所有当前方法内的语句。

除此之外，我们还可以使用代码的方式进行断点调试，我们可以在源代码中使用 debugger()函数来开启断点，当代码运行到此处时就会刮起，如下所示。

import 'dart:developer';

void someFunction(double offset) {

 debugger(when: offset > 30.0);

 // ...

}

Dart 分析器

如果你使用的是 Android Studio或者VSCode，那么工具会自带的 Dart 分析器默认会检查代码，并发现可能的错误。如果你使用命令行，则可以使用 flutter analyze命令来检查代码。Dart 分析器非常依赖你在代码中添加的类型注解，以帮助跟踪问题。

另外，我们可以使用flutter analyze --flutter-repo命令将分析结果打印到控制台上，每次运行这个命名之前，请先运行flutter update-packages 升级的包，这样就可以获取的依赖包。如果你不这样做，你可能会从dart:ui得到一些错误消息，比如偏移量等。因为执行flutter analysis 命令时并不会主动去拉取依赖。

对于一次性的Dart分析，直接使用flutter analyze --flutter-repo即可，对于连续分析，则可以使用flutter analyze --flutter-repo --watch命令。如果你想知道多少个成员变量丢失了dartdocs，可以添加一个dartdocs参数。

Flutter inspector 工具

Flutter inspector 是分析Flutter组件状态树的利器，Flutter使用小部件来控制页面组件到布局的精准控制，Flutter inspector 可以帮助我们进行如下一些分析。

进行布局分析，理解布局层次

诊断布局问题

在这里插入图片描述

在调试模式下，我们点击Android Studio右边Flutter inspector按钮即可开启Flutter inspector分析，Flutter inspector提供了如下的可视化调试工具。

在这里插入图片描述

Select widget mode：启用此按钮后，选择组件树的代码会自动跳转到对应的源代码里面。

Refresh tree ： 重新加载的组件信息。

Slow Animations：放慢动画速度，以便进行视觉上的查验。

Debug Paint： 边框、方向的可视化。

Paint Baselines： 每个渲染框在它的每个文本基线上画一条线。

Repaint Rainbow：查看重绘的严重程度，严重的会被爆红。

除了上面的功能外，我们还可以点击【Open DevTools】打开Flutter的调试页面，可以借助它进行很多性能分析，后面会具体介绍。

在这里插入图片描述

测量应用启动时间

要收集有关 Flutter 应用程序启动所需时间的详细信息，可以在运行 flutter run 命令时使用 trace-startup 和 profile 选项，如下所示。

flutter run --trace-startup --profile

跟踪输出被保存到 Flutter 工程目录在 build 目录下，一个名为 start_up_info.json 的 JSON 文件中，输出列出了从应用程序启动到这些跟踪事件（以微秒捕获）所用的时间，如下所示。

{

 "engineEnterTimestampMicros": 2346054348633,

 "timeToFrameworkInitMicros": 812748,

 "timeToFirstFrameRasterizedMicros": 1573154,

 "timeToFirstFrameMicros": 1221472,

 "timeAfterFrameworkInitMicros": 408724

}

对应的具体含义如下：

进入 Flutter 引擎时

展示应用第一帧时

初始化Flutter框架时

完成Flutter框架初始化时

使用Android Studio进行调试

Flutter官方推荐使用Android Studio或VSCode进行应用开发， 和其他语言的调试一样，Dart代码的调试流程也差不多。如果还没有Flutter项目，可以新建一个示例项目。通过单击首先，点击调试图标（Debug-run icon）同时打开调试面板并在控制台中运行应用，首次运行应用是最慢的，应用启动后，界面应该是下面这样的。

在这里插入图片描述

然后，我们在在 counter++ 这一行上添加断点。在应用里，点击 + 按钮（FloatingActionButton，或者简称 FAB）来增加数字，应用会暂停。

在这里插入图片描述

你可以 step in/out/over Dart 语句、热重载和恢复执行应用、以及像使用其他调试器一样来使用 Dart 调试器。

Flutter inspector

Flutter inspector 是一个用来可视化以及查看 Flutter widget 树的工具，提供如下功能：

了解现有布局

诊断布局问题

可以使用 Android Studio 窗口右侧的垂直按钮来打开Flutter inspector，如下图所示。

在这里插入图片描述

Flutter outline

Flutter Outline 是一个可视的显示页面构建方法的功能，注意在构建方法上可能与 widget 树不同，可以使用 Android Studio 窗口右侧的垂直按钮切换 outline 的显示。

在这里插入图片描述

Tip: 我们可以安装一个 Presentation Assistant 插件来辅助我们进行开发，Presentation Assistant 提供了很多的快捷功能。例如，当焦点在编辑面板中时，输入 command-Shift-A（Mac）或者 shift-control-A（Windows 和 Linux），该插件会同时显示「查找」面板并显示在所有三个平台上执行此操作的提示。

在这里插入图片描述

然后在输入框中输入attach关键字，显示如下图。

在这里插入图片描述

使用 Android Gradle 调试

为了调试原生代码，你需要一个包含 Android 原生代码的应用。在本节中，你将学会如何连接两个调试器到你的应用：

1）Dart 调试器。

2）Android Gradle 调试器。

创建一个基本的 Flutter 应用，然后替换 lib/main.dart 的代码为以下示例代码。

// Copyright 2017 The Chromium Authors. All rights reserved.

// Use of this source code is governed by a BSD-style license that can be

// found in the LICENSE file.

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:url_launcher/url_launcher.dart';

void main() {

 runApp(MyApp());

}

class MyApp extends StatelessWidget {

 @override

 Widget build(BuildContext context) {

   return MaterialApp(

     title: 'URL Launcher',

     theme: ThemeData(

       primarySwatch: Colors.blue,

     ),

     home: MyHomePage(title: 'URL Launcher'),

   );

 }

}

class MyHomePage extends StatefulWidget {

 MyHomePage({Key key, this.title}) : super(key: key);

 final String title;

 @override

 _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

 Future<void> _launched;

 Future<void> _launchInBrowser(String url) async {

   if (await canLaunch(url)) {

     await launch(url, forceSafariVC: false, forceWebView: false);

   } else {

     throw 'Could not launch $url';

   }

 }

 Future<void> _launchInWebViewOrVC(String url) async {

   if (await canLaunch(url)) {

     await launch(url, forceSafariVC: true, forceWebView: true);

   } else {

     throw 'Could not launch $url';

   }

 }

 Widget _launchStatus(BuildContext context, AsyncSnapshot<void> snapshot) {

   if (snapshot.hasError) {

     return Text('Error: ${snapshot.error}');

   } else {

     return Text('');

   }

 }

 @override

 Widget build(BuildContext context) {

   String toLaunch = 'https://flutter.dev';

   return Scaffold(

     appBar: AppBar(

       title: Text(widget.title),

     ),

     body: Center(

       child: Column(

         mainAxisAlignment: MainAxisAlignment.center,

         children: <Widget>[

           Padding(

             padding: EdgeInsets.all(16.0),

             child: Text(toLaunch),

           ),

           RaisedButton(

             onPressed: () => setState(() {

                   _launched = _launchInBrowser(toLaunch);

                 }),

             child: Text('Launch in browser'),

           ),

           Padding(padding: EdgeInsets.all(16.0)),

           RaisedButton(

             onPressed: () => setState(() {

                   _launched = _launchInWebViewOrVC(toLaunch);

                 }),

             child: Text('Launch in app'),

           ),

           Padding(padding: EdgeInsets.all(16.0)),

           FutureBuilder<void>(future: _launched, builder: _launchStatus),

         ],

       ),

     ),

   );

 }

}

然后，添加 url_launcher 依赖到 pubspec 文件，并执行 flutter pub get命令拉取依赖包。

name: flutter_app

description: A new Flutter application.

version: 1.0.0+1

dependencies:

 flutter:

   sdk: flutter

 url_launcher: ^3.0.3

 cupertino_icons: ^0.1.2

dev_dependencies:

 flutter_test:

   sdk: flutter

点击调试按钮（Debug-run icon）来同时打开调试面板并启动应用，如下图所示。

在这里插入图片描述

点击 【Attach debugger to Android process】 按钮，从进程对话框中，你应该可以看到每一个设备的入口。选择 show all processes 来显示每个设备可用的进程。

在这里插入图片描述

在调试面板中，你现在应该可以看到一个 Android Debugger 标签页，然后依次选择【app_name】 > 【android】 > 【app】 > 【src】 >【 main】 > 【java】 > 【io.flutter plugins】在项目面板，然后双击 GeneratedProjectRegistrant 在编辑面板中打开 Java 代码，此时Dart 和原生调试器都在与同一个进程交互。

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

构图、色彩和光影属于设计中非常重要的3块体系，但构图和色彩大多是偏感性的主观理解，而光影则是理性的客观判断。因为这是自然界中真实存在的物理现象，因此大部分时候画面的「添加光影」都是在还原真实，所以本文的很多知识都偏理论和科普，但理性认知无疑是打牢光影基础的第一步。

如果说「构图」和「色彩」是视觉设计的基础，那光影便是「锦上添花」，当各种视觉元素组合完成后，只有「光影统一」，才能让所有元素真实的融在一起，最终形成真实立体、有层次的画面，而「光影统一」便是这篇文章的核心原则。

光源类型

其实我们看到的万物色彩，都是物体表面的反射光，是「光」创造了色彩，同时也创造了「影」，只有经过光照才会出现明暗，才有所谓的「光影」，所以我们先来说说一切的源头——光。

发光的地方就是「光源」，当我们对画面「添加光影」时，一定要先留意光源在哪，像我每次画设计草图时，就会先把主光源的位置确定并标示出来，只有清楚位置，「光影统一」才有了依据。

那常用的光源类型都有哪些呢？其实就2大类：照射光和环境光。2类光源往往同时存在，相互影响，塑造场景时必须同时考虑。

1. 照射光

照射光就是画面中的主要照明光，这是影响整体光影的核心光源，根据光线照射路径的不同，又分成直射光、散射光和折射光。

直射光

直接照射的光源就是直射光，光线路径呈方向明确的两点一线，整体集中、聚焦。

直射光能在物体表面形成强烈的明暗对比，并且过渡偏硬，形成清晰的轮廓边缘，最常见的直射光就是晴天阳光，它属于自然光。如下图所示，阳光直射形成的明暗强对比能呈现人物及建筑的轮廓，突显立体感。

和自然光相对应的是人造光，在人造光中，例如摄影棚里常用的闪光灯和常亮灯（不带柔光罩）都算直射光，照射效果和晴天阳光类似，仔细观察投影，边缘都很生硬、清晰。

散射光

当光束穿过某一介质（云层、柔光布等），被其表面分散传播的光便是散射光，散射光的光线路径呈多方向发散状，整体分散、无明确方向。

自然光中，阴天、雨天、雾天的光照都属于散射光，当阳光穿过大气时，大气层能让光线朝不同方向发散，发散后的光线柔和，在物体上形成的明暗对比较弱，过渡也柔和。如下图所示，不管人物还是景物，都无明显的阴影轮廓，整体层次丰富而细腻，影调柔和，特别是暗部的细节都能保留完好。

而人造光中，如果给闪光灯和常亮灯装上柔光罩，这时发出的光就会变成散射光。例如下图中，人物和产品都显的特别柔和、舒服。

折射光

当光束从一个介质射入另一介质时，传播方向发生偏折的光就是折射光。常见介质有水、玻璃等，它们的折射角度也各不相同。

日常生活中，像泳池里的水波光影、玻璃杯投射的光线图案都是与折射相关的自然现象。

而我们在设计Banner时，若将这些折射效果表现出来，就会给画面增添很多细节，同时也会增加真实感，像水波光影在电商中用的就很多。

2. 环境光

很多新手在做设计时，往往只注意照射光（主光源）对物体的影响，而忽略环境光，导致画面总是不够真实。简单来说，画面中除了主光源外的所有光线都算环境光，环境光的亮度一般很低，且没有明确方向性，常见的环境光有2种：散射光和反射光。

散射光

和照射光一样，环境光中也有散射光，但它们的不同在于：

• 照射光中的散射光虽然光线柔和，但属强光，能让物体产生明暗反差；
• 而环境光中的散射光属弱光，往往只在主光源照不到的地方（物体的暗面）才会看到影响。

像自然界中的夕阳西下，当红色的太阳光（照射光）减弱时，建筑的暗部便会显现蓝色的天空光（环境光），这时红光和蓝光会形成鲜明对比，极具冲击和美感，这样的画面在摄影及设计中都非常常见，也是摄影界公认的「黄金一小时」，这时的天空光就属于环境光中的散射光。

生活中还有一个常见现象也能看到散射光影响，当你走在户外，观察自己的影子，特别当影子较长时（清晨或傍晚），这时离自己越远的区域颜色越浅，这是因为越远的影子所处区域就越开阔，受周围散射光的影响就越明显，因而颜色更浅。

反射光

环境光中还有非常重要的一类是反射光，当光束射到介质表面时，有部分自介面射回的光就是反射光。可以毫不夸张的讲，世界万物之所以出现明暗就是因为反射光的存在。反射光一般有2种情形：镜面反射和漫反射。

镜面反射。当反射面非常光滑，这时平行射入的光线仍会向一个方向平行的反射出来，效果如同镜子一样，虽然这样物体本身的明暗就会非常微弱，但人们透过反射面能看到周围的环境信息，这就是镜面反射光。

日常生活中像平静水面、镜子、抛光金属等都会有镜面反射光，例如我们在刻画金属材质的元素时，常常会在表面加些近乎白色的高光，这就是由于镜面反射而进入眼中的刺目强光。

另外晴空万里时，海面也常出现「波光粼粼」的闪光，同样也是阳光射入水面的镜面反射光。

漫反射光。当反射面凹凸不平时，这时平行射入的光线就会向各个方向反射出去，这便是漫反射光（以下简称「漫射光」）。需要说明这里的凹凸不平也包括微观结构，例如有些墙壁看着光滑，但仔细看表面也有粗糙颗粒，这时反射出来的光线也是各个方向的漫射光。

漫反射在这个世界里无处不在，它是我们对物体形态及色彩产生明确认知的基础。

因为有漫反射的存在，物体才会有清晰的明暗关系，我们才能看清这个世界，它赋予了物体纵深感和体积感，不管是产品还是环境皆是如此。

这里列举一个设计中常用的漫反射现象，我们将一个白色茶杯放入一个绿色盒中，打上一束光，这时茶杯整体都带有绿色调，这是因为盒子表面产生了大量绿色的漫射光，这些光束射在茶杯上，进而发生偏色现象，如下图所示。

可见环境色对物体的视觉影响还是相当明显。再如下图中，当模特处于一个红色空间时，受到环境中红色漫射光的影响，模特也明显偏向红色，这时我们就说环境光影响了这位模特的「色彩平衡」，关于「色彩平衡」在后面还会细讲。

当然现实是复杂的，其实还有大量物体会同时存在镜面反射光和漫射光，谁的强度大谁就更突出，例如起风时的水面，就不全是镜面反射，还有漫反射，这里就不再深究。

小结

以上提到的「照射光」和「环境光」便是设计中常用的2大光源类型，这2类往往是同时存在，一般照射光会直接影响物体的明暗结构，而环境光则影响物体的色彩平衡及反光。

只有把这些光影都表现清楚，画面才更有代入感。其中对于照射光的理解，绝不仅仅是考虑直射或散射这么简单，还需分析照射方向、照射角度、照射形状、光源距离、光源强度、光源软硬、光源大小、光源颜色等因素，待会会针对这些因素展开讲解。

物体明暗

前面介绍了光源类型，主要让大家对「光」有个整体认知，内容偏科普，属于「光影」的理论基础，现在开始讲「影」，这块内容更偏实战运用，教大家如何在设计中准确表达光影。本文的「影」涵盖两块内容：物体的明暗和投影，其中物体是泛指，包含电商常用的两大元素：人物和产品。

先说物体明暗，当光源发出的光线射向物体时，由于光反射，物体会有对应的明暗变化，记得在高中学习素描时，老师就曾提过光影的「五大调」，这正是人们对物体明暗关系的理论化总结。

但现实世界却要复杂的多，因为物体光影还与材质密切相关，不同材质的明暗关系截然不同，所以决不能撇开材质谈明暗，而设计中常用材质有三大类：漫反射材质、镜面反射材质和透明/半透明材质。

不管现实世界还是电商视觉，漫反射材质都是最常见的材质，因为这类材质的光影最有规律也最有代表性，明暗关系也简单很多，刚刚说的「素描五大调」就是针对漫反射材质，那我们就从这类材质入手，详细讲讲漫反射的光影到底如何呈现。

1. 明暗原则

「漫反射材质」是指表面产生漫反射光的材质，日常生活中，漫反射材质（以下简称「漫射材质」）的物体占据大多数，像棉布、哑光纸、哑光塑料甚至人类肌肤等等都属于漫射材质。

而我们在刻画漫射材质的物体明暗时，需遵循3点原则：近亮远暗、先整体再局部以及细节刻画。

近亮远暗

对于漫射材质，首先一个大原则就是「近亮远暗」：

以画面的主光源（照射光）为圆心，物体距离光源越近会越亮，越远则越暗。

对单个物体来说，距离近的就是亮面（受光面），而距离远的是暗面（背光面），如下图所示。

在很多摄影或设计作品中，能看到不管人物还是产品，都会遵循这一原则：距离主光源越远则越暗。

先整体再局部

在「近亮远暗」的大原则下，先确定物体的整体光影，表现三大面（亮面、灰面、暗面），其本质就是在固有色（物体在白色光下所呈现的色彩）的基础上进行深浅色调的变化。

然后再添加物体的局部光影，这个局部主要针对有块面的物体（立方体），「局部光影」意味着亮面和灰面也要分别遵循「近亮远暗」原则（由于暗面是背光，不受主光源影响，所以不在遵循范围内），这样光影才会更有层次。而没有明显块面的曲面物体（球体）则把握好整体光影即可，或许听着有些复杂，下面通过图例强化理解。

细节刻画

最后是刻画光影细节，这里列出2个常见细节，这些细节虽不影响整体明暗，但会让物体光影更加细腻和真实，属于「加分项」。

物体表面最亮的地方就是高光，高光其实不是光，而是直接反射主光源的地方，如果要给漫射材质的球体添加高光，那在亮面添加一个羽化的圆斑即可。

往往越光滑的物体高光就越清晰。但对漫射材质而言，高光不会很清晰，不过模糊程度要看物体的固有色以及粗糙度，粗糙度越大的物体高光越模糊。另外高光的外形还和物体的本身结构有关。

在表现高光时，还有一块高光区也经常被刻画出来，那就是块面物体的「倒角高光」。

「倒角」其实是个工业设计术语，三维设计也常提到，一般块面物体的棱角通常会做些圆滑过渡，这种过渡结构就是倒角，有了倒角，转折才不会「锋利」，这时若有光线照射到表面，倒角处便会形成高光线。

一般亮面和灰面转折处的倒角高光最亮，而灰面和暗面的转折处最暗，核心还是遵循「近亮远暗」原则。

电商设计中，若给块面物体加上「倒角高光」，细节无疑更丰富，也更耐看。仔细看下图，在块面转折处都有明显的亮线勾勒，虽然不是很起眼，但这就是常说的「设计细节」。

当2个物体相邻时，它们相邻的那面会有「重合阴影区」，并且物体离的越近，阴影会越深。这是因为相邻空间随着物体间距越小，接受的环境光也会越来越少。

「重合阴影」是一个非常容易被大家忽略的设计细节，但若表现得当，就能提升作品的精细度，如下图所示。

2. 环境色影响

说完漫射物体的明暗刻画原则，接下来讲讲周围环境对物体的影响，还记得刚刚讲过的环境光吗？环境中除了主光源外的一切光线都是环境光。

而「环境色」则是环境光中的一种情形：就是当周围环境有明确色彩时，这时产生的环境光会给物体带来怎样的影响？主要影响其实有2方面：物体的色彩平衡和反光，实际表现时也是从这两点入手。

色彩平衡

「色彩平衡」是PS中的一项调色工具，主要是调节画面的整体色彩。既可校正画面的偏色，使色彩舒适平衡；也可反其道而行之，根据场景和需求让画面有意偏向某种颜色。例如下图中的人物，受环境色影响就明显偏向黄色。

所以当物体处在一个有明确色彩的环境时，受环境四周的漫射光影响，整个物体都会偏向环境色，注意由于暗面受到的影响更大，因此暗面的偏色现象也会更加明显。总之物体偏色程度是和其固有色、材质及漫射光强度都息息相关。

反光

一般物体都是放置在地面上，而地面作为环境的一部分也会出现漫射光，这部分光线射到物体上就会形成一层微弱的亮面，这就是「反光」。

其中物体表面离地面越近的地方反光就越强，一般来说反光最强处就是物体暗面最靠近地面的地方。但不管如何反光都不宜过亮，更不能超过物体亮面。

上图是环境为白色的情形，而当环境有明确色彩时，这时反光面就应呈现环境色，如下图所示，物体的反光都是浅蓝色。

另外能产生「反光」的不单单是地面，其实只要离物体较近且能反射光线的面都能让物体产生「反光」。

例如下图中，就能明显看到白色瓶子的右侧有一层绿色「反光」，这是因为旁边的绿色外盒反射出的绿色光线射在了瓶身表面。

再如户外拍摄人像时，有时为了不让暗部过暗，往往会在旁边添上一块「反光板」，这个反光板所起作用就是让脸部的背光面产生反光，以达到提亮暗部的目的。

小结

综上所述，周围环境的漫射光影响着物体的色彩平衡；而地面（也可是离物体较近的面）的漫射光则为物体暗面添加了反光。

为何要单独讲解环境色影响？因为现在很多Banner都是在一个有色背景中添加人物或产品，其实就可理解成是将物体放入一个环境色中，这时若想和背景自然融合，就需要它们的色彩平衡及反光都偏向背景色，不然整体就会失真。

总之调节「色彩平衡」能让物体融进有色背景中；而添加「反光」可使物体更加通透，体积感也更强，下面展示2个融合不错的案例。

在实战案例中，我们会给2款产品分别添加一个蓝色背景，然后用 「明暗原则」及「环境色影响」中提到的方法给产品加上光影，并将它们融进背景中（由于投影在后面才会提到，所以当前为保画面完整性，关于投影部分只先添加，但不展开细讲）。因为物体的明暗、投影和光源属性密切相关，因此这里先设定主光源来自画面左上方、强度中等、软硬适中、白光，下面看具体如何呈现。

3. 照射光影响

在上述案例中，我们事先给主光源做了一个设定，为何要这么做呢？因为主光源的很多因素都直接决定了物体会呈现怎样的光影，特别当画面有多个物体时，只有确定了光才能使它们「光影统一」。

例如刚刚通过左上角的主光源能判断画面属于侧光，那产品也是对应的侧光影，如果位置改变那光影也将发生改变，那光源的众多因素究竟会让物体产生哪些不同？下面一一细说。

照射方向

先说光源的照射方向，主要会影响物体的「明暗配比」，随着方向不同，物体明暗也在发生微妙的变化，同时还会影响画面的情感表达，所以照射方向是我们首先就要确定的因素，一般方向有7种。

而在实际运用时，常用方向是4种：前侧光、侧光、侧逆光、逆光，这4种我们分成2组来讲。（其他方向由于使用较少，就不展开）

前侧光/侧光。当光源的照射方向和视线方向成30°-60°夹角时称为前侧光；而当夹角成90°时则为侧光。如图所示，前侧光一般明多暗少；侧光则是明暗对半。

下面再看产品在前侧光及侧光下的光影呈现，主要区别在于明暗比例的变化，但变化很微妙，区分没有那么明显。这里我是用PS对产品进行的光影调整，因为日常工作中，PS处理光影才是大家的常用方法。

前侧光及侧光是电商设计中最常用的布光方式，这样不管人物还是产品，明暗比例都比较适中，既能保证物体的亮度，也能很好的凸显物体形态和质感，所以大量Banner的主体展示都会采用这种布光方式，下面看案例。

侧逆光/逆光。当光源的照射方向和视线方向成120°-150°夹角时称为侧逆光；而当夹角成180°时则为逆光。如图所示，侧逆光和前侧光刚好相反，物体是明少暗多；而逆光时的物体则几乎全是暗面。总体来说，不管侧逆光还是逆光，物体都以暗调为主。

再看看产品在侧逆光及逆光下的光影该如何处理，虽然产品看着有些灰暗，但场景却颇有氛围和调性。

这也是一组常见的布光方式，和前测光/侧光主要凸显物体的立体感不同，侧逆光及逆光主要是营造独特的场景氛围。

其中要特别注意物体背光面的暗调程度，根据需求提亮或压暗，但多数时候都不会调的太暗，还是会保留物体该有的一切细节，避免色调过深而丢失了暗部层次，如下图所示，元素的背光面依然都清晰可见。

逆光其实很有趣，当光照强烈、光质偏硬时，物体边缘就会出现一圈非常明显的高光，高光颜色和光源颜色一致，这就是「轮廓光」。光照强度越大、光质越硬，轮廓光就越明显。

轮廓光一直都是摄影师的最爱之一，如图所示，它能勾出人物轮廓，进而分离人物和背景，让影调富有变化，提升画面层次和细节。

在电商设计中也同样常见，例如下图中，仔细观察人物和产品的边缘，有些地方会有一层非常高亮的「轮廓光」，这处光影细节使画面更具形式感和设计感。

还有一种情形也颇有艺术感，如果物体完全背光，这时背景偏亮而物体正面又无光时，就会形成「剪影」效果。在摄影中这是一种很有趣的拍摄方式，如图所示，图中的人物剪影会给观众留下丰富的想象空间。

在电商设计中，剪影同样以表现人物或产品轮廓为主，突出整体造型，「剪影构图」会更强调画面的形式感传达。

光源强度/距离

光源强度和距离会影响物体明暗的反差大小，强度越弱或距离越远则物体明暗反差越小；而强度越强或距离越近则明暗反差越大。

原因很好理解，先说光源强度，当光源增强时，周围环境和物体的受光面会更亮，因此亮面和暗面的反差也会更大。还有距离同样如此，所有人造光源的光照都有衰减性，而光源强度随着距离拉近而升高，因而距离越近的光源，照射强度同样增强。

需要注意，还有一类光源是自然光，自然光比较特殊，如果在室外环境下，任何时候的光照（晴天、阴天等）都不会有衰减现象，因为作为光源的太阳太强，距离太远，衰减可忽略不计。

但若在室内，阴天从窗外射入的自然光则会有衰减性，因为这时的光线以散射光为主，而这类光照要弱的多，再加上窗外射到室内的辐射范围有限，所以衰减性便会显现出来，如下图所示。

光源强度和距离对产品的明暗影响也同样如此：左图设定的光源强度弱、距离远，因而产品的明暗反差小；而右图设定的光源强度强、距离近，因而明暗反差更大。

如果选择明暗弱反差，为避免画面灰暗，我们需要提升画面的曝光值，使整体明亮。

在实际运用时，明暗弱反差降低了明暗对比，人物或产品都没有很深的阴影，整体呈现清晰、柔和，同时也弱化了结构和立体感，如图所示。

而明暗强反差则让人物或产品的明暗对比强烈，阴影明显，质感凸显，更强调整体结构和立体感，如图所示。

光源软硬

喜欢摄影的朋友对这个词应该再熟悉不过，是指光的性质（简称「光质」）变化，分成硬光和软光。

一般直射光属于硬光，而散射光和漫射光则属软光。光源软硬会影响物体的明暗过渡，硬光的光照直接，会让物体的明暗过渡更为生硬，有明显的阴影轮廓，突出表面结构和质感；而软光的光照柔和，能让物体的明暗过渡更为自然，无明显的阴影轮廓，突出表面层次和细节。

另外在同等的光照强度下，由于软光的光线呈分散状，所以相比硬光，明暗反差也相对较小，如下图所示。

下面再展示产品在硬光和软光下的光影刻画，明显左图的影调更为硬朗。

在设计时，硬光常用来表现人物的强劲、硬朗和力量，常用于男性、运动、健身等类目，另外也能凸显产品的结构和造型，提升质感和立体感。

软光则侧重表现人物的柔美、清新和娇嫩，常用于少女、儿童等类目；而用于产品则会让其表面的层次细腻而丰富，更接近生活里的真实呈现。

光源颜色

最后是光的颜色（简称「光色」），光色变化会影响物体的表面颜色，由于人们对色彩的敏感度很高，所以众多因素中，光色带来的影响最为直观。

一般来说，不管物体的固有色如何变化，表面呈现的都是光线颜色，只是明暗程度会有不同。如图所示，当红光照在球体上，亮面会呈现红色；而绿光照射则会是绿色。

若产品被有色光照射时，受光面同样会出现对应的光色，这时画面会更生动，同时也提升了用户的视觉印象。

在日常设计中，使用有色光算是「戏剧化用光」的一种手法，如图所示，当画面出现光色变化和鲜明对比时，画面会更有冲击和氛围，也让场景带有强烈的情绪感。

小结

以上便是影响物体明暗的4个光源因素：照射方向、光源强度/距离、光源软硬以及光源颜色。

通过相关案例，细心的小伙伴该会发现，当照射光的这些因素发生改变时，不单单是物体表面的明暗会有变化，其实投影也有明显不同，确实物体的明暗和投影都是紧密相关，正因为投影太过重要，所以接下来单独介绍。

物体投影

前面提到本文的「影」会涵盖两块内容：物体的明暗和投影。现在就说说投影，我们还是从最具代表性的漫射材质入手。

何为投影？简单说就是光线照射不到的地方。它是光影表现中非常重要的一环，有了投影，环境中的物体才有真实感，并和环境产生呼应关系，给人带来现实感。

而投影呈现，就属于典型的看着简单其实复杂的细节刻画，新手往往觉得投影不就是添加黑色的模糊椭圆吗，偶尔虽然可行，但这并不适用所有场景。设计师真正要做的，是能根据各类场景准确表现出让人舒服的物体投影。而物体投影，又分为表面投影和地面投影，投在物体表面的是表面投影；而物体投在地面的就是地面投影。

刚刚讲「照射光影响」时提过，当光源强度、软硬等因素改变时，物体的投影也会有明显不同，那接下来我们就看看物体投影到底受哪些因素影响？又会有哪些不同？刻画时考虑的要素都有哪些？相信看完会刷新大家对投影的认知，原来看似简单的投影竟藏有这么多细节！

1. 投影方向

首先要考虑投影的方向，这是大前提，它和光源位置密切相关，核心原则是投影永远在光源相对的一面，属于光源光线的延伸。如图所示，当画面有多个物体时，要确保所有影子都和光源的光线方向保持一致，若不一致画面就有违和感。

下面看案例，注意有时画面的光源位置并不明显，会在画面外，例如右图，这时就要事先设定一个光源位置，然后确保所有物体的投影都处在光源光线的延伸线上，这样才合情合理。

2. 投影轮廓

确认方向后就要开始绘制投影的轮廓，这是投影表现中最难的一步，很多画面的投影看着很假往往就是轮廓出了问题，一个优秀设计师要能准确呈现出物体投在地面的真实形状，而不是所有投影都是一个圆形或矩形。那怎样才能准确的勾出外形呢？我们需从以下3点来考虑：基本外形、发散程度和外形起伏。

基本外形

是指物体在光源照射下投在平面上的基础形状，关于形状绘制有章可循，但需用到我们在高中「立体几何」中所掌握的空间感。

总体来说，是先把光源的「位置点」和物体的各个「顶点」连成直线，再把每条直线延长至所在平面，这样就能得到多个「交点」，最后把平面投影外围的所有「交点」连接起来便会得到准确轮廓，如下图所示。

上方是单个长方体的投影外形，可能这样的简单物体还比较好呈现，那复杂物体呢？其实用同样方法即可，如下图所示，我们先用上述方法将2个长方体的投影轮廓分别呈现，再合并就好。只是这时的空间更复杂，顶点也更多，我们要有足够的眼力和耐心。

需要说明，在单一光源下，当画面有多个物体组合出现时，所有物体的投影都是相加关系。即是说当多个投影有交集时，这些交集区域不会产生更深的叠加投影。

但以上只针对单一光源产生单一投影时的情况，若画面有多个光源并让物体产生了多个方向的投影时，此时投影便成叠加关系。

如下图所示，示意图和案例中都有2个主光源，因此物体产生了2个相交投影，投影的交集区域最深，而非交集区域由于光源的相互影响则会变浅。

最后通过投影基本形的绘制方法我们还能得出一个结论：影子长短和光源光线的入射角有关。入射光线和垂直地面的法线夹角就是入射角，入射角越大投影越长，入射角越小则投影越短。

准确的投影轮廓能让产品呈现更真实，也更有美感，下面展示2个优秀案例，当然这些的前提是要光源为硬光，只有硬光才会有清晰的投影轮廓。

发散程度

接着要考虑投影外形的发散程度，「发散」是说投影轮廓离物体越远则开口越大。所有物体的投影都有发散现象，只是程度不同，这和光源的面积大小及光源距离有关。

先说光源大小，光源面积越大则发散程度越小；而面积越小则发散程度越大。

再说光源距离，距离物体越远则发散程度越小；而距离越近则发散程度越大。

例如太阳距离地球就非常遥远，因此室外物体的影子扩散程度会非常小，像下图中的树木，投影都接近于平行。

其实距离远近是光源非常重要的一个分析维度，它影响的因素有很多，不光是投影发散，还会影响投影的深浅和虚实，后面再细说。

一般在电商设计中，扩散程度较小的投影用的更多，毕竟生活中这类投影更加常见，呈现出来的影子也会比较自然和真实。

扩散程度较大的投影虽然用的不多，但使用恰当则会让画面充满张力和氛围，使人眼前一亮，如下图所示。

外形起伏

投影的轮廓绘制还需考虑外形起伏，「起伏」是说投影不光要有二维平面的形状变化，还要根据地面凹凸进行纵向的起伏调整。

其中地面凸起主要指「墙面」；而地面凹陷则指「阶梯」；最后还有地面凹凸不平的「肌理」呈现。

当地面凸起形成类似「墙面」结构时，如果物体的影子长度大于墙面间距时，就会出现「投影上墙」现象，这是因为墙面也会出现一块光线照射不到的区域，如下图所示。

在设计时，如果投影刚好出现在产品和墙面的中间区域时，最好都设计成「投影上墙」的布光效果，这样两个元素间（产品和墙面）就会产生呼应和联动，整体感更强。

当地面凹陷出现类似「阶梯」结构时，如果物体的影子长度大于阶梯转角的间距时，就会出现「投影下沉」，如图所示。

这里要注意一个关键点，上图中的主光源出现在物体背面，属于侧逆光，这时「阶梯结构」受光照影响也会出现暗面，和投影一样，都属于光线照不到的区域，因此在阶梯转角的背光面，不会出现物体投影，有时设计师会顺手将物体投影叠加在转角暗面，其实是错误呈现。

我们在观察下生活中的真实投影，下方是我随手拍的一张屋顶照片，上午9点，栏杆在屋顶投下了长长的影子，可以清晰看到，圈中挡板的背光面并没有栏杆投影，就像被断开了一样。这是因为该区域都是背光面，不可能出现投影叠加的反常现象。

因此我们在设计时要额外注意，千万不要犯这种「投影叠加」的常识性错误，仔细观察下方作品中方块转角的背光面，都不会出现产品投影的叠加现象。

有时地面还会以「肌理」方式呈现，像常见的草地、水面、沙滩等等，如图所示，它们的表面都是凹凸不平，因此投影外形也要根据肌理起伏进行形态变化，这样才不会显得投影「太假」。

虽然投影的轮廓绘制我是从3小点依次展开，但实际设计时应该一气呵成，根据画面的光源同时确定投影外形、发散程度以及起伏，最终是为营造出物体在环境里的真实存在感。

3. 投影颜色

有了投影的「形」，现在我们要确定投影的「色」。很多新手在添加投影时不管周围的环境色是什么，都会给影子直接填充黑色，最后导致影子在画面中格格不入，像是多余的存在。

其实投影呈黑色的情况非常少见，由于受到周围漫射光的影响，大部分时候都是跟着地面颜色走，这是总体原则。具体是会先给投影填上地面色，并将混合模式设成「正片叠底」，再将透明度调至合适数值即可。

仔细观察下方案例，投影并非「黑色」，都是深色调的地面色，这样投影才不至于突兀。

4. 投影深浅

既然投影都是深色调的地面色，那到底「多深」才合适呢？这就需要我们调整投影的深浅。关于投影深浅，需从2个维度来调整：整体深浅和相对深浅。

整体深浅

整体深浅是指投影的整体明暗，和上节讲的「物体明暗」一样，都是受光源强度和距离的影响。其中「深浅」是说环境明暗的反差大小，因此所谓的「投影深」其实是由于环境的明暗反差很大，反之亦然。

如下图所示，光源强度越强则投影的明暗反差越大（投影深）；而光源强度越弱则投影的明暗反差越小（投影浅），因此投影的整体深浅是相对周围环境而言的。

另外整体深浅还受光源的距离影响，由于光线有衰减性，光源距离越近则投影的明暗反差越大，而距离越远则投影的明暗反差越小。例如下方案例中，明显左图的明暗对比更强，投影更深。

相对深浅

相对深浅是指投影自身的明暗变化，即是说投影本身的明暗分布并不一致，哪怕整体很深的投影，但本身还是会有相对的深浅变化，具体则看投影所处区域的开阔程度：开阔程度越小投影越深；而开阔程度越大则投影越浅。

一般情况下，靠近物体底部的区域开阔程度最小，接受的环境光（散射光/反射光）也最少，所以投影最深；而离物体最远的区域开阔程度最大，能接受的环境光也最多，所以投影最浅。

综上所述，整体是遵循着「近深远浅」的原则，投影靠近物体的区域更深；而远离物体的区域更浅。该理论看似复杂其实简单，下面我再用一张示意图进一步说明。

若要表现投影的「相对深浅」，我们要重点呈现3个区域：

• 1区的开阔程度最小，几乎没有光照，因此色调也最深，这是投影中的最暗区域，称为「暗角区」；
• 2区的开阔程度一般，接受的光照较少，因此色调偏深，为「本影区」；
• 而3区的开阔程度最大，接受的光照也最多，因此色调最浅，为「半影区」。

这3个区域会沿着投影轮廓呈直线分布，如下图所示，在实际设计时，投影的暗角区往往是单独的薄薄一层（作为点缀，面积不能太大），而本影区和半影区则会合并成另一层（色调由深到浅的渐变层），这样刻画产品投影时就是用这2个图层来呈现。

再看电商作品中，物体的投影刻画也是分2层呈现，注意物体底部的暗角区色调最深。

5. 投影虚实

投影呈现的最后还要调整「虚实」：「虚」是说投影的边缘模糊；而「实」是说投影的边缘清晰。和深浅一样，虚实也分整体虚实和相对虚实。

整体虚实

投影的整体虚实是和光源软硬及距离有关，先说光源软硬，上节曾说过「光源的软硬会影响物体的明暗过渡」，那现在还可加一点，光源的软硬同时也影响着物体的投影虚实。

当光源为硬光时，光照直接，这时投影整体偏实、边缘清晰、过渡生硬；而当光源为软光时，光照柔和，光线分散，这时投影整体偏虚、边缘模糊、过渡柔和。

除了光源软硬，还有光源距离，光源距离越近则投影越虚；而距离越远则投影越实。

这是因为光源的距离越近，相交的光线就越多，这时光线的相交区域也越大，如下图所示，这样投影便会形成更加柔和的边缘。

从上图能看到，光源的距离变化对物体的光影影响很大，不但影响了投影虚实，同时还决定了投影的扩散程度和整体深浅，这和我们之前讲的一致。

一句话总结：光源的距离越近，投影的扩散程度越大、明暗反差也越大、边缘则越模糊；而光源的距离越远，投影的扩散程度越小、明暗反差也越小、边缘则越清晰。

在实际运用时，「实影」会让产品的明暗过渡生硬，暗部细节缺失，对投影的轮廓要求也高，总体较难掌握，因此使用相对较少。但「实影」却有着更强的表现力和冲击力，形式更加鲜明，富有张力。

而「虚影」则用的更多，它让物体呈现的更加细腻和自然，由于投影的边缘模糊，所以对轮廓要求也低，无需非常精准，哪怕结构复杂的物体，也无需勾勒出具体形状，因此若对投影表现没有把握，可以优先「虚影」，易操作也易出效果。例如下方案例中，不管什么样的物体，在软光的照射下，投影都是「模糊一片」，就算轮廓异常也不易察觉。

相对虚实

投影除了整体的虚实变化，自身也会有相应的虚实过渡，这和「相对深浅」类似，整体遵循着「近实远虚」原则：投影离物体越近，则边缘越清晰；若离物体越远，则边缘越模糊。

注意虚实过渡其实是个非常柔和的变化过程。之所以出现「越远越虚」，是因为越远的区域受到的环境光（散射光/反射光）影响越大。

当然在软光照射下，有些画面也会忽视投影的「近实远虚」，将投影直接处理成整体模糊，其实也不太违和，因为「近实远虚」算是一个非常微妙的细节呈现，不影响全局，但若能做到，画面层次将更加细腻，如下图所示。

小结

以上就是关于投影呈现的5大要素：投影方向、轮廓、颜色、深浅及虚实。但要注意设计不是物理学，设计师也不只是为了还原现实，因此很多时候不用太较真。例如有些画面的光源并没那么明确，这时投影有些地方刻画的差不多即可，出现一点失真也没关系，关键是不要让人觉得画面别扭和违和。

实战案例

还记得前面讲「明暗原则」时画的立方体和球体吗？下面我们用刚刚讲的知识给它们逐步加上投影，物体只有同时加上明暗和投影，才算真正融进了环境里。首先还是先明确光源情况：来自画面的左上方，强度中等，软硬适中，白光。

在刚刚「物体明暗」的实战案例中，我们曾给2款产品添过「物体明暗」和「投影」，但投影并未细讲，现在再逐步剖析一下产品的投影刻画，其实和刚刚讲的立方体如出一辙，同样先设定好光源：来自画面左上方，强度较大，软硬适中，白光。

前面展示的都是相对简单的示意案例，现在将以2款产品作为主视觉，分别用侧光和逆光来设计2张不同风格的Banner，通过完整案例让大家了解两种布光方式的不同以及物体对应的光影刻画。

通过2个综合案例，大家能看到不同光源所带来的感受也会不同：侧光使物体呈现的更加真实和立体；而逆光则营造出一种独特的场景氛围，因此我们要根据需求选择合适布光。

另外刻画投影时需要考虑的因素也有很多，例如影子的轮廓、深浅及虚实等等，但不用生搬硬套，还是前面那句话：核心是不要让人觉得别扭与违和。

总结

又又是一篇很长的文章，信息量很大，我们围绕「光影」依次讲了光源类型、物体明暗以及物体投影，当然都是从漫反射材质入手，相对简单也有代表性，其实常见材质中还有镜面反射材质和透明/半透明材质，而这2类则要复杂很多，也较难呈现，这里就不展开。但不管材质如何变化，正如本文开篇所说，「光影统一」都是核心原则，什么样的光就会得到什么样的影，虽然听着简单，但当中要做的细节其实很多。

可能耐心读完，有些小伙伴会觉得很多内容过于理论和枯燥，好像不用这么麻烦也能做出差不多的「光影」，其实这种想法还是比较浅显的。「光影」和构图、色彩不同，它是现实中客观存在的一种现象，若表现过于感性就会导致画面违和、不真实，所以本文的大量内容都是在理性推导后得出的结论，总之「理性学习」是培养「正确设计感」的必经之路。最后为方便大家梳理逻辑和内容，下面附上本文的内容结构和知识框架。

文章来源：优设    作者：贤辈

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

编辑导语：导出功能我们经常能够使用到，看似一个很简单的功能，实则在设计的过程中需要考虑很多的因素。本文作者对导出功能的全过程进行了思考，为我们分析了两种解决方案，拆解了导出前和导出时的设计，并且进行了总结。

一、引言

功能（百度释义）：功能是一个汉语词语，拼音为gōng néng，意指事物或方法所发挥的有利作用；效能。

综合以上释义，我们再从产品的角度对其理解：功能的好坏不仅仅关乎其本身，更重要的要看是否为解决实际问题而服务。

那导出功能，解决了什么样的问题？我们先来看一个场景。

小A作为一名销售人员，需要每月向领导汇报一次销售情况，为了更直观的让领导看到销售情况，小A要对销售订单数据进行不同维度展示与分析。而目前系统只能查看订单列表与销售总额，不支持不同维度的数据分析。

从场景中我们可以看到这样一个问题，由于系统只能查看订单列表与销售总额，不支持更全面的数据分析，导致小A每次向领导汇报前，只能人工将一个月近5000笔的订单（此处不考虑后续不断增加的订单量）统计在excel中，从客户维度计算出销售额、销售量，完成客户维的销售情况分析。

从产品SKU维度计算出销售额、销售量，完成产品SKU维销售情况分析，导致小A的工作效率很低，同时人工抄录导致数据错误的的情况也常会出现，最终导致数据分析结果错误。

针对该问题，我们深入思考一下，小A想要进行更全面的数据分析，可以采用以下2种解决方案：

1. 新增销售数据分析页面，如使用销售额排行榜表示客户贡献值高低、使用产品SKU的销售量饼状图表示单品的受欢迎程度等；
2. 导出销售数据到excel，通过excel的数据透视功能完成客户贡献值分析、单品的受欢迎程度分析等。

二、解决方案分析

目前我们有两种解决方案可供选择，那我们采用哪一种解决方案会更好呢？

1. 方案假设论证

1）采用“新增销售数据分析页面”的解决方案

通过与小A的继续沟通发现数据分析的需求并不稳定，处于变化的状态。当依据小A的需求完成分析页面后，过了一段时间发现产品随着季节变化导致销售额也不稳定，从时间维度的分析数据没有参考价值，可能要舍弃这种分析方式。

此时我们发现，小A的需求可持续的时间极为短暂，不足以支撑一个长期存在的功能，但已经将其实现为功能，则意味着功能白做了或没有产生与成本对应的价值。

2）采用“导出销售数据到excel，通过excel的数据透视功能完成数据分析”解决方案

导出销售数据到excel，可以规避因手动抄录导致的数据分析结果错误问题，同时也会节省抄录数据的时间，提高小A工作效率。

数据导出后，小A可以通过excel的数据透视功能或者其他第三方软件完成定制化的数据分析，即使不开发数据分析功能，也可以满足小A的“更全面的数据分析”需求。

例如，当小A导出如下图所示的数据后：

小A第一步可以先完成不同月份的汇总，在表中添加“月份”字段，添加公式为“=MONTH(A2)”；

第二步：再点击表格中任意单元格–插入–透视表–新建工作表，将省份拖入数据透视表字段的【筛选器】，将月份拖入【行】中，将A、B、C、D产品销售额(元）拖入【值】中；将行标签改为月份，每个字段以求和方法计算并修改字段名称。

第三步：选中透视表中数据，调整格式为加千分位逗号，保留0位小数。

第四步：为了让数据展现可视化，插入透视图。

通过公式筛选、透视表、透视图的使用，小A可以点击查看不同地区、月份、产品的分类汇总数据，可以很直观地反映出时间维度的销售情况、不同地区的销售情况、很好地为产品选择、地域选择做出数据依据支撑。

数据分析功能会从数据源、数据处理、数据的可视化来实现，而Excel的透视表对应了数据明细（数据源），公式能够完成较多的数据计算任务（数据处理）。

透视图可以直观、清晰的展示各类产品在不同月份、不同地区的销售情况及总的销售情况分析，为产品布局提供指导性参考依据（数据可视化）。

另外当小A从数据透视图看到某个月份销售额过高，可以直接点击查看透视表中的数据明细是否存在错误，当小A想查看每个产品销售额的占比，可以新建数据透视表并将透视图切换成饼状图查看。

由此可见，用Excel来做数据分析不仅可以很灵活的满足需求，而且还很实用、很方便，也不会因功能的限制导致对数据无法分析。

2. 方案选择

通过以上论证，我们发现，既要能够解决问题又要支撑一个长期存在的功能，还要用较低成本以及最快的方式来完成，我们采用最佳的解决方案：“导出”。

三、导出功能设计

既然已经明确最佳解决方案是“导出”，那接下来就从导出的全生命周期看看，如何设计导出功能？

1. 导出前设计

1）明确导出数据限制

无论当前的系统数据量是多少，建议都要做导出条数限制。

因2003版的excel 一个sheet表最多导出65535条数据，2007版的excel是10万4000多条。如果不设限，当用户导出的数据量超过excel单个sheet的数据量时，会出现导出失败的情况，影响用户的正常使用，且产生对系统的不信任情绪。

那应该限制到多少条数据？

我们先来了解一下导出的技术原理，当用户点击导出后，数据会被以excel的形式下载到服务器，服务器再通过网络将文件发送给用户。

在这个过程中，导出条数受限制的原因一个是服务器性能，另一个是用户的电脑性能以及所使用excel版本，在实际产品设计时，根据实际情况，制定一个合理的数据限制即可。

回到开头的场景中，用户不仅要导出数据还要做数据透视表，假设用户使用的03版excel，导出30多个字段，使用大量excel公式，最稳妥的是限制到1万条数据以内。

做了一组极限测试数据供大家参考，使用一台2核4G的服务器、1个用户使用、导出条数是1048576条（导出最大条数）、导出3个字段、使用2010版excel，导出后当使用一个sum公式时，出现了如下图的错误，导致excel异常退出。

2）明确导出格式

数据导出格式有.xls和.csv，.xls是二进制的文件用excel才能打开；.csv是文本文件，用记事本就能打开。而当前用户导出数据后要进行的是数据分析，故只需支持.xls导出。

3）明确导出需求

导出一个excel一个sheet，还是一个excel多个sheet？

考虑到用户导出数据后要对订单数据进行分析，可以与用户明确是否需要按某一维度如客户维度将数据拆分成多个sheet，减少用户操作数据的时间以便能把更多精力放在数据分析。

如果用户不需要按照某一维度拆分数据，则采用导出一个excel一个sheet的方式。

表头是否需要增加序号列？

当用户导出订单数据后，为了让用户准确操作某一行数据，需要有唯一代表一行数据的标记，而在订单导出前是以数据库的主键来标记，对于导出后的订单，则需要自动增加序号列方便用户操作。

是否有内容需要用颜色标注区别？

在导出订单数据中，为了快速掌握销售情况，有些数据是需要特别关注的、而有些不需要。因此，可以使用颜色标注来做区别，让查看人员快速找到自己想要的数据，如可以标注总计快速查看总销售额。

是否需要合并单元格？

对于导出后进行数据分析，不建议使用合并单元格，因excel中合并单元格后仅保留左上角的值如下图所示，这样会使得筛选出现错误，也影响批量的公式使用导致透视表无法分析。

如果导出后只查看数据，可以考虑使用合并单元格。

2. 导出时设计

1）是否需要导出维度

百度释义：维度是事物“有联系”的抽象概念的数量，如时间维度是以时间作为描述、表达变量的度量尺度。

导出维度是指的按照特定场景下，导出以某个字段为主导数据且与该字段相关的其他字段数据。

一般来说，财务和仓库的导出业务场景不同，财务需要以订单维度导出，仓库需要按商品为维度导出，如果无需导出维度，则不需要过度设计。

2）设置表头导出字段

由于订单的一条记录数据字段会很多，包括：订单号、销售类型、客户名称、产品名称、数量、单价、收货人、联系电话、账期、发货时间、预约到仓时间、发货基地名称、发货方式、合同折让率、应收款、已收款、未收款、产季等近30个字段。

而订单分析时，收货人、联系电话、发货时间等字段则无需导出。

因此选择字段导出，可以让客户能够更快速使用并完成分析。导出和查询均要使用筛选，但呈现结果的方式不同，两者的使用场景是可以借鉴的，建议可以放置筛选区。

3）是否需要支持选择行导出

一般来说，导出数据为全量数据，如果用户通过字段选择不出需要的数据，此时要支持用户勾选某些行数据，提示用户当前勾选数据明细及数据条数。

4）其他处理

为了让客户清晰的明白订单是如何导出的，需要在导出时给予导出规则、导出图片、附件形式说明文字提示。

1. 是否需要导出规则说明；
2. 导出图片、附件只能以链接形式导出说明；
3. 导出数据中是否存在日期和时间，需针对时间戳提前处理。

5）根据导出数据量，明确数据处理方式

从技术的角度说，针对较大数据量的导出场景，可以采用异步的处理方式，降低客户的焦急心理。

所谓异步，就是用户点击导出按钮后，后端接收请求并执行读取任务，用户可以不用停留在原处等待，离开当前页面去处理其它工作任务，之后再打开任务页面查看导出结果。

如果有数据可以预先计算，后端可以直接预先计算，同时避免了因采用同步的处理方式导致长时间等待的结果，客户体验会更好，工作效率也会更高。

1. 是否需要异步处理；
2. 是否需要预先计算。

6）是否需要任务页面

如果用户点击“导出”按钮后，10秒钟内不能完成文件打开，会让用户产生焦虑心理。为了让用户使用体验更佳，需要有一个固定页面即任务页面来承载导出任务列表。

四、总结思考

1. 从导出功能看功能设计流程

功能，是为解决问题而生，而功能的起源是需求，需求是从场景中找到问题。

由此可见，功能设计流程一定会包含场景选定、问题分析并找准需求、解决方案分析、选定功能、功能设计这5个阶段。

做功能设计时，时刻问自己三个为什么：为什么这是一个问题（问题具备危害性）？为什么要解决这个问题（被解决的价值）？为什么我选定的功能可以解决这个问题（功能的价值）？

2. 导出能够解决的问题

导出不仅可以解决文中的“需要更全面的数据分析”的问题，还可以解决“数据离线使用”的问题，导出后，数据以本地文件的形式存在，可离线使用。

另外导出还能解决“数据交付系统外部人员”的问题，导出后，数据以独立文件的形式存在，可以复制，传递。

3. 可优化方向

1. 当系统页面越来越多，导出也在多个页面出现时，可考虑使用一个配置导出页面统一管理系统中所有的导出；
2. 当用户使用导出功能后不停留在原处等待时，出现导出异常，采用短信或邮件通知用户，让用户及时知道导出进度不至于耽误工作。

文章来源：人人都是产品经理    作者：努力的小妖

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