设计并实现一款软件的 UI 界面真的挺难的。

[besscroft]

近一个月每次放假都在写前端页面，有点折磨自己。Web 页面的样式是真的难调，尽管已经在依靠组件库 + TailwindCSS 和 GPT 帮忙了。

写完一个小东西，换了一种分辨率发现样子又变了，或者是切换成移动端发现又哪里歪了，想要适配不同的分辨率和屏幕大小真的不容易。又或者是发现一个样式不对劲，不知道怎么找到它（组件内部的，找起来有点麻烦，也不好全局覆盖），或者是找到了也不知道怎么调整。以后再也不想评价别人写的咋样了，因为自己写起来确实费劲。我确实得找点资料（书）去好好学学，但我很好奇大家都是怎么做的？

今天中午起床后，一下午又在画样式，在这个 PR，大家也不妨告诉我，是不是我学习方法有什么问题？

[zcf0508]

你需要先做好设计，再开始写代码，特别是需要适应屏幕分辨率的，要按照断点设计多个版本。用 tailwind 是移动端优先的，所以先实现小屏再往大屏调整。

[liyang5945]

先学习 css 的基本知识吧，文档流，盒模型，定位，flex 布局，学会这些东西就发现布局什么的都是小菜一叠，我当初是看一个培训机构的前端教学视频学的，css 的课程不多，快的话一两周就能学会

[CLMan]

前端包括设计和实现(开发)，虽然有全栈的概念，但是真正能精通前后端开发的少之又少，精通前后端开发而且精通设计的更是凤毛麟角。

应试教育使得很多人缺乏基本的审美细胞，这个没法补课了。

我也曾经焦虑过，因为练习 web 项目就要涉及前端，而前端部分往往让我心里交瘁。后来我就直接爬别人的网站，只练习后端部分。

Material Design,Ant Design 之类的库也能帮助非前端人员节省开发的脑细胞。

总之，专业的领域交给专业的人来做，别自己硬着头皮浪费大量精力去做，你也学不到什么。

[crysislinux]

要做的协调好看确实比较难。抄别人的最简单。

[jones2000]

设计难， 实现就是一个体力活。

[levelworm]

别做这种事情了，专心做 CLI 的工具，专心做程序员要用的工具，这种面向普通人的东西还是交给其他人来弄。。。

[daweiba]

找个 UI 框架，改巴改巴

[Aloento]

设计... 我一般就是先想点子，然后高保真，然后实现，然后优化

[Aloento]

然后，我超，原

[kongkx]

需要补点 css 相关的知识，响应式以及优先级机制，了解网页 layout 的特性。 看了一个 commit ，好像不少 !important ，跟“行内样式” ，这样很容易搞死自己。

[jeffw]

如果没要求，我现在只都做电脑版，手机平板的屏幕那么大，又不是不能用。。

[vsitebon]

虽然我可能不清楚 vue 的语法是怎么实现的，但是我看了一下可以改进的首先是，如果采用了 Tailwindcss 那么尽可能不要再单独将某一个样式放在 style 里面，而是通过控制 class 来控制，例如：“:body-style="{ padding: '1rem' }"” 这种

[superedlimited]

用 tailwindcss 的前提是比较熟练掌握 css 。你 css 还不熟，就靠什么 chat 狗屁通帮你写，还 tailwindcss ，r u fucking 搞笑的么？

[debuggerx]

响应式设计和实现本就不那么容易，别说跨专业来写的了，就是大公司的产品，真正能做好的也没几个，国内尤其严重，还自作聪明得整出各种“屏幕适配方案”的歪路把人带偏……
想做好响应式，需要足够的理解和认知，再加上各种技巧和套路的积累，所以不光得掌握常见的布局和样式知识，还需要看一些成体系的设计语言指导，比如 MD 的文档：
https://www.mdui.org/design/layout/responsive-ui.html
MD 好不好看见仁见智，但是它最少是一套系统的有足够理论支持的设计语言，相反很多 xxxDesign 、xxxUI ，本质不过是一些方便开发的 UI 组件库而已。
其次就是多留意好的设计实现，学习那些思路和技巧。一般是国外的网站和应用出现的概率会高一点。
再贴几个刚查到的链接：
https://www.invisionapp.com/inside-design/examples-responsive-web-design/
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design
https://web.dev/responsive-web-design-basics/

(我看还有几个大聪明说前端简单的[狗头])

[besscroft]

@debuggerx 谢谢！

[xxxyy2y]

@debuggerx 不错

[YouMoeYi]

某些人戾气不要太大😅 多分辨率多端 UI 的响应式设计本身就不那么好做

[js8510]

做个 UI 真的很难。。开始时候独立还发还想着我要做好看，我要设计一下，我要响应尺寸变化。后来直接放弃，遵循能用就行的原则。
其实经过漫长的独立开发最终上线，多数情况是完全没有流量。如果成功了，UI 还有机会改。