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

3 天前
 coollest

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

3643 次点击
所在节点    设计
79 条回复
zsh2517
3 天前
@PluginsWorld 晚上打开能打开了,已经加群了
PluginsWorld
3 天前
#37 分享中,第二点是对的。
第一点并不好掌握。目前我用过多种颜色后,大致领悟到了黑白灰配色方案的使用。然后要适当结合主色,#333 #666 #999 #f5f5f5 #ffffff 这几种颜色。可以做绝大多数 UI 场景。

同时高度和圆角和边框,是最重要的设计感元素。这里漏提了。
BelovedOne
3 天前
临摹是最好的学习方式,去 Dribbble 上找你喜欢的风格,然后用任意软件实现,这个过程你会学习到 layout 、配色、细节、光影、图层、形状等等一系列的内容,并且是直接实操,目标导向的。

我就是从临摹开始的,零基础如今混到外企设计总监。
YiXinCoding
3 天前
@xiaohanyu #37 看你打广告,我也忍不住要打个自己的广告: https://kite.kitlib.cn/
@PluginsWorld #42 不要用 #000 ,#fff 绝对黑和白,看到这种我是忍不了,#666 、999 这些也少用,中性灰不耐看。

还有怎么也得自己看顺眼啊,跟装修房子一样,讲究个耐看,有品味。
没必要循规蹈矩,国外教的设计是很规范,但看多了其实还是有些千篇一律,审美疲劳了。
比如传统国画讲究的留白都很有参考意义,发散一下想象力。
YiXinCoding
3 天前
@PluginsWorld #42 我虽然不是美术生,但你可以去学学美术课。任何画都不会只选纯黑、纯白、中性灰来作画,总会偏一点色调。你还可以用取色器去取别人大网站或者 APP 的配色,很少有这样的。我之前整理的网站配色,可以参考下: https://kitlib.cn/color
YiXinCoding
3 天前
@PluginsWorld #42 有些网站甚至为了高级感,背景都不会选纯色,会加噪点,颜色渐变,模仿一些实际材质和光影,比如纸质感,既可以聚焦内容,还耐看。有得学咯,多看多品,比啥都强。
PluginsWorld
3 天前
@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
3 天前
@zsh2517 感谢大佬支持辛苦的付出
PluginsWorld
3 天前
我也不是美术生,审美上面也有欠缺。达不到专业设计水平。先看看有多少人感兴趣,人多的话,我可以从开发角度入手,以我入门后的理解、体会、经验,去梳理一下知识,让大家可以更快的掌握和更短时间内掌握 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
3 天前
没到 100 人的话也会去做这个梳理,只是会顾及生活,时间精力上会慢慢弄。
PluginsWorld
3 天前
https://kitlib.cn/color 这个地址访问 403 ,

https://kite.kitlib.cn/ 这个感觉挺好看的。比我做的好超多。
PluginsWorld
3 天前
可能在 #49 结尾有些不太好的地方。因为来加我的人,我连对方是谁都不知道,备注都无法进行。最起码的我尊重我感觉都没有受到。我不了解对方,那最终如果要清理微信过多的好友时,对我来说只是一个陌生人。




联系人太多了,后面总有一个时间会清理一下的。
wanwusangzhi
3 天前
不如让 ai 来设计
coollest
3 天前
@xiaohanyu 学到了学到了,感谢大佬!
coollest
3 天前
@kakki 天才!
coollest
3 天前
@zdw189803631 哎,牛马没有选择权
coollest
3 天前
@NoOneNoBody 有道理,感谢老哥!
coollest
3 天前
@wanwusangzhi 有道理,可以试试
abc1310054026
2 天前
@xiaohanyu @coollest 跑题一下, 可以看下 TailwindCSS ,现在比较流行的 CSS 样式库。

他就是以 4px 作为基础长度单位的。
xiaohanyu
2 天前
@PluginsWorld #47

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1088434

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX