Building UI Without Burden

建构正确的网页 UI 不应该是个麻烦的问题

建构网页 UI 会遇上那些问题?

身为前端工程近期工作的感悟是很多时候开发问题还是陷于界面的外观、行为或互动层面上,例如:「拖放页面元素功能」、「日历」、「下拉式选单」、「资料清单」……并不是说花时间制作这些层面的事情就很逊,它们实际需要依靠经验丰富的开发者通过多方面的研究与考量才能打造合理的架构,例如有许多要留意的事:

  • 性能 Performance
  • 适用性 Accessibility
  • 可维护性 Maintainability
  • 可测试性 Testability
  • 搜索引擎优化 Search Engine Optimization
  • 跨平台兼容性 Cross-platform Compatibility
  • 多语言 Internationalization

不禁让我感叹客制化 UI 的开发与维护成本对小团队来说实在是太高了。一方面希望「快速推出产品」而另一方面又希望有「高质量的实践成果」,结果就是做正确的事一直都很困难,相较于成熟制度完善的专案,刚起步的专案 UI 工作更为繁重且面临更多挑战,举几个例子:

  • 被忽略的适用性与网页标准:开发时适用性大多是种可选功能,但对某些人来说理论上是必要的
  • 缺乏文件与自动化:没有经验或时间规划 UI 的自动化测试,只能完全依靠手动测试并祈祷不会有功能爆掉
  • 无法适应网页变化:由于用户几乎不用小装置查看网页,所以完全舍弃小尺寸,初期来说负担轻松,但长远来说却可能要付出更多代价(写死样式尺寸的网页已非常态)

所以可以怎么面对这些问题?

开发与设计者会需要适应一直都在变化的网页制作方式。像是现在制作元件化 UI 时应该大多数的开发者多少有类似于乐高积木的概念,更具体的规范一点像是: Atomic Design🔗 也蛮受欢迎的,有望将成为业界典范。

并且有些必要的捷径可以帮助我们少受些苦并更快的迭代产品:

  • 保持网页 UI 的单纯朴素:好快速反应,在功能得到市场证实后再去加深品牌风格,我相信无聊的 UI 会是好的 UX🔗 并且成本应该花在刀口上:「解决用户的痛点」。
  • 尊重浏览器标准:虽然有些标准还是很迷惑不一致甚至功能不齐全,但长远来说浏览器标准是网页开发真正不变的准则。
  • 善用现成工具:套件、样式库、无头 Headless UI,像是:React Aria🔗Radix UI🔗headless UI🔗都是非常稳固的基石。
  • 自动化文件工具:有空打算多了解相关工具,像是 Storybook🔗