从0到1，读懂低代码平台详情页设计
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">什么是低代码<span style="color: black;">研发</span>平台？它的用处有多大呢 ？下面是笔者整理分享的关于低代码平台详情页设计的内容<span style="color: black;">文案</span>，其中<span style="color: black;">包括</span>页面布局编辑器的设计讨论、可视化体验、标准组件、业务能力建设四个点的内容，想要<span style="color: black;">认识</span>的<span style="color: black;">朋友</span>进来<span style="color: black;">瞧瞧</span>吧！</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/4c1ebe39d61d48e09a9c872a8553bcf2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723644950&x-signature=iNdVa%2BiyGNIsrtUgKJ8tk47qeqI%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">低代码<span style="color: black;">研发</span>平台是无需编码或<span style="color: black;">经过</span>少量代码就<span style="color: black;">能够</span>快速生成应用程序的<span style="color: black;">研发</span>平台。<span style="color: black;">经过</span>可视化进行应用程序<span style="color: black;">研发</span>的<span style="color: black;">办法</span>。<span style="color: black;">运用</span>拖拽组件和模型驱动的<span style="color: black;">规律</span>来创建网页和移动应用程序。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文从平台生态、用户体验、布局组件等方面，讨论低代码<span style="color: black;">研发</span>平台的交互核心”页面布局编辑器“，<span style="color: black;">期盼</span>对你有所启发。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">低代码<span style="color: black;">研发</span>平台，<span style="color: black;">经过</span>可视化进行应用程序<span style="color: black;">研发</span>，实现任何人都<span style="color: black;">能够</span>扩展SaaS应用的范围和功能的愿景。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">低代码<span style="color: black;">研发</span>平台的可视化能力<span style="color: black;">包括</span>不限于：</p>列表数据可视化配置，即视图设计，例如列表、级联、卡片、日历、看板、项目、GIS等。详情数据可视化配置，即页面设计，例如页头、按钮、字段、标签页、动态、协同等。数据模型可视化配置，即建模设计，例如对象、字段、关系、数据验证、数据表达式等。数据分析可视化配置，即驾驶舱设计，例如聚合表、图表组件、数据组件、筛选组件等。业务流程可视化配置，即集成设计，例如触发器、业务流、RPA流、数据连接器等。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个标准的应用程序从原型定义到云端发布上线，<span style="color: black;">最少</span><span style="color: black;">必须</span>经历以上5个可视化配置环节。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接下来重点讨论下，详情数据可视化配置工具的<span style="color: black;">制品</span>实现，即“页面布局编辑器”，<span style="color: black;">期盼</span>对你有所<span style="color: black;">帮忙</span>。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>关于页面布局编辑器的设计讨论</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个现象，<span style="color: black;">为何</span>现行的低代码<span style="color: black;">研发</span>平台，详情页都是表单设计驱动的？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">数据的详情页<span style="color: black;">便是</span>表单吗？什么样的详情页<span style="color: black;">能够</span>满足对业务数据的全览？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表单设计与页面设计，在用户体验、<span style="color: black;">研发</span>者体验以及ISV服务协同上，都存在着<span style="color: black;">很强</span>差异。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">表单设计更像Form表单页，<span style="color: black;">经过</span>字段集提交业务数据，驱动的业务像是把Excel表的数据，<span style="color: black;">根据</span>对象模型与业务节点，业务实现上聚焦业务数据的结构化和流程化。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面设计更像应用详情页，<span style="color: black;">经过</span>多种页面布局组件渲染业务数据，驱动的业务更像是围绕业务数据的上下文呈现，对象模型<span style="color: black;">根据</span>布局组件分发，业务实现上更聚焦业务数据的用户体验。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>页面布局编辑器的可视化体验</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面布局编辑器，用于管理数据对象记录页面的布局。它<span style="color: black;">掌控</span>按钮、字段、自定义链接和用户看到的<span style="color: black;">关联</span>记录列表的布局和结构。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面布局编辑器从可视化体验上<span style="color: black;">包括</span>：</p>配置页面模板，<span style="color: black;">包括</span>页面终端以及布局框架，例如有<span style="color: black;">基本</span>、分栏、横向、纵向等。配置标准组件，<span style="color: black;">包括</span>紧凑布局、字段、选项卡、自定义按钮和链接、数据动态等。配置<span style="color: black;">加强</span>组件，<span style="color: black;">包括</span>文档系统服务、数据分析服务、AI服务、RPA服务等。配置自定义组件，自定义<span style="color: black;">研发</span>的布局组件<span style="color: black;">或</span>从应用市场下载的三方布局组件。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">日前</span>市场上的低代码<span style="color: black;">研发</span>平台，都实现了标准组件的可视化配置，感兴趣的<span style="color: black;">朋友</span><span style="color: black;">能够</span><span style="color: black;">自动</span>配置体验下。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>页面布局编辑器中的标准组件</h1>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 页面紧凑布局</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">表示</span>业务对象中重要的信息字段，会在页面顶部高亮<span style="color: black;">表示</span>，例如<span style="color: black;">表示</span>账户名<span style="color: black;">叫作</span>、<span style="color: black;">tel</span>、行业、评级等。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 页面信息字段</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面布局中的数据源，大部分布局组件都<span style="color: black;">必须</span>和对象中的信息字段<span style="color: black;">相关</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>字段组件，<span style="color: black;">能够</span><span style="color: black;">相关</span>业务数据对象中的所有字段，<span style="color: black;">平常</span>的字段类型有<span style="color: black;">基本</span>字段和场景字段。</p><span style="color: black;">基本</span>字段类型有文本、<span style="color: black;">照片</span>、编号、数值、日期、计算、选项、金额等。场景字段类型有扫码、签名、拍照、3D、位置等，采集后需要有callback处理。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面布局时，<span style="color: black;">亦</span><span style="color: black;">能够</span>配置数据字段的<span style="color: black;">表示</span>、数据字段的读写权限、级联字段的数据<span style="color: black;">相关</span>等。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 页面选项卡</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">平常</span>的页面选项卡<span style="color: black;">相关</span>联数据选项卡和详情数据选项卡。</p><span style="color: black;">相关</span>选项卡，<span style="color: black;">关联</span>数据对象的列表数据<span style="color: black;">查找</span>，定义列表的<span style="color: black;">表示</span>字段和排序以及筛选规则。详情选项卡，当前数据对象的<span style="color: black;">仔细</span>数据<span style="color: black;">查找</span>，定义详情的<span style="color: black;">表示</span>字段和布局排版。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>选项卡组件，实现业务数据的上下文<span style="color: black;">查找</span>，例如<span style="color: black;">平常</span>的主从表类型。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4、页面流程卡</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>流程卡<span style="color: black;">认识</span>业务数据的进度状态，例如CRM中的线索->机会->交易等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">配置时<span style="color: black;">必须</span><span style="color: black;">相关</span>业务对象中的状态字段，<span style="color: black;">同期</span>定义状态数据的时序，当<span style="color: black;">出现</span>状态变更时，流程图同步更新。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5、页面自定义按钮</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面布局设计中的创意担当，<span style="color: black;">能够</span>实现N多业务场景。</p>系统业务按钮，例如新增、编辑、打印、复制、分享、导出等。修改当前数据，例如<span style="color: black;">同期</span>修改2个或2个以上信息字段、变更数据状态等。写入<span style="color: black;">外边</span>数据，例如快捷写入其他业务对象的数据等。<span style="color: black;">转</span>网络链接，例如<span style="color: black;">转</span>工具型网站、<span style="color: black;">转</span><span style="color: black;">外边</span>应用网站等。触发事件<span style="color: black;">行径</span>，例如RPA流、发邮件、变更数据、写入数据、IM信息等。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">恰当</span>的运用自定义按钮，是详情页的设计哲学，避免过度设计。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">4、</span>关于低代码平台的业务能力建设</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">低代码<span style="color: black;">研发</span>平台<span style="color: black;">怎样</span><span style="color: black;">作为</span>云生产力工具。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有效的业务生产力平台，<span style="color: black;">必须</span>有可套的业务建设能力，低代码平台<span style="color: black;">必须</span>的三种能力：</p>整合数据源的能力，异构数据源整合，为业务打造统一的客户档案。移动办公的能力，跨终端应用，引导业务与客户的互动是数字优先的。任务型应用的能力，任务型应用，<span style="color: black;">帮助</span>业务做好客户的关键交付节奏。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">更加多</span>关于低代码<span style="color: black;">研发</span>平台的业务讨论，<span style="color: black;">能够</span>参见上期 ”<span style="color: black;">商场</span>应用<span style="color: black;">研发</span>平台“</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文由 @这届南京码农 原创发布于人人都是<span style="color: black;">制品</span>经理。未经许可，禁止转载</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">题图来自Unsplash，基于 CC0 协议</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">该文观点仅<span style="color: black;">表率</span>作者<span style="color: black;">自己</span>，人人都是<span style="color: black;">制品</span>经理平台仅<span style="color: black;">供给</span>信息存储空间服务。</p>
我深受你的启发，你的话语是我前进的动力。 谷歌外贸网站优化技术。
页:
[1]