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

[coollest]

现在的工作是给一个生物信息实验室做相关的数据库项目，目前前后端代码逻辑没什么问题，就是被吐槽页面 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 做的不错，真诚的分享