抛开设备差异，即不分电脑、平板、手机和车载中控屏等；也抛开终端类型差异，即不分客户端和网页端；更抛开技术差异，即不分 MFC、QT、Swift 和 HTML 等；以及还抛开系统差异，即不分 Windows、Linux、MacOS\iOS、Android 和 HarmonyOS 等，一个 UI 开发者如何在一次次地 UI 设计中，练就庖丁那种目无全牛的清晰思路呢？根据本人对用户界面设计和开发的实践经历，可以总结出如下操作思路。
DevEco Studio作为 UI 开发者，应该时刻并清楚地意识到，自己编写的代码将会以视图效果的形式，呈现在用户眼前，所以一定要有秩序美和结构美在里面，要有一种在空中俯瞰紫禁城看到它的左右对称、前后协调的画面享受，也就是页面上的一切可视元素都必须有组织有纪律，而不能像无经打理的野外山林般乱糟糟，故此，就产生了 UI 设计思路的第一种模式，即结构化设计，或者称之为组织化思路。
如何让页面元素的分布，形成结构化、组织化的效果呢？答案就在一个不起眼的编程习惯上，即 UI 开发者拿到一个对应着用户视图界面的代码脚本后，首先所要做的并不是急匆匆地开始一行行代码的编写，而应该凝视着脑海中最终想要达到的视图效果，对整个视图界面进行块域划分，就像现实生活中的造房子，不是地基一造好就开始码砖头，而是在地基平面上先用卷尺丈量大小、划分房间格局。也如同现实房子中的房间有大有小，视图界面上的块域也是有宽有窄，一切根据最终想要实现的效果进行确定，例如下面设计一个简单的邮件发送界面：
UI 界面块域划分的 demo
用显化的边框线划分出一个个具体的块域，并根据块域所要承载的功能确定它们的尺寸，也就形成了标题输入框小、内容输入框大的最终效果。所以，UI 开发思路的第二个模式就是块域划分。
其实，在对视图界面进行块域划分的时候，我们还以隐性的方式完成了布局容器的选择和对齐方式的确定，相比那种盲目编写代码的方式，这种先块域划分的方式更快完成对整个界面组织，即有对需要用到的布局容器类型和元素对齐方式，形成事先的胸有图谱，而后开始写代码的过程中只需按图索骥。
在开始编写代码之后，要有主次精神，对于 UI 开发来说，实现那些用户能够直接看见的东西，是主要的；而实现用户看不到的东西，则是次要的。所以，在块域划分完成后，就需要根据最终效果，在一个个具体块域内布置上相应的界面元素，以及设置好每个具体元素的大小、形状和颜色，至于功能响应则放到整个界面的视图效果搭建完成之后。按照应用结构分为前后端的说法，UI 开发者的第三种思路模式，就是先前端再后端。
带功能响应的 UI demo
当视图界面上的一切元素都布置妥当，那么就需要开始对需要具有响应用户操作的功能的元素，进行功能逻辑代码的编写，如响应单击操作的 onClick，以及响应输入操作的 onChange 等等。在进行功能逻辑代码的编写时，应该怀着前后意识去编写，也就是先用简单的功能代码代替实际要达成的功能，以检测所选择的事件处理函数能否完成预期效果，从而有效避免一种做无用功的局面，即费尽心思编写好所有的功能逻辑代码，到界面上单击按钮却发现要么没有出现响应要么响应形式出乎意料。
检测所选择事件处理函数能否完成响应，本人习惯上会使用一些具有提示效果的代码，如创建弹窗，也如在界面上开辟一个具有显隐控制的块域来显示提示信息，亦或者在控制台中打印日志。从方便和直观的角度来说，使用界面元素提示肯定是最佳选择，而这些帮助你完成响应逻辑代码的提示性元素，最终都可以转化为指导用户操作的提示信息。总的来说，UI 开发的又一种思路模式就是先简单后复杂。实际上，这种先简单后复杂的思路，不仅在编写响应代码的时候适用，在编写界面视图元素的时候也同样适用，例如下面模拟通讯录界面的时候，
举例先简单后复杂的 UI 示例并没有必要一上来使用循环创建一个列表项，除非真的很有把握、胸有成竹，否则就应该老老实实的先将单一列表项的效果在 Row 容器中实现出来，而后再去列表循环。
无论是可视的界面元素组件，还是不可视的事件处理函数，很多 UI 框架里面都分成了，支持在预览窗口体验和不支持在预览窗口体验，共两大类。那么为了提高开发效率，UI 设计过程中应当率先完成那些能够支持预览的，因为不能够支持预览的需要依赖其他资源，如测试设备或后台服务，这些都不是想用就能用的；特别是后台服务，其进度往往并不能够做到与前端并驾齐驱，因而与其在等待后台接口可用过程中白白浪费时间，还不如先完成那些不依赖其他资源的部分，除非已经到了只剩下这些依赖第三方的功能没有写的地步。因此，UI 开发的第五种思路，就是先完成不依赖第三方的代码再去完成依赖第三方的代码。
时刻谨记本文提到的 UI 设计开发思路，那么就能够在应用开发中形成进度可控和任务明确的流程。当然了，肯定还有许多本文没有总结到的思想和经验，那么阅读完此文的你，可以将其和本文中的思路和精神融会贯通，从而完成编程素养的又一次添砖加瓦。
网友评论