求索阁

GUI应用就是一堆控件，在布局的约束下，显示在页面中。无论是QWidget、Qml，还是Vue、React，都是一样的逻辑。

“控件 + 布局 + 样式 = 应用”

学开发应用的，终究逃脱不了这个公式。

永远都是先学习基础的控件，然后套个简单的布局和样式。把底层的数据挂在控件，通过控件响应交互，一个马马虎虎的应用就做好了。

 

开发应用就像是流水线上工人，从一开始的不熟悉到逐渐上手，然后重复工作直到机械式的麻木。

创建控件，添加布局，调整样式。

控件用来用去就是那几套东西：button、input、list、table。

布局也无非就是单行和多行区别：grid、row、column。

样式也就宽高颜色各种乱七八糟的属性：width、height、color、text。

重复，重复，大量没头脑的重复，这个就是我对开发界面最大的感触。

---

开发界面真的很枯燥

我在问自己什么是控件

关于这个问题我就在想

这些控件都是源于什么地方诞生的呢

然后我注意到他们有一个共性

任何控件都是基于一个初始控件诞生的

正如Qt控件库基于QWidget

那是不是html控件也是基于div

Qt里面有QPushButton，html也有button

Qt里面有QLineEdit，html也有input

Qt里面有QListWidget，html也有list

并且这些控件用法上也高度相似

是巧合吗

如果我来创建这些控件，为什么要创建这些控件？

button是用来做什么的？

大部分场景它都是用来捕获鼠标的一次点击，然后触发一个事件

input是用来做什么的？

大部分场景它都是用来记录键盘的输入字母，然后获取一段数据

list是用来做什么的？

大部分场景它都是列表字段的可视化，给用户显示应用内部的数据

等等等

想要捕获用户的鼠标点击事件，还有switch、checkbox

想要获取鼠标拖拽轨迹，还有对应滑块控件slider

但slider可以用鼠标滚轮来互动，还有键盘上的方向键

甚至我绑定一个xbox手柄，也能通过手柄来控制这些控件

那么这些五花八门的控件给一个定义的话

他们像是一个个虚拟互动触发器

如同小霸王游戏手柄上的按钮，打通的虚拟世界的大门

指导水管工打败库巴大魔王，并去拯救公主

为什么游戏会很吸引人？

正得意于它优秀的正反馈逻辑

那应用的反馈可不就哪些可视化的数据

鼠标的点击过后

list列表及时刷新一行行数据

不就是一个简单的反馈逻辑

用户的交互生产一些奇妙的化学反应

数据随着颗粒化一阵波动散开

透过list列表、table表单、和text文本框这些窗口

直接转成一个个可视化的像素点跳动

数据变得活跃起来

那我是不是可以对控件做出一个定义？

“用户交互 + 数据可视化 = 控件”

---

思考完控件，我又对布局有了兴趣

如果说只有控件，没有布局的界面应该是什么场景

那大概是90年代的门户网站的吧

没有什么花里胡哨的布局，html原汁原味的复古风

似乎没有布局，其实对应用的使用也没多大影响

那为什么布局是每个应用开发的必需技能呢？

自适应布局，瀑布流，盒子布局等等

这个时候我想到之前发生一件事情

当时工作修改界面的时候，跟UI讨论布局问题

我是有点轻微对齐的强迫症

把一级菜单放到最左侧，二级菜单放到最右侧

这个时候UI跟我说不能这么放

我说：“左右对齐好看呀”

她回复：“你这样设计，左点一下右点一下，用户操作多麻烦”

我突然就注意这几个字

“用户操作多麻烦”

仔细想想，布局是只为了美观产生而诞生的吗？

是不是还藏着一个经常被我们开发忽略的重要因素

操作逻辑！！！

当初看到一篇知乎文章分析抖音为什么能干掉快手的原因

其中有一个原因说到

抖音是上下滑动操作，而快手当初是左右滑动

就这样一个简单操作逻辑不同

上划切换，降低成本，更容易上瘾，激发用户持续翻动

以至于后面抖音打败快手的事情就总所周知了

但是不得不说

抖音这款应用真的是布局设计的顶级王者

没有新手指导，却处处是引诱指导

几乎零成本的学习，让任何人安装好抖音就可以上手（膜拜大佬设计）

布局不仅仅是为了美观，更重要的是为了操作逻辑

好的布局可以降低入门成本，也可以提高效率

那我是不是可以对布局做出一个定义？

“美观 + 操作逻辑 = 布局”

---

最后还剩下一个样式

我印象特别深的一个控件样式就是switch按钮

左边是太阳，点击一下，过渡成右边的月亮

这种日月动态效果真的看麻了

第一次打开我对样式的上限的想象力

原来应用也可以这么玩

后来接触到一些设计网站，比如dribbble、behance之类

统一的风格，搭配好看的色彩

原来页面能如此吸引人

静止的画面总是有办法能还原，无非就是花时间磨

我带过一些新人，总是把很多精力放在还原UI图

第一眼看上去是很好看

但是使用体验就很糟糕

要知道数据会随着交互变化而变化

布局会尺寸变化而变化

样式也需要动态变化呀

页面是动态的！动态的！动态的！

应用开发做得是一个可交互的界面，而不是临摹一副UI图在上面

好看的应用里面一定是包含大量的设计

与其说还原UI图，很好使用UI图的方法是参考

在他的基础上，做出自己的想法和设计

如果我要对样式做一个定义，那一定是

“色彩 + 风格 + 设计 = 样式”

---

建议不要太纠结QWidget还是Qml，都去尝试用用

本质而言就是控件、布局加样式

做应用是一脉相通的事情，认识里面的本质

优秀的用户交互体验

合理的数据可视化

易上手的操作逻辑

参考UI图的布局样式

最后带一点自己个人的色彩、风格设计的私货

以上一些自己见解