这是一个创建于 670 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近有人吐槽说我的示例网站 ui 很丑，有没有大佬给点建议或者方向，可以让我我找找优化灵感
有好的想法建议，也可以提 issue
 |
1
723X 2023-02-21 12:06:19 +08:00 via Android
图标先统一样式再说
|
 |
2
think2011 2023-02-21 12:20:53 +08:00
布局、交互没太大问题，配色太杂了
|
 |
3
s04 2023-02-21 12:26:15 +08:00  1
Fiverr 上雇个 UI 设计师给你做 UI ，或者自己找同类软件参考。
|
 |
4
darkengine 2023-02-21 12:26:25 +08:00
颜色选得很怪，例如文字聊天界面，这个底色跟黑色字体放一起，对比太低了。
|
 |
5
zapper 2023-02-21 12:28:26 +08:00
|
 |
9
wasd6267016 2023-02-21 12:36:10 +08:00
1 两个白色按钮太丑了 看不清里面的字
2 图标有的是拟物的有的是极简的 3 背景颜色太丑了 可以去配色网站找色彩 （ 只是主观建议 不是批评哈 ） |
|
10
darkengine 2023-02-21 12:38:43 +08:00
|
 |
11
alne 2023-02-21 12:39:01 +08:00 1
多看看优秀设计
你自己都感受不到，说明审美水平不行，得多看 |
 |
12
iamtsm OP @wasd6267016 多谢建议，我尝试改一下配色，和图标
|
|
13
iamtsm OP @darkengine 多谢，我学习下
|
 |
15
yinchunde 2023-02-21 12:49:07 +08:00
单纯的去抄就行了，去 https://dribbble.com/ 。
|
 |
17
unnamedhao 2023-02-21 13:24:32 +08:00
Midjourney 试试
|
 |
18
leejnull 2023-02-21 13:37:18 +08:00
推荐一个国内的 https://mastergo.com/community/
|
 |
19
callmesmc 2023-02-21 13:41:43 +08:00 via iPhone
实在不行就从系统 UI 取色吧。而且为啥要弄那么多种背景色，设计不来可以弄得简单一点，多做多错...
|
 |
20
hzxxx 2023-02-21 13:50:34 +08:00
以合作项目为由，找个学生来设计吧，大家一起进步，应该还是能找到的，我以前毕设就是跟别人合作的，她设计，我实现
|
 |
21
gaobh 2023-02-21 14:05:30 +08:00
大背景改成白底，按钮改成黑底白字。都是黑白配色就好点。
|
 |
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 最后吐槽下🤣交互问题，很简单的东西弄的看起来好复杂，不过慢慢来吧，处理视觉问题还是要比处理代码问题简单多了 |
|
23
wemadefoxmoon 2023-02-21 15:45:43 +08:00
@wemadefoxmoon 捉虫 不擅长视觉设计的情况下🥲
|
 |
24
clf 2023-02-21 15:47:42 +08:00
你这个配色有点……
|
|
25
iamtsm OP @wemadefoxmoon 学到了，多谢大佬
|
 |
26
shenhualv7 2023-02-21 16:02:11 +08:00 via Android 1
我的经验是少用文字多用图标，背景只选白或黑或上纹理，要不就是低饱和度的颜色，图标和排版风格统一，动效和不透明度阴影设置一下，基本就不错了
|
 |
27
xiaohouzhi 2023-02-21 16:35:54 +08:00
术业有专攻，你还是找个设计师帮你优化一下吧
|
 |
28
zxCoder 2023-02-21 16:41:24 +08:00
抄。。。
|
 |
29
hello00001 2023-02-21 17:02:52 +08:00
确实很丑
|
 |
30
Thecosy 2023-02-21 17:10:33 +08:00
1 ，颜色
2 ，比例不对 |
 |
31
yawenimy122 2023-02-21 17:15:42 +08:00
不单是 UI 丑，设计也是过时了，加上细节没做好，不论功能性，看上去是大学生的期末作业一般
|
|
32
yawenimy122 2023-02-21 17:17:12 +08:00
建议可以花点小钱去 tb 买个模版或者写好的框架，套上自己的业务代码就行，比较实用省时间
|
 |
33
throns 2023-02-21 17:29:11 +08:00 via iPhone
可以考虑把 layui 换掉，这个一般用来开发后台应用。可以看一下国内应用截图：uinotes.com 和国际应用截图：mobbin.com 找找灵感。
|
|
34
iamtsm OP 感谢各位大佬们的建议，我准备开始改版了，到时候做出来了再给大家看看
|
 |
35
Skifary 2023-02-21 18:44:33 +08:00
网页端接入一下样式库例如谷歌的 Material Design 的实现 https://github.com/material-components/material-web#readme 和 https://github.com/mui/material-ui
这些库提供了丰富的组件和统一的样式（包括 icon ），让开发者可以专注于业务 |
 |
36
horizon 2023-02-21 20:08:15 +08:00
卧槽，确实丑。。换个组件库吧
|
 |
37
molvqingtai 2023-02-21 20:22:33 +08:00
看得出来很用心在做特效了，不过确实有点丑，找个好看点的 UI 框架吧
|
 |
38
Echo28 2023-02-21 23:07:01 +08:00 via iPhone
找不到重点，配色也存在问题
设计入门可以看看《写给大家看的设计书》，了解一些基本的规则 |
 |
39
netabare 2023-02-22 01:03:05 +08:00 via Android 1
我觉得丑其实是次要的，让人没法很好的理解该怎么操作才是大问题。
比如说 linux 下的很多程序界面丑出了天际线，但是交互逻辑其实蛮直观的，这种也挺好。 |
 |
40
hoopan 2023-02-22 09:30:47 +08:00
我一般找喜欢的组件库或现成的模板，设计不来
|
 |
41
isnullstring 2023-02-22 09:32:15 +08:00
没看懂怎么用，配色有主次，引导用户焦点
|
 |
42
KillPaul 2023-02-22 11:16:21 +08:00
作为程序员你已经接触了无数好产品了，但是盲猜你从来不会去关注一个优秀的页面为什么用户体验做得那么好，如果培养一下这方面的关注度，你不需要特地去找“灵感”这种东西的
|
 |
43
klight 2023-02-22 11:20:04 +08:00
emmm...莫非是手撸出来的？
没有好的设计稿的话建议找个好点的 UI 库诶，推荐试试 daisyUI 颜色太杂乱，如果不太会配色的话模仿下各网站和软件的深色模式和浅色模式，吸他配色也是可以的 图标不统一，有些是线框有些是填充，有些是拟物有些是极简 视觉没有重点... 随便写写的话抄抄别人的就行，真要深究的话找找视觉规范和设计语言吧 |
|
44
iamtsm OP 感谢大家非常真切认真的反馈，后面我好好培养下设计思维，另外 ui 和样式改版已经在进行中了... 多谢大家
|
 |
45
duan602728596 2023-02-22 19:06:48 +08:00
1. 动画太慢了，时间建议在 0.3s-0.5s 之间
2. 最下面的弹出层建议切换到另一个时关闭当前的，弹出好几个还要用户自己一个一个关闭 3. 最下面的动画和高亮配合的时间不是很好 4. 图标风格不一致，颜色不一致 5. 图标颜色和背景颜色接近，需要仔细看才能看清，很不方便 |
Select Language