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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 598 天前的主题，其中的信息可能已经有所发展或是发生改变。

关于我上次提了一个 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

2023-04-06 09:19:56 +08:00

没看过前面的界面长什么样，可以截个图对比一下看看吗？

新版本的感觉挺好看的，是偏向手机端的 ui 吗，我觉得 pc 端可能没适配好，整个布局都在上面 30%的位置，下面 70%是空白，看起来怪怪的

iamtsm

2023-04-06 09:25:24 +08:00

@sss15 我去把旧版也放出来，大家对比下，再给点建议

PEALFK

2023-04-06 09:37:55 +08:00

我感觉问题出在了自我的审美上，如果自己审美不好的情况下，可以尝试直接使用现有 UI 库的组件

xiaojun1994

2023-04-06 09:38:57 +08:00

阴影太生硬

iamtsm

2023-04-06 09:41:06 +08:00

原版本 : https://test.iamtsm.cn/

0703wzq

2023-04-06 10:15:42 +08:00

老实说，现在依然很丑。。。阴影、配色。。

0703wzq

2023-04-06 10:16:14 +08:00

建议直接换已有的开源 UI 组件库。。

LaGeNanRen

2023-04-06 10:39:25 +08:00

你这个优化后的右上方的发送文字按钮，竟然连 icon 和文字都对不齐 = =
我作为 ui 表示第一眼就难受了

aydd2004

2023-04-06 11:50:39 +08:00

没有审美这种事情不是发个帖就可以搞定的。

hevi

2023-04-06 11:52:36 +08:00

用 tailwindcss 跟它的组件库随便搭搭试试吧..
阴影太离谱了

KevinDo2

2023-04-06 11:56:25 +08:00

好了点，但不多。
阴影： https://shadows.brumm.af/
我不明白，中间那两个蓝色的，怎么做的左边的图标和发送文件按钮都不居中，右边的图标不居中但按钮又是勉强居中的？

foufoufm

2023-04-06 12:02:20 +08:00

这个帖子有点像这个对话：

“头太疼，怎么治啊？”

“吃点头疼药就好了。”

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

回到你的问题，更好的答案是你得明确自己想让用户使用场景的优先级，而不是单纯思考 UI 的样式问题。

iamtsm

2023-04-06 12:13:54 +08:00

@KevinDo2 收藏了，到时候我看看再调整下

iamtsm

2023-04-06 12:15:33 +08:00

@LaGeNanRen 这些细节到时候还得要优化下😂

darkengine

2023-04-06 12:21:30 +08:00

提个功能问题啊，为啥在“公共聊天频道”需要“请先加入房间，才能发言哦”

chrosing

2023-04-06 12:50:43 +08:00

为啥时间是未来

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

2023-04-06 16:08:33 +08:00

6. 宽屏上，公共聊天消息提示的红点会离 button 很远，怪不得看起来很奇怪

wunonglin

2023-04-06 16:25:33 +08:00

直接用 vuetifyjs 啥都不改都不至于现在那么丑

Retas

2023-04-06 16:51:01 +08:00

建议是多看其他类似的产品设计，参考一下（抄一下），现阶段死扣颜色、阴影细节啥的意义不大。等参考多了再找灵感也不迟

twlsoft

2023-04-06 17:15:49 +08:00

创建 /加入房间这个完整的功能，操作的用户体验有点不符合常理（个人感觉。

倒是创建密码房间这个功能更正常一点

iamtsm

2023-04-07 09:10:55 +08:00

@chrosing 可能是 bug 哈哈哈

iamtsm

2023-04-07 09:11:29 +08:00

@duan602728596 大佬的建议很好，这些问题已经大部分调整好了

iamtsm

2023-04-07 09:13:23 +08:00

@twlsoft 我个人感觉也是有一点，但是暂时没想到很好的交互方式，就保留以前的逻辑了

iamtsm

2023-04-07 09:18:15 +08:00

@Retas 之前看过一部分类似的国内外的项目，这个新版的总体下来我还是参照国外的一些 ui ，然后按照自己的想法改了一些

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

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