在使用按钮之前，你要了解什么是按钮，按钮的作用是什么，什么时候该用按钮。
1）什么是按钮
按钮用于触发一个及时操作。
2）有什么作用
2.1功能操作
比较常见的是：展开收起、加减、下拉等。这种情况下以功能性为主，按钮的形式适当弱化，重点强调功能，突出主体信息。
2.2指引用户下一步操作
这个是最常见的使用场景，每个可交互页面上都有这类按钮的出现，用来指引用户下一步该怎么做。比如：创建、保存...
2.3培养用户习惯
当用户知悉某个按钮能指向某个操作，或者获取某类信息后，长此以往用户就会形成使用习惯。如果某操作能够为用户持续带来价值，那就可以在按钮的位置让它更醒目，持续培养用户点击习惯。
二按钮有哪些类型
·主按钮：用于主动行动点，一个操作区域内只有且只能有一个主按钮；
·默认按钮：用户内有主次之分的一组行动点；
·虚线按钮：常用于【添加】操作；
·文本按钮：用于次级的行动点；
·链接按钮：用于作为外链的行动点。
三按钮的状态
1）交互状态
1.1Normal正常状态
此状态为按钮的正常显示状态，就是按钮在也页面中的常规状态。
1.2Hover悬浮状态
此状态为按钮的悬浮状态，当鼠标滑过时候的状态会给用户一个交互反馈，因为它只是一个视觉上的反馈并无实际作用，所以在移动端就把此状态去掉了。
此状态的效果并没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.3Click点击状态
此状态为按钮的鼠标/手指按钮状态，操作完此状态后，就会引发此按钮的真实作用。
同时，此状态的效果也没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.4Disable禁用状态
此状态为按钮的不可操作状态。
当页面中有未完成的任务或页面中有错误导致不可提交页面时，按钮会处于Disable状态。这个状态在产品中也是很常用的，而且这种情况下应该引导用户去做其他操作，所以此按钮在视觉上一定要弱于其他。所以要制定一个通用的展示方案。
一般方案有两种：
·无论按钮本身颜色是什么，它的背景色均为纯灰色，常用的色值有：#CCC、#999等，此种方案为常用方案；
·Disable状态为Normal状态的30%透明度，如果你想让按钮都有颜色倾向的话，可以用这种方案。
2）状态属性
·常规：常规样式的按钮，主操作按钮；
·危险按钮：删除/移动/修改权限等危险操作，一般需要二次确认；
·幽灵按钮：用于背景色比较复杂的地方，常用在首页/产品页等展示场景；
·加载：用于异步操作等待反馈的时候，可以避免多次提交。
四按钮的使用方法/禁忌
1）一个操作区有且只有一个主按钮
一个操作区有且只有一个主按钮去引导用户操作，如有有多个或没有则会影响用户的判断。尽可能少的让用户去做选择，产品的终极目标应该是“傻瓜式”产品，不要让用户有学习成本。
2）圆角值
根据产品风格，三种圆角值的设定：
2.1圆角值为0
这种适合用在比较严谨/企业级产品中，比如：阿里云；
2.2小圆角值
这种是最常用的形式，在不失严谨的同时还有一些细节，如果可以的话，尽量选这种的；
2.3超大圆角值
这种一般需要有独特的产品风格才可使用。样式不好把控全局效果，所以使用频率较低，慎重使用。
较大圆角值，此类千万不要用，不要问，问就是太丑。
3）精简文字
按钮里面的文字一定是精简的，不要展示过多文字，更不要折行。
4）文字与按钮比例要适中
文字与按钮的比例要适中，文字不要太大或太小，都会影响视觉展示。
5）弥散阴影
如果你想要用弥散阴影，阴影的颜色尽量用带按钮本身颜色倾向的，这样会让按钮更有呼吸感。需要注意的是：只有主按钮才能用阴影，其他级别的不要用，不然识别度会变差，并且会让按钮的体验变得很差。
6）主次操作按钮样式统一
主次操作按钮样式要统一，不要滥用样式。
7）按钮样式与其他组件要有区别
实际使用中，按钮样式不要与其他组件样式混用，避免让用户产生误解，做一些不必要的操作和思考。
8）不同场景适配
现在暗黑模式也是常用的场景了，所以黑/白场景下都要考虑到识别度的问题。
9）主次按钮的位置
主次按钮左右的问题，也常常出现在设计讨论会中，这次我直接放个结论吧，以后不要再为这件事吵架了。
在提交页面、弹窗中，主按钮在右；在其他常规页面上，酌情考虑。
五按钮尺寸
按钮尺寸具体用多大的，这里我总结了一个规范（仅代表个人意见）。
·高=文字行高+Xn，X=自然数，n=4
·宽=文字宽度+Xn，X=自然数，n=4
在其他地方也可以用类似的公式去做规范，比如卡片的间距，你可以设置n为基础值，在此基础上用Xn去选取合适的值。
注意：常用的字号为12px、14px，尽量不要用太大的字号在按钮上。
小结
按钮只是众多组件中的其中一个，也是最常用的组件之一。对于设计师来说，无论大小组件，我们都要精益求精的去思考，只有把每一个细节做好了，才能做好产品。日积月累的把每一个知识点掌握了，我们也就成长了。
你是否和我有同样的困惑，常常无法客观看待自己的设计，优化的时候又常常不知从哪里下手，看到别的产品设计又无法给出具体的判断依据。
今天学习一下用户体验的结构化衡量标准。不管是日常工作还是作品提升，都可以作为一个方向性的指导。
首先我们来了解一下通用设计法则之——成本效益法则
成本效益法则的概念
百科含义：成本效益法则指的是要从“投入”与“产出”的对比分析来看待“投入（成本）”的必要性、合理性，即考察成本高低的标准是产出（效益）与投入（成本）之比，该比值越大，则说明成本效益越高，相对成本越低；考察成本应不应当发生的标准是产出（效益）是否大于为此发生的成本支出，如果大于，则该项成本是有效益的，应该发生。
从设计的角度来看，成本效益法则一般是用来评估伴随着新功能或新元素出现新增加成本的最后财务回收状况。
用户价值=新体验-旧体验-切换成本
例如：把走一段路到展览馆看展当作成本，把看展的趣味程度当作效益，如果趣味程度超过走路的成本，那么这个展览设计就是优秀设计。
优秀的展览设计效益大于成本
糟糕的展览设计成本大于效益
怎么做？
若想提高体验的价值，可以从两方面入手：1.提高效益；2.降低成本。
PART1
降低认知成本
1.减少冗余信息
a.去掉累赘文案
为了避免客诉，设计常常会“被迫”在首页做冗长的文案提示，比如美团民宿的“今天入住、明天离店”的文字提示，彷佛在跟着文案做“今天入住+明天离店=1晚”的数学题，过于平铺直述反而增加了用户思考。而且过于具体的文案在小字显示的效果下阅读性也不够好，反而增加了用户阅读文案的认知负担。
同样是1晚，Airbnb的文案表达简洁明了，日期间的横杠足以理解是从哪天到哪天的含义。
如果说Airbnb是国外产品，调性不同，那么像马蜂窝的解决方案也是层次与阅读都更加清晰易懂的方式。
b.去掉多余选项
招行银行的首页功能并不是我会经常要用的功能，但是却无法像支付宝那样自定义编辑首页的功能icon，去掉不需要的功能入口。
2.内容好理解，减少思考，减少记忆
a.文案与图片匹配度
文案与图片的契合度高更够帮助用户更有效的理解内容，AppStore的推荐卡片在这方面表现的非常优秀。
b.结构框架好理解——格式塔原理
接近原则中指明物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。京喜首页功能模块区分的相对距离差别不够大，加上商品图的视觉干扰，更加影响信息层次的区分。而淘宝的模块信息分组则清晰明确，信息辨识度高，视觉干扰少，能够有效减少用户区分信息的思考。
c.记忆的局限，降低记忆负担
人们工作记忆的容量有限，大约是4±1。由于短期记忆的局限，设计师应该确保用户可以简单地识别信息，但不能从之前的对话中回想信息。
比如我们经常会发现考试中的选择题比简答题更容易，这是因为选择题要求我们去识别答案，而不是在记忆里回想答案。
再例如搜索，当搜索结果出现时，我们的注意力自然地从输入的词汇转移到了结果上，因此好的设计应该在搜索结果页展示搜索词。把点击过的结果变色也是帮助用户记忆已点过的内容。
知乎的搜索结果不记忆已阅览的内容，而谷歌搜索则帮助用户记忆已阅览过的内容。
3.优先级：信息层级
a.用户优先级、b.功能优先级、c.视觉优先级
d.交互优先级
常见的是弹窗按钮，需要区分信息优先级，不让用户产生选择困扰。
4.文字、图标的识别性、易读性
美团Tabicon简洁明了，图形与含义符合，文案简洁清晰。而悦会则显得复杂难以识别，不仅文案复杂，易读性比较差，图标也没有准确表达其寓意。
5.一致性
a.内部的一致性、b.交互逻辑的一致性、c.元素的一致性、d.语词的一致性、e.信息架构的一致性
f.视觉的一致性
Airbnb的版式从banner到下面的标题分类，对齐方式与字体对比都保持一致风格，图标和插图都是线与线面的风格。对比之下，携程的设计语言则相对不够完整，不仅icon风格不太一致（面和线都有），banner运营位的版式也是比较随意的（文案没有统一的排版规范）。
6.提示、引导、反馈
7.符合用户习惯
当然，假如最开始用的是Mac电脑，后面再使用Windows电脑，也会感到Windows不好用，这是先入为主的观念，一旦产生习惯，改变习惯将产生一定的学习成本。
PART2
今日头条通过懒加载的方式，将文字内容优先显示，并且将图片位用默认底色先显示出来，用户可以在图片加载出来之前先看文字内容，大大避免了等待的焦虑。我们应该避免像移动营业厅这样的空白加载页面。
2.增加等待过程中的价值
PART3
降低操作成本
1.先价值吸引后行动（先浏览后登陆）
2.预测用户行为
滴滴出行根据用户经常使用的地点预测用户要去的地方，一键选择地址更便捷。
3.主动替用户选择
美团外卖支付时主动帮用户选择极速支付选项，一方面让用户更便捷，另一方面也能增加银行卡账户的绑定，赋能业务。
4.简化关键节点
淘宝确认订单自动选择优惠券，简化了关键流程，降低操作成本，提高下单转化。现在很多购物平台也都实现了这一点。
5.减少手动输入操作
以闪送为例，自动读取复制信息——一键粘贴——智能识别——自动填充信息，减少了用户的手动输入操作，大大提高了体验的质量与效率。
降低成本的误区
是不是成本越低，这项设计就是越优秀的设计呢？在成本效益法则下，绝不是成本越低，效益就越高，设计决策需要把互动产生的效益考虑在内。
如果一个交互的复杂度能够提高交互产生的效益，那么就应该适当的增加交互的复杂度。
比如我们常用到的密保键盘，打乱的数字顺序能够防止偷窥者从手势位置窃取密码，因此这项交互成本的提高相应的能够大大了我们资产账户的安全效益。
总结
降低认知成本包括：减少冗余信息；内容好理解，减少思考，减少记忆；优先级：信息层级；文字、图标识别性，可读性，易读性；一致性；提示、引导、反馈；符合用户习惯。
降低操作成本包括：先价值吸引后行动；预测用户行为；主动替用户选择；简化关键节点；减少手动输入操作。
同时我们也要注意降低成本的误区，并不是成本越低越好，如果提高成本可以换来更高的效益，也要具体情况具体对待。
每年年初的CES消费电子展，是一个非常适合了解前沿技术，了解消费和产品趋势，甚至在这些量产、准量产以及概念设计产品当中，窥见属于未来的设计趋势。
每年的CES都是一个特别适合展示新趋势的地方。虽然很多厂商会倾向于在CES上发布新品，但是相比于这些为数不多的新品和发布会，CES上更加值得一看的是那些正在研发、小范围内投产并且你即将会看到的新技术和有趣的东西，它们所指向的都是消费级的产品，也贴合我们一直在说的「趋势」。
在今年的CES大会上，试图改变的Intel发布了针对高性能轻薄笔记本电脑的芯片，H系列：
H系列采用TigerLake架构，全系列搭载高性能的IrisXe核显，它的性能足以在1080p分辨率下流畅运行《古墓丽影》这个级别的游戏（实际上M1的发布会上也同样使用了这款游戏作为性能测试）。
英特尔的11代桌面端芯片也在性能上又不小提升，采用了全新的RocketLake-S架构，不过最值得期待的是下半年才会公布细节的12代混合架构CPU，AlderLake。
老对手AMD在CES2021上则发布了全新的5000系列移动端处理器，其中标压的5000H系列和低压的5000U系列，都用自身的配置和性能解释了“便宜大碗”的概念。
最高可选8核16线程的配置，主频可飙升至4.4GHz，充满电之后日常使用可以达到17.5小时，电影播放可以长达21小时的电影。
而同为御三家之一的Nvidia则带来了桌面级的RTX3060显卡以及移动端的RTX3080/RTX3070/RTX3060。
当然，无论是桌面端的显卡还是移动端显卡的性能都有着不俗的表现，具体大家可以去官网看看这里就不说了……（一个很重要的原因是由于比特币的疯狂涨幅，导致挖矿需求暴涨以至于这波显卡价格出现了极其疯狂的增长，一卡难求，鬼知道啥时候能恢复正常）
总而言之，移动端芯片（主要是针对笔记本电脑）在性能提升的同时还控制好续航，无论是CPU本身的算力还是显卡的性能，都有着相当明显的提升。这对于设计和创意从业者而言，意味着有着更加轻薄地电脑和平板可供选择，并且性能足以支撑从平面到3D渲染、视频剪辑乃至于大型游戏，而且很大程度上，性价比有「AMDYes」，高性能可以上IntelH系列+Nvidia，而习惯使用macOS地用户应该也会在未来几个月内等到新的M系列芯片和MacbookPro16和MacbookPro14，当然这和CES2021就没啥关系了。
目前这些新芯片本身的强大性能和优良的续航，可能需要到后续的电脑和笔记本上才有所体现，好在CES2021本身还发布了不少性能优秀、设计过硬的电脑类产品。
笔记本电脑在历年CES大会上都是重要的组成部分。在这些笔电类产品当中，除了一部分迭代更新的量产新款之外，还会有不少基于特定的需求，在设计和功能上高度特化的产品出现。
比如HP的Envy14笔记本就很典型地属于前者，11代英特尔CPU和NvidiaGeForceGTX系列的显卡，传统的造型和更加精致的工业设计，这种不过不失的产品其实是各大厂商在2021年铺货时的中坚力量。
而微软的SurfacePro7+也只能算得上是小幅更新，多个配置可选，没有太多好说的。
而出自联想的ThinkBookPlusGen2i笔记本在继续探索了双屏笔记本的另外一种可能性，A面的超大尺寸电子墨水屏搭配手写笔，简直就是给手绘和笔记爱好者量身定制的创作空间。掀开之后又是一台传统的超极本，13.9mm的厚度和1.3KG的重量也非常符合携带通勤的标准。
相比之下，同一谱系的ThinkPadX1TitaniumYoga的翻转设计则显得更加传统，不过在性能和影音上，DolbyVisionHDR和DolbyAtmos扬声器的支持让它在影音娱乐上更加突出，少了电子墨水屏，整体厚度也缩减到了11mm。
不过，更有意思的是华硕ZenBookProDuo15OLED笔记本电脑，原本Duo系列的双屏设计已经相当独特了，这次的新款不仅将配置进一步推升到了i9cpu+NVIDIAGeForceRTX307的级别，还给副屏增加了一个自然的9.5度倾斜，防炫光的同时还更加贴合人体工程学。这可能不一定符合每个人的审美，但是可能正好是某些天天肝视频跑渲染的设计师同学正好需要的东西。
另外一边，游戏本也基本上是在堆配置，AlienwareM15R4和M17R4老老实实地把显卡推到了NVIDIAGeForceRTX3080，加上360hz超高频率的显示屏，内存堆到32GB，存储支持4TBPCIe，性能够怪兽，但是别的就没啥好说的。
而另外一边的Razer推出的RazerBladePro172021和RazerBlade152021这两款笔记本，本质上和外星人家的差不太多，配置有多高堆多高，机身工艺搞好点，RGB信仰灯炫起来……
当然这并不重要，这次CES2021上，Razer真正的杀手锏是这俩笔记本的配件，RazerProjectBrooklyn概念游戏椅：
只需按一下按钮，这款游戏椅就可以从背面展开60英寸的OLED显示屏，真正沉浸式的游戏体验，带有4D模块化功能的扶手以及折叠可调的桌子，连整个框架都是带有高保真触觉模块的，体验有多好，就要看你和游戏厂商的想象力了。
对于游戏本本体而言，在配置和外观上的设计很大概率只能靠添油战术，互相之间见招拆招，真正能够打出新意，玩儿出花样的，基本都是在外设和配件上。
智能手机毫无疑问是大家最关心的事情。支持5G频段，AI驱动的后置多镜头模组，前置挖孔/刘海镜头，6英寸屏幕，这几乎是当下绝大多数智能手机的标准配置，也是贴合大众需求的最佳实践。CES2021发布的三星GalaxyS21Ultra5G就是这种典型，配置到位无懈可击，更重要的是，后置镜头模组的工业设计相当具有识别度，边角凌厉又富有美感。
不过大家都很清楚未来趋势肯定不会止步于此，柔性屏幕给人带来的想象力太过丰富，包括苹果在内的一线厂商几乎都在这个基础上进行探索。
三星的GalaxyFold系列已经发不到第二代，Moto的新生Razr也发布了迭代之后的版本，苹果早早申请了环绕式柔性屏幕的设计专利:
不过，最有意思的还是卷轴屏幕。在CES2021之前，OPPO就公布过卷轴屏手机的概念设计：
在今年CES上，LG发布的LGRollable则可能是最早量产的卷轴屏的智能手机（预计在今年年内发布）：
虽然没有LG这么快，TCL也同样带来了自己的卷轴屏智能手机，不过和LG的横向拉伸不同，TCL的屏幕选择了纵向拉伸：
可以确定的是，柔性屏幕设备会逐渐增加，而目前技术的快速迭代意味着在未来2年内会有一大批类似的设备出现。无论是折叠、翻转、卷轴还是翻盖式双屏，都意味着UI界面的动态延展，而不同的结构设计带来的是交互方式的百花齐放，这对于UI和交互设计而言，都是全新的挑战，以及新的机遇。
不要忽视了这种硬件设计之下的复杂度，即使是最简单的双屏折叠，对于UI交互和开发而言，都是巨大的挑战，不信可以先看看微软的双屏设计规范：
我们总在期待NextBigThing，企盼下一次数字革命。喊了这么多年的物联网现在还没有明显起来的迹象，而VR也因为头戴设备的大型化和沉浸式场景的泛用性较差的原因，反倒是AR和MR依托智能手机、浴霸式镜头组和APP有一定起色，但是也没有到革命性改变的程度，只能算是一个小趋势。
物联网和智能家居从提出来到最终落地为消费级产品，经历了十几年漫长的过程。在今年的CES展上所展示的很多智能家居类的产品，确确实实比以往更加「智能」也更加富有想象力。除了各大厂商原本在工业设计和基础技术上的积淀，这些产品大多借助了机器学习技术来提升「智能」程度，并且借助语音交互来保持操控的便捷性。
智能家居的花样就多了。
三星推出的BotCare智能机器人看起来像是一个更具未来感的的R2D2，不仅能够识别你的语音命令，而且能够借助成熟的AI技术识别你的行为，它会学习和了解你的日程安排，能够逐渐了解你的习惯，并且在日常的生活中提供帮助。
而更加进阶的是BotHandy智能家居机器人功能就更多一些了，它不仅可以在室内到处溜达，而且能够能够识别材质和物品，它自带的机械臂能够帮你收拾房间，收拾厨房物品等等等等。
CareOSThemis的智能镜子也借助传感器和AI实现了诸多传统镜子做不到的事情。通过内置的IR温度传感器、UV皮肤分析灯以及相机，CareOSThemis智能镜子能够对你的卫生状况、皮肤状况乃至于心理健康状态进行分析，并且提供切实可行的建议。
传统家居和传感器、数字硬件的结合，将家居设备的安全性、可用性和完备性全方位地进行了提升。比如LOCKLYDuo智能锁就加入了双重锁定技术，可以更快打开又保证了安全性：
而AmpereShower这个蓝牙淋浴扬声器，不仅可以让你在淋浴时享受360度环绕立体声，想要播放什么内容完全可以用语音控制，而且考虑到它特殊的使用场合，它干脆借助淋浴喷头的水流来进行充电：
而便携式投影仪也是诸多大厂的下一个发力点，在保持高流明、智能可控的特性的同时，进一步缩小提及，提升音响效果，就像华硕的ZenBeamLatte的便携投影仪一样：
传统家电设备则在智能化和场景化的探索之下，呈现更加灵活的新玩法。三星定制的4门Flex冰箱可以针对不同的食品进行定制化的管理，而传统固定的冷冻/冷藏式的分区也借用智能化的管理打破，如果你需要更多的冷藏空间，只需要通过设置就能够进行转换和调整。
当然，智能电视当然是CES大会上绕不过去的门类，只是多数厂商的产品都是在自然硬件和性能迭代上「更高、更快、更强」。
而其中真正称得上有趣的，还是LG的升降式透明电视：
透明屏幕在不同光照条件下的泛用性，应该还是存疑的。毕竟去年8月小米发布透明电视之后，已经有过不少质疑的声音了。不过这些小众产品的不断迭代和推出才有可能让透明屏幕技术上的不断前进，更贴近科幻电影中使用场景的小型透明智能设备的普及才有希望。届时，UI设计应该又有新的设计需求了吧？
CES2021的这些新型的智能家居类设备上，可以更进一步印证之前大家对于趋势的预测：
可穿戴设备的热度也一直在逐渐提升。
国外疫情的持续也促使很多厂商开始考虑如何制作更加贴合健康需求的可穿戴设备。
另外，为了确保整体的安全性还附带了专用的紫外线消毒盒：
相比于雷蛇的科幻感，AirPopActive+智能口罩就显得更加运动。
AirPopActive+则是一个专业的运动口罩，借助内置传感器，这款口罩能够跟踪空气质量以及佩戴者的呼吸状况，并且通过蓝牙和手机同步，方便查看。同时，在滤芯即将耗尽时，也会提醒用户。这款口罩从外观到功能都是明显面向运动爱好者的。
BioButton这款设备则是一款新冠病毒感应器，将它贴在颈部，它会跟踪你的呼吸、心率、睡眠和血氧状况等生命体征，并且识别你是否出现了感染新冠病毒的症状，可以说是针对性极强了。不过，对于绝大多数隔离在家的用户，锻炼是更重要的事情。
NordicTrackVault顶级家庭健身房就是一个这样的产品，超大屏幕结合iFit的互动健身体系，你可以清晰直观地对自身的动作进行审视和视觉反馈，进一步进行矫正，同时确保在家也可以获得健身教练1对1的指导。
智能手表是可穿戴设备这一领域是一个大类。目前绝大多数的智能手表在各种传感器功能上都做得不错，差异主要是在体验的细节优化、工业设计、品质以及品牌溢价上了。
此外，飞利浦发布的Sonicare9900Prestige智能牙刷也相当亮眼。通过传感器，它能够识别不同位置的压力，监控清洁位置和刷牙的运动轨迹，并且提供AI实时指导和个性化刷牙动作推荐，同样是通过蓝牙连接手机来实现信息的传达。
在可穿戴设备当中，涉及到VR/AR的产品需要单独说一下。
VR和AR你应该比较了解了，虚拟现实和增强现实，那么MR和XR呢？
MR是混合现实，通俗的说它是介乎VR和AR之间，虚拟合成的「图像」和真实的世界相互融合，还可以和现实物品进行一定程度的互动。而XR是扩展现实（ExtenedReality）的缩写，它其实是以上VR、AR、MR的一个总称，或者说VR/AR/MR是XR的子集，XR所涵盖的领域和范畴比以上几个都要宽泛。
比如虚拟触感就是属于XR的。在今年的CES大会上，SensegloveNova和bHaptics推出的紧身衣套装，所带来的体验就是虚拟世界在触感上的投射介质。
XenomaEMStyle套装也是一个针对皮肤和肌肉的新玩意，这款可穿戴设备当中包含24个电极，胸部4个，腹部4个，每个手臂2个，臀部2个，每条腿4个，它们可以为全身主要的肌肉群提供刺激，并且可以让健身教练在安全距离之外，通过电极刺激的方式提供指导，也算是某种意义上的「虚拟触觉」。
接下来说说我们更熟悉的智能眼镜。
Vuzix也在CES上发布了下一代智能眼镜，其中集成了MicroLED显示引擎，具有完全透明的高级波导光学器件。Vuzix使用一对微小的高效MicroLED投影仪提供动力，从而可以为用户提供高密度像素阵列，在双眼中投射超级清晰的视觉内容。
上面的智能眼镜还算得上是科技产品，而MojoVisionLenAR隐形眼镜就算得上科幻级别的产品了。从尺寸上来说，普通眼镜和隐性眼镜就是数量级上的差别，Mojo的这款智能隐形眼镜使用微电子技术，内置了微型显示屏，可以共享重要信息，用MojoVision来使用增强现实，不仅无缝，而且无形。
可以说，如今的虚拟现实技术已经走到了一个全新的阶段了：
新事物正在以无与伦比的速度进化。芯片性能和基础的技术为消费级的硬件提供了最扎实的工业基础，繁盛而多样的企业开始有意识地深耕细分领域的产品，其中留给设计师的空间其实非常大。
各式各样的笔记本类产品，已经针对不同需求的设计师进行了细分优化，不同类型的设计师应该都会找到针对自身领域需求的硬件设备，多屏幕、多输入方式的笔电和周边外设正在快速地丰富起来。
优惠券是我们电商中最常见的活跃用户的一种方式，简单的设计就能带来巨大的客流量。虽然小小的一张优惠券并不会占用太多的版面，也不会浪费太多的色彩去装饰，但想要知道优惠券的种类、特点，还需要我们认真剖析，仔细揣摩。
1.提升用户活跃度：
人们总是对“降价”、“打折”这样的字眼充满了兴趣，用户也习惯于在了解到商品的价格及优惠力度后再决定购买，所以有优惠的商品才更具有吸引力。
2.增加产品曝光量：
用户一券在手，总是让人忍不住翻看可以使用的商品，这无形中增加了平台商品的曝光量。同时好的优惠券会在用户的口口相传中得到推广，这对平台、商家和产品来说，都是一个很好的展现自己口碑的机会。
3.刺激用户的潜在购买需求：
当用户的购买行为背后没有充分的购买动机，交易就会轻易的受到其他因素的影响而中断。优惠券的出现满足了用户“赚到”的心理，用户就愿意为潜在的购物需求买单。
4.提升用户的购买力：
用户的购买力和收入水平成正比，和商品价格呈反比，当价格受到优惠时，用户的购买力也可以得到相应改善。
体验券
代金券（又称现金券）
一般使用门槛较低，不会有金额、数量等方面的要求，可以直接使用，若购买商品不够券面金额，通常情况下是不退还差额的，如：新人大礼包、无门槛红包和员工福利等。
满减券
通常会有订购数量、订单总价、产品种类等方面的要求，满足条件的订单才可享受满减，如：生活缴费商品满￥100减￥2优惠券。
打折券
打折券是直接对商品进行打折，一般商品较贵，购买的用户较少，或者用户订购量大会采用此类型优惠券，如：8.8折优惠券等。
单品券为购买单一商品时使用的优惠券；
系列产品券为购买某种特定系列产品时所使用的优惠券，用户只需要购买指定系列的产品就可以享用这张优惠券，如：购买无线宝WiFi5系列产品优惠券等；
品类券为购买某一类商品时使用的优惠券，如：购买清洁类、医药类、生鲜类等优惠券；
品牌券为购买某一品牌商品时使用的优惠券，如：购买华为、京东云等品牌产品所用的优惠券。
平台优惠券是由平台直接发放给用户的优惠券，针对的目标群体范围较广，如：购物津贴、百亿补贴等；
政企消费券成本由政府、企业和平台共同承担，意在提升某些地区消费者的消费能力和消费水平，如：北京消费券等。
下面是“京东智联云官网活动”拉新引流的新人礼包，我们可以看到“新人千元大礼包”字样，新用户在完成注册任务之后就可以领取相应优惠券。
通常情况下，我们使用“代金券”进行拉新。代金券的价值相当于同等金额的现金，购物时直接使用，一般不会有过于苛刻的门槛，用户使用起来方便，所以对新用户的吸引力极大。在设计时我们需要注意以下几点：
设计目标–吸引新用户；刺激用户的购买需求；使其真正成为我们的用户。
门槛值设定–门槛值设置较小的优惠券才具有较强的吸引力。对于新用户来说，用户不需要购买太多商品，也不用局限于某个商品的使用。对于设计师而言，需要考虑门槛值和商品成本之间的关系。
面额设定–优惠券面额的设定可以很好的反应我们吸引消费者所付出的成本，控制获客成本也是拉新过程中的重要环节，设计师应该清楚了解用户喜好，剖析哪种互动方式可以在降低成本的同时扩大优惠券和商品的吸引力。
当然，每一种优惠券都有“促活”的属性，不管是优惠还是打折无不吸引着消费者的注意。例如：每年的“京东618”和“京东智联云11.11大促（下图）”都是采用了各种优惠券来吸引用户完成交易的。
小结：
其实优惠券的作用还有很多，它还可以解决用户存留等问题。由于篇幅有限这里就不过多展开，期待小伙伴们一起思考和挖掘。
收益预估：设计前预先判断本次活动的成交量，计算每单的收益大小以及总收益。
使用范围：根据活动的目的，确定使用范围（“平台”、“品类”、“品牌”、“店铺”等）。
使用门槛：每种优惠券都有相应的使用门槛，这是保证商家不会亏损的重要环节。
领取上限：设置领取上限，一方面根据商品库存的多少，尽可能照顾到更多有需要的用户；另一方面也可以表明优惠并不是那么轻易就会得到，增加优惠券的吸引力。
使用有效期：如果优惠券的使用期过长或没有有效期，那就和降价没有什么区别了。
通常活动结束后设计师要对本次设计进行复查，通过调研判断优惠券对用户的吸引力。一方面从定量的维度考量，我们要对用户的浏览量、领取量、使用率、实际下单量和用户参与程度进行观测；另一方面从定性的维度分析用户的实际感受，用户在体验完成后是否愿意再次光临或推荐给亲友，也是我们需要考查的方面。
品牌升级设计不是件小事，也不像看到的那样光鲜亮丽。这个过程很复杂，充满了很多人的意见和情感。基于我个人对品牌的认知，品牌设计的整个推导过程是“文化←专业→业务”，也就是说核心的品牌资产去承载文化和赋能业务。害，虚头巴脑的，还是上张图来捋一下思路：
确定虚的部分后，需要多维度分析需求，并且了解用户对品牌的印象（前提是要确定你的用户是谁），但首当其冲的是确定一个方法，那么情绪版是一个相对来说还算靠谱的推导方式：
哦，对了，做这些之前最好确定一个SOP模版，帮助你可以快速的完成适配工作：
另外还要强调一点（这个点我在面试的时候也会经常问候选人），因为整个项目涉及的人很多，耗费的资源也巨大，所以为了确保无缝执行，协调工作要怎么进行呢？这就需要机制和规则的设定来辅助你管理/协调每一个人的工作了（不要忽视这块，并不是只有界面设计是设计，思维的设计同样是设计哈）：
对了，除了运用在品牌视觉之外，产品中也需要适当的被highlight一下，以马蜂窝为例：
比如可口可乐的瓶身，宝马的前脸，ta通常不那么起眼，甚至在你脑海里都习以为常，觉着就应该这样，丝毫提不出什么质疑；
著名搜索引擎百度定义超级符号为：他们本身具有一定意义，要求人们按照其指导进行活动。（这个解释感觉冷飕飕的…）我试图用自己话来说：就是品牌本身传承下来或者创造出来最具特色最能代表的图腾；
品牌设计中需要符合和logo搭配使用，因为在一定场景下，真正能让用户感知并认可的可能是超级符号，而非品牌的LOGO；
当然，超级符号可以依附于logo存在，同样也可以作为个体单独存在，两者并没有绝对意义上的划分：
1.超级符号的形式
最著名的两者合二为一的就是天猫啦，从天猫logo的诞生到现在，质疑一直没有停止过，硕大的猫头看起来傻里傻气但恰恰也是这个原因，被记住了概率大大增加；如今我们能看得到每年的双十一都会有这只猫存在：
另外如果用一个通用符号作为超级符号的话，其实是比较吃亏的，用户虽然可以比较容易的描述出比如一个圆一个矩形之类的，但是却不容易让用户记住你，记住你跟其他产品的区别；比如美团外卖的品牌升级，一定程度上是想从通用符号过渡到专属符号。
符号和logo分离的例子也有很多，比如滴滴的圆：
咱也不知道为啥，ta就用了个通用符号，不过属实还挺好看～
2.浅谈超级符号的设计
设计一个符号一定要把产品的特色最大化，试想一下漫画的画法，其中最重要的一点就是特点的不断夸张夸张再夸张，不断让人记住ta最具特色的那一面：
初期的超级符号绝对不是简单的设计一个图形就完了，从最基本的图形到颜色、字体、元素、板式再到整个视觉风格体系，再到融入到产品UI或者线下媒介的传播的每一个触点去传达品牌；当然超级符号也会有进化，比如最终进化到可口可乐最后会进化成一个颜色-红色；再比如已经销声匿迹的ofo，你永远也不会说：“我要骑一辆ofo”，取而代之的是“我要骑一辆小黄车”，所以你看符号进化到最顶级的时候未必需要实体（咦，这句话又让我想到了奥卡姆剃刀）。
综上，做出具有可被记忆的特殊性符号，基本上就成功了80%了。再经过长期不断的迭代优化，最终进化为无形的品牌资产就基本上可以宣告品牌的成功了～
上点小福利
尽管我一直坚持输出设计观点，但我发现好多朋友练就了“一看就会，一用就废”的日常技能，所以还是准备了一些经过我严选的模版和素材送给铁子们，希望铁子们在学会理论的同时也能手活跟上，眼高手低不可取，眼手双高真牛B！
当下，品牌设计的价值也不断的被提高，一方面是在流量尤为重要的今天，品牌的第一个作用就是导入流量；另一方面是因为产品的溢价主要是由商业包装决定的，包装最终成就一个品牌，而品牌就是终极的包装。设计师作为其中的重要参与者，一定要明白品牌资产的沉淀和品牌是其实是质的区别，别试图去用形而上的手段去解释本质性的问题，试着把产品和品牌紧密结合，毕竟品牌的最大输出口就是产品本身。
大家好，我是Clippp。看到好的图标我们会习惯性地截图保存，但随着收集的图标越来越多，会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题！
对图标进行分类时，普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标，样式很简单，但可以划分到多个类别中。
利用这种结构层级，可以明确定义图标类别。
图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷，但把它缩小到16px，这些酷炫的效果都无法呈现出来。
利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中，所以在小图标分类中没有展示。
大图标利用尺寸上的优势能展示更多内容，分为多种组成形式。
1.2带有背景色的面性图标
1.2渐变线性图标
1.3等距线性图标
1.4手绘线性图标
1.5断线图标
1.6双色线性图标
2.2带有背景色的线面结合图标
2.3错位线面结合图标
2.4色块图标
2.4单色线面结合图标
3.2带有容器的扁平化图标
3.3等距图标
3.4半阴影扁平图标
3.5长阴影扁平图标
希望大家能对图标的分类及设计有更全面深入的认识，从而构建一套完整的图标思维体系。
网格系统的基础概念与基础知识
开始讲网格系统了，网格系统是针对于平面的，而不是网页设计和移动端的设计。网格系统、栅格系统、网格基线和网格基数，应用层面完全不同，大家跟着学慢慢就会理解它们之间的差异。平面中的网格系统非常的庞大，网格基础这块就分很多小块，如：网格的基础-知识（认识网格）、网格的元素、网格的类型、网格的应用等等。
这些知识掌握后就要去理解网格都应用在哪里，如：宣传册和小册子，插画书，杂志和报纸，包装，海报等等...理解了网格系统都会使用在哪里后，就要去理解网格系统的具体结构，又分为两类：结构网格和解构网格。它们俩的知识又细分为：模块网格、比例网格、复合网格、分层网格、栏式网格等等...
目录
1.网格的概念
2.网格的构成
3.网格的度量
4.表现形式
5.元素的比例
6.元素的层级
7.网状与点状网格
这里我引用蒂莫西·萨马拉和德里克·博德萨尔这两位大师对网格系统的理解，来让大家理解网格的基础-概念。蒂莫西·萨马拉认为-“在文字问题全部解决之后，网格真正的成功取决于设计师是否超越网格结构所蕴涵的整体性，然后用它来创造一部分动态的视觉表述，这些部分可以让读者保持对整本书中每一页的兴趣”。德里克·博德萨尔认为-“在版式设计中，网格是最容易引起误解和误用的元素。网格只有在你想用的素材上时才会有用”。
另外在了解一下罗伯特·劳森伯格先生对网格的理解-网格是用来给读者组织空间和信息的，它给整部作品提供了规划。网格给信息提供了围栏，同时也是规定和维持秩序的一种方法。虽然网格已经使用了许多个世纪，但是很多图表设计师还是把网格与瑞士人联系在一起。在20世纪40年代的时候，人们热切希望维持秩序，因而创造了种可以提供视觉信息并且更加系统化的方法。几十年后，网格设计被认为既单调又乏味。而如今，网络设计再次被看作是基础性的工具，无论是行业新手还是具备几十年经验的老手都依赖此种工具。
网格构成的概念：网格包括一套独特的对齐关系的原则，用于指导如何在一个版面中分配各个组成部分。版面中包含若干个不同的部分和构成，每个部分都有着不同的用途和功能。设计师也可以根据自身喜好，将某些部分从整体结构中去掉，这一切也取决于设计师如何理解材料、市场和读者的需求。网格的构成-大体结构：版面、版心、外缘留白/外页边距、订口、栏目、栏间空白、底部留白/底页边距。
网格的构成-大体结构：
-版面：版面是页面中所有构成部分的总和；
-版心：版心是页面中主要内容的所在区域；
-外缘留白/外页边距：外缘留白或外页边距有助于讲文本框纳入整体的设计中；
-订口：订口是装订时所需要的留白，通常存在于两个页面之间的折叠部分；
-栏间空白：两个栏目之间的分隔区域；
-底部留白/底页边距：页面底部的留白区域；
网格的构成-局部结构：
-空白：空白可以提供如注释和说明文字等二级信息。
-基线：基线是网格的基本结构，用来引导文本和其他元素在设计中的布局。
-栏目：栏目是有组织的放置正文的地方，并让读者容易阅读；
-模块：模块是给网格内图像元素留出的空间，相连接的网格可以建议建立不同的行列模块。
-标志：标志能标明出现在同一位置的素材的方位，包括页数、页首标题和页脚（标头、页脚），以及图标；
在网格系统的中有两种度量：绝对度量和相对度量。网格系统本身有自己的绝对度量单位，例如英寸（inch）或磅（Pt，印刷字体大小的一种单位，1pt等于0.01384英寸，约1/72英寸）。在网格内部中很多元素可能会使用相对度量，来表示它们的大小和其他元素之间的关系。
3.1网格的度量-文字
文字经常以绝对单位磅来计算的。对于确定的长度，绝对单位能提供一个固定值，这便意味着设计师能有效的控制文字和基线之间的关系。文字和基线通常使用磅值（pt）来进行计算的，用毫米算也行，但要注意的是将文字和基线放在同一个度量单位下进行计算，这样会好做计算。
3.2网格的度量-图像
数码图像被用于设计时，通常是按照百分比缩小的，或者可以在程序中重设尺寸以适应特殊的空间要求。尽管如此，为了保证良好的印刷质量，印刷时图像的分辨率至少要保持在300dpi。而在屏幕上显示，其分辨率则至少要保持72dpi。
网格系统与当代艺术运动有着紧密的关联，例如立体主义、构成主义和其他一些偏爱严谨结构的当代艺术的分支，都与网格系统有些紧密的联系。为了创造出流畅并令人印象深刻的设计，文本和图像的不同组合被当作表现形式来使用。如同画家在画布上构图一样，设计师也用相似的办法来吸引读者的注意。不同的表现形式能有效吸引读者，并形成一系列的联系。
4.1分组
4.2边界
在设计中，为了使边框保持整齐和美观，设计师常常使用元素远离的远离来与边框保持一定的距离。尽管如此，对于边界的利用仍能有效的创造出具有设计感和活力感的版式设计。
4.3水平
当设计师要利用网格来引导读者视线横跨一个单页或通页时，设计元素便会依照这种水平运动的趋向来进行编排。也可以运用出血印刷和横跨订口的图片，形成水平的运动感。
4.4垂直
当设计师通过运用网格中的各个元素来引导读者视线在页面上下浏览，就是垂直形式的最好表现。垂直形式的垂直线不一定要在中线的位置。在平面中设置一个轴线，元素按照这个轴线做重心的平衡这种表现形式更好，这样不对称的版面具有一定的动势和张力，也更有冲击力和跃动感。
4.5斜角
把网格倾斜一定的角度，一般会倾斜至30°、45°和60°这三种角度，这些倾斜的网格发挥的作用原理与水平网格相同，但由于它们是倾斜的，设计师便能够以不同寻常的方式展现自己的创意。因网格可以设置成任何角度，往往这样有角度的网格更难设置也更难处理一些。
4.6轴线
这里的积极和消极可以理解为“动与不动”，页面元素没有变化就给人感觉死气沉沉的，版心上下留白一致也会给人这种感觉，这种布局适合用于古典书籍和较为传统的平面设计中。不动且没有变化给人感觉没有动势和张力并很消极，动而有变化给人感觉灵动活跃并很积极。
设计师利用层级的概念，通过比例大小或布局结构来定义作品，并呈现作品中最重要的信息。
6.1消极
下图所示中的页面是处于消极的状态，两大栏目没有对比关系。尺寸一致显得整体页面很平静，也没有表现出动势和张力，文本之间也不存在层级的关系。但要注意的是，采用这种排版布局，读者的视线会自然的从左到右依次阅读，并被带入作品所传递的信息中。
6.2位置
对设计元素的布局能明确设计中的层级关系。下图中的标题独立放置在了左页，来突显出它的优先级与重要性。
6.3位置和尺寸
位于页面入口处的元素被放大，它与下面元素的间距也被拉大，就形成了这个元素在层级中的重要性。
设计师会利用网状网格或点状网格来辅助对设计元素的布局。使用网格之前，必须理解它们是如何辅助设计师进行设计的。要思考牺牲对布局的多样性，换来多少设计的连贯性，而且也为实践留下了更大的空间。
7.1网状网格
网状网格是基础网格，它由一系列的水平线和垂直线组成的，以此来引导设计元素的布局，使设计师能快速布局并变得连贯而准确，它常被运用在设计定稿之前的草图中。
7.2点状网格
点状网格同样是一个基础网格，用来安置不同的设计元素。它们也可以用来补充页面元素的布局，例如文字和图片之间的空白等。
这阵子又常被问到一个老生常谈的话题：UI需要升级成体验设计师吗？升级成什么样才算呢？
作为一个专业向和业务导向大厂都呆过的老司机很认真负责的告诉各位铁汁，升级是有必要的，但是度和偏重还是需要自己把握。
全面的UX知识体系如果能完整且合理的应用在你出色的视觉能力基础上的话，无论是去哪个厂子都是巨大的加分，但前提一定还是扎实的UI基本功。
行业背景交代完了，接下来给各位介绍一下我吐血整理的从UI到UX的完整知识体系，一共6大模块：
数据收集/分析定义/策略定制/体系建设/设计执行/设计验证（给大家新增了一个很多人都会忽略的体系化模块，在大厂面试中是很加分的）。
数据收集模块主要是我们在开启项目前需要了解的内容，也是我们进行策略制定和分析时候的重要依据。它属于我们进阶模块里最陌生的环节，实际工作中可能应用的并不是太多，但要求大家有一定了解，在有资源条件的时候合理利用，那么它就会是你作品集里加分的一部分。
上周更新了干货超多的设计工具合集，关于UI和产品类的实战好文也不在少数。不过，如果你是一名打算学习数据指标和驱动的设计师，那么千万不要错过了小专题「数据分析」哦~干货·神器Prototypr.io一期的设计工具合集来了！
分析定义通常是在我们做具体决策前，通过数据收集来的调研结果进行一定的分析判断。这里也包含我们对完整的项目事件进行的完整分析，得出有利于我们做优化决策的结论。
前言刚入职时，有本书叫《方寸指尖》对我影响比较大，主要讲述如何做好用户体验设计。机缘巧合，在互联网领域也待了四年有余，对于指尖的思考也在不断升华，不仅要保证用户的的核心诉求，也要满足业务的目标。
我们做设计的时候经常会被问，为什么这么设计？这时候除了“我觉得...”这个苍白无力的开场白。
设计执行部分的内容看似基础，但其实细分支的知识点特别多，很多设计师工作了很多年也没有完全牢固的掌握，这样就会影响很多日常的工作输出效率与质量。
完整的用户体验设计流程一定是有头有尾的，也就是我们做设计需要得到一个价值肯定，可以通过一系列的方式获取主观与客观的验证。
编者按：在产品设计流程中，可用性测试是绕不开的一个环节。可用性测试具体要注意哪些问题？
介绍完6个模块，还有一些话要叮嘱大家：
知识体系给到大家也并不是要求大家面面俱到，精钻每个方法论的细节，只是至少脑子里能有这个概念，实际工作项目有可以应用的地方你能想得起来，就不会“书到用时方恨少”啦。
一个简易的小教程，一起Get起来~
设计中存在一些不可忽视的趋势。尽管玻璃态在UI设计中不是新的事物，但是最近又被人们挖掘出来了。有些人甚至将这个趋势称为“玻璃态”。
下面让我向你展示如何通过7个简单的步骤教你如何创建玻璃态的UI效果。
1）画一个形状首先创建一个基本形状，一个具有以下尺寸的矩形：640×400，再加40pt的圆角。
2）应用渐变填充
现在该基本填充了。在本教程中，我们将使用渐变。两种渐变颜色都将是纯白色（#FFFFFF），但是它们的不透明度会有所不同。将第一个设置为40％，第二个设置为10％。
3）添加背景模糊
我们来模仿玻璃的是模糊感。首先将背景模糊值设置为20左右，来看看这个是表面如何变化的。当然，你也可以根据自己的效果来设置不同的模糊度。
4）添加边框
一个优雅的边框会为元素增添了光泽。当玻璃表面重叠时，它也有助于建立视觉层次。如果要在设计中创建定向光的幻觉，则可能需要对边框使用渐变。我是这样制作卡片的，所以看起来更有“质感”。
卡边界对角渐变的设置：
边框：3px
颜色1：#FFFFFF（不透明度50％）
颜色2：#FFFFFF（不透明度0％）
颜色3：＃FF48DB（不透明度0％）
颜色4：＃FF48DB（不透明度50％）
5）应用阴影
细微的阴影效果有助于增强视觉层次。由于阴影的存在，区分所有层将更加容易。
在我的示例中，我使用具有24的模糊值的深色，并且扩展减小为-1。这次，你将通过添加阴影样式属性以与玻璃表面一起成形来获得最佳效果。
6）填写内容
是时候添加一些内容了。填写必要的徽标和文字。要创建压印层的错觉，请用白色填充内容，并将不透明度降低到50％。你也可以玩图层混合-尝试叠加以获得有趣的结果。
7）添加质感
玻璃卡片已完成，但是，你可以进一步添加一些高级纹理！要添加优雅的噪点，我们添加带有噪点的图像。将不透明度降低到20％，并将填充的混合模式设置为“叠加”。看看现在看起来多么有质感。