[果汁排行榜]连续 2 次更新,配色真是太难了,请大家给点意见!

2020-06-07 14:21:17 +08:00
 guoliguozhi03

11 天前,抽空将 果汁排行榜 做了简单更新,便收到了扎心(很有用)的反馈, 具体见 https://support.qq.com/products/27320/post/159115178237141070/

于是乎,又接着做了二次改版,不得不说配色真是一门技术活,总感觉还是有点怪怪的,

大家帮忙看看http://guozhivip.com/rank/

给提一点建议,有没有懂设计的人,欢迎深度吐槽哈~

3121 次点击
所在节点    分享创造
20 条回复
yuuko
2020-06-07 17:08:26 +08:00
我还真以为是果汁呢,是我误会了
LZSZ
2020-06-07 17:18:55 +08:00
还是感觉怪怪的 配色有点辣眼睛
meisen
2020-06-07 17:26:01 +08:00
楼主要不要考虑不要大色块?想想 Windows8 为何那么短 M 就被取代了~

归类就蛮好的。
Depth
2020-06-07 17:31:07 +08:00
https://colordrop.io/
网站是分色系,你这个网站用的颜色太多了,导致感觉 花里胡哨的。挑几个同色系颜色,进行以下分布分配就行。
Spaike
2020-06-07 17:43:48 +08:00
配色很辣眼睛,提供几个建议:1.不配色,用大号字体和 icon 组合作为单个 card 。2.列表式布局就如百度热搜+来源 icon 。然后我觉得这个榜单不错啊,but 榜单一多消费性就会变弱(用户很难选去看什么),比如你抽十多二十个热门内容出来先展示?
guoliguozhi03
2020-06-07 18:14:44 +08:00
@yuuko 哈哈,抓住一吃货
guoliguozhi03
2020-06-07 18:15:25 +08:00
@LZSZ 是的,太难了,找不到感觉了
guoliguozhi03
2020-06-07 18:30:28 +08:00
@meisen 嗯嗯,感谢建议,我仔细考虑一下哈
guoliguozhi03
2020-06-07 18:55:57 +08:00
@Depth 感谢,这个配色的我也有在用,主要是想用不同颜色把不同类别的区分开,理论上颜色不超过 3 种就还好,但这一时半会还没有想到好的搭配解决方案
guoliguozhi03
2020-06-07 19:09:37 +08:00
@Spaike 确实刺眼些,不配色感觉无法区分类别,配色主要是为了把相同类别的用同一色系归类;也想过整体用灰暗色系,但感觉有些人可能会觉得太过朴素,所以暂时就先这么将就上了;后面打算把颜色控制在 3 种色系以内循环使用试一下,可能就没那么花哨刺眼了;至于内容多是多了些,但做了分类导航可按需使用,这个我感觉应该还好吧

再次感谢您的建议哈
beastk
2020-06-07 21:52:34 +08:00
颜色最好不要超过四种,要不然就感觉进了菜市场一样,太杂,太刺眼
guoliguozhi03
2020-06-07 23:56:41 +08:00
@beastk 是的,太多了就感觉不舒服了
YangYang666
2020-06-08 09:33:54 +08:00
icon 主体识别性比较强,文字作为辅助,参考这个: https://raw.githubusercontent.com/Yisreal/picture/master/0608.jpg
guoliguozhi03
2020-06-08 09:57:38 +08:00
@YangYang666 这个链接看不了呀,可否邮箱发一下: guozhinav@qq.com
感谢建议
YangYang666
2020-06-08 10:19:35 +08:00
guoliguozhi03
2020-06-08 10:50:48 +08:00
@YangYang666 已看到,感谢感谢
alanslow
2020-06-09 15:54:05 +08:00
个人觉得配色辣眼,一般一个平面视觉效果,不超过 3 种颜色最佳。你这还不如把底图配色全部去掉,换成每个网站的 logo 作为底图虚幻,鼠标悬停即高亮。尽量扁平化。
guoliguozhi03
2020-06-09 22:59:28 +08:00
@alanslow 是的,已经调整了一版本了,相对灰暗一些了;现在其实就两种大的色系,一种偏蓝(蓝 /灰蓝),一种偏橙(橙 /粉橙),然后页面大背景默认白色;虽然还是有些怪,一时也想不到好的搭配了。

换成每个 LOGO 的话即使虚化估计那色彩更多更花了,毕竟 100 多个榜单呢,我再想想吧,感谢您的建议
3x1415926535
2020-06-11 16:18:11 +08:00
直接拿 logo 放大做背景 给模糊效果当蒙版
filter:blur;mix-blend-mode: overlay;
guoliguozhi03
2020-06-11 16:32:00 +08:00
@3x1415926535 感谢大神指教,我试试看

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/679406

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX