前端如何学习设计

2018-03-29 09:50:13 +08:00
 pandaaa

最近思考,一个前端怎么去理解设计的思维。平时对设计比较感兴趣,自己是前端,当然现在有很多前端和设计结合的岗位,逼入某某大公司有专门的 UI 设计师,动画设计师,都要求会 JavaScript。写好自己的 css 库和 JavaScript 可以直接拿给研发使用。

那么问题来了? 一个前端怎么去学习设计啦?从实用的角度去看

3706 次点击
所在节点    程序员
21 条回复
pandaaa
2018-03-29 09:51:55 +08:00
前端自己可以做很多动画,但是很多设计图考虑不到,JavaScript 或者 css 的实现程度。如果一个前端工程师学习设计,我想很多地方能考虑到代码的实现难易程度和具体的方案,让设计更加开发友好
iq72
2018-03-29 09:58:34 +08:00
和想学前端的设计师合作,建个个 atomic design 的库之类的
shimomiaizo
2018-03-29 10:02:28 +08:00
设计关注的更多是一个相对 macro 的层面,也就是我不在意一个 component 是怎么写的,甚至在一定程度上我不关心一个 component 能不能被利用,而是更关心一个页面或者 screen 的 layout 是不是平衡、和谐,形成一个 user flow 的 page 和 page 之间的关系是否够强,再进一步,一个系统内部设计风格和语言是否和谐。

这就牵扯到一系列的

- 色彩
- accent color
- neutral tone
- state colors
- 形状
- component
- margin, padding
- 文字
- 字体使用
- 行距、字号系统
- 字重
- serif? sans serif?
- 字体的情感和品牌以及需要的契合
其他的强装饰性元素
- Illustration
- Artistic styles ( e.g. 你说到的动画效果具体使用什么样的艺术风格更和品牌贴合?更适合项目的 nature ?等等)

不同类型项目的设计,以上这些东西的占比会不同

不要希望一个 css 能适配所有项目,这个是可以肯定的

我不是设计大牛 只是一个在摸索前端的设计狗

一起进步

如果你想要看一些比较完整、完成度高的设计,可以上 dribbble。不过,请挑选是真正被用于项目的设计,而不要看飞机稿。

最后,动画在我自己的工作这边几乎不需要被考虑,但是如果你想了解动效设计(这的确是非常大公司向的专门技术),可以先从了解动效的基本形式开始,我记得网上有一些很好的概括性 gif。
shimomiaizo
2018-03-29 10:03:28 +08:00
天,这回复怎么把我的 list 搞成了这样
上一条回复的 list 里,色彩、形状、文字、其他的强装饰性元素 这四个是四个大类 其他的是四大类下的小类
shimomiaizo
2018-03-29 10:05:07 +08:00
仔细想想,会 JS 对于设计师真的是个大的帮助,原因在于懂了 JS 能真正帮助设计师从动态和交互的角度理解设计、从整个系统和使用的角度去看设计,而不是仅仅停留在化静态 screen、依赖于 prototyping tools 的层面(我目前就卡在这里了,哭哭
pandaaa
2018-03-29 10:08:01 +08:00
@shimomiaizo 你是设计了?
pandaaa
2018-03-29 10:08:29 +08:00
@shimomiaizo 感谢大佬回复这么多,有收获嘿嘿
pandaaa
2018-03-29 10:09:02 +08:00
@iq72 这个可以有
shimomiaizo
2018-03-29 10:10:26 +08:00
@iq72 有点意思,这具体怎么个操作?是做一个自己的 design language + animation + component lib 这样的感觉?( design language 我觉得还没到这个程度吧,但 anim + comp lib 可以有
shimomiaizo
2018-03-29 10:11:19 +08:00
@pandaaa 嗯 设计狗 最近因为一个新项目和公司的资深前端交流很多 然后自己的 side job 在搞 VUE 教程的翻译 必须得学前端了 不然到死都干不到公司给买养老保险的工作了
pandaaa
2018-03-29 10:19:07 +08:00
@shimomiaizo 嘿嘿 vue 翻译,大佬你好。
Microi
2018-03-29 10:19:22 +08:00
我个人看法,学得精比懂得多更重要,直白一点说,前端对于设计有深入的认知(反过来一样)是非必要的。
murmur
2018-03-29 10:20:21 +08:00
我感觉设计是学不来的 真心需要美学天赋 能模仿或者能抄和有原创设计完全是两个概念
pandaaa
2018-03-29 10:24:16 +08:00
@Microi 恩,大佬的意思是深度比广度更重要,好好学前端才是最重要的吧。
shimomiaizo
2018-03-29 11:40:14 +08:00
@murmur 这是没错 但培养审美意识 知道什么比什么好 为什么好 以及为什么需要好 是很重要的 这些能成就一个优秀的前端 正如一个懂一些前端的设计师会有长足的进步
shimomiaizo
2018-03-29 11:41:08 +08:00
@pandaaa 见笑了 只是自己有一丝丝前端底子 然后有一点英语优势 所以想着不如借翻译的机会自己也学一遍 毕竟翻译的话没有跳过任何内容的可能
leer561
2018-03-29 11:45:21 +08:00
写给大家看的设计书
murmur
2018-03-29 13:43:45 +08:00
@shimomiaizo 我觉得程序员做久了审美会扭曲,所以有美工还是直接相信或者甩锅给美工比较好
如果要做独立开发者那就没办法了
shimomiaizo
2018-03-29 16:55:26 +08:00
@murmur “甩锅”给“美工”
贵司美工何德何能给您背锅(笑
黑名单再见了您那
fanhaipeng0403
2018-03-29 18:14:26 +08:00
从抄页面开始

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

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

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

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

© 2021 V2EX