为什么重写的界面这么难看。。。

[AInoob]

本着简洁的原则，却感觉写了一部分后貌似比原来的难看了。。。 莫名的感觉 UI 这东西很神奇。。。

原来的

现在的

感觉这样下去，重写的动力都没有了，555

哈哈，如果都挺难看那我就放心了。。。这样更新版本也不会被喷的更惨了。。。

新的版本支持自定义颜色，所以如果不喜欢骚紫色可以自己切换。

新的，感觉受了建议，把图标隐藏的确好看很多～



然后配色是可以自己调的～

完成 Chrome 图标的 svg 单色任务～

听了大家的建议，感觉收获很多，本来烦的快哭了～

新的层次好一点的界面～



悬浮后会加强阴影～

先撤退了，回头再更新，现在的样子（颜色是可以自定义的～）：

几经修改，现在的效果是这样的





还可以自定义配色，这里我配了个红黑的～

把 shadow 也从灰色改成自定义的主颜色了～

修改图标大小～

现在拓展之间的隔断的粗细一致了～

现在差不多定下来了～ Grid 模式就是这样，然后列表模式还要弄



下面这个是修改 Group 的，啦啦啦

[anyele]

明显比原来的好看, 不过看起来都扎眼

[Kilerd]

这个。。。。。。。。。。。。。。。。。。。。。。

[Rice]

程序员审美

[codex]

新的好看

[nicevar]

这个重没重写区别不大，都一样没法看

[grayon]

配色问题，主次不分明，现在一片紫

[zcreg]

这么骚的颜色，你竞然做出两个版本

[limard]

二管家？鼠标移到插件图标上之后再显示操作按钮呢？

[queuey]

能把那几个按钮隐藏起来么，看着好扎眼。

[xiaoerDev]

试着把 icon 改细一些；注意一下对其和模块之间的间距。

[yinxingren]

真的丑。。。

[echo111222]

你紫色还加重了。。。

[mscb]

感觉还可以吧，就是颜色有点扎眼

[chairuosen]

辣眼睛

[Leafove]

典型的程序员设计的 UI,我来设计估计更丑

[TimePPT]

配色问题，建议找个配色网站挑一套

[yjd]

新的丑。特别是紫色还加重了。

[lixiangzaizheli]

看个 jb。。。

[Charkey]

边上几个小按钮太耀眼了。。一般都是隐藏或者灰吧

[koalli]

把间距多一点会不会舒服一点...这样挤着看着有点堵...然后这些图标都是代表什么意思...是不是加上描述会好点？

[AInoob]

@koalli 加上描述的确会好些，不过的确没有位置放了，目前是可以鼠标悬浮后提示

间距的问题也是我一直纠结的，一方面希望放更多的拓展，一方面希望大间距好看

[xd314697475]

缺乏设计基础，想设计出比较好看的界面有主要注意两点：颜色，对齐

颜色参考 google material design 的配色方案：
https://material.io/guidelines/style/color.html#color-color-palette （无需科学上网）

对齐的话：
去找一个现成的界面图，在他的基础上改改
1.左侧的大图标统一大小，或者放在一个固定大小的背景方框上，保证整体对齐。
2.右侧的三个图标，调整高度 #对齐 左侧大图标
3.适当采用居中

[explon]

难看 1.0 升级难看 2.0

[learnshare]

按钮隐藏掉，hover 的时候显示出来
图标缩小为 30%，放到跟原来一样大的格子里
颜色清淡一点

[AInoob]

@learnshare
嗯呢，正在改，感觉的确是好看不少，操作上也没有我原来想的差

[AInoob]

@xd314697475 感谢！颜色可以自定义，所以我回头找一个默认的就可以了，对齐这个的确是问题，我改改～

[zpf124]

比之前好的地方，区块划分，排版布局，item 的规格大小都很统一了
不如的地方，主次感觉不清晰了， 导航条和内容感觉像是同一个层级的东西了。

另外 不论新旧 ，chrome 图标风格有点违和， 还比别的大一圈。

[rocksolid]

你这图标都不统一，有拟物的也有扁平的

[AInoob]

@zpf124 哈哈，主次这个你都发现了，好厉害！的确，新的我想的是 Navigator 直接白色，和新的内容融为一体。。。然后的确觉得有点不适应。。。

chrome 图标这个我也是很烦恼。。。在想着要不要找单色的 svg。

[nadoo]

先把下面各种小按钮都改成灰色试一下，现在色彩太杂乱了

[kx5d62Jn1J9MjoXP]

没人提到阴影吗？原来的这个是不是用了 Google 的东西？导航和按钮都有阴影，明显好看很多。
颜色上原来哦清淡一点
底下的大图标应该是你改的好看一些

[ii4Rookie]

粗了。

[AInoob]

@nadoo 恩，会把 Chrome 彩色图标统一的～

[qiuai]

配色问题.其他倒是还 好

[AInoob]

@ssynhtn 嗯呢，原来照搬的 MD，结果靠着我恶心的 UI 技巧，愣是弄得很难看，哈哈

我也觉得阴影挺好，接下来会增加的～

[miyalee]

这 UI 应该是 vuetify，虽然没看出更多功能，不过感觉这个框架不太适合

[AInoob]

@qiuai 哈哈，配色可以自定义的～

[AInoob]

@miyalee 没用 vuetify，原来的是 md 神马的，新的是自己写的 css

[BlackCat02]

按钮隐藏了好多了。。之前按钮全显示出来什么鬼。。

[sobigfish]

实在不知道怎么配色就黑白两色 来弄

[AInoob]

@BlackCat02 嗯呢，的确好看不少，主要的是使用起来没有我想象中那么麻烦，所以就准备隐藏这些按钮了～

[AInoob]

@sobigfish 嗯呢～ 支持自定义颜色，所以这个我就随便改改～

[AInoob]

@limard 已经修改！ 感觉的确很好，超级感谢～

[newtype0092]

我觉得颜色没问题，就是给人的感觉太肉，图标、字体都感觉很胖，加上应用图标也大，整个都堆在一起。。。
这种单色风格，我觉的留白大一点才显得“高大上”，之前的比现在的留白更多，显得更清爽，至于颜色其实都还好。

[AInoob]

@newtype0092 恩，太肉的一个原因是因为图片被放大了，其实仅仅只有 760px，这里显示起来已经超过 1000px 了。

加上 svg 那些直接搬的 md icon，我就不准备改了～

[byron]

你需要一个设计师。

[bojackhorseman]

前一秒我还在想这张图貌似在哪里见过，后一秒就突然意识到这是之前我用过的一个管理 chrome 插件的插件。鲜艳的颜色让我印象深刻哈哈。

[AInoob]

@byron 大家这么好的建议很给力～

[AInoob]

@bojackhorseman 哈哈，用过。。。看来已经删掉了呀～ 555

[Lothar]

丑萌丑萌的，哈哈哈哈哈哈

[maplerecall]

图标太大，留白太少缺少呼吸，另外犹豫图标风格差距太大并且没有分割，看起来比较凌乱…另外就交互本身来说，图标本身的识别度太低，除非只有个人用，否则建议展示名称，这样还能自然的多出一些分割和留白…

话说安卓用第三方启动器把抽屉密度调高、去掉文字标签大概就是这种效果，花花绿绿密密麻麻，看起来一页很多东西但反而难找了…

[sodaless]

真的挺难看的

[gaojianye11]

图标下面再加一个名称，然后间距调大一点，，，图标可以有一点点圆角，

[ipconfiger]

虽然原来的 gay 里 gay 气的, 但是感觉还算顺眼

[AInoob]

@Lothar 哎，要是能让人觉得萌，也是可以的～

[AInoob]

@maplerecall 哎，的确不展示文字有弊端，但是关键 Chrome 拓展文字都挺长，展示的话也很恶心。。。

解决的方法是切换成列表模式，如图

[AInoob]

@sodaless 同意

[AInoob]

@gaojianye11 嗯呢，我试试～

[AInoob]

@ipconfiger =。= 嗯呢～

[Le4fun]

就是，按钮看着好晃眼，特别是 chrome 那个

[akira]

没有 ui 技能的人设计 ui 的时候，尽量直接使用文本，少用哪些华丽花哨的颜色和布局。

列表是万能的

[hst001]

有点辣眼睛

[CRight]

二管家能不能有 Firefox 版啊……奢求一下

[viosey]

没有深得 MD 的精髓...

[xiaozi]

我也来放个花花绿绿的 http://tool.lu/

[aifang]

颜色太扎眼，颜色浅一点会好些吧，（非专业人士）逃。。。。

[muren]

本着三色原则去搞吧，太刺眼了

[zhea55]

密密麻麻的，一看就想关闭了。

[vacker]

主色使用得太多，当然看起来很不舒服！

[zoffy]

对齐、对比、亲密性、颜色的坑都让你踩到了

[LYEHIZRF]

都很难看

[KevZhi]

图标排布的问题，要么统一矩形外框，要么去掉矩形，要么列表式排列，要么学老罗打格子

[BlackCat02]

@AInoob 列表的话，样式可以学习一下 chrome 的插件管理啊

[ninqq]

把颜色换成黑色吧 会好很多

[AInoob]

@Le4fun 恩，后面已经修改了～

[AInoob]

@akira 嗯呢，支持列表模式的～

[AInoob]

@CRight 现在正在重写，FF 的版本不是很确定，我等写的差不错了就测试一下看看兼不兼容吧。最近写这个不是很开心，本来都因为这恶心的 UI 快放弃更新了，哈哈

[AInoob]

@BlackCat02 有列表模式的，看#56 楼～

[AInoob]

@KevZhi 现在好多了吧～

[jasonpeng0322]

@AInoob 可以试着把 border 调细一点，而且似乎横向的和纵向的颜色不一样？

[AInoob]

@jasonpeng0322 你看看附言 5 的效果，肿么样？

[crazycen]

有几个图标多出来的框框，不知何意！

[zhoulouzi]

你选颜色有问题。

[cizixs]

审美错了，越努力越丑啊！
所以，系统性地提升审美是关键。

[KevZhi]

比上一版好多了，有能力的话重绘图标吧，因为每个图标风格完全不一样，很扎眼，要么就放弃大图标模式。
往成熟的设计靠总不会错

[KevZhi]

Main Color 和 Sub Color 两个取色块对齐
Pixel Perfect 还有很多要做的

[Owis]

配色问题

[patx]

感觉眼睛要瞎了

[zangbob]

楼主你听我的，你需要一个专业的美工。。。程序员的审美完全不成的。。

[ffx0s]

用纯色试试 五颜六色 不知道哪里才是重点

[gearkey]

emm，，show the pic，

+ 整合导航
+ 筛选器简化
+ 项目卡片化、整合简化操作

粗略的图，细节还要再做，比如应该更大的卡片间距，
没有试用，一些理解可能不到位，轻喷

[ued]( http://ouborap37.bkt.clouddn.com/IMG_20170807_235231.png)

[gearkey]

<img src="http://ouborap37.bkt.clouddn.com/IMG_20170807_235231.png"/>

[AInoob]

@cizixs 审美一般关键不会设计，还好 v2 大家很热心地帮忙～

[AInoob]

@KevZhi 图标这个是 Chrome 软件自带的，这个不是一个商业软件，所以肯定没精力自己做图标的，选色对齐这个是个好建议！马山更改！

[AInoob]

@zangbob 小小软件，就不找专业的美工了～

[AInoob]

@gearkey 太感谢了！

整合导航这个美感上的确很有效，操作上感觉也和现在的不相上下（第一次进入 AutoState 或者 Manage 容易了，进入后互相切换难了），所以我就用你的思路了～

简化筛选器这个是我没有说清楚，enable，disable，和 undo 都是动作，所以如果放到 select 里面，效率会下降太多，加上这个是实时筛选的，所以没有必要弄个执行。

卡片化这个真的好漂亮！感觉会增加这个布局的方案，不过不会替代，因为原来的虽然密集，但是相对的会展示更多的拓展，新的这个漂亮而且简洁～

超级谢谢！你就是传说中的高级 UI 设计师吧～

[lhc70000]

1. padding 很重要，边距大了立刻显得高大上。
2. 最多两种颜色，不重要的正文 /控件多用黑 /灰色。

还用这个绿色和排版，我随便撸了一个供参考： http://www.lhc.moe/0807test.html

[chyiz]

Firefox 下类似的扩展 Extensor ( https://addons.mozilla.org/en-US/firefox/addon/extensor/) ，一开始界面也是难看得不行。感觉这种界面是很难做。功能很多，元素内容也不可控。这货现在的设计已经比一开始进步很多了，给 LZ 一个参考吧。

[AInoob]

@chyiz 看到那个的排版，我就放心了，哈哈～ Chrome 上倒是有几个挺好看的，当时用户评论的时候有提到。

[AInoob]

@lhc70000 感谢！不过这个设计边角感觉有的方，有的圆，不知道是不是根据层级来选择的。

界面设计的是真的漂亮，不过我这个的限制是 760px 宽度，所以可能就参考 91 楼的设计了～