nicebox网页设计(合集)4篇

2024年nicebox网页设计 篇1

一个网站功能设计好坏直接影响到网站用户体验，像一些资深网站设计人员，他们会将自己想像成网站客户，然后根据他们浏览网站习惯，对网站各个功能进行设计。特别是营销型网站中最为关键，资深设计师会在合适位置放置咨询按钮，并且咨询功能触发很特别，会让用户不自觉地想要去点击。

企业网站设计并没有大家想的那么简单，因为你设计出来网站是要在众多互联网的网站中去竞争，你自己觉得这个网站设计特别好是没有用，得用户和搜索引擎觉得好。网站设计足够好，不仅能够提高企业品牌形象，更能够让网站流量转化率大大提高，利于公司的发展。博学鸿儒经验足，做的网站我们就很喜欢。

2024年nicebox网页设计 篇2

字体排版绝不仅仅是使用字体那么简单，它包括了关于文字”看上去会是怎么样？”的所有事情——例如文字的大小，行高，颜色甚至文字间留白这样的细枝末节的小事。一个好的文字排版会为你所写的内容定下情感基调，并且可以帮助读者更好的理解其内容和语境。

为了让你使用起来更像是在看一本参考书而不是说明书，本文将会非常精简清晰，如果你想进一步的了解更多细节，可以点击查看在每一章中的”扩展阅读”去深入了解。

这本手册将会在GitHub上开源，并且会持续更新一些最佳实践的范例，希望你们喜欢！

字体排版设计视觉层次

视觉层次是一种理念，它意在传达页面中的元素应该依照其重要性进行组织排版，以便读者可以很容易的通览整个页面，找到相关的内容。一个好的视觉层次可以引导读者在阅读时候的视觉流向。视觉层次被广泛运用于文字排版中，它构成了文字排版设计的理论基石。

请看下图的”爱丽丝梦游仙境”的字体排版设计，它展现了一个清晰的视觉层次：

点击这里 查看网页上的实际效果

视觉层次可以被分成以下4个部分：

字体大小 & 字体重量： 设置字体大小和字体重量是两种构建视觉层次的最简单的方式。他们可以很容易地告诉读者什么地方是最重要的，引导读者的目光落到这里的内容上来。只是简单地为文字加上这两种样式，文章的重点便一目了然了。

定位： 元素定位是另外的一种构建视觉层次的方式，就像上图中，文章的标题和作者信息通过置顶和居中表明了它们的重要性。

字体： 通过使用有对比度的字体可以提高不同元素之间的辨识度，从而构建视觉层次

颜色： 为重要的文字设置不同的颜色也是一种非常简单的构建视觉层次的方式。然而使用这种方式的时候一定要小心，因为颜色的滥用可能会造成重点部分辨识度的降低。

扩展阅读：

Visual Hierarchy： How Well Does Your Design Communicate?

Creating Exciting And Unusual Visual Hierarchies

字体排版中的格式塔原则

格式塔原则， 或格式塔法则， 是一种构建感性认知的规律。当我们观察这个世界的时候，我们通常会意识到，一个复杂的场景是由多个在某些背景之上的物体构成的，而这些物体则是由更小的一些物体构成的，依此循环下去。

在字体排版中我们需要理解的两个很重要的格式塔原则就是”距离原则”和”相似原则”。.

距离原则

为了更好地掌握元素定位的方法，了解距离原则是很重要的。距离原则表明，人们会将靠得近的物体视为有关联的物体，反之，隔得比较远的物体将会被看成属于不同类别。

点击此处查看原图

在字体排版设计中，”距离”指的是通过设置行高、内间距和外间距所制造出来的留白空间。在两段不同的段落之间应该留有明显的并且易于区分的留白间隔，请看下面的例子：

注意啦，你觉得应该把内容相关的部分都挤到一个很小的空间中去吗？当然不是这样，自由随意的留白也是很重要的。距离原则告诉我们，只需要为那些没有关系的段落之间额外的加上一些易于区分的留白就可以了

相似原则

格式塔的相似原则告诉大家，看起来很像的东西会被认为是一类的东西。举个例子，如果所有可点击的文字被设置为天蓝色，那么读者就会认为文章中所有天蓝色的文字内容都是可以点击的。

在字体排版中，相似原则就意味着，拥有同样功能的元素应该在样式上保持一致。如果两组元素的功能相似的话，那么它们也应该看起来很像才对。例如，两篇同为博客帖子的文章应该看起来很像。而相反的，两个功能不相同的元素也应该看起来不像。

扩展阅读：

Gestalt Theory in Typography & Design Principles

Proximity， Uniform Connectedness & Good Continuation

字体选择字体

选择字体是一个具有创造性和情感的过程。不同的字体可以传达不同的情感，你可以尽情挑选一个合适的字体让你的文字感情变得丰沛起来。

首先为你的文字的正文挑选一个合适的字体，当你需要搭配不同字体的时候，记得要保持正文字体的不变，然后试着依据这个字体选择和它相搭配的其他字体。

使用一些例如TypeTester 和 TypeCast 这一类的工具会让你进行字体选择的时候轻松一些。

从他人处获得灵感! Fonts In Use提供了大量的优秀的字体搭配范例。

有些字体本来就是为用作大标题而设计的，而有些字体天生就只适合那些小屏幕，你要依照每个字体的”天性”去使用它们。你可以在WebType 上面找到对于不同字体而言合适的尺寸。此外 TypeKit也标明了其上的字体是适合标题或者是正文。

为了达到最大程度上的兼容，我们建议使用上面列出的格式。或者，只使用 woff2 和 woff也会支持大部分的现代浏览器。

你需要为每个列出来的格式提供一个相应的字体文件。推荐使用 Transfonter 或者FontSquirrel’s Web Font Generator，这样你就可以在只有一个字体文件的情况下，将其转换成不同的文件格式。

尽可能的压缩你的字体文件。 点击这里 查看更多信息。

将多个同源字体文件（细体、常规、半粗体、粗体等等）合并成一个font-family， 尽量不要为每个字体都起一个新的font-family的名字。

或者，你也可以通过线上字体资源服务，如Google Fonts 或者 Typekit引入你想要的字体。

扩展阅读：

Further Hardening Of The Bulletproof Syntax

FontSquirrel： How To Use The Generator

加载字体

在你引入的字体被渲染出来之前，他们需要先进行加载。下面是三种在加载的时候可能会发生的事情：

引入的字体没有被识别出来，字体应用了备用字体。

引入的字体虽然被识别出来但是没有加载，他需要在下载完成之后才会被应用。

引入的字体被成功识别并迅速应用。

场景1只发生在你尝试使用一个不存在的字体，或者声明时候的src指向了一个坏链， 这种情况可以并且应该彻底避免。接着我们跳到场景3，这种情况通常在字体被正确的缓存的时候发生，也是我们喜闻乐见的。场景2中包含着字体加载的过程，字体加载通常是难以避免的（至少是在第一次请求的时候），下面是几种处理方式：

1. 文档样式闪烁方案 （FOUT）

FOUT是指网页会在切换到合适的网页字体之前，使用默认或者备选字体显示文字。这种情况的出现是因为只有当HTML和CSS都被下载完成之后，字体请求才会发出。这就意味着，在HTML被显示出来而字体文件没有被完全下载下来中间存在着一段”空档”时间。 FOUT 算是对大部分的网页而言的最佳选择，主要是其他的选择也许更糟。如果使用得到的话，FOUT 很难被用户察觉出来。

2. 不可见文本闪烁方案（FOIT）

很多年前，一些现代浏览器开始使用一种新的技术来处理字体加载的问题 — FOIT. FOIT是指当浏览器检测到字体正在加载的时候，隐藏应用这段字体的文字，直到字体完全下载完才将其显示出来。 然而我们应该避免这种做法虽然这样做从理论上看起来还不错，但是这会带给那些网络速度比较差的用户十分糟糕的体验。有可能会在最初的FOIT后出现FOUT， 最坏的情况可能会是这段文字将永远看不到了。

3. 白屏方案

即在字体加载完成之前，整个网页都处于不可见的状态，或者也可以采用显示一个进度条.我们只推荐当FOUT 严重影响用户体验的时候使用这种方法。 我们通常在一个网页需要大面积显示一个特定的字体的时候使用该方法，否则，FOUT 总会我们的第一选择，因为”内容至上”。白屏方案与 FOIT很相似， 但对于你来说，你拥有控制在什么时候给用户展示你的内容的自由，这种感觉会似乎更棒一些，不是吗？而且在FOIT方案中， 不可见的文本有时候会给读者带来困惑，而彻底的白屏（或者一个进度条）会让人很自然的觉得是一个正在加载的信号。

不管你是打算使用 FOUT 方案或者白屏方案， 我们都推荐您使用Web Font Loader这个JavaScript库. Web Font Loader 可以让你对 @font-face加以控制， 而且你也为字体加载的体验添加控制事件。

注意： 有一个W3C 字体加载 API也会实现同样的功能，但是它现在的 支持不是很好_

异步地使用 Web Font Loader 很重要，只有这样做才不会延误页面其他部位的渲染。

写样式的时候，让你的备用字体尽可能近的靠近你的实际字体，这样才能最大程度的减少 FOUT造成的影响.点击 这里你将会看到一系列的备选字体. 使用 这个工具你将很容易的看到备选字体和你引入的字体的对比效果.

白屏方案

在这个例子里面，备选字体不需要和你引入的字体看起来很像，因为我们不会用到 FOUT. 依照你自己的喜好去选择备选字体吧。

如果你想要用一个进度条取代白屏，你可以使用Pace。这种方法在用户体验上效果会更好一些，特别是当字体文件很大的时候。

扩展阅读：

Type Study： Choosing Fallback Fonts

FOUT， FOIT， FOFT

Web Font Optimization

OpenType 的特性

OpenType 的特性可以被视为文字进行字体排版时的可选项，它们被用来加强文字的表现和易读性。

p { font-kerning： normal; font-variant-ligatures： common-ligatures contextual; -moz-font-feature-settings： "kern"， "liga"， "clig"， "calt"; -ms-font-feature-settings： "kern"， "liga"， "clig"， "alt"; -webkit-font-feature-settings： "kern"， "liga"， "clig"， "calt"; font-feature-settings： "kern"， "liga"， "clig"， "calt"; }

OpenType 特性被放置于字体之中，这就意味着对于不同的字体，会有不同的特性，在使用这些特性之前，我们需要看一看我们的字体是否支持这些特性。

使用 font-feature-settings来激活 OpenType 特性. 由于目前对于这个属性的支持不好，我们需要在属性之前加上前缀。

Kerning kern， ligatures liga， contextual ligatures clig， 和 contextual alternatives calt这四种适用于所有字体中 ######( 译者注：font-feature-settings这种属性仅支持拉丁文语系的字体使用，并不支持中文哦！ )

Web Style Guide相对大小

尽可能的使用相对大小。

html { font-size： 100% } p { font-size： 1em } @media (min-width： 64em) { html { font-size： 112.5%; } }

font-size： 100% 与浏览器的字体大小设定保持一致而不是去覆写它，根据大多数的浏览器的默认设置，这里也可以用1em 代替表示 16px.

通过改变html 的 font-size会影响到所有单位为 em和rem 的元素.如果是对于响应式设计的网页，这样做还是比较实用的。

用户的选择也很重要，所有不要偏离 font-size： 100%和1em太远.

对于font-size建议使用rem 和 em.

对于一些元素定位如margin， padding等等，建议使用 rem， em， 或者 % 。

对于媒体查询中尺寸建议使用em.

对于一些大的标题字或者配有图片的字，可以使用FitText来实现标题的缩放。尽量避免使用vw 和 vh因为现在的支持还不是很好，难于精确的配置，并且对于一些浏览器的字体和缩放设置并不适配 。

扩展阅读：

Type Study： Sizing The Legible Letter

5 Useful CSS Tricks for Responsive Design

REM vs EM – The Great Debate

PX， EM or REM Media Queries?

容器

容器，或者称为包装，指的是用来包裹一个或者多个元素的HTML元素。它将元素分组，从而更好进行语义化、修饰以及布局。

html { box-sizing： border-box; } *， *：before， *：after { box-sizing： inherit; } .container { max-width： 67rem; padding-left： 1.5rem; padding-right： 1.5rem; }

强烈建议使用 box-sizing： border-box. 点击这里 查看更多信息。

左/右内间距与最大宽度联合使用可以很容易地创建一个移动端友好的容器。

要为容器选择一个合适的宽度，既不能太大（因为太大的话读者的眼睛难以聚焦）也不能太小（这样读者的眼睛需要经常移动才可以看清）。永远记住，在进行网页字体排版的时候，没有一个适合所有字体、尺寸、行距和分辨率的铁律，你需要自己来做决定。

扩展阅读：

* { Box-sizing： Border-box } FTW

StackOverflow： Ideal Column Width For Paragraphs Online

字体大小

使用 缩放模块 可以帮助你决定在你的元素上面应用怎样的font-size .缩放模块指的是依照其内容安排的一系列比较合适的字体大小的数值。

缩放模块的说明. 点击此处

我们可以在编写CSS的一开始使用缩放模块，将它作为一个参考。

值的注意的是，尽管不同的字体有着不同的大写字母高度和x字母高度，可是大多数的模块化缩放工具都没有将这些考虑在内。

在你的样式表中，建议将你所使用到的缩放模块工具的配置信息写在注释之中。

响应式的缩放模块

只使用单独的一个缩放模块方案并不一定适合所有分辨率的设备，为了解决这个问题，你可以依据用户的设备的分辨率的不同提供不同的缩放方案

垂直距离

文字间的垂直距离是由 line-height， margin， 和padding构建出来的.

line-height 不应该带有单位。比较宽的容器里面文字的行高会大一些，而那些比较窄的容器里面行高相对来说小一些会比较合适。

为那些具有单方向的文本元素添加margin属性，建议使用margin-bottom.

要遵循距离原则.

垂直节律

垂直节律是指元素之间的垂直间隔要保持一致性。这一点十分重要，它可以带给读者视觉上放松的享受，给他们一种亲近的感觉。

Image source建立垂直节律很简单。首先，确定你使用的基础垂直内间距和基础垂直外间距的数值。然后，为你的容器，文字性元素或者其他相关元素的单方向的外边距（或者内边距）应用这个数值。如果你需要制制造更大的间隔的话，应用这个数值的倍数就好啦!

将基础间距的数值设置成与行高相同的数值，这样你的文字就像写在一个条格纸上那样整齐，就像我们传统的印刷字体设计的那样。然而，想要文字拥有垂直节律不一定需要按照上面的方法来做，只要你设置了一个基础间距，并且使得其他间距都是由这个间距成倍的得来的，那样就可以了。

文字底部对齐基线网格

文字底部对齐基线是垂直节律的一个更为严格的实现。在网页中，文字通常在line-height间居中对齐.但对于较大的文字来说会比较讨厌，因为这样做会导致在顶部和底部留有太多的空间。在传统印刷的时候，这个问题一般会通过让文字对齐基线网格的底部得以解决。

我们也可以通过为较大的文字添加一个负的margin-top和一个较小的margin-bottom，不需要使用基线网格而解决这个问题。

图片资源为不同的字体样式、字体大小和分辨率添加一个底部对齐的基线网格并不是一个很容易的方式，所以强烈建议你使用一个字体排版基线库例如 Sassline 或者 MegaType.

注意，垂直节律只是一个建议，而且基线网格也只是想象出来的。所以我们不需要在每个使用场合都遵循这个规律，也不用在每个元素中都去追求像素级别的完美。

扩展阅读：

Why is Vertical Rhythm an Important Typography Practice?

Aligning type to baseline the right way using SASS

Is Web Typography Completely Broken?

Single-direction Margin Declarations

颜色

颜色可以很大程度上的增加视觉辨识度，是字体排版中一个重要的组成部分。

不要随心所欲的挑选颜色，建议使用颜色板，建议你使用 Material Design colors 和 Flat UI colors 中提供的颜色板进行颜色选择.

不要过度滥用一个颜色，因为这样会造成辨识度的降低，同样也不要使用很多完全不同的颜色。

遵循相似原则.

不建议使用纯黑 #000 作为你的正文颜色，你可以选择一个非常灰的颜色如#333.

有时候，使用透明颜色比使用浅色会更好一些，如果你深入的了解，可以点击这里 。

确保文字和背景有较大的对比度，你可以使用 这个对比度检测工具 帮助你进行选择.

####扩展阅读：

Magic Of CSS： Color

Google Style – Color

下划线

在印刷品里，永远都不要使用到下划线，因为这样做会影响文字的阅读，重点是，它很丑！Practical Typography

一般的来说，在网页中下划线也会看起来并不美好！幸运的是， background-image 就包含一个方法，它可以使得下划线变得好看一点。 下面是Adam Schwartz使用Sass实现的下划线的例子 ：

SmartUnderline 是一个简化这个工作的库。建议你只在有链接的地方使用下划线，这是大多是网站都遵循的规律，如果不这么做的话，可能会引起误解。

2024年nicebox网页设计 篇3

做设计这一行，可以说是一门艺术，每一个作品都是要通过设计师殚心竭力的创作才能完成。灵感和天赋这种东西我们难以控制，但给大家找一些UI设计的素材，供大家学习参考还是可以的~国内的1.UI中国(www.ui.cn)

听名字大家应该就能知道，这是一个大型的，专业的UI平台，可以说网站的用户绝大部分都是专业的UI设计师。网站上有很多行业大佬，他们分享的最新最潮的作品在上面，其实整个网站更像是一个大型的UI设计师们的交流论坛。无论是对于新入门的小白还是初有成就的职业UI，这个网站都是值得收藏和参考的。

2.站酷(www.zcool.com.cn)

虽然小编自己是比较少用这个网站的，但是江湖上关于它的传说还是听说了不少。听说站酷是一个很酷的网站——嗯，页面设计的确比较酷，很多暴走漫画的类似粗犷风格。而且上面有很多比较“特别”的大神，并且该网站总是会举办一些比赛，大家都可以积极参与，多多和其他设计师交流，对自身的成长是有很大帮助的。3.花瓣网(huaban.com)

花瓣网是偏向女性古风，唯美风格的，比较大众化，使用的人也有很大部分不是设计师，但是图片素材还是特别好的，有关键字搜索，非常方便，大家没事也可以逛逛找找灵感。4.Awwward(www.awwwards.com)

一个外文的网站，全英文，所以浏览者需要会英文。但是UI设计是一种国际性行业，很多时候行业的流行趋势也从外国流行起来的。这个网站最好的地方在于你可以从中看到很多最新的行业资讯，标准等等，对工作是有力的帮助。5.behance(www.behance.net)

一个致力于展示和发现创意作品的网站，页面和awwward很相似，首页是小板块的设计展示，会有显示点赞次数和查看次数，可以实时关注热度比较高的素材，对UI的时尚脉搏能很好地把握。但是有一个小的弊端就是图片加载比较慢，浏览起来体验不太好。6.设计导航(hao.shejidaren.com)

压轴给大家推一个大招,一个神秘的综合性的素材网站，其中包括了前面我推荐的所有网站的入口。妈妈再也不用担心开那么多网站找灵感会导致电脑卡啦，打开一个即可!

这个网站就是——“设计导航”。名字是太平庸了，可以说作为一个用户大多数为设计师的网站，这个页面设计也真的不敢恭维。但是真的满满当当全是网站入口和素材，仿佛看到一个宝库!上图大家自行感受一下!

7、盒子UI（www.boxui.com）

分享以用户体验为中心的设计

评：好像不开放用户发布文章，但上面作品真心不错，主推栏目是UI设计、交互设计及用户研究。8、优艾网（www.chinaui.com）

一家服务于全球UI设计行业专业人员和相关企业的网络媒体和专业UI设计服务提供商

评：早期影响力较大的老牌UI设计网站之一，但后来明显定位有误，人气也没那么旺了。9、UIRSS（www.uirss.com）

国内最具影响力的UI设计门户网站和垂直型社区

评：2012年改版后也红火过一段时间，但不知为何2013年感觉又停滞不前，有段时间首页推荐内容居然几个月没更新。国外1、dribbble（www.dribbble.com）

一个面向创作家、艺术工作者、设计师等创意类作品人群提供作品在线服务的网站。

评：大家都喜欢叫追波，发布作品必须有邀请码，入门门槛相对较高，这也保证了作品的质量。2、pinterest（www.pinterest.com）

分享、收集素材的综合性网站

评：瀑布流鼻祖，花瓣网应该也是模仿该网站而来（个人猜测而已）3、deviantART（www.deviantart.com）

是一个为艺术家展示各自作品、并交流讨论而设计的社交网络服务网站。

评：简称DA，作品涵盖面较广，质量也不错。4、Behance（www.behance.com）

著名设计社区，创意设计人士可以展示自己的作品，发现别人分享的创意作品

评：内容跟上面几个差不多，但内容分类索引较好。5、PSDbox（www.psdbox.com）

原创Ps教程，并归纳出比较适合初学者的部分

评：设计师入门必备啊。

如果你还没入门，最快的入门办法就是报个靠谱的培训班了，但千万别指望报完学习出来就是大师了，这不是一朝一夕的事，要摆正自己的心态，另外你在找培训班的时候也要谨慎些，多考察一下。千锋UI设计培训机构还不错的。全程面授模式教学，真实项目实战。全国十几个校区，口碑也不错。可以先去实地免费试听两周，亲身体验过再决定。

2024年nicebox网页设计 篇4

随着低代码概念的火热，相关的技术及产品也是层出不穷，不管是老牌行业软件厂商还是开放平台厂商，不论是互联网行业企业SAAS软件新动向还是新兴的低代码创新产品服务,都在第一时间打出了低代码这张牌。各个平台虽然各有优势，但大多又是自成体系，真正在企业方面进行选择时却一时难以抉择。对于低代码平台的功能评价，以及各平台组件间的互联互通则成为了市场上迫切需求。

在刚刚过去的2022年，在平台互联互通的方面，阿里在第二季度推出开源引擎 “LowCodeEngin”，国家队信通院也应市场需求在第四季度推出了《低代码开发平台通用技术要求》，针对低代码相关概念以及功能点新型了进一步的规范和梳理。

在全面开放的大背景下，CodeBee团队，推出了基于开源LGPL协议 低代码引擎（LowCodeEngine）。

二，产品组成

低代码引擎，由界面设计器、OneCode通码框架以及，DSM领域建模工具 三部分支撑体系相互支撑的部分来组成，通过开放标准的组件协议完成相互继承支持。

(1) 视图设计器引擎

设计器，采用的是拖拽引擎+插件的构造模型，用户可以通过开放的低代码协议编写插件。支持JS和JAVA两种扩展语言。样式构建提供了标准CSS3编辑器，支持事件动作以及函数动态扩展。支持自定义函数库扩展，支持阿里字体图片等资源库。

（2）OneCode通码编辑器：

OneCode,是一款为低代码语言定制的统一语法体系，采用Java语言作为原生语言，运行在JVM环境中，用户可以通过Java语言与低代码应用进行交互，也可以通过Java语言完成引擎插件，调用代码引擎完成编译部署应用。

（3）DSMEngine领域建模：

DSMEngine 是独立于设计器的OneCode建模工具，平台采用领域建模模型，支持仓储管理、聚合应用，以及CodeFactory输出为OneCode代码编译输出。

DSM模型支持三种建模模式：

（1）CodeFrist 代码优先模式

通过Java语言 OneCode 模式原生撰写。

（2）ViewFrist 视图优先

通过视图引擎拖拽完成前期的交互模型，反向完成DSM模型。

（3）ModuleFrist 模型优先

通过数据库,微服务接口等模式，构建基础模型。

DSM逆向转换

通过不同方式完成的DSM模型，可以通过OneCode 在视图、Code 、以及Module 三种方式之间自由切换，利用相关工具完成仿真调试以及部署运行。

DSM第三方语言转换

DSM出码模块采用了独立的模板架构，除了可以以OneCode形式存在，还可以支持独立的出码模块定制独立的第三方语言模型输出。

三，设计器引擎介绍（1）功能概览

（2）设计器布局

设计器引擎是低代码引擎前端的SDK,面向开发人员，他本身不是一套可以适应所有人的低代码平台，而是技术开发人员可以通过扩展插件，周边生态，完成自身业务的定制，实现协同办公，CRM客户管理、物联网平台等通过低代码能力赋能业务系统（3）物料库

"物料"：低代码引擎的核心目的之一是建设跨行业的低代码框架，而每个行业由于其应用的领域不同，使用的人员以及方法方式不同，在一些底层组件方面会有会有加大差距。比如：政府业务中会大量使用的非规则表单元素，企业应用中各个行业自有的图标体系，物联网行业大量的设备图标图片以及实时联网图。（4）组件库

组件定义：可以用于低代码平台的组件，包含了搭建体验增强配置，可以在设计器中 进行拖拽、配置等操作。有两种分类方式：按照场景可以分为基础组件、业务组件、图 表组件、布局组件和复合组件等。通常用户可以自主完成相关设定，并根据业务特点在视图引擎中进行自行扩展（后续章节中会演示实际注册示例）

组件通常是一组完成特定功能的可交互组件，根据不同的引擎模式，在引擎中完成加载渲染配置。

配置示例

Code转换

组件调试导入

（5）支撑管理

公共资源导入

（6）样式体系

DOM树透视样式盒

DOM树透视

添加图片注释，不超过 140 字（可选）

配图示例代码

{ "alias":"BuildTreeTreeView", "key":"xui.UI.TreeView", "host":this, "properties":{ "name":"BuildTreeTreeGrid", "items":[ { "borderType":"none", "caption":"JAVA树", "dynDestory":false, "hidden":false, "id":"getBuildTree", "imageClass":"bpmfont bpmgongzuoliuxitongpeizhi", "tagVar":{ } } ], "iniFold":false, "dynDestory":true }, "CS":{ "KEY":{ "color":"#000000", "font-weight":"lighter", "border-radius":"0px 2px 0px 0px" }, "BAR":{ "font-family":"tahoma,geneva,sans-serif" } } }

动态样式盒

添加图片注释，不超过 140 字（可选）

代码配置示例

{ "alias":"xui_ui_cssbox1", "key":"xui.UI.CSSBox", "host":this, "properties":{ "className":"xui-css-ame", "normalStatus":{ "color":"#eeeeee", "border-radius":"6px", "box-shadow":"inset 0px 1px 0px #87C1DD", "text-shadow":"0 1px 0 #297192", "$gradient":{ "stops":[ { "pos":"0%", "clr":"#4BA3CC" }, { "pos":"70%", "clr":"#3289B2" } ], "type":"linear", "orient":"T" }, "cursor":"pointer", "border-top":"solid #3899C6 1px", "border-right":"solid #3899C6 1px", "border-bottom":"solid #3899C6 1px", "border-left":"solid #3899C6 1px" }, "hoverStatus":{ "border-radius":"0px 3px 0px 0px" } } }（7）事件框架

添加图片注释，不超过 140 字（可选）

配置代码示例：

{ "alias":"BuildTreeTreeView", "key":"xui.UI.TreeView", "host":this, "properties":{ "name":"BuildTreeTreeGrid", "items":[ { "borderType":"none", "caption":"JAVA树", "dynDestory":false, "hidden":false, "id":"getBuildTree", "imageClass":"bpmfont bpmgongzuoliuxitongpeizhi", "tagVar":{ } } ], "iniFold":false, "dynDestory":true }, "events":{ //获取数据 "onGetContent":{ "actions":[ { "args":[ "{page.ReloadChild.setQueryData()}", null, null, "{args[1].tagVar}", "" ], "desc":"设置扩展参数", "method":"setQueryData", "redirection":"other:callback:call", "target":"ReloadChild", "type":"control" } ] }, //数据项选择 "onItemSelected":{ "actions":[ { "args":[ "{args[1].id}" ], "conditions":[ { "symbol":"non-empty", "right":"", "conditionId":"_nonempty_{args[1].className}", "left":"{args[1].className}" } ], "desc":"删除存在页", "method":"removeItems", "target":"BuildTreeTab", "type":"control" } ] } } }（8）动作调用

功能概览

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

配置实例代码：

{ "args":[ "{page.ReloadChild.setQueryData()}", null, null, "{args[1].tagVar}", "" ], "desc":"设置扩展参数", "method":"setQueryData", "redirection":"other:callback:call", "target":"ReloadChild", "type":"control" }, { "args":[ "{page.ReloadChild.invoke()}", "temp", null, "{args[2]}" ], "desc":"子节点装载", "method":"invoke", "redirection":"other:callback:call", "return":false, "target":"ReloadChild", "type":"control" } ] }（9）插件体系

插件是嵌入到设计器的内置管理功能，不同于业务组件，插件更多的是系统极的扩展功能。在实际应用中也比较常见，如系统运行期我们要根据用户不同显示不同内容数据，这就需要权限插件来完成，而业务用户在使用过程也会涉及到大量的业务和数据的流转功能而这些功能则需要动态的来管理页面的属性，甚至动态生成注入页面。这就需要流程插件来辅助完成。 在实际开发过程中特别是真实项目的工程开发时，我们往往要针对工程方面的进行很多的宏操作比如批量的修改特定组件样式，按特定条件检索复制组件特性，自动添加动作等等。这些都需要类似的宏插件来完成，OneCode 在整合后端运行以及服务部署方面也是按插件体系来规范的。分别针对，DSM建模提供了DSM插件，发布管理及运行提供了OPS插件, API整合方面提供了代理服务器插件，系统插件部分采用全开源方式共有需要的用户自行修改方便用户后期可以参照插件体系来修改自身的插件体系。

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

四，OneCode中后台

OneCode 本身基于JAVA语言体系，是在Java Spring 注解基础上的一套扩展子集，可以在普通额Java程序中通过添加注解，来实现前后台与低代码引擎的交互处理。（1）渲染原理

（2）示例展示

添加图片注释，不超过 140 字（可选）（3）完整模块OneCode

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

@Controller @RequestMapping("/admin/org/person/") @MethodChinaName(cname = "人员管理", imageClass = "spafont spa-icon-login") @Aggregation(sourceClass = PersonService.class) public class PersonAPI { @RequestMapping(method = RequestMethod.POST, value = "Persons") @GridViewAnnotation() @ModuleAnnotation( caption = "人员列表") @APIEventAnnotation(autoRun = true, bindMenu = {CustomMenuItem.reload}) @ResponseBody public ListResultModel<List<PersonGridView>> getPersons(String orgId) { ListResultModel<List<PersonGridView>> resultModel = new ListResultModel<List<PersonGridView>>(); List<Person> personList = new ArrayList<>(); try { personList = getService().getPersons(orgId); resultModel = PageUtil.getDefaultPageList(personList, PersonGridView.class); } catch (Exception e) { e.printStackTrace(); } return resultModel; } @MethodChinaName(cname = "人员信息") @RequestMapping(method = RequestMethod.POST, value = "PersonInfo") @NavGroupViewAnnotation() @APIEventAnnotation(callback = {CustomCallBack.ReloadParent, CustomCallBack.Close}, bindMenu = {CustomMenuItem.editor}) @DialogAnnotation @ModuleAnnotation(caption = "编辑人员信息", width = "800", height = "550") @ResponseBody public ResultModel<PersonNav> getPersonInfo(String personId) { ResultModel<PersonNav> resultModel = new ResultModel<PersonNav>(); return resultModel; } @MethodChinaName(cname = "添加人员") @RequestMapping(method = RequestMethod.POST, value = "AddPersonView") @FormViewAnnotation @APIEventAnnotation(bindMenu = {CustomMenuItem.add}, autoRun = true) @Disabled @ModuleAnnotation( caption = "添加人员信息", width = "370", height = "260") @ResponseBody public ResultModel<AddPerson> AddPerson(String orgId) { ResultModel<AddPerson> resultModel = new ResultModel<AddPerson>(); CtPerson person = new CtPerson(); person.setOrgId(orgId); resultModel.setData(new AddPerson(person)); return resultModel; } @MethodChinaName(cname = "保存成员信息") @RequestMapping(value = {"savePerson"}, method = {RequestMethod.GET, RequestMethod.POST}) @APIEventAnnotation(callback = {CustomCallBack.ReloadParent, CustomCallBack.Close}, bindMenu = CustomMenuItem.save) public @ResponseBody ResultModel<Boolean> savePerson(@RequestBody CtPerson person) { ResultModel<Boolean> userStatusInfo = new ResultModel<Boolean>(); getService().savePerson(person); return userStatusInfo; } @MethodChinaName(cname = "删除人员") @RequestMapping(value = {"delPerson"}, method = {RequestMethod.GET, RequestMethod.POST}) @APIEventAnnotation(callback = {CustomCallBack.Reload, CustomCallBack.ReloadParent}, bindMenu = CustomMenuItem.delete) public @ResponseBody ResultModel<Boolean> delPerson(String iD) { ResultModel<Boolean> userStatusInfo = new ResultModel<Boolean>(); getService().delPerson(iD); return userStatusInfo; } PersonService getService() { return EsbUtil.parExpression(PersonService.class); } } @PageBar // @GridAnnotation(event = CustomGridEvent.editor, customService = PersonService.class, customMenu = {GridMenu.Add, GridMenu.Delete, GridMenu.Reload}) public class PersonGridView { @CustomAnnotation(pid = true, hidden = true) String orgId; @CustomAnnotation(pid = true, hidden = true) String roleId; @CustomAnnotation(uid = true, hidden = true) String iD; @CustomAnnotation(caption = "用户名称", required = true) String name; @CustomAnnotation(caption = "账户信息", required = true) String account; @CustomAnnotation(caption = "邮箱") String email; @InputAnnotation(inputType = InputType.password) @CustomAnnotation(caption = "密码", required = true) String password; @CustomAnnotation(caption = "手机") String mobile; @CustomAnnotation(caption = "部门名称") String orgName; public PersonGridView(Person person) { this.iD = person.getID(); this.orgId = person.getOrgId(); this.name = person.getName(); this.account = person.getAccount(); this.password = person.getPassword(); this.mobile = person.getMobile(); this.email = person.getEmail(); Org org = null; try { org = OrgManagerFactory.getOrgManager().getOrgByID(person.getOrgId()); this.orgName = org.getName(); } catch (OrgNotFoundException e) { e.printStackTrace(); } } } @BottomBarMenu @FormAnnotation(bottombarMenu = {CustomFormMenu.Save, CustomFormMenu.Close}, customService = PersonService.class, col = 1) public class AddPerson { @CustomAnnotation(uid = true, hidden = true) String iD; @CustomAnnotation(caption = "用户名称", required = true) String name; @CustomAnnotation(pid = true, hidden = true) String orgId; @CustomAnnotation(pid = true, hidden = true) String roleId; @CustomAnnotation(caption = "账户信息", required = true) String account; @CustomAnnotation(caption = "邮箱") String email; @InputAnnotation(inputType= InputType.password) @CustomAnnotation(caption = "密码", required = true) String password; @CustomAnnotation(caption = "手机") String mobile; public AddPerson(Person person) { this.iD = person.getID(); this.orgId = person.getOrgId(); this.name = person.getName(); this.account = person.getAccount(); this.password = person.getPassword(); this.mobile = person.getMobile(); this.email = person.getEmail(); } }

（五）DSM建模工具

DSM建模，百度百科是这样定义的：

特定域建模（Domain-specific modeling，DSM），是一种设计和开发系统（如电脑软件）的软件工程方法学。它系统使用图形化特定域语言（DSL），表现系统的各个方面。DSM的语言倾向于支持比通用建模语言更高级别的抽象，因此需要较少的努力和更少的底层细节来描述特定系统。

低代码技术应用可以通过提供更强的工具，提升程序员的代码效率。但其本质上也是一种特定场景下的软件描述方法，这个层面上低码技术和DSM思想是有其相通相同之处的，产品在设计之初就将DSM建模语言的构建以及工具支撑作为了底层支撑设计，将应用中积累的建模应用采用DSM的思想进行重构整合在底层打通。

我们将现有的资源类的工具，统一到仓库应用中，包括统一的物料库导入，统一的数据源（数据库，外部存储）管理。并通代码工厂的辅助构建统一到Contenxt(OneCode)的当前环境技术模型中。在各个特定的业务模型中，完成独立的聚合实体整合，以及相应的服务管理，并为相关的方法模型透视管理服务。在OneCode 的基础之上，摆脱传统的 代码模板与生成机制。实现代码向模型的逆向能力。将DSM设计能贯穿整个项目开发实施管理过程，打造结余真实的代码之上的建模语言。（1）仓储建模

（2）聚合应用

（3）视图工厂

（4）支撑域

添加图片注释，不超过 140 字（可选）（5）流程建模

添加图片注释，不超过 140 字（可选）六，应用集成（1）内核最小集合集成（JS离线应用）

设计器内核完全采用JS脚本完成，是独立的前端框架。内核版本包括：RAD 页面设计编辑器，xui运行运行脚本两部分。

添加图片注释，不超过 140 字（可选）

最小集合仅包含，页面设计及器以及插件框架。

设计界面集成：

下载开源包后，运行debug.html 即可打开编辑器。

添加图片注释，不超过 140 字（可选）

集成到自由应用时只需要，引入两个关键的js lib包即可集成到自有的应用。

<script type="text/javascript" src="/RAD/xui.js"></script> <script type="text/javascript" src="/RAD/index.js"></script> <script type="text/javascript"> var lang = (function () { var dft = 'zh-cn', map = { 'en-us': 'en', 'zh-cn': 'cn' }, n = navigator, l = (n.language || n.browserLanguage || '').toLowerCase(); return map[l] || map[dft]; })(); xui.include("xui.Locale." + lang + '.doc', "/RAD/Locale/" + lang + ".js", function () { xui.Module.load('RAD', function () { SPA = this; }, lang); });

运行支撑环境集成：打开：

设计完成的文件再应用环境中引入如下代码即可

<script type="text/javascript" src="/xui/js/xui-all.js"></script> <script type="text/javascript" src="./xuiconf.js"></script> <script type="text/javascript" src="/xui/Locale/cn.js"></script>（2）团队协作版

团队协作版是独立的服务器部署版，在官网上申请账号后，可以在独立的服务器上运行。启动后通过浏览器访问 http://demoserver:83 用管理员 sysadmin 登录：

首次登录 会进入默认的工程配置界面

配置工程

关联API

设定团队管理员