如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
信息时代，每个人都需要具备基本的「搜索」技能，尤其是设计师，你有没有灵感枯竭不知所措的时候呢？今天我们召集了7位优秀设计师，对他们的设计灵感来源进行揭秘，希望这一期的轻访谈能够让你轻松Get设计大佬的搜索技巧！
优设轻访谈第八期，我们的话题是——不信息时代，能与我们分享一下你的搜索技巧么？平时的素材积累是如何进行的？
Dribbble：https://dribbble.com/creativemints
实际上，现在寻找灵感或资源变得非常容易。去Pinterest，你会获取到任何你能想到的灵感！查看stock网站，获取所有你需要的资源！
△ AGE / Online courses
尽管如此，我仍然建议从外部世界获得灵感——请几天假，去一个新的城镇或国家旅行，逛逛博物馆，你会发现真实生活会成为你最重要的灵感来源。
Dribbble: https://dribbble.com/glebich
是的，你是对的，搜索技巧对产品设计师来说是必不可少的。我在一家公司做了很长时间的分析师和研究部门工作，在那里我负责用户体验，这些经历帮助我理解如何搜索有意义的数据和信息，并使用它来定义一个产品的关键指标。
但是搜索不仅仅是关于用户分析和信息，也是关于设计语言——理解什么是可能的。最好的设计只有当你跨越了可能和不可能之间的界限时才会出现。这种平衡基本上是一种新的设计语言或产品的品牌。
我使用Pinterest进行图像搜索。这个网站帮助我创建情绪板，并找到一些更具体更具象的东西，Dribbble的作品帮助我研究UI布局。然而，我不会使用Dribbble来作为我的色彩搭配灵感库。
对于颜色，我使用自己的灵感素材库，在我的职业生涯中，我花了大量的时间从互联网上搜集素材，并进行创作和整理。我也有自己的平面设计素材库，我创建并管理这些素材库大约有10年了。我几乎每天都在捕捉的设计灵感素材。问题不仅在于你如何搜索，还在于你如何将这个搜索结果应用到你的工作中。
△ Water waves simulation for 3d icon
那如何应用呢？例如，当我看到好的设计时，我将视觉图像结构分离开来——有时我在情绪板中添加新图像仅仅是因为我喜欢形状，有时是因为我喜欢颜色，有时是因为图形效果等。在将该引用添加到库之前，设计人员需要了解在何处可以使用以及如何使用。对于设计师来说，搜索绝对是一项必不可少的技能，我通过创建情绪板促进了我的搜索。
我们相信灵感无处不在，当然也会取决于我们进行的项目类型。
我们在互联网上会搜索很多，比如Behance和Dribbble。然而，我们周围也有很多灵感。
△ Cellebrite Pictograms
例如，如果进行的是一个品牌项目，那么我们周围的自然环境就是我们获得灵感之所在。颜色、动效、形状和所有这些的组合使一切都在一个愉快的和谐场景中工作，这就是我们努力传递的。
对于UI/UX项目、网站和App设计，我们也是这样做的，但我们主要目的是理解用户的最终目标和每个行动背后的动机。我们不仅在数字世界中研究类似的解决方案，在现实世界中也会寻找类似的解决方案。
Dribbble：https://dribbble.com/phamduyminh
我不在本地存储灵感资源，因为想要方便浏览必须对其进行分类，而这对于本地存储来说比较困难，所以我非常依赖于在线资源，它们有很好的搜索引擎，所以，为什么不呢？
基于不同的目的，我更喜欢从多种来源获得灵感:
说到寻找灵感，我认为有两种人：使用Dribbble的人和使用Behance的人。Dribbble更像快餐，在这里你可以迅速的饱腹，Behance更像一家高档餐厅，你可以在那里度过整个晚上。
我个人喜欢吃快餐。我喜欢每天早上上班前查看Dribbble，当我发现好东西的时候，我就把它存起来以后用。
△ Promo Website Animation for Pocket Multilingual Assistant
如果你正在寻找真正的案例，而不仅仅是概念稿，你可以在Awwwards上找到一些主流的东西，也可以在这里找到一些更奇怪的东西。
哦，还有Pinterest，它的优势是推荐你可能喜欢的东西。我经常用它来做情绪板和寻找参考素材。
如果是插画资料，没有比Dribbble和Behance更好的地方了。只要滚动鼠标，所有的好东西和你喜欢的艺术家都会一步添加到你喜欢的作品中，简单!
△ Tempers Flare
Pinterest有利于发现新的想法、主题、不寻常的元素和灵感。每天浏览这些平台也会让你培养出一双训练有素的眼睛，这对提高你自己作品的质量和风格至关重要。」
Dribbble: https://dribbble.com/febinraj
我每天都想更新！我认为这是件大事。因为这个世界瞬息万变。
△ Evening From Kerala
通常，我的主要搜索源是Behance和Dribbble，同时我从其他来源获取了更多的数据，比如文章，博客。
Behance: www.behance.net/yihsuanli
信息时代，每个人都必备一个「搜索」技能，尤其是设计师，很多人在接单后,可能会第一时间在网络中或者日常的资料扩中搜索素材、参考、灵感等。
我还记得刚开始接触设计时因为没有太多经验，常常因为资料整理太久，压缩了执行时间，最后反而虎头蛇尾的完成作品。虽然创作作品时资料搜集、调查很重要，但其实整体过程有更有效率的方法。其实收集资料也是需要练习的，通过经验累积，可以渐渐增加效率与快速找到最精准的讯息，避免漫无目的搜寻。
△ ZENWATER
Work hard 不如 Work smart, 有了较有系统的资料搜寻方式后，可以将时间留给创作和尝试。随着经验累积，我开始养成了一些小技巧帮助自己更有效率的搜集资料，大家可以酌量参考：
1. 先用树状图整理出关键字
在开始找资料前我会先把设计关键字整理出来，先从Google或百度等网站去搜寻相关的话题或图片，以此方式让思考可以更突破。例如，我要做一张音乐会的海报，开始前，我会先写下关键字，例如：乐器、钢琴、音乐、琴键、流动、弹奏….，接着利用这些关键字进行中英文查询，随着找到越来越多资料，可以从其中找到更多可能性的延伸。这个阶段搜寻目的是从抽象方向出发，避免找到与别人相似的元素。一个一个关键字搜寻后，就可以把其中好的图片整理再一起，收敛成更明确的设计方向。
2. 擅用IG的＃hashtag功能
除了使用搜寻网站寻找资料，我觉得IG（instagram ）也是一个不错的选择。我会用IG 的hushtag去找大家对于某一个单字不同的想像，例如找#music，在其中除了可以找到音乐相关的画面，有时候也可以找到不同场域里的音乐元素。除了找灵感外，我也会利用hushtag搜集的设计作品，例如找#logo#graphicdesign时，可以看到大家正在进行中的作品，或是还未整理好放上Behance的作品。
△ One Team One Goal / IBM Taiwan Sport Day
3. 以pinterest分类整理资料库
我平常就有整理pinterest的习惯，建立资料库的习惯除了为了特定专案外，我也会以设计种类分类作品，例如以CI、packaging、poster…分类。除此之外，以风格分类的资料库也是必要的，例如：东方风格、美式、日本风格、欧式….。这些平常就累积好的资料库能够让我搜寻作品资料时，有一个快速的开始。 Pinterest会依据风格推荐更多的作品给使用者，因此当平常有了足够的累积，寻找资料就会有效率很多，能够快速找到很多需要的作品风格。
4. Behance搜集不同风格的设计师
Follow特定设计师的IG或是Behance也是我搜集资料的一个方法。我会搜集一群在每个领域最具代表性的设计师。在找不到灵感时，我会不断浏览他们的作品集，试着从他们角度出发，思考如果是他们遇见这个题目，他们可能怎么发展。除此之外，他们也是一个完整的风格库，每个作品都是该领域的标竿，当客户有特定风格的需求时，能够快速给自己一个明确的目标，期许自己能够达到他们作品的高度。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天遇到的就是z-index不起作用的问题。一个后台小哥不知道抽什么疯，写元素覆盖偏不让用absolute，搞的我之后废了9牛二虎之力写了一下，问题描述是这样的，
一对兄弟节点,insert和parent，parent有两个子节点subtop和subbottom，展现的结果是想让subtop在insert上面，subbottom在insert下面，
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.insert{
position: relative;
z-index:100;
background: green;
width:300px;
height:300px;
top:100px;
}
.parent{
/*position:relative;
z-index: 1000;*/
width:200px;
height:200px;
/*left:0;
top:-50px;*/
border:1px solid #eee;
}
.subbottom{
position:relative;
z-index: 50;
width:200px;
height:200px;
background: red;
top:-100px;
left:0;
}
.subtop{
position: relative;
z-index:1100;
width:100px;
height:100px;
left:0;
top:0;
background: blue;
}
</style>
</head>
<body>
<div class="insert"></div>
<div class="parent">
<div class="subtop"></div>
<div class="subbottom"></div>
</div>
</body>
</html>
其实原理也很简单，就是利用了z-index的覆盖问题，在写的过程中我发现无论怎么改变，insert的z-index总是无效的，于是百度了一下z-index无效的情况，一共有三种：
1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。
这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了，他的解决办法有是三个：
1、position:relative改为position:absolute；
2、浮动元素添加position属性（如relative，absolute等）；
3、去除浮动。
所以，去掉parent的position和z-index，达到了我想要的效果，如下图所示：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我们都知道UI设计并不仅仅是做出好看的东西，还涉及到交互和数据还有转化率，就像是设计师通过界面在于用户交流一样，而底部导航栏就是交流对话中的一个。因为如果用户连他们在产品的哪里都不知道，那么我们的设计再好优秀也是没用的。
底部导航栏的用法
底部导航栏在屏幕底端展示3至5个目标选项，每一个选项由一个图标和文字标签展示，点击底部导航图标时，将带领用户前往与之关联的视图。
这里将目标选项放在底部的原因是，在手持的移动设备上容易被触及，符合拇指定律，方便用户单手操作。
底部导航栏的展示
根据我的观察，底部导航栏的表现形式一般分为三种，首先我们先来说第一种：
1、文字+图标
大部分的平台都是使用的扁平风格，只有在节假日的时候才会出现，而多数情况下，我们常见的底部导航栏都是以文字+图标的形式出现，在选中的状态下，设计师也会根据对整体风格的把控和产品调性，增加一些变化和趣味，来突出产品的风格。如下图所示：
全名K歌和知乎的底部导航栏就是使用文字加图标的形式，其中全名K歌的底部图标增加了一些有趣的变化，让底部图标变得更有趣，同时文字的存在能够更好的让用户对图标进行理解，提高用户识别效率。
2、文字
文字按钮目前来说产品里使用的也是比较多的，大多出现在以图片和视频为主的产品和界面中，如下图所示：
抖音、美图秀秀、小红书，这三款APP的底部导航栏都是文字作为模块切分，在使用的过程中，更能够关注与阅读内容，底部操作栏视觉层级相比上面的那种层级比较低，不影响浏览视觉，同时文字按钮降低了用户的理解成本。
3、图标
单图标按钮是很少见的，很多图标都没有很强的识别度，所以仅仅用图标放在底部操作栏，会造成用户的认知负担，不建议使用独立的按钮。如下图所示：
VSCO是一款给用户推荐产品的APP，因此底部操作栏只有三个按钮，从设计的架构和产品的逻辑上来说，比较有利于用户对图标点击操作。
Same的是一款社交的APP，有别于目前的大部分产品，它的底部是使用的单图标的形式，虽然整体界面比较简约，但是辨识度比较低，造成了使用产品时的认知负担。
小总结：
1、当页面图片以图片为主时，使用纯文字或者纯图标的能够降低底部图标对用户造成的干扰，但是纯图标的底部导航栏降低了用户的识别度，引起用户使用时的认知负担。
2、文字+图标的搭配属于最稳妥的方式，适用于大部分的产品底部图标设计。
底部导航栏图标的设计
当我们准备做APP底部导航栏设计的时候，不知道大家有没有遇到过经常不知道该用面性还是线性的纠结中，究竟要选择哪种对用户来说才是合适的呢？
大多数的人会觉得是出于个人喜好，但是一项名为《面性图标vs线性图标，对于可用性方面的影响》的研究表明：不同的图标存在着不同的识别效率，而面性图标一般会比线性图标更快被用户所识别。
1、特征线索
用户要辨认图标依靠的就是特征线索，如果一个图标没有明显的特征，是很难被用户所识别出来的。如下图所示：
如上图所示，发现的特征线索是它的眼睛，没有眼睛，发现就是个椭圆；目的地的线索特征就是中间的圆，没有了中间的圆，就是个小气泡；行程是做成了行李的样子，而没有了行李箱上的特征标志，就变成了一个很普通的包。
所以图标上的特征线索是用户识别的关键，在我们设计图标的时候，一定要确保它包含了用户识别的线索。
2、什么情况下用线性图标？
图标除了要包含特征线索以外，线性和面性图标之间也有区别，当一些图标的外部特征为它的特征线索时，线性图标会比面性图标的识别度来的更为突出。
当我们的底部图标的信息属于特征线索比较微妙，并且出现在边缘的时候，我们可以使用线性图标，或者换个角度来说，就是当我们选择底部图标为线性的表现形式的时候，在图标的表现形式上，尽量往形状的边缘特征来靠，这样能够让图标更加突出并且很快被识别。
3、什么情况下用面性？
大多数图标其实就是将现实生活中的对象变成一个小缩影，因此面性剪影的图标形式认知高于线性图标。
尽管如此，用户还是能够识别线性图标，但是当图标的内部空间比较狭窄的时候，用户识别线性图标需要花费更多的时间来识别。
对于内部空间比较拥挤，或者线条比较多的图标，最好使用面性图标，剪影的表现方式提供了一个更简洁也更具辨识度的方式，从这里我们可以发现一个事实，线性图标的设计表现要求要高于面性图标，因为线性图标要在具有表现力的同时还需要有很高的识别度，同时不能太过复杂，内部不能过于拥挤。
划重点
1、当页面图片以图片为主时，使用纯文字或者纯图标的能够降低底部图标对用户造成的干扰；
2、文字+图标的搭配属于最稳妥的方式，适用于大部分的产品底部图标设计。
3、图标是由有识别度的特征线索组成的，而面性图标的识别度速度更快；
4、线性图标的内部间距比较宽的时候，更容易识别，内部间距比较窄的时候，使用面性图标会更好；
5、图标的特征线索在边缘的地方，使用线性的图标识别度更高。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题，即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题。
先允许我梳理一下目录结构，以便阅读的时候不会一头雾水，你到底说的这个文件是哪个……
其中 /src/main 是存放主配置文件的，/src/render 下面有 store、router、components 等。
components 下面就是很多 .vue 文件，router 下面就是一些路由配置的 js 文件和一些拦截器的 js。
关键是 store，store 下面有一个 index.js 的主配置文件 index.js，和一个 modules 文件夹。
index.js 里面写的是（记住这句话，后面会用到）：
import Vue from 'vue'
import Vuex from 'vuex'
import { createPersistedState, createSharedMutations } from 'vuex-electron'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
modules,
plugins: [
createPersistedState(),
createSharedMutations()
],
strict: process.env.NODE_ENV !== 'production'
})
而 modules/ 下面存放各个实体，例如上图中的 Auth.js 和 Counter.js，并通过 index.js 全部引入。
/**
* The file enables `@/store/index.js` to import all vuex modules
* in a one-shot manner. There should not be any reason to edit this file.
*/
const files = require.context('.', false, /\.js$/)
const modules = {}
files.keys().forEach(key => {
if (key === './index.js') return
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default modules
然后来看一个 vuex 的官方样例：
const state = {
main: 0
}
const mutations = {
DECREMENT_MAIN_COUNTER (state) {
state.main--
},
INCREMENT_MAIN_COUNTER (state) {
state.main++
}
}
const actions = {
someAsyncTask ({ commit }) {
// do something async
commit('INCREMENT_MAIN_COUNTER')
}
}
export default {
state,
mutations,
actions
}
之后很显然的，我想要在 Vue 的组件调用 INCREMENT_MAIN_COUNTER 对计数器加 1。
this.$store.commit('INCREMENT_MAIN_COUNTER');
// this.$store.commit('INCREMENT_MAIN_COUNTER', payload);
1
2
如果是一般的 vue，就 OK 了，但是，我遇到了报错，说，Please, don't use direct commit's, use dispatch instead of this.
那好吧，没事，不就是不然用 Commit，非要用 Dispatch 嘛，那我就写一个 Action，里面直接调用 Mutation，就像这个样子：
const actions = {
JUST_INCREASE ({ commit }) {
commit('INCREMENT_MAIN_COUNTER')
}
}
1
2
3
4
5
然而奇怪的事情是，this.$store.dispatch('JUST_INCREASE') 并不能运行，没反应，计数器还是 0，不能赋值，就像是这个函数没有被执行一样。没有报错，没有任何异常，查也查不出什么问题。
网上的资料似乎也挺少。
折腾了很久，后来发现是 vuex-electron 里面一个插件的锅。
解决方法有两个。
方法一：
在 store/index.js 里面，就是上文特别强调了的那个文件，去掉 createSharedMutations 插件。
import Vue from 'vue'
import Vuex from 'vuex'
import { createPersistedState, createSharedMutations } from 'vuex-electron'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
modules,
plugins: [
createPersistedState(),
createSharedMutations() // 注释掉这一行
],
strict: process.env.NODE_ENV !== 'production'
})
这是因为 vuex-electron 引入了一个用于多进程间共享 Vuex Store 的状态的插件。如果没有多进程交互的需求，完全可以不引入这个插件。
注释掉以后重启项目，用 this.$store.commit('XXX') 就可以使用了。
然而，如果需要多进程来处理怎么办？
方法二：
https://github.com/vue-electron/vuex-electron#installation
看第 3 条：
In case if you enabled createSharedMutations() plugin you need to create an instance of store in the main process. To do it just add this line into your main process (for example src/main.js):
import './path/to/your/store'
1
这种时候就不能用第一种方法来解决问题了。
好在文档也说了，加上一行导入。
找到 /src/main/index.js，在前面加上一句：
import '../renderer/store'
1
之后一切正常，可以使用 Dispatch 来进行操作了。
最后还有一个比较奇怪的问题：
在直接调用 state 的时候，这样写 this.$store.state.loginStatus 是不行的，会 undefined，必须写成 this.$store.state.Auth.loginStatus，就像是 this.$store.state.Counter.main 一样，似乎可以解释为，不同的模块不指定名字的话就找不到。
但是，在写 Dispatch 的时候又不需要指定名字了，直接 dispatch('changeLoginStatus') 就行了，不然难道不应该是也按照 dispatch('Auth/changeLoginStatus') 这样子来写嘛……
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
前天看完大陆毕业展海报合集，不少小伙伴大呼看得不够过瘾。为了满足大家炙热的求知欲与上进心，美丫姐又花足工夫找来了今年港澳台、日本、欧美等地毕业展海报。依旧干货十足，依旧吐槽猛烈，希望优秀如你，能够看得开心。
首先我们来看看让人印象最为深刻的优秀作品。
渴望自由的金鱼
鱼缸中的生活再怎么无忧无虑，也拦不住金鱼一跃而出的渴望，就像喷薄欲出的创意，就像按捺不住跑出校园的毕业生。
架着一个歪斜的棚子，支撑着我们的二十二
猛然撞上了即将踏入社会的迷茫与不安，台科大的莘莘学子鼓起勇气，向老师询问着最后一个问题「老师您看这展厅，供电是不是不太够？」
伏流
有时候你以为自己发现了一股清泉，其实全是大佬手里玩剩下的，人外有人，天外有天。
喜欢做，肝愿受
其实大家刚毕业头几年也是这么想的，几年之后肝还好，头很冷。
后浪
长江后浪推前浪，后浪还有后后浪。大家都是被时代的洪流裹挟着前进，显然这届毕业生还没毕业，已经被学弟学妹们震得神志不清了。
超人请回答
整个童年，大人都忙着策划一个玩笑，让孩子天真的相信世界上真的有超人，等到成年之后他们再哈哈大笑「哈哈哈她真的信有超人」，偶有不愿从童真中醒来的人继续寻找，你们等着，迟早给你们找来真的超人。
青浪
用各式纹理堆叠表现出了「浪潮」的韵味，既能联想到青出于蓝胜于蓝，又有长江后浪推前浪的语境，画面动感，锐意十足，就是不知道早就毕业的学长们会怎么看。
那个967呢？
找了很久只找到「967=很想你」的说法，但想来不至于借毕业海报，发出「凭什么就我四年没有恋爱」的呐喊，越不知道就让人越想知道，竟有一丝等待戈多的意味。
非想非非想
到底是佛光普照大学毕业的学生，还没出校门，就已经参透了甲方的真谛，非想，问他想要什么，说不出来；非非想，却总能提出一大堆意见。
泛流意识
总说要把意识汇聚成一道洪流，变成一道铁流，细想也没什么不对，毕竟钢铁、石头、血红细胞里都含有铁元素。
灵光乍现
灵光就像这一坨奇妙的东西，摸不着更说不清，出现的时候总让人欣喜若狂，定睛一看，可真不是个东西。
层
明志科技大学旗下有两大门派，一派工业设计，一个视觉传达，两大派的关系想必是剑拔弩张，一派冷静沉稳，舍我其谁。
眼波
一派浮夸前卫，闪瞎人眼。
画语者
老猎人除了酷爱炫耀猎物，更爱炫耀不离身的老猎枪，情人眼里出西施，用心爱的工具们铺满整张海报，还能有谁比他们更爱这个行业。
形象组无能
「海报做成这样，都怪老师举棋不定」，多少年后才突然醒悟，原来老师的犹豫不决，是为让我享受最后一次任性的机会。
轮迴
「谁TM把灯打开了？」。不，是天又亮了。多少优秀的作品背后，都是无数个日日夜夜的轮回
今宵霓烂
在陈列室打碟，在毕业展上蹦迪，如果连想都不敢想，那你凭什么认为你能改变这世界？
其次是第二梯队，虽然不算突出，但也算优秀作品。
淘色风波
龌龊的语意，来自成人龌龊的内心，让家长面红耳赤的「淘色风波」，不过只是毕业生们翘课逛展打游戏。
新一代设计展
废掉的第一稿千万别撕，不然最后出街时就是这个鬼样子。
被……的那五年
科大的毕业展为什么延期了五年？估计是地图画得太烂，大家花了五年才找到举办的地址。
发声关系
「喔」「啊」「曰」，奇了，大家都是纸打印出来的作品，凭什么就你们家海报有声音？
生长轮
树木的年轮记录着时光，每当有大事发声，从年轮中就能看出一二，你看今年新的圈圈它又白又圆。就像学生们毕业一样，脚踏实地、悄无声息。
升温计画
温室效应？冰川融化？这些都远远不够，沉默四年平淡如水，如果一生一次的毕业大展再不燥起来，那可就真的毕业了。
外出取材中
闷在家里一时爽，一直闷着一直爽？活像躺在盒子里的量产玩具，该出去走走，看下绚丽多彩的世界了。
三角关系
创意、媒介、受众，所谓传媒，正是一场相爱相杀的三角游戏。
零睡时间
你以为躺在床上就是不思进取？不，我是在梦里收集创意，一时的休憩，是为了更好的前进。
问HOW
寒窗十数载，大人都说不懂就问，步入社会才知道大家都只能强撑，明明面对奇葩需求，想要大声反问一句「HOW？」看看瘪掉的钱包，只能脱口而出，说一个「好」。
蹦起来
设计水平还没那么高的时候，一定记得猥琐发育不要太跳。不然，甲方连头都给你锤爆。
最后是第三梯队，先不论好坏，总之看得人迷惑得很。
复燃
想让葬爱家族设计风潮死灰复燃，甚至风靡世界也不是问题，只需简单一步，把地球表面刷成 QQ 空间那么黑。
扔出去的，头也不回
扔出去的飞机稿就别再捡回来了，即使马粪风干后看着像块巧克力，但只要你一舔就会发现，呸，果然还是那堆马粪。
是生活
怀疑是在暗示黄色比生活更吸引人，但手上又没啥证据。
一体两面
思维定势是一件很可怕的事情，比如甲方经常让把大象换个面，觉得不是正面就是反面，可换来换去还是不满意，就没想过，甲方要的是横切面。
艺眼瞬间
好设计让人瞠目结舌，觉得语言乏力，丑的设计也能让人瞬间语塞，根本说不出丑在哪里。
DNA
看完台湾大叶大学官网上的师生风采，就能明白这确实是一所连空气都飘着直男审美的理工科大学。
也就不难理解为什么连设计系学生们的毕业海报都会有这么大一股子消毒水味。
记得呼吸
比起上一张工业设计系海报的冷静，视觉传达系海报走向了另一个极端，线条凌乱，张牙舞爪，若不用文字提醒「记得呼吸」，不少观众会因为过于震撼憋死在原地。
跨越
连着领导的修改意见以及删除线，一齐打印出来的终级作品。
「香港的呢？」抱歉，一张都没找到。
日本，设计强国近邻日本。今年毕业展海报也是颇有看头，他山之石可以攻玉。
1. 多摩美术大学
能顺利毕业的，都是怪物。
2. 武蔵野美术大学
感受扑面而来的乡土气息。
3. 东京艺术大学
这就是设计师通宵后倒下的身影。
4. 东京造型大学
综合各位老师意见之后的海报作品。
5. 东京五艺术大学联合展
「我用图画工具都比你画得好！」「好好好你行你来。」
6. 仓敷艺术科学大学
「快从楼顶下来，这次真的不改了！」「你们签字画押」。
7. 京都精华大学
学习四年，设计使我面目扭曲。
8. 京都造型艺术大学
套用学长给的模板，但忘了改日期。
9. 金泽艺术工业大学
金泽大学深造多年，最拿手的就是往产品上喷金漆。
10. 冈山县立大学
让我看看，谁还没交毕设作品。
11.日本桑泽设计研究所
我们的展区在山顶上，请大家参展时做好御寒准备。
12. 名古屋艺术大学
为了让画面更丰富，我放了 267 顶帐篷。
13. 奈良艺术短期大学
毕业考试第一题，画出任课老师的脸。
14. 文化学院大学
反正到时候大家都是要哭的。
欧美地区毕业展海报内容更加现代，但因为文化差异较大，消化起来相对比较困难，这里就不一一吐槽了，大家自由学习。
1. 路易斯安纳州艺术与设计学院
2. 伦敦都会大学
3. 美国Art Center
4. 英属哥伦比亚大学
5. 美国马里兰艺术学院
6. 英国皇家艺术学院
想不到你这帮浓眉大眼的英国人，也玩「爱滴魔力转圈圈」。
好了，以上就是今天的全部内容，谁要是还觉得不过瘾，只能老老实实等明年新生毕业了。
总体说来，亚洲地区文化的多样化性，还是完胜欧美，这点非常值得欣慰，但是回头看看大陆毕业展海报，又千篇一律到让人完全开心不起来。总之还是那句老话，革命尚未成功，同志，仍须努力啊。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
最近设计群里经常有人问起小程序设计规范的问题，虽然官方有提供样式库的下载，但是停留在 16 年版，不是的。而设计经验这部分网络上也没有比较全面的分享，这促使我停下手上的计划，加快输出本篇文章。正好近期刚结束几个小程序项目，总结下经验，并结合微信小程序的官方设计指南，一起分享给大家，希望帮助大家更快速地上手。
随着 2018 年小程序的迅猛发展，小程序现已被各大企业广泛采用，「触手可及、用完即走」的用户体验备受青睐，随之小程序设计也成为设计师的必备技能，那在进行小程序界面设计时，应该如何快速做设计？过程中又要注意哪些问题呢？
对于已经开发了 App 的产品，在进行小程序设计时需遵守小程序的规范，同时要保持小程序界面设计与 App 的风格统一性。
小程序的「所有页面」右上角位置，都固定放置了小程序的菜单，在设计界面时需预留出该区域空间。
1. 小程序菜单固定样式
微信提供了深浅两种配色样式，以便更好地融合到各种风格的页面中，需注意保持小程序菜单清晰的辨识度。
线上案例：
2. 交互注意事项
如果要在小程序菜单附近放置交互元素，要考虑是否有交互冲突，应尽量避免误触的可能。
建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分。
如上图，小红书的自有导航样式个人不推崇，理由如下：
微信读书既有微信线条外框的 DNA，又区别于官方样式，是不错的综合。以上仅限个人观点，还需用户数据来客观验证。
3. 搜索框常见的几种表现形式
1. 小程序设计规范
顶部标签分页栏颜色可自定义，一般会沿用 App 的设计风格，以保证两个平台的视觉统一性。
2. 常见的几种表现形式
1. 小程序设计规范
微信有提供小程序的底部标签样式，建议标签数量在 2-4 个适宜。
也可根据产品需要选择或者去掉底部标签栏功能。
2. 常见的几种表现形式
启动页除品牌 Logo 外，其他元素都由微信统一提供，且不能更改，设计师仅需提供 2 倍和 3 倍尺寸的 Logo 即可。
1. 小程序设计规范
全局加载是小程序名称左侧的加载图标。模态的加载样式将覆盖整个页面，由于无法明确告知具体加载的位置或内容，可能会引起用户的焦虑感，建议谨慎使用。
2. 常用的加载样式
需告知用户具体加载的位置形状，减轻用户焦虑情绪。
对于没有开发App来说，可依据官方推出的《微信小程序设计指南》来设计，以确保快速设计出符合规范的小程序。
小程序设计应遵循友好、、一致的设计原则，每个页面都应有明确的重点，清晰明确地告知用户身在何处，又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路。
最后，推荐几个常用的平台设计网站。
1. BAT各平台小程序设计规范网站
微信小程序设计指南：https://developers.weixin.qq.com/miniprogram/design/
支付宝小程序设计规范：https://docs.alipay.com/mini/design
百度-智能小程序设计规范：
https://smartprogram.baidu.com/docs/design/overview/introduction/
2. 其他常用的设计规范网站
苹果-人机界面指南：https://developer.apple.com/design/human-interface-guidelines/
详细介绍了 iOS 设计规范，同时还提供了 UI 设计资源下载。
安卓-MD设计指南：https://material.io/design/
蚂蚁设计：https://design.alipay.com/#ds
提供移动和 Web 端的设计组件，还有设计案例和心得的文章供学习。
微信样式库：https://weui.io/
提供微信内的网页和小程序设计规范。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
简介说明1. 理论表述
对于许多事件，大约 80％ 的影响来自 20％ 的原因。
2. 理论背景
1896 年，意大利经济学家帕累托出版了《经济政治学课程》（Cours d’economie Politique），其中描述了他所观察到的一些现象，比如意大利 80% 的土地掌握在 20% 的人手中；比如花园里 20% 的豌豆荚产出了 80% 的豌豆。
上世纪 40 年代，美国一位管理顾问 Joseph M Juran 观察到一个在商业以及生活中普遍存在的现象：在某一过程中，80% 的影响来自于 20% 的投入。他将这一现象以帕累托为名，称为「帕累托原则」。
80/20 虽然只是一个相当不的数字，在很多具体情况之下，这个数字会有细微的波动，但这个数字背后所蕴含的思想或是规律却是不变的：更集中的投入将产出大于预期的结果。
一般来说，一个 APP 大多拥有几十上百个页面，但是这些页面并不是用户都能用到的，有时候大多数用户只会常用那么几个页面，所以将有限的时间和精力投入到这些页面将给你带来更大的收益。
案例1：网易云音乐的 UI 迭代
最近网易云音乐和虾米音乐都迎来了大版本更新，UI 也几乎重新设计了一遍，但我们所看到的重设计，只局限在那些关键的页面上，一些次要的页面基本没改。比如网易云音乐，首页这种重中之重的页面不仅风格、排版大改，连产品逻辑都改了（比如快速入口由四个变为五个，改变了私人 FM 的位置等），但是等级页这种无关紧要的页面，除了头部的全局性改动外，其他地方一点没变。
那我换个角度想，如果我们的应用已经存在了这么多需要花费时间和精力的页面，现在产品经理希望增加另一项需求量小但确实存在的功能，我们应该怎么办？奥卡姆剃刀指出「如无必要，勿增实体」，这是我们对此欲增加的功能的终极评判标准。
要知道，页面中每增加一个元素，对于用户体验的影响是巨大的，这意味用户着需要花费额外的时间去理解新增加的元素是什么；在所有元素中寻找特定的一项又多了一些备选；浏览页面时的视觉噪声又多了一些。
所以到底要不要增加这个功能，关键在于能否很好地控制上述的用户体验成本，以及后续的迭代成本。从帕累托原则的语境来看，小众但是确实存在的需求大概率不足以产生能够克服用户体验损失的收益，哪怕我们投入了一定的精力去做，日常依然无法给它百分之二十以上的关注去修改，去完善，去迭代，所以这个功能也大概率不需要增加。
说起帕累托原则就不得不提到长尾模型，长尾模型的分布曲线与帕累托长得很像，但是结论却完全相反，长尾模型提醒我们无法忽略那条长长的尾巴的影响，虽然它收益低，但架不住数量多，比例高。所以我们可以看到「尾巴」所占据的面积几乎和「大头」相当。
04 年长尾模型被提出来的时候，很多人认为长尾模型是对帕累托原则的颠覆，诸多例子都侧面佐证了长尾模型的正确性，比如 Google 目前约有一半的生意来自小网站，比如亚马逊图书的总盈利中少数畅销书占一半，绝大多数的冷门书占另一半。
听起来好像很有道理，长尾模型好似在控诉着开发者不去关注那些小众而众多的琐碎需求。事实真的如此吗？
长尾模型本身隐藏了两点不可或缺的前置条件，一是尾巴真的要足够长（小众需求真的有这么多），二是这么长的尾巴能被用户发现。无论哪一点，都建立在海量的用户资源之上，所以中小型 APP 大多望尘莫及。能够有余力去关注长尾模型的大多是用户量达到一定规模的产品，比如之前例子中所举的 Google、亚马逊，国内的微信、QQ、淘宝、支付宝、京东，这些产品的用户量足够多，用户类型足够广，尾巴足够长，哪怕再隐蔽的功能入口也能拥有不错的曝光度（总会有用户发现它），所以才能发挥长尾模型的作用。
所以在用户量达到 QQ、淘宝的级别之前，长尾模型看看就好，帕累托依然是主要的指导原则。
注意点1：不得不做的需求
虽然我们要将精力放在重要的事情上，但有些功能和标识即使对于用户意义不大，和产品的增长也没有实际联系，但我们也依旧需要花费大量精力投入。最常见的就属于法律规定和平台规则相关的需求了。
比如 18 年的大事件，欧盟推行《一般数据保护条例》俗称「GDPR」，所有国际版的应用都需要针对这个条例对注册流程做出大改，比如这篇文章介绍的：《GDPR合规下的 App 产品设计——启动页面和账号注册》。
注意点2：最重要的「少数人」
满足大多数用户的需求是一个必要条件，但不代表在任何情况下少数人就是可以被忽略的群体。对于工具化的应用而言，真正为应用带来收入和传播的，恰恰是占比较低的付费用户，可能连 20% 都不到。
在这类应用开发的周期中，前期完成了满足大多数用户的基础功能，之后更多的精力会被分配在满足少数付费用户的需求上。产品的方向和目标都可能随着不同的时期发生变化，帕累托原则是一个决策工具，但决策方向是需要经过我们充分思考以后得到的，切勿盲目地服从一个指标。
蓝蓝 http://www.lanlanwork.com
