V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
iamtsm
V2EX  ›  问与答

ui 太丑,怎么找优化灵感

  •  
  •   iamtsm · 2023-02-21 11:53:54 +08:00 · 3702 次点击
    这是一个创建于 402 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近有人吐槽说我的示例网站 ui 很丑,有没有大佬给点建议或者方向,可以让我我找找优化灵感

    https://im.iamtsm.cn

    有好的想法建议,也可以提 issue

    https://github.com/iamtsm/tl-rtc-file/issues

    45 条回复    2023-02-22 19:06:48 +08:00
    723X
        1
    723X  
       2023-02-21 12:06:19 +08:00 via Android
    图标先统一样式再说
    think2011
        2
    think2011  
       2023-02-21 12:20:53 +08:00
    布局、交互没太大问题,配色太杂了
    s04
        3
    s04  
       2023-02-21 12:26:15 +08:00   ❤️ 1
    Fiverr 上雇个 UI 设计师给你做 UI ,或者自己找同类软件参考。
    darkengine
        4
    darkengine  
       2023-02-21 12:26:25 +08:00
    颜色选得很怪,例如文字聊天界面,这个底色跟黑色字体放一起,对比太低了。
    zapper
        5
    zapper  
       2023-02-21 12:28:26 +08:00
    iamtsm
        6
    iamtsm  
    OP
       2023-02-21 12:32:17 +08:00
    @723X
    @think2011
    样式配色,感觉不太容易搭配,主要没学过什么设计或者美工,所以做的比较随意,偏个人
    iamtsm
        7
    iamtsm  
    OP
       2023-02-21 12:34:15 +08:00
    @s04 雇不起,[emo],这就是一个比较偏业余的小工具,还没有收入来源,只能自己做一些改进
    iamtsm
        8
    iamtsm  
    OP
       2023-02-21 12:35:11 +08:00
    @zapper 多谢,我去看看
    wasd6267016
        9
    wasd6267016  
       2023-02-21 12:36:10 +08:00
    1 两个白色按钮太丑了 看不清里面的字
    2 图标有的是拟物的有的是极简的
    3 背景颜色太丑了 可以去配色网站找色彩
    ( 只是主观建议 不是批评哈 )
    darkengine
        10
    darkengine  
       2023-02-21 12:38:43 +08:00
    alne
        11
    alne  
       2023-02-21 12:39:01 +08:00   ❤️ 1
    多看看优秀设计
    你自己都感受不到,说明审美水平不行,得多看
    iamtsm
        12
    iamtsm  
    OP
       2023-02-21 12:40:05 +08:00
    @wasd6267016 多谢建议,我尝试改一下配色,和图标
    iamtsm
        13
    iamtsm  
    OP
       2023-02-21 12:41:53 +08:00
    @darkengine 多谢,我学习下
    iamtsm
        14
    iamtsm  
    OP
       2023-02-21 12:43:22 +08:00
    @alne 😂 难搞哦,是得多看一些设计网站了
    yinchunde
        15
    yinchunde  
       2023-02-21 12:49:07 +08:00
    单纯的去抄就行了,去 https://dribbble.com/
    iamtsm
        16
    iamtsm  
    OP
       2023-02-21 12:54:17 +08:00
    @yinchunde 网站 get 了
    unnamedhao
        17
    unnamedhao  
       2023-02-21 13:24:32 +08:00
    Midjourney 试试
    leejnull
        18
    leejnull  
       2023-02-21 13:37:18 +08:00
    推荐一个国内的 https://mastergo.com/community/
    callmesmc
        19
    callmesmc  
       2023-02-21 13:41:43 +08:00 via iPhone
    实在不行就从系统 UI 取色吧。而且为啥要弄那么多种背景色,设计不来可以弄得简单一点,多做多错...
    hzxxx
        20
    hzxxx  
       2023-02-21 13:50:34 +08:00
    以合作项目为由,找个学生来设计吧,大家一起进步,应该还是能找到的,我以前毕设就是跟别人合作的,她设计,我实现
    gaobh
        21
    gaobh  
       2023-02-21 14:05:30 +08:00
    大背景改成白底,按钮改成黑底白字。都是黑白配色就好点。
    wemadefoxmoon
        22
    wemadefoxmoon  
       2023-02-21 15:44:54 +08:00   ❤️ 1
    UI 设计师来简单答下
    1. 在擅长设觉设计的情况尽量做简单,不要过度设计,比如按钮样式
    2. 可以参考一个组件库的样式来做,保持统一,图标也用同一个图标库,比如 https://icones.js.org/
    3. 缺乏 hover active 效果 简单的颜色变深变浅一下体验就会生动很多
    4. 组件库会有配色参考,https://color.review/ 这个网站可以检测文字和背景颜色是否符合无障碍阅读标准
    5. tailwind css

    最后吐槽下🤣交互问题,很简单的东西弄的看起来好复杂,不过慢慢来吧,处理视觉问题还是要比处理代码问题简单多了
    wemadefoxmoon
        23
    wemadefoxmoon  
       2023-02-21 15:45:43 +08:00
    @wemadefoxmoon 捉虫 不擅长视觉设计的情况下🥲
    clf
        24
    clf  
       2023-02-21 15:47:42 +08:00
    你这个配色有点……
    iamtsm
        25
    iamtsm  
    OP
       2023-02-21 15:51:12 +08:00
    @wemadefoxmoon 学到了,多谢大佬
    shenhualv7
        26
    shenhualv7  
       2023-02-21 16:02:11 +08:00 via Android   ❤️ 1
    我的经验是少用文字多用图标,背景只选白或黑或上纹理,要不就是低饱和度的颜色,图标和排版风格统一,动效和不透明度阴影设置一下,基本就不错了
    xiaohouzhi
        27
    xiaohouzhi  
       2023-02-21 16:35:54 +08:00
    术业有专攻,你还是找个设计师帮你优化一下吧
    zxCoder
        28
    zxCoder  
       2023-02-21 16:41:24 +08:00
    抄。。。
    hello00001
        29
    hello00001  
       2023-02-21 17:02:52 +08:00
    确实很丑
    Thecosy
        30
    Thecosy  
       2023-02-21 17:10:33 +08:00
    1 ,颜色
    2 ,比例不对
    yawenimy122
        31
    yawenimy122  
       2023-02-21 17:15:42 +08:00
    不单是 UI 丑,设计也是过时了,加上细节没做好,不论功能性,看上去是大学生的期末作业一般
    yawenimy122
        32
    yawenimy122  
       2023-02-21 17:17:12 +08:00
    建议可以花点小钱去 tb 买个模版或者写好的框架,套上自己的业务代码就行,比较实用省时间
    throns
        33
    throns  
       2023-02-21 17:29:11 +08:00 via iPhone
    可以考虑把 layui 换掉,这个一般用来开发后台应用。可以看一下国内应用截图:uinotes.com 和国际应用截图:mobbin.com 找找灵感。
    iamtsm
        34
    iamtsm  
    OP
       2023-02-21 17:33:56 +08:00
    感谢各位大佬们的建议,我准备开始改版了,到时候做出来了再给大家看看
    Skifary
        35
    Skifary  
       2023-02-21 18:44:33 +08:00
    网页端接入一下样式库例如谷歌的 Material Design 的实现 https://github.com/material-components/material-web#readmehttps://github.com/mui/material-ui

    这些库提供了丰富的组件和统一的样式(包括 icon ),让开发者可以专注于业务
    horizon
        36
    horizon  
       2023-02-21 20:08:15 +08:00
    卧槽,确实丑。。换个组件库吧
    molvqingtai
        37
    molvqingtai  
       2023-02-21 20:22:33 +08:00
    看得出来很用心在做特效了,不过确实有点丑,找个好看点的 UI 框架吧
    Echo28
        38
    Echo28  
       2023-02-21 23:07:01 +08:00 via iPhone
    找不到重点,配色也存在问题
    设计入门可以看看《写给大家看的设计书》,了解一些基本的规则
    netabare
        39
    netabare  
       2023-02-22 01:03:05 +08:00 via Android
    我觉得丑其实是次要的,让人没法很好的理解该怎么操作才是大问题。

    比如说 linux 下的很多程序界面丑出了天际线,但是交互逻辑其实蛮直观的,这种也挺好。
    hoopan
        40
    hoopan  
       2023-02-22 09:30:47 +08:00
    我一般找喜欢的组件库或现成的模板,设计不来
    isnullstring
        41
    isnullstring  
       2023-02-22 09:32:15 +08:00
    没看懂怎么用,配色有主次,引导用户焦点
    KillPaul
        42
    KillPaul  
       2023-02-22 11:16:21 +08:00
    作为程序员你已经接触了无数好产品了,但是盲猜你从来不会去关注一个优秀的页面为什么用户体验做得那么好,如果培养一下这方面的关注度,你不需要特地去找“灵感”这种东西的
    klight
        43
    klight  
       2023-02-22 11:20:04 +08:00
    emmm...莫非是手撸出来的?
    没有好的设计稿的话建议找个好点的 UI 库诶,推荐试试 daisyUI
    颜色太杂乱,如果不太会配色的话模仿下各网站和软件的深色模式和浅色模式,吸他配色也是可以的
    图标不统一,有些是线框有些是填充,有些是拟物有些是极简
    视觉没有重点...
    随便写写的话抄抄别人的就行,真要深究的话找找视觉规范和设计语言吧
    iamtsm
        44
    iamtsm  
    OP
       2023-02-22 11:56:09 +08:00
    感谢大家非常真切认真的反馈,后面我好好培养下设计思维,另外 ui 和样式改版已经在进行中了... 多谢大家
    duan602728596
        45
    duan602728596  
       2023-02-22 19:06:48 +08:00
    1. 动画太慢了,时间建议在 0.3s-0.5s 之间
    2. 最下面的弹出层建议切换到另一个时关闭当前的,弹出好几个还要用户自己一个一个关闭
    3. 最下面的动画和高亮配合的时间不是很好
    4. 图标风格不一致,颜色不一致
    5. 图标颜色和背景颜色接近,需要仔细看才能看清,很不方便
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2832 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 13:37 · PVG 21:37 · LAX 06:37 · JFK 09:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.