前言：

B端行业在近两年来，由于其有稳定的变现来源，在互联网下半场的行业当中，一直受到追捧，

它的兴起，也造就了B端设计师的需求火热，而互联网的新闻也证实了这一点：

腾讯：腾讯云、智慧零售、企业微信等着重发力

阿里：阿里云、钉钉、阿里妈妈等产品也处于B端前列

今日头条：飞书、people、等内部B端系统，着重向国外市场发力

传统的B端行业大佬在这一年也频频发力：有赞、金蝶、用友...都发布了不同的领域的产品

而现在，对于B端设计师有哪些分类呢？同时对于一些想转型成为B端设计师都有什么要求呢？

我们先看看现在市场上对于B端设计师的需求：

从招聘需求上可以看出，这类B端设计主要是针对一些B端后台页面进行体验设计，更多会从交互层面上进行思考，这也是B端设计的一大类：我称其为B端业务设计

除了业务层设计之外，还活跃着另一类B端设计：数据设计师

这类设计对数据的需求大，他们会对B端类的展示数据进行设计，因此我们将它称为B端数据设计

现在如果你是一个准备求职的设计师，相信你多多少少对于B端产品都会有所了解，因此我们来看看B端设计，目前是一个怎样的发展～

一、B端业务设计趋势

我们自身对其定义是牵涉到B端业务层设计，主要有管理页面、B端移动终端、各种移动设备等。我就来聊聊我观察到现在B端设计的行业现状以及设计要求

1.1多端设计需求巨大

B端从来不乏多端设备的出现，因此对于设计师而言也会有所考验

它和传统的app设计、网页设计不同，在日常的场景当中，B端的设备往往不止于此

比如在餐馆经常看到的点餐系统，这些设备的出现，更加考验的不仅仅是设计师对于视觉的设计能力，更加需要B端设计师对于整个产品业务的理解、切身体会使用者的效率，这也是B端设计师的门槛之一

我们再仔细拆分，在一套点餐系统当中要考虑的因素：用户操作的距离，是有只允许店主操作还是顾客也能自主选择，使用者的年龄、使用者选择所花费的时间、选择的所需时间等待，都是需要设计师进行全盘考虑的。

所设计的东西，不仅要好看，同时还要满足多种用户对于终端的需求

因此B端产品的多端设计，是一个重要的考验。

1.2设计中台

设计中台这个概念已经炒了有两三年了，但对于一些大公司团队而言，在一定程度上确实能够给用户带来设计效率上的提升。但是对于一些中小团队来说，就要考虑到的更多是组件化的思维，而并非大而全的设计中台

说到组件化设计，必须要提的就是原子设计

原子设计是一种设计系统的思维方式，他可以帮助我们如何将产品的元素整合到整个系统当中

原子设计就是将一些设计元素拆解成极小的设计单位，可以是一种字体、一个图标、一个矩形，然后将原子组合成零件、制作成模块、搭建成模版、最后形成页面

让自身的组件能够有所自定义，从而使用到组件能够适应于工作的大多数场景，原子设计要分开仔细讲，可能需要几篇文章，因此就不展开，大家感兴趣之后会写文章讲到

对于组件化，每个公司对其需求各不相同，但如果是一款WEB端的产品，那对于组件的需求将会十分巨大。因为不使用组件，面对关系复杂、页面层级繁多、交互状态多样的情况下，你很难做到每一个页面都能够统一，因此小到组件化，大到设计中台，是B端设计师必备技能

1.3行业更加细分

B端设计，行业细节也会更加明显

比如之前做过IM系统的设计师，面对聊天，通讯录、组织架构等一系列模块已经烂熟于心，但是在尝试CRM系统中，一套新的业务逻辑，考验的将是设计师对于业务快速理解的能力。

比如在医美系统当中，重点页面你需要把握在档案模块以及客户详情，因为，每一个客户对于医美师来说，都需要一系列的建档操作，必须关注细节，很多B端设计的细节，往往决定着使用效率，要给出用户很多使用的路径，才能让让软件做到好用

二、数据设计的趋势

由于B端设计的兴起，产业互联网的转型，而作为产业互联网转型的展示性成果，一块数据可视化大屏自然缺少不了。而B端行业各种实业种类繁多，虽然现如今有很多可视化大厂，总结了许多不同行业的模版，但模版终究是模版，要真正解决问题，不得已的去定制一些自己的数据可视化大屏。

例如：双11大家看到的数据可视化，便是由阿里数据可视化团队定制而成的大屏

通过百度/谷歌关键词查看，大家也能窥探一二，近几年对于数据可视化热度依旧不减，行业也逐渐成熟

从数据上也能够看到，对于数据可视化的热度也在持续增长，也进一步说明数据可视化未来是被人看好的。而我就来给大家说说数据可视化只为有哪些，需要具备什么能力呢？

2.1 数据设计师

这类职业对于设计师而言要求自身对数据有着很强的敏感性

而数据设计师不单单只是对现有数据进行简单的绘制，要能够理解数据其背后的含义，在什么时候，运用什么数据图形，使用什么图形对于业务的表达更为合理，同时也要对数据进行一定的整理与清洗工作，要从数据中提取出顾客想要的数据

比如国外最出名的便是拿破仑行军图，便是一张经典的数据可视化

现在数据设计师更多是UX设计转型成为，因为他们能够兼顾艺术表达和数据创作两种不同的思路，更能够满足这类职业的诉求

国内对于数据设计师更多的落地是运用在制作一些数据大屏设计模版，比如公司在之前的数据设计当中，已经有一些产出和可以复用的组件，需要有数据设计师对这些组建根据业务的不同，进行不同的组合。

这里呢，给大家推荐基本数据可视化比较好的书籍：

《数据之美》

2.2数据可视化设计

这类设计师更偏向视觉设计，通常是企业定制的设计需求，有很多ToG、ToB项目都是需要为企业定制需求，很多视觉设计师开始转型从事这个行业。对于这类设计师而言，经常处理的是如何让画面看起来更加炫酷，比如如何增加一些伪3D的效果，有一些动态光晕的实现效果

因此，你需要熟悉一些视觉基础软件：PS、AI、Sketch、AE，同时对于企业来说，他们想要一些动态的东西，比如简单的动态背景，等等。而这类数据可视化的载体通常为网页居多，也造就了很多动态效果通过CSS进行实现，因此想做到这类需要有较好视觉功底，能够处理数据展示层面的各种问题

2.3 3D可视化盛行

这个在我之前文章其实有所讲解，对行业现阶段而言，各大公司从事的人也是越来越多。他们对于自身的要求会更明确，首先3D数据可视化相对于其他两个门槛要更高。她要求设计师能够独立产出3D视觉效果，比如一些楼宇项目，需要有对楼宇的整个剖析，或者是智慧城市项目中，能够先通过设计师C4D+AE实现出很好的效果，然后再对这些效果进行游戏引擎的还原，从而实现可视化的落地。因此你需要对C4D、AE两款软件比较熟练的同时，对数据展示也有自身的心得体会

3D数据可视化知名产品：

http://launchit.shanemielke.com/

我总结国内外很多大厂制作可视化的利器，分享给大家：

阿里云：DataV

腾讯云：腾讯云图

京东云：数据大屏

百度云：数据可视化sugar

数据可视化展示相关：

GrowingIO：专注数据埋点 可以参考设计形式

神策数据：也是数据埋点 可以参考设计形式

数据神器：

Tableau：功能最全的数据神器

转自：站酷-

讲一个老东家的故事。

一次产品迭代会上，老板在台上讲到打算重构C端产品框架，想重整标签栏的标签设定。可在讲到这一部分的时候卡壳了，迟迟说不出“标签栏”这个控件名，气氛有那么一丁点尴尬。这时在座的一名产品经理慷慨解囊地说道：底部导航栏！会议得以继续。

嗯，不全错，这么说也算能理解。控件在界面底部，能引导用户切换页面。但如果标签栏把导航栏的名字占了...那原本的导航栏应该叫什么呢？顶部标题栏？那导航栏里的内容控件又应该叫什么？左上角或者右上角的按钮？

接地气的名称让我们一听就懂，直到有一天你打算跳槽，你拿着自己的作品到下家面试，设计总监几个术语啪啪把你问的不知所云。这些“死控件”、“死栏目”在页面上不可或缺，在设计每一个页面时你以为你对它们早已了如指掌，偏偏在关键时刻，它们却六亲不认了。（说多了都是泪，我曾经面试也吃过专业名词的亏，以后有机会再娓娓道来。）

“我又不走形式主义，为什么一定要说专用名词装x呢？接地气的名称不是挺好吗，沟通。”——很简单的道理，如果名词和概念都混淆不清，有没有花功夫在UI设计领域进行深度专研也就一目了然了，还何以谈论如何将它们运用自如呢？——“你连迪丽热妈和古力娜扎都没分清，你敢说你知道什么是真皮沙发？”

于是我的经历，让我产生了一个想法。是时候做一些知识内容沉淀与分享了，不能让更多的人走我踩过的坑。第一期我们便来讲一讲导航栏。

-

01.导航栏究竟在哪里

导航栏 Navigation Bar，也简称为Navbar。一定会有不少刚入门的UI新人，在诸多的Bar控件中，难以区分它所指代的区域。

在iOS上，导航栏是指显示在应用程序顶部，位于状态栏下方的容器区域，层级应高于当前页面内容。

在安卓上，Google公司在Material Design中也赋予了它同样的定义，但是却给了它另一个名称，顶部应用栏（ Top App Bar）。

iOS与安卓的规范与命名区别

请务必要记住：导航栏是用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用。——所以回到开头的小故事，为什么标签栏不能叫做底部导航，因为标签栏是构架了多个屏幕之间平级页面的内容切换。和“导航”的定义没有半毛钱关系。

_

02.规范里告诉我们该怎么做 vs 实际项目我们该怎么做

一个基本的导航栏容器一般承载的信息可能会有：标题；导航按钮；内容控件按钮；其他控件（比如搜索栏、分页标签或分页控件等）；千万别忘了还有分割线。

2.1 导航栏标题

时间倒退回2017年以前，这时候的移动端规范下的导航栏还是循规蹈矩的，样式单一。但随着iPhone X等一系列全面屏手机相继问世后，移动设备在屏幕高度上有了进一步的扩展，界面设计在一屏内的发挥空间也随之增加。iOS11发布后，大标题导航栏设计风格兴起，随后被引入平台规范。

于是现在iOS与Material Design在导航栏上也都定义了两种导航栏标题规范：常规标题与大标题。

常规标题是指在高度为88px（iOS@2x下）的导航容器中，居中放置一个当前页面的标题。标题字号一般为34px-38px（34px为iOS标准规范，但实际项目中可以在尽量在不小于34px标准的情况下根据设计需求确定）。

常规导航不同标题字号的案例及视觉效果

大标题是将导航栏栏高增加到192px（iOS@2x），保留高度为88px的导航容器来承载内容控件按钮，将标题下坠居左。iOS的标准规范定义大标题的字号为68px。但由于英文有大小写区分，在视觉上有一定的层次表现，而中文因为缺少一定的层次结构，并且相同字号的中文视觉大小大于英文，所以大多数时候我们在进行大标题设计时，会适当缩小，一般为56px-64px居多。

大标题不同标题字号的案例及视觉效果

大标题导航栏的优点毋庸置疑，页面留白更多，呼吸感更强，大气现代、逼格更高，因为页面标题巨大，能够帮助用户快速确认当前所处位置；采用统一的大标题，让页面布局风格快速统一。但缺点也显而易见，因为增加了导航栏的高度，导致屏幕利用率降低，一些通过广告变现或更加注重一屏内内容呈现的应用便中和了常规导航与大标题导航的优缺点，进行了风格改进。

改进的大标题案例

那我们如何在常规标题和大标题之间抉择呢，这可不单单是设计风格的问题，还受产品定位与功能的影响。苹果的设计师在Apple Music中实验并验证了一条结论——在内容非常丰富、层级结构较深的产品当中，大标题能够帮用户快速确认自己的位置。

所以我理解的适合使用大标题风格的产品一定是：突出内容呈现而不是功能繁琐的；产品定位更偏向于现代或文艺艺术的；需要快速统一界面风格的。而层级结构需不需要很深，这并不一定，我反而觉得功能越单一、产品体量级越轻的应用，越适合大标题。

所以如此看来，国内使用大标题成功的案例就为数不多了，这可能与中文字体还有国内app产品功能都比较繁琐的原因有关，真正做到了使用大标题快速帮助用户确认自己位置，并且结合了产品特性与风格的，我认为人人都是产品经理的移动端在这方面做的非常棒。

 2.2 导航按钮及内容控件按钮

iOS规定导航按钮位置仅能用于放置返回按钮，可以添加一个层级的面包屑，帮助用户有效地明确当前页面层级；Material Design中，则不仅可以放置返回按钮，还另有作用，菜单图标-用于打开导航抽屉 或者 关闭图标-关闭工具栏。

iOS与安卓的导航按钮区域区别

这一点与iOS的定义有着天壤之别，iOS非常明确地赋予了工具栏的定义，并且将导航栏和工具栏（Toolbars）彻底地分离开，典型案例就是Safari。

iOS明确地将导航栏与工具栏分离开

在内容控件上iOS与Material Design也大相径庭，Material Design不去限制你的内容控件多少，因为它提供了溢出菜单，并可以根据屏宽的变化，自适应释出和收纳溢出菜单中的控件。

而iOS则规定我们，要给内容控件按钮足够多的空间，必要的时候，隐藏导航栏标题也未尝不可。

Material Design的溢出菜单也被运用在iOS端

虽然国内遵从Material Design进行Android应用设计的情况相对较少，但它提供的设计理念与方案却并不局限在安卓平台。

 2.3 分割线

分割线只是一种体现形式，我想要表达的是，别忘记区分导航栏与内容界面的视觉层级关系。Matetial Design提醒我们，顶部应用栏可以与内容位于同一高度，但滚动时，请增加导航栏的视觉高度，让内容在其后方滚动。而iOS则默认采用了背景模糊的方式区分了导航栏与内容区域的层级关系。

区分导航栏与内容区域的层级关系

 2.4 其他控件

关于其他控件，iOS只在规范中提及到了分页控件。苹果设计师考虑到部分场景在当前页面中还存在信息层级结构划分，此时建议可以在导航栏中使用分段控件。

但国内的应用程序早已将导航栏容器的作用发挥到，基于导航栏层级始终高于内容区域的特性，我们通常可以将分段控件、分页标签、搜索栏等等用户可能随时使用的工具放在导航栏中。

导航栏通常会承载的其他控件

-

03.总结

如今我们的生活，到处都是大幅图像广告，纷扰喧闹的各类短视频与直播。这是一个快节奏时代，我们更倾向阅读图像。为什么我们偏爱图像视觉超过文字？从人类进化角度来看，原始时代的祖先通过五感感知着这个世界，其中通过视觉来感知判断生活，其他四感辅助之。即使后面我们发明了文字，但发展至今，对图像的本能吸引力依旧强烈。因为在我们认知的潜意识里图像相较于文字更能让我们快速轻松理解并记忆。

图像如此重要，设计作品中当然也必不可少。因为图片，它能一定程度上决定画面基调；引导视觉流程；调剂平衡多段文字信息的枯燥性，让阅读变得轻松容易。 

在UI设计中，我们经常需要把设计输出物拿给产品经理或者其他有设计决断力的人看，UI设计中图片使用的好与坏，能很大程度上影响着决策者的感知，以及你的设计过稿率。

如下左图：商品视角、调性、细节，都没有右图来的统一、有质感。单看这两张图，会让用户有这样的心理感知：左图感觉像山寨盗版商城；右图则会认为是严肃官方认证商城。所以，在同样页面布局下，不同的图片使用与处理，能让UI页面的品质有较大的感知差异。 

图片的使用如此重要。那么，我们在正式做UI设计前，首先需要弄清楚图片在页面的占比情况以及后续图片的支撑来源问题。

1.了解图片占比与来源

在构思UI页面阶段，首先需要了解以下两个问题：1.图片区域占比问题；2.图片来源问题。当页面图片占比多，且让用户自定义，那么需要预估到APP上线后设计可控率会降低。换句话说，实际上线效果会不尽人意。如下图：由于淘宝和网易严选平台属性不同，在图片品控上就有着不同的视觉感受。当然，不是说淘宝做的不好，而是当一个平台集纳不同的店铺，不同调性的产品类型，即使有图片规范，也难如统一品类、调性的产品来的统一。 

弄清图片内容的可控性问题后，开始进入设计环节，那么我们该如何选择图片？

2.怎样选择以及运用图片

1.是否符合产品气质？

在不同的场合有恰当合适的场景搭配，是十分基础且重要的事情。在UI设计中，任何一个部分的设计以及元素运用都需要为产品服务。图片也不例外。如果你是厨房类APP，头图选用小清新感的图片，就显得不够合适，带有环境食材元素的图片才更让用户有共鸣。 

2.是否能清晰表达产品核心内容？

图片是否主体明确？能一眼正确无误的传达核心内容？会不会因为其他元素元素抢了主体视觉，找不到视觉重点？ 

3.是否美观、有品质、让人想拥有？

图片是否能表达美好生活以及美好品质的向往？光影关系是否自然？图片是否高清有细节？ 

当明白图片如何选择后，还想和你分享一些冷门且重要的图片过稿小技巧。记下来，将大大提升你的设计过稿率。

3.过稿高手图片使用小技巧

1.图片风格统一风格调性

漂亮图片有很多，如果我们都以漂亮为基准，找出来的图片也会形色各异。由于用户的实际使用场景是：浏览一个完整APP，统一风格调性比美更重要。如果商品角度不一样；饱和度高低不同；抽象与具象等，都会形成产品不统一，用户视觉不适应等问题。 

2.图片使用符合场景，让决策者可以看到最后的显示效果

有时我们为了赶时间，直接用图片填充插件，让图片区域自动填充。但我还是想要给到你这样一个建议：一个专业且成熟的设计师，即使是设计初稿，也不能随便拿张图，凑合一下。任何时候的汇报，都需要有着处女座对于事物的完美要求，过自己这关。因为任何时候你的表达与表现，都形成了你在别人心目中专不专业的看法，从而影响着后续的设计话语权问题。如下图都是商城陈列页面，右侧的图片给出上线的实际效果，更贴合产品，方便设计决策者给出建议方向，或做出决策。 

总结

我们都是视觉动物，不管你是否愿意承认：我们常常通过视觉表象，才决定是否愿意去更深入的了解某个东西。

设计就是在做产品视觉表象的表达，我们需要尽可能使用贴切的，漂亮的图片。让UI视觉看起来更加美观，让用户愿意停留，认可以及信赖平台。 

转自：站酷-丘丘的设计笔记 

我把整体分为了三个部分

1.空洞的设计方法（因为大多数的人对设计的方法论都处在一个看了、学了、但是用不上的阶段，主要是讲在我分享的内容中可能会用到的一些设计理论和方法）

2.很一般的设计流程（这个优化设计的流程其实千千万，最重要的还是和真实的项目相结合，每一个点都值得拿出来写一个长篇大论，有机会具体来说说）

3.不成熟的实际应用（设计流程大多复杂而冗长，对于处在初创期或者发展期的产品来说，可能并没有那么长的时间线来实践，这一点也是我想和设计同行一起探讨的问题）

“奥卡姆剃刀原理”是设计师们耳熟能详的一个理论，即“如无必要，勿增实体”，在UI\UX设计中，我的理解是，如果能够在用户的行为路径上和交互方式做出优化，就不要增加新的功能。

这个理论会贯穿在整个产品设计流程中。

用户体验五要素，是我们在学生时代就会听到的一个理论，但其实对于五要素真的对应着什么，意味着什么，可能并没有一个确切的概念。

我说说我的理解：
这五个要素，从战略层到表现层，是一个从抽象到具象的过程，是一个易用产品背后必不可少的东西。

战略层：用户需求、产品目标——就是说在使用完这个产品之后，能不能很好的满足了用户的需求，达没达成做这个产品的目的。

范围层：在产品定位明确的情况下，我们要有什么样的功能和内容——具体需求

结构层：各页面、功能的联系，用户通过一个什么样的路径、什么样的层级关系完成一个流程

架构层：按钮、控件、图片、文本区域的布局，用户对页面的整体感知

表现层：长什么样，颜色啊、风格啊等等）

所谓KANO模型，它和接下来要说的消极选择、NUF评估筛选都可以理解成为一个需求筛选的方法，他们都能够帮助设计师在众多需求当中，找到最合适和最合理的那个。

KANO模型中，我们可以把需求或者说创意点分成5个属性

1.魅力/惊喜属性
用户意想不到，如果没有这个功能用户可能感知不到，但是做了这个功能，用户会非常惊喜和满意。（我们有没有这样的功能？首页tab bar动效）

2.期望/期待属性
做了这个功能，用户满意度会提升，否则反之，会降低

3.必备/必要属性
一个产品的有效性功能，最基本的功能。如果做了用户满意度不会提升，觉得理所当然，但是如果没有，满意度会大幅下降。

4.无差异因素
做和不做对用户的影响并不大，用户也不太在意。

5.反相/错误因素
你不做还好，一旦做了用户反而会反感，降低满意度。

对于一个产品，最重要的即是必要属性和期望属性。

消极选择其实是我们在生活当中也用得到的筛选方法，简单来说就是：当我们想到的两个idea都能用来解决一个问题，那么我们要选这两个当中实现成本低的那个或者说“性价比”最高的那个。

NUF评估筛选相比前两种方法，就显得稍微繁复一点，用起来可能并不如前两种方法更容易。
它其实是，在新颖、使用、可行三个维度，对我们要筛选的点进行打分，再根据分值进行筛选。
用起来其实比较消耗时间。

我把这一部分分成了4个步骤，分别是：桌面研究，用户研究、概念提炼、设计方案

产品深度使用，提问并分析（比如素养课页面，有多少卡片类型，有多少内容分类？哪些课程点击率比较高，为什么？等等）-同类产品分析-用户体验诊断，舒适体验和不是体验-确定设计方向，产品定位、改版（优化）目的、用户群体、价值点）（确定大致设计方向，提出假设，如：经过我们上述的研究和分析，发现丰富、高质量的内容和清晰的布局，能够让用户有浏览和互动欲望，从而达到转化目的

我们一般通过定量问卷和定性访谈来从用户那里获得想要的信息点以得出用户画像和验证我们前期的假设

在做访谈之前，要明确的就是我们要得到什么，或者说我们要访谈用户的哪些方面
即：用户习惯的研究、用户行为模式的研究、用户行为动机的研究

在设置问题时，要明确每个问题的背后我们关注的点在哪里，不可能在不相干问题中浪费时间。

通过前面的两个阶段，我们已经可以得到很多东西了：完整清晰的用户画像、同理心地图、As is 旅程图。我们通过这些东西，找到我们可以优化、可以提升用户体验的地方，即机会点，然后利用我们之前提到的筛选方法，进行创意决策。

（同理心地图）

（As is 旅程图 来自：池喜太厚）

通过前面完整的研究和决策，在此阶段，得出交互设计方案、UI设计方案等等

这一部分是我想和大家探讨的，前面所说的设计流程，多数时候在实际工作当中应用起来并不容易，这也是很多设计师对设计方法嗤之以鼻的原因，觉得设计方法都是玄学，胡说胡有理，这里我也说说我的一些思考。

在我们日常的工作当中要把上述的所有流程都走到，所有设计方法都应用，显然是不现实的。而且，在产品的不同阶段，优化和迭代的驱动力是不同的。在初创和成长阶段，一般为问题驱动，在成熟期，一般为价值驱动。

也就是说，平时的工作可能是一个，发现问题到解决问题的过程，我们需要把成熟的方法和流程进行拆分，进行小部分流程的应用，这样也能够让我们得出一个合理的设计方案。

转自：站酷-鹿爷不是咸鱼

原理

1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动
   

2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40；
   

   window.onload = function(){
               var box = document.getElementById("box");
               document.onkeydown = function(event){
                   event = event || window.event;
                   console.log(event.keyCode);
               }           
           };
   3

   
   

   
   

   3.方块的移动实际上就是坐标的改变，因此需要offsetLeft 和offsetTop 来获得当前方块的坐标，然后将坐标进行一定的更改，就可以实现移动的效果了，下面给出代码

   window.onload = function() {
               document.onkeydown = function(event) {
                   event = event || window.event;
                   //设置移动速度
                   var speed = 10;
                   //当ctrl和方向按键同时按下时，提升移动速度
                   if(event.ctrlKey) {
                       speed = 50;
                   }
                   //获取div
                   var box01 = document.getElementById("box01");
                   switch(event.keyCode) {
                       /*keyCode返回按下按键的编码
                        * 37 向左
                        * 38向上
                        * 39向右
                        * 40向下
                        */
                       case 37:
                           box01.style.left = box01.offsetLeft - speed + "px";
                           break;
                       case 39:
                           box01.style.left = box01.offsetLeft + speed + "px";
                           break;
                       case 38:
                           box01.style.top = box01.offsetTop - speed + "px";
                           break;
                       case 40:
                           box01.style.top = box01.offsetTop + speed + "px";
                           break;
   
                   }
               };
   
           };
   

   
   

   
   

   这样就可以简单实现方块的移动，但是此时我们会发现一个问题，当我们进行移动的时候，按住按键不松手，理论上方块应该直接平滑的进行移动，但实际上并非如此，第一下它会有一个小的停顿，这实际上是浏览器防止误触所设置的，因此我们需要对此进行优化
   解决方案
   
   这里我采用了定时器的做法来解决这个问题，因为控制移动的因素有两个，一个是控制方向，一个是控制速度，控制方向没有问题，因此我们需要改变速度
   setInterval（function(){},time）;这是一个定时器，我们只需要在time时间内调用一次函数，就可以解决停顿的问题了
   下面附上修改后的完整代码
   
   
   

   <!DOCTYPE html>
   <html>
   
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           #box01 {
               width: 100px;
               height: 100px;
               background-color: #008000;
               position: absolute;
           }
       </style>
       <script type="text/javascript">
           window.onload = function() {
   
               //获取div
               var box01 = document.getElementById("box01");
               //设置移动速度
               var speed = 10;
               //设置移动的方向
               var dir = 0;
   
               setInterval(function() {
                   switch(dir) {
                       /*keyCode返回按下按键的编码
                        * 37 向左
                        * 38向上
                        * 39向右
                        * 40向下
                        */
                       case 37:
                           box01.style.left = box01.offsetLeft - speed + "px";
                           break;
                       case 39:
                           box01.style.left = box01.offsetLeft + speed + "px";
                           break;
                       case 38:
                           box01.style.top = box01.offsetTop - speed + "px";
                           break;
                       case 40:
                           box01.style.top = box01.offsetTop + speed + "px";
                           break;
   
                   }
   
               }, 50)
   
               document.onkeydown = function(event) {
                   event = event || window.event;
   
                   //当ctrl和方向按键同时按下时，提升移动速度
                   if(event.ctrlKey) {
                       speed = 50;
                   } else {
                       speed = 10;
                   }
                   //使dir等于keycode的值
                   dir = event.keyCode;
   
                   //当鼠标松开时，停止移动         ---如果不写这一个会造成无法停止移动的效果
                   document.onkeyup = function() {
                       dir = 0;
                   };
   
               };
   
           };
       </script>
   </head>
   
   <body>
       <div id="box01"></div>
   </body>
   

</html>

————————————————

版权声明：本文为CSDN博主「loving-cat」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_42878211/article/details/104558443

vuex的基础

1,状态管理(共享)

缓存数据==>内存， 只要刷新页面，数据就丢了

订单，详情等，，，不适用vuex缓存数据



用于



非父子通信的问题

缓存后端数据，提高用户体验

注意：

vuex只能有一个store,

为了防止多人修改，我们切割成子store, 再合并成唯一一个大的store对象

模块写法

import Vue from 'vue'
import Vuex from 'vuex'
import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {

  }, // "全局"状态
  mutations:{

  },//唯一修改状态的地方
  //异步处理
  actions:{
  },
  // 对上面的“全局状态”进行数据处理， 类似于vue中的计算属性
  getters:{
  },

  modules:{
    cinema,
    tabbar
  }
})
export default store

2,子模块的写法

const module = {
  namespaced:true, //命名空间
  state :{
    cinemaList:[]
  },
  actions:{
    store.commit("setCinemaList",res.data.data.cinemas) //支持传参
  },
  mutations:{
    setCinemaList(state,data){
      console.log("setCinemaList",data)
      state.cinemaList = data
    }
  },
  getters:{
    topDataList(state){
      //state形参s， vuex自动调用时候，传来值
      return state.cinemaList.slice(0,5)
    }
  }
}

export default module

3,为了防止页面刷新丢失数据,所以还得找到其他插件来帮忙

import createPersistedState from "vuex-persistedstate"; //在index.js页面加入这个插件

// 加入下面的代码
const store = new Vuex.Store({
  plugins: [createPersistedState({
    reducer(val){
      return {
        user: val.user
      }
    }
  })]

————————————————
版权声明：本文为CSDN博主「m0_46436313」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_46436313/article/details/104572076

中介者对象践行了最少知识原则，指一个对象尽可能少的了解别的对象，从而尽量减少对象间耦合程度。这样各个对象只需关注自身实现逻辑，对象间的交互关系交由中介者对象来实现和维护。



需求背景：



手机购买页面，在购买流程中，可以选择手机的颜色及输入购买数量，同时页面有两个展示区域，分别向用户展示刚选择好的颜色和数量。还有一个按钮动态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量少于这次购买的数量，按钮将被禁用并显示库存不足，反之按钮可以点击并显示放入购物车。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中介者模式 购买商品</title>
</head>
<body>
    选择颜色： 
    <select id="colorSelect">
        <option value="">请选择</option>
        <option value="red">红色</option>
        <option value="blue">蓝色</option>
    </select>

    输入购买数量：
    <input type="text" id="numberInput">

    您选择了颜色：<div id="colorInfo"></div><br>
    您输入了数量：<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>请选择手机颜色和购买数量</button>

</body>
<script>

// 最初级的写法
var colorSelect = document.getElementById('colorSelect'),
    numberInput = document.getElementById('numberInput'),
    colorInfo = document.getElementById('colorInfo'),
    numberInfo = document.getElementById('numberInfo'),
    nextBtn = document.getElementById('nextBtn');

var goods = {
    'red': 3,
    'blue': 6
}

colorSelect.onchange = function(){
    var color = this.value,
        number = numberInput.value,
        stock = goods[color]

    colorInfo.innerHTML = color;

    if(!color){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请选择手机颜色';
        return;
    }

    if( ( (number-0) | 0 ) !== number-0 ){      //用户输入的购买数量是否为正整数
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请输入正确的购买数量';
        return;
    }

    if(number > stock){     //当前选择数量大于库存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '库存不足';
        return;
    }

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入购物车';
}

numberInput.oninput = function(){
    var color = colorSelect.value,
        number = this.value,
        stock = goods[color]

    colorInfo.innerHTML = color;

    if(!color){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请选择手机颜色';
        return;
    }

    if( ( (number-0) | 0 ) !== number-0 ){      //用户输入的购买数量是否为正整数
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请输入正确的购买数量';
        return;
    }

    if(number > stock){     //当前选择数量大于库存量
        nextBtn.disabled = true;
        nextBtn.innerHTML = '库存不足';
        return;
    }

    nextBtn.disabled = false;
    nextBtn.innerHTML = '放入购物车';
}

</script>
</html>

在上个示例中，对象间联系高度耦合，只是两个输入框还好，但如果有多个的话，相互联系就非常复杂了，此时就要考虑用到中介者模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中介者模式 购买商品</title>
</head>
<body>
    选择颜色： 
    <select id="colorSelect">
        <option value="">请选择</option>
        <option value="red">红色</option>
        <option value="blue">蓝色</option>
    </select>

    选择内存： 
    <select id="memorySelect">
        <option value="">请选择</option>
        <option value="32G">32G</option>
        <option value="16G">16G</option>
    </select>

    输入购买数量：
    <input type="text" id="numberInput">

    您选择了颜色：<div id="colorInfo"></div><br>
    您选择了内存：<div id="memoryInfo"></div><br>
    您输入了数量：<div id="numberInfo"></div><br>

    <button id="nextBtn" disabled>请选择手机颜色、内存和购买数量</button>
</body>
<script>
    var goods = {
        'red|32G': 3,
        'red|16G': 0,
        'blue|32G': 1,
        'blue|16G': 6
    }

    //引入中介者
    var mediator = (function(){
        var colorSelect = document.getElementById('colorSelect'),
            memorySelect = document.getElementById('memorySelect'),
            numberInput = document.getElementById('numberInput'),
            colorInfo = document.getElementById('colorInfo'),
            memoryInfo = document.getElementById('memoryInfo'),
            numberInfo = document.getElementById('numberInfo'),
            nextBtn = document.getElementById('nextBtn');

        return {
            changed: function(obj){
                var color = colorSelect.value,
                    memory = memorySelect.value,
                    number = numberInput.value,
                    stock = goods[color + '|' + memory];

                if(obj == colorSelect){      //如果改变的是选择颜色下拉框
                    colorInfo.innerHTML = color;
                }else if(obj == memorySelect){
                    memoryInfo.innerHTML = memory;
                }else if(obj == numberInput){
                    numberInfo.innerHTML = number;
                }

                if(!color){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请选择手机颜色';
                    return;
                }

                if(!memory){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请选择手机内存';
                    return;
                }

                if(!number){
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请填写手机数量';
                    return;
                }

                if( ( (number-0) | 0 ) !== number-0 ){      //用户输入的购买数量是否为正整数
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '请输入正确的购买数量';
                    return;
                }

                if(number > stock){     //当前选择数量大于库存量
                    nextBtn.disabled = true;
                    nextBtn.innerHTML = '库存不足';
                    return;
                }

                nextBtn.disabled = false;
                nextBtn.innerHTML = '放入购物车';
            }
        }
    })()

    colorSelect.onchange = function(){
        mediator.changed(this)
    }

    memorySelect.onchange = function(){
        mediator.changed(this)
    }

    numberInput.oninput = function(){
        mediator.changed(this)
    }

    //以后如果想要再增加选项，如手机CPU之类的，只需在中介者对象里加上相应配置即可。
</script>
</html>

在实际开发中，还是要注意选择利弊，中介者对象因为包含对象间交互的复杂性，所以维护成本可能也会较高。在实际开发中，最优目的还是要快速完成项目交付，而非过度设计和堆砌模式。有时对象间的耦合也是有必要的，只有当对象间复杂耦合确实已经导致调用与维护难以为继，才考虑用中介者模式。

————————————————
版权声明：本文为CSDN博主「一期一会」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34832846/article/details/85989945