做中后台产品的设计，基本都逃不开导航布局这个大框架。
基于用户的 Z 字形扫描行为，重要的导航应当选择左侧导航或顶部导航。
可是横着竖着有那么大差别吗？被人问道为什么这么选择，该如何回答？
今天给大家些灵感，从以下四个角度分析一下：
JR Kingsburg 曾经做过一次实验（A comparison of three-level menu navigation structures for web design），研究 3 层导航中，哪种组合使用效率更高。
这三层中，每一层都有横向和纵向两种可能性，所以实验总共有 2×2×2=8 种对照组：
他为这 8 种导航布局做了不同电商原型，让用户来买东西，并记录各种数据，结果发现了很多有意思的数据：
综合这些数据，看起来整体表现较好都是「左上上」、「左左上」、「左左左」。
科学虽然很严谨，却缺乏灵活度，例如本次试验的场景单一（电商购物），而且用来测试的界面未免也太简陋了吧！
所以我们再从其他角度思考看看。
从占据面积的角度来看，横向导航比纵向导航省地方，因为只要细细一条就好了。
然而，选项数量不多时横向是可以；选项多起来，横向导航就很拥挤了。
毕竟纵向导航方便滚动，横向导航很少有用户会尝试滚动查看的，「…」也不是什么方便的操作。
所以，如果确定选项少可以选横向，不确定或者数量多建议保险起见选纵向。
任何导航，都要占据屏幕不少空间，这对尺寸适配都是一件麻烦事。哪怕产品并不需要为移动端做响应式布局，只要是网页端，就得考虑窗口尺寸的变化问题。因为设计师的 Mac 和大量用户的 PC 甚至平板电脑之间，展示上的差异真的不小。
横向导航占据空间最小，同时也是最难做尺寸适配的。尤其是如果上面除了导航之外，还放有各种 logo、头像、图标、搜索…各种东西时。横向导航一般都有三种状态：展开、折叠和收起。但是纵向导航就简单了，只需要两个状态：展开和收起。顶多再让展开状态的宽度能够自适应变化或手动拉伸就差不多了。
这么看来，如果产品需要考虑很多不同尺寸适配的问题，纵向导航是最简单的选择，除非横向导航的内容不多维护起来不麻烦。
我之前为了研究确定按钮放在左边还是放在右边好，做了一系列实验分析，结果得出超出我预期的结论…放哪都没多大问题，统一就好。于是，我想这个问题也可以类比一下。
大部分网站都是横向导航，所以说如果产品是以网页版为主，且用户会经常穿插跳转使用其它网页，那么也使用横向导航比较符合习惯。
而无论 PC 还是 Mac，系统页面的导航在左侧的情况比较多，所以说如果产品是系统软件的话，纵向导航比较符合习惯。
然而，更更更更更重要的是，千万不要同一个产品不同端或不同子系统的导航不一样！用户很可能一会儿用这个，一会儿用那个，结果操作习惯换来换去，人都弄晕啦！还有，就是改版换导航肯定要让老用户不满，好不容易养成习惯改起来容易吗？所以说，决定导航布局时还是要谨慎才好哦。
文章来源：优设 作者：体验进阶
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前言
在企业工作中，每一个问卷调研都始于一个商业问题，问卷的质量也决定了最终结果是否能对业务起到帮助。本文将从定义问题-问卷设计-数据清洗与分析-报告撰写这四个基本步骤相对完整地阐述企业问卷调研，希望可以给大家提供一些研究方法上的思路。
定义问题：情境分析法（SCQA）
在商业问题解决的过程中，既有公司内部的因素，也有外部行业的因素，影响因素错综复杂；周围的环境也比较容易发生变化，具有很大的不确定性；同时又要保证解决方法的可落地性，产生实际的价值。相对来说，会比较复杂。在进行问卷设计之前，更有必要的是将问题梳理清楚，再决定是否采用问卷这种方式。
1.1 结构化思考：使用SCQA描述项目
SCQA是将不确定性考虑在内，一种结构化的问题分析方法，可以比较好地系统思考、查漏补缺。它包含四个环节：
情境（Situation）：由大家都熟悉的现状或事实作为起点，包含对象、所处阶段等
冲突（Complication）：实际情况往往和我们的目标有冲突，颠覆了稳定的状态。说出行动的原因，包含威胁、机会和等着我们去克服的困难点
问题（Question）：基于冲突提出问题，要怎么解决这个困难点
回答（Answer）：我们的解决方案是什么，定位出需求点
1.2 如何洞悉情境和冲突：搞清楚为什么做调研
假设我们拿到上述案例作为调研项目，可以有两种方式去进行洞悉情境和冲突：
一是思考为什么要做这个研究；二是跟相关利益者访谈尽可能多地获取信息。
1）思考为什么要做这个研究：
- 需要回答什么问题？
- 为什么回答这些问题很重要？
- 打算如何使用最终的调研结果？
2）跟相关利益者访谈：
- 核心业务方是谁？其他业务方是？
- 每个业务方的关注点是什么？难点是什么？
- 各个相关方的目标之间是否冲突，是什么冲突？
根据上述方法，可以得到对应的情境和冲突：
情境：目前有三种产品方案A/B/C，分别对应的价格为100元/1000元/10000元。通过上述思考和信息了解，会知道这个事情和谁有关，在这个事件中承担什么角色。
冲突：B的销量不佳，跟其他方案差异不明显，瞄准客群很有可能有重叠，未成交客户难转化，希望可以方案B进行调整。在用户层，可能其他方案中的功能能满足需求，不需要购买方案B；在公司层，整体收入结构可以更优化、健康；在业务层，系统和流程可能不太合理，有些可能需要重构。
1.3 问题拆解其实是建立一个假说/逻辑树的过程
我们可以将问题进行拆解，拆解应遵循MECE原则（相互独立且完全穷尽），这么做的好处是可以把问题进行逐层分解，逐级分析，最大可能保证需要考虑的因素全面不遗漏。
案例中的问题，可以从用户方面、竞品方面、成本/利润方面进行拆解，针对每一个层面的问题又可以进行拆分。
对问题进行细致拆分之后，针对每个问题有不同的解决方案，有一些问题可以用问卷来解决，有一些问题需要使用其他方式进行解答。
问卷并不能解答所有问题～～
问卷设计
2.1 问卷的用途：定量为主
一般通过问卷来进行大样本的数据收集，主要以用户的基础数据、行为数据和态度数据为主，既可以作为独立的调研项目，可以跟其他方式进行结合，比如说结合访谈、结合企业内部的数据，本文比较推荐的方式是多种方式结合进行交叉验证，提升调研结果的可靠性。
2.2 问卷设计的原则
基于第一部分的定义问题阶段，已经对问题进行了分析，在此基础之上，我们需要确定哪些问题可以由问卷进行解答，并明确问卷的研究目标与参与对象。特别地：利益相关方（项目组成员间）在项目前期应该达成统一，避免后续产生分歧，付出额外的沟通成本不说，还有可能相互甩锅。
2.3 问卷的基本结构
一份问卷的基本结构包含标题、招募语、甄别题、主问卷、用户基本特征、结束语。
2.4有逻辑的设计问题
一份有效的问卷需要从如何提问、如何措辞、如何设置答题逻辑、如何设置题目选项这些方面去考虑，设置有效的问题。以下是问卷设计中的一些基本原则：
2.5 提升回复率的tips
个性化：在说明信件/邮件或邮件开头注明回复者的名字、研究活动的目的、所需时间。向回复者强调他们反馈信息的重要性。需要注意的是，这里出现信息错误，会降低回复率。
控制篇幅：问卷完成时间不要超过10分钟，注意控制问题数量，避免出现需要大量思考、较难回复的题型。
用户激励：奖励参与者油卡/现金红包/优惠券等，昂贵的激励物没有特别显著提高回复率，所以小的激励就可以。
数据清洗与分析
3.1 数据清洗原则
剔除有效范围外的数据：排除异常作答时间值（比如作答时间为10秒），判断为作答不认真。可以根据题项来确定，一般10道题设置筛选出60秒之内的问卷。
剔除连续重复值：在时间范围内，再核查问卷是否出现连续重复值，出现的问卷予以删除。如果问卷数量较大，可以使用STATA软件编码或Excel条件函数判断进行处理。
剔除违背逻辑一致性的数据：在时间范围内，核查问卷是否存在前后逻辑不一致的题，比如总体满意度打分为非常满意，但后续题目都选择了非常不满意。
剔除有缺失值的数据：严格来说应该将有缺失值的用户予以删除，但有时候回收样本量没有那么大，则可保留。
3.2 数据分析方法
数据分析方法有非常多，要在众多的分析方法中选择一种也是比较难的事，无论选择什么样高大上的方法都是其次，最重要的是选择的分析方法能说明问题，能体现数据的价值。
比较分析是一个简单的、比较通用的、易于理解的数据分析方法，可以分成趋势分析、特征重要性、分组分析三种。
报告撰写
最后，条理清晰地展现数据信息，表达你的观点。报告写作的过程是一个相对费劲的过程，特别是数据量多的情况下，总是觉得还有一些数据价值没有被挖掘出来，但此时不要拘泥细节，细节可以回头再补，会大大提升效率。
4.1 问卷的报告框架
报告主要发现：将总结放在最前面，阅读者可以通过简短的总结大致了解报告观点，方便他们决定是否需要继续了解详细内容
目录和分目录：报告包含的内容组成部分，让阅读者对报告内容有初步概览
调研背景和目的：陈述整个报告的背景和目的，对调研的范围进行必要说明
单页-详细内容描述：有逻辑的描述项目的发现，总结数据表现，挖掘价值
单页-详细内容描述示例：
问卷调研不止是问卷本身，还包括前期项目组沟通、项目成员分工与配合、后续结果推广、结果推动落地等，前期做好项目组沟通、明确项目分工，建立一个清晰的运行机制，有利于项目组成员对结果的认同，后续也有清晰的路径去分工解决问题。所以，每一个环节都体现工作的价值，都同样重要。希望大家在关注研究方法提升的同时，也可以更多关注更多工作方法提升。
文章来源：站酷 作者：酷家乐UED
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
function _getValue(target, valuePath, defalutVal) {
let valueType = Object.prototype.toString.call(target)
console.log(valueType)
// if (valueType == "[object Array]") {
let paths = valuePath.replace(/\[(\d+)\]/, `.$1`).split('.')
let result = target
for(const path of paths){
result = Object(result)[path]
if(result == undefined){
return defalutVal
}
}
return result
}
测试:
let obj = {
a:{
b:[
{
c:2
}
]
}
}
console.log(_getValue(obj, 'a.b[0].c')) //2
function isEqual(res1, res2) {
let a = getTypeOf(res1)
let b = getTypeOf(res2)
if(a !== b){
return false
}else if(a === 'base'){
console.log('base',res1,res2)
return res1 === res2
} else if(a === 'array'){
if(res1.length !== res2.length){
console.log('array',res1,res2)
return false
}else{
//遍历数组的值比较
for(let i =0;i<res1.length;i++){
if(!isEqual(res1[i],res2[i])){
console.log('array',res1[i],res2[i])
return false
}
}
return true
}
return true
}else if(a === 'object'){
let ak = Object.keys(a)
let bk = Object.keys(b)
if(ak.length !== bk.length){
return false
}else{
for(let o in res1){
console.log(res1[o])
if(!isEqual(res1[o],res2[o])){
console.log('object',res1[o],res2[o])
return false
}
}
return true
}
}else if(a === 'null' || a === 'undefined'){
console.log('null')
return true
}else if(a === 'function'){
console.log('function')
return a === b
}
}
function getTypeOf(res) {
let type = Object.prototype.toString.call(res)
switch (type) {
case "[object Array]":
return 'array'
case "[object Object]":
return 'object'
case "[object Null]":
return 'null'
case "[object Undefined]":
return 'undefined'
case "[object Number]"||"[object String]"||"[object Boolean]":
return 'base'
case "[object Function]":
return 'function'
default:
return 'typeError'
}
}
测试:
let a = {
a:20,
b:{
c:30,
d:[1,2,3]
}
}
let b = {
a:20,
b:{
c:30,
d:[1,2,3]
}
}
console.log(isEqual(a,b)) //true
function _flat(arr){
let result = []
for(let i = 0;i<arr.length;i++){
if(Array.isArray(arr[i])){
result = result.concat(_flat(arr[i]))
}else{
result.push(arr[i])
}
}
return result;
}
let arr = [1,2,[3,4,[5,6]]]
_flat(arr) //[1,2,3,4,5,6]
//es6
function _flat2(arr){
while(arr.some(item=>Array.isArray(item))){
arr = [].concat(...arr)
}
return arr
}
let arr = [1,2,[3,4,[5,6]]]
_flat2(arr) //[1,2,3,4,5,6]
简单深克隆，不考虑内置对象和函数
function deepClone(obj){
if(typeof obj !== 'object') return
let newObj = obj instanceof Array?[]:{}
for(let key in obj){
if(obj.hasOwnProperty(key)){
newObj[key] = typeof obj[key] === 'object'?deepClone(obj[key]):obj[key]
}
}
return newObj
}
复杂版深度克隆 考虑内置对象 比如date regexp 函数 以及对象的循环引用的问题
const isObject = (target) => typeof target === "object"&& target !== null;
function deepClone2(target, map = new WeakMap()) {
console.log(target)
if (map.get(target)) {
return target;
}
// 获取当前值的构造函数：获取它的类型
let constructor = target.constructor;
// 检测当前对象target是否与正则、日期格式对象匹配
if (/^(RegExp|Date)$/i.test(constructor.name)) {
// 创建一个新的特殊对象(正则类/日期类)的实例
return new constructor(target);
}
if (isObject(target)) {
map.set(target, true); // 为循环引用的对象做标记
const cloneTarget = Array.isArray(target) ? [] : {};
for (let prop in target) {
if (target.hasOwnProperty(prop)) {
cloneTarget[prop] = deepClone(target[prop], map);
}
}
return cloneTarget;
} else {
return target;
}
}
filter去重
function _unique(arr){
return arr.filter((item,index,array)=>{
return array.indexOf(item) === index
})
}
es6 Set
function _unique2(arr){
return [...new Set(arr)]
}
includes
function _unique3(arr){
let newArr = []
arr.forEach(item => {
if(!newArr.includes(item)){
newArr.push(item)
}
});
return newArr
}
双层for循环
function _unique4(arr){
for(let i =0;i<arr.length;i++){
for(let j =i+1;j<arr.length;j++){
if(arr[i] === arr[j]){
arr.splice(j,1)
j--
}
}
}
return arr
}
indexof
function _unique5(arr){
let newArr = []
for(let i = 0;i<arr.length;i++){
if(newArr.indexOf(arr[i] === -1){
newArr.push(arr[i])
})
}
return newArr
}
function _typeOf(obj){
let res = Object.prototype.toString.call(obj).split(' ')[1]
let mold = res.substring(0,res.length-1).toLowerCase()
return mold
}
_typeOf（5） //number
_typeOf（'5'） //string
function getParamsObj(params){
let paramsStr = params.replace(/^.+\?(.+)/,"$1")
let paramsArr = paramsStr.split('&')
let paramsObj = {}
for(let [key,value] of paramsArr.entries()){
if(/=/.test(value)){
let valArr = value.split('=')
val = decodeURIComponent(valArr[1]) //解码
val = /^\d+$/.test(val)?parseFloat(val):val //判断是不是数字
if(paramsObj.hasOwnProperty(valArr[0])){
paramsObj[valArr[0]] = [].concat(paramsObj[valArr[0]],val)
}else{
paramsObj[valArr[0]] = val
}
}
}
return paramsObj
}
//从一次传入多个参数 编程多次调用每次传入一个参数
function add(a, b, c, d, e) {
return a + b + c + d + e
}
function curry(fn) {
let dFn = (...args)=>{
if(args.length == fn.length) return fn(...args)
return (...arg)=>{
return dFn(...args,...arg)
}
}
return dFn
}
let addCurry = curry(add)
addCurry(1,2,3)(2)(3)
//添加了两个功能
// 图片加载完成后 移除事件监听
// 加载完的图片从imgList中移除
let imgList = [...document.querySelectorAll('img')]
let length = imgList.length
const imgLazyLoad = function () {
let count = 0
let deleteIndexList = []
imgList.forEach((img, index) => {
let rect = img.getBoundingClientRect()
//获取元素到视图的距离 top元素上边到视图上边的距离 left元素左边到视图左边的距离 right... bottom...
if (rect.top < window.innerHeight) {
// img.src = img.dataset.src
img.src = img.getAttribute('data-src')
deleteIndexList.push(index)
count++
if (count === length) {
document.removeEventListener('scroll', imgLazyLoad)
}
}
})
imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
}
imgLazyLoad()
document.addEventListener('scroll', imgLazyLoad)
图片懒加载:https://juejin.cn/post/6844903856489365518#heading-19
函数防抖 触发高频事件 事件在n后执行，如果n秒钟重复执行了 则时间重置
//简易版
function debounce(func,wait){
let timer;
return function(){
let context = this;
let args = arguments;
console.log(timer)
clearTimeout(timer)
timer = setTimeout(function(){
func.apply(context,args)
},wait)
}
}
let btn = document.querySelector('button');
function aa(){
console.log(111)
}
btn.onclick = debounce(aa,2000)
// 复杂版
// 1.取消防抖
// 2.立即执行功能（点击之后立即执行函数 但是 wait时间之后在点击才能在立即执行）
// 3.函数可能有返回值
function debounce(func,wait,immediate){
let timer,result;
const debounce = function () {
const context = this
const args = arguments
if(timer) clearTimeout(timer)
if(immediate){
console.log(timer)
var callNow = !timer
timer = setTimeout(function () {
timer =null
},wait)
if(callNow) result = func.apply(context,args)
}else{
timer = setTimeout(function (params) {
result = func.apply(context,args)
},wait)
}
return result
}
debounce.cance = function () {
clearTimeout(timer)
timer=null
}
return debounce
}
let btn = document.querySelector('button');
function aa(){
console.log(111)
}
btn.onclick = debounce(aa,2000,true)```
函数节流 触发高频事件 且n秒只执行一次
//使用时间戳
function throttle(func,wait) {
var context,args;
var previous = 0
return function () {
context = this;
args = arguments;
let nowDate = +new Date()
if(nowDate-previous>wait){
func.apply(context,arguments)
previous = nowDate
}
}
}
//定时器
function throttle(func,wait) {
var context,args;
var timer;
return function(){
context = this;
args = arguments;
if(!timer){
timer = setTimeout(function () {
timer = null;
func.apply(context,args)
},wait)
}
}
}
//组合版 options.leading 为true 立即执行一次 options.trailing为true 结束之后执行一次 默认为true function throttle(func, wait ,options = {}) { var context, args, timer,result; var previous = 0; var later = function () { previous = options.leading === false ? 0 : new Date().getTime(); timer = null; func.apply(context, args) if (!timer) context = args = null; } var throttle = function () { var now = new Date().getTime() if (!previous && options.leading === false) previous = now; context = this; args = arguments; //下次触发 func 剩余的时间 var remaining = wait - (now - previous); if (remaining <= 0 || remaining > wait) { // if (timer) { // clearTimeout(timer); // timer = null; // } previous = now; func.apply(context, args); if (!timer) context = args = null; } else if (!timer&& options.trailing !== false) { timer = setTimeout(later, remaining); } } throttled.cancel = function() { clearTimeout(timer); previous = 0; timer = null; } return throttle } function aa(e) { console.log(111) console.log(e) } let btn = document.querySelector('button'); btn.onclick = throttle(aa, 2000,{ leading:false, trailing:true
})
转自：csdn论坛 作者：Selfimpr欧
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
icon的设计会贯穿全套设计稿，所以在设计的环节中必不可少，优质的icon设计会帮助品牌和企业更好的树立形象，形成自己的设计语言。
接下来为大家分享一些经典案例：
--手机appUI设计--
--icon图标赏析--
更多精彩文章：
据中国天气网微博预报，大风和沙尘已经到达北京西北部边界，即将开始影响北京。
此前报道：
大风携裹沙尘已到河北张家口，傍晚前抵京
北京市气象台刚刚预报，目前，大风携裹着沙尘，已经影响到河北西北部张家口地区，未来继续向东南推进，下午自北向南影响本市，预计傍晚前影响北京大部。
根据预报，今天下午至前半夜本市有沙尘天气，最低能见度6公里左右。随着中午前南风增大，下班前转北风，沙尘下午就影响北京了。明天接着还有大风天气，但沙尘影响不会持续。
气象部门表示，由于上游土壤湿度较3月份增加，加之降水的抑制作用，此次沙尘强度明显弱于3月15日和28日的沙尘暴过程。
根据北京市生态环境监测中心的实况，目前全市空气质量已经达到轻度污染水平。
针对此次天气过程，北京市气象台已于14日10时30分发布大风黄色预警信号、16时30分发布沙尘蓝色预警信号。市森防办与市气象台已联合发布森林火险橙色预警。（来源：北京日报客户端记者 骆倩雯）
注意！沙尘已到内蒙古中部 可能影响北京晚高峰
今天（4月15日）上午9点半左右，今年第三次蒙古气旋东移带来的沙尘天气已经抵达内蒙古中部，并正在向东南移动。今天傍晚前后可能影响到京津冀一带，或对北京晚高峰造成影响。
据气象北京微博消息，今天上午9点30分前后，沙尘天气已经抵达内蒙古中部，并正在逐渐向东南方向移动，内蒙古、甘肃、宁夏等地风沙渐起。
↑内蒙古鄂尔多斯市今天上午已经出现明显沙尘天气。（摄/赵建军）
据中国天气网首席分析师胡啸介绍，预计今天下午，这股沙尘将会逐渐自西向东影响京津冀一带，北京平原地区午后也会逐渐加大，风力普遍可达4~5级，阵风8~9级，伴有扬沙天气，晚高峰可能是核心影响时段，公众出行需关注临近预报，做好防风防沙准备。
此外，据北京日报客户端消息，北京市教委已建议停止全市大中小学校、幼儿园、中等职业学校及校外教育机构停止体育课、升旗、早操、课间操、运动会、体育考试、外出社会实践等室外活动。提醒学生注意安全，减少不必要的外出活动。各单位要加强巡视巡查力度，及时消除各类安全隐患。（来源：中国天气网）
今天还是一篇非常干货的原创文章。
内容分为两点：
图标的基础特征
动手设计之前，咱们先对完整的图标集进行分析。
弄明白在画整体的系统图标集合时，各个图标得具备哪些特征，有哪些切入点，可以作为我们在实际绘制时候的依据。
先来看几组 iconfont 的案例，看不太清的同学可以戳图片放大。
围绕上面这些案例，咱们可以归纳出图标的几点设计原则。比如：
1. 设计图标需要考虑延续性，图标之间互相牵连影响
图标几乎不会以单个的形式出现，大多数都是以组归类。符号整体性与统一性，都是依靠单个 icon 的共性特征建立起来的。
比如 iconfont 中的这组icon，图标圆形的外轮廓，就保持了一致。其次用户头像的代表符号，也很好保持了延续性。
正是这种小特征，共同组成了图标库的整体特征。
2. 设计手法趋同、图形内容差异
第二点好理解，设计风格、手法要素需要统一，但是内容传达的差异必须要拉开，避免图形趋同导致功能混淆。
比如下面两个案例，由于过于相近，导致用户很难理解图标含义，是天气，还是设置按钮，这种情况我们在设计时需要极力避免。
总结来说，就是图标的共性往往体现在设计手法上，比如颜色、形状粗细、细节的一致性，这些都是设计风格的统一。
而图标的特性，往往体现在形状内容差异，形状会决定图标的信息传递含义。所以共性要趋同，特性要拉开，这个是设计图标集的基本原则。
3. 功能大于形式，图形能理解的情况下样式越简洁越好
不知道大家是否关注，曾经在设计圈风靡一时的MEB图标风格，产品圈却非常冷门，几乎没有产品在继续用这种风格作为功能性质图标。
△ 该作品来自于网络图片，仅作交流使用
因为虽然图标增加了小装饰后，显得有趣精致，但其实也增加了图标的识别难度以及识别效率，反而背离了图标的设计初衷。
所以对于系统功能图标而言，必要的简洁性，高效的识别率，才是关键。
图标的设计约束性
聊完了设计主张及基本的特征。接下来咱们开始剖析图标的设计细节，包括分析制定图标的系统设计规范，应该从哪些方面入手。
规范的第一点，就是图标的基础形状比例。这个比例，主要是约束长与宽，共包含了四个关系，分别为「正方形 : 横矩形 ：竖矩形 ：圆形」
这四个关系的约束，会让图标集里的所有图标大小，看起来是一致的、统一的。横矩形、竖矩形这两个比例，会决定整套图标的饱满程度，横竖比例越一致，图标整体越饱满。
这点大家可以自己斟酌，如果是泛娱乐型的产品，icon可以更饱满一些。如果是偏工具化产品，那么还是可以优先保障图标的识别度，饱满程度倒是其次。
圆润饱满型：
刚正工具型：
定了比例后，接下里就是对图标的细节刻画。对于线性图标而言，最重要的细节就是线条粗细；对于面性图标而言，最重要的就是正负形之间的间距。
所以这些核心元素，在图标的核心线条、核心区域部分，间距样式都应当保持统一。
通常在移动端@2x内，主流icon的粗细为3px，而4px大多数都是为功能性导航icon，细一点的图标通常看起来会更精致一些。
当然也有部分产品使用的是2px，比如新版的YouTube，其次还有些较为复杂的icon，单根粗细的线段不一定能满足其需求，所以还需要制定一条副线的粗细。
细节可以根据产品的调性来定，统一即可。
大比例跟基本元素确定后，也可以制定一些图标的个性化元素规范，比如图标的圆角大小、角度位置，等一些特殊的样式。
像这些个性化的规范，颗粒度可以Case By Case来定义，圆润还是方正，可以根据产品的视觉风格来定义就好。
这些规范样式定好，就可以充分的让图标集内的图标，从设计上是保持一致的，且具有特色感。
上面讲了关于图标的分析及规范。为了方便大家掌握，接下来咱们就来讲讲，具体动手做，流程是什么样的。这里我给个我的步骤作为参考：
第一步：绘制好图标基本网格
第一步，当然是确定好图标icon的大小，以及上面我提到的基本尺寸比例，四个关系「正方形 : 横矩形 ：竖矩形 ：圆形」的约束，构建好基本骨骼。
我这里以图标容器大小为 56×56，预留8px安全间距，图标最大大小为 48×48。
由于视差关系，圆形在图标里面的尺寸是最大的，所以圆形的大小为48×48。因为我想图标饱满一些，所以正方形的大小我两边各减去2，为42×42。
然后再绘制出横矩形（48×36）与竖矩形（36×48），各线段之间的间距保持一致。
然后各个形状居中对齐，这样四个关系「正方形 : 横矩形 ：竖矩形 ：圆形」定好后，基本的容器就制定好啦。
第二步：设定图标基本规范
接着制定好图标的基本规范，为了方便大家看得清，我这里设定图标的线条粗细为3px，圆角为6px，干净简洁一些，让它看起来更饱满。
角度、断点啥的，我这里就不定义了，因为只是示例给大家看，讲一下流程，所以尽可能简单一些。大家在做练习的时候，也可以尝试自己去定义一下。
第三步：绘制图标
好了后就可以开始绘制图标啦。我这里分别绘制十五个，作为示例
然后就是使用路径工具，根据创意去绘制完善图标了。绘制的过程中，也可以不断调整，让图标看起来更协调，更饱满，更容易识别。
花了十五分钟左右，简单的十五个图标草稿就画好了，接下来咱们开始调整细节。
第四步：整体性调整
所有的图标绘制好了后，咱们就可以整体性的开始打磨细节，把图标形状的一些折角处、大小样式调整一致，让图标的节奏更清晰，整体样式更统一。
这样一组精致的系统icon就绘制好啦。
接着咱们也可以加点特色风格进行尝试，比如填充一个颜色。
当然细看的话，图标部分细节还是有点糙，其实还可以再调调，但这个主要做示例用，大家自己在做练习的时候，可别像我一样偷懒嗷
上面讲了很多方法经验，文末给大家来点实际的。
我珍藏了很多较为不错的大厂图标集合库，日常在画图标没灵感的时候，就会打开看看这些，参考一下。
文件都是矢量格式的，编辑方便，还很全面。今天拿出来送大家白嫖了
文章来源：优设网 作者：UX小学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“色彩是我们感知世界的重要媒介，对于信息传达有着重要的作用，能使人们能够更有效的感知设计的意图和内涵，使传达更高效。且人对色彩的视觉感知与想象能力，能够指导人做出预测、理解和决策。”
— lyft kevyn arnott
随着世界的数字化转型进程大爆发，科技把每一张有形的办公桌移到了云端，用户沉浸在数字构建的世界中。腾讯文档作为先进的生产力工具，产品生态越来越多元丰富，多品类多终端的复杂环境展现在我们面前，开始真正的朝复杂庞大的大规模设计迈进。我们希望能以更加专业、高效的设计姿态迎接腾讯文档的未来挑战。
色彩是体现品牌与基因的关键因素，构建科学高效的色彩系统，建立产品的品牌形象，对产品设计极具指导意义。
腾讯文档在色彩上也进行了一些深入的挖掘和沉淀，一方面希望带给用户全新的品牌印象和认知，另一方面构建科学有效的色彩系统，为产品的发展提供优质高效的设计系统基础。本文将聚焦于色彩系统的构建。
腾讯文档代表着效率协作的先进生产力，从云端创作到云端协作，打破了办公空间的实体界限。我们希望，新的品牌色，能够为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和认知。
我们将标准色由平静的天蓝色，升级为更加生动、进取、科技、可靠的明亮清澈的钴蓝色。这种蓝色具有更多的电子意味，蕴含了更多的活力和想象力，承载了腾讯文档对未来数字世界新挑战的态度和形象的进化。
同时我们认为灰色在腾讯文档的色彩系统中起着至关重要的作用，为产品界面创造结构、表达边界、建立信息层次。我们将灰色赋予了统一的品牌认知感受，将蓝色加入到中性灰色里，生成了腾讯文档特有的蓝灰色。
至此，腾讯文档标准色进化升级，它体现了腾讯文档对可靠稳定的技术、产品体验的追求，以及对未来智能的数字世界的不断创新和进取，蕴藏着无限的可能性。
在一个科学有效的色彩系统里，往往包含至少两种色彩：主色+辅助色，两者互相搭配组合成产品体系的整体色彩感受，减少用户在产品体验中对反复出现的主色的视觉疲劳。
腾讯文档的产品生态愈来愈丰富多元。我们拥有多品类的产品，为用户提供了丰富的产品功能，其中云端协作、文档资产的沉淀管理是腾讯文档的非常重要的能力，在线文档、在线表格、在线幻灯片、在线收集表、在线思维导图、在线流程图以及文件夹等的品类图标，又是用户在对文档进行协作分享及沉淀时，识别不同类型文件的关键因素。基于此，腾讯文档相较于其他产品需要更多的辅助色。
于是，如何有效的选择既符合品牌调性又有区别度的辅助色是构建腾讯文档色彩系统的关键。在辅助色选择上，我们以邻近色、互补色、对比色为主要方法构建了辅助色彩体系。
1. 创建色相色板，保持相同明度、相同饱和度
我们以腾讯文档标准色#1E6FFF（H 218 S 88 B 100) 为起始点，S（饱和度）、B（明度）保持不变，H（色相）以 218°为起点，以 15°为增量或减量标准，生成 24 色色板。这个色板是我们选取辅助色的重要依据。
2. 以邻近色、互补色、对比色为原则选择丰富的辅助色彩
为了保持腾讯文档的基础品牌调性，并保证其具有极清晰的识别度，我们以品牌蓝色为起点，选择了相对较多的邻近色，以保证在色温上保持腾讯文档整体色调的清爽感。并利用对比色及互补色，选择更加丰富多元的色相，以保证能够满足各种使用场景下对色彩的需求。
总的原则是利用邻近色构建有质感、品牌感的色彩家族，利用对比色及互补色扩展色相，以制造更强烈的色彩对比，满足一些冲突性场景。
3. 校正辅助色
虽然我们保持相同的饱和度和明度，使用科学的方法得到了较为合适的色相，但由于色彩本身自带感官明度属性，导致在视觉感受上的感官体验并不同频。
黄色、绿色的明度即发光度较高，蓝色就稍微偏暗一些，导致色板看起来不一致。为了让不同色相看起来更加协调，需要调整色板的明度和饱和度，以保证视觉感官体验同频且更加和谐舒适。
校正原则：
校正后我们得到了清澈明亮、清晰易分辨的腾讯文档的主色+辅助色。并且针对视障群体进行了色彩测试。
灰色是产品体验设计中至关重要的一节，工具型产品大部分是由各种各样的容器、面板、列表组成。灰色为产品界面创造结构、表达边界、建立信息层次，保持舒适的对比度是提高可读性和吸引用户注意力的关键。
前面我们已经定义了腾讯文档的蓝灰色，在界面的设计中，我们将其与中性的灰色结合，共同构建灰色的色彩体系 。
腾讯文档蓝灰色相扩展：
中性灰色色相扩展：
为构建一个高效易用的灰色调色板，我们将蓝灰色彩作为 Y 轴，有透明度的中性灰色作为 X 轴，两者透明度保持一致，建立起腾讯文档有梯度的、丰富的灰色调色板。
对比度是否合理是阅读体验是否舒适的重要评价维度，过高或者过低的对比度都会影响阅读体验及识别度。下图是对比度的钟型曲线图，随着对比度的增加，舒适度和识别度都在上升，但一旦超过一个界点，对比度越增加，识别度和友好度亦会逐步下降。
为保证视障用户的使用，保证足够的对比度，遵守 WCAG 2.0 的标准，我们对调色板灰色的对比度进行了可用性测试，以指导腾讯文档体验设计中灰色调色板的使用。
是：对比度在 AA 标准以上，符合 W3C 标准，可以使用。
中：仅可用于 disable 状态。
否：对比度在 AA 标准以下，不符合 W3C 标准，不可使用。
定义好文档的主色、辅助色以及中性色后，我们需建立完整的调色板来满足不同场景下颜色的使用。以传达品牌精神，建立色彩层级，或传达信息，或强化界面层级。
在色彩系统中，很多产品使用 Tints and shades 系统，通过在颜色上面增加白色，或者增加黑色，来改变它的明度和饱和度，形成同色系的调色板。但这种方法得到的调色板往往比较刻板僵硬，故腾讯文档采用了另一种方式，将已生成的灰色色板与色相叠加，在符合无障标准的区域，选择不同明度饱和度的色彩，形成有梯度、有层级的彩色调色板。
Tencentdocs_blue：
生成主色-蓝色色阶：
用同样的方法将辅助色生成色阶：
现在，我们有一个梯度丰富，能够支持腾讯文档设计系统的调色板了～
实际案例
实践才是硬道理，我们尝试以这个调色板为指导来调整优化腾讯文档链接色的优化调整。
为保证用户阅读体验的舒适度，链接之类的彩色文本，要求颜色在背景下可以达到 4.5:1 对比度以上，以使它能够清晰的从灰色文本、背景中脱颖而出。于是，我们放弃了品牌蓝_1E6FFF，选择了品牌蓝 70_175CEB 作为链接色。
以后，选择颜色，so easy～
这个长长的制作调色板的故事就要结束了，我在这项工作中，重新审视过去设计中的设计决策方法，在其中学到了很多东西，希望本文对您也有所帮助。
我们经常快速的动手，依靠主观情感去选择颜色，在刚开始可能没遇到什么特别的问题，但随着产品的壮大和发展，往往会越来越凌乱。抽丝剥茧的搭建色彩系统，真正让色彩为设计服务，简化团队的工作，相信您会有更愉快的工作体验～
文章来源：优设 作者：腾讯ISUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“搜索”是产品中一个非常必要的功能模块，搜索就像为用户提供了一条便捷的绿色通道，方便用户快速检索内容。
搜索动作在 App 中依靠搜索框来完成，好用的搜索框很大程度上决定了产品的搜索体验如何。大多数搜索框存在相似性，但真正好的搜索框会在细节上为用户带来差异化的反馈，带来很暖很贴心的感觉。
从体验层面上看，一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为：
其中使用中会涉及到跳转和输入两种不同的状态，在下面的文章里我会展开来分析。
回想常用 App 的搜索框，好像它们的样式看起来差别并不是很大，但其实每个搜索框的细节都是经过精心设计的，下面总结了几种常见的搜索框类型。
1. 搜索图标
页面上只提供一个放大镜图标，通常需要用户点击图标后才能跳转到搜索页面，例如小红书就将搜索图标放置在页面右上角。
2. 基本搜索框
基本的搜索框组成包括放大镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式，文字提示为搜索，简洁清晰。
3. 文字提示类搜索框
和基本搜索框的唯一不同的地方在于，这类搜索框中的文字提示部分不再是搜索两个字，而是根据产品需求支持预置多组文字提示并在搜索框内循环展示。
△ 在大众点评的顶部搜索框中，文字提示部分循环展示了三组不同的内容，引导用户快速检索到好吃的和好玩的。
4. 功能类搜索框
之所以叫做功能类搜索框，是在文字提示类搜索框的基础上根据产品功能的需要额外添加了常用的功能性图标，如扫码图标、拍照图标、语音图标等，赋予搜索框更多的功能属性。
△ 经常使用豆瓣看书评的同学可能会注意到豆瓣主页的搜索框中有一个扫码图标，点击之后可以快速扫描图书条码或二维码，快速识别书的内容，省去检索的麻烦。
△ 淘宝搜索框的组成更复杂，除了支持扫码外还有相机图标，方便用户拍照识别商品。
使用搜索框搜索的过程总体可以分为四部分：搜索前、点击搜索框、输入中、搜索后。设计分析过程中我们要先理清整体的搜索流程，再考虑每个状态对应的交互细节及反馈，这样才能保持逻辑清晰。
位置
大多数搜索框出现在页面顶部，作为一个大的触摸目标更符合用户的认知习惯，更容易被用户发现和使用。
△ 在苹果自带的地图应用中，搜索框放在页面中部偏下的位置，相比于顶部搜索框，这样的位置分布更方便用户单手操作。
样式
搜索前的状态除了前面讲的几种常见的搜索框样式外，有些产品会直接在搜索框增加“搜索”按钮。
△ 阿里系产品包括淘宝、支付宝、闲鱼等主页搜索框都额外添加了“搜索”按钮，相比于点击搜索框再点击键盘搜索内容推荐，直接点击按钮简化了搜索流程。
搜索框
点击搜索框后，框内的放大镜图标会消失，出现闪烁的光标引导用户输入，搜索框右侧会出现“取消”按钮。
△ 点击大众点评的搜索框后，搜索页会出现三个选项，点击每一个选项，搜索框内的文字提示都会改变，有效帮助用户提升搜索准确度，虽然是很小的点但做的很用心。
键盘
点击搜索框后会弹起键盘，在不输入内容的情况下，点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。
搜索页
搜索页的内容通常包括历史搜索、搜索发现、热门推荐等版块，记录用户的搜索行为，推荐目标商品或服务，提高转化率。
△ 豆瓣将最热门的内容都展现在搜索页中，包括实时更新的热门书影音榜单、热门小组、热门话题等，为用户提供有效的引导。
关于历史搜索我们还可以继续深入分析，思考这些记录怎么排序、最多显示几条记录……
△ 网易云音乐的历史搜索最多可以保留10条，采用横向滑动的手势交互可以节省屏幕空间。根据内容长短一屏一次可以显示2-3条记录，这会导致排在后面的历史记录不容易被用户快速发现。
△ 淘宝的历史搜索可以容纳更多的数量，当搜索记录超过两行时会有一个小的展开按钮，点击按钮可以查看早期的记录，这样既能节省屏幕空间也能最大化容纳历史记录。
删除/取消
当开始输入内容时，在搜索框的右侧会出现删除图标，方便用户一键删除输入的内容，这里要注意区分删除和取消的区别。
△ 在淘宝中点击“删除”图标，页面会返回到上一级也就是搜索页；
△ 点击“取消”按钮，页面会直接返回到主页也就是搜索前的状态。
搜索提示
在用户输入内容时，产品会根据用户输入的内容提供相对应的搜索推荐，这是搜索框的必备的交互反馈。
通过合理的词条推荐能极大降低用户的思考时间，提高搜索效率，同时省去再次点击搜索按钮的流程，降低用户的操作步骤。
字数限制
目前我所知道的大多数 App 在搜索时都没有字数限制问题。
回顾一下搜索使用场景会发现用户在搜索框内输入任何内容都是有可能的，尽量不要约束用户的输入内容。无论用户输入多少内容，点击都可以完成基本的搜索操作，这样整个流程才完整。
△ 在百度中输入过多字符时，会提示查询限制在38个汉字以内，多的字符会被忽略，虽然给出了提示但并未打断用户的操作流程，可以让用户继续完成搜索。
符合预期
搜索的理想状态是搜索到的结果符合用户的预期，满足用户的搜索需求，并把最吻合的搜索结果排在前面，为用户带来清晰的结果展示。
智能提示
智能提示是对用户输入内容上的一种提示或纠正，如果用户输入的内容有问题或不够标准，在搜索结果中会能给最贴切的搜索结果。
△ 在淘宝中输入“shouji”或“souji”，淘宝会根据拼音给出“手机”的搜索结果，但仍保留原标签，方便用户再次点击搜索；输入“手ji”时，会直接给出“手机”标签，这种差异化的反馈能更好的为用户服务。
无结果提示
△ 相比于直接显示搜索无结果的状态，拼多多的搜索结果首先会标明相关商品较少，然后将搜索内容拆分成不同的标签进一步引导用户来发现内容。
这里介绍了关于搜索框设计的一些基本体验，学会从整体到局部再到具体细节一步步分析，大家会挖掘到更多更细的设计要点。
文章来源：优设 作者：Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当公司的发展规模到一定程度时，考虑到信息安全、持续采购成本与相关风险，企业会采取自研的方式来实现部分协同工作软件的自产与自用，本文将以内部目标管理系统为例，阐述我们是如何系统化的做企业系统设计改版？
什么是OKR？
OKR，是Objectives 和Key Results 的缩写,即目标和关键结果，它是企业进行目标制定和过程管理的重要手段。酷家乐同样采取OKR的管理方法，将公司目标层层分解到团队，部门再到个人，在各个层面贯穿和统一起来，以帮助实现目标达成。
理清业务目标，制定设计策略，是系统性改版产品的前提，在实际工作中设计师很容易被产品的原型、对产品的描述蒙蔽，只有非常清楚的理清业务的目标，才能制定系统性、合理的设计策略来支撑业务，通过专业的设计方法来助力业务结果的达成，在这个项目中我们是如何做的呢？
OKR系统的改版项目最开始是高层的诉求，提的业务要求很简单“ 让大家用起来，目标管理起来”，那么如何让大家用起来、利用系统将目标管理起来是当前需要解决的的问题。
以一个普通员工【小何】为例，在OKR系统中进行OKR制定时，通常需要与多个角色产生关联：
③结束回顾，包含查看、追溯、复盘
（1） 清晰的页面结构：
让用户能明确的感知到系统的整体结构是有规律的，可以简单被理解的，即左边全局控制，右边内容展示
我们把消息类型通过两个维度定义消息的优先级：“重要性”和“紧急度”，通过四象限法则，我们拆出来了：
通过此模型和产品确定了每一个消息类型的所在位置，且清晰表达的了每个消息应当的位置
在设计的过程中，为了进一步的验证设计合理性和易用性，针对角色代表进行了8组可用性测试，最终普遍反馈新版的操作体验更好。
蓝蓝设计的小编 http://www.lanlanwork.com