独立产品设计前端实现性能与可访问性

李长彬

把复杂的信息整理成别人一眼就能读懂的界面。设计、实现、上线后的每一层都由同一个人负责到底,这个站点记录我在做的事和做事的方式。

01关于我

李长彬,独立产品设计与前端开发者,常年在石家庄与远程协作之间往返。手上处理的基本都是同一类活:一堆彼此矛盾的需求、几张格式各异的报表、几个说不清优先级的角色,最后交出一块能让人直接上手操作的界面。

我不把自己固定在某一环。需求梳理、信息架构、灰度稿的结构讨论、视觉稿的字距与层级、组件库的命名规则、上线后的首屏耗时与埋点口径,全部自己走一遍。好处是每个决定都有人对结果负责;坏处是工时很长,所以我只在有长期维护预期的事情上投入。

  • 信息架构
  • 语义化 HTML
  • 原生 CSS
  • 构建与自动化
  • 技术写作

02工作方向

四个方向,检查方式都很具体,不靠形容词。

  1. 界面设计:十二列栅格打底,标题与正文的字距、行高、层级对比逐项校准,配色克制,留白留给内容。
  2. 前端实现:JavaScript 按需加载,能不用框架的地方就不用,把首屏渲染压在一点五秒以内。
  3. 性能与可访问性:图片懒加载、对比度校验、键盘可达、屏幕阅读器标签,属于底线而非附加项。
  4. 技术写作:把踩过的坑写成可复现的笔记,附最小示例,让别人十分钟内跑通。

03工作方式摘要

  • 原型阶段灰度稿定结构
  • 定稿之后补色彩与动效
  • 交付内容附决策说明
  • 邮件回复一个工作日内

04近年项目

库存看板整合

一套面向中小仓储团队的看板。原来的流程里,核对一次周库存要打开七张报表、来回切换四个系统,平均耗时四十分钟。我把它们合并成一块可筛选视图,默认按异常优先排序,需要下钻时再展开明细。上线后同一件事压缩到五分钟以内,最直接的变化是问我来问数的人明显变少了。

本地生活静态站点集群

用同一套构建脚本产出多个主题的静态页面,配置与内容分离,换主题只改一个令牌文件。每张页面的传输体积控制在九十千字节以内,不引外部字体与外部脚本,首屏几乎与网络抖动无关。

浏览器端表格导出工具

支持十万行数据在浏览器内切片导出,全程不经过服务端。核心是按块读取并流式写入,避免一次性把整份数据推进内存。代码开源,用来说明分片与背压的处理办法。

05协作约定

先对齐目标,再动第一笔。原型阶段只谈结构,不谈像素;结构定了,色彩与动效才有意义。

交付时会附一份说明,写清楚每个决定的原因,方便后续接手的人继续往前走。不接受「看起来差不多就行」,也不接受为了视觉效果牺牲加载速度。

排期上,我会在开工前给出可验证的节点:结构稿、视觉稿、可运行版本各一次评审,节点之间不藏进度。

06联系

合作、约稿与技术交流都可以来信:lichangbin@lcblhx.site,通常在一个工作日内回复。

如需核对站点归属,可通过页面底部的备案号在工信部网站查询。