V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
这是一个专门讨论 idea 的地方。

每个人的时间,资源是有限的,有的时候你或许能够想到很多 idea,但是由于现实的限制,却并不是所有的 idea 都能够成为现实。

那这个时候,不妨可以把那些 idea 分享出来,启发别人。
gowl
V2EX  ›  奇思妙想

UI 的本质可能就是一个大盒子装着很多小盒子,然后每个小盒子又装着更小的盒子……

  •  
  •   gowl · 2023-02-22 09:01:19 +08:00 · 3007 次点击
    这是一个创建于 422 天前的主题,其中的信息可能已经有所发展或是发生改变。

    UI 的本质可能就是一个大盒子装着很多小盒子,然后每个小盒子又装着更小的盒子,一直这样多级嵌套下去,直到所有的视觉元素都被表达出来。在交互上,一个盒子上发生的事件可能会触发其他的多个盒子上的事件。盒子们可以被创建、可以被删除,可以改变形状和位置……

    18 条回复    2023-02-22 17:32:44 +08:00
    acmore
        1
    acmore  
       2023-02-22 09:03:50 +08:00
    上古时代的一种设计思路更极端:UI 是一个 table 套一个 table
    wanguorui123
        2
    wanguorui123  
       2023-02-22 09:07:55 +08:00
    就是组件套组件
    kop1989smurf
        3
    kop1989smurf  
       2023-02-22 09:14:45 +08:00   ❤️ 1
    这是布局思路之一。也就是线性 /盒子布局。
    相对应的,还有相对布局( x 的上边缘对其 y 的下边缘,z 的左边缘对其 y 的右边缘)
    还有绝对布局(屏幕坐标点 x,y 处有一个高宽分别为 a ,b 的矩形,层级为 z )
    Mithril
        4
    Mithril  
       2023-02-22 09:15:15 +08:00   ❤️ 2
    盒子模型,因为屏幕是方的。

    要是从一开始显示设备就是用极坐标设计的话,没准屏幕就做成圆的了,那就成蛋模型了。

    但不管怎么算,都可以统一认为是套娃模型。
    debuggerx
        5
    debuggerx  
       2023-02-22 09:39:59 +08:00   ❤️ 3
    没错,所以 UI 的本质就是嵌套,用嵌套语法写 UI 其实才是最直观最接近根源的。
    吐槽 flutter 嵌套的都是不懂 UI 本质的,用了 flutter 却总想着“优化”嵌套的也都是“大聪明”行为。
    retrocode
        6
    retrocode  
       2023-02-22 09:56:55 +08:00
    借一个老梗
    郭德纲: UI 的本质应该像穿衣服, 你得一层一层把衣服穿起来, 才能好看
    于谦: UI 的本质应该像脱衣服, 你得一层一层把衣服脱了, 把最重要的露出来
    cmdOptionKana
        7
    cmdOptionKana  
       2023-02-22 10:00:47 +08:00
    这不是 UI 的本质,只是解决 UI 问题的一种常用、易用的思路 /模型。
    HeyWeGo
        8
    HeyWeGo  
       2023-02-22 10:59:46 +08:00
    描述看看上去更像是 现有的 UI 实现方式的总结。
    sunwayTaihulight
        9
    sunwayTaihulight  
       2023-02-22 11:37:14 +08:00   ❤️ 1
    嵌套 → 树

    树形结构是描述页面 UI 的一种方式,而不是本质。
    mango111
        10
    mango111  
       2023-02-22 13:00:32 +08:00
    这叫节点树
    Xusually
        11
    Xusually  
       2023-02-22 13:07:58 +08:00
    不然 CSS 的盒子模型是怎么来的?
    movax21h
        12
    movax21h  
       2023-02-22 14:35:50 +08:00
    比尔盖兹叫他,window ,视窗。
    zagfai
        13
    zagfai  
       2023-02-22 14:40:13 +08:00
    @acmore 是的,20 年前的 html 哈哈哈哈
    mingl0280
        14
    mingl0280  
       2023-02-22 15:09:00 +08:00 via Android
    这不就是 HTML XML CSS XAML 甚至 MDI……等等所有 UI 设计工具的原理么?
    tool2d
        15
    tool2d  
       2023-02-22 15:18:49 +08:00
    你说的是 UX 设计,不能全算 UI 。

    程序 UI 开发到后面就是面对组件开发,光一个列表组件,就有几十个消息需要处理。

    nodepad3 作者就是写了一个 richedit 组件,就能耀武扬威,因为复杂度上去后,普通人写不出来。
    cheng6563
        16
    cheng6563  
       2023-02-22 16:06:10 +08:00
    套到最里面的盒子就是 canvas
    deesan
        17
    deesan  
       2023-02-22 16:16:24 +08:00
    都是树,ps 、sketch 、figma 的图层也是树
    lower
        18
    lower  
       2023-02-22 17:32:44 +08:00
    @kop1989smurf 赞同,之前看过一本游戏开发的书,里面还讲到三维空间坐标 跟屏幕坐标 转换的相关知识点,还有什么三维模型投影到二维屏幕上,栅格化之类的各种算法,太复杂了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3781 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 10:19 · PVG 18:19 · LAX 03:19 · JFK 06:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.