整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
辑导语：To C市场如今已经越来越饱和，流量的获取难度也越来越大，于是从To B向To C方法探索也是大势所趋。对于不少设计师来说，习惯了C端设计，转到B端后一时间有点不知所措。本文作者总结了自己负责B端产品设计的一些经验，为我们分享了这篇指南。
To C市场的表现随着用户逐渐趋向饱和，流量红利也尽显颓势，向To B延展已成为To C产品探索的新方向，国内的互联网巨头也是纷纷布局To B业务。
B端行业需求量的增加更多B端设计师（互联网打工人）开始涌入，还在互联网C端折腾的互联网打工人们，说不定哪天就转做B端了呢。无论是C端与B端选哪个方向都没有错，建议都尝试下再根据个人兴趣选择一个深耕方向一直去探索。
接下来就我负责一些B端产品设计浅谈我的看法，看完本文你会学到：
B 端设计，从承接载体来看就是网页设计，只是因为行业属性、用户群体的不同而赋予的代名词。
C端产品需要兼顾“用户体验”和“商业化变现”的平衡，所以会额外重视在视觉体验上的设计。不仅要让用户有好的体验，更要用趣味性的设计引起用户共鸣，用户的要求就是好看、好用、好玩。
B端产品注重操作者的使用效率、成本、管控，追求服务的稳定性、保证能力、安全性，所以在视觉体验上多是保持干净简单的简洁风。
组件化对于设计师来说相信已经不陌生了，简单的说，组件化即是产品中的通用模块进行元素拆解、整理、重组为一套「多维度」的解决方案，组件化在运营设计、UI、交互、动效、开发等多方面都能用上，一套完整的组件库无论对于产品、设计还是开发来说，无疑都大大提高设计品质、提高工作效率与减少沟通成本。
在B端后台开发过程中，前端同学都是基于UI框架进行开发的，引入一些开源的UI框架或者公司自建的UI框架，使用这些框架开发可以把一些通用的模块用代码封装起来在项目中重复使用。
因此在设计时就要求我们掌握主流UI框架的设计规范，然后基于这套框架的规范进行设计及延展。比如Ant Design、Element、iview、Layui等这些前端常使用的UI框架。
Ant design等平台的这些组件只是覆盖了通用场景，对于一些定制化的产品需求是无法满足的，无论是单个产品或产品线，因品牌差异性在不断成熟过程中都有属于自己的组件库（UI KIT）。
以下是我基于组件的类别与使用场景的不同进行了分类，组件的应用上每个产品不一样，我们需要根据项目实际情况需要进行增加和删除。主要包括7个部分：基础组件、布局、导航、数据录入、数据展示、反馈、数据可视化等。
每个组件都有自己的应用场景，总之不能盲目借鉴其他产品，要根据用户使用场景去选择适合的组件，以提示设计为例：界面设计中我们什么时候需要强提示什么时候弱提示呢？
原子设计理论，常用来搭建出统一且层次丰富的设计系统的一套方法论，由原子、分子、组织、模板和页面这五个层面组成。
以下为原子设计理论的示例图，就是将界面中的元素、组件、模块、原型图、视觉稿进行归纳、整理、重组整理成通用的规范。
其实在庞大的web类别中，根据产品产品属性、用户群体不同分为很多种：从网页前台到管理后台，设计师起到很重要的一点作用就是判断web产品契合的框架和标准定义。
在定义网页尺寸时，我们首先要考虑我们的大众用的显示器。
记得在N年前，那时页面的信息内容一定要设计在800或1000的宽度以内，规则其实并没错，不过随着设备和网络的发展，网页显示的分辨率也在发生着快速的变化，为了兼顾大众的浏览体验屏幕分辨率也越来越大了。
根据百度流量研究院最新的数据显示，市面上的电脑屏幕尺寸多种多样，设备中占比最多的仍然是1920×1080、最少的分辨率是 1024×768，低于1024的屏幕分辨率可以忽略了。
B端管理后台考虑最大最小响应的屏幕，建议取中间尺寸1440×900宽，响应式从小往大适配容易，但是从大往小适配问题就特别多。选这个尺寸前端在适配时错误率更低。
确定了宽度，那高度尺寸怎么定义呢？虽说浏览器竖屏方向是无限展示，但不得不说首屏在界面设计中的重要性，研究表明首屏以上的关注度为80.3%，首屏以下只有19.7%，这也解释了我们设计时为什么要把重要内容展示在首屏的原因了。
以中间尺寸1440×900为例，我们不能直接用900的高度为基准尺寸，要除掉系统任务栏、浏览器菜单栏以及状态栏后，剩下的网页首屏内容控制高度约为720px（700-750PX区间），这个区间都是相对安全区域。
取这个中间值，就可以照顾到约80%的用户群体，Ant design的组件也是1440x720px，所以最终确定分尺寸为1440x720px。
常规web网页固定宽度显示类型：页面中心区域宽度通常设置为1200px（1000px -1400px区间）作为设计相对标准，这个范围内能保证大部分浏览器能够显示出所有的内容。
当涉及数字产品设计时，您几乎可以在设计工具中完成的所有工作都可以用代码创建和表现出来，但是出于多种原因（从开发思维到基础设计规范），可能设计稿不能落地或者设计输出质量差给你带来烦恼，接下来我们来探讨下设计前的一些准备工作吧。
1）盒子模型让你更懂开发思维
盒子模型是最常听见的是在网页设计领域中，经常用到的CSS技术所使用的一种思维模型，是最常用且高效的界面开发模型之一，也是提高设计师与开发沟通效率的一个重要知识。
盒子模型包含了以下属性：内容（content）、内边距（padding）、边框（border）、外边距（margin）
2）确定栅格的基准–基于8点网格
网格是构成页面栅格系统的最小单位，8点/8point/8pt，建立一个以8为单位的网格系统，利用8的倍数来规定内容元素（按钮、输入框、图片等）和布局规则。
为什么是基于8pt去定义网格？尽量保证最小栅格单位是偶数，使用2、4、6、8点或者10点为栅格的候选原子单位其实都是可以的，偶数能够匹配多数主流的显示设备，最大程度避免出现半像素模糊的情况。
根据最新中国PC端主流分辨率统计，只有“4、8”不能被1366整除，其他都可以。由于4过于小在视觉上区分不大，所以我们选用8作为最小单位，之后所有的数值都使用8的倍数，8作为最小栅格单位更多是在后台系统中用的比较多。
网页中常用栅格单位是8、10，那么针对最小单位是该用8、10还是多少也是需要根据需求去做分析。比如淘宝、京东这些电商网站内容区域都是1190px，以10作为最小栅格单位，常规web网页固定宽度显示类型用的比较多，宽度都能被10整除。
举个栗子：从下面这个对比图中可以看到，是否严格按照网格系统排列出来的成果有明显的好坏差别。
站在巨人的肩膀上，关于iOS的@1x，@2x，@3x图与 Material Design 的@1x, @1.5x, @2x，@3x，@4x，Ios与material design组件都是以8点为基准，小的控件以4点为基准。
3）栅格系统让设计更有秩序
栅格系统，可以让设计更有秩序，更有规律，简单来说就是用科学的方法去排版。我们利用栅格系统就是把一个页面切开成有N个栅格单元（区块），以保证页面信息的每个区域能够有秩序地排布起来。
然后我们把这个页面的宽度代表为W，网格单元宽度为a，网格单元之间的间隙为i，然后把网格单元+网格单元之间的间隙代表为A。计算公式：宽度=（栅格的宽度X数量）+（数量-1）X间隙的宽度，就酱栅格系统就Get了，如下图所示：
继续举栗子，我们选择确定的画布尺寸1440x720px（左右布局），布局采用24栏栅格。对宽度为 1152 的内容区域进行 24 栅格的划分设置，页面中栅格的 水槽设定了定值，即浏览器在一定范围扩大或缩小，栅格的列宽会随之扩大或缩小，但槽的宽度值固定不变。
制定如下的样式，数值仅供参考，照搬的请慎重。
12栅格和24栅格都是PC端较常用的。它们都可以被2等分、3等分、4等分、6等分、12等分，还能按 1:2:1 、 1:3:2 …等比例分割，提供了足够丰富的变化。
一般12栏栅格适用于业务信息承载密度少，适合信息承载较疏松的中后台页面设计或展示类网站。24等分的栅格系统适用于业务信息量大、适合信息繁杂的中后台页面设计，选用那种栅格视实际情况而定。
填充内容：建立好基础栅格之后，我们可以把内容布局进行划分成区块，使整体界面整体有序。在区块内放置内容，内容的开始和结尾尽量避免在水槽里，区块的高度也需要保持8的倍数。
示例为24栅格中，区块内容占据8、6以及12栅格的布局
不用栅格设计行不行？不用栅格没问题，很多优秀作品都没有刻意的遵守传统的栅格，反而显得更加灵动。
但是打破规则前得知道规则才行，所谓方法论和规范只是基于前辈总结沉淀的经验，当你的创新足够有颠覆性，之前的规则就会变成陈规旧俗。
B端系统的框架一般会依据产品目标与用户的使用场景来定义，一般主流的导航样式就两种：侧边栏导航与顶部导航，其他都是这两种主流导航的延展或不常用就不细细列出来了，比如：顶部导航与侧边栏导航结合的混合导航。
很多老铁通常会误以为B端就是侧边栏，C端就是顶部导航，虽然大部分是这样，但是这里不能画等号，有些产品同时兼有两种导航或者混用的情况，根据项目实际情况去定。
布局框架确认之后我们就可以结合设计规范和以及产品特点开始撸图了，一般先确定好首页及产品主要功能页面，整体产品的视觉基调就已经定下来了，其他页面风格布局按照主页延展，一些列表页、弹窗的复用性高的页面制作成组件，然后就做完了，小编图做的渣，放一张例图吧。
图例为Ant design组件
以上是小编在B端设计过程中的所思所想，通过对各平台组件以及相关标准的了解，可以为你的设计点亮思路，让图撸的更快、更准、更稳，先避免一些原则性的错误，才能为后续产品的精雕细琢打下良好的根基。
随着B端市场的发展，更多的B端产品逐渐进入大众视野，但是B端产品的用户体验却远未达到行业标准，这里并不是说视觉表现力上，更多的是B端设计师对于产品业务的理解、用户的操作效率上，所以B端产品的体验设计仍是我们的发力点。
补充：B端内容区都是自适应的，一说的自适应设计，可能我们经常听到响应式，自适应设计和响应式设计这两个概念非常容易混淆：自适应是对于设备而言、响应式是对于尺寸而言，一张图看懂什么是响应式什么是自适应。
本文由 @呆呆龙 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
辑导语： 组件库是设计系统里的一个重要分支，一个合适的组件库可以帮助设计师和开发者提高工作效率；本文作者分享了关于各个大厂已经成形的组件库，一起来看一下。
最近为了给部门制定合理的设计规范，方便各个团队更好的高效协作；为此参考了许多国内外优秀的设计规范，趁着这次机会做一个整理，而且这些设计规范基本上都是附带 Sketch 源文件的。
但实际上组件库的整理工作也是比较繁复的，我们在开始之前，需要去判断什么情况下组件库可以真正为我们节省工作量提升效率；而这些已经成形的组件库，非常值得大家下载学习、参考和使用。
蚂蚁金服出品，非常著名的框架；企业级产品的设计系统，很多公司的项目都在使用，而且提供了对设计师友好的Sketch规范文件，可以直接拿来用。
官方链接：https://ant.design/
源文件规范下载：https://ant.design/docs/resources
移动端： AntDesignMobile Template V1.0.sketch
首页： Ant.Design.home-3.0.sketch
Pro： Ant.Design.Pro.sketch
web端： Ant.Design.3.0.Components.sketch
AntV是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。（包含PC和移动端）
源文件规范下载：https://antv-2018.alipay.com/zh-cn/vis/resource/index.html
附件下载： AntV.Charts.sketch
这是由饿了么 UED 设计开发的基于 Vue 的前端组件库，虽然在很多交互模式和组件样式以及设计理念上都参考了 Ant Design，但是也做了一些自己的修改和调整。
他们同样也推出了 Axure 元件库文件以及 Sketch 组件库，有兴趣的朋友可以参考研究一下。
源文件规范下载：https://element.eleme.cn/#/zh-CN/resource
附件下载： Element UI Kit_v2.0.sketch
服务于 SaaS 产品的设计体系。连接设计和开发，让协作变得高效简单；通过沉淀不同行业、场景的经验和思考，推动社交生态内的用户体验一致性。
源文件规范下载：https://design.youzan.com/resource/resource.html
桌面端视觉规范： Zan Desgin PC_2.0_beta.sketch
视觉规范： Zan Design Vant 视觉规范 V3.0 .sketch
元件库： Zan Design Vant 元件库 TC_ZY.zip
面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。
源文件规范下载：https://didi.github.io/mand-mobile/#/en-US/design/other/resource
Taro UI，一套基于 Taro 框架开发的多端 UI 组件库，可以在微信小程序 / H5 / ReactNative 等多端适配运行。京东用户体验设计部的凹凸实验室出品。
源文件规范下载：https://taro-ui.aotu.io/#/docs/resource
附件下载： TaroUI.sketch
Axure部件库： taroui-rplib1565263474229.zip
AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品。
源文件规范下载：https://at-ui.github.io/at-ui/#/zh/resource/design
附件下载： feather.sketch
由微信团队推出的可以用于微信小程序设计的 Sketch 组件库，用起来也很方便，有微信端设计需求的朋友可以参考。
源文件规范下载：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87
QMUI，腾讯出品，分为Web、iOS、安卓三个端，都有相应的dome下载安装；设计师可以下载安卓和iOS应用，经常看看里面的组件，熟悉后，和技术的协作会更有效率。
官方文档：https://qmuiteam.com/web/page/widget.html
iOS 的设计规范其实并没有 Material Design 那么具体和细节，但作为一个 iOS 平台的设计人员还是需要把它们的设计理念烂熟于胸。
对于 iOS 平台的 Sketch 组件库，我只推荐两个，一个是 Facebook 推出的 iOS 10 组件库，另外一个是由 Apple 官方推出的组件库，同样都有 Sketch 源文件。
源文件规范下载：https://developer.apple.com/design/resources/
由 Google 设计团队推出的 Material Design 一经发布就红遍了全球设计界，多个富有突破性的设计理念，将理性与感性相结合的完美标准，使得越来越多的人基于 Material Design 制作了自己产品的设计规范。
除了谷歌官方的 Sketch 组件库外，还有一个基于 Material Design 色板的 Sketch 源文件下载，用起来非常方便。
源文件规范下载：https://material.io/resources#sticker-sheets-icons-components
Material Design 官方相关源文件下载
Material Design 色板 Sketch 源文件下载
Teambition出品。Clarity Design 是一套全面的设计语言，从设计原则到字体排版，从交互到文案，从动效到样式，从组件到设计工具…… 提供了各种解决方法和指导，设计师和工程师可以快速找到相关的指导内容，有效地帮助完善工作并且提高效率。
源文件规范下载：https://design.teambition.com/resource/design-resource
由国外 Shopify 团队推出的 Polaris 设计规范也有比较不错的参考价值，而且内容非常丰富完整，感兴趣的朋友可以查看官方文档好好研究一下，他们同样提供 Sketch 组件库。
源文件规范下载：https://polaris.shopify.com/resources/resources
由国外知名软件企业 Atlassian 推出的设计语言，涵盖了品牌、营销、产品相关的设计规范和理念，其丰富程度仅次于 Material Design，可以说给了设计师很多参考与帮助，另外还提供了非常完整详细的 Sketch 组件库，强烈推荐大家研究学习！
源文件规范下载：https://atlassian.design/resources/sketch-library
Lightning Design System 是由 Salesforce 团队推出的一个设计规范，它们的规范文档也是相当完整而且可参考性很强，推荐大家研究，同时它们也有 Sketch 组件库可供下载。
官方文档：https://www.lightningdesignsystem.com/
源文件规范下载：https://github.com/salesforce-ux/design-system-ui-kit/blob/master/README.md
源文件规范下载：https://www.figma.com/community/ui_kits
https://www.figma.com/community/ui_kits
开源前端组件&交互Demo
官方文档：http://vue.ydui.org/demo/#/
http://vue.ydui.org/demo/#/
一套基于 Vue.js 的高质量UI 组件库。Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架；在网站中可以看到数量众多的UI组件和对应代码，本质上和我们制作UI规范是一样的。
官方文档：https://www.iviewui.com/
非官方，由 Sketch 团队维护
源文件规范下载：https://www.sketch.com/downloads/mac/
规范文档：https://mobile.ant.design/index-cn
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，是一个CSS/HTML框架，目前世界上的很多网站开发都使用了这个。其中的栅格理论、响应式解决方案都变成了业界的参考规范。
官方文档：https://v4.bootcss.com/
将设计规范做成 Sketch 组件库甚至 Axure 元件库其实任务量很大，但是这项工作做好了能够大大提高产品、设计、开发团队的协作效率！
但组件库不是表面工作，毕竟，产品研发工作不是一蹴而就的，组件库可以帮助研发团队持续地维护产品。
在组件库的研发工作中，我们需要思考：
本文由 @七分 翻译发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。
先给大家科普一下:
前端JS框架和前端UI框架的区别
前端JS框架:基于js进行一定封装与一些独立设计的框架 比如:jQuery,Vue,React,angular等等
前端UI框架:基于某种js框架进行设计的UI组件库,就是一些写好的UI组件,拿来就能用,不需要自己写css
比如: 基于JQuery的Bootstrap,jQuery Smart UI 等 基于Vue的iView,Element等 基于React的Material-UI,React Desktop等
对于刚接触的Vue框架的我来说,vue最大的特性,莫过于双向绑定了
单向绑定和双向绑定
Model:数据模型 View:视图
单向绑定：把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。 例如，我们定义好一个JavaScript对象作为Model，并且把这个Model的两个属性绑定到DOM节点上：
双向绑定：把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。
所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。
例如当用户填写表单时，View的状态就被更新了，在浏览器中，当用户修改了表单的内容时，我们绑定的Model会自动更新,那就相当于我们把Model和View做了双向绑定：
Vue的基本结构
//这个div在最外层,将其他的div或者其他元素都包起来<div id="app">...</div><script>const app=new Vue({ //找到对应的dom树,将他转成vue对象 el: '#app', //数据属性:存放数据 data: { message: 'Vue的生命周期' }, //方法属性:存放方法 methods：{ test:function(){ console.info("测试方法") } }, //创建完成状态函数: //组件实例创建完成,属性已绑定,但DOM未生成 //常用于数据的初始化操作 created () { console.group('------created创建完毕状态------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, //DOM渲染完成 //常用于数据的初始化操作,当需要操作DOM时,在此处进行 mounted: function () { console.group('mounted 挂载结束状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 } })</script>
下面写一个使用例子
<!-- 引入 Vue.js --><script src="//vuejs.org/js/vue.min.js"></script><!-- 引入 iView的样式css --><link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"><!-- 引入 iView --><script src="//unpkg.com/iview/dist/iview.min.js"></script><body><div id="app"> <div style="margin:auto;height: 300px;width: 300px"> <b>View</b><i-input v-model="name" ></i-input><i-input v-model="age" ></i-input><i-button @click="test">测试按钮</i-button><p><b>Data</b></p><p>{{name}}</p><p>{{age}}</p> </div></div></body><script> const app=new Vue({ el: '#app', //找到对应的dom树。将他转成vue对象, //数据属性:存放数据 data: { name:"ken", age:"26" }, //方法属性:存放方法 methods: { test:function(){ this.name="测试按钮-名称" this.age="测试按钮年龄" } } })</script>
1.data初始化DOM的值 2.使用v-model属性进行数据绑定 3.Dom的值与data的值双向绑定绑定,相互影响
可看下面动图
这里只做了个小演示,我的vue水平也差不多到这了(hahah~) 我这里使用的iview UI框架,也可以尝试其他的UI框架,UI框架都差不多,只是一些样式和组件
就到这了,感兴趣的可以自己动手试试,有js,Jquery基础的上手很快! 我们被培训了半个小时,就开始动手写了
分享给你的朋友！
"波浪分割线"
THANDKS
· End -
一个立志成大腿而每天努力奋斗的年轻人
伴学习伴成长，成长之路你并不孤单!
java从心 扫描二维码,关注公众号
不错吧?必须好看?
*请认真填写需求信息，我们会在24小时内与您取得联系。
