GUI 框架基础需求、设计和实现 - 2 UI / UX 设计

以下皆为建议性内容，根据需求制定方案。

这里列出 GUI 开发中的通用性的需求、问题的解法和方案等，为了能够搭建出复杂 GUI 显示和交互逻辑，满足交互设计需求。

文章所在 Github 仓库 Staok/GUI-Framework-Study: GUI 框架基础需求、设计和实现文章会保持最新，其它地方的不会跟进。Github 上的 MarkDown 显示更完善，建议去原仓库看或者下载下来看。

涉及到本文没有的小节，请参考同专栏其它文章。

UI / UX 设计

交互设计规范和扩展

具体前端样式设计原则

首先确定所有基础 UI 元素组件，组件的各个状态等。

考虑各个页面尽量复用这些组件进行搭建。显示的 UI 界面设计的尽量使用这些有限的组件搭建起来，方便构建，统一样式。
符合常见操作习惯：比如：
- 要从云端拿数据、或者需要周期性从云端同步且合并到本地，可以考虑加个刷新按键。
- 多项消息列表，单个左滑出现删除按键（点击后允许x轴拖动，露出删除按键，松开恢复）。
- 切换各个主要界面可用丰富动画。
- 填写表单的界面，输入框、选择框的东西，1 本地存（视情况而定），2 打开页面是否自动填充上一次设置或从后端获得新的数据并填充，3 考虑加提示，可以用文本说明，也可以加个 "？" 图标，点进去弹小窗提示操作步骤。
- 一些按键点击后出现的按键列表、菜单，此时背景变暗，凸显这个按键菜单，然后需要点击空白的地方就关闭，即符合操作直觉。
- 对于小屏幕等，有长内容、滚动条的地方，就加上下翻页。
- 重要的提示地方使用渐隐渐显的动画文字或者红色圆点（如聊天软件的消息标识）等方法进行强提示。
良好的文本显示。
- 其中的文本尽量适应一定的长度。
- 可以设置为，随着空间宽度改变字体大小。
- 每一行均匀分布，按单词换行不美观。
- 尽量不要滚动和带省略号显示等，能换行显示尽量换行显示。
- 考虑多语言情况。
考虑支持多种屏幕分辨率。

参考 多分辨率 一节。
- 组件的长宽可以在较大范围内自动伸缩，内部的 obj 使用 flex 等尽量可以自适应
- 各个屏幕和组件的固定尺寸 px 的参数（分别长度和宽度），设置为默认参数乘上一个系数（长度或宽度系数），这个（两个）系数全局唯一可以调整，整个 ui 就跟着按照比例动了。
考虑多主题设计。

参考 多套主题 一节。
如果 GUI 上用户点击后机器内需要处理的事件过长了（比如超过 1s），则两种处理方式：
- 设计弹出转圈的请求等待的弹窗，直到处理好或失败则消失，然后显示结果信息弹窗。
- 界面上的任何设置，在前端都先及时响应，比如选择框的状态是读后端的对应的一个值，用户在界面设置后后端的对应值先变，界面先响应，然后发送设置消息给后端，后端回复消息后，若回复的值与当前设置的一致，就不用管了，若不一致就再修改，但是因为一般都是设置成功的，因此设置发生跳转（设置不成功）的概率比较小。
并且都考虑处理超时的情况，如果超时则显示执行超时提示弹窗。
全盘确认页面是否齐全，功能是否齐全，case 是否均照顾到，弹窗和提示是否良好，自检查机制是否过关，是否小白易上手。

多考虑一些操作 case，加更多一些提示弹窗，以及考虑各种情况下的操作限制 UI 上要给予限制。

操作提示可以 gif、webp 等动图进行提示。
专业参考：
- 来自微信小程序设计指南。
- 参考书籍比如《UI设计入门一本就够》等。
- 可参考手机的日常操作。
.etc

交互设计稿确认项

确认项

交互设计人员给予开发人员的设计稿确认项：下面均以建议为主，做不到强制。

首先确定所有基础 UI 元素组件，组件的各个状态等。

考虑各个页面尽量复用这些组件进行搭建。

考虑多分辨率，考虑多主题等情况。
明晰一个页面的所有可操作的情况，以及所有变化的 UI呈现给出（包括各种情况下按键等的可操作性等）。
明晰页面跳转逻辑，标明流程走向。
整个 GUI 页面逻辑形成一张明确、清晰的结构和操作流程框图，作为确认稿版本进行维护。

待确定、开发中的界面放到临时区，确定后合入前述确认稿版本大框图中。

如设计稿（如 figma）中，箭头指明每个按键点击后的界面变化（新界面、弹窗或界面内容改变）。文案用英文并且旁边标注对应中文。每个界面旁边标注对应的 UI 程序文件（可选）。

形成清晰的操作流程图
- 先考虑好一个状态机，整体状态机和各部分子状态机
- 为尽可能考虑到大部分的各种操作情况，列出所有单一操作事件，将所有按前后顺序排列组合，列出所有操作 sequence，再逐一考虑，加固程序。
明晰分机型的情况，所有机型或者版本明确给出，只列之间的差异也可。
文案规范，考虑多语言情况，参考后面 上传多语言管理平台的文案的规范和注意事项 一节。
全盘确认页面是否齐全，功能是否齐全，case 是否均照顾到，弹窗和提示是否良好，自检查机制是否过关，是否小白易上手。

在交互上有新内容要做，或者新的想法和点子，可以及时和开发先沟通下，开发可以预研下怎么做、排期等等。

UI 设计 & 搭建即时可见

使用专业交互设计工具如 figma 或描述语言如 js、XML 等构建（并最好直接应用到程序中）。也可可视化拖拽工具搭建 UI 然后导出 ui 框架的代码。这个也可以由交互设计人员搞了。若二者可联合，即如在 figma 做好后，就可快速显示部署，便可快速迭代了。优秀的平台搭建的意义。

GUI 前端图形的搭建，主要矛盾是方便快速修改、修改时实时预览。即需求快速构建 UI 和构造组件。可实时预览，所见即所得。

（延申项）可多人合作、可 git 管理；最好可以在 UI 描述层面把 UI 的事件都描述了，只留下一些改变 UI 的接口（槽函数，update UI）、变量（信号，UI to "View Model" / "Model"）等。