2021年8月

普通人建一个应用程序就像搭乐高一样简单,技术似乎已经给出了路径,但还需要沉淀和发力的空间

文 | 《财经》记者 吴俊宇

编辑 | 谢丽容

今年6月,一家头部云厂商SaaS架构师为某零售企业演示了如何用低代码半小时搭建招聘系统。

事后,这家企业负责人提了一个问题:有了低代码,是不是可以砍掉公司一半IT人员?

答案当然是否定的。这种想法有一定的代表性。中小企业、传统企业在数字化转型的过程中存在焦虑情绪。一种矛盾现象是,一些企业把IT团队视为成本中心,另一方面又缺乏有前瞻性的IT人员。

矛盾和焦虑下之,看似“无所无能”的低代码(Low-code)似乎成了解决方案。

“低代码开发”指用户可以把已经形成模块的图形代码,通过拖拉拽的方式快速拼成应用。简单理解就“拼乐高”——将通用、可重复使用的代码拼起来。一种常见的评价是,低代码降低了开发门槛,不懂代码的人能上手做开发,专业程序员会降低工作量。

这个技术看起来会解放很多企业和很多人。而且技术其实已经比较成熟,需要的只是一个合适的商业模式。2021年初,和许多新技术一样,它终于在中国被推上了“风口”。

阿里云延续了对新技术的敏锐嗅觉和的激进态度,主张低代码将是一场“革命”。钉钉总裁叶军今年5月接受《财经》专访时提到,低代码将是每个技术人员的必备能力,未来会像Word、Excel、PPT一样普及。他同时解释,低代码会和专业开发共存,释放生产力。

腾讯云偏保守,把低代码视为一种有益的技术手段。腾讯云副总裁答治茜此前对《财经》等媒体的说法是,低代码存在多年,并不神奇也不是万能的,要根据实际场景使用。

阿里云、腾讯云在开放自主低代码平台的同时,还把氚云、简道云、明道云、道一云等在低代码领域耕耘多年的专业平台引入生态内。被西门子收购的Mendix今年年初进入中国市场,并与腾讯云深度合作。

高瓴、IDG、华创资本等投资机构将低代码视为投资赛道。《财经》记者不完全统计,2020年1月-2021年8月,至少有15家低代码平台获得了超过25家主流机构的投资。《财经》记者得到的消息是,下半年资本层面投资热度依旧不减,还有已获融资的企业将拿到新一轮融资。

低代码成了2021年上半年数字化领域的热词。它切中了一些中小企业数字化转型的焦虑,但也一定程度上造就了一些不切实际的幻想,以至带来争议、误读。

某头部云厂商战略规划部的一位人士提醒,低代码在国内尚处市场培育期,容易流于概念化。他认同其价值,但反对对这个新技术的过度神话。

与国内相反,欧美低代码市场相对成熟。创业公司Outsystems、被西门子收购的Mendix、微软旗下的Power Platform、Salsforce旗下的Lightning均是主流低代码开发平台,形成了非常清晰的商业模式。以Salsforce为例,2021财年总营收212.5亿美元,“平台及其他产品”(包括低代码平台及其他PaaS套件)营收为62.75亿美元,在总营收中的占比为29.5%。

今年年初,Outsystems再次获得了1.5亿美元D轮融资,投资方为Abdiel Capital、老虎全球管理基金。其估值已达90亿美元,成为目前全球估值最高的低代码创业公司。

Gartner数据显示,全球低代码市场规模在2020年达84亿美元,预计在2021年超过百亿美元。2025年全球低代码市场规模将达到471亿美元,复合增长率将达到 41%。

中国IT基础相对薄弱,数字化需求复杂多样。低代码是什么,能做什么,如何部署,这些问题并未得到很好的回答。它和早期的“中台”一样,热度高,争议也多。

本文试图回答几个问题:

1. 低代码在现在的中国到底是一个什么情况?

2. 低代码为什么在中国有实践价值但不宜跃进式发展?

3. 中国发展低代码的独特环境和需要注意的问题?

01 潮流是怎么兴起的?

在技术界,低代码并不是一个新面孔。

通过低代码进行敏捷开发这一理念在30年前就已萌芽。但当时技术平台不支持它的发展,直到2000年初,欧洲才诞生了两家低代码创业公司,分别是葡萄牙的Outsystems和荷兰的Mendix。这两家平台也是目前被公认的拓荒者和领导者。

Outsystems和Mendix诞生后的很长一段时间被称为“敏捷开发平台”。企业将其用于解决传统IT实施中的问题,如立项复杂,实施周期长,预算超支,后续迭代成本高。

直至2014年,市场调研公司Forrester正式提出低代码开发平台(LCDP,Low-Code Development Platform)这个词,“低代码”才被正名。

但是,要一直到三年后的2017年,低代码才从创投圈破圈,一跳跳进了巨头圈。那一年,国际技术巨头如微软、Salesforce、Oracle、IBM开始重视这一业务。2018年,Outsystems获得新一轮融资,Mendix则被西门子收购。

一个技术被巨头认为有价值,最大好处是可以得到倍速增长。三年后的2020年9月,Gartner发布的企业低代码应用平台魔力象限中,微软、Salesforce、Mendix、Outsystems处于领导者地位。

低代码技术的强者阵营开始多元化,既包括微软这样的大巨头,也包括Salesforce这样的软件领域的巨头,创业公司在资本的扶持下也开始壮大。

总的来说,欧美的低代码市场基于企业内生需求发展成熟,并跟随公有云浪潮逐步普及,并形成了行业标准。Gartner曾划定了低代码的四个特性:模型驱动、可视化开发、表达式语言、脚本语言。

在国内,低代码早期是To B企业学习海外市场,自身业务扩张的结果。

低代码在2015年走进中国。一些在数字化领域扎根十余年的To B企业因云计算兴起推出了适应云环境的新业务。氚云、简道云均诞生于此时。氚云是奥哲旗下的子品牌。奥哲2010年起家,主要业务是PaaS平台建设、企业流程管理。简道云母公司是帆软,2006年成立,核心业务是商业报表。不过,和美国创业公司不同的是,对奥哲、帆软来说,低代码平台只是其诸多产品线中的一条。

2020年末低代码被引爆是则疫情爆发、巨头参与、资本涌入的结果,它伴随着数字化的浪潮而兴起。

简道云联合创始人单士杰今年5月曾告诉《财经》记者,他在这个领域从业5年。2020年以前,这是一个特别小的领域,当年年底,终于发现低代码开始受关注、受欢迎。目前这家公司的70%的客户均为中小企业。随着低代码普及度提高,大型客户的比例正在增加。

从需求端看,疫情倒逼大量企业在短时间内开发可用应用。低代码可以降低开发门槛,提高开发速度。疫情让开发人员无法和客户面对面交流。低代码有图形、表单,很直观,便于远程项目协同。

这时,中国科技巨头也开始不同程度布局低代码了。阿里云旗下的钉钉把氚云、简道云纳入了生态之中重点扶持。腾讯的企业微信选择了道一云、明道云。中国巨头的脚步比国际巨头差不多晚了三年。

2019-2020年,一批低代码创业公司在行业风口、投资热潮的影响下成立。这批公司善用To C打法,强调业务增长。资本加持下,这批企业也获得了不错的发展势头。在大趋势下,金蝶、用友等传统软件厂商为适应云转型,也推出了低代码平台。

高瓴一位投资人向《财经》记者解释,“数字化”并不仅是大一统的需求,企业有众多业务单元,具体的业务部门都有自己特定的数字化需求。但这种需求很难第一时间被满足、获得公司级IT的优先服务。用低代码自己干,是一种现实选择。

一批海外成熟的低代码平台也瞄准了中国。2020年6月,微软旗下的Power Platform入华。Mendix评估中国市场的潜力后,2021年初入华。这时候,低代码在一些公司中已经有了一定的认知度。Menxdix中国区总经理王炯介绍,今年1月,他拜访客户时,对方往往问他“什么是低代码”。到了3月,客户问题变成了“Mendix和其他平台有什么区别”。

王炯还发现,中国客户对低代码的要求也在迅速提高。不仅是希望用低代码做信息收集和数据整理,还希望能通过低代码实现更多复杂的场景,比如和多种复杂业务系统结合,有的还想做垂直领域的应用。

中国客户还有大量特殊需求,比如在私有云上搭建低代码平台。不过,这类客户处于观望状态,尤其是对数据安全要求高的企业。深圳前海股权交易中心一位技术负责人直言,他很关注低代码,但目前并不打算考虑使用。因为不知道实施成本,不知道是否合规。

风口来临时,也不乏浑水摸鱼的企业。一些企业以表单和图形为噱头进行营销,却忽视逻辑和模型的重要性。一家位于南京的IT企业负责人曾对《财经》记者说,公司要做低代码平台,其技术远超市面企业。交流技术细节时,该负责人又表示还在开发阶段,自己不懂技术。

02 大家都想做,低代码真香?

一个新技术能不能最终成为一个大商业赛道,要看其革命性、普适性。就像当年图表界面在个人电脑上取代了DOS指令界面一样,低代码最终能不能成势,在于它到底有多好用。现在入局低代码的选手都有自己的一套逻辑,你可以理解为,如何把低代码放在棋盘上的合适位置,大家的路子都不太一样。

从产品层面上说,低代码是PaaS层的组成部分,价值在于建立低代码环境,快速开发SaaS应用。因此低代码平台也被称为aPaaS平台。

一些聚焦这个技术的创业公司利用这个低代码的定位,把自己放在巨头的大篮子里。以全球知名的低代码平台Outsystem为例,其重要合作伙伴是AWS。Mendix既可以依托于西门子的IT基础设施为制造业客户提供服务,也可以依托于公有云等平台被其他客户所采购。在国内,氚云、简道云等低代码平台则是生长在钉钉上,底层是阿里云。明道云、道一云则是生长在企业微信上,底层是腾讯云。

巨头的做法就不一样了。要讨论巨头的做法,我们先要看看目前数字化市场的一个大致情况。

主要数字化企业今年有三大增长点:一是挖掘公有云存量市场,二是全面发力政企市场,三是尝试PaaS、SaaS带云。(相关报道见《财经》8月9日“增长放缓,阿里华为等数字化巨头需要打硬仗了”)

“发力低代码”是“PaaS、SaaS带云”的组成部分,是国内头部数字化企业推动SaaS战略的重要一环。理论上说,低代码降低开发门槛后,更多SaaS应用会随之井喷。上层SaaS应用的井喷需要基础设施支撑,因此会进一步带动底层公有云的销量。

钉钉总裁叶军今年5月在接受《财经》记者专访时就曾提到,低代码是钉钉今年三大战略规划之一。未来3年在钉钉上将长出1000万个钉应用。这些应用将有很大一部分是通过低代码平台开发建成的。为推动生态繁荣,钉钉抽佣比例从30%降低到了15%。

钉钉的做法总结起来很简单,亲自下场培育,不是单纯引入创业平台的产品,简单整合,而要让低代码成为钉钉扩大用户群,做深、做黏的利器。

国内目前的情况来看,低代码的主要用户群会是中小企业以及IT基础薄弱的传统企业。但平台巨头们手里有不少大中型企业用户,他们希望把低代码结合到自己的产品解决方案中,让低代码可以被一些大中型企业所采用。

这并不是一厢情愿。奥哲CTO张华发现,国内中小企业通常无法组建起一支成熟专业的IT队伍。甚至很多专业的数字化企业也面临招人难的问题。

中小企业如此,工业、银行、证券等领域的IT人才也不宽裕。Menxdix中国区总经理王炯考察中国市场后发现,IT人力成本正在攀升,甚至连工业、银行、证券等行业不程度地出现了人才短缺。

他算了一笔账,一位具备3-5年工作经验的成熟IT工程师通常年均成本超过30万元。二线城市工业企业通常位于郊区,距离远、条件差,很难招到这类人才。银行、证券公司学历门槛高,薪资待遇却明显低于阿里、腾讯等互联网大厂。因此对IT人才吸引力也有限。

低代码最直接的作用就是解决用人难的问题。一些大型传统企业,如鲁花、居然之家正在用的低代码方案就是钉钉和奥哲共同定制。甚至有SaaS、PaaS企业人士告诉《财经》记者,他们自己也在用低代码开发自家系统。

03 低代码的高门槛

新技术现象的普及不会一帆风顺,低代码也是如此。

至少在当下,绝大部分企业甚至还不知道什么是低代码。从数据看,国内低代码市场目前规模不大。东兴证券数据显示,2020年中国低代码市场整体规模达18.5亿元,同比增长32%。这远低于国内900亿公有云,103亿PaaS,280亿SaaS的市场规模。

如果进一步深入,很多人会发现,在实际落地过程中,低代码本身还是有局限性。

今年数字化市场迎来了攻坚阶段。有中国头部云厂商战略和规划人士向《财经》记者评价,“SaaS带云”思路目前效果不及预期,增速还是不够快。SaaS软件在财务、营销、税务这些刚需领域普及度较好,在其他细分行业很难用“爆发”来形容。因此,在2021年下半年,低代码也随着数字化热度下降而暂时遇冷。

部分企业习惯了大型通用软件的实施流程,对如何使用低代码仍然不熟悉。大型通用应用软件要立项、招标、实施,这套流程走完,需要半年甚至更长时间。Mendix中国区总经理王炯发现,一些国内企业使用低代码也沿用了这套思路。甚至写好项目书后直接招标平台做低代码开发。这和海外通行做法存在差异。

在海外,低代码开发方式,其实是让业务人员、IT人员在一套能相互理解的环境下顺畅沟通,产生创意,快速落地需求。“低代码更鼓励创新和试错,这需要企业文化做支撑。”王炯说。

低代码也有“翻车”案例。国内低代码产品整体成熟度不足,在期待值高却不熟悉产品的情况下,贸然用低代码接管“大而全”的工作,很容易如此。

一位供职于一家外资律所的开发人员告诉《财经》记者,公司在北京只有7名开发人员,技术无法和大厂相提并论。为减轻开发压力,去年引入了一套低代码模版,部署在亚马逊AWS上。

他说,低代码相当于买了套板房回家,根据模块搭房子、搞装修。一开始看似方便,但发现限制多、不灵活,改不了底层,结果很多需求无法满足。在板房上修修补补半年后,房子塌了——系统因为一个小操作崩溃。后来公司决定回到原点自建系统。

这位开发人员称,还是得找到适合业务所在领域的模版,还需要代码逻辑非常清晰。他们的失败核心原因在这里。

低代码的门槛并不“低”,依然不适合毫无IT基础的人或企业使用。

《财经》记者上手试用了钉钉上的宜搭、氚云、简道云、轻流,企业微信上的道一云、明道云,以及飞书上的维格表,发现厂商宣传的“让毫无代码基础的人进行应用开发”这个说法并不准确。表单类似excel,记录公司日常行政事务不难。但要搭建一套采编流程时,关键部分仍然需要写入代码。

此外,低代码暂时无法满足特定行业的特定需求。目前国内大部分低代码平台模板集中在人事、财务、采购、生产、营销、供应链等方面,零售、制造、工业、地产等领域普及度高。

构建一套专业的业务系统,需要清晰了解公司业务逻辑,还要将其转化为IT人员能懂的语言。《财经》记者以一家30人规模的媒体公司要搭建一套业务系统为由,与氚云、简道云、轻流等平台售前人员取得了联系。

售前人员的普遍反馈是,基于模板搭建一套通用系统,成本不过3万元,开发周期是2-7天。基于低代码定制化开发,集成媒体专业工具,成本可能会超过30万元。系统搭建后还要反复测试、修改,周期可能会长达2-3个月。轻流售前人员直接表示,“做不了。”

《财经》记者在和一家低代码平台售前人员的沟通前期需求时,双方最大交流障碍是,记者不懂IT语言,对方无法理解媒体业务。

当记者表达使用频率低,系统建成后最终成鸡肋的担忧时,该售前人员表示,系统建设并非一蹴而就,一开始就上马大型工程往往费时费力,无法预估实际业务运转中的适应情况。最好从表单开始试用,先改造部分业务,再逐步改造其他业务。

一位售前人员解释,新媒体公司多,理论上看是低代码的重要市场,但付费意愿和付费能力普遍不高。很难说服一家媒体公司花钱定制一套IT系统。因此这里暂时是空白。

针对低代码暂时还无法满足特定行业需求这一现象,Mendix中国区总经理王炯解释,还是要先考虑市场上已有的商业软件。如果没有,再考虑是否要使用低代码产品。

放大低代码的优先级、普适性和低门槛也是成了一些平台的做法。

一些企业技术人士认为这种做法不妥。奥哲CTO张华称,奥哲的产品线很多,覆盖PaaS、流程管理等。低代码只是其中一种实现方式,企业数字化需要灵活搭配各种不同的工具。

04 让低代码低调完成进化

几乎所有接受《财经》记者采访的行业内专业人士都认为此时是低代码等新技术在中国成长的好时候。资本、生态和用户,一切看起来都是过去十几年来最好的配比状态。

这给了很多ToB领域创业者以信心,他们相信,在一件事情上一直挖下去,五年不够就十年,十年不够就十五年,最后一定会挖到矿。

低代码也处于这种状态。但有技术人士向《财经》记者提醒,低代码目前在国内的情况是,和“自动辅助驾驶”被宣传成“智能驾驶”类似,有一些冒进,应该再沉一沉。

来自专业领域多位采访对象的另一种看法是,“低代码”可以被视为开发平台,也可以被视为第四代编程语言,但不合适被当成“行业赛道”。这和资本的看法不一样。资本喜欢新赛道,新赛道意味着新的机会。

Mendix中国区总经理王炯向《财经》记者多次强调了Gartner定义的低代码四特性,分别是模型驱动、可视化开发、表达式语言、脚本语言。

“模型驱动”目的是让图形模版贴近客户所在的领域,“表达式语言”则是让业务流程逻辑清晰。“脚本语言”解决的是图形代码不够灵活的问题。这些要素缺一不可,王炯甚至认为,可视化之外的其他要素容易被忽略,但却是低代码平台的核心。

每个低代码平台擅长的领域都不同,这通常是企业出身决定的。以Mendix为例,它起步于低代码原生,曾经主要在金融、政府、物流等行业。被西门子收购后在工业制造领域又增加了研发、设计、制造能力。在正式进入中国市场前,已被上汽乘用车、富士康旗下云智汇科技服务等中国企业使用。

低代码成为一个新行业的武器,面对的问题和数字化的问题是一样的,你先要和这个行业里的专业人士在一个话语体系里对话;其次,你要了解熟悉这个行业的逻辑和痛点。

社区建设也是低代码生态能否长久繁荣的重要一环。社区里聚集着开发者,开发者用低代码完成企业系统建设后通常会分享模版和经验。这些模版又可以被更多企业客户所选择。

必须承认的是,国内市场教育程度远不如海外市场。低代码伴随去年的数字化浪潮兴起,其中的真实、长久、稳定的需求到底有多少,仍有待观察。

到现在为止,在中国仍然是新面孔。它有时候会成为一些企业第一次接触数字化的入门工具,但更多时候需要隐藏在成熟技术解决方案中被搭售。

处在探索阶段的中国企业,很难严格执行低代码国际标准。腾讯云一位生态负责人解释,他认同高逻辑和模型驱等标准,服务大客户必须如此。但国内情况很复杂,正确的做法不是用技术去定义客户,而是看最终什么样的技术组合可以满足对方的实际需求。

无论黑猫白猫,能抓到老鼠的,才是好猫。

免责声明:本文来自腾讯新闻客户端自媒体,不代表腾讯网的观点和立场。


随着信息技术对人们工作生活的影响越来越大,人们对于应用程序的依赖性也越来越大,越来越多的人使用应用程序来解决自己工作和生活中的问题,这也导致应用程序的开发需求越来越大,传统的应用程序开发方法已经没有办法满足市场的需求,现在很多的人使用低代码开发平台来完成应用程序的开发工作,用低代码开发平台开发应用程序可以缩短开发周期,缩减开发成本。下面一起来了解一下相关的知识吧!



什么是低代码开发平台:

低代码开发平台是无需编码就可以快速生成应用程序的开发平台。低代码开发平台的强大之处在于,允许终端用户使用易于理解的可视化工具开发自己的应用程序,而不是传统的编写代码方式。对于大型企业来讲,低代码快速开发平台作为一种新型的开发工具,它的出现,不仅可以降低IT团队培训、技术部署的初始成本,还可以简化开发过程,缩短开发周期,提高开发效率,节省开发成本。



低代码开发平台的功能模块:

1)可视化构筑业务对象数据表,并支持建立关联。甚至需要支持跨应用的数据表关联。

2)为不同的数据场景配置不同类型的视图,能够定义数据行和列的过滤,能够设置列表、看板、日历等不同界面形式。

3)能够定义不同用户角色,并赋予角色不同的数据访问和改写权限。权限定义越精细越好。

4)能够建立针对数据的汇总表和统计图表。

5)能够建立自定义的输入表单,分发给不同角色使用。

6)能够建立自定义的报表,用于输出各类形式表格,内部有几十套葡萄城报表,涵盖了所需各类行业各类服务,支持套打功能。

7)能够管理企业用户、部门、组织结构,并将其用于应用逻辑关系,比如应用的分发,角色的赋予和工作流中的流向信息。

8)能够可视化配置工作流,支持特定条件下的数据新增、改写、删除等操作,并能够融入数据填写,审批等人工流程节点。工作流的运行能够监控和保存日志。

9)面向企业的门户网站和内部系统界面,数据看板等特性,实现个性化使用。



为什么要选择低代码开发平台:

1、低代码开发平台

力软根据低代码开发平台的模式,改变原始繁琐的开发模式,大幅度缩短迭代周期、降低开发成本,无需大量的专业团队就可短时间掌握产品使用。低代码开发是近几年异军突起的开发模式,具有极强的开发效率和扩展性,广受开发人员的好评。

2、PC端、APP同步开发

力软开发框架平台可以轻松搭建出IOS和Android系统的移动端应用,实现PC端、移动端一站聚合、多端接入,可以快速获取各类数据同步。

3、小程序无缝对接

当前最热门的小程序是必不可少的,力软实现与微信小程序、支付宝小程序、钉钉小程序、头条小程序、百度小程序、QQ小程序一键直达,并致力于专业设计流程,全行业开发方案,实现互通互联高效协作办公。

4、灵活接口万物互联

很多企业在使用管理软件的时候会很烦恼各个系统之间数据不共通,如信息孤岛之类的问题,而力软打通各类企业系统数据、实现手机+PC联手管控办公,高适配开发平台 、强大接口引擎实现万物互联。

5、跨平台引擎平台

力软是集成了.NET Core版的引擎平台、轻量化集成应用,更适应科技的发展需求,平台受众更加广泛、对开发人员的要求也低了不少。

6、满足企业,随需而变

低代码开发平台的标志性开发模式就是拖拉拽可视化配置开发,企业可根据不同的业务场景自由配置,个性化开发等。力软更简化了开发模式,选择数据库、关联数据库、配置表单、填写表单信息、然后生成代码,这里就不得不提一下力软的代码生成器,正因为有它表单才能开发的如此迅速。



作者:力软平台
链接:https://www.jianshu.com/p/6ad4d508b976
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


Google Chrome 的开发者工具可以进一步提高你的工作效率。以下是我个人日常 Web 开发中常用的十个 Chrome 扩展。

CSS Peeper

CSS Peeper 是一个用于 CSS 检查的多功能工具,它允许您快速查看任何网站的样式、字体、调色板和资源。

CSS Peeper

CSS Peeper

CSS Peeper

点击此处安装扩展

React Developer Tools

React Developer Tools 是与 React 使用时的实际扩展,为 React 应用程序提供了所有必要的检查工具。

React Developer Tools

Vue.js devtools

Vue.js devtools 用于调试 Vue.js 应用程序的 Chrome 和 Firefox DevTools 扩展。

image.png

点击此处安装扩展

Screenity

Screenity 适用于 Chrome 的功能强大的屏幕录像机。它的功能亮点非常多,比如可以录制浏览器的标签页、整个屏幕(浏览器外),以及摄像头,通过在屏幕上的任意位置绘制、添加文本和创建箭头✏️

Vue


  • Vue2.0:Vue2.0 文档

  • Vue3.0:Vue3.0 文档

  • Vue-Router:Vue.js 官方的路由管理器。

  • Vuex:Vue.js 应用程序开发的状态管理模式。

  • Element-UI:饿了么UI组件库

  • View UI:一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

  • Vuetify:用于构建功能丰富、快速的应用程序。

  • Buefy-UI: 简单且轻量的UI库。

  • Quasar: 编写代码一次并同时将其部署为网站、移动应用和/或Electron应用。

  • Vue Material: 一个轻量级的框架, 建立在谷歌的 Material Design 基础上。

  • Vux: 基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

  • Vant: 有赞前端团队开源的移动端组件库。

  • NutUI: 一套京东风格的轻量级移动端Vue组件库。

  • YDUI Touch一只基于Vue2.x的移动端&微信UI。

  • Ant Design Vue: Vue UI组件库,开箱即用的高质量 Vue 组件。

  • Wot Design: 根据京东商家侧的UI设计规范(京麦移动端设计规范)开发,旨在给商家提供统一的UI交互,同时提高研发的开发效率。

  • VuePress: Vue 驱动的静态网站生成器。

  • Gridsome: 基于 Vue.js 构建的 Jamstack 框架。让开发人员可以轻松地构建静态生成的网站和应用程序,这些网站和应用程序 。

  • better-scroll: 解决移动端(已支持PC)各种滚动场景需求的插件。

  • vue-multiselect: Vue多选。

  • vue-table: vue-table-数据表简化!

  • vue-infinite-scroll: vue 的无限滚动插件。

  • vue-progressbar: Vue 进度条插件。

  • vue-devtools: Vue 游览器调试插件。

React


TypeScript


Flutter


微信小程序


  • 微信小程序文档

  • TouchUI WX: 一套完全免费的微信小程序开发框架,扩展了小程序的能力。

  • WePY:让小程序支持组件化开发的框架,一个最受欢迎的小程序框架.

  • mpvue:一个使用 Vue.js 开发小程序的前端框架。

  • taro: 一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。

  • uni-app: 一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

工具库


  • jQuery: 一个高效、精简并且功能丰富的 JavaScript 工具库。

  • Zepto.js: 一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。

  • Moment.js: JavaScript 日期处理类库。

  • date-fns.js: 一个现代的 JavaScript 日期工具类库,提供了最全面、最简单和一致的工具集,用于在浏览器和 Node.js 中操作。

  • Underscore.js:是一个JavaScript实用库,提供了一整套函数式编程的实用功能。

  • Sugar.js: 一个可以用来处理原生对象的库。

  • Math.js: Javascript 扩展数学库。

  • Lodash.js:一个一致性、模块化、高性能的 JavaScript 实用工具库。

  • cnhammer.js: 一个可以识别触摸、鼠标和点击事件等手势的开放源码类库。

  • Ramda.js:一款实用的 JavaScript 函数式编程库。

  • Axios.js:一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

  • lazy.js: 功能类似 Underscore 和 Lodash。

  • Voca.js: 一个用于操作字符串的 Javascript 库。

  • Babel.js: 一个 JavaScript 编译器。

  • RequireJS: 一个JavaScript模块加载器。

  • RxJS: 使用 Observables 的响应式编程的库,它使编写异步或基于回调的代码更容易。

  • sea.js: 一个适用于 Web 浏览器端的模块加载器。

  • Backbone.js: 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。英文

  • reveal.js: 一个能够帮助我们很轻易地使用 HTML 创建一个漂亮的演示文稿的框架。

  • Cycle.js: 一个函数式和响应式的 JavaScript 框架,编写可观测代码。

  • system.js:一个通用的模块加载器,它能在浏览器或者 NodeJS 上动态加载模块,并且支持 CommonJS、AMD、全局模块对象和 ES6 模块。

  • ESL.js:一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

  • expect.js: 简约的、适用于 Node.js 和浏览器端的 BDD 式断言工具。

  • can.js: 客户端JavaScript架构库的集合。

  • most.js: 用于反应式编程的工具包。

  • foundation.js: 一个支持响应式布局的前端框架。

  • Semantic.js: 一款开发框架,帮助开发者使用对人类友好的 HTML 语言构建优雅的响应式布局。

  • Bulma: 一个基于 Flexbox 布局技术的免费、开源的现代 CSS 框架。

  • Phaser.js: 一款快速、免费以及开源 HTML5 游戏框架,它支持 WebGL 和 Canvas 两种渲染模式,可以在任何 Web 浏览器环境下运行,游戏可以通过第三方工具转为 iOS、Android 支持的 Native APP,允许使用 JavaScript 和 TypeScript 进行开发。

  • Request.js: 针对浏览器和节点的请求库。

  • Hammer.js: 一个开源的,轻量级的 JavaScript 库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。

  • Ember.js: 一个开源的 JavaScript 客户端框架,用于开发Web应用程序并使用MVC(模型 - 视图 - 控制器)架构模式。

  • handlebars.js: 一个 JavaScript 语义模板库,通过对视图(view)和数据的分离来快速构建 Web 模板。

  • jqueryui: jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。

  • Sizzle.js: 一个纯 JavaScript 实现的 CSS 选择器引擎。

  • Avalon.js: 一个迷你、易用、高性能的前端MVVM框架。

  • String.js: JavaScript字符串中没有包含的方法,例如转义html、解码html实体、剥离标记等。

Js插件


  • Swiper.js:移动端网站的内容触摸滑动插件。

  • Glide.js: 一个无依赖关系的JavaScript ES6滑块和carousel。

  • QRCode.js: 二维码生成插件。

  • slidePage.js: slidePage3 特别适合主流前端框架开发,无任何依赖库,一个优化的全屏插件。

  • fullPage.js: fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。

  • Validate.js: JavaScript表单验证类库。

  • tree-d3.js: tree 树状图 d3.js。

  • zTree.js: 树插件。

  • jstree: jquery插件,提供交互式树。支持HTML和JSON数据源以及AJAX加载。

  • Datatables.js:一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

  • DatePicker.js: 时间选择插件。

  • layDate.js: layDate 日期与时间组件。

  • Date.js: 一个开放源代码的JavaScript Date库,用于解析,格式化和处理。

  • clipboard.js:现代化的拷贝文字插件。

  • PDF.js: 一个基于 web 标准的通用 pdf 解析和渲染库。

  • jquery-i18n: 一个轻量级的jQuery插件,用于像Java Resource Bundles中那样从“ .properties”文件为javascript提供国际化。

  • i18next

  • TimelineJS: 时间轴插件。

  • amfe-flexible: 移动端适配。

  • lazyLoad.js:Lazy Load延迟加载图像插件,直到用户滚动到它们才显示!

  • spin.js: Loading界面插件。

  • CodeMirror.js: 文本编辑器。

  • TinyMCE.js:文本编辑器。

  • Video.js: 一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

  • SweetAlert.js: 一个 JavaScript 插件,能够完美替代 JavaScript 自带的 alert 弹出框,并且功能强大、设计优美。

  • PhotoSwipe.js: 一个 JavaScript 实现的相册组件,没有外部依赖。

  • highlight.js: 用JavaScript编写的语法突出显示工具。

  • Cropper.js: 一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手机端使用,支持包括 IE9 以上的现代浏览器。

  • Store.js: 跨浏览器存储插件。

  • Js-cookie: 一个简单,轻巧的JavaScript API,用于处理Cookie.

  • Mousetrap.js: 一个用于处理键盘快捷键的简单库。

  • FlexSlider.js: 全屏响应式轮播图插件。

  • Leaflet.js: 一个开放源代码的JavaScript库,用于移动友好的交互式地图。

  • md5.js: md5加密。

动画库


  • iTyped.js: 简单 Javascript 动画输入,没有任何依赖关系。

  • Three.js: 3D显示动画库。

  • Animejs:一个轻量的JavaScript 动画库, 拥有简单而强大的API。可对 CSS 属性、 SVG、 DOM 和JavaScript 对象进行动画。

  • Mo.js: 一款效果非常炫酷的HTML5 SVG气泡导航和波浪式页面切换特效。

  • Velocity.js:一个简单易用、高性能、功能丰富的轻量级JS动画库。

  • ScrollReveal.js: 一个JavaScript库,用于在元素进入/离开视口时轻松对其进行动画处理。

  • Kute.js: 一个完全成熟的原生 JavaScript 动画引擎,具有跨浏览器动画的基本功能。

  • Bounce.js:快速创建漂亮的 CSS3 动画效果。

  • Dynamicsjs: 一个JavaScript库,用于创建基于物理的动画。

  • GreenSock.js):适用于现代网络的专业级JavaScript动画。

  • Particles.js:用于创建粒子的轻量级JavaScript库。

  • Matter.js:Matter.js是Web的2D物理引擎。

  • Parallax.js:滚动视差效果封装,便于快速调用实现。

  • Tween.js: 补间动画。

  • Ramjet.js: 制作从一个元素变化为另外一个元素的动效,它能作用于DOM元素、SVG、静态和动态的图片。

  • Rellax.js:让页面滚动更有趣的动画库。

  • Hover.css: 一组CSS3动力悬停效果,可应用于链接,按钮,徽标,SVG,特色图像等。

  • Animista.css: 一个在线动画生成器,同时也是一个动画库。

  • Animate.css:一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果。

  • Vivify.css:一个免费的CSS动画库。

  • Magic Animations CSS3:CSS3 动画库。

  • cssanimation:一堆不同动画集合,CSS3 动画包。

  • Angrytools: 可以做动画生成器,同时也是一个动画库。

Css 预处理


  • sass: 世界上最成熟、最稳定、最强大的专业级CSS扩展语言。

  • less: 一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

  • stylus: 一个高效、动态以及丰富的 CSS 预处理器。

图表库


  • C3.js: C3.js 开源图表库

  • Chart.js:为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。

  • Chartist.js: 一个简单的 JavaScript 动画库,你能够自制美丽的响应式图表,或者进行其他创作。

  • D3.js: 一个非常强大的图形JavaScript库。D3.js可以作为图表库的构建块且免费。

  • Echarts: 数据可视化图表库。

  • Flot.js: jQuery的Javascript图表库。

  • HighCharts.js:兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。

  • koolchart.js:基于HTML5 Canvas的JavaScript图表库。

  • Recharts: Recharts是一个用React和D3构建的重新定义的图表库。

包管理工具


  • npm: 包管理工具。

  • yarn: 快速、可靠、安全的依赖管理工具。

  • bower

打包工具


  • webpack: 一个现代 JavaScript 应用程序的静态模块打包器。

  • Parcel: Web 应用打包工具,适用于经验不同的开发者。

  • rollup: 一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码。

Node


  • Node 中文网文档

  • Express:基于 Node.js 平台,快速、开放、极简的 Web 开发框架。

  • koa: Koa -- 基于 Node.js 平台的下一代 web 开发框架。

  • Egg:为企业级框架和应用而生。

  • Meteor: 一个web APP开发框架。

  • Nodal: Node.js的网络服务器,经过优化可快速高效地构建API服务。

  • Keystone: 以Express和MongoDB为基础搭建的Node.js CMS和web应用程序平台。

  • Sails:一个优秀的web后台开发框架。它基于著名的express,添加了很多功能模块,支持REST、各种流行数据库等。

  • Loopback: LoopBack 框架是由一组Node.js的模块构成的。

  • Pomelo:一个轻量级的服务器框架,它最适合的应用领域是网页游戏、社交游戏、移动游戏的服务端,开发者会发现pomelo可以用如此少的代码达到强大的扩展性和伸缩性。。

  • Totaljs: Node.js 的 MVC 框架。

  • Derby: DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用。

  • Socket: Socket.io是一个类库,可以在浏览器与服务器之间实现实时、双向、基于事件的通信。英文

  • Mojito: 一个模块化的,由源代码控制的拆分测试框架,可让您通过Git / CI构建,启动和分析实验。

  • Next: 用于构建高效且可伸缩的服务端应用程序的渐进式 Node.js 框架。

  • ThinkJS: 一款面向未来开发的 Node.js 框架,整合了大量的项目最佳实践,让企业级开发变得更简单、高效。

  • Mean

测试工具


  • eslint: 可组装的JavaScript和JSX检查工具。

  • Jest: 一个令人愉快的 JavaScript 测试框架,专注于简洁明快。

  • mocha: 一个功能丰富的javascript测试框架,运行在node.js和浏览器中,使异步测试变得简单有趣。

  • JSHint: 用于标记用JavaScript编写的程序中的可疑用法。

  • JScs.js: 验证JavaScript代码。

其他


  • Markdown: 一份免费且开源的 Markdown 参考手册,详细讲解了 Markdown 这一简单、易用的文档格式化标记语言的用法。

  • Ionic 一个强大的 HTML5 应用程序开发框架。

  • mui: 最接近原生APP体验的高性能前端框架。

  • leetCode: 力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界IT 名企。

  • font-awesome: 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式。



作者:涅槃快乐是金
链接:https://www.jianshu.com/p/d8584f850d65
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


前言

哈哈哈哈,最近事情太多了,已经快三个月没更新了,现在也忙的差不多了,咱们更新继续~~

今天给大家分享的是关于如何从零开始搭建 B 端设计规范

时间转眼即逝,掐指一算,我接触 B 端已有 4 年之久了,当年刚接触的时候,B 端的从业人员比例还是很少的。近两年 B 端越来越火热,无论从设计风格还是产品数量上,都有了很大的提升。

随着 B 端的产品越来越完善,要求设计师的专业性也要越来越强。设计规范作为基础中的基础,是大家都要熟练掌握的技能,我们不仅要会运用各种规范,还要会撰写适合产品的规范。

分享开始,敲黑板~~

一  设计规范的目标

在搭建设计系统之前,我们要想清楚设计规范的目标是什么?使用者是谁?

目标:保持产品风格统一性提高设计输出效率减少无效沟通

使用人群:UI交互前端测试。

二  设计原则

设计规范要符合基本的设计原则,否则你的规范会杂乱无章。这里我总结了 6 条原则供大家参考。

Unity(统一性):页面风格、色彩、布局等要保持全局统一,不可为了某一功能的美观而去破坏整体性。

Accessibility(易用性):易用是首要考虑的因素,能一步解决的事情绝不两步。

Proximity(亲密性):如果信息的关联性强,则他们的距离就要相应的缩短,让他们看起来是一个视觉单元;反之,则距离要加大。要让用户对信息的区域划分一目了然。

Alignment(对齐原则):在界面中,将元素进行对齐,即符合用户的认知,也可以引导视觉流向,让用户更加流畅的阅读信息。

Contrast(对比原则):对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

Repetition(重复原则):相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。

三  框架布局

这里一般采用栅格布局。说到栅格,有好多小伙伴又要再回顾一下知识点了。我今天再把栅格知识帮大家复习一遍,如果之前不是很了解栅格的,拿个小本本记下来,要考~~

栅格布局能够适应各种屏幕尺寸及分辨率,确保整体布局的一致性。

栅格建议使用 1、2、3、4、6 切分布局,可以进行多种布局组合,并在整个设计中保持布局的结构的一致性。

页面中一般采用 24 列自适应网格,你可以使用它为各种屏幕尺寸创建灵活的布局。

边距 Margins、列 Columns、间隔 Gutters 分别是什么?

边距 Margins:边距是内容与左右边缘之间的空间。控制台内容区的边距选用 8 的倍数为设定值,一般采用 16/24px 的居多。

需要注意的是:

减去 margin 后,列在页面区域均分,保证每列的宽度是一致的;

在区域有 margin 的情况下,划分列的区域不能包含 margin。

列 Columns:在电脑端列的数量是个常量(24列),每一列宽度的尺寸随屏幕大小进行自适应调整。

间隔 Gutters:间隔是列与列之间的空隙,控制台产品 gutter 使用固定值也要是 8 的倍数,一般采用 16/24px。

需要注意的是:

布局的左右两边的分界线 gutter 可以为 0;

必须保证 column 的宽度是一致的。

边距 Padding:padding 指一个元素的内容和其边界之间的空间,padding 最小值是 4px,然后其余均为 8px 的倍数,建议值为 8/16/24px。

内容区定宽:此场景常用于用户欢迎页、结果页等需要将内容区宽度设置为固定值的页面。此时 column 和 gutter 保持不变,根据页面宽度改变 margin 的值。

四  设计风格

4.1  Color(颜色)

色彩内容主要包含基础色(如品牌色、黑色、白色)和功能色(如链接色、提醒色等)。图表配色为单独的配色体系。

在前期制定颜色规范的时候,精益求精的设定颜色,切忌颜色过多。

颜色的状态色尽量用原色进行转换,设置一个合理的变色公式,让所有颜色的状态色都根据这个公式进行转换。例:

Hover:H不变 S加10 B减5

Click:H不变 S加20 B减10

Disable:HSB均不变,不透明度 30%

在设计规范中,尽量把颜色的色值和 rgba 值都写出来(这里是强迫症患者要标的,因为有时候色值完全一样,但 rgba 数值略有不同,虽然效果一样,但是对于强迫症的你来说,舒服吗?)

状态色有 4 状态色:Normal、Hover、Click、Disable

在设定图表颜色的时候,要考虑不同的使用样式(柱状图、环形图、饼图等...),同时也要考虑他的延展性,比如你设定 12 个 chart 色值,在使用的时候按着顺序来使用,当超过 12 个后可以为同一个颜色。

4.2  Font(文字)

设定统一的字体规范,使用非衬线字体在各个操作系统下都有最佳展示效果。

首先,要设置一个字体家族,保证产品界面的最优展示。

例如(仅作为展示,不是建议):font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

4.2.1  字号

现在主流的产品中,主体字为 12px / 14px 的居多,可根据自身的产品定位以及用户的习惯进行设定。字号不要出现奇数,否则在一些显示器上会有对不齐像素的状况发生。

4.2.2  行高

行高常规的有两种规范:

字号+8px;

1.5倍 / 2倍 * 字号。

我喜欢用第一种,就是字号大小 + 8px 作为行高的规范。行高是不可被忽略的重要细节之一,因为在算间距的时候,行高是要被算进去的。

4.2.3  字重

字重有很多,但是在真正的产品使用中,字重尽量不要太多种,2~3 种即可。

4.2.4  字体颜色

字体颜色数量建议在 3~4 个,不宜过多,但是每个层级之间区分要大一些。

文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰;最佳对比度为 7:1。测试对比度的网站:https://contrast-ratio.com

WCAG 2.0 中将颜色对比等级分为 3 种,A级,AA级,AAA级,等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大。

A级:对比度 3:1,是普通观察者可接受的最低对比;

AA级:对比度 4.5:1,是普通视力损失的人可接受的最低对比度;

AAA级:对比度 7:1,是严重视力损失的人可接受的最低对比度。

4.3  icon(图标)

设定统一的图标使用规范,让视觉效果更和谐。

4.3.1  Icon 大小

icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相邻的两个尺寸至少相差 4px,否则你会在后期用的时候会有选择困难症。同时功能 icon 尽量贴边或尽量贴边绘制,保证展现的视觉统一性(操作 icon 除外)。

单独 icon 使用的时候,尽量不要太小,最小值建议为 12px。

4.3.2  Icon 热区

icon 的热区经常被设计师和开发所忽略,本身 icon 的尺寸一般就很小,再加上如果没有设置热区的话,操作体验极差。所以一定一定要设置 icon 的热区,设置的值我建议为 icon 大小的 2倍。例:icon 大小为 14 * 14px,则热区大小为 28 * 28px。

4.4  size(尺寸)

页面内布局间、模块间、模块内的各部件距离。

尺寸大部分规范中都用的是 8 的倍数,不用纠结,直接用就行。我这里有个公式:Sn = 8px * n,n为正整数。特殊:最小支持4px。

五  交互

交互我分为两个方面:交互方式交互状态

5.1  交互方式

交互方式指的是对某一个操作所进行的具体行为,比如刷新方式有下拉上滑按压点击等方式,这就是所谓的交互方式。交互方式有很多种,没有最优,只有最适合。

交互方式要保持产品的统一性,同类别的交互不可有不同的操作感受。同时交互方式要符合大众的认知习惯,可创新但不可违背潜意识。

随着时代的发展,交互方式也在不断的更新。比如最开始的手机是按键式的,随着大众对屏幕大小的需求不断提升,到了现在的全面屏手机,如果这个时候你再去做当年火爆的按键手机,那你就只能跟市场说拜拜。

总结交互方式的几个关键点:创新统一紧跟趋势

5.2  交互状态

一个完整的产品生态是不会遗漏每一个交互状态的。

同样是做售票的软件,为什么高铁管家就比 12306 做的好呢?是因为高铁管家把很多交互状态友好的做了展现反馈,而不是冰冷的数据吞吐。

同类产品中,每个都有自己独特的交互状态,可能你一直用某个软件的原因只是有个功能的交互状态打动了你,从此你就深深爱上了它。

现在工作中,我们都在讲人效,拼命的去更新迭代,去研发新功能,开拓新产品,往往会忽略交互状态这个点,因为很多时候付出收获比是很低的,但是真正好的产品,这部分是不可或缺的。

交互真的太大了,单独写一篇文章都写不完,这篇我只能抛砖引玉,勾起你的思维,如果有任何要探讨的,欢迎来叨扰。

六  引导

引导分为 5 种:Newbie guide(新手引导)Steps guide(步骤引导)Help / Operation guide(帮助/操作引导)New function guide(新功能引导)Blank guide(空白页引导)

6.1  Newbie guide(新手引导)

新手引导是针对新用户的,首次进入产品的时候,我们要着重的把自己产品的亮点以及操作快速的介绍给新用户,让他用最短的时候上手我们的产品。

新手引导要言简意赅,并且如果非必要的话,尽量给用户一个可以直接关闭的按钮,让用户有选择权。我就非常讨厌有一些产品的新手引导,必须走完全部流程后才能关闭,恶心的不行。

6.2  Steps guide(步骤引导)

步骤引导一般用在有固定操作步骤的场景下,指引用户一步一步的完成想要的结果。常规的步骤引导建议在 3~5 步之间为合理。

6.3  Help/Operation guide(帮助/操作引导)

帮助/操作引导的展现方式是比较丰富多彩的,可以是提示语、辅助性文本、tooltips 等等,他的作用就是辅助用户去了解并且知道如何操作这个功能。

这个也是在产品中使用频率最高的,运用好他,可以让你的产品事半功倍。

6.4  New function guide(新功能引导)

他就是常用在新功能上线后,用户第一次登陆相关页面后做的一些引导,目的是为了告诉用户我们做了新东西,你快来试试吧。

6.5  Blank guide(空白页引导)

空白页引导一般用在在缺省页,对用户进行一些操作指引,让无信息的页面变得更有价值。比如百度在一些缺省页上就放了一些关于失踪儿童的信息,就因为做了这个引导,帮助了千万个家庭找到了失散的孩子。

七  组件

组件是设计系统里面最为庞大的东西。组件可以分为了 5 类:

Navigation(导航)

Data Entry(数据录入)

Data Display(数据显示)

Feedback(反馈)

Other(其它)

基本上这几类已经覆盖了多数的组件,下面我把我自己整理的这几类分别都包含哪些组件,以及组件的简单介绍给列出来,快来保存吧。

7.1  Navigation(导航)

Affix(固钉):将页面元素钉在可视范围。

Breadcrumb(面包屑):显示当前页面在系统层级结构中的位置,并能向上返回。

Menu(导航菜单):为页面和功能提供导航的菜单列表。

Pagination(分页):采用分页的形式分隔长列表,每次只加载一个页面。

Steps(步骤条):引导用户按照流程完成任务的导航条。

7.2  Data Entry(数据录入)

Checkbox(多选框):可选择多个。

Radio(单选框):只可选择一个。

Switch(开关):开关选择器。

Form(表单):具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

Input(输入框):通过鼠标或键盘输入内容,是最基础的表单域的包装。

Select(选择器):下拉选择器。

Skeleton(加载占位图):在需要等待加载内容的位置提供一个占位图。

Time selectors and sliders(日期时间选择过滤器):当用户需要输入一个时间或日期,可以点击标准输入框,弹出时间面板进行选择。

Transfer(穿梭框):双栏穿梭选择框。

Upload(上传):文件选择上传和拖拽上传控件。

7.3  Data Display(数据显示)

Badge(微标):图标右上角的圆形徽标数字。

Card(卡片):通用卡片容器。

Collapse(折叠面板):可以折叠/展开的内容区域。

Popover(气泡卡片):点击/鼠标移入元素,弹出气泡式的卡片浮层(可操作)。

Tabs(标签页):选项卡切换组件。

Table(表格):展示行列数据。

Tag(标签):进行标记和分类的小标签。

Timeline(时间轴):垂直展示的时间流信息。

Tooltip(文字提示):简单的文字提示气泡框。

Tree(树形控件):文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

7.4  Feedback(反馈)

Alert(警告提示):警告提示,展现需要关注的信息。

Notification(通知提示框):全局展示通知提醒信息。

Drawer(抽屉):抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。

Modal(对话框):模态对话框和非模态对话框。

Progress(进度):展示操作的当前进度。

Spin(加载):用于页面和区块的加载中状态。

7.5  Other(其它)

Button(按钮):按钮用于开始一个即时操作。

chart(图表):图标数据显示。

Copyright(版权):版权信息。

Divider(分割线):区隔内容的分割线。

logo(标志):logo 的使用。

LocaleProvider(国际化):为组件内建文案提供统一的国际化支持。

Text link(文字链):点击有链接跳转的文字。

Scrollbar(滚动条):在特定界面区域内进行内容的更多展示。

以上组件可根据自己的产品进行增删,把组件规范设计完成后,整个设计规范就完成了 90% 以上,可以算一个比较完整的设计规范了。

总结

每一个设计规范都是有灵魂的,规范是为了更好的做设计,而不是限制设计师双手的枷锁。

设计规范也不是一成不变的,他在落地使用的时候多少都会有问题,需要慢慢的去反复检验规范的合理性,发现不合理的及时更正。

最后,希望本编文章能对看完的你有所帮助,这也是我做分享的初衷,我们下期见。



作者:友设青年
链接:https://www.jianshu.com/p/4752bf2e25bb
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。