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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

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

原来的

现在的

重写的

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

第 1 条附言 · 2017-08-07 09:52:46 +08:00

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

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

第 2 条附言 · 2017-08-07 10:12:15 +08:00

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

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

第 3 条附言 · 2017-08-07 10:29:57 +08:00

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

第 4 条附言 · 2017-08-07 10:54:38 +08:00

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

新的层次好一点的界面～

悬浮后会加强阴影～

第 5 条附言 · 2017-08-07 16:32:55 +08:00

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

第 6 条附言 · 2017-08-08 07:45:38 +08:00

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

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

第 7 条附言 · 2017-08-08 09:33:16 +08:00

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

第 8 条附言 · 2017-08-08 10:27:17 +08:00

修改图标大小～

第 9 条附言 · 2017-08-08 12:35:26 +08:00

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

第 10 条附言 · 2017-08-10 11:14:20 +08:00

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

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

重写

难看

原来

感觉

119 条回复 • 2017-08-08 12:41:53 +08:00

1 2

❮

❯

anyele

2017-08-07 09:29:02 +08:00

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

Kilerd

2017-08-07 09:29:15 +08:00 via iPhone

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

Rice

2017-08-07 09:30:02 +08:00 via iPhone

程序员审美

codex

2017-08-07 09:30:15 +08:00

新的好看

nicevar

2017-08-07 09:30:47 +08:00

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

grayon

2017-08-07 09:31:41 +08:00

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

zcreg

2017-08-07 09:32:04 +08:00

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

limard

2017-08-07 09:32:05 +08:00

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

queuey

2017-08-07 09:32:21 +08:00 via iPhone

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

xiaoerDev

2017-08-07 09:34:26 +08:00

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

yinxingren

2017-08-07 09:34:49 +08:00

真的丑。。。

echo111222

2017-08-07 09:34:53 +08:00 via Android

你紫色还加重了。。。

mscb

2017-08-07 09:36:46 +08:00

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

chairuosen

2017-08-07 09:36:47 +08:00

辣眼睛

Leafove

2017-08-07 09:38:34 +08:00

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

TimePPT

2017-08-07 09:43:21 +08:00 via iPhone

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

yjd

2017-08-07 09:45:10 +08:00

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

lixiangzaizheli

2017-08-07 09:45:56 +08:00

看个 jb。。。

Charkey

2017-08-07 09:50:20 +08:00

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

koalli

2017-08-07 09:52:41 +08:00

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

AInoob

2017-08-07 09:53:54 +08:00

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

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

xd314697475

2017-08-07 09:56:12 +08:00

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

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

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

explon

2017-08-07 09:56:42 +08:00

难看 1.0 升级难看 2.0

learnshare

2017-08-07 09:57:14 +08:00

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

AInoob

2017-08-07 09:59:03 +08:00

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

AInoob

2017-08-07 09:59:38 +08:00

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

zpf124

2017-08-07 09:59:51 +08:00

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

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

rocksolid

2017-08-07 10:01:11 +08:00

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

AInoob

2017-08-07 10:07:27 +08:00

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

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

nadoo

2017-08-07 10:07:47 +08:00

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

kx5d62Jn1J9MjoXP

2017-08-07 10:09:59 +08:00 via Android

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

ii4Rookie

2017-08-07 10:10:07 +08:00

粗了。

AInoob

2017-08-07 10:13:24 +08:00

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

qiuai

2017-08-07 10:14:05 +08:00

配色问题.其他倒是还好

AInoob

2017-08-07 10:14:15 +08:00

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

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

miyalee

2017-08-07 10:14:22 +08:00

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

AInoob

2017-08-07 10:15:06 +08:00

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

AInoob

2017-08-07 10:15:59 +08:00

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

BlackCat02

2017-08-07 10:24:53 +08:00

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

sobigfish

2017-08-07 10:26:57 +08:00

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

AInoob

2017-08-07 10:30:41 +08:00

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

AInoob

2017-08-07 10:31:12 +08:00

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

AInoob

2017-08-07 10:32:36 +08:00

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

newtype0092

2017-08-07 10:35:05 +08:00

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

AInoob

2017-08-07 10:38:12 +08:00

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

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

byron

2017-08-07 10:45:15 +08:00

你需要一个设计师。

bojackhorseman

2017-08-07 10:51:14 +08:00

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

AInoob

2017-08-07 10:55:15 +08:00

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

AInoob

2017-08-07 10:55:38 +08:00

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

Lothar

2017-08-07 10:58:02 +08:00

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

maplerecall

2017-08-07 10:59:26 +08:00 via Android

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

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

sodaless

2017-08-07 11:53:49 +08:00

真的挺难看的

gaojianye11

2017-08-07 11:59:46 +08:00

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

ipconfiger

2017-08-07 12:03:09 +08:00

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

AInoob

2017-08-07 12:06:42 +08:00

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

AInoob

2017-08-07 12:06:51 +08:00

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

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

AInoob

2017-08-07 12:07:40 +08:00

@sodaless 同意

AInoob

2017-08-07 12:08:05 +08:00

@gaojianye11 嗯呢，我试试～

AInoob

2017-08-07 12:08:18 +08:00

@ipconfiger =。= 嗯呢～

Le4fun

2017-08-07 12:22:23 +08:00

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

akira

2017-08-07 12:37:56 +08:00

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

列表是万能的

hst001

2017-08-07 12:53:18 +08:00

有点辣眼睛

CRight

2017-08-07 12:56:03 +08:00 via iPhone

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

viosey

2017-08-07 13:03:10 +08:00

没有深得 MD 的精髓...

xiaozi

2017-08-07 13:04:09 +08:00

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

aifang

2017-08-07 13:10:40 +08:00

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

muren

2017-08-07 13:26:32 +08:00

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

zhea55

2017-08-07 13:37:08 +08:00

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

vacker

2017-08-07 13:48:55 +08:00

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

zoffy

2017-08-07 13:52:31 +08:00

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

LYEHIZRF

2017-08-07 14:12:07 +08:00

都很难看

KevZhi

2017-08-07 14:24:02 +08:00 via iPhone

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

BlackCat02

2017-08-07 14:32:22 +08:00

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

ninqq

2017-08-07 15:03:14 +08:00

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

AInoob

2017-08-07 15:24:32 +08:00

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

AInoob

2017-08-07 15:24:51 +08:00

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

AInoob

2017-08-07 15:26:20 +08:00

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

AInoob

2017-08-07 15:28:03 +08:00

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

AInoob

2017-08-07 15:40:12 +08:00

@KevZhi 现在好多了吧～

jasonpeng0322

2017-08-07 15:43:31 +08:00

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

AInoob

2017-08-07 16:33:57 +08:00

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

crazycen

2017-08-07 17:11:13 +08:00 via iPhone

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

zhoulouzi

2017-08-07 17:19:18 +08:00

你选颜色有问题。

cizixs

2017-08-07 18:16:23 +08:00

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

KevZhi

2017-08-07 21:15:55 +08:00 via iPhone

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

KevZhi

2017-08-07 21:17:26 +08:00 via iPhone

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

Owis

2017-08-07 21:31:41 +08:00

配色问题

patx

2017-08-07 21:43:25 +08:00 via Android

感觉眼睛要瞎了

zangbob

2017-08-07 22:10:55 +08:00

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

ffx0s

2017-08-07 22:48:59 +08:00

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

gearkey

2017-08-08 00:07:18 +08:00

emm，，show the pic，

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

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

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

gearkey

2017-08-08 00:14:38 +08:00

AInoob

2017-08-08 02:29:21 +08:00

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

AInoob

2017-08-08 02:30:27 +08:00

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

AInoob

2017-08-08 02:31:54 +08:00

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

AInoob

2017-08-08 02:45:04 +08:00

@gearkey 太感谢了！

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

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

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

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

lhc70000

2017-08-08 04:33:31 +08:00

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

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

chyiz

2017-08-08 05:04:29 +08:00

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

AInoob

2017-08-08 05:29:24 +08:00

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

100

AInoob

2017-08-08 05:33:41 +08:00

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

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

1 2

❮

❯