跳到正文
编程术语图鉴

共 30 条词条

简体

刚转行做前端

写给: 刚转行、第一次接手真实项目的人

从「这个图标是干嘛的」一路看到「这个页面是怎么搭起来的」

9 步 · 约 18 分钟

走完之后: 你能看懂设计稿、能跟开发对上话、知道第一次改动该动哪一行

这条线写给刚转行、第一次接手真实项目的人。你可能看得懂教程,但一打开公司的项目就懵:满屏的框和字,不知道哪个是哪个,也不知道该从哪儿下手改。

顺序是从界面看得见的东西往底层的概念走。先认清按钮、提示、卡片这些每天都会碰到的小零件,再去看响应式和断点,弄明白同一套页面为什么能在手机和电脑上换一套排法,接着用弹性布局和网格布局把整页是怎么搭起来的串起来,收尾认识接口,知道页面上的数据是从哪儿来的。

走完这条线,你再看设计稿就不会只剩「好看」两个字,能指着某个区块说出它大概由什么组成。让你改一个按钮或者调一处间距,你知道该动哪一行、动完会影响哪儿,跟开发沟通也有了共同的词。

按这个顺序走

  1. 按钮 /button 入门 先搞懂界面上最小的可点单位,后面所有交互都是围着它转,这是入门的原点 页面上点一下就会触发某个操作的小方块
  2. 文字提示 /tooltip 入门 那些悬停才冒出来的小字,看懂它你就知道界面藏了多少没写出来的规则 鼠标放上去才冒出来的那行小字补充说明
  3. 卡片 /card 入门 把一条内容装进一个方框,学会它你就能一眼拆出页面上重复出现的结构 把一条内容装进一个独立的小方框里展示
  4. 模态框 /modal 进阶 盖住整页逼你先处理完的那个窗口,认清它你才不会被弹窗打断手头的节奏 盖住页面逼你先把这件事处理完的小窗口
  5. 响应式 /responsive 入门 同一套页面在手机上换了排法,看懂它你就明白前端不只为一块屏幕写代码 一套页面自动适配手机、平板和电脑,不跑版
  6. 断点 /breakpoint 进阶 屏幕宽到某个数就换排版,掌握它你就能预判页面什么时候会变脸 屏幕宽度到了某个数,页面就换一套排版
  7. 弹性布局 /flexbox 进阶 一排元素怎么自动排开对齐,学完它再看导航栏和按钮组就不再是黑盒 让一排元素自动伸缩、对齐方便的排版方式
  8. 网格布局 /grid-layout 进阶 把页面切成格子再往里放东西,这一步让你彻底看懂整页是怎么搭起来的 把页面切成格子,想放哪格放哪格的布局
  9. 接口 /api 进阶 最后认识程序和程序怎么要数据,知道它你就明白页面上的内容从哪儿来 两个程序之间约定好怎么互相要数据的接口

走完了,然后呢