一.视频学习网站
1.慕课网（我的最爱，里面有很多免费的视频）
2.腾讯课堂
。。。
当然还有很多其他的视频学习网站，但我觉得就这两个就够质够量了。
二.前端免费模板下载
1.html5tricks
有很多有趣的小程序
2.源码之家
各类模板灰常之多，不过也有很多广告
3.代码家园
整个网站看起来舒服，广告很少
4.模板之家
广告较多
5.魔客吧
有些要money
6.站长之家
。。。
模板网站就推荐这些吧，差不多够用了。当然，我们下载这些模板的目的不是为了抄袭，而是为了参考学习。（手动滑稽：) ）
三.图片图标logo素材
1.标志在线
免费设计logo
2.阿里巴巴矢量图标
图标特别多，而且基本上都是免费的
3.iconmonstr
免费图标下载
4.懒人图库
素材很多，不知道要不要钱
5.loading.io
看名字就知道是下什么的了吧
6.preloaders
进度条下载，有些要钱还是dollar，不过也有很多免费的
。。。
好吧，就这些。
四.其他
1.JS格式化
如果你的编辑器不支持格式化js代码的话可以试试
2.css代码兼容
css代码复制上去，自动会帮你生成兼容的css代码，是不是很厉害！不过兼容IE几我也不太清楚，你们自己去看看吧
3.配色
这是给你网站配色的，有兴趣的可以了解下
4.html、css、js压缩，js多文件合并
es6代码需先转es5再压缩，当然，也可以使用fis3构建压缩html，css，js；fis3还可以将图片转成webp格式（ios有兼容问题）
5.图片压缩
基本上是无损压缩，效果很不错
6.图片转换
转webp格式图片
7.雪碧图 （似乎访问不了了）
选中雪碧图中的图片，自动生成css代码。如：background: url('imgs/example.png') no-repeat -433px -51px;width: 33px;height: 33px;
8.html在线编辑工具
可以在线运行html代码
9.rgb,rgba,十六进制等颜色相互转换
10.HTML特殊字符编码对照表
11.改图宝
修改图片尺寸，生成二维码，生成印章，图片加水印...
。。。
最后，再推荐一些比较好的书
《css世界》、《ES6标准入门》阮一峰、《JavaScript权威指南》、《JavaScript高级程序设计》（红皮书）、《你不知道的JavaScript 上中下册》
————————————————
8月27日，中国大陆第一家Costco在上海开业，因为人满为患，上午开业，下午就被迫暂停营业了……
Costco开业的第二天，为了保证购物体验，Costco开始实行了限流政策，将卖场人数控制在2000人以内……
上海市民们依旧热情未减，有人早上4点半就去Costco门口排队了，大多数人6点半就到了，因为限流，来晚就进不去了……
27日晚上，我发了一条朋友圈，附了一张在Costco照的，抱着一大包狗粮的照片：
大家都问我是怎么挤进去的。
其实这不是在上海的Costco，而是在美国的Costco。
今年1月，我带队去美国游学，专门去参访了Costco公司的总部。
Costco的高管Jay B.Smith负责接待了我们，他给我们分享了很多Costco的经营细节，都是不为外界所知的。
同时，他告诉我们Costco很快就会在中国上海开业了，我们也代表中国消费者采访了他许多问题，特别有收获。
所以，今天，我想把这些“关于Costco，你可能不知道的事情”整理出来，独家分享给你。
Costco最早开始推行会员制的时候，其实遭遇了巨大的失败。
人们当时是不接受，也不理解会员制度的，没有多少人来办会员，Costco差点就死掉了。
那Costco是如何起死回生的呢？
它做了一个关键的改变：给高级会员2%的消费返点，每年的返点额度最高可以达到500美元。
高级会员每年的年费是120美元，一个家庭每个月只要在Costco消费500美元，一年下来，这120美元的会员费就可以返点回来了。
而如果你每个月消费500美元以上，你甚至还可以赚到额外的钱。
对于一个中产大家庭来说，平时需要购买食品、日用品、衣服等生活用品，偶尔还需要购买电子产品或者其它大件，每个月500美元的消费也不算太高。
加上Costco的商品物美价廉，本身就比别的渠道有价格优势，只要每个月消费500美元以上，省了会员费不说，还可以获得额外的返点，何乐而不为呢？
就这样，Costco迅速获得了第一批会员。
这些会员办了卡之后，既买到了物美价廉的商品，又拿到了额外的返点，同时还享受到了Costco把顾客宠上天的服务。
因此第二年的续费率高达96%，Costco也越做越成功。
Costco每年在全球范围内只扩张25家门店，相对来说，扩张速度算是比较慢的。
因为Costco最不愿意做的事情就是扩张。
为什么啊？
Jay B.Smith告诉我们：扩张，是最好的让客户失望的方法。
扩张太快，非常容易带来用户体验的下降，这是我们最不愿意看到的事情。
因此，对于扩张这件事，Costco一直是非常谨慎的。
Costco的商品中，有25%是自有品牌的商品（比如它著名的自有健康品牌科克兰Kirkland Signature），剩下的75%是其他品牌的商品。
为什么这么分配呢？
因为它要用25%的自营品牌，来倒逼其他75%的品牌降价。
Costco有经营自己品牌的能力，因此它就有底气跟大品牌说：“你要是不降价，那我就用自己的品牌做了。”
这就导致了大品牌愿意降价来给Costco供货，Costco也因此能给用户提供比别的渠道便宜得多的商品。
一开始，很多大品牌是不愿意和Costco合作的，因为它们其他的零售店要保留高利润。
但是当Costco越做越大，越来越多的大品牌愿意来costco了，比如劳力士，比如爱马仕。
很多人觉得Costco就像是沃尔玛旗下的山姆会员店；但其实，Costco一开始更像麦德龙。
Costco最初本来是打算做中小企业生意的，大包装仓储商品直接卖给企业，而不是卖给个人消费者。
但是因为覆盖面太小，Costco差点死掉。
之后Costco才转型，决定面向个人消费者。
Costco为什么非常重视肉类商品？
因为肉类商品是非常有粘性的。
Jay B.Smith告诉我们：消费者非常喜欢Costco的肉类，肉类商品会吸引消费者一而再、再而三地来Costco购买。
不像可口可乐、薯片这种标准化商品，肉是非常差异化的商品，你在不同地方买到的肉，质量肯定是不一样的。
你只要把肉类这种差异化的商品做到极好，就会积累消费者的信任，增加消费者的粘性。
所以，Costco非常重视肉类商品的质量。
很多人都觉得，Costco可以把东西卖这么便宜，是因为它靠会员费赚钱。
但是靠会员费赚钱，只能说Costco有把东西卖便宜的动力。
那它把东西卖便宜的能力从何而来呢？
第一点，是因为它的包装很大。包装越大，就能卖得越便宜。
第二点，是因为它的品类很少。
沃尔玛有13万SKU（品种），而Costco只有4000个。
因为品类少，单个品类的销量就可以做到极高，Costco就拥有了很强的与供应商议价的能力。
第三点，是因为它很多商品是自营，可以自己控价。
比如，Costco有自己的养鸡厂，它砍掉了所有中间环节，最终一只能够喂饱全家的烤鸡，只卖4.99美元。
一只烤鸡4.99美元，35人民币，这在美国是极其便宜的。很多用户因为买到这么便宜又量大，味道还不错的烤鸡，简直幸福感爆棚。
还有一点你可能不知道，Costco目前是全美最大的红酒厂商。
因为Costco卖出的红酒量实在太大。
但是它并不卖很多种类，它只卖几款最畅销的红酒。
在美国，对很多人来说，Costco的会员卡同时也是银行卡。
Costco和Citibank（花旗银行）合作，发行了一种联名卡。
既可以作为Costco的会员卡，也可以当做信用卡使用，在Costco消费可以享受2%的返现。
这也就意味着，Costco其实同时也在做金融生意，帮助信用卡的发行方来发行信用卡，同时来分享信用卡的刷卡收益，这可能也是Costco一个非常重要的收入来源。
在中国，平安银行也和Costco发行了一种联名信用卡，会员费可以减100元，同时在Costco消费可以获得最高1%的返现，白金卡每年最高返现1440元。
像Costco这种零售企业，想要赚钱的一个特别重要的方法，就是提高周转率。
Costco的周转率非常高，是11.8，接近12。
什么意思？
Costco用一笔钱进货之后，一个月之内就能把货物卖出去。
这也就意味着，同一笔钱，Costco一年可以周转12次。
我们来算一笔简单的账。
假如一个货物放在一个普通超市，三个月才卖出去，那么用来进货的这笔钱，一年只能周转4次。
很多人都知道，Costco的利润率最高不超过14%。我们假设它的利润率是10%。
那么1块钱的进货款，在普通超市，一年周转4次，就只能赚4毛钱。
而Costco一年周转12次，就能赚1块2。
所以，周转速度越快，零售企业的利润就越大。
在Costco有一句名言，叫做，降低成本最好的办法，就是提高销售。
什么意思呢？
如果想要降低成本，就要提高每天的出货量，这样周转率就会非常高；周转率变得非常高，资金成本就会变得非常便宜。
所以，真正的成本，是资金成本。如果你理解了这件事儿，你就会理解到底什么是Costco。
Jay B.Smith告诉我们Costco马上就要在中国开店了。
我们当时问他：Costco会打算在中国做电商吗？
Jay B.Smith很谦虚地回答说：电商其实是我们一直不擅长的事，美国有一些企业做得特别好，比如亚马逊，我们要向它学习。
但是，我们还是希望专注于做自己擅长的事。Costco所擅长的，是在线下做供应链管理。
所以，Costco知道自己所长，也知道自己所短。
目前来看，就算Costco在中国要做电商，它也会把主要的精力放在线下，把线下的服务做到。
最后，附上Jay B.Smith给我们分享的一组数据（截至2019年1月）：
Costco是全球第二大零售商，第一是沃尔玛。
它是把零售效率做到的典型案例，是每一个零售企业学习的标杆。
参访完Costco，我自己是非常震撼的。它能够获得今天的成功，很大程度上，要归功于它死磕自己、为用户谋利的精神，以及它强大的供应链管理能力。
在中国，也有很多向Costco学习的企业，比如小米，比如拼多多。
最后，依然祝福Costco，希望它能够在中国，越走越远。
文章来源：人人都是产品经理
篇首语：
随着互联网时代的发展，尤其近几年进入“互联网寒冬期”以及失去人口红利之后，企业对各个岗位要求都变得“非常”严格。对于UI设计而言，把作品做的非常牛X，显然已经无法满足市场需求和用人需求了。
前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。在一些企业你会发现有一些岗位上的缺失。出现这种情况最大的原因是，很多公司会把一些职能进行合并用来节省成本。现在仍然有大多数的公司并没有交互设计师的岗位，但是交互设计的职能不代表没有，而是被产品经理或者视觉设计师兼任了。
说到这里大家可能会说，大企业资金雄厚，不缺少任何职能岗位。是的，没有错，但例如“华泰证券”，“浦东发展银行”等，不再是UI设计而是用户体验设计师了。那么作为UI设计师、运营设计师、品牌设计师（以上统称为视觉设计）的我们，该如何顺应时代发展，更加符合当下的市场规律，成为一名优秀的用户体验设计师呢？
当我们拿到需求方（产品或运营）的设计需求时，不再是盲目的直接找参考、找素材开始了，而是用产品思维模式，理解“产品目标”、锁定“目标用户”、切身体会“用户场景”、遵循“用户行为习惯”等的方式，充分理解需求方所提出的设计需求，进而设计出更加符合需求方心理预期的设计作品。
因为与需求方“同频”思考才会设计出符合需求的设计，难道不是么？
本文目的：本文引入“全链路思维”模式，帮助视觉设计师提升思维高度，通过“分析需求”、“拆解需求”、“竞品分析”等三个纬度思考，并将这些分析结果转化为设计方案。
正文
一、全链路思维
最近所谓“全链路思维”的话题很火，但事实上，全链路早就不是什么新鲜的概念了，而且也并非什么岗位头衔（和全栈、什么都能干不是同一概念），更接近于一种设计思维与方法。
近几年，设计的发展趋势从UED（以用户为中心）变成UGD（以用户为中心，以业务增长为导向，不以结果导向的KPI都是耍流氓），对设计的价值考核也越来越清晰，同时对于设计师的能力体现要求更高。行业上升发展趋势要求设计师更懂行业（掌握行业间的差异）、更懂用户（洞察用户的需求）、更懂数据（善于分析业务数据）、更懂增长（投入产出比）。
在需求阶段，我们比较传统的一种流程，是被动从产品经理处接受已被加工为具体方案的需求，对需求产生的背景并没有什么深刻的接触和理解。而在进行全链路设计的业务场景中，需求方不会直接给你一个加工好的答案，甚至他们自己都没想清楚问题出在哪里、应该如何解决，而更多是带着一个提升某业务指标的原始诉求或一堆零散的原始用户反馈来找你；至于怎么从中引导对方发现问题、分析问题、归纳机会点、输出能帮助达到商业目标的产品设计方案、甚至协调推动落地，都需要设计师作为 Owner 去思考和负责。
“全链路”这个词应该是2016年从阿里出来的，对于“全链路”思维的理解，行内有不同的理解方式，笔者结合工作总结出以下几种方法：
需求分析 > 拆解需求 > 分析竞品 > 确立设计方案
二、用户体验
对于用户体验的理解，根据思考维度的不同其结果往往是众说纷纭，由于各个职能岗位之间工作侧重点以及专业度的不同，沟通起来是有成本的，只有用户为中心的“用户体验”思维才是各个职能岗位之间的唯一沟通《通用语》。例如：当产品向设计传达产品需求时，产品无法用视觉角度去阐述产品，设计也无法用视觉专业知识向产品解释设计理念，你只能用“用户体验”思维去解释你的设计方案。当然，如果对业务场景非常了解，两相结合，沟通起来效果更佳。
那么什么是用户体验，唯一的核心只有一个，那就是“解决问题”
解决用户具体某个需求点，让用户使用起来更佳容易，并且给用户留下深刻的印象（转化率）
解决了用户某个问题点并印象深刻，用户才觉得用着舒服。注意，这里的舒服指的是“舒爽”而非“酸爽”哦～。说到这里不得不再次提及老生常谈的，用户体验5要素：
表现层 > 框架层 > 结构层 > 范围层 > 战略层
那么以架构层与结构层为例
(一)、架构层：页面布局（各类控件及信息摆放），页面布局的核心点在于：恰好
当一个功能恰好出现在，用户期望出现的位置上，即符合了“用户的心理预期”，也符合了“用户行为习惯”，那么用户用着是否“舒爽”？所谓，以用户为中心指的就是，迎合用户的行为习惯及心理预期，让用户感到恰好、舒爽，同时感到被照顾、呵护的感觉：你好懂我～
大家都知道，一个页面最佳视域为：左上、右上、左下、右下，左上最佳，右下最次。功能类控件（如：评论，点赞，发布，分享）在一段信息区域的右侧，不是说右侧不好么，这是因为为了符合人体工程学，右侧好点击原理（左撇子除外）。
(二)、结构层：信息架构 （信息层级梳理及页面流），核心点在于：瘦身
结构层相对于架构层较为抽象，我们可以将他理解为“链接”。架构层是针对单页面结构设计，而结构层是将单页面链接在一起，从而形成了系统。
拿app举例：架构层决定了点击页面图标和按钮后页面跳转到哪一页。通过删除、组织，隐藏和转移，将复杂的结构变的简化，也是提高用户体验的手段。例如QQ5.0的升级，通过汉堡导航及tab标签将功能整合，似的应用在感觉上苗条了很多。
以阿里巴巴(1688) APP 8.0为例：
(三)、怎么做好页面布局及信息层级梳理：核心在于准确理解产品需求
也许大家都遇到过这样的情况：当产品经理看到你的设计方案时，突然找到你并且要求你，“这里放大，那里缩小，哦不，你给我放大的同时缩小，这个颜色我要五彩斑斓的黑，哦不，我的意思是@#￥%”
遇到这样的情况，设计师要无条件的遵循么？产品经理对于视觉有自己的审美，当他发出需求时脑子里已经有了2-3个设计方案，只是他不会做，设计方案没有符合他的心理预期（以至于指手画脚）。甚至他的审美经过这么多年优秀作品都熏陶，不会比任何一个设计差，只是他无法用设计专业知识去指导你罢了。
这个时候设计师该怎么做？出现这种情况只有这几种可能：没有同频思考、没有准确领悟产品目标（意图），进而对信息架构、信息层级理解有误、没有把重点信息清晰体现、功能类控件，没有做好有效的视觉引导。以上统称为：需求理解错了。
说到需求理解，据一个简单的例子：假如有个用户说：“我想吃蛋糕”，那么注意了，如果真的给用户蛋糕，那就完蛋了。首先分析用户为什么要吃蛋糕：就喜欢吃蛋糕？喜欢吃甜的点心（别的甜点能否替代）？还是说只是单纯的饿了，不知道该吃什么，只是突然想到了蛋糕，那么可否用其他我能提供的什么东西去替代？
所以，这个用户的需求不一定就是蛋糕，蛋糕只能是诉求，解决温饱的诉求而已，但不一定是需求，他的需求是，解决温饱的食物而已，如果不多问一句，不就产生了“放大的同时缩小，五次斑斓的黑”么？因为对需求的理解错误，没有准确的理解产品目标，才导致设计方案才会出现错误，难道不是这样的么？
二、需求分析
有人会问：“视觉设计师还需要像产品经理那样做需求分析么？”，正如上文中提到，要与产品经理保持“同频思考”，还要准确的理解产品需求。不需要做，但并不代表不会或者不去思考。因为需求分析是“全链路思维”模式的前提。那么对于视觉设计师而言，不需要像产品经理那种专业度，只需要思考以下几点即可：
（1）为什么要做这个需求（业务目标）
思考：业务方为什么要提出这个需求，为了提升转化率、用户留存、曝光/流？、点击率、访问率、注册率，也就是业务方的核心目的是什么。
（2）产品期望得到什么结果（产品目标）
思考：产品为了达到业务目标，采取的策略是什么，通过什么功能实现的。产品的核心功能及交互流程是什么。
（3）谁来使用这个功能（目标用户）
思考：此业务目标是针对哪些人群的，这些人群有什么共同的特点，和行为习惯。
（4）他们为什么要使用这个功能（用户需求）
思考：这些人群有哪些共同的需求点，产品目标是否满足这类人群的核心需求，解决了哪些痛点。这些人群期望怎样的结果。设计师该如何引导用户，理解产品目标。
（5）他们在什么情况下使用这个功能（用户场景）
思考：在这样的业务目标下，用户在什么场景使用该功能，为什么使用，会不会有反感，如果我是用户，我的感受是什么。
其实，业务目标和用户的需求是矛盾的。比如，业务方希望提升注册率，但对于用户而言，注册与否并不敏感，或者根本不想走一遍繁琐的注册流程。这时产品就需要在特定的场景下，在某个功能流程中恰好出现注册功能，让用户不得不注册，因为用户不注册就得不到他刚好想要的服务或体验。这个时候设计师要考虑的是，通过设计营造一种喜悦的氛围，不让用户感到反感。因此设计师的核心价值在于，如何平衡业务目标和用户需求之间的矛盾，做出有效视觉引导。
三、拆解需求
拆解需求指的是，当设计师分析需求方的需求后，将需求拆解成其对应的视觉解决方案。上文中提到，需求分析不需要达到产品经理的专业度，但“拆解需求”必须达到专家级程度。因为这部分是需求分析后，如何理解需求方的需求（业务目标、产品目标）的关键所在。这时，我们视觉设计师要思考一下几点：
1、信息层级
（1）信息层级的分类（在明确需求后要对信息进行划分及拆解）
（a）用户能否在最短的时间阅读到信息、
（b）哪些信息是属于业务流程范围的、
（c）哪些信息是产品想要突出表现的、
（d）哪些信息看似不重要但没有还不行、
（e）信息描述前后是否统一，会不会给用户带来困惑
（2）信息层级的权重
在明确主要信息归类后，通过视觉上的，黑、白、灰，把层级表达清楚。明确信息权重，权重高的是否优先展示，有没有误导用户。
2、功能层级
（1）功能优先级权重划分（在明确功能后要对功能进行分类及拆解）
（a）哪些功能优先级最高，哪些是属于主业务流程及功能流程、哪些功能是子功能、
（b）哪些功能产品经理并不想突出，但用户却需要的、
（c）同一个页面，同一功能多次出现，产品经理的目的是什么、
（d）产品不同时期，功能的视觉变现是否有差异、
（2）交互层逻辑是否贴合用户场景
在明确业务目标与产品目标后，设计师要反复验证交互逻辑是否合理，逻辑是否符合该用户场景。
（3）交互体验是否流畅
在明确目标用户与使用场景后，把自己融入到使用场景中，反复验证交互流程。看是否符合业务目标与产品目标，同时看交互流程是否流畅，有没有给自己带来障碍。
（4）用户操作是否便捷
如果自己是用户，操作是否符合用户行为习惯，有没有恰好出现在该出现的位置上，视觉展示是否引导合理，视觉引导有没有给用户带来误区。
3、页面布局
在明确目标用户与使用场景后，把自己模拟成目标用户，思考页面布局是否符合用户行为习惯和心理预期。主流程下的控件是否在视觉上有点击欲望，会不会反感。（用户体验中已有详细说明）
4、状态的查缺补漏
各类交互状态，如，图标点击后的状态（移动端、pc端）、hover 状态（pc端）、非主业务流程下的功能提示（如：错误提示、缺省提示）。这些产品经理往往会忽略掉，或者文档里也会给出过，要注意观察及时查缺补漏。
5、视觉的有效引导
在准确的理解产品需求，做到“同频思考”后，分析信层级和功能优先级及权重划分，将这些在视觉设计的过程中做有效的引导，并时刻查缺补漏。这个时候对于哪些信息和功能需要突出，哪些信息和功能需要弱化，在头脑里有个清晰的认知和思路。让信息和功能恰好出现在用户期望的位置上，并且解决产品目标为目的，也就是上文中提到的用户体验的核心点，解
决问题。
值得注意的是：
视觉设计师是对产品方案的进一步完善，以用户为中心的用户体验思想，用视觉引导的方式引导用户实现产品目标的，而非只会照着原型图毫无思想的画图。同时要让用户无论在视觉上还是体验上，都能感受到“舒爽”而非“酸爽”。
产品经理给出的原型，重心在业务逻辑，因此，为了提升用户体验、避免给用户带来误区和障碍，设计师要以产品思维（产品思维和业务思维是不一样的）在业务及产品目标、主功能逻辑不变的情况下，重新划分信息层级、做好页面布局，做好视觉引导。
四、竞品分析
通过需求分析（理解需求）、和拆解需求（明确设计目标）后，在正式进入视觉设计之前，视觉设计师们通常要先找一波资料（找参考），如果只是这样，那么仅仅是寻找视觉表现手法而已（什么风格、什么颜色）。本文中所提到的竞品分析，不是产品竞品分析也不是交互竞品分析，而是为了视觉设计而准备的视觉竞品分析。基于“全链路”思维模式下通常需要考虑一下几点：
（1）我们的方案和竞品的区别在哪里，为什么不同。
跟竞品之间的区别很重要，因为每个产品业务目标与产品目标，以及产品处于的阶段都是不一样的，即便看着很类似也不可以盲目参考。
例如：产品阶段的不同，对于“搜索”功能的要求是不一样的，产品初期由于信息量不够，搜索不出太多的内容。属于没有还不行，有了还不能太明显，不能误导用户去搜索，而是要用分类功能。因此，即使产品经理给出了“”搜索”功能，在视觉上也要弱化变现。但你如果参考了成熟期的产品，可想而知你设计出的“搜索”会是什么样的了吧。
（2）竞品是怎么做的，优点在哪里，解决了哪些问题，他们为什么这么做
我们要找到与本产品业务目标与产品目标基本一致的竞品去对比，切勿只是原型基本类似就以为目标一致。因此，先要看这个竞品都解决了哪些问题。
（3）什么是我们可以借鉴的，是否可以改进
在确定目标基本一致后，要分析哪些可以借鉴，能不能比他做的更好，如果只是抄袭，那就没有意思了。
（4）那么设计该如何表达，比竞品做的更好
经过上述分析，在这个阶段对于视觉设计师而言，设计方案基本在脑子里已经成型了。这时对于什么风格、什么颜色，才基本符合产品预期。在结合需求拆解的方式，拿出可行的设计方案。
转自-站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
<div class="table_box"> <el-button type="primary" class="submit_btn" @click="addTable">添加</el-button> <!-- 如果不想展示错误提示信息,可以加上show-message参数 --> <el-form :model="productRuleForm" ref="productRuleForm" :rules="productRuleForm.rules" :show-message="false"> <el-table :data="productRuleForm.tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <template slot-scope="scope"> <!-- prop的规则: 在普通的form表单中是一个对象,prop是对象的属性. 表格是由多个对象组成的数组,在写prop是需要根据索引给值.这里的tableData就相当于对象的属性 !--> <!-- rules也要单独给 --> <el-form-item :prop="'tableData.' + scope.$index + '.date'" :rules='productRuleForm.rules.date'> <el-date-picker v-model="scope.row.date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </el-form-item> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules='productRuleForm.rules.name'> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="phone" label="电话"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.phone'" :rules='productRuleForm.rules.phone'> <el-input v-model="scope.row.phone"></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="address" label="地址"> <template slot-scope="scope"> <el-form-item :prop="'tableData.' + scope.$index + '.address'" :rules='productRuleForm.rules.address'> <el-input v-model="scope.row.address"></el-input> </el-form-item> </template> </el-table-column> </el-table> </el-form> <el-button type="primary" class="submit_btn" @click="submit">提交</el-button> </div>
js:
data () { return { productRuleForm: { tableData: [{ date: '', name: '', phone: '', address: '' }], rules: { date: [{ required: true, message: '请选择日期', trigger: 'change' }], name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }], address: [{ required: true, message: '请输入地址', trigger: 'blur' }] } } } }, methods: { // 添加一行 addTable () { this.productRuleForm.tableData.push({ date: '', name: '', phone: '', address: '' }) }, // 提交数据 submit () { this.$refs['productRuleForm'].validate((valid) => { if (valid) { } }) }}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
原型的不同阶段，含义和作用也各不相同，更加认清了原型在工作中的用途，希望对各位也有所帮助~
不知你有没有这样的经历：为了不让原型看起来丑，会纠结各种细节处理（间距、大小），结果造成工作周期延长，精力损失；为了让原型接近于真实效果，会思考各种精致布局，结果leader来一句‘你现在做这么好看干嘛，这个功能都没确定好’....在各种阶段画出了不合适的原型。
所以今天想聊聊‘交互原型’这一话题，也算是对自己成长的一个总结和沉淀。
文章目录：
·原型的不同阶段
·原型与用户体验的5个层面
·原型产出的原则
Part1：原型的不同阶段
其实我觉得画原型和做设计的理念是一样的：没有好坏，只有是否合适~
当产品经理/交互设计师没认清当前的需求阶段时，无论你画的好不好看，都会出现一些糟糕的现象：一开始就注重细节处理、在原型需要重点输出时，又忽略功能与逻辑上的思考、在功能未确定时追求精致页面效果...
下面是我对‘原型’的理解，所绘制用于表示不同阶段下的需求特征。
01.想法阶段：
在产品需求的初始阶段，功能概念都比较模糊，大部分想法都停留在脑海和口述上（工作中典型的场景，如团队风暴、需求讨论、会议评审）。需要我们不停地理清概念想法，验证需求的合理性、目标是否正确。
所以这个阶段的强调是：产品雏形 - 将我们的想法、概念需求可视化出来，并加以讨论验证。因此，最合适的方式就是用‘草图’表达，快速产出快速修改，能即时看见产品的雏形。
常用‘草图’勾勒产品雏形，除了可以表达想法、探索方向外，好处还在于：
a. 能提升你快速思考、验证假设、优化设计流程的能力。
b. 能展示你思考问题的过程（设计思维），体现专业能力。
02.修改阶段：
这阶段的产品目标和方向较为清晰，接下来需要优化原有的概念想法，为产品创建一个信息架构、梳理功能逻辑等工作，方便在需求评审会、团队讨论中推动产品功能的进展。
该阶段强调：理清目标 - 根据用户诉求、业务目标、运营需要等不同目标点，逐步梳理出原型上需要展示哪些功能内容（界面布局、信息取舍）。
所以对产品经理/交互设计师来说，只需产出一个大体上看得明白、能理清产品功能的‘中保真原型’即可。方便即时修改，向产品定型/高保真原型过渡。
03.确定阶段：
到了这个阶段，产品需求的功能布局、信息设计已全部确定，这时一份全面、严谨的‘高保真原型’就尤为重要。
一方面可以为视觉同事的UI输出、开发的落地实现等提供依据。另一方面在各种工作场景中，高保真原型都能发挥很大的作用，如交互评审、领导过稿、A/Btest、demo演示等等。
这一阶段强调：细节核对 - 因为关系着UI输出、界面实现等工作，所以需要注意各种交互细节，以防出现设计、流程上的漏洞。
有2个核对纬度上的检查：
a. 规范对齐
若团队内部有设计规范时，一定要对齐字体大小、颜色、布局、间距等视觉元素。且能复用已有样式就尽量复用，避免出现“一个功能，两种样式”的情况，如图：
b. 交互走查
高保真原型输出后，需要根据交互自查表，一一梳理原型说明是否存在漏洞，以防出现异常流程和内容状态。
另外，当你想要获得用户反馈、测试你的想法是否为业务/用户创造价值时，尽量使用高保真原型。原因在于：能够产生真实的操作效果、给用户带来‘身临其境’的浏览体验。
最后总结一下，不同阶段的原型用途：
·草图：快速表达想法、验证需求、展示思考过程。
·中保真原型：梳理大体产品框架，继续优化功能。
·高保真原型：为UI输出与开发实现提供依据、测试用户反馈、制作交互demo、向领导过稿等等。
Part2：原型和用户体验5个层面
另外我还发现，结合‘用户体验5个层面’来看不同阶段的原型，两者是多么地吻合、有理有据。
01.战略层和范围层 - 草图
产品想要做什么？如何去满足战略目标？在构思把目标和需求转变成功能和内容时，用草图的方式是极为合适的：快速表达、即时验证，能让概念想法马上‘可视化’出来。
02.结构层 - 中保真原型
想法表达后，需要为产品构思一个具体的框架结构，根据业务目标和用户诉求，不断地修改产品功能、信息设计，慢慢完成产品的定型。所以这时候只需产出一个大体上看得懂、方便修改的中保真原型即可。
03.框架层 - 高保真原型
这是原型设计的最后阶段，产品关系已理清、功能内容已确定。这阶段注重原型的界面细节处理，如梳理异常流程、信息的不同状态、是否对齐规范等等，以便后期的界面实现，所以一份高保真原型就尤为重要了。
04.表现层 - UI效果图
原型确定后，接下就是UI优化阶段了，这时候产品的最终效果也就出来了。产品的下次功能迭代，也是根据此UI效果图的基础上进行原型优化、修改。
Part3：交互原型的原则
最后简单说下，原型产出的几个原则：‘使用灰色图’和‘复用已有样式’，避免在今后工作上踩坑：
01.使用灰色图
原型就要有原型的样子，大面积的彩色布局，很容易让人觉得这是UI效果图（视觉同事可不背这个锅），尤其是在交互评审会上，这种细节更应该注意。
02. 复用已有样式
这个上面已经说了，能复用样式就复用，避免出现“一个功能 两种样式”的情况，否则和视觉、开发同事对接原型时，会造成一定的理解干扰。
总结：
以上对交互原型的一些见解，若有描述得不当请多指教，下面是总结文件（转发截图给我可领取）。
文章来源：UI中国
<template>
<div class="app-container" style="overflow: auto;">
<el-table
:data="list"
size="small"
element-loading-text="Loading"
border
highlight-current-row
>
<el-table-column label="会员账号">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="login">
<el-input v-show="true" v-model="scope.row.login" placeholder="请输入会员账号"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="真实姓名">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="real_name">
<el-input v-show="true" v-model="scope.row.real_name" placeholder="请输入真实姓名"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="会员昵称">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="nickname">
<el-input v-show="true" v-model="scope.row.nickname" placeholder="请输入会员昵称"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="会员手机">
<template slot-scope="scope">
<el-form :model="scope.row" :rules="rules">
<el-form-item prop="mobile">
<el-input v-show="true" v-model="scope.row.mobile" placeholder="请输入手机号码"/>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-form ref="scope.row" :model="scope.row">
<el-form-item>
<el-button @click="handleSubmit(scope.$index,scope.row)">重试</el-button>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { retry } from '@/api/table'
import { validateName } from '@/utils/validate'
import { validateMobile } from '@/utils/validate'
export default {
data() {
// validator
const validateNameInput = (rule, value, callback) => {
if (!value) {
return callback(new Error('此项必填！'))
} else {
callback()
}
}
const validateMobileInput = (rule, value, callback) => {
if (!value) {
return callback(new Error('手机号码必填！'))
} else if (!validateMobile(value)) {
return callback(new Error('请填写正确的手机号码格式！'))
} else {
callback()
}
}
return {
list: [],
// input框失焦校验
rules: {
nickname: [{ validator: validateNameInput, trigger: 'blur' }],
real_name: [{ validator: validateNameInput, trigger: 'blur' }],
mobile: [{ validator: validateMobileInput, trigger: 'blur' }],
login: [{ validator: validateNameInput, trigger: 'blur' }]
}
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
const errorData = JSON.parse(this.$route.query.errorData)
this.list = JSON.parse(errorData)
},
handleSubmit(index, row) {
// 提交校验
if (validateName(row.login) && validateName(row.real_name) && validateName(row.nickname) && validateMobile(row.mobile)) {
//数据提交和错误catch
}
}
}
</script>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
对于「高大上」即高级感这个抽象的概念，其实每个人的理解都不尽相同。身为设计师，在很多时候都需要去理解需求方所提出的「高大上」的含义，然后在自己的理解与需求之间找寻最合理的解决方案。
个人理解的「高大上」不仅是作品表现形式的高级感，也关乎时间的维度。有着持续生命力的经典设计如包豪斯或无印良品式的设计是「高大上」的，而区别于当下泛滥、普遍、常见设计的有独特风格化视觉语言的，也是另一种形式的高级感。本文将从这两个不同的角度来为大家拆解提升作品高级感的技巧。
传统意义上的「高大上」即所谓的高级感可以用现代主义建筑大师密斯·凡· 德罗那句著名的「Less is more」（少即是多）来形容。这句概括现代设计精神的金句，影响了几代设计师，不仅改变了世界建筑的面貌也改变了整个世界设计史。德国著名的工业设计大师迪特尔·拉姆斯也曾在他的「设计十戒」里有提到「好的设计是尽可能的无设计」。
那些被大众所接受的传统意义上的「高级感」，拆解开来其实可以理解为克制感与性。高级感的营造往往是深远的意境、极简的表达以及的细节追求。那如何来实现设计作品的高级感呢？
1、颜色传递情绪少显高档
每种色彩都会给人不同的心理感受，相较色彩浓烈情绪饱满的用色，传递情绪少的颜色更能给观者治愈的能量。所以除了减少使用颜色的数量，降低色彩的饱和度或者多使用不明确色相的颜色都能削减色彩对人情绪的影响，起到提升作品高级感的效果。此外使用黑白灰或者单色，也容易降低色彩本身对人情绪的影响，营造高级感。
比如很多人喜欢的「莫兰迪色」，还有经典的黑白灰。
2、字体选择不宜多，简单即是美
字体选择一般不宜超过三种，多利用文字大小对比营造信息层级关系而非文字种类。对于追求高级感更是如此，字体种类选择宜少不宜多，简单的字体好于自身过于个性复杂的字体。
还有一种在做设计时让文字显高级的方式就是将文字图形化与符号化处理。图形从视觉表现力和神秘感上会比我们一眼就能读懂的文字更胜一筹。这大概就是为什么很多人会认为英文比中文看起来更有「高大上」的感觉，而在中文排版中加入英文能从视觉感知提升高级感。其实当在设计里使用如拉丁语、丹麦语等我们自身更加不熟悉的语言文字时，这种高冷的疏离感会让感官上的高级感更强烈。所以想要让文字元素显得高端，一个小技巧就是让文字显示在第一时间不易被解读出来。
3、善用留白，营造高级感
善用「留白」也是对做所谓「高大上」的设计非常有效的一种表现手法。恰当的留白可以更加突出主题内容，让重要的信息更准确的传达。「留白」自身也可以营造出一种很好的空间感，让画面得到延伸，给观者留出更多的想象空间，呈现一种意境美。
很多时候信息和元素越多、越大就越难把握。多做减法去芜存菁，避免无意义的视觉元素堆砌和杂乱无章，缩小或减少次要元素的存在感，利用合适的留白反而能让你的设计更有高级的气质。
4、高质量的图片素材
在做平面设计的时候，高质量的图片是设计质感有保障的重要前提。无论是在图片库寻找图片素材，还是自己进行照片的拍摄，高质量的图片一般都需符合以下两条原则：
高质量的免费图库Unspalsh、 Pixabay、500px、Getty Images 等，都可以提供不错的基础素材。
5、除了设计本身，还有工艺和材质加持
营造设计的高级感，除了视觉设计效果本身的高阶气质，善用工艺与材质同样能让你的作品高级感满满。对于平面设计的书籍、包装、海报等宣传物料设计，合适的工艺与材质选择会让作品的质感得到提升，甚至可以弥补设计上的不足。
雷射雕刻、烫金、凸版印刷、无墨压印、丝网印刷、专色印刷等特殊印刷工艺的使用，手工装帧或人工制作的加入，都能为打造「高大上」的设计增色不少。
对于线上的视觉设计而言，给作品的细节增添有质感的材质也是丰富设计层次、打造高级感的方式之一。
就像在开头所说，你永远不会知道需求方说的「高大上」到底是哪一种「高大上」，对方想要表达的感觉到底是哪种。通常可以在进行更加深入沟通之后，明确后面的设计方向。当普世经典的「高级感」并不在对方想要的感觉范围内的时候，我们需要在「高大上」的光谱上搜寻更加契合需求的设计方案。
这个时候，需要有针对性地营造不同的视觉风格，创造出区别于流俗、更加「脱俗」的设计。在沟通的时候，客户所描述的「高大上」通常会带有一些明显的情绪、感知上的特征，抓住这些特征来进行针对性的设计也就成了关键。
1、几何元素和色相对比所营造的时尚感
每年对于时尚与潮流感的界定一直在变，这一点非常值得注意。就像在前文所提到的「高大上」不仅要考虑作品的表现形式，也要顾及对时间维度的考量。比如站在当下这个时间点上，高饱和度红蓝双色和大范围渐变的视觉表现，就是 2019 年高度普及并被认可的视觉潮流形象。营造时尚感使用更简约的几何字体、几何元素，搭配对比明显的几何色块，小巧凝练的文字排版，这些都更容易塑造出符合当下的时尚感。
同时，低饱和度、高素质的图片打底是常见的设计技巧，这样也更容易创造出色相对比，从而将时尚高级的感觉给提炼出来。
2、巧选字体和配图凸显文艺范
配图的选取，色调的后期调整与文字排版的选择，很大程度上决定了文艺气息能否营造出来。午后的阳光，慵懒的萌宠，粼粼的波光，延伸的道路……这些能够沾上诗意的配图，搭配上经典的衬线字体如宋体（明朝体），再运用相对清晰简单的上下或左右式布局，就能很快将作品打造出文艺范儿的气质。
3、把握好冷峻的气息，创造出科技感
未来一点，科技一点，诸如此类的描述也常常紧随「高大上」三个字出现在甲方爸爸的需求里。虽然使用蓝紫之类偏冷的色调或是简洁的黑白灰是立刻能想到的选择，但打造「科技感」的精髓还是在于设计作品的情绪传达要少和冷。冷峻的线条，抽象几何元素，无衬线简洁又几何感强的字体，加入与设计主题相切合的科技衍生物或是带有明显近未来属性的物品为辅助元素，都是塑造作品「科技感」强有力的方式。
4、强化视觉主体，营造冲击力
视觉张力的营造有多种方法，但核心还是在于营造凝聚力与速度感。整个画面和布局要有一个非常明确的视觉中心点，元素和布局都应清晰地围绕这个视觉中心点来展开设计。这个点可以是一个物品，一个标题，甚至可以是无形的存在，但一定要让人能明确感知。辅以加粗、凝练的字体，大特写、发散式的视觉装饰和引导，冲击力就出现了。
当然，在色彩上为了兼顾到整体视觉的情绪，色彩的饱和度可能会偏高。虽然这样偏离了传统意义上「高大上」的设定，但是如果要兼顾需求，有舍才能有得。
5、深入挖掘文化特征，进行风格化设计
「风格化」设计的需求其实并不少见，问题的关键在于设计时要往哪个风格去偏移。是「和风」还是「韩流」，是「德味」还是「美式复古」，或者选择时下最in的「国潮风」？无论是哪种风格化，都意味着需要深入挖掘相应的文化，才能有针对性地进行风格化的设计。我们后续会单独撰文来写风格化设计的事情，今天这里就不赘述了。
高大上并不是一个的答案，它是一个涵盖一定范围的光谱。而我们要做的，就是在光谱上，找到一个大家都能接受的位置。
1.Method与计算属性computed的区别
区别在于method每次都执行函数，而computed基于依赖缓存，只要相关值不变，那么就不必再执行函数。
下面，注意Date不是响应式依赖：
computed: {
now: function () {
return Date.now()
}
}
所以使用计算属性
2.v-if与v-show
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
令，v-show不支持template语法。
3.v-for
可以v-for="item in items"也可以of
还有可选第二参数作为前项的索引：
<li v-for="(item, index) in items">
也可以用模板渲染父节点或模板，来渲染多个子块。
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: [
{FirstName: 'John'},
{LastName: 'Doe'},
{Age: 30}
]
}
})
写成这样，输出：
{ "FirstName": "John" }
{ "LastName": "Doe" }
{ "Age": 30 }
将object从数组变为如下：
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
那么输出：
John
Doe
30
此时直接指向的是值了。
还有三参数：v-for="(value, key, index) in object"
还可以用整数，输出10个数字：
<div id="haha">
<span v-for="n in 10">{{ n }}</span>
</div>
var t=1,n=0;
new Vue({
el: '#haha',
data: {
object: {
n:n+t
}
}
})
很好的例子
4.一些数组方法
push()：在末尾添加一个或多个元素，并返回新长度
pop()：删除并返回最后一个元素
shift()：删除并返回第一个元素
unshift()：数组开头添加一个或多个元素，并返回新长度
splice()：删除或替换元素，返回被删除元素。splice（index，number，new ele），用new ele 替换index开始的number个元素
sort()
reverse()
5.类似v-on:click(含参)的注意点
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
如上，可以传入原生DOM对象。
阻止冒泡还有其他方法，即在v-on上使用事件修饰符。常见事件修饰符有：
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 只会触发一次点击 -->
<a v-on:click.once="doThis"></a>
有事件修饰符，还有键盘修饰符。
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
又新增了按键修饰符，和组合键修饰：
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
6.神奇的v-model
神奇之处在于会根据控件形式自动选取方法更新元素。
例子
<div id="che">
<select v-model="sele" multiple>
<option v-for="op in ops" v-bind:value="op.index">{{op.va}}</option>
</select>
<span>{{sele}}</span>
</div>
new Vue({
el: '#che',
data: {
sele: [],
ops:[
{index:1,va:"s"},
{index:2,va:"ss"},
{index:3,va:"ssr"}
]
}
})
若option里绑定value，则会将value值按所选中的放在数组sele开头。
若没有绑定value，会将{{op.va}}当做value。若写为{{op.index}}则将index当做value。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
作为一个产品团队，我们最需要的永远都是懂用户懂需求，并保持不断的创新力。有赞希望每个产品人在这里都能足够发挥自己的能量，为客户创造价值，并获取价值。
于是，我们需要一个大家共同理解、遵循、迭代的《产品设计原则》，从而保障我们可以在不偏离的情况下肆意挥洒、充分创新。
有赞的《产品设计原则》，根据客户需求、有赞的使命和愿景、当前生态环境，以及我们所处的发展阶段拟定，它是每个有赞产品在设计过程中都要遵守的基本原则。我们还会定期对其进行优化和迭代。
它是一个产品视角的原则，并非完整的市场、运营或者技术视角。在产品视角上，我们把产品设计过程分成了 4 个部分：产品定义、产品设计、产品研发、产品运营。
产品定义：首先是定义客户和场景，面对什么样的客户，服务什么样的场景，它的使用场景是什么；然后是价值，客户价值和商业价值；再是全局，要做全局的整体的思考。
产品设计：基于场景拆分用户的使用任务，任务再会拆分为功能和交互、内容和信息架构，最终把它呈现到界面上。
产品研发：主要指界面设计、技术研发，还应该有用户体验及可用性测试的部分。
产品运营：产品上线前后的基于产品的运营计划，产品的增长管理、市场营销、跟用户之间不断的互动过程。
这 4 个部分不断循环迭代，就是整个产品设计方法的过程。在这个过程中有赞的产品设计原则如下。
1. 用户和场景是一切的基础
清晰的用户画像和使用场景，是整个产品的基础条件。
2. 找到用户价值和商业价值的结合点
定义一个新的产品时必须找到用户价值和商业价值的结合点，同时能够满足用户价值和商业价值的需求通常是最优质的需求。
3. 设计可持续正向增长的产品模式
产品模式应该是可持续的、长期的、正向增长的，随着用户的使用，产品价值会越来越高，业务增长会越来越好，成本增长不断下降。并且，给老产品带来正向增长的新产品，要比只利用老产品来补给的新产品要好。
1. 首先要是能够最小可用的全场景闭环
商家端的产品要做成全场景、完整业务链路的闭环，因为任何一个环节的缺失和不完善都会导致商家的生意无法正常运转。
2. 每个商家都应该是独立的个性化的
本质上我们的服务是「在云上为每个客户提供了一个独立的产品」，商家都是独立的，每一个商家都有个性化配置一切的权利。我们要尽全力去实现每一个商家的独立和每一个商家的个性化，而不是规定他们一定要怎么样。
3. 产品结构及呈现方式需要可延续可拓展
一个被信任的商业服务产品首先应该是持续稳定的，产品的结构和呈现方式一旦确定下来，就不能轻易改版。这要求我们的设计需要面对业务变化的时候可延续，面对功能和服务增加的时候可拓展。
1. 稳定压倒一切
没有任何东西比 SaaS 的稳定重要，宕机了再好的产品都没用。会影响到系统稳定的事情不能做。
2. 说人话
说对方能听懂的话，做用户能用明白的产品。不耍专业，不设置门槛。
3. 永远保持一致的表达方式
每一处给用户表达的内容，都需要是一致的，不做多样化。从开始到结束，从 A 产品到 B 产品，从界面视觉到文字内容，以及标点符号。
1. 不可减少，每个用户都重要
新产品不能比老产品的功能少，不应该轻易下线产品功能，不降低服务。不让少数服从多数，每个用户的需求和习惯都是重要的。
2. 先有，再，然后易用，最后好看
有是最基础的体验，有总比没有要好。然后使用效率要很高，再然后才是要好用易用，最后才是要好看。当然，丑也是不行的。
3. 持续关注自己的「孩子」，哪怕她已经嫁人
作为一个产品人，应该持续关注自己做过的产品，哪怕这个产品已经不归自己管了，也应该经常关注并思考他的发展和进化。
4. 不骚扰用户，不群发
我们的责任是帮助商家成功，不是为了让我们自己的生意更成功，我们没有权利去为了自己的商业目的不断骚扰用户。用户通常不看系统消息，群发信息起不到沟通作用。
以下是白鸦在有赞内部关于《产品设计原则》的分享速记。
在有赞产品设计原则这件事上，我们想了很久。有赞最早期的时候，产品的设计原则主要靠我和麦麦（有赞首席产品设计师）等几个人的默契，以及慢慢形成的习惯。我们在一起天天聊，然后就有了一些共同的产品观，以及产品设计的习惯和理念。
但是，随着我们的小伙伴越来越多，我们注意到有很多东西，都要再重新给每一个人讲一遍。坦白说，所谓的产品设计原则或者产品观，并不是全世界通用的。每一个公司、每一个团队，因为业务性质和业务特点的不同，都可能会出现他的产品设计原则跟别人的不一样。
所以我首先要说，产品设计原则这件事，没有谁是最好的。只有你的产品设计原则是否最适合你的业务，最适合你的产品。因此，我们发现很多新的同学带着原来在其他公司、其他岗位上的设计原则、设计思想，加入到有赞这家公司之后工作中有一些不适应，你不知道我们在产品设计时为什么会那么想。甚至我发现新来的同学经常会犯一些我们认为在这个业务性质上，在我们的原则上，我们的价值观上不应该犯的错误。
所以我们花了很久的时间去讨论有赞的产品设计原则，去推敲，最后把它确定下来。专门做这次的分享，而这次分享只是我们开始落实有赞产品设计原则的一个 kick-off ，之后我们还会把这次分享的内容再细化做出案例，然后对公司新入职的每个产品经理进行考试，如果考试不过关是没有资格转正的。因为有赞产品设计原则是这家公司与用户的基本原则，这些东西我们要保持一致。
我举个有意思的例子。我们经常发现新来的同学在优化产品的时候，他会发现某个功能可能有一点臃肿（麻烦且没什么人用），然后就把这个功能下线了。如果是 to.C 的产品，把某个功能下线是很正常的事情，比如微信去年上了一个可以去看最近三个月谁没有联系，最近半年谁没有联系的功能，上线了一个版本后，下一个版本直接就删了。 to.C 这样删是没问题的，但是 to.B 的产品你不能删。我问新来的同学你为什么把它删了？他说我看了一下数据，没多少商家用，于是就把它下线了。我要强调在 to.B 的产品上不能这么删，原因很简单，哪怕只有一个商家用，你都不能下线。如果这个产品有危害你不得不下线，你要么做一个高级功能把它替换下去，要么就得先跟商家沟通说：我们打算把它下线，对你有影响吗？这是一个基本的 to.B 的产品设计原则，非常基础的原则。
不仅仅是因为你要坚持这样的原则，甚至从法律上说你都应该有这样的责任。因为商家在购买你的系统和你签协议的时候他买了那个功能，而你把那个功能拿走了，你就是没有很好的履约，你负有法律责任，说严重点就是这样的。
另外，我们的产品设计师如果依据「大部分商家」和「一般情况下」去规定产品设计，也是一个坏习惯。
比如，「一般情况下商家的签到活动都是持续的」，于是产品设计师就把「奖品被抢完」写成了「奖品被抢完，下次早点来」。这是个典型的坏习惯案例，「下次早点来」不只是多余的，还是错误的。如果某个商家的活动就这一次呢，你强行加了一个「下次早点来」对这个商家来说不就是个 bug 吗？还是那句话：不能因为多少商家都这么用，我们就要求所有商家这么用。
但是今天在中国几乎没有成熟的 to.B 产品经理，所以大部分的同学没有这样的习惯，来了就把功能下线了。然后每次问，每个人都要重新说一遍，不厌其烦。所以我们今天就专门把所有产品经理叫到一起说一遍。说完了我们还会把内容做成手册，大家可以理解，这就是有赞产品设计的法律，我们会把它上升到非常高的高度来看待这个问题。
有赞这家公司的所有做事方式、所有思考，以及所有出发点，都是基于我们业务。而我们的业务是基于什么？我们的战略又是基于什么？都是基于我们长期的使命和愿景，所以我必须要给大家回顾一下有赞的使命和愿景。
我们的使命是帮助每一位重视产品和服务的商家成功。「每一位」和「商家成功」是我们最重要的关键词，我们要服务的是每一位商家，然后帮助每一位商家成功，但是为了整个生态的健康，那些不重视产品和服务的商家，我们是（可以）不服务的。所以我们在产品设计原则上，在产品的一些功能的选择上，如果这个功能做完了会导致商家不重视产品和服务，我们是不会/能做的。
举个例子：消费者购买之后（可以）有一个评价，我们的购物评价是要么开启要么不开启这个功能。我们不接受商家去删购物评价，因为商家一旦可以删了消费者的差评，他就很可能不会那么重视产品和服务了。所以有赞永远不会提供删除商品评价的功能，商家要么就不开启。可以不用，如果要用就要接受有人说你不好，商家可以去跟消费者沟通，沟通完了消费者自己改，但是我们不提供让商家删坏评价的功能。所以，这就是最基本的有赞产品设计原则，我们只服务重视产品和服务的商家，我们所有的产品设计原则都是需要这样。
使命是一个很长远的事情，是这个公司活着的理由。而愿景是什么？愿景是我们认为在可见的时间内，我们可以达成的目标。我们在愿景里写了两条：
第一条，成为商家服务领域里最被信任的引领者。因为要成为「引领者」，所以我们对于每一个人的专业性要求很高；因为要成为引领者，所以我们愿意把我们的产品设计规范、产品设计原则、产品界面的东西抛到网上去。大家看到我们在有赞云上直接共享了，直接开源了我们很多很多产品设计的东西，是因为我们希望更多的同行一起探讨一起分享，大家可以随时访问 design.youzan.com。我们愿意接受别人来学，今天大家会看到甚至连一些跟在我们后面的所谓的竞争对手们都在抄我们，大家看到一些「SaaS」的操作后台跟有赞长得一模一样。没事，大家在这件事情上胸怀应该开阔一点，因为有赞要做引领者，所以我们就应该有这样宽阔的胸怀，就应该把它共享出去。这也是为什么今天这一场分享会，我们是用「爱逛直播」面向全网直播。我们欢迎所有的同行一起学习一起交流，甚至我们接受所谓的竞争对手来抄我们，因为我们要做引领者。这就是我们自己基于这样的愿景要去做的事情。
第二条，我们给这个组织还定了一个愿景，就是持续做一个 Enjoy 的组织。因为要持续 Enjoy ，所以我们在做产品设计的过程中要好玩。
我们的产品里要想到一些好玩的东西，然后这家公司的氛围也会好玩，我们给商家的活动也会好玩，这是因为我们的使命和我们的愿景。好多新同学不知道为什么有赞这家公司除了清明节什么节都过，因为我们要 Enjoy，所以是个节我们都会把它弄得好玩一点。这就是为什么我们要用购物直播的爱逛来做这次直播，因为它好玩，这是我们做这些事情的原则。
那么后面我讲到的每一条有赞的产品设计原则都是基于我们的使命和愿景去做的，没有任何一条跟它没有关系，我们所有的思考点都是基于这个出发的，越在有赞这家公司呆的时间长的人，越能理解我们的每一条原则为什么那么做？为什么那么去设计？
说完这些大的原则，我们再去看看面对的情况。刚刚我们说所有的原则都是基于我们的目标和我们面对的业务性质、业务情况、市场情况，那么我们面对的市场情况是什么样呢？我们是什么样的业务类型呢？
我们去看一下今天全世界估值最高的、最值钱的 SaaS 公司 Salesforce，这是 Salesforce 从上市之后到现在的股价，这家公司市值快 2000 亿美元了。
Salesforce 做了十年才上市，上市的前五年股价几乎没动，因为 SaaS 需要慢慢积累，然后 Salesforce 上线了 force.com，相当于有赞的有赞云，然后股价开始涨，一路在涨，中间还有个涨是因为 Salesforce 要做 AI。而且一路涨的这些年里很有意思的是，Salesforce 每一年的收入增长标准是 34%，这是全世界最牛的 SaaS 公司的成长。
我们再看和有赞微商城业务很像的 Shopify。
Shopify 做了五年上市，上市后的前三年股价几乎没什么动弹，从 2017 年开始涨，市值也快 200 亿美元了。
一个 2000 亿美元和一个 200 亿美元的 SaaS 公司，早期都是这样。所以我们一直说 SaaS 的业务是什么？SaaS 的业务是：首先要花 5 年以上时间做产品，然后再不断地迭代和优化产品。（因为有赞的使命是「帮助每一位」，所以未来可以有多大的规模对有赞来说非常重要）所以有赞的产品要先服务通用的客户，再服务垂直行业，再服务商家的个性化。在第二个 5 年时间，要同时开始培养销售能力，获取更多的客户赚取更多的钱。然后，在第三个 5 年时间，我们发现所有的 SaaS 公司都在收购公司，最近 Salesforce 花了 190 亿美元收购了一家做数据可视化的 SaaS 公司。为什么要收购其他公司呢？因为你手里有客户了，你就可以给客户卖更多的软件，那些软件不用自己做，可以买，买完以后卖给更多的客户。基本上，每一个 SaaS 公司走完了这十五年，可以躺着再走十五年，这就是 SaaS 的业务类型。
而我们今天在中国市场所面对的不仅仅是像 Salesforce 和 Shopify 这样，需要长时间去做产品，需要很长时间去做服务，做企业服务之外，我们还面对三座大山。
第一座大山，是今天中国电商平台的极端垄断。Shopify 的商家有 50% 的流量来源于谷歌，其中 30% 到了 Shopify 的店里，还有 20% 去了 Amazon 的店里。而在中国，在百度上搜购物相关的词全被淘宝投了广告，所以中国的电商几乎还没有多少来自搜索引擎的流量，因为电商平台太垄断了。所以商家需要「一个有交易功能的独立官网」的能力。在过去的很多年成长得非常慢，只有过去的两到三年才看到，中国的商家开始希望有一个自己的带交易功能的官网。这就是最近两三年大家看到的，商家在电梯和公交站牌投广告的时候，除了品牌商有一个搜索框到天猫旗舰店之外，还会有一个小程序的二维码，或者是微信公众号的二维码，然后扫完二维码打开的基本全是有赞的店。我可以很负责任地说，今天在整个微信生态内，真正重视产品和服务的品牌商家的小程序和公众号的 H5 官网，90% 以上都是用的有赞，尤其是有成交的。为什么？因为，我们有很好的风控体系，我们有售后维权体系，今天中国只有这一家公司有超过 100 人的消费者维权团队，只有这一家公司有完整的担保交易体系，只有这样我们才能保障整个生态的健康，才能保障我们的商家是重视产品和服务的。但是这座大山我们跨了很久，还在越。
第二座大山，是商家在购买有赞的时候会认为有赞能给他带来增量的生意（以为用了生意一定会马上就好起来，忽略了有赞是个工具，还需要自己用好这个工具），这是商家购买时候的动机。但是并非所有的商家都能把私域流量运营好，他购买了但他把有赞用好的能力不一定够，活跃度不够，这是我们今天在克服的问题，所以我们做了那么多的商家培训，做了那么多的运营指导。
我们是从中小企业开始服务的，最近一年多我们开始做大客户以后，每一年的大客户比例都在不断的增加，我们现在大客团队已经有几十人了，明年我们应该有上百人的大客团队，我们会签更多的大客。尤其是有赞云上线之后，我们可以帮每个客户个性化，我们的大客户会变得越来越多。但是我们的大盘毕竟是中小企业数量最多，这样我们又要越的第三座大山是什么呢？是中小企业的闭店率、死亡率比较高。你好不容易获得一个客户，他却因为自己其他的原因把生意做失败了，你做的再好没太大用，这是我们要越的三座大山。
所以，我用四个字总结，就是：路远天黑。因为路远天黑，因为 SaaS 这个行业是这样，所以我们必须把每件事做的非常认真，我们要把我们的设计原则完全的贯彻下去，很多东西我们要整齐划一的一直能走到那一天，要用非常稳定的产品质量的输出，非常稳定的用户体验质量的输出，这是为什么我们应该比所有的公司都更重视这件事情的原因。所以，这是我经常说的，这家公司产品理念就应该是「聪明人在下笨功夫」。我们知道在什么地方可以耍聪明，但是我们要用的是长期能增长的笨功夫。这是我们的使命、我们的愿景、我们面对的这个行业特点决定的。大家会看到在官网上，我们公布了这些使命、愿景，和价值观。
一家优秀的公司、一家伟大的公司是敢于把对自己的要求和它的使命、愿景、价值观公布在官网上的，因为我们公布了就是让所有的客户来监督我们。我们在官网上没有直接写「帮助每一位重视产品和服务的商家成功」，我们写了这个阶段更具象、更能让客户理解的话。
首先我们告诉全社会，有赞是一个商家服务公司，我们帮助每一位注重产品和服务的商家私有化顾客资产、通过互联网拓展更多客户，并全面提高经营效率、全面助力商家成功。为了让客户理解我们把它这样解释了，这是为什么官网上跟我们内部讲的不一样的原因。
然后我们写了我们要致力于成为商家服务领域里最被信任的引领者，并持续做一个 Enjoy 的组织。我们写我们是一个商家服务公司，写我们是从工具开始慢慢做生态，写我们的经营理念是为客户创造价值并获取价值。为什么要获取价值？因为我们要走很远，如果我们不赚钱我们活不到那一天。我们要走很远，所以我们做每一个产品都要考虑客户价值和我们自己的商业价值，我们要追求更长期的经营和追求持续的增长。所有的这些原因，都是因为我们自己的使命和愿景，以及我们面对的环境。
我今天专门再重新讲一遍，是希望每一位有赞做产品的人能理解这每一句话背后的思考和原因。我们再说自己的战略，这家公司会从一个 SaaS 公司变成一个大数据公司，变成一个人工智能公司。
我们有电商 SaaS ，除了电商 SaaS 我们还做了门店 SaaS ，然后我们在做有赞云，我们在尝试分销、尝试有赞支付、尝试有赞金融、尝试有赞广告业务，我们未来有更多的增值业务，这是我们一直在走的业务。我们今天在门店 SaaS 的业务刚刚开始，所以我们还有很远很远的路要走。
基于前面这些大背景，你会看到这家公司的所有的思考方式和思维理念，就是我们要给我们的客户提供解决方案，来帮助我们的客户在生意上成功。我们的客户成功了，我们可以通过客户的介绍获得更多数量的客户。因为我们服务了更多数量的客户，我们才能更理解客户的需求。因为我们更理解客户的需求，我们才能把解决方案做得更好；把解决方案做得更好，客户会更成功。我们一直在围绕这样的一个正向循环，在做我们所有的布局、所有的思考、所有的产品、所有的投入。
所以你会看到，这家公司只会通过解决方案帮助客户成功来获取更多的客户，不会在市场上拼命打广告，不会在市场上拼命做补贴来获取客户。为了帮助客户成功获取更多客户的目的，是为了我们更理解客户的需求，所以我们更要重视今天已经付费客户的需求。我们不是不重视还没有付费客户的需求，我们更重视付费商家的需求是因为要理解现在商家的需求，把它做好，然后再去丰富解决方案，然后再来服务更多的客户，这是我们整个的经营理念。原则上，从有赞云正式上线之后，我们不接受客户说「我的需求你们有赞满足不了」。满足不了只是时间问题。
这就是我们想要做的事情，这就是这家公司整体的思考方式和整体的设计理念。这个东西不只是产品在考虑的问题，也是公司的整个服务体系、销售体系、产品运营体系、技术体系以及包括 HR 体系、财务体系都在用这样的思维方式考虑所有的问题，这是我们整体的东西。
接下来我们再来说我们的设计原则，来得早的同学都见过这个设计原则，这是我们最早定的一版很粗的设计原则。设计原则是：说人话、产品应该是低门槛的、产品尽量让商家可以配置、产品要做到最小可用、所有的产品表达是一致性的，每一个商家尽量独立。
这就是我们第一版的设计原则，接下来我要开始说未来几年有赞的产品设计原则。
我想强调一下，刚才前面的内容是全公司视角的。
公司每一个人的视角和思考方式。所以，接下来所有内容都是「产品视角」。它不包含我们的商业体系和服务体系的视角。接下来我会提到产品研发，产品研发不是指技术一定要这么干，是产品研发那个阶段要做的东西。也会讲到产品运营，也不是说运营部门一定要这么干，是产品人在产品视角上应该怎么考虑运营问题，应该是什么样的原则。
在说产品设计原则之前，我先说基本的产品设计方法论。有三个部分。
第一部分，是产品设计的逻辑，发现问题、发现客户的需求，然后去解决问题，然后再去验证这样的问题有没有被解决，验证完问题之后去发现新的问题，再去解决问题。所以每一个产品人在做的事情，其实就是发现问题、解决问题、验证问题的整个过程。
第二部分，是产品人应该知道自己的核心能力是什么？产品人的核心能力有三个：
第 1 个是一件事情能把它想清楚。任何一件事发生了，你能不能想到它底层的原因是什么？它的根本是什么？
第 2 个叫说得明白。因为产品是整条线的那个牵头人，如果一个产品人不能把你的想法这件事情的东西说明白，就是能力很差，不存在表达能力很差的产品经理。有人说张小龙的表达能力就不好，那是你们没见过他讲产品逻辑和思考的时候表达能力有多好。「不善」演讲不代表表达能力不好，要的是把自己的思考清晰表达出来的能力，而非煽动能力。
第 3 个是要有能力快速地去试。这个试包括但不限于把产品搞上线让用户来用，也包括了可能做一个粗的原型，也包括了可能去做访谈，去做客户的沟通。
然后再说产品人的设计方法，有赞的《产品设计原则》，根据客户需求、有赞的使命和愿景、当前生态环境，以及我们所处的发展阶段拟定，它是每个有赞产品在设计过程中都要遵守的基本原则。我们还会定期对其进行优化和迭代。我们把设计方法分成了 4 个部分：产品定义、产品设计、产品研发、产品运营。
产品定义：首先是定义客户和场景，面对什么样的客户，服务什么样的场景，它的使用场景是什么；然后是价值，客户价值和商业价值；再是全局，要做全局的整体的思考。
产品设计：基于场景拆分用户的使用任务，任务再会拆分为功能和交互、内容和信息架构，最终把它呈现到界面上。
产品研发：主要指界面设计、技术研发，还应该有用户体验及可用性测试的部分。
产品运营：产品上线前后的基于产品的运营计划，产品的增长管理、市场营销，跟用户之间不断的互动过程。
这 4 个部分不断循环迭代，就是整个产品设计方法的过程。在这个过程中有赞的产品设计原则如下。
第一个，产品定义的产品原则。
第一点，用户和场景是一切的基础。
清晰的用户画像和使用场景，是整个产品的基础条件。
在有赞做产品，如果你不能说清楚这个项目你思考的核心使用场景，它的用户画像，你什么都不可能做好。所以用户画像和使用场景是最基础的东西。
第二点，找到用户价值和商业价值的结合点。
定义一个新的产品时必须找到用户价值和商业价值的结合点，同时能够满足用户价值和商业价值的需求通常是最优质的需求。
你在定义一个新的产品时必须找到用户价值和商业价值的结合点，不是所有的用户需求都要今天满足，因为如果那个用户需求跟商业价值之间不能契合上，它的优先级可能就会被降低。
我们去做一件事情，这件事情有两个轴，一个轴就是用户价值，一个轴是商业价值，我们要找到这两个轴里最契合的那个点，然后那个事情的优先级才是最高的，这就是最基本的原则。
举个例子：假如微信公众号的应用很浅，要点公众号菜单打开一个 H5 ， H5 的交互也不那么好。如果把它搞一堆组件，把它做成原生的小程序，那体验是不是更好呢？做了小程序之后，用户的记录还能够被留存下来，还能找到用过的小程序，小程序的内容还可以被很多人搜索，那是不是更好呢？这是基于用户体验来说的。但是基于用户的体验和用户的价值之后，是不是一定要做它，还要考虑对于微信的商业价值是什么，让用户的体验更有粘性？让场景能扩张？商业上可以让内容更封闭在微信的生态内？商业上打造一个新的闭环游戏生态？我们不知道这些是不是腾讯真实在考虑的决策原因，但我可以肯定每一个决策的背后都是基于用户价值和商业价值这两个点。
有赞做所有的事情，决策的背后也是基于这两个点，有很多客户提各种需求，我们应该先看客户是谁？画像是什么样子？这些需求的场景是什么？满足这些需求的价值有多大？然后再看如何在这件事情上获取商业价值，商业价值不代表一定是钱，它可能还有更多商业可期的东西。所以，任何决策的背后都应该是这样，如果做一件事只能给用户创造价值，商业价值是损失的，这件事优先级一定不高；如果一件事你只能够获取到商业价值，对用户是没有价值的，这件事情可以不做，这是有赞这家公司的基本原则。
第三点，设计可持续正向增长的产品模式。
产品模式应该是可持续的、长期的、正向增长的，随着用户的使用产品价值会越来越高，业务增长会越来越好，成本增长不断下降。并且，给老产品带来正向增长的新产品，要比只利用老产品来补给的新产品要好。
你不能设计出来一个产品，那个产品是负向增长的，要设计一个产品让用户用完之后会有更多人来用，会带动更多的正向的收获，会获得更多正向的需求，会带动更多正向的收入，会带动更多正向的客户成功。而如果你做一个产品，只能解决短期的问题，不能长期正向循环正向增长，那这就不是一个好的产品。我们做任何一个产品任何一个功能任何一个业务，它都应该是可持续的、长期的、正向增长才是最好的。
在产品设计阶段，有三个产品设计原则。
第一点，首先要是能够最小可用的全场景闭环。
商家端的产品要做成全场景、完整业务链路的闭环，因为任何一个环节的缺失和不完善都会导致商家的生意无法正常运转。
这里的关键词是「最小可用的全场景闭环」，最关键的词是我们和 to.C 场景完全不一样的，就是「全场景闭环」。to.C 的场景不是全场景闭环，你会发现做 to.C 的业务经常会出现：要做一个业务，大家开始一起头脑风暴，认为要搞 100 件事，然后这个业务搞了 10 件事就敢上线了，上线就开始运营了，然后过了几年公司都赚了钱了，业务都跑很顺了，有很多用户了，当年的 100 件事才只做了 30 件，其中有 20 件是在那 100 件事里面的，还有 10 件可能不是那 100 件事里面的，是别的地方的。这就是 to.C 产品，可以快速迭代，小步快跑。而 to.B 的产品最小的那个快速迭代也得是全场景闭环的，想做一个 to.B 的业务，然后列了 100 件事，对不起请先做够 90 件，不做 90 件不是闭环不能上线。
举个例子：我经常讲的，就是我们最早做收银的时候，第一版没有挂单功能。想一想一个收银的产品如果有 100 个功能，挂单能排到前三十吗？能排到前二十吗？不能。于是我们犯了一个错误，就是没做挂单功能就上线了。然后被客户吐槽，说你们做的什么产品？连挂单都没有。然后我们问客户挂单重要吗？客户说重要啊。这就是做 to.B，必须要做到的。
然后我们做了一个挂单只能挂 1 单，客户又反馈，「什么产品只能挂 1 单」。我们问：经常挂很多单吗？客户说「偶尔要挂很多单」。
挂单的场景就是你在超市排着队买东西，结账的时候需要再买个东西，收银员把你的东西放一边，后面的人先结账买单，把你的单选择挂单，等你把东西拿回来之后，她再把那个单取出来，扫个码再把之前的东西放进去一起买单，这叫挂单。这场景丰富吗？排的优先级高吗？不高，但是你没有，这个产品就不能上线。
这就是 to.B 要做全场景、完整场景的闭环，如果你做不到完整场景闭环你都不好意思上线。所以在这家公司，大家千万不要带着 to.C 的思维来做产品的初期那个最小可用，那个初期的最小可用上线了，商家骂一顿走了，销售白忙活了，等再去卖的时候商家说哎呀有赞我知道，很烂的，收银连挂单都没有。所以一定要把闭环做完，做 to.B 就必须要这么干，我希望大家能理解。
第二点，每个商家都应该是独立的个性化的。
本质上我们的服务是「在云上为每个客户提供了一个独立的产品」，商家都是独立的，每一个商家都有个性化配置一切的权利。我们要尽全力去实现每一个商家的独立和每一个商家的个性化，而不是规定他们一定要怎么样。
软件最早都是单机版，即使今天我们做了 SaaS ，其实也只是在云上给每一个客户提供独立的软件，所以每一个客户的商城都是独立的，每一个客户都有个性化他的商城的权利。如果成本可控的情况下，每一个功能都应该是可配置的，有的人想把购买叫「立即购买」，有的人想把购买叫「拥有它」，你就应该让他可以去定义购买按钮的文案。to.C 没有人这么想过（因为一个产品都应该是一个统一意志的），但是 to.B 就应该是这样，每一个商家都是独立的，每一个商家都有个性化的权利，你要尽全力去实现每一个商家的独立和每一个商家的个性化。
我见过很多 to.B 的产品上来就不被接受，就是因为他们不懂这样的基本理念。比如，商家说我有这个需求，然后产品经理说你应该那么用，请问谁规定商家必须要那么用？
我给大家举个例子：我给企业微信的产品经理说了好多次。我说企业微信能不能有标记未读？原因很简单，麦麦给我发的一条信息我看了，我判断需要找一个稍微空一点的时间花几分钟回复他，我标记一个未读，随后再找回来回复他。企业微信的产品经理回复我说：企业微信里有个功能叫待办事项，你应该把它加入到待办事项。我很无语。
这就是不会做 to.B 产品的人的思维方式，他希望和规定用户的行为，但是 to.B 不应该这么干。微信可以这么干，但是企业微信就不该这么干，这是基本的 to.B 的思维。
第三点，产品结构及呈现方式需要可延续可拓展。
一个被信任的商业服务产品首先应该是持续稳定的，产品的结构和呈现方式一旦确定下来，就不能轻易改版。这要求我们的设计需要面对形势变换的时候可延续，面对功能和服务增加的时候可拓展。
一个好的 to.B 产品，有赞微商城的产品后台界面结构、产品架构，从 2015 年开始就没有改过了。2015 年我们上线的时候就说我们要上线一个版本，这个版本的产品架构在未来永远不改。一个 to.B 的产品不要没事折腾改版，改版了客户就不会用了， to.C 产品要搞点花样，有点争议没关系，to.B 产品没事儿不要动它。所以很多人知道，这家公司如果你要改商家管理后台的导航必须我通过，是因为我不希望你改。
因为它需要一直可延续，那么它就要求你在设计的时候是纵向的，竖着的导航，因为它有拓展空间（竖着有滚动条，横着没有）。
还有我们的很多产品经理不理解，为什么要坚持有赞微商城的后台概况、店铺、商品、订单都长这样，商家会那么找吗？我告诉你：只有中高端商家会跑到里边二级导航找，大部分商家都会从首页点击，商家基本上不太会理解你的架构，所以我们那个产品架构是给谁用的呢？是给在座的有赞产品经理们用的。为什么？因为让你不要乱放，告诉你商品就放在商品这里，订单就放在订单这里，店铺就放在店铺这里。确保这个产品有一万个功能的时候产品结构还是稳定的，常用的东西在首页可以找到，不常用的在二级导航里面可以找到，或者直接搜索到。
所有的导航和所有的内容，都应该是商家的生意，你不要去抢他的，而我们跟商家之间的生意，放在设置里面，设置里面有一个专门的版块是我们跟商家之间的关系，剩下都是商家自己管理自己的生意，我们在给商家做的是一个工作台，整个有赞打开概况页只有内容区左上角你买的什么版本，是有赞跟他之间的生意。设置里面二级导航最下面的有赞服务，是有赞跟商家之间的关系，剩下都是商家自己的，你不要搀和进去。
举个例子：最早我们把商家交的保证金，商家在有赞这里还有多少有赞币，都放在资产里面了，这是不对的。资产是他的生意，不是你给他的东西，这是我们要做的规范。这些规则，商家懂吗？他不懂，他在乎吗？不在乎，在座的各位必须在乎，因为今天你有这么多功能，未来有一天这个产品有一万个功能的时候，你现在开始不在乎，未来就崩了。
我有一个做证券软件的朋友，去年我在南京做产品培训的时候他来找我，说白鸦我准备给我的软件改了，我的后台得改了，没法干，我们有一万个功能，太难用了，我准备改它，改得倍儿简洁。我说：别，不需要那么简洁，需要稳定，因为你有那么多功能甩不掉，是因为你要服务那么多的客户，就需要那么多的东西，所以你需要一个稳定的产品架构。
还有为什么你们会发现，我们的后台看不出来是我们的后台，因为我们没有在我们的后台放有赞 logo。很多软件公司，把左上角的 logo 放成自己公司的 logo。一个商家在他的后台天天看有赞的 logo，他为什么要看见你的 logo？他不需要看见你的 logo。我们的 logo 在哪？我们的 logo 在内容区最底下灰色放在那，那是一个版权声明而已。
这是我们做事情的原则，因为你要考虑你的用户要什么。还有比如阿里妈妈，然后你会发现阿里妈妈的后台花里胡哨的，阿里妈妈的每一个商家后台产品长的都不一样。一个商家的广告投放后台搞那么多花样干嘛？
所以我们前天又梳理到凌晨两点多，然后规定接下来我们给商家用的 SaaS 产品，所有的布局方式都必须一致，左右布局，然后一级导航、二级导航、三级导航内容区规则必须一模一样，因为任何一个商家用有赞的所有产品，习惯应该保持一样，你不要让他用 A 产品用 B 产品用 C 产品都要重新学习一遍，这是不行的。
不过，我们的广告投放后台、商家资产的后台，它是一个平台型产品（这不是商家管理自己店铺和消费者互动的后台，而是商家跟有赞之间互动的后台），虽然也要保持左右布局保持体验一致，但是我们要做品牌露出，因为要声明你在用有赞支付，这是你在有赞支付的后台，你在管理你在有赞支付的资产。
有赞以后给商家所有的后台产品都必须左右导航，不接受上下导航，只有这样商家用我们所有的产品的习惯是一致的，学习成本是的。这就是我想说的：产品结构和呈现方式需要可延续可扩展。
然后我们再说产品研发，今天主要说界面。
第一点，稳定压倒一切。
没有任何东西比 SaaS 的稳定重要，宕机了再好的产品都没用。会影响到系统稳定的事情不能做。
如果你要做一个功能，这个功能可能会影响到系统的稳定性，不要做。因为没有任何东西比 SaaS 的稳定重要，如果你宕机了，你做得再好都没用。
这也是为什么这家公司应该是全世界唯一一家把耻辱时刻会出现的东西做成吉祥物的原因，为什么霸王龙是有赞的吉祥物？为什么办公区里都是霸王龙？是我们想提醒每一个人：稳定是 SaaS 的第一要务。宕机了你什么都不是，你不能宕机，所以稳定压倒一切。
如果你做一个产品，产品呈现上也要稳定，而且这个稳定应该在方方面面持续保持。商家为什么觉得你靠谱？你怎么样成为最被信任的引领者？你怎么做到最被信任？我们今天说一个商家靠谱，那家店在那里开 10 年了口味没变过，然后你觉得他靠谱，对不对？
正是因为这样的原因，所以我不希望我们今天变明天变。所以这也是为什么我们每年两场发布会是固定的， MENLO 在五月初，年底有感恩答谢会。 MENLO 发布会所有的设计主题都一定围绕着电灯，可以每年换个电灯的创意，但是必须是围绕着电灯，这故事要持续讲下去，才会稳定被信任。MENLO 发布会的门口一定会看到爱迪生的那张图片，这就是我们要做的，一定会在整个 MENLO 发布会的地方能看到那个灯塔的图片，这就是持续做一个被信任的品牌要坚持的稳定，不止是系统稳定，有很多地方要保持「稳定」。
第二点，说人话。
说对方能听懂的话，做用户能用明白的产品。不耍专业，不设置门槛。
说人话是这家公司的基本价值观，大家都懂，我想说另外一个，拒绝设置专业门槛。今天有很多的产品经理有一个恶习，就是没事喜欢取名字，没事习惯造词。我最害怕和做广告的人打交道，广告行业有无数的词，就好像今天中国传统文化圈子一样，非得搞一些词，搞一定的门槛，这是不对的。所有的产品名字、所有的词、所有的用语都应该是人话，都不应该设置门槛，这也是为什么我们的产品取名好像特别没文化，你看我们产品名字「有赞零售」、「有赞美业」、「有赞教育」显得特别特别没文化，人家都叫「智慧XX」、「XX生意宝」，但是我们就叫这样的名字，因为我叫了这样的名字可以十年二十年不改名字，客户一看就懂它是什么。但凡要占短期的 PR 和市场营销宣传的便宜，设置那么高的门槛，商家还要去理解：哦？你那个什么生意宝是什么？哦，原来是这样的啊。
还有我不知道你们现在有没有在坚持，我想强调一下，我们的二级域名不要用英文，有赞零售就是 lingshou.youzan.com，然后每一个产品的二级域名都应该是拼音且每一个产品的二级域名都要考虑拼错的时候也可以打开（必须 linshou\lingshou\linsou\lingsou 都应该可以跳转到有赞零售的二级页面），这是取二级域名的原则。没事搞个英文，你觉得商家知道那个英文是什么意思吗？这就是要知道怎么是说人话，说人话在每一个细节里。
第三点，永远保持一致的表达方式。
每一处给用户表达的内容，都需要是一致的，不做多样化。从开始到结束，从 A 产品到 B 产品，从界面视觉到文字内容，以及标点符号。
账户就叫账户，登录就叫登录，在 A 产品是这样，在 B 产品也是这样。前天检查到凌晨两三点钟，还发现有的产品叫通用设置，有的产品叫高级设置，有的产品叫我的设置，这是不对的，要叫通用设置所有的产品都要叫通用设置，名字就需要被固定化。如果你觉得这个设置要改个名字，我们商量商量全线一起改，这是你要保持的一致的表达。还有，to.C 的产品可以花样很多，to.B 的产品不需要那么做，所以一定要有一致的表达。
然后我们再去说产品运营的部分。
第一点，不可减少，每个用户都重要。
新产品不能比老产品的功能少，不应该轻易下线产品功能，不降低服务，不让少数服从多数，每个用户的需求和习惯都是重要的。
就是我前面讲到的，to.B 的产品不接受你把一个功能下线，永远不要去减少你的东西。
第二点，先有，再，然后易用，最后好看。
有是最基础的体验，有总比没有要好。然后使用效率要很高，再然后才是要好用易用，最后才是要好看。当然，丑也是不行的。
有是最基础的体验，这个功能有没有？先要有，然后要。因为你做的是一个商家工作台，他使用效率要很高，然后才是要好用，要易用，上来就能用，上来就会用，然后才是要好看。
to.B 的产品不应该是上来搞好看，没用的。我们不需要那么好看的商家后台界面，简洁是最重要的，所以我们左右导航且颜色都是灰的，不要搞那么饱和度很高的颜色，商家后台不需要那么跳，黑白灰配一些色，让它舒服一点就好了。当然「有赞美业」可以特殊，美业本来就很时尚，但是美业也不要用大红那么跳的颜色，这是基本的。好看没有好用重要，好用没有重要，因为它是商家后台，天天都在用，他学习一下未来效率高很重要。没有有重要，先要有。
问：和易用有什么区别？
答：，指的是长期使用效率；易用通常指的是用户是否容易学习容易上手。举个例子：我们做水电煤缴费，每个月用一次，每次用都忘了上次学习的操作技能，那么应该注意「容易学习容易上手」，符合「别让我思考」的逻辑，宁愿多点一次也别让他多想。我们做商家后台「发货」和「收银」功能，每天都用，用很多次，应该注重「使用效率高」，即使要学习一下，也得保证可以操作，不要每次都要点 N 多回才能完成一个操作。
第三点，持续关注自己的「孩子」，哪怕她已经嫁人。
作为一个产品人，应该持续关注自己做过的产品，哪怕这个产品已经不归自己管了，也应该经常关注并思考她的发展和进化。
我觉得这是任何一个产品人都应该有的基本精神，你既然做了一个产品，这个产品就是你的孩子，你就应该持续关注她，哪怕这个产品你做完了，你不再负责了，转到别的部门了，别的人在负责，你都应该时不时的去看看她。因为你做出来的产品就是你的孩子，如果你的女儿嫁人了，你是不是就不联系她了？不会吧。
我很负责任地说，我做过的支付宝产品、百度的产品，到现在我偶尔还想回去看看她，看看她被改成什么样子了。我觉得我骨子里至少还有那种精神，这是一个产品人最基本的精神。
第四点，不骚扰用户，不群发。
我们的责任是帮助商家成功，不是为了让我们自己的生意更成功，我们没有权利去为了自己的商业目的不断骚扰用户。用户通常不看系统消息，群发信息起不到沟通作用。
在这家公司里，任何给用户群发信息都必须我批准，而我不会有时间审批，发邮件我看都不会看，你发微信我也不会理你的。如果你非得说不发会死，会出现大问题，那么自己想办法找我，找的第一次我理都不理你，因为你不要给商家发信息，人家用你的后台做生意，你没事给他群发什么信息呢？为什么要去骚扰他？你的责任是帮助他的生意更成功，你的责任不是为了让你的生意更成功。
还有些基本的常识，没有在我们的原则里。但是我会发现有一些新的产品经理，或者在别的没有底线的公司做过产品的人带来了一些恶习，这些基本的常识我把它重复强调一下，我不认为这是我们的特殊原则。上面十三条很多是我们的特殊原则，不是全行业通用的，剩下内容是一些做产品要有的基本常识。
第一点，没有人会看公告。
你要清楚，没有用户会看公告，你不要搞一个产品改完了公告上完了就结束了，然后商家说这怎么改了？你理直气壮地说我发过公告呀。商家不会看公告的，没有用户会看公告，不要依赖公告告诉用户你的产品变了，发生了什么变化，你要用你的产品设计能力让他感受到你发生了什么变化。当然，也别傻乎乎的在产品上专门搞个图层提醒他「我变了，看到没」，你要知道在你的新用户眼里不存在「变了」，你就是他的第一眼。
第二点，没有人会看系统消息和群发短信。
不要觉得你上线了一个改变了的东西，或者你改变了一个政策，群发一条系统公告问题就解决了，解决不了，基于用户体验他就不知道去看你发的信息。当然有的时候法律上需要，你可能还是得发，但是基于用户体验设计，你不要以为你发了他就会看，他不会看公告的，他不会看系统消息的，他也不会看你群发消息的，你的产品让用户感知到改变不要靠这些，没有用，他不看。
第三点，几乎没有人会改默认设置。
这也是最基本的素养，我经常听大家讨论产品，讨论着说，哎呀，到底通常他们更多人会用 A 呢？还是用 B 呢？默认该用 A 呢还是该用 B 呢？突然有一个人冒出来说：没关系，加个高级设置，让他可以从 A 设置到 B。这么做并不能解决问题。
几乎没有人会改默认设置的，只有高级用户会改，所以当你的一个产品模式有 N 种设置的时候，你一定要花最多精力去想默认设置该是哪一个？因为你默认是什么样他就会那么用。举个例子：我们最早为了强调有赞担保很重要、很特殊，有赞担保上线的第一版，我们用了一个绿色的底。然后就有人说我们做一个白色的底，不那么丑的，商家可以去改设置。常识告诉我们商家是不会改默认设置的，所以我们把默认设置改成白色，如果有商家觉得提醒别人有赞担保特别重要，他要改成带颜色的底，他可以去改设置，高级商家可以去改，默认新店都是白色的底。
但是我们并没有把老店铺改过来，因为商家是独立的，你默认绿色的底他用了，你就没有权利帮他改成白色，即便几万个商家里面只有 10 个商家喜欢绿色，你凭什么给他改成白色？所以我们要想办法告诉几万个商家「这个有点难看，你可以把它改成更好看的颜色」，而不是强行把它改了，你没有权利不能私自去改他的东西也是基本原则。所以默认设置非常非常重要，你一定要花最多的精力去想，这个东西有三个设置默认设置成哪一个？非常非常重要，但是这件事不是所有产品人都具备这样的素养。
第四点，习惯路径的设计，比少一次点击重要。
绝大部分做产品的人都看过那本书，中文名叫《点石成金》，英文名叫《Don’t make me think》，书中说可以多点一次，每次都不需要思考，这是基本原则。所以少点一次多点一次没那么重要，重要的是让他形成习惯路径。
举个例子：微信不需要把「朋友圈」拉到一级导航。虽然你进朋友圈的频率那么高，你每次进朋友圈点击「发现」再点进朋友圈，但是微信就是不会拿到一级导航。因为这样会给发现里面的其他频道带来很大的流量和商业价值，反正养成了用户习惯，用户体验有没有损失？有一点点，只一点点损失，可以接受。
我们有很多很多产品是一样的，比如说切换店铺，很多人习惯把重要的东西都摆到首页，跟摆地摊似的，如果有一万个功能呢？怎么摆。所以，你要设计他的使用习惯。
我们已经设计了有赞商家的两大流量入口，一个流量入口是概况页，很多重要的、常用的东西放在那，那是个工作台。还有一个入口我们已经慢慢把它养成了，就是应用市场。我们有这两个流量入口就可以让很多商家去发现一些东西，他可能不会点到订单再点到里边去，他会在首页直接点待发货订单然后进去发货。
你要设计好他的路径，这个路径的设计还包含如果你在首页上放的是广告位，那个广告位一定要更新，如果你不更新，他就把那个广告位当成一个导航用了，商家不会觉得只有左边那个我们叫导航的东西是导航，他不会那么认为的，如果广告位总不更新，运营的位置总不更新，以后就不要更新了，因为他会把那个位置当成他的导航。
再举个特别有意思的例子，早年我在百度的时候，阿里巴巴的很多用户，是在百度上随便搜索一个词，点百度右边的广告「找什么什么去阿里巴巴」，然后进阿里巴巴，他永远都那么进，其实那就是他的习惯路径，这个路径依赖性非常非常强。
所以如果你能让他养成习惯路径，就可以让他多点一下，没关系，这是最基本的常识。
最后，以上每一条原则我们希望每个人都要熟悉起来。接下来的新人，需要通过这些产品设计原则的考试才能转正。
中国有太少的企业服务公司了，所以我们这个行业能够彻底站在商家或者企业角度思考的人也不多。希望有赞的《产品设计原则》是一个开始，能够帮助到更多这个行业的产品人，因为我坚信：未来五年，中国最好的企业服务产品经理绝大部分都坐在这里。当然，我们还是非常缺产品经理和体验设计师，电商、零售、教育、美业、营销、交易、会员、数据、支付、金融、云、中台、风控、广告等方向都缺，如果遇到优秀的产品经理和体验设计师可推荐，请大家把简历直接给到麦麦。（邮箱：joinus@youzan.com）
我也坚定地认为未来三到五年，整个中国的商家都需要升级他们的经营系统，尤其是深度拥抱互联网。那么，这个行业最缺的就是需要人给他们提供足够好的产品，需要能够真正站在商家角度思考，真正有企业服务视野的产品人。所以，在座的各位一定会成为未来这个行业最值钱的人。
文章来源：优设
避免选择器嵌套：
选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。
混合宏
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
margin-bottom: 5px;
}
.btn {
@include border-radius;
}
继承 @extend
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
编译后
//CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
占位符 %
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
编译后（代码相同的会自动整合）
//CSS
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com