1.竞品分析的定义


从专业的角度来讲，竞品分析是通过系统的分析方法去全面了解市场上位于前列的竞争对手的产品，能够让设计师快速了解自家产品所处的位置，从而来针对性的改进自身产品的一个方法。简而言之，就是要站在巨人的肩膀上去思考，以竞品分析的形式去学习其他优秀的产品，从而解决自身产品所存在的问题。




2.为什么要去做竞品分析


做一件事情之前一定要思考做这件事的价值和意义，只有你明白其重要和必要性，你才会知道该怎样去做这件事情，而不是一提起竞品分析就找一大堆专业框架和术语然后去填内容，这样虽然产出了很 ..

创意动画

1. 品牌加载
公众喜欢有趣，可塑的动画。Airbnb 和 Netfilx 将品牌 logo 动画应用到了启动页和加载页面。结合品牌特点、风格和符号，融合到产品设计中，从而提升视觉的一致性，创造富有特有性格的产品界面。

△ Netflix & Airbnb
2. 图标动画
微交互是建立在移动端上微妙视觉效果的小动画，而图标动画是微交互其中的一种。它的目的是吸引用户，让用户感觉顺畅、愉悦。
最近，让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面，这些由产品所包含的一个个小细节，创造出了新颖而有趣的设计。

△ Facebook Website

..

减少页面加载时间的方法：
1.压缩html css js等文件
2.减少DNS解析
3.减少DOM元素，对于相关操作可以缓存节点
4.改变页面元素样式时尽量操作className，而不是频繁使用xxx.style.（其实还有很多这种DOM修改操作的细节比如opacity替代visibility ，多个DOM统一操作（虽然V8会有缓存优化） ，先将DOM离线，即display：none；修改后显示 ，不要把DOM放在已给循环中作为循环变量 ，不要使用table ）
5.避免不必要的重定向
6.合并js css及图片，减少请求数量
7.使用CDN
8.合理利用缓存
9…

关于CDN？
https://zhuanlan.zhihu.com/p/39028766

..

拿到PRD的瞬间，你在想什么？
设计一个产品的前提是要先了解这个产品想要解决的是用户什么痛点，核心功能是什么，价值点在哪里等等。






整体需求概览，产品画布



先整体浏览下需求，对需求有个整体的认知，知道大概的框架，功能点是什么












思维导图，梳理需求





用白纸或XMIND将功能点梳理出来，最好是按照用一级菜单/二级菜单/三级菜单的模式，把整体的流程，页面的逻辑都整理出来


这是一个消化过程，从PRD一堆文字，消化成，自己可以理解图画


这一步当中，要把逻辑理顺，不懂的就问，千万不要用猜的，猜一猜，无 ..

1 状态共享
随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Observable API ，通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。


如下这个例子，我们将在组件外创建一个store，然后在App.vue组件里面使用store.js提供的store和mutation方法，同理其它组件也可以这样使用，从而实现多个组件共享数据状态。


首先创建一个store.js，包含一个store和一个mutations，分别 ..

嗨，本周Nathan 与大家分享下一些在UX 工作中，常会听到的一些衡量指标专有名词，有些或许是你常常听到但不太确定的，有些则可能是你所在的领域或项目比较少讨论的。
虽然在大多数的公司中，与中小型的设计团队，采用快速定性的研究，可能是比较符合CP 值的方式。但当产品、用户甚至团队具有一定规模时，关于量化指标的重要性，在2019 年的今天想必已经不需要再重复叙述。
不太一样或是常被误会的是，对于设计师来说，多数在工作中使用的量化衡量指标，其实大多是围绕设计工作的显性部分，也就是可用性(Usability) 上，而可用性工作其实只 ..

一、文字样式中阶

字体样式
代码格式：
font： 文字粗细 大小/行高 字体名称；
例子：font: bold 200px/400px "微软雅黑";
2.字体阴影
代码格式：
text-shadow：x y r color；
注：x是为负数则阴影向左，整数向右，同理y正数向上，负数向下，r代表阴影模糊程度，数值月大则越模糊，其单位都是px，color为文字颜色。
例子：text-shadow: 10px 10px 0px red;
提示：允许一段文字有多层阴影，多层之间用逗号隔开，每一层内，不同参数用空格隔开。

凹凸字体 阴影巧用
原理：通过背景颜色以及不同于背景颜色的阴影打造凹凸字体效果 ..

实现思路有两个：



1、用6个input，输入一个数字后将focus给下一个输入框。

2、用一个input和6个span，input隐藏，用span显示。



现在大部分都是使用的第二种方法。（当然，如果你能说服产品也可以只用一个普通的input输入框，就什么都不用考虑了）



两种方案遇到的坑，以及优缺点，如下：



方案一：6个input。



主要就是用js切换focus，在安卓是相当流畅的，但是在ios会严重卡顿，简直逼死强迫症。



HTML：

<div class="divYZM">
<!-- onpropertychange是为了避免在ios中oninput方法不被触发 -- ..

for(var i = 0; i < 5; i++) {
console.log(i)
}

这样for循环可打印出 0 - 4的结果

for(var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i)
}, i * 1000)
}

但这样只能间隔一秒打印出5个5

原因在于 setTimeout是异步，等for循环全部完成 i 后才会执行

解决方法可以将 for循环中的var 变成 let

let只作用于for循环内，这样每次付给setTimeout的值都是当前值

或者在setTimeout外再包一层function

for(var i = 0; i < 5; i++) {
(function(i) {setTimeout(function() {
console.log(i)
}, i * 1000)})(i ..

按钮，无论是在 Web 还是 App 上都被广泛地使用，而很少有设计师会注意到按钮当中的细节，导致在设计过程中出现一些低级的错误，使得用户在完成任务的过程中产生阻碍，无法顺利达成目的。


在许多优秀的产品中，关于按钮的设计已经有了一套相应的规范去执行。作为设计师，应该总结这些规范，并产出一套适用于自家产品的设计规则。这也是我写「按钮规范」系列文章的目的。


今天主要先与各位聊聊「取消按钮」的设计思路。


关于「取消」，大多数人对其理解还停留在 PC 端，认为「取消」的目的就是让用户停止操作上的流程。但时至今日， ..