全干工程师怎么入门 UI 设计

[coollest]

现在的工作是给一个生物信息实验室做相关的数据库项目，目前前后端代码逻辑没什么问题，就是被吐槽页面 UI 及结构设计比较丑，有没有相关设计的入门路线或者学习路线，各种文档或者学习视频都行，提前感谢各位大佬！

[shawndev]

《 Refactoring UI 》

[xz410236056]

@shawndev 刚去搜了一下，这本书 99 刀？

[shawndev]

@xz410236056 你都能搜到 99 刀了，怎么不能搜到 pdf download 呢。

[PluginsWorld]

Refactoring UI ，我翻译了中文版～




不过我推荐先学设计的基础，例如 4px ，高度定义。组件库的使用等等。不然看完了这本书其实还是无法做好前端项目的还原或者无法让自己的前端工作达到自己的预期。

https://www.bilibili.com/video/BV1F34y1G78a/?plat_id=413&share_from=season&share_medium=iphone&share_plat=ios&share_session_id=29D4DD17-0059-4E6B-8ADE-B8054042B7C6&share_source=WEIXIN&share_tag=s_i&spmid=main.space-contribution.0.0&timestamp=1701159705&unique_k=hJ1vUUS&vd_source=87d10c9e1fa5942b0cb3349e72869089

我是看完了这本书后，翻译成中文又阅读过几遍，最后从 b 站视频学起来，才解决了前端开发的设计问题。

[PluginsWorld]

最近 2 天练习了 2 个设计稿，也算是学习了差不多一年的小有成果。B 端的没放出来自己练习成果。

可以在 https://x.com/MouBiYong 看到我目前的大致学习结果。

[BeforeTooLate]

@PluginsWorld 设计基础有啥推荐的教程吗？

[PluginsWorld]

B 站的，这个公开的可以看，能学到很多，然后他的公众号，有很多很多干货。

看完绝大多数，并有一定的练习，这个是基础，可以理解为设计的常识。

然后才能理解 Refactoring UI （不理解也没事，前面的基础足够做设计入门了）。

他们还弄了 https://uxbaike.com/ , 里面也有很多资料学习。算是对我比较有帮助的。

非推广，纯经验推荐。

[PluginsWorld]

他的 B 站空间： https://space.bilibili.com/393337657

[luchong]

@PluginsWorld #4 中文版地址发一下 谢谢~

[dearmymy]

抄阿 看个书能学个啥

[me1onsoda]

没必要啊，ui 这玩意跟领导说一下找人接单做就完了，ui 廉价

[evan9527]

信我，资深设计，学一下 Figma ，然后找适合的 ui 作品抄就行了！

[PluginsWorld]

官方不让公开，私下我倒可以提供一下。

[ETiV]

ui8.net 上面买一个你觉得好看的设计，照着实现就行了

[coollest]

@shawndev 感谢！

[coollest]

@PluginsWorld 太强了大佬！
@dearmymy 确实有道理，但是还是想多少了解一下
@evan9527 稳健，我去看看
@ETiV 666666 ，我去看看

[nikenidage1]

《写给大家看的设计书》
我认为非设计专业的看这本书够了，简单的说，教你什么是好看，做起来也不难

[coollest]

@me1onsoda 哎，肯定是不愿意花钱才找全干的。不过找个机会我去尝试一下

[coollest]

@nikenidage1 确实我的痛点也在这，没啥审美，只关注功能实没实现。感谢！

[showonder]

UI 门槛低，Dribbble 上找现成的设计文件 1:1 抄一抄技术上就没啥问题了，基本的页面组件在 ui8 下个 uikit 看看源文件就行了，两个周就能超过一般所谓的 UI 设计。

[dai269619118]

移动端的话可以看看 https://m3.material.io/
google 的设计标准

[xlcheer]

@nikenidage1 +1

[coollest]

@showonder 懂了，感谢老哥！
@dai269619118 感谢老哥！

[YiXinCoding]

一般代码洁癖的人，UI 不会太难看。较真到每 1px ，上下左右对齐，边距一致。能丑到哪去？

[zeroFans]

@PluginsWorld #13 求飞书链接

[coollest]

@YiXinCoding 主要是比出来的，老板就是觉得别人的做的好看，比较有设计感

[YiXinCoding]

先做到能 100% 还原别人网站样式，然后平时多收集点轮子，我觉得就很容易超越别人。

https://b23.tv/PN1ng3T

省流：

参考： https://www.qzq.at/
https://www.framer.com/
动画效果参考：
https://www.awwwards.com/
https://monolithstudio.com/
art innovation gallery
https://artinnovationgallery.com/
https://12dishes.com/
Seb® → Designer
https://www.sebastian-martinez.com/
Complete List | Hugo Themes
https://themes.gohugo.io/
Magnolia Free Hugo theme
https://ololiuhqui.github.io/magnolia-free-hugo-theme/
组件库推荐：
Magic UI
https://magicui.design/
Aceternity UI
https://ui.aceternity.com/
cult/ui
https://www.cult-ui.com/
framer motion( best animation)
Documentation | Framer for Developers
https://www.framer.com/motion/

3D 库推荐 Three.js
demo 3D 教学 (作者的课程 ThreeJs Journey The Ultimate Three.js Course ）
https://bruno-simon.com/

https://threejs-journey.com/

[PluginsWorld]

@zeroFans 可以加我微信 1254075921 ，私下单独提供。

[PluginsWorld]

@YiXinCoding 很难的，不是代码的问题，而是对 UI 思考方式和前端还原代码的思考方式。在这里需要互相了解对返，才能做到说不难看。我目前也是磕磕碰碰差不多一年才做到前端和设计的共通

[thedog]

@PluginsWorld 求一个飞书链接。。感谢大佬，给您感谢

[coollest]

@YiXinCoding 666666 ，十分感谢！

[NoOneNoBody]

专业事情让专业人士去做
一般做代码的，只需做到整齐、字体清晰、边缘留白（不满）、底色不刺眼不冲突，然后看喜好是圆角还是方角做到划一，基本就够了

[PluginsWorld]

https://paycenter.plugins-world.cn/buy/7

看是否有大佬愿意，捐赠一杯咖啡呗～

我之前翻译和校对，差不多 2 周。目前里面没几个人。支付后通过卡密的方式得到 QQ 群号。然后置顶公告是链接和访问密码。

本来想用微信群组一个大家交流的地方。然后想要过滤掉不相关随便加群拿资源的人。

我后续看看能否整理出我入门 UI 的经验。

[zsh2517]

@PluginsWorld #33 好像打不开。直连和全局代理（ HK/US ）都试过了。
chrome 报错 ERR_CONNECTION_CLOSED ，ERR_CONNECTION_RESET ； tcp ping 80/443 不通

[PluginsWorld]

我也是 chrome 浏览器，站点在国内的腾讯云服务器。你如果打不开的话，可以直接加我微信。

[zdw189803631]

还是嫌自己干的不够多

[xiaohanyu]

Refactoring UI 是本不错的书。

我个人觉得，工程师做设计，太花哨的就不要想了，做到简洁、归整就是胜利，主要的要点还是要克制：

1. 不要用太多的颜色
2. 4px 做为一个基础的 unit ，所有的尺寸尽量以这个为基础，4px/8px/16px/24px/32px 这种
3. 网页上的元素，尽量对齐，善用 grid
4. 适当学习下字体、排版知识

我个人基本上就是按照以上几条从头到尾完成了自己产品的所有设计： https://ppresume.com ，供参考哈。

早年间 qingcloud 有个前端工程师的分享蛮不错的： https://speakerdeck.com/imdonkey01/qian-duan-gong-cheng-shi-ru-he-jian-gu-she-ji-gong-zuo

[kakki]

找个设计师老婆，逃

[jackhu203040]

@kakki 思路打开了

[katwalk]

@xiaohanyu #37 做的不错，真诚的分享

[zsh2517]

@PluginsWorld 晚上打开能打开了，已经加群了

[PluginsWorld]

#37 分享中，第二点是对的。
第一点并不好掌握。目前我用过多种颜色后，大致领悟到了黑白灰配色方案的使用。然后要适当结合主色，#333 #666 #999 #f5f5f5 #ffffff 这几种颜色。可以做绝大多数 UI 场景。

同时高度和圆角和边框，是最重要的设计感元素。这里漏提了。

[BelovedOne]

临摹是最好的学习方式，去 Dribbble 上找你喜欢的风格，然后用任意软件实现，这个过程你会学习到 layout 、配色、细节、光影、图层、形状等等一系列的内容，并且是直接实操，目标导向的。

我就是从临摹开始的，零基础如今混到外企设计总监。

[YiXinCoding]

@xiaohanyu #37 看你打广告，我也忍不住要打个自己的广告： https://kite.kitlib.cn/
@PluginsWorld #42 不要用 #000 ，#fff 绝对黑和白，看到这种我是忍不了，#666 、999 这些也少用，中性灰不耐看。

还有怎么也得自己看顺眼啊，跟装修房子一样，讲究个耐看，有品味。
没必要循规蹈矩，国外教的设计是很规范，但看多了其实还是有些千篇一律，审美疲劳了。
比如传统国画讲究的留白都很有参考意义，发散一下想象力。

[YiXinCoding]

@PluginsWorld #42 我虽然不是美术生，但你可以去学学美术课。任何画都不会只选纯黑、纯白、中性灰来作画，总会偏一点色调。你还可以用取色器去取别人大网站或者 APP 的配色，很少有这样的。我之前整理的网站配色，可以参考下： https://kitlib.cn/color

[YiXinCoding]

@PluginsWorld #42 有些网站甚至为了高级感，背景都不会选纯色，会加噪点，颜色渐变，模仿一些实际材质和光影，比如纸质感，既可以聚焦内容，还耐看。有得学咯，多看多品，比啥都强。

[PluginsWorld]

@YiXinCoding #44, 说实话，我尝试过使用别的颜色。很难掌握。

使用#000 时，需要搭配透明度，或者 HSB, HSL 中的 B ，L 做一定调整。也不算纯黑。
如果不使用 #333 #666 #999 的时候，在没有自定义色彩能力的时候，没法很好的选颜色给字体做强调和减淡，这 3 个是最简单便捷好理解的颜色了。

包括颜色渐变，我之前看 PPT 教程学到的知识，可以一分钟做出渐变颜色： https://discuss.plugins-world.cn/post/GORWrkmA ，大致如下：

选一个颜色，使用 hsl 方式，色调增加 30 或减少 30 。得到另一个颜色。
一个颜色为起点，另一个颜色为终点。
去试试选择你喜欢的渐变色。
当感觉 30 度的色相变化差异较大时，可以调整一下，增加 15 或减少 15 。此时的渐变色会相对合适一些。

如果想要走专业的 UI 路线，需要多临摹，多观察多看，多画和实践，不然很多都太理论了。

如果是其他岗位希望快速做出来不丑的东西，那掌握一些设计常识，组件库的使用和关注点，然后实践过几次，就会有所感悟的。

很多人是排版都还不会，希望从开发角度出发，能解决做出来的东西不那么好看的问题。

关于聚焦内容，这个其实很偏产品方面了，例如我，即使掌握了一些基础，当自己去做 PC 端 UI 的时候，依然会面对页面很空洞的感觉，不知道填充什么进去。

而这我理解上是，产品经验的不足，不知道怎么提炼内容。我放个截图也许好理解。



首先做的时候不需要高级感，需要能做出来，不那么丑，能接受。基本上就可以继续和坚持。因为做任何事情都需要一点正反馈才有办法长期继续下去。

[PluginsWorld]

@zsh2517 感谢大佬支持辛苦的付出

[PluginsWorld]

我也不是美术生，审美上面也有欠缺。达不到专业设计水平。先看看有多少人感兴趣，人多的话，我可以从开发角度入手，以我入门后的理解、体会、经验，去梳理一下知识，让大家可以更快的掌握和更短时间内掌握 UI 。不说做的多好看，至少能从 C 端 UI 上入手，理解 UI 设计的思考方式。

掌握设计常识，不需要太久的时间。结合着临摹，就会有很大。我是自己慢慢摸索才能在几天时间内产出这样的 UI：
UI1: https://x.com/MouBiYong/status/1855122427808039170
UI2: https://x.com/MouBiYong/status/1855485335427592450


刚创建了一个众筹，看看有多少人感兴趣愿意支持我，如果支持的人达到 100 人，就可以全身心投入这个事情了： https://paycenter.plugins-world.cn/buy/8

不知道为什么，感觉好多人加我微信只是为了跳过捐赠要一份文件。当时设置了捐赠的主要目的是在经济下行的情况下，能让自己吃上几顿午餐，能提供需要的人想要的资源，并且让自己以前认真做的东西有一点点回报。

其实如果大家都经济比较不好，说明一下，也会提供。但啥都没说的时候，我也不知道自己做的对不对，是不是那么多人喜欢白嫖他人的努力和幸苦工作

[PluginsWorld]

没到 100 人的话也会去做这个梳理，只是会顾及生活，时间精力上会慢慢弄。

[PluginsWorld]

https://kitlib.cn/color 这个地址访问 403 ，

https://kite.kitlib.cn/ 这个感觉挺好看的。比我做的好超多。

[PluginsWorld]

可能在 #49 结尾有些不太好的地方。因为来加我的人，我连对方是谁都不知道，备注都无法进行。最起码的我尊重我感觉都没有受到。我不了解对方，那最终如果要清理微信过多的好友时，对我来说只是一个陌生人。




联系人太多了，后面总有一个时间会清理一下的。

[wanwusangzhi]

不如让 ai 来设计

[coollest]

@xiaohanyu 学到了学到了，感谢大佬！

[coollest]

@kakki 天才！

[coollest]

@zdw189803631 哎，牛马没有选择权

[coollest]

@NoOneNoBody 有道理，感谢老哥！

[coollest]

@wanwusangzhi 有道理，可以试试

[abc1310054026]

@xiaohanyu @coollest 跑题一下， 可以看下 TailwindCSS ，现在比较流行的 CSS 样式库。

他就是以 4px 作为基础长度单位的。

[xiaohanyu]

@PluginsWorld #47

其实大可不必自己去调试试验出一组颜色，网上有很多 color palette css generator ，选一个顺眼的克制使用，就行了。

[xiaohanyu]

@abc1310054026 #59

大部分 CSS 的 UI 库应试都是以 4px 为基础单位的吧？我有用过 taillwind ，但是觉得 tailwind 还是有一些别的问题，最终还是放弃了。

[abc1310054026]

@xiaohanyu 是的。

个人觉得 tailwind 主要有两点很好。

一是避免了绞尽脑汁想 class name 。什么中划线，下划线，BEM 都不用管了。
二是在统一单位和灵活性上保持了平衡。

[xiaohanyu]

@abc1310054026 #62

class name 这个，用 CSS in JS 其实可以缓解不少了。

tailwind 的主要问题在于，如果重度使用，完全从头自己写组件库，其实维护性是蛮的，一个 `div` 几十个 class ，debug 起来其实蛮烦的，比如这种官方的例子，很难说是维护性很好：

```
<div class="sm:col-span-3">
<label for="last-name" class="block text-sm/6 font-medium text-gray-900">Last name</label>
<div class="mt-2">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6">
</div>
</div>

<div class="sm:col-span-4">
<label for="email" class="block text-sm/6 font-medium text-gray-900">Email address</label>
<div class="mt-2">
<input id="email" name="email" type="email" autocomplete="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6">
</div>
</div>
```

[zhb1993]

https://tomato.lanzouq.com/imoQ217s38gj

[PluginsWorld]

@xiaohanyu 我也有用 tainwind ，但是目前也处于放弃阶段。上周都还引入使用了。

放弃原因，html 中要写太多的 class ，维护的时候很不方便，需要还原 UI 都高度时，有些时候高度需要自己写，tailwindcss 写法时 h-[xxxPx], 例如 h-[44px]，而且顺序问题，样式层级分组问题。这些在 UI 层面就是图层。

tailwindcss 看似很方便，也有弊端。

[PluginsWorld]

tailwindcss 主要缺点就是维护。例如我从 vercel 找一个模板下来。为了在顶部加上导航条。需要从代码一层层的 div 中找到真实影响的，然后再去定制华。维护的时候挺麻烦

[xiaohanyu]

@PluginsWorld #65

对的，是这样的，看上去非常美好，但是如果你要统一尺寸的 unit ，或者 color pallete ，用 tailwind 这种 h-[xxxPx] 的写法，丢失了 TypeScript 中的类型信息，后续修改维护其实还是非常麻烦的。

我个人认为，tailwind 其实是给库的作者使用的，绝大多数人其实也没有用 tailwind 重新写一套组件库的必要。

普通产品开发，用一套成型的组件库，加上 tailwind 适当修饰一下，可能是一个比较好的折衷的办法。

[morizawatt]

虽然不建议，但想应付工作速成的话就直接抄别人吧。想真的学的话，从最基本的学起，网上都有教程。

设计完全不像写代码，你学了编程、会了工具就可以上手了。美感的培养挺综合的，需要日积月累，不是说学会操作 figma 、sketch 、ps 就是会设计了。

[PluginsWorld]

@xiaohanyu #67 我也是认为是给库的开发者使用。应用开发者去用 tailwindcss 的时候很难用好。或者说能看似用好。后面会面临别的问题

[coollest]

@morizawatt 确实，我觉得审美这方面也得一点一点来

[coollest]

@zhb1993 老哥稳！

[abc1310054026]

@xiaohanyu 有道理，我倒是没有仅用 tailwind 写过组件，目前就是用 quasar 组件库加上 tailwind 作为辅助的。

tailwind 难以应对设计师天马行空的想象力，但他提供了一个下限。用 tailwind 很容易写出一个“不丑”的页面。

[xption]

@PluginsWorld 你好，请问怎么私你呢

[PluginsWorld]

微信 1254075921

[xiaohanyu]

@abc1310054026 #72

恰恰相反，我个人认为如果工程师要写出一个“不丑”的页面，最好不用用 tailwind 这种约束性比较弱的方案，还是找成型的更高级一些 UI 库比较好一些。

tailwind 太自由了，也就是比裸写 CSS 高了一小档，个人自由发挥很容易就写出“奔放”过头的页面和设计，当然不可否认，tailwind 确实是有很多优秀的 template 可以参考。

[gogogo1203]

@xiaohanyu tailwindcss 是绝大部分前端的默认选项了。 用了 tailwindcss ， 也可以使用 css, inline, styled css.

工程师要写出‘不丑’的页面：
1. 用设计好的 template 和组件， 改改颜色就好了。shadcn-ui , 有付费的 tailwindui.
2.用 composition, 所有的 container, layout ，form, input, button 全部重复使用，保持统一性。
3.直接学习别人优秀的开源项目，学别人怎么做 ui/ux 的。

我看过那些 ui 设计的书，基本忘光了。看别人的代码，看别人怎么做的，是最快的。 midday, medusa, supabase + tailwindui. 用这些做底， 基本都不会‘丑'.

[CouleurVVEX]

@zhb1993 感谢大好人

[aleimu]

说实话,我干全干几年了,不期望自己能写 UI 特效,因为真的写不好,其实用 ele 和 antd 全家桶基本够用了,再学点《写给大家看的设计书》简易的组件排布,基本是够看的,你不能指望全干还全精通吧....

[coollest]

@aleimu 这两天看了《写给大家看的设计书》，确实有用，看完之后觉得之前的布局确实不好看。应该是之前确实低于平均水平，我想着基本能达到平均水平就行了，精通肯定是精通不了一点