跳到主要内容

思维碎片

提示
  • 盘古 OS 的设计仍在逐步改进与完善中，本文将随时发生变化，感兴趣的朋友们可以时刻保持关注；
  • 在下方的版权声明中有本文作者的联系方式，有不同意见和相关建议的朋友可以与其保持联系；
  • 也可在本文底部的评论区登录 Github 后，直接发表您的观点；
版权声明

函数化 GUI​

  • 设计器自举：可通过设计器设计出设计器
  • 目的：让开发专注于数据结构及其更新逻辑，让设计专注于页面设计以及用户交互，且设计与开发的工作可协调实施，二者的劳动成果共享，而不是重复画页面；方便维护模型与函数，视图与模型，视图与逻辑之间的联动关系，无需确定函数名称，参数类型等，减少记忆负担，降低出错率，提高开发速度，方便程序维护；
  • 通过手绘方式识别出并实时转换为 ui 元素：设计组件时，先在一个画板中绘制，绘制完成后拖动到设计器的设计区域，再对绘制的元素做细化调整；页面布局则直接手绘并即时转换；
  • 分层：每个浮于其他组件之上的组件，都放在新的层上，且层与层为树形结构，在哪一层的组件之上浮动，就作为哪一层的子层
  • 网格布局：将页面横向分为 36,72,128 等尺寸的格子，组件尺寸、组件间隔等均为网格尺寸的整数倍，最终布局根据实际的网格尺寸做流式布局。每层均可设置为不同的细分网格，默认为父层配置
  • 从结构化数据生成 UI，函数化动作和处理逻辑
  • 数据包括业务状态和视图状态，业务状态影响视图状态，视图事件触发对业务状态和视图状态的更新
  • 视图是函数创建的，视图事件也是触发的函数
  • 状态是向下传递的，消息是向上传递的
  • 视图状态除数据外，也包括视图函数，可以在视图函数内包含组件的内部状态，在内部状态更新时，闭包的视图函数也需要更新（更新的是函数引用，函数返回的是更新后的内部状态），从而使得状态树发生更新，进而实现对视图的更新。或者，组件内部状态，由组件自动挂载至全局状态树，并由其维护和更新
  • 能够确切地知道页面中所有元素就绪的时间，并可触发监听：组件都发送就绪事件。引擎是能够知道以组件为单位的渲染起止时间的
  • 组件边缘可配置变化的样式和触发的事件，实现拖动、滚动、缩放等操作
  • 桌面自身就是视窗容器。基础组件即为容器，无形状，无边界，只有从属，可以通过样式，从视觉上感知其边界范围。统一管理和查看隐藏和透明窗口，以消除安全隐患。
  • 一个好的设计，绝不应该在极端场景下，还要求用户保持头脑清晰，否则就会撞车；而是要尽可能地避免或者减少用户犯错的任何可能！当你习惯了只用一个踏板车辆就会停下来的时候，紧要关头你可能还是只想着那一个踏板。
  • 框定产生布局
  • 无干扰设计，设计元素和配置面板通过快捷键或者鼠标点击呼出
  • 按照新操作系统的机制进行设计，函数化所有内容，页面生成逻辑都在后端
  • 协作开发：设计做页面和交互，开发做接口和数据绑定
  • 以函数或 DSL 做页面描述，具体展示实现可随意替换
  • 沙盒机制；独立的页面运行环境；可控制页面可访问的资源操作函数；
  • 对高级用户可一对一开放设计器自举功能，个性化设计器本身但互不干扰，可自行定制 UI，集成外部接口等
  • 设计器代码需被混淆和加密，确保不会被逆向工程
  • 未付费页面加水印和版权声明，代码被混淆和加密；付费用户可查看所设计页面的源码并去掉版权声明；不需要免费套餐；
  • 在用户授权的情况下，为设计者申请独立著作权或代理著作权，避免被他人抄袭，保护设计者权益
  • 用户可以修改或设计自己喜欢的设计器界面并使用，实现千人千面
  • 模型属性变化引起视图的变化，视图状态与模型属性绑定（存在无绑定的情况）
  • 先根据数据的最终状态确定和切换组件的状态，再确定以哪些方式更新数据的状态，也就是，组件状态由数据的状态决定，而无需关注数据状态在何时以何种方式发生变化
  • 组成系统：布局，样式，动画，事件（交互）
  • 组件可设计，设计器可设计，页面可设计，动画可设计，逻辑可设计，
  • 不是视觉上在一起的才是一个组件，一个组件的不同部分可以在布局上分离，只要相互之间的状态是联动的，便可以构成一个组件
  • 加强触感和声音反馈，视觉反馈有时感知太弱
  • 未提交表单自动暂存，因误操作导致退出再重新进入后依然可以继续编辑，也可提供草稿箱，供随时重新编辑
  • 支持可逆计算
  • 数据驱动
  • 配色动态计算
  • 函数创建的视图可任意嵌入其他函数的视图中(布局与配色自动融合)，也可以以独立窗口形式展示
  • 应用视图包含布局树，样式树，动画树，模型树。各节点均可有唯一坐标。模型与视图的局部或整体进行联动，从聚合根出发渲染视图，可以有多个聚合根，且相互间可存在引用
  • 组件根据其结构生成唯一标识，以支持全局复用，并按需下载组件
  • 不能直接修改视图树，只能通过函数返回带定位坐标和差量的计算结果，由引擎运算差量后再执行变更
  • 对各类树的修改均采用差量机制，通过逻辑函数返回差量
  • 当前大部分的组件库只是样式不同，但交互逻辑是基本相同的，因此，样式可以以差量形式独立出来
    • 需要降低布局结构的层级，尽量展平，以降低布局结构间的差异
  • css 样式的定义本质上也是在做差量运算，其选择器就是在定位节点，不过，其可以定位一组节点
  • 内置组件和自定义组件均有自己的状态，状态放在组件的属性上，属性均为有类型和结构的，不仅仅是字符串
  • 组件有状态，可触发事件。触发事件就是调用事件绑定的监听
  • 组件通过函数定义，接受状态和事件监听，返回视图结构
  • 组件内部使用事件，应用层面使用消息：参考 Elm 框架设计
  • 图片等对象数据以 hash 为唯一索引，用于缓存和去重
  • 函数生成页面布局和样式的 AST 树，再由渲染器渲染

参考资料​

编辑此页
最后由 flytreeleft 于 更新