过去一年，一些新词频繁在行业中出现。诸如“元宇宙是什么？NFT能赚钱吗？AIGC前景在哪里？虚拟数字人怎么带货？XR有未来吗”这样的问题，不断被提及和讨论。
或许是因为行业内卷带来的焦虑，很多人渴望在新世界中寻求红利，发掘机会，2022年也确实涌现出不少新行业、新趋势。
今天，新榜编辑部筛选出去年最值得关注的6大行业新趋势，希望能和各位一起回顾2022，展望2023。
以Meta为代表，元宇宙堪称2022年最火的商业概念之一。
自2021年10月将Facebook更名为Meta，虽然饱受质疑，但扎克伯格对元宇宙的投入堪称坚决。有报道称Meta2022年在元宇宙上的研发投入高达百亿美元。
2022年1月18日，微软宣布以687亿美元收购动视暴雪，希望为微软构建元宇宙打下基础。据麦肯锡公司估计，2022年前五个月，企业、私募股权公司和风险资本家共进行了总额高达1200亿美元的元宇宙相关投资。
而在国内，更是呈现出一片热闹景象。
城市方面，除了上海发布《上海市培育“元宇宙”新赛道行动方案（2022—2025年）》外，深圳、成都、杭州等城市也有元宇宙相关规划或园区布局。
图源：上海市人民政府
大厂方面，腾讯上线“超级QQ秀”，字节上线“派对岛”，快手内测基于“附近同城”的虚拟形象社交，抖音上线虚拟空间“抖音小窝”，芒果上线元宇宙平台“芒果幻城”，映客更是宣布更名“映宇宙”，要全面进军元宇宙。
腾讯的“超级QQ秀”和字节的“派对岛”
2022年11月17日，B站董事长陈睿谈及“B站元宇宙构想”时曾称B站是中国最适合去实现“元宇宙”概念的公司之一。
但热闹非常的元宇宙也饱受质疑。在拥护者看来，元宇宙会是下一代互联网，被称为“元宇宙第一股”的沙盒游戏平台Roblox还总结了元宇宙的八大要素：身份、朋友、沉浸感、低延迟、多元化、随时随地、经济系统和文明。
但在质疑者看来，元宇宙只不过是一次旧技术的拼接，是一个营销游戏。中国工程院院士邬贺铨认为，元宇宙不会是下一代互联网。元宇宙是现代信息技术的集成，它涉及5G、IP网、云计算、人工智能、虚拟现实、区块链、数字货币、物联网、人机交互等，要满足元宇宙的技术需要，几年之内还不太可能。
2022年2月11日，元宇宙社交App“啫喱”曾一度超过微信、QQ，登上AppStore第一，但爆火3天后，就宣布主动下架。同年10月，字节的同类产品“派对岛”，同样在上线3个月后宣布裁撤团队；8月底，号称要成为“元宇宙时代的微软”的影创科技被曝欠薪200多人。
同年8月中旬，扎克伯格曾发布自己的一张虚拟自拍照，结果遭全网群嘲。截至当前，Meta已经连续第四个季度利润下滑。
不过就在2022年12月19日，Meta发布博客《为什么我们仍然相信未来》，表示将继续把20%的支出用于投资VR部门Reality Labs，这是他们元宇宙计划不可或缺的一部分。
显然，扎克伯格始终坚信元宇宙会是未来。
我们认为，受限于技术，类似头号玩家那样的全真元宇宙仍然非常遥远，但聚焦工业、娱乐等特定领域的元宇宙产品已开始初步落地。2023年，元宇宙也许能出现更具想象力的产品。
2022年或许可以说是AIGC元年。
AIGC（AI-Generated Content，人工智能生成内容）按照模态区分，可分为音频生成、文本生成、图像生成、视频生成等细分领域，以及文字生成图片、文字生成视频等跨模态生成。
引起热议的AI绘画获奖作品《太空歌剧院》
很多人是从2022年爆火的AI绘画开始了解AIGC的：4月Midjourney内测，7月Stable Diffusion横空出世，10月二次元模型NovelAI走红，11月无数人试图驯服AI绘画小程序，层出不穷的AI工具让人们看到了AI在艺术创作方面蕴藏的巨大潜力，同时也引起了猛烈的质疑和抗议：关于版权与道德，关于公平、安全、责任，关于人类和机器之间的关系。（相关阅读：《不明觉厉的AI绘画，对内容创作者来说有什么用？》《千万网友试图驯服的AI绘画，背后谁在赚钱？》）
到了2022年年底，对话式AI语言模型ChatGPT惊艳了海内外网友，它像人一样可以连续对话，帮助人们写作、写代码、回答一些常识性、生活性问题等，尽管有时会一本正经地胡说八道，但AI生成内容的能力已经突破我们的想象。（相关阅读：《刷屏的ChatGPT能帮自媒体人写稿吗？我们帮你试了试》《27个问题，让新晋懂王ChatGPT教我做网红》）
从PGC到UGC再到AIGC，内容生产范式的改变是大趋势，AI正在愈加渗透内容行业。
AIGC相关公司，图源硅谷Leonis Capital
百度创始人李彦宏曾在2022年7月的百度世界大会上表示：“AIGC或许将颠覆现有内容生产模式，实现以‘十分之一的成本’，以百倍千倍的生产速度，去生成AI原创内容。”
不过，目前国内的AIGC行业尚未进入大规模落地和体系化发展阶段，仍处于发展初期，大力投入大模型研发和落地的主要以大型云厂商为主，还有一些将AI技术产品化的互联网大厂和初创公司。除了存在算力成本高、技术不完善等难题外，C端用户的付费意愿也比较有限。
相对来说，B端客户的可发展空间较大，据Forrester预估，2023年财富五百大企业中将有1成通过AI工具创造内容，因为人工制作内容的速度永远无法大规模满足定制化内容需求。
图片来源：西湖心辰创始人蓝振忠在知乎的演讲
2023年可能会有越来越多的企业和个人使用AI来提高内容生成效率，激发创作灵感。正如Stability AI的CTO Tom Mason在极客公园的大会上提到的：“生成式AI正在做的，就是让消费者成为创作者，给他们创作他们自己消费的媒体内容的能力。”他判断，继文字生成图像后，下一波浪潮肯定是视频、音频和3D。
相比元宇宙，虚拟数字人可能更“实在”一些，至少是已经可见的。
关于虚拟数字人，新榜编辑部曾在“虚拟人专栏”中推出系列文章：《造价从100元到100万，虚拟人究竟是什么？》《90%玩家处在早期阶段，虚拟人靠什么赚钱？》《虚拟人四大难题：技术、产品、市场、中之人》。
按照“技术炒作周期曲线”
虚拟数字人行业正处于期望顶峰期
一个普遍共识是，目前虚拟人行业仍处于早期阶段，杀手级产品也尚未出现。也因此，去年虚拟人行业的一个主旋律是各类粉墨登场的虚拟数字人。
抖音方面，许安一、金桔2049等依靠直播成为了人气网红；快手方面，狐璃璃40天涨粉百万，快手技术团队还推出“快手虚拟演播助手KVS”；B站方面，海外虚拟主播vox的直播首秀，当晚直播1.7小时，营收达111万元。
此外，蒙牛、雪花啤酒、长安汽车等品牌也相继推出了自己的虚拟代言人。
虚拟数字人背后，则是动作不断的虚拟数字人公司、平台。
李未可科技、魔珐科技等相继完成融资，前者由字节独家投资，后者则由红杉中国等投资机构投资，B轮、C轮融资总金额达1.3亿美元。
百度除发布AI数字人希加加外，百度智能云曦灵还推出了两大SaaS平台“数字明星运营平台1.0”及“数字人直播平台2.0”，不断加码虚拟数字人基建。
2022年6月8日，日本知名虚拟主播事务所彩虹社成功登陆资本市场，成为VTuber界首家上市公司。在其招股书上，B站位列第三大股东。
企查查数据显示，截至2023年1月初，国内虚拟人/虚拟偶像相关现存企业近5千家，其中2022年共新注册1300余家，同比增长超25%。
政策方面同样传来利好消息。《北京市促进数字人产业创新发展行动计划（2022—2025 年）》《虚拟现实与行业应用融合发展行动计划（2022-2026年）》等政策相继发布，虚拟数字人价值得到肯定。
目前，业内普遍相信虚拟数字人的价值，但受限于技术、运营，如何发挥其价值仍然存在不小的难题。
2022年5月10日，国内虚拟偶像团体A-SOUL成员珈乐宣布进入“直播休眠”状态，引发粉丝极大不满，也由此引发对中之人的相关讨论。目前，市场对虚拟数字人的接受度仍是一个未知解。
截至目前，虚拟数字人已经尝试了广告、电商以及短视频、直播等多种形式、场景的应用，但仍处于尝鲜阶段，未出现普遍性的成功案例。
合理推测，谁能率先实现技术突破，孵化出第一个现象级虚拟数字人IP，谁就能第一个吃到红利。
历经多年市场低迷期，2022年，基于XR的技术、设备和内容生态受到了越来越多的消费者关注。
XR（Extended Reality，扩展现实）是指通过计算机将现实与虚拟相结合，打造一个人机交互的虚拟环境，涵盖虚拟现实（VR）、增强现实（AR）和混合现实（MR）等多种沉浸式技术。就像智能手机是移动互联网的入口一样，未来，XR设备被广泛认为是元宇宙的重要入口。
12月，国产AR眼镜Nreal的累计产量已达成10万台
Meta、苹果、谷歌、三星、字节跳动、腾讯、华为、爱奇艺等国内外科技巨头均有布局XR赛道。其中，Meta旗下VR产品Oculus系列在全球VR市场的占有量遥遥领先，字节跳动旗下的PICO系列位居全球第二，并在国内市场稳居第一。
XR设备双11销售榜单，图源天猫
2022年下半年，PICO 4和Meta Quest Pro的发布又掀起了VR硬件的市场热潮。可以看到，技术的进步带动了消费体验的提升，比如Pancake方案的规模化商用让VR一体机变得更小巧，彩色透视让VR向MR应用跨越。
PICO宣传图
PICO总裁周宏伟曾在接受采访时表示，目前VR行业虽然产品硬件在每一代都有进步，但整体上还是处于比较早期的阶段，用户基数比较少，还有很大的发展空间，“现在的大环境不是你死我活的问题，是你活我活的问题”。
一直以来，XR领域的护城河并不是硬件，很大程度上需要优质的内容生态来推动设备普及。
目前VR设备的应用场景主要集中在游戏社交和影视直播。
作为最大的VR内容平台，Steam截至2022年底已经有超7000款支持VR的游戏和应用。11月，PICO“轻世界”正式公测，提供各种3D场景创作工具和操作方式，希望开放生态让更多玩家在VR世界里创作内容。但相对来说，国内的VR平台内容生态还是略显薄弱，首发、独占内容较少，还处于“易落灰”的阶段。（相关阅读：《看完VR版世界杯总决赛，聊聊我对PICO 4的使用体验》）
根据IDC全球增强现实和虚拟现实头显季度跟踪报告的最新数据，2022年，全球VR头显和AR设备的出货量下降12.8%，降至970万台，预计2023年将恢复增长。出货量大降除了大环境的影响，XR产品本身及相关生态不够完善仍是主要原因。
展望2023年，XR产业正在进入一个新的发展阶段。苹果MR设备、索尼PS VR2等更多新产品或将登场，各类应用场景也等待着创业者和用户不断发掘。随着《虚拟现实与行业应用融合发展行动计划（2022-2026年）》的发布，国内XR市场也迎来政策利好。
罗永浩曾提到，AR行业正处于一两年后就能实现大规模商业化的节点，在科技巨头大规模入场之前，目前正是创业公司入局的好时机。
我们认为，除了产品形态的创新，内容生态的建设可能才是接下来XR大众化的关键，不仅是游戏，社交、办公、健身、视频、演唱会等多维度内容都需要共同发展，虚实之间，存在极大的发展机遇。
背靠区块链技术，数字藏品成为“元宇宙”概念下最快的变现途径之一。
2021年底NFT在海外爆火，2022年国内以“数字藏品”之名对NFT进行了本土化改造，迎来了快速发展。据国家语言资源监测与研究中心，“数字藏品”入选2022年度十大新词语。
数藏使用区块链技术为作品生成相对应的数字凭证，具有可追溯、难以篡改、唯一性等特点。知名IP作品上链限量发售，既可以保护原创版权，又能用新概念进行营销宣传，具备稀缺性和收藏价值。数藏和NFT的主要区别在于国内数藏禁止加密货币炒作，不开放二级市场；以联盟链为主，创作及定价方式由平台方决定。
整体来看，数藏行业在2022年经历了从爆发式增长到陷入寒冬的大起大落。
起初“万物皆可数藏”，国内媒体、政府、互联网平台等多与文博、书画、影视、艺术家合作发行数藏，明星名人也引领了一波数字时尚风潮。腾讯、阿里、百度、京东、B站、小红书等新老大厂纷纷布局数字藏品，据不完全统计，国内大大小小的数藏平台已经超过1000家。（相关阅读：《B站UP主定制的数字藏品，谁来买单？》《从爆火到理性，数字藏品还值得创作者入局吗？》）
图片来源：元飞船数藏舰
空投、合成、白名单、IP赋能……火热市场背后却是一片炒作乱象。很快，监管部门相继发布对数藏合规化的倡议。
2022年下半年，国内数藏市场虚假繁荣的泡沫开始显现，不乏平台暴雷、创始人“跑路”导致用户维权等现象，头部平台的藏品也出现了滞销情况。同年8月，腾讯幻核体面退场；10月~11月，至少有超过60家数藏平台主动发布清退公告。
即使在国外，加密货币交易所FTX崩盘之前，NFT市场就已经受到加密寒冬的影响，截至2022年底，日交易量从近10亿美元的高位下降到仅1800万美元。
据速途元宇宙研究院，目前数字藏品熊市的原因是供需关系的反转，“通货膨胀”的藏品缺乏与用户之间的联系或附加权益，难以产生更多价值增量。
很多新事物在发展初期都不可避免地产生投机炒作现象，只有当行业回归理性，虚火褪去后，数藏的价值才能真正显现出来。
NFT和数藏是区块链的新生产力发展带来的生产关系创新变化，高樟资本告诉新榜编辑部，这种生产关系对于解锁、赋能精神消费领域的生产力的作用是深远的，他们仍然看好该市场未来的机会和空间。
数字藏品行业全景图谱，图源亿欧智库
2023年起，国家队正式入场，全国首个国家级合规数字资产二级交易平台——“中国数字资产交易平台”于元旦上线。这标志着包括数字藏品在内的数字资产二级交易市场将迎来合规健康可持续发展阶段。
在合规趋势下，我们认为，数藏平台会趋向细分化，比如与实体经济的垂直领域进一步结合，或者融入AIGC，加强社区运营和赋能创作者生态，这些都是未来可能的发展方向。
Web3.0在2022年的第一波热度从一款游戏开始。
StepN，这款由浙大毕业生开发的Web3.0 App，曾在短短几个月时间里就卖出了上百万双虚拟鞋，月收入一度超过1亿美元。
财富效应之下，Web3.0成为2022年的显学之一。
2022年1月，NFT市场OpenSea的月交易量超过50亿美元；2月，红杉资本宣布推出一支专注于投资Web3.0相关技术创业公司的基金，资金规模在5亿至6亿美元之间；11月，耐克宣布将推出一个新的Web3.0平台Swoosh。目前，包括谷歌、Meta、阿里、腾讯等数十家大公司都开始探索Web3.0相关业务。
a16z在Web3.0的生态布局。图源：36氪
如何抓住Web3.0的机会？第一步就是要搞清楚什么是Web3.0。这也是Web3.0在2022年的重要主题之一。
因为Web3.0涵盖了区块链、数字货币、智能合约、DAO、DeFi、SciTS、CeSMO、CMO、DeSci、DeSoc、DeEco等一系列复杂概念，时至今日，仍然没人能给出一个服众的定义。
目前传播度最广的Web3.0定义来自研究员Eshita：Web1.0的特征是“可读”；Web2.0的特征是“可读+可写”；Web3.0的特征则是“可读+可写+拥有”。去中心化、确权、互联互通则是在Web3.0的相关讨论中最常出现的几个关键词。
但与此同时，特斯拉创始人马斯克曾表示“我不认为Web3.0真实存在，现在更像是市场营销的热词”，推特前首席执行官多尔西则认为“用户并不实际拥有Web3.0产品，Web3.0的实际拥有者是项目背后的风投机构，及其有限合伙人”。
因为共识的缺失，Web3.0显现出冰火两重天般的境遇。有人热情拥抱，有人态度谨慎，有人充满质疑。
2022年10月，周星驰在Instagram上公开招募Web3.0人才
截至目前，针对Web3.0数字资产的金融监管，美国仍未形成统一的监管架构，呈现出“多头监管”的态势。而在国内，强监管则是Web3.0从业者最大的共识。
回看去年，Web3.0就仿佛是一个充斥疯子、骗子、傻子以及理想主义者的蛮荒世界，每个人都希望能在Web3.0身上得到自己想要的。
2022年9月15日14时，以太坊正式完成“合并”，结束了区块链对挖矿的依赖，也成为Web3.0历史上的一个里程碑。但在2023年Web3.0能否迈入新的历史阶段，目前仍是一个未知数。
我们认为，Web3.0现在最大的困难在于如何从概念炒作转向项目落地，为市场提供一个真正的杀手级产品，只有如此，Web3.0才能真正获得持久的生命力，摆脱割韭菜的质疑。
不断涌现的新技术、新产品正为创作者和内容行业注入新的活力，我们相信，2023年会是充满可能性的一年，面对方兴未艾的技术应用和热点话题，新榜编辑部也将继续关注和跟踪，与你一起探讨和见证内容行业的大变革。
作者：新榜
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.
Linux & Mac OS (windows git bash)
export NODE_OPTIONS=--openssl-legacy-provider
windows命令提示符:
set NODE_OPTIONS=--openssl-legacy-provider
(1) 鼠标双击nvm-setup.exe文件，选择“我接受…”那一行，点击next
(2) 可以根据自身情况自定义选择路径盘，路径不要出现空格或中文符号（路径最好是在路径盘的根目录下，如C盘、D盘下的根目录），选好后点击next
(3) 选择node.js的安装位置，可以根据自身情况自定义选择路径盘，路径不要出现空格或中文符号（路径最好是在路径盘的根目录下新建一个文件夹，如C盘、D盘下的根目录）,选好后点击next。(若系统中已经安装node.js，则cmd打开终端，输入where node，查看node的位置，选择此文件目录)
(4) 最后一步，点击install即可安装完成
进入命令控制行窗口（win+R,输入cmd），
输入nvm -v,出现版本号即成功。
(1) 输入命令行nvm ls available查看可用的node.js版本号
若报错：Could not retrieve https://nodejs.org/dist/latest/.....
则打开nvm的安装目录，打开settings.txt文件，增加2行,然后保存
node_mirror:https://npm.taobao.org/mirrors/node/
npm_mirror:https://npm.taobao.org/mirrors/npm/
(2) 输入命令行nvm install node版本号(例如：nvm install 16.17.0)
(3) 安装成功后，输入命令行nvm use node版本号（nvm use 16.17.0）
若报错exit status 1: ��û���㹻��Ȩ��ִ�д˲�����
则权限不够，以管理员身份运行cmd
具体方法：点击电脑左下方搜索->输入cmd->以管理员身份运行（命令提示符）->重新输入nvm use
(4) 验证是否成功
分别输入命令行node -v和npm -v，检验node.js以及对应npm是否安装成功，如果可以显示版本号这说明安装成功。
小窍门：
1.输入命令行nvm ls可查看你安装的所有node.js版本号，以及你当前所选择的node.js运行版本
(2) 如果想删除某node.js版本的话，输入命令行nvm uninstall node版本号（例如：nvm uninstall 18.10.0）即可删除对应版本
npm run dev
来源：csdn
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
TypeScript从入门到实践专栏是博主在学习和工作过程中的总结，实用性非常强，欢迎订阅哦，学会TS不迷路。
| TS系列 | 标题 |
|---|---|
| 基础篇 | TS入门（一） |
| 基础篇 | TS类型声明（二） |
| 基础篇 | TS接口类型（三） |
| 基础篇 | TS交叉类型&联合类型（四） |
| 基础篇 | TS类型断言（五） |
| 基础篇 | TS类型守卫（六） |
| 进阶篇 | TS函数重载（七） |
| 进阶篇 | TS泛型（八） |
| 进阶篇 | TS装饰器（九） |
对于同一个函数我们在不同场景下传参，参数有时候全部需要，有时候部分需要，定义多个同名函数就会报错，那么该怎么实现这个操作呢？我们可以为函数设置默认参数和可选参数。
给每个参数添加类型之后，可以不用给函数本身添加返回值类型，因为TS能根据返回语句自动推断出返回值类型
function start(name:string,age:number,phone?:number,sex?:string):string{ if(phone&&sex){ return `name:${name},age:${age},phone:${phone},sex:${sex}` }else{ return `name:${name},age:${age}` } } start('zhangsan','14')//name:zhangsan,age:14 start('zhangsan','14',15678777777,'男')//name:zhangsan,age:14,phone:15678777777,sex:男
另外我们看它编译后的样子，其中返回值使用了concat来连接字符串，也让我们学习到模版字符串的实现原理。
function start(name, age, phone, sex) { if (phone && sex) { return "name:".concat(name, ",age:").concat(age, ",phone:").concat(phone, ",sex:").concat(sex); } else { return "name:".concat(name, ",age:").concat(age); } } start('zhangsan', 14); //name:zhangsan,age:14 start('zhangsan', 14, 15678777777, '男'); //name:zhangsan,age:14,phone:15678777777,sex:男
但是我们要是有很多场景，参数类型也都不一致，我们这样写很难维护，并且定义的规范很难适用于实际多个场景，那么我们可以使用函数重载来处理。
什么事函数重载呢？当我们多次调用函数时传递不同参数数量或者类型，函数会做出不同处理。
这里介绍个名次「函数签名」，顾名思义，函数签名主要定义了参数及参数类型，返回值及返回值类型。函数签名不同，函数会做出不同的处理，这是我对函数重载的理解。
举个例子，声明一个类Course，里面写一个start的方法，我们调用 start时传入不同参数类型已经参数个数，start方法会做出不同处理，那么怎么实现呢？具体如下：
type Combinable = number | string; class Course { //定义重载签名 begin(name: number, score: number): string; begin(name: string, score: string): string; begin(name: string, score: number): string; begin(name: number, score: string): string; //定义实现签名 begin(name: Combinable, score: Combinable) { if (typeof name === 'string' || typeof score === 'string') { return 'student:' + name + ':' + score; } } } const course = new Course(); course.begin(111, 5);//没有输出 course.begin('zhangsan', 5);//student:zhangsan:5 course.begin(5, 'zhangsan');//student:5:zhangsan
以上代码中定义了4个重载前面和1个实现签名。
声明一个函数arithmetic，参数类型为联合类型，返回值也是联合类型，但是如下代码却报错了。
function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).length;
原因是没有明确函数string类型没有toFixed属性`，那么怎么用函数重载解决这个报错问题呢？
我们可以可以根据传参的类型和函数返回值声明多个同名的函数，只是类型和返回值不同而已。
function arithmetic(x: number): number; function arithmetic(x: string): string; function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).toFixed(1);
这样就不会报错啦，因为已经识别到arithmetic(1)的返回值是number类型。
JS中函数重载怎么实现呢？
var arr = [1,2,3,4,5]; //注意:这里不能写成箭头函数，否则this指向的是window对象 Array.prototype.search = function() { var len = arguments.length; switch(len){ case 0: return this; case 1: return `${arguments[0]}`; case 2: return `${arguments[0]},${arguments[1]}`; } } console.log(arr.search()) //[1,2,3,4,5] console.log(arr.search(1)) //1 console.log(arr.search(1,2)) //1,2
function addMethod (obj, name, fn) { var old = obj[name]; obj[name] = function () { if (fn.length === arguments.length) { return fn.apply(this, arguments) } else if (typeof old === 'function') { return old.apply(this, arguments) } } } var person = {name: 'zhangsan'} addMethod(person, 'getName', function () { console.log(this.name + '---->' + 'getName1') }) addMethod(person, 'getName', function (str) { console.log(this.name + '---->' + str) }) addMethod(person, 'getName', function (a, b) { console.log(this.name + '---->' + (a + b)) }) person.getName() person.getName('zhangsan') person.getName(10, 20)来源：csdn 蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~ 希望得到建议咨询、商务合作，也请与我们联系01063334945。 分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
UX/UI设计师在日常工作中是否遇到以下疑问：
- 方案由业务、产品主导，设计师没有发挥空间怎么办？
- 如何从设计视角出发梳理体验优化建议？
- 如何向各方证明你的优化建议是有价值的？
要回答以上问题，首先得理解设计价值究竟为何。
设计≠艺术，设计从诞生之初就是为“解决问题”而存在。
在体验设计场景，如果业务方是“需求提出者”，那产品经理和设计师就是从不同视角切入的“问题解决者”，而用户既是“需求源头”，又是“方案验证者”和最终“价值创造者”。
下面详细解读【设计价值】与【业务/用户/产品】三方的关系：
商业设计本质上服务于业务，因此判断设计价值几何的关键是：是否真正地帮助业务解决问题，助力业务目标达成。换而言之，设计价值就是设计师通过设计思维/策略/方法，直接或间接帮助业务创造的那部分价值。
设计不能脱离业务自嗨，不能“为了强调存在而存在”。 有效设计在于对业务诉求的精准满足。我们构思设计方案时，脑海中始终要回答：
- 实现了哪些业务目标
- 解决了哪些业务问题
- 创造了哪些业务价值
业务价值最直接的来源是用户价值的变现，因此，想要实现业务价值≈要服务好用户，这为设计价值的实现提供了有效抓手：设计师可以通过洞察用户需求，完善产品功能、优化操作体验的方式助力业务目标达成。
P.S.用户价值=产品给目标用户带来的核心价值，即：帮助用户解决了什么问题，满足了什么需求，提供了什么服务。
对于资深设计师来说，产品PRD不一定是最优解，它更像是提供了解决问题的第二参考视角，产品侧在理解业务目标的基础之上，从实现角度产出了初步解决方案，为设计师打开思路。
不同阶段设计师在面对同一份PRD时，有如下处理方式：
- 初级：不知其然，表象复刻——直接按照PRD方案输出相应设计；
- 中级：知其然，表象完善——对PRD方案进行查漏补缺，提出体验层优化建议；
- 高级：知其所以然，透过表象看本质——综合业务/产品目标，挖掘用户原始需求，提出当下最优解。
当设计师拿到 BRD & PRD 后，如何综合多维视角制定设计目标和策略？下面列举了笔者在日常工作中重点关注的维度。
业务会从商业角度提供清晰定义产品边界和价值变现模型，从BRD中可以提取以下重点信息：
- 产品/需求的目标用户类型和特定场景范围；
- 给用户带来的核心价值（帮助用户解决了什么问题/满足了什么诉求）；
- 用户价值变现模型和策略（如何通过满足诉求进而实现用户价值变现）；
- 业务价值可量化指标
我们需要注意一下两点：
- 关注北极星指标，比如某些场景侧重“留存”，有些侧重“转化”，这会影响设计侧重；
- 在产品发展初期，了解业务线未来的布局和规划，可以帮助我们把握设阶段性计节奏。
用户是一切需求的源头，仅从业务视角出发定义需求是无本之木。因此当设计师碰到业务需求不明确，或者对产品方案存疑时，最好的办法就是回归用户视角。用户需求挖掘一方面可以丰富和完善业务目标，另一方面也帮助我们审视当前业务需求是否与用户诉求吻合。通过用户分析我们可以得到：
- 目标用户特征；
- 典型场景下核心诉求、任务和关键行为；
- 关键行为可量化指标
P.S.为了挖掘多维度用户诉求，我们可以根据具体场景将用户细分，如：
- 角色：如B端/C端；
- 熟悉程度：小白/普通/专家；
- 客户价值：高价值/一般价值；
- 兴趣/偏好：价格敏感/XX控；
- 目标强弱：强目标/半目标/无目标；
- 阶段：获取-激活-留存-收益-推荐；
- 流程：开始前/进行中/结束后...
在业务主导的场景下，产品经理往往是需求的“第一经手人”，我们需要在PRD中捕捉到产品对业务需求的理解和转化策略。另外，产品视角也阐释了在落地实现层面的约束限制，特别是前台与中/后台的依赖关系。从 PRD 中可以获取以下重点信息：
- 产品目标和策略；
- 功能范围和核心流程；
- 中后台能力支持；
- 实现成本和风险点；
我们需要注意一下两点：
多数情况下，我们接到的需求是点状的，可能是某个子模块的子流程/功能，此时我们可以用更系统的视角向上追溯，定位模块所属能力矩阵，找到模块与模块之间的联系，这有利于精准把握需求，保证链路场景闭环，为后续由点到面驱动更大层面体验优化作准备；
很多功能不是“不该做”，而是当下“做不了”或“性价比低”，一些优化方案提出前，我们需要从产品角度考虑现有中后台能力支持、研发可行性、运营人力成本等，避免设计“空中楼阁”。
综合以上业务、用户和产品三个维度，我们更加精准推导设计目标。需要注意的是，设计不是万能的，大多情况下设计只能通过“影响/实现局部用户价值”间接助力变现，我们只需关注可以通过设计手段参与、干预和落实的部分即可。一个设计目标的完整表述 = 通过【XX设计策略】帮助目标用户【实现XX价值/满足XX需求/解决XX问题】，以助力【XX业务目标/变现方式】达成。（在实际表达中可以适当精简）
确立明确的设计目标和策略后，下面进入设计实施和验证阶段，这里推荐两个基础的推导模型。
SKS模型，即策略(Strategy) → 影响因子(Key factor) → 解决方案(Solution)。设计目标中的策略是一切方案推导的源头，我们需要找到影响策略实现程度和效果的关键因素，将其视为可控变量，并以这些变量为切入点进行方案尝试，最终衍生多种解法。
比如：我们把提升Banner的点击率作为策略，那影响banner点击的影响因素可能是：形式是否新颖、配色是否亮眼、是否有动效引导、利益点是否突出、行动按钮是否吸引人点击等等，每一个影响因子都可以衍生出多种设计方案。
上文提到，设计手段通常是以间接方式助力用户价值实现，进而赋能业务目标达成。那如何量化设计价值呢？我们可以使用“GAM模型”，即设计目标(Goal) → 高价值行为(Action) → 衡量指标(Metric)。具体方法如下：
一个设计目标实现，一定是由链路中一个/多个高价值行为促成。比如用户在真正“下单”前，会访问商品详情页，浏览商品详情页信息，加购物车等。
用数据刻画和度量高价值行为的指标变化，进而度量设计方案的价值用数据刻画和度量高价值行为的指标变化，进而度量设计方案的价值。 我们可以尽量多维度拆解高价值行为和相应度量指标，维度越多，关联性越高，判断误差越小。
事有轻重缓急，不是所有的需求都需要走上述方法进行设计分析，要学会辨别重点的、有发展潜力的需求投入更多设计精力深入研究。后续笔者将通过具体的设计项目，详细阐述如何运用业务×产品×用户三重视角，推导改版目标和设计策略，敬请期待《「②实战篇」如何提升设计价值——2022京东APP频道广场V2.0改版探索》。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本章的内容围绕“人”这个中心，分成了两个要点：
1.人是服务的核心
2.洞见与数字
在人是服务核心这里，简而言之就是首先用户体验是至关重要的，单体产品并不能代表设计本身。
这个要点并没有什么新意，大家都知道用户中心设计思维在设计中的地位。而其实，真正“人是核心”想说是设计师要注意多个方面的参与者。
这里我给出一个例子，比如在中国非常火热的外卖系统，虽然我们会认为典型的user是点外卖的人，但实际上商家、外卖小哥甚至平台自身的客服人员都是服务设计所需要关注的“人”，但需要关注的理由各异，后续会讲到。
洞见与数字，在英文原书中用的词是 Insights versus Numbers，注意是 versus 而不是 and, 也就是说原作者的意思是 insight 和 number 是存在一些对立和取舍的。
图片出处:Rosenfeld Media 图片授权：Attribution 2.0 Generic (CC BY 2.0)
如这张图所示：作者认为和传统的用户研究手段获得多个有用的可量化的 facts/truths 不同，服务设计的洞见需要的不是更多的 truth, 而是更深入但却不可量化的 insights.
所以，与其得到更多的 numbers 不如更深入的获得 insights. 由于第四章会对insight和获得insight的过程进行详细展开，这里我就不过多展开了。
除了上述两个要点外，有个小点值得放大一下，中文版书中有个小标题叫“共同设计，而不是单方面只为客户设计”，英文原版叫做“design with people, not for them”.
我们也能够看出原书作者又一次强调了服务设计的共创属性，当然这个共创属性也是第二章中作者阐述过的内容，再结合本章第一点中对“人”的定义，那么共创的对象就应该是更多的参与者而不仅仅是用户了。
作者在原书中明确说设计师要和一线接触用户客户的员工进行共创，因为他们洞见更加深入，更有价值。
首先大家都是做设计的，前期调研的事情一定没少做过，往往我们习惯了用饼图柱状图条状图等内容来表达自己的调研结果（事实上是调查结果，因为研究是基于调查结果的，真正的研究并没有开始）。
但在服务设计领域中，获得结果导向的数据往往意义不太大，我们需要的是基于洞察的共情，以及基于共情的用户体验确认，毕竟我们无法用简单粗暴的诸如1升汽油或者60°C的热水一样，用一个可量化的量词来规范人的情感。
正是因此，与传统UCD类似直男般 fact-problem-needs 的思维逻辑不通，服务设计需要我们设计师走入 洞察-共情-需求 insight-empahize-needs 这样的路径。
其次，作者强调的是“人/people”，而非“user”，这个细节非常重要。
试想这个例子，比如这里有片广场，有一群活力四射的阿姨在跳广场舞，那么我们应该关注的是谁呢？是广场舞阿姨吗？
是，但不只是。因为，广场上还有其他的诸如看跳广场舞的大叔、玩耍的孩子、路过的市民甚至周边离得近的居民等，他们显然都是这里的people而很难剥离出一个人群我们称他们为user. 如果我们要做广场的优化设计，那么所有人都应该是我们关注的对象和共创的对象。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
目录
1、基本介绍
▶ 概述
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
我们之前也学习过后端的框架 `Mybatis` ，`Mybatis` 是用来简化 `jdbc` 代码编写的；而 `VUE` 是前端的框架，是用来简化 `JavaScript` 代码编写的。前面的综合性案例，里面进行了大量的DOM操作，如下
使用 `VUE` 后，这部分代码我们就不需要再写了。那么 `VUE` 是如何简化 DOM 书写呢？基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们是将关注点放在了 DOM 操作上；而要了解 `MVVM` 思想，必须先了解 `MVC` 思想，如下图就是 `MVC` 思想图解
其中的C 就是咱们 js 代码，M 就是数据，而 V 是页面上展示的内容，如下图：
`MVC` 思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。接下来了解`MVVM` 思想，如下图是三个组件图解：
图中的 `Model` 就是我们的数据，`View` 是视图，也就是页面标签，用户可以通过浏览器看到的内容；`Model` 和 `View` 是通过 `ViewModel` 对象进行双向绑定的，而 `ViewModel` 对象是 `Vue` 提供的。双向绑定的效果：下图是提前准备的代码写出来的，输入框绑定了 `username` 模型数据，而在页面上也使用 `{{}}` 绑定了 `username` 模型数据
通过浏览器打开该页面可以看到如下页面
当我们在输入框中输入内容，而输入框后面随之实时的展示我们输入的内容，这就是双向绑定的效果。
▶ 快速入门
Vue 使用起来是比较简单的，总共分为如下三步：
1. 新建 HTML 页面，引入 Vue.js文件
<script src="js/vue.js"></scrip>2. 在JS代码区域，创建Vue核心对象，进行数据绑定
创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
● `el` ： 用来指定哪个地方的标签受 Vue 管理。 该属性取值 `#app` 中的 `app` 需要是受管理的标签的id属性值
● `data` ：用来定义数据模型
● `methods` ：用来定义函数。这个我们在后面就会用到3. 编写视图
`{{}}` 是 Vue 中定义的 `插值表达式` ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。
▷ 整体代码如下：
2、Vue 指令
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
▷ v-bind & v-model 指令
▷ v-bind
该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化，例如：
<a v-bind:href="url">百度一下</a>上面的 `v-bind:"` 可以简化写成 `:` ，如下：
▷ v-model
该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：
<input name="username" v-model="username">▷ 代码演示：
通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据
▶ v-on 指令
我们在页面定义一个按钮，并给该按钮使用 `v-on` 指令绑定单击事件，html代码如下：
<input type="button" value="一个按钮" v-on:click="show()">而使用 `v-on` 时还可以使用简化的写法，将 `v-on:` 替换成 `@`，html代码如下
<input type="button" value="一个按钮" @click="show()">上面代码绑定的 `show()` 需要在 Vue 对象中的 `methods` 属性中定义出来
注意：`v-on:` 后面的事件名称是之前原生事件属性名去掉on。
例如：
● 单击事件 ： 事件属性名是 onclick，而在vue中使用是 `v-on:click`
● 失去焦点事件：事件属性名是 onblur，而在vue中使用时 `v-on:blur`▷ 整体页面代码如下：
▶ 条件判断指令
接下来通过代码演示一下。在 Vue中定义一个 `count` 的数据模型，如下
现在要实现，当 `count` 模型的数据是3时，在页面上展示 `div1` 内容；当 `count` 模型的数据是4时，在页面上展示 `div2` 内容；`count` 模型数据是其他值时，在页面上展示 `div3`。这里为了动态改变模型数据 `count` 的值，再定义一个输入框绑定 `count` 模型数据。html 代码如下：
▷ 整体页面代码如下：
通过浏览器打开页面并在输入框输入不同的值，效果如下
然后我们在看看 `v-show` 指令的效果，如果模型数据 `count ` 的值是3时，展示 `div v-show` 内容，否则不展示，html页面代码如下
浏览器打开效果如下：
通过上面的演示，发现 `v-show` 和 `v-if` 效果一样，那它们到底有什么区别呢？我们根据浏览器的检查功能查看源代码：
通过上图可以看出 `v-show` 不展示的原理是给对应的标签添加 `display` css属性，并将该属性值设置为 `none` ，这样就达到了隐藏的效果。而 `v-if` 指令是条件不满足时根本就不会渲染。
▶ v-for 指令
这个指令看到名字就知道是用来遍历的，该指令使用的格式如下：
注意：需要循环那个标签，`v-for` 指令就写在那个标签上。
如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：
▷ 代码演示：
通过浏览器打开效果如下
3、生命周期
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数
看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 `mounted` 就行了。
`mounted`：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。
1、基本介绍
▶ 概述
Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。
Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~
如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。
我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是：元素 - 全球最受欢迎的 Vue UI 框架 (eleme.cn)
进入官网能看到如下页面
接下来直接点击 `组件` ，页面如下
2、Element 布局
Element 提供了两种布局方式，分别是：
● Layout 布局
● Container 布局容器▷ Layout 局部
通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。
在左菜单栏找到 `Layout 布局` ，然后找到自己喜欢的按钮样式，点击 `显示代码` ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 `head` 标签内，将html标签拷贝到 `<div id="app"></div>` 标签内。
▷ 整体页面代码如下：
现在需要添加一行，要求该行显示8个格子，通过计算每个格子占 3 栏，具体的html 代码如下
▶ Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。
如下图是官网提供的 Container 布局容器实例：
该效果代码中包含了样式、页面标签、模型数据。将里面的样式 `<style>` 拷贝到我们自己页面的 `head` 标签中；将html标签拷贝到 `<div id="app"></div>` 标签中，再将数据模型拷贝到 `vue` 对象的 `data()` 中。
▷ 整体页面代码如下：
▶ 完成分页条展示
在 Element 官网找到 `Pagination 分页` ，在页面主体部分找到我们需要的效果，如下
点击 `显示代码` ，找到 `完整功能` 对应的代码，接下来对该代码进行分析
▷ 上面代码属性说明：
● `page-size` ：每页显示的条目数
● `page-sizes` ： 每页显示个数选择器的选项设置。
`:page-sizes="[100,200,300,400]"` 对应的页面效果如下：
● `currentPage` ：当前页码。我们点击那个页码，此属性值就是几。
● `total` ：总记录数。用来设置总的数据条目数，该属性设置后， Element 会自动计算出需分多少页并给我们展示对应的页码。▷ 事件说明：
● `size-change` ：pageSize 改变时会触发。也就是当我们改变了每页显示的条目数后，该事件会触发。
● `current-change` ：currentPage 改变时会触发。也就是当我们点击了其他的页码后，该事件会触发。
来源：csdn
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
云WAF主要利用DNS技术，通过移交域名解析权来实现安全防护，用户的请求首先发送到云端节点进行检测，如存在异常请求则进行拦截否则将请求转发至真实服务器。
http://aliyunyd.com/
https://cloud.tencent.com/product/waf
https://www.huaweicloud.com/product/waf.html
https://www.dbappsecurity.com.cn/product/cloud119.html
https://cloud.baidu.com/product/waf.html
https://www.huaweicloud.com/product/cfw.html
https://www.safedog.cn/index/wafIndex.html
https://defense.yunaq.com/cyd/
https://www.f5.com.cn/cloud/products/distributed-cloud-waf
https://wangzhan.qianxin.com/
https://wangzhan.360.cn/panyun
https://www.wangsu.com/product/52
https://www.qianxin.com/product/detail/pid/400
https://www.nsfocus.com.cn/html/2020/458_0107/108.html
https://www.venustech.com.cn/new_type/xnWAF/
https://www.sangfor.com.cn/product-and-solution/sangfor-security/yun-web
https://www.riversecurity.com/product-Safeplus.shtml
硬件WAF通常部署在Web服务器之前，过滤所有外部访问流量，并对请求包进行解析，通过安全规则库的攻击规则进行匹配，识别异常并进行请求阻断。
常见产品：
https://www.dbappsecurity.com.cn/product/cloud150.html
https://www.chaitin.cn/zh/safeline
https://www.yxlink.com/index_product_index.html
https://www.nsfocus.com.cn/html/2019/206_0911/6.html
https://www.webray.com.cn/channel/RayWAF.html
https://www.topsec.com.cn/product/25.html
https://www.sangfor.com.cn/product-and-solution/sangfor-security/waf
https://www.venustech.com.cn/new_type/Webyyfhq/
https://www.f5.com.cn/products/security/advanced-waf
软件WAF安装在需要防护的服务器上，通过监听端口或以Web容器扩展方式进行请求检测和阻断。
https://www.safedog.cn/
https://yunsuo.qianxin.com/
https://d99net.net/
https://www.gov110.cn/
https://www.hws.com/
https://www.zcnt.com/
https://www.upupw.net/versions/
https://www.bt.cn/
https://www.xmirror.cn/
https://help.aliyun.com/product/28449.html
正如题目所说：细节决定成败，微交互就是利用细节提升产品体验和设立品牌标志。
直到今天，人机交互已经有很长时间的发展。从例如烤面包机的简单产品到银行应用程序类的复杂数字产品，我们每天进行上百次的交互。这些交互转化为产品的可用性，最终转化成用户满意度、信任度和产品整体体验。
在过去的二十年里，设计师们一直在关注这些交互（按钮、滚动、长按等）。从电脑大屏幕到移动设备、智能手表以及现在的可折叠设备，交互也在不断地发展。本文研究了微交互的结构及其与交互模型的关系，审美体验的不同驱动力，以及我们如何通过改变微交互的元素来优化体验。最后，我们讨论了自下而上的产品构建方法。
自灯泡、收音机、门铃等电气设备出现以来，微交互一直存在于我们的生活。微交互和技术共同出现、发展。在我们的日常生活中充满了与周围物体的微交互，例如使用烤面包机、解锁手机、将手机切换到静音模式、控制音量等。
从简单的按下按钮到摇动手腕激活智能手表，微交互随着技术的进步而不断发展。像复制文本或移动文件这类我们如今习以为常的、无形之中的微交互，都曾是新颖的微交互。观察微交互有助于设计师改进产品。
有趣的是，设计师将现实生活场景投射到产品来建立微交互，如剪切-粘贴、放大-缩小等。这些细节不仅提高了产品的可用性，也通过直观的互动降低用户学习难度。
我们如何准确定义什么是微交互，什么是交互？
论文《开启移动微交互》（Ashbrook，2010）将微交互定义为“接触设备开始到完成的时间不超过4秒的互动”。而《微交互》一书（Saffer，2013）将其定义为：“微交互是围绕着单个用例的产品使用场景——它们有一个主要任务。”整个应用程序或产品可能只是一个微交互，例如，天气应用程序（图1.1）或烤面包机，因为它们只关注一件事。
图1.1 天气应用程序能被看作是一个微交互，因为它只显示天气。
图1.2 LinkedIn 的“喜欢”按钮由两个微交互组成，（a）当你长按“喜欢”按钮时，它会打开一个空间展示多个表情符号以供选择（b）你选择表情符号发送给帖子。
一个功能可以由多个微交互构成，例如LinkedIn的“喜欢”按钮（图1.2），人们可以对帖子发送不同的表情符号。因此，微交互是一个功能模块，或者是整个产品。与产品互动时，微交互也许能帮助用户了解做什么，如何做，后续是怎样。精心设计的微交互使产品变得直观，优化了产品的用户体验。
当微交互打造了与品牌产生共鸣的特殊体验时，它化身为了品牌标志。专业术语称之为“标志性时刻——产品或服务中给人留下持久而难忘印象的突出互动”（Janhagen, Leitch & Judelson, 2020）。
Facebook的“喜欢”按钮是它的标志性时刻。微交互并不仅仅局限于视觉，它们可以是声音、触觉、实体硬件或手势交互。Snapchat的通知作为产品的标志性时刻是因其独特的声音。同样地，iPhone有一个中心按钮作为苹果的标志，它有多个微交互方式。
微交互通常首选（Narvhus, J.M. 2016）：
我们将在之后的章节中研究一些微交互案例。
在进入交互模型之前，我们将尝试研究心智和心智表征，以更好地理解人类如何与世界上的物体互动。(Newell & Card, 1985)文章谈到了三个不同的处理器：感知处理器、认知处理器和运动处理器是如何工作以理解周围世界。
认知处理器与长期记忆和工作记忆一起工作，从现有的知识中提取物体、感觉、行动等的表征，以理解来自知觉处理器的输入。一旦认知处理器完成处理，它就会向运动处理器发出信号，以特定方式对特定情况采取行动。心智表征是现实世界中事物如何运作的心智模型或理解。
唐-诺曼的七个行为阶段（诺曼，2013）（图2）是一种更清晰的心智学形式，解释了人类如何与物体互动以实现目标。目标可能是打开一盏灯或在移动应用程序上进行在线交易。让我们把手机解锁的简单目标分解成七个行动阶段。
在这个循环的每个阶段，都有一个输入->处理->输出的过程。在宏观层面上，我们也在遵循同样的过程来达到我们的目标。我们可以从行动模型的七个阶段推导出互动周期（Norman, 2013）（图3）。
交互周期包括执行过程和评估过程，前者是行动所需信息差，后者是行动发生时各类情况所需理解的信息差。整体用户体验取决于交互过程中互动周期的每个部分。微交互的目标是消除差距，使产品变得直观。现在让我们看看微交互的基础结构，了解它们如何帮助消除信息差。
微交互之所以强大，不仅仅是因为它们的细微交互差别或迷你尺寸，还因为它们构建的方式。微交互的结构包括四个部分（图4）（Saffer，2013）：开启微交互的触发器，决定微交互如何运作的规则，以及影响微互动的元规则——阐明规则、循环和模式的反馈。
触发器可以由用户触发，例如点击图标、填写表格等，触发器也可以由系统产生，例如低电量提示框，通知用户电池电量不足。
让我们以Duo应用中验证用户的微交互为例。
现在当我们解构微交互并理解其结构时，微交互的结构支持行动七阶段理论，最终帮助消除执行和评估之间的鸿沟。精心设计的触发器便于用户进行计划->指定->执行行动，精心设计的规则和反馈便于用户进行感知->解释->对比结果确认完成目标。我们将在下一节中谈论触发器、规则和反馈的设计，以了解微交互如何有效构建所需的用户体验。
我们回看心智部分，认知处理器不仅包含了不同事物如何工作的心智模型，并且随着我们在日常生活中对新物体的体验而不断地发展。从这些心智模型中，设计师可以创建概念模型。作为关于产品和功能运作的高级计划，概念模型一旦被建立就能被转化为行动模型的七个阶段，从而帮助我们创建对用户来说很直观的微交互。这是一种自下而上的方法，用于建立交互 -> 功能 -> 产品。
在上一节中，我们谈到了交互模型和微交互的结构，并探讨了它们如何携手使产品变得直观好用。现在我们将关注动态审美体验，以及微交互如何在产品的微观层面建立体验。
审美体验的韵律之舞有一个内在的、动态的结构。杜威指出了体验建立的相关过程，如累积、保存、紧张张力和预期，来指称体验的内部动态（McCarthy & Wright, 2004）。
完整的用户体验是这些动态的集合，它可以根据用户过往经验和知识认知而变化。过往经验和任何审美经验都取决于上下文：用户的过往和能力，人工制品的技术，以及互动发生的任一物理、社会空间（Petersen, Iversen, Krogh, & Ludvigsen, 2004）。当我们与物体/产品互动时，触觉、嗅觉、视觉和听觉都会唤起体验。
在过去的几十年里，设计师们一直在关注这些触发奇迹的交互。交互不应该仅仅是传达内容和完成任务，它应该引人思考，并鼓励人们以不同的方式思考变化。我们将展示一些唤起了不同审美体验的动态微交互案例。
1）积累：指伴随着体验时间展开的积聚。我认为谷歌支付作为微交互建立了用户体验，并包含非常优秀的展开界面和支付完成音效。
这个之所以判定为其微交互，是因为它只专注于一件事，而且建立了非常充实的体验。这个交互开始于点击支付端->选择银行卡->加载->支付完成（图6）。动画和音效带来了一步步徐徐展开的体验感受。
2）留存：指保留一些过往事物的趋势，不论体验还是内容。文本或信息的保存对优秀用户体验来说确实是必要的，毕竟这样能减少认知负担。在网站和应用程序上填写表格时，许多微交互都保留了之前的填写信息。
这类微交互的一个非常简单的例子是，当你复制一个链接并试图将其输入网络浏览器时，浏览器会显示直接粘贴链接的选项，甚至显示你复制的内容（图7）。我们在这此观察到与微交互的结构不同的是重点更多地放在了交互的反馈上，它传达的状态是：你复制的内容已保存，并可以用来搜索网页浏览器。这是一个展示了我们如何调整微交互侧重点来优化体验的优秀案例。
3）张力：指体验内和参与体验的人之间的关联。这是社交媒体和流媒体平台使用的一种技术，当用户期待在短时间内快速阅览内容时，用户不断下滑来反复触发刷新的微交互（图8.） 。微交互带给用户参与感以牢牢抓住其注意力。它带来的延迟满足，让用户在想快速浏览内容时耐心等待。
这个特殊的微交互的重点是方式：即在内容加载之前显示一个加载器。
4）预期：它包含两个时间阶段。第一阶段是用户在交互中开始期待，第二阶段是用户从交互中得到期望反馈。我想到的微交互是Google Pay India的刮刮卡奖励（图9）。
这个特殊的微交互为它在印度带来了巨大的成功。人们喜欢期待好事发生，即使期望没有发生。若是期望发生，那期待就是值得的。支付完成后，用户进入刮刮卡奖励界面，对刮奖产生期待，点击卡片进行刮奖。刮奖微交互的重点是动作的触发上，兼具有趣性和参与感，触发本来可以只是一个点击按钮，但他们设计了一个刮擦动作作为触发。
上文提到的各种例子可看出：通过调整微交互的元素来优化体验。微交互小而强的原因在于：它们是产品的差异化细节。好的微交互能让产品提升一个等级。
我们认识了精心设计的微交互在创造美好体验方面的力量，现在让我们来探讨一下，如果糟糕的微交互可能会引发什么问题。
我想到的案例是手机通知。并不是说通知很糟糕，而是它设计得如此之好，以至于它有违用户的意愿。通知是由系统发起的触发器，它仅显示部分信息来吸引用户点击。
每个人都会遇到这样的情况：明明只是想看看时间，但在看到通知时点击进入信息，无声无息之中半个小时就耗费了。这不仅仅耗费了时间，更严重的是人们在驾驶时也会分心看通知。
另一个案例是 Facebook 的著名的“喜欢”按钮。这个精心设计的微互动，是 Facebook 的标志，但没有人意识到一个微互动可以对人们的生活产生如此大的影响。近期 Instagram 停止显示帖子上的点赞数，因为它对用户行为产生了负面影响。上面的例子也显示出：小事情可以产生大影响。
微交互也会令人讨厌，例如，在填写表单最后点击提交时，弹出一个对话框（图10），说表单填写中存在错误。这里的触发器是提交按钮，规则是显示一个对话框，反馈是静态文本——“有填写有误”。
这里的微交互形式是错误的，如果填写有误，提示应该在出错点附近。而且这里的反馈是糟糕的静态文本，对用户没有任何用处，因为它没有说明出错的位置和类型。因此，微交互的使用和场景真的很重要。
纵观全文，我们探讨了什么是微交互，以及如何创建符合交互模型的微交互来消除执行和评估之间的差距。接下来，我们研究了动态审美体验，以及我们如何在产品的微观层面上用微交互创造美好体验。
设计师有几种方法来创建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一种方法是把整个产品看成是一个微交互，如果你想增加另一个功能，那么就把它看成是另一个只包含一个微交互的产品。
我相信谷歌支付是以这种方式创建的，因为它是从支付开始，且只专注于支付，后来才引入了奖励和其他内容。
微交互有助于建立一个品牌标志和提升用户体验。我们喜欢或者讨厌产品的根源正是细节。细节是向用户展示你以用户为中心并为用户着想的方法。这就是微小的事情会带来巨大差异的原因。
作者：三分设
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
讲到UX文案，大家可能并不陌生：一个按钮、一个弹窗的文案填充，我们几乎每天都要与他接触。但即便如此，大家对他的态度通常是得过且过的：“文案嘛，有了就行，看得懂不出错就好，没什么值得注意的”。
确实，作为设计师，我们关注交互流程、视觉呈现，但UX文案似乎从来不是我们的首要考虑；在很多时候，文案与我们的设计流程是分裂的：要不就是设计完成后再填入，要不甚至直接让产品经理来提供文案素材；文案撰写，好像从来没有被我们真正重视过。
但UX文案真的只是一个无足轻重的辅助位吗？
首先，先抛结论，UX文案并不是无足轻重，相反的，它是好的产品体验中不可或缺的一部分。并且随着时代的发展和新兴应用场景的涌现，它对于产品体验的重要性正直线拉升。
在我们还将UX文案看作一个可有可无的流程时，一些先进的企业就有远见的意识到了它的重要性：早在2017年的I/O谷歌年度开发者大会上，三位职业UX文案作家就向我们展示了UX文案如何切实地为谷歌带来了产品数据的提升：
在用户在搜索”酒店“相关内容时，谷歌将直白的文案 “预定房间” 改为了更贴合用户心智的 “查看房源情况”；这一小小的改动，带来了17%点击量提升。
随着UX文案的价值不断的被发掘，在海外，已经有越来越多的团队将UX文案写作作为一个细分的的独立专业来看待。例如，在国际最大的旅游电子商务公司之一Booking.com，曾在不到一年的时间里增加了40名UX文案岗位，达到了每5或6个设计师中就有一个UX文案设计师的夸张比例。
面对海外对于UX文案的重视度激增场面，我们心中可能不免疑惑：“不还是为页面配文而已吗？平常不起眼的工作，怎么现在就好像突然变特殊了呢？”。
存在这样的误解，是因为我们对UX文案的认知还停留在过去，始终认为它仅仅是一个辅助位，最多起到“锦上添花”的作用，并不能真正影响核心用户体验的好坏。
而实际上，与我们印象中的边缘形象不同，UX文案（UX Writing），也叫内容设计（Content Design），所涉及的知识横跨体验设计、内容策略、用户调研，是一个多元的、完整的设计学科；旨在基于同理心与专业沟通技巧，通过合适的文字信息，在产品使用过程中为用户提供愉悦的体验，远不只是“为按钮填词”这么简单。
而随着时代的发展，UX文案的覆盖范围、呈现方式以及工作流程等都已经发生了巨大的变化；站在设计师的角度，我们希望通过以下几个方面介绍UX文案与过去相比发生了哪些变化，来帮助大家消除对UX文案的刻板印象，重新认识它在我们设计中扮演的角色，并学会运用它为用户呈现出更加优秀的产品体验。
首先，如今的UX文案有着比之前更广阔的范畴：过去关于文字，如今关于语言。
以前，我们讲到UX文案，指代的可能只包含APP里的标题、按钮等静态文字；但如今，随着智能家居、智能车机等新兴领域对于语音交互能力展现出的强需求，以及类似喜马拉雅等播客产品的持续火热，UX文案已经慢慢跳出了文字的范围，有了更广阔的发挥空间。
想象一下，当你结束疲惫的一天回到家时，你的智能家居助手应该以怎样的语气向你问好？应该使用什么措辞能最精准地得知你的意图？这些动态的、无实体的语音内容，也逐渐成为UX写作要关注的重点内容。
简单说，如今所有用户和产品产生交流的场景，都可以划分于UX写作的范畴。得益于科技的发展，UX写作逐渐地更接近了自己最终的目标，慢慢跳出了静态页面的框架，得以真正的与用户产生有意义的、愉悦的语言的交流。
其次，UX文案与过去最显著的不同之一是：不再仅是为页面填充文本，更多的是根据信息主导页面。
以下面一个常见的对话框为例，仅有一个小小的对话框来承载超额的信息；如果根据之前的“填充页面”的观念，我们要做的其实很简单，就是根据行文规范删减、重新排列文字，试图把过量的内容塞进小小的容器。
这样得到的结果在视觉上看起来可读了一些，但似乎也不尽人意。
这就是典型的机械性的填充页面，信息的展现完全受制于已给页面的结构，实际上已经脱离了更好传递信息的初衷。
如果我们调转思路，试着真正从传递信息本身出发，就能很明显的发现，原来的对话框最大的问题不是文字长短，而是信息过载—强迫用户在有限的空间里一次性确认两类信息：更改时间和通知参会人。而在我们上面的方案里，这个问题并没有被解决。
当我们真正开始用信息主导页面，应该做的是将一页多个问题拆分为每页一个问题，分步响应用户，对冗杂的信息进行分解，以真正创造清晰有效的对话。
如果体验没有达到理想的效果，通常需要改进的是整个设计，而不单单是文字。我们需要逐渐去理解的是，页面在根本上是信息传达的媒介，一昧的修改文本来适应页面，反而是本末倒置的做法。
目前，UX文案通常仅需要保证基本的功能可用性；即使是已经有文案规范的团队，更多的也是将其作为辅助位，保证文案“有一致性，不出错”即可；对于品牌形象、差异化的诉求则基本一笔带过。
相较于UX文案，大家习惯用Icon的质感、品牌色的搭配等视觉的呈现去传递品牌声音，因为这样的效果简单直观，是可以直接被“看得见”的，这点无可厚非。
但随着语音交互的兴起，以及近年来轰轰烈烈的品牌去色化趋势，单纯的利用纯视觉的呈现来塑造品牌形象变得没那么万能了，与此同时，UX文案对于品牌形象的重要性也逐渐被发掘；我们发现，在很多时候，一句措辞得体的语音信息，或者是一句抓人眼球的标语（Slogan），就足以弥补视觉上品牌呈现的缺憾，甚至更能与用户产生共鸣。
这就需要UX文案在保证基本的可用性的基础上，更要考虑什么才是真正适合自己品牌的声音。
例如Google Earth 过去的一句经典的标语：“Hello, Earth”，这句标语完美的契合了Google Earth的品牌形象，它简洁正向，并且和产品名称之间有巧妙的双关，即代表了产品本身，也暗示了Google Earth带领用户去探索世界的功能定位。
仔细观察苹果、谷歌的产品，你就会发现从他们的UX文案除了保证了基本的一致性和可用性外，偶尔会隐藏一些小巧思，这些小巧思与他们的品牌形象相互呼应，能让用户在产品使用中潜移默化地对其品牌形象、产品价值观形成认知，而这样与产品体验本身结合的认知构成往往更加坚固，比传统的广告宣传更容易让人信服与认可。
随着UX文案越来越广阔的范畴，我们过去熟悉的工作方法已经并不完全匹配如今UX文案的目标了；因为它包括的已经不仅是单纯的文字内容，更多的还有文案之间的层级结构、什么时候出现这段文字，以及这段文案向用户传递了什么情感等等，这已经超出简单的行文规则所涵盖的了。
那么，我们怎么才能真的做好UX文案呢？
我们根据以往的项目经验，总结出了除了通用行文规则之外，三个在关键节点上可以做到的几件小事，希望帮助大家能找到真正适合、高效的设计方法，并打造出优秀的UX文案。
首先，最基本也是最重要的：在流程上，永远要尽早的考虑文案问题。
我们过去熟悉的设计步骤是：“先把产品设计好，将有文字的地方空出，最后再填充。”
这样带来的问题是：关键的体验问题直到最后期才会被注意到，留给UX文案的发挥空间十分有限，能做的只是为糟糕的体验贴上掩饰的创可贴，并不能真正避免糟糕体验为用户带来的伤害。
正如我们上面所说，UX文案不仅仅是填充文字，它的核心是在产品与用户之间创造合适、愉悦的对话，所涵盖的内容几乎横跨产品体验的每个流程。
因此，要想真正缔造好的UX文案，永远要尽早地参与到设计流程中，这样才能真正的找出体验的问题，并最大限度的发掘UX文案究竟可以为此做些什么，创造与用户真正有效的交流。
其次，在我们着手输出UX文案时，请尽量在脑海中模拟真实的对话场景。
这个方法来自于最近的全球开发者大会（WWDC22）上，苹果设计团队向大家分享的UX写作方法框架：“PACE”：Purpose（目的）、Anticipation（预判）、Context（环境）、Empathy（共情）。
其中，在Anticipation（预判）里提到了 “将UX文案想象成一种对话” 的概念，意思是在设计产品的过程中，应该把页面上的文字看作一个与用户的对话，而不只是一个静态的短语；这样能更好的帮助我们预判用户的诉求。
想象在这样的场景：当你的用户在周末的晚上打开手机，开始调节明早起床的闹钟时间；你会怎么设计这里的UX文案呢？
使用流程似乎很简单：打开闹钟app，调节明早闹钟时间，确认设置完成。
上述的交互没有问题，用户可以清晰的完成设置。但如果考虑到上面提到的 “想象成一种对话”，那这个流程就还有可改进的地方。
因为在一段有效的对话中，交流应该是有来有往的：其中的角色应该有时在聆听，有时在发言；而不应该仅仅一方是单方面的输出（在上述的场景里，仅仅是用户一股脑的对闹钟app进行信息输出，闹钟app只是单纯的服从命令，这不是一个正常对话的模式）。
让我们想象是自己在跟用户在交流，就能很容易地发现用户想传递的底层信息并不是 “我要调闹钟了 ”，而是 “好不容易到周末了，我明天要多睡一会”，能解读到这一层话外音，我们就成功利用“对话”预判了用户的目的。
打开ios的起床闹钟试一下，你会发现它比我们的基础流程多了一个贴心的询问 ：“你要将此更改应用到这个定时中的所有周末吗？”；在这里，苹果实际上做了两层预判，第一层是预判绝大多数人的周末和工作日起床时间是不一样的，所以将复用的范围限定在了周末；第二层预判是在大多数情况下人们只能确认明天的起床时间，所以主选项是“仅更改下个闹钟”。
简单的一个改动，就把机械性服从命令的程序，变为一个有智慧、思想的助手。如果我们在每次输出文案时，都能试着想象真实的对话并剖析，可能就能逐渐把一个“可用的产品“变成“贴心的朋友”，真正地走进用户的内心。
最后，如果你还是觉得心里没谱，不确定是否输出了合适的文案，有一条被苹果和谷歌共同推荐的验证方法，简单粗暴但有效，那就是 “大声将你的文案念出来”。
就像我们刚刚反复强调的，UX写作其实就是与用户创造有效的交谈，那么最简单的验证方法就是真正说出来，将它真正变成一段对话，然后再去聆听，最直观的感受到你的语言听起来是否自然不生硬？是否有一些不易察觉的重复或语法错误等等？
大声地将你的文案念出来，如果能使你自己信服，相信也能使你的用户信服。
最后，读到这里，相信你已经对于UX文案有了一个全新的认识，并对如何做好它有了基本的概念。其实在日常工作中，每个产品对于UX文案的要求可能不尽相同，但重要的是作为设计师，我们能意识到他逐渐攀升的重要性并真正对他加以关注。引用苹果开发者大会上的一句话：UX写作其实就是始于对屏幕另一侧用户的好奇心，并真正怀着尊重和理解与其交流。只要能意识到这一点，相信大家都能呈现出真正有效的、令人愉悦的UX文案。
作者：腾讯ISUX
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。
// 为什么要数据可视化
数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。
举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律
关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。
一、选择适合的图表
数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。
1. 分析数据关系
根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。
构成关系
构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。
常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。
关键词：“占比、比例、百分比”
比较关系
比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。
常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。
关键词：“增减、升降、涨跌、波动”
分布关系
利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。
常用图表：散点图、热力图、雷达图等
关键词：“随着……而变化、A/B之间的相关性、交/并集”等
关联与流转
流转关系是B端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。
常用图表：关系图、桑基图、漏斗图、进度图等
关键词：“流程步骤、留存、转化、关系”
2. 分析数据特征
按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。
变量特征
分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。
维度特征
多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类
层级特征
多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：
例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。
流程特征
流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。
二、强化视觉层次
选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。
1. 强化数据特性
使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差
2. 色彩视觉传达
除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。
我们在之前的文章里有介绍过图表的取色模型，通过调整颜色HSL值的区间，可以得到以下三种意图色板：
那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。
定性型：使用色调来进行分类
数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：
定量型：使用深浅色板强调内在顺序
如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。
三、图表中的响应式设计
B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。
1. 布局框架适配
在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。
如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。
2. 图表元素适配
要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。
3. 极值适配
因B端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。
还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。
// 结语
数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键。
* 以上图表中均为虚拟数据，仅作为案例参考
感谢阅读，以上内容均由百度MEUX团队原创设计，以及百度MEUX版权所有，转载请注明出处，违者必究，谢谢您的合作。申请转载授权后台回复【转载】。也欢迎加入MEUX,视觉/交互/运营设计师，可投简历至MEUX@BAIDU.COM (注明信息获取来源如：站酷）
关于我们：
MEUX,百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。
蓝蓝设计的小编 http://www.lanlanwork.com