V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fqy12300
V2EX  ›  设计

如何系统学习 UI ?

  •  
  •   fqy12300 · 2022-07-05 09:59:23 +08:00 · 3272 次点击
    这是一个创建于 633 天前的主题,其中的信息可能已经有所发展或是发生改变。
    工作前端,想学 UI 。

    想问各位,有没有网站或书,系统性介绍 UI 设计的。

    前端有阮一峰的 JS 教程、现代 JS 、库、框架也有对应文档。
    但 UI 方面的教程就找不到,我所知道的有 Dribble 、Behance 。但是这些网站没有基础的积累,光看肯定是不行。

    如果有系统性教程,还请各位推荐下,谢谢。
    最好是包括了 原型图设计、交互设计、UI 界面设计、Figma 的使用、配色、设计系统 等。

    目前状态:
    1 、没有系统性学过 UI ,只是看到什么学什么。
    2 、主要是:优设网、设计公众号、Dribble 。
    3 、虽然也每天看,看完之后最大感觉就是人家的设计真好。但是自己完全没得到经验。实战的时候还是没思路。是不是因为自己没理解基础概念和设计标准。
    18 条回复
    southsala
        1
    southsala  
       2022-07-05 10:55:18 +08:00   ❤️ 1
    看看 MD 设计、苹果人机交互指南等等,了解一下概念类的
    然后可以去看看国内各家仿 figma 的产品,比如即时设计有每日打卡、临摹之类的,个人感觉收获挺大
    December19
        2
    December19  
       2022-07-05 10:57:47 +08:00   ❤️ 2
    简单,B 站大学,虎课网。系统学习要花钱,涉及要素过多,基础挺简单的。

    零基础学 Figma
    https://www.bilibili.com/video/BV1fg411G7cs?spm_id_from=333.337.search-card.all.click&vd_source=7d746e1584127dd97da316900d5910f9
    草帽老师的 B 站
    https://space.bilibili.com/108104104/video
    设计师知识库(都是理论
    http://www.supermancall.com/

    多看多动手 多总结
    a62527776a
        3
    a62527776a  
       2022-07-05 11:18:09 +08:00
    虽然不知道 LZ 目的是啥 如果 LZ 想成为更好的前端开发工程师 小心路走歪了
    mlxy123123
        4
    mlxy123123  
       2022-07-05 15:24:37 +08:00
    我的建议是不要系统学习,从排版和平面设计学起,而且少看多做
    到素材网上随便搜一批你觉得漂亮的图,直接照着做,尝试还原
    这一步至少能管一年,一年临摹下来基本也知道下一步该做什么了
    fqy12300
        5
    fqy12300  
    OP
       2022-07-06 00:37:27 +08:00
    @southsala 谢谢,我后面会多看看国外大厂的设计系统。
    fqy12300
        6
    fqy12300  
    OP
       2022-07-06 00:38:56 +08:00
    @December19 谢谢推荐,草帽老师也确实很早就关注了,哈哈。酸梅干超人的这个文档倒没怎么关注。
    fqy12300
        7
    fqy12300  
    OP
       2022-07-06 00:40:01 +08:00
    @a62527776a 路走歪了,是啥意思?我觉得前端了解一些 UI 的知识对自己也是有帮助的吧。
    fqy12300
        8
    fqy12300  
    OP
       2022-07-06 00:44:21 +08:00
    @mlxy123123 谢谢,多动手肯定是要的,但是我觉得理论也不能太过于贫乏吧。想那种什么 7/2 法则,组件术语、排版定理。在实际做的时候,应该也是有帮助的。
    mlxy123123
        9
    mlxy123123  
       2022-07-06 09:33:12 +08:00
    @fqy12300 你说的这些理论知识就跟编程里的设计模式一样,不是让你一次性学会,在后面的工作中从脑子里搜索使用的

    而是你工作了一段时间回头来看,哦,原来是这么回事,那我以后明白了

    硬学理论吸收不了的
    XTTX
        10
    XTTX  
       2022-07-07 11:17:02 +08:00   ❤️ 1
    先学最最最基础的理论, 类似 “为什么一个版面最多用 3 个字体大小和不超过两种字体” “什么时候用 call out” "哪个是 call to action".
    callout, negative space, font, font size.


    然后看真正大佬的作品,而不是那些花里胡哨的炫耀技能的东东。 你看看 https://lawsofux.com/ 就应该明白了。



    接着你可以买一些成熟的模板, 在别人的基础上改。tailwind 作者就有一个付费的 component\template 包。
    yyh0808
        11
    yyh0808  
       2022-07-07 15:56:29 +08:00
    我觉得你学的都是方法,而没有解决最核心的问题,应该先考虑,要从事什么行业,再考虑学什么
    xiusheji
        12
    xiusheji  
       2022-07-11 14:42:23 +08:00   ❤️ 1
    我推荐一本书吧《认知与设计:理解 UI 设计准则第 2 版》,这本书对我帮助挺大的,一些必须要知道的基础理论。

    其他的也可以看看有需要的书吗
    https://www.xiusheji.com/p/books.html
    wismaqua
        13
    wismaqua  
       2022-07-18 17:59:16 +08:00
    还是去学开发吧。
    3232
        14
    3232  
       2022-08-05 15:58:49 +08:00
    回想一下,其实真没有系统的学过 UI ,没上过辅导班。
    我认为个人自学,比较靠谱的学习方法,可以分 3 块

    1 、传统的视觉设计课程,去查查本科视觉传达设计专业课内容
    2 、熟练使用设计软件 Skecth 、Figma
    3 、熟悉苹果 IOS 官方库的组件,在此基础上能根据产品需要,设计自定义控件更佳
    https://developer.apple.com/design/resources/
    https://www.apple.com/ios/ios-15/
    https://www.apple.com/ios/ios-16-preview/
    马上苹果要出 IOS16 了,一般来说只要 IOS 版本更新了,所有苹果 app 的 UI 设计都需要更新一遍

    熟悉 Google Material System ,安卓新版本发布以后,对安卓 app 影响比较小,一般安卓 app 不会那么快跟进。不过要学 UI ,Google 的设计规范 还是要懂的
    https://material.io/design
    fqy12300
        15
    fqy12300  
    OP
       2022-08-08 10:36:52 +08:00
    @3232 感谢。
    fqy12300
        16
    fqy12300  
    OP
       2022-08-08 10:37:18 +08:00
    @wismaqua 不行,开发太卷了。
    ldsd
        17
    ldsd  
       2022-08-18 11:56:35 +08:00
    我是个 10 年的 UI ,刚好我想学前端,互相交流一下?
    no13bus
        18
    no13bus  
       158 天前
    @ldsd 我的微信 no13bus. 交流下吗?我是程序员
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4814 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 09:45 · PVG 17:45 · LAX 02:45 · JFK 05:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.