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

前端开发,想从零开始学一学设计,求推荐学习路线

  •  1
     
  •   Tyangs · 2023-08-02 17:54:07 +08:00 · 2984 次点击
    这是一个创建于 512 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,前端开发,想在闲暇时间写点个人项目(练手),但是又难以接受丑陋的页面,很羡慕有些独立开发者的设计 & 审美,想尝试去学一学设计,求推荐学习路线。(也有可能被学习路线劝退,放弃...)

    期待学习后的结果是能够独立用 Figma 画出脑中想法且有一定设计规范的设计稿,方便我对着稿子画页面。

    11 条回复    2023-08-04 09:08:39 +08:00
    saberC8
        1
    saberC8  
       2023-08-02 18:29:42 +08:00
    我是设计转前端的,一点分享。
    1:提高自己的 ui 能力,理解各个设计规范,这个前端基本也掌握了,优设网多点;
    2: 提高自己的审美能力,花瓣网,ui 中国,站酷观看设计,收藏,提高自己的审美能力,每过一段时间整理自己的喜欢的图片,删除现在的自己的觉得以前的收藏的丑的图,说明你的审美能力提升了;
    3: 学好 ps ,ai ,sketch ,工具的熟练运用能让自己把想要的东西做出来,手动临摹 app ,从 icon 开始临摹,然后到整个页面布局,临摹多了就清晰了。
    honeycyj
        2
    honeycyj  
       2023-08-02 18:34:20 +08:00
    https://www.awwwards.com/ 多去瞧瞧哦,难得遇到肯折腾视觉设计的前端了
    saberC8
        3
    saberC8  
       2023-08-02 18:34:33 +08:00
    https://www.meiye.art/app
    StateMa
        4
    StateMa  
       2023-08-03 01:01:08 +08:00
    多翻翻优秀个人作品,临摹设计,坐上三五个就对基础的 间距布局就有感觉了
    然后多看看设计稿 主要看布局和间距啥的,国内字体好看大都要买,平常也翻翻字体站,有的时候换掉默认的微软雅黑就能提高不少美观程度
    https://www.pinterest.com/search/pins/?rs=ac&len=2&q=phone%20application%20design&eq=phone%20application&etslf=1921
    StateMa
        5
    StateMa  
       2023-08-03 01:02:50 +08:00
    mgb 没编完发了……
    www.pinterest.com 是我之前给游戏 mod 找素材灵感时一直翻得, 你可以试试,收容内容挺广
    Tyangs
        6
    Tyangs  
    OP
       2023-08-03 08:57:07 +08:00
    @saberC8 感谢分享,很有帮助,我这段时间尝试一下
    Tyangs
        7
    Tyangs  
    OP
       2023-08-03 08:58:34 +08:00
    @honeycyj 感谢分享,想整整个人网站,又不想做的太俗套,所以想先折腾一下设计
    Tyangs
        8
    Tyangs  
    OP
       2023-08-03 09:01:10 +08:00
    @StateMa 感谢分享,已收藏,这段时间持续看看,找找自己喜欢的风格
    zhaodong
        9
    zhaodong  
       2023-08-03 09:31:32 +08:00
    b 站,新像素、草帽 smao
    Adyun
        10
    Adyun  
       2023-08-03 11:05:07 +08:00
    figma 打开,画一画,然后找优秀的对比,看下差距在哪里。主要是选图,颜色,大小,间距等,然后看到好的喜欢的界面就临摹,抄多了自然就会了。有一些程序不太注重细节,其实间距、大小和样式、阴影这些细节对于提升整体的设计感很重要。

    一般的设计跟程序的套路差不多是一样的。刚开始的时候整个页面抄,做多了之后就会觉得整站抄不行了,然后将模块进行拆分,这个项目的 banner 设计方式套到另外一个上面,那个的新闻列表样式,改一改用到这个上面,这时候就有了一定的创新。等这种模块化也抄的差不多了,就开始改里面的元素。脑海中以前看到过的其他按钮可以用到这个项目上,那么就拿过来。曾今看到过的一种布局,这里似乎合适,那么就做做看。所以设计师也有一大堆素材库,就是为了方便随时“调用”。

    在一个项目开始的时候,去网上搜同类的看一看,大量搜集可以“抄”的素材,然后进行修改拼装,是大多数设计师的设计流程。

    这也是设计所说的多看,多积累,然后将设计元素拆分之后重组,只要组出来好看实用就行。同时在看和做的过程中,累积了审美,从而下次能够“拼”出更好的作品。

    当然我这里讨论的是一般的设计,像那种天才创意的可能更需要想法以及锻炼自己的观察能力。

    工具很好掌握,如果主做 UI 的话,可以学习 Figma 。PS/AI 也得会,不要求精通,熟练即可。
    Tyangs
        11
    Tyangs  
    OP
       2023-08-04 09:08:39 +08:00
    @Adyun 嗯,我也是打算先找一两个风格我比较喜欢的开源组件库的 figma 来抄抄看

    顺便给大家分享一个站点,一些知名开源组件库的 figma 集合: https://www.designsystemsforfigma.com/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4076 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 05:27 · PVG 13:27 · LAX 21:27 · JFK 00:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.