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

ui 太丑,怎么找优化灵感 《后续》

  •  
  •   iamtsm · 2023-04-06 09:09:25 +08:00 · 2568 次点击
    这是一个创建于 576 天前的主题,其中的信息可能已经有所发展或是发生改变。
    关于我上次提了一个 ui 界面问题,引出了众多大佬的反馈和建议,这是原文 : https://v2ex.com/t/917869#reply45
    然后我就参照着做了一次优化,大家觉得改版后的 ui 和配色有没有好些

    https://im.iamtsm.cn

    https://github.com/iamtsm/tl-rtc-file/issues
    25 条回复    2023-04-07 09:18:15 +08:00
    sss15
        1
    sss15  
       2023-04-06 09:19:56 +08:00
    没看过前面的界面长什么样,可以截个图对比一下看看吗?

    新版本的感觉挺好看的,是偏向手机端的 ui 吗,我觉得 pc 端可能没适配好,整个布局都在上面 30%的位置,下面 70%是空白,看起来怪怪的
    iamtsm
        2
    iamtsm  
    OP
       2023-04-06 09:25:24 +08:00
    @sss15 我去把旧版也放出来,大家对比下,再给点建议
    PEALFK
        3
    PEALFK  
       2023-04-06 09:37:55 +08:00
    我感觉问题出在了自我的审美上,如果自己审美不好的情况下,可以尝试直接使用现有 UI 库的组件
    xiaojun1994
        4
    xiaojun1994  
       2023-04-06 09:38:57 +08:00
    阴影太生硬
    iamtsm
        5
    iamtsm  
    OP
       2023-04-06 09:41:06 +08:00
    0703wzq
        6
    0703wzq  
       2023-04-06 10:15:42 +08:00   ❤️ 1
    老实说,现在依然很丑。。。 阴影、配色。。
    0703wzq
        7
    0703wzq  
       2023-04-06 10:16:14 +08:00
    建议直接换已有的开源 UI 组件库。。
    LaGeNanRen
        8
    LaGeNanRen  
       2023-04-06 10:39:25 +08:00
    你这个优化后的右上方的发送文字按钮,竟然连 icon 和文字都对不齐 = =
    我作为 ui 表示第一眼就难受了
    aydd2004
        9
    aydd2004  
       2023-04-06 11:50:39 +08:00
    没有审美这种事情不是发个帖就可以搞定的。
    hevi
        10
    hevi  
       2023-04-06 11:52:36 +08:00
    用 tailwindcss 跟它的组件库随便搭搭试试吧..
    阴影太离谱了
    KevinDo2
        11
    KevinDo2  
       2023-04-06 11:56:25 +08:00
    好了点,但不多。
    阴影: https://shadows.brumm.af/
    我不明白,中间那两个蓝色的,怎么做的左边的图标和发送文件按钮都不居中,右边的图标不居中但按钮又是勉强居中的?
    foufoufm
        12
    foufoufm  
       2023-04-06 12:02:20 +08:00
    这个帖子有点像这个对话:

    “头太疼,怎么治啊?”

    “吃点头疼药就好了。”

    但头疼吃药只能缓解一时,很可能是坐久了,颈椎压力太大引起的偏头痛。

    回到你的问题,更好的答案是你得明确自己想让用户使用场景的优先级,而不是单纯思考 UI 的样式问题。
    iamtsm
        13
    iamtsm  
    OP
       2023-04-06 12:13:54 +08:00
    @KevinDo2 收藏了,到时候我看看再调整下
    iamtsm
        14
    iamtsm  
    OP
       2023-04-06 12:15:33 +08:00
    @LaGeNanRen 这些细节到时候还得要优化下😂
    darkengine
        15
    darkengine  
       2023-04-06 12:21:30 +08:00
    提个功能问题啊,为啥在“公共聊天频道”需要“请先加入房间,才能发言哦”
    chrosing
        16
    chrosing  
       2023-04-06 12:50:43 +08:00

    为啥时间是未来
    duan602728596
        17
    duan602728596  
       2023-04-06 16:05:15 +08:00
    1. 最开始进入时候的提示 modal 和整个网站的配色风格不搭配,感觉就是 light 和 dark 混搭
    2. 左下角的蓝色 button 文字黑色有点奇怪,一般来说 primary 和 second 的文字颜色都是白色
    3. 赞助一下,为爱发电的 modal ,下面圆角没处理好,露出了白色
    4. 公共聊天那行的 disabled button 会出现两种鼠标指针样式 5
    5. Accessibility 做的其实很不好,好多 button 都没法用键盘来选中和控制
    duan602728596
        18
    duan602728596  
       2023-04-06 16:08:33 +08:00
    6. 宽屏上,公共聊天消息提示的红点会离 button 很远,怪不得看起来很奇怪
    wunonglin
        19
    wunonglin  
       2023-04-06 16:25:33 +08:00
    直接用 vuetifyjs 啥都不改都不至于现在那么丑
    Retas
        20
    Retas  
       2023-04-06 16:51:01 +08:00
    建议是多看其他类似的产品设计,参考一下(抄一下),现阶段死扣颜色、阴影细节啥的意义不大。等参考多了再找灵感也不迟
    twlsoft
        21
    twlsoft  
       2023-04-06 17:15:49 +08:00
    创建 /加入房间这个完整的功能,操作的用户体验有点不符合常理(个人感觉。

    倒是创建密码房间这个功能更正常一点
    iamtsm
        22
    iamtsm  
    OP
       2023-04-07 09:10:55 +08:00
    @chrosing 可能是 bug 哈哈哈
    iamtsm
        23
    iamtsm  
    OP
       2023-04-07 09:11:29 +08:00
    @duan602728596 大佬的建议很好,这些问题已经大部分调整好了
    iamtsm
        24
    iamtsm  
    OP
       2023-04-07 09:13:23 +08:00
    @twlsoft 我个人感觉也是有一点,但是暂时没想到很好的交互方式,就保留以前的逻辑了
    iamtsm
        25
    iamtsm  
    OP
       2023-04-07 09:18:15 +08:00
    @Retas 之前看过一部分类似的国内外的项目,这个新版的总体下来我还是参照国外的一些 ui ,然后按照自己的想法改了一些
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1780 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:32 · PVG 00:32 · LAX 09:32 · JFK 12:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.