我的审美是不是出现了偏差,这个设计真的很丑吗?

V2EX = way to explore

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

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

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

在线预览: https://www.inbuff.cn/

已经有几个人让我删了重写了,是我的审美出了偏差?

设计参考: https://www.microsoft.com/design/fluent/

第 1 条附言 · 2018-08-08 13:16:28 +08:00

吸收了各位的意见,做了一点小调整:
![image]( https://i.loli.net/2018/08/08/5b6a7539bcc92.png)

黑色版本布局和色调有问题,
不知道各位老哥看看类似白色色调的怎么样:
https://dev.inbuff.cn/

第 2 条附言 · 2018-08-09 09:46:10 +08:00

Fluent Design 还是不适合我这种对设计一无所知的,照着抄都抄不好,
决定用 MD 去抄 Google 家的产品介绍,例如:
https://www.google.com/intl/zh-CN/about/products/
https://www.google.com/search/about/ ,
https://www.google.com/chrome/.
不过这种网站用图片的好多,完全不知道图片应该放什么从哪里找.

偏差

审美

image

重写

152 条回复 • 2018-08-10 09:15:44 +08:00

1 2

❮

❯

codepark

2018-08-08 12:20:33 +08:00

看下面的一大块紫很不舒服~ 而且文字如果对称下会好看点~ 我也觉得不好看

lamada

2018-08-08 12:26:35 +08:00

布局不平衡

nlysh007

2018-08-08 12:27:07 +08:00

讲道理对比度太高了... 要么你就一个色块占满屏幕

jydeng

2018-08-08 12:28:54 +08:00

确实不好看

agdhole

2018-08-08 12:28:55 +08:00

@codepark #1
@lamada #2
中间一大坨的原因?

agdhole

2018-08-08 12:29:06 +08:00

@nlysh007 #3 对比度是白色的问题吗?

greed1is9good

2018-08-08 12:35:38 +08:00

好乱的说。。。

sfqtsh

2018-08-08 12:36:41 +08:00 via Android

是的

learnshare

2018-08-08 12:38:01 +08:00

对比度过高，也就是说明暗差异很大。PHP 这一块过于明显，其他东西没有存在感

leekafai

2018-08-08 12:38:25 +08:00

fluent 的设计还是倾向无边界的，你的太卡片了。

nlysh007

2018-08-08 12:40:57 +08:00

@agdhole 白背景还好了，，上面的蓝黑对比，你还分了那么多项目，，

weberCd

2018-08-08 12:41:32 +08:00

突兀的一大块紫，有种压迫感

agdhole

2018-08-08 12:44:19 +08:00

@learnshare #9
@nlysh007 #11
@greed1is9good #7
看来布局有很大的问题

agdhole

2018-08-08 12:46:03 +08:00

@weberCd #12
@learnshare #9
@greed1is9good #7
@lamada #2
@codepark #1
稍稍调整了一下:
![image]( https://i.loli.net/2018/08/08/5b6a7539bcc92.png)

zcjfesky

2018-08-08 12:50:23 +08:00 via Android

排版逼死强迫症… 你先把元素的对齐弄整齐吧，这左一个右一个，左对齐的左边线还都全都不重叠…

intellectual

2018-08-08 12:53:21 +08:00

现在改了，改了的也不好看，但至少比第一次的好多了；
脑袋小，肚子大，且还突出，屁股也很累赘

intellectual

2018-08-08 12:54:14 +08:00

对比，比例，配色，留白，快接近一无是处了

chuhemiao

2018-08-08 12:55:20 +08:00

借楼： https://bsatoshi.com 这个真的丑吗？？

intellectual

2018-08-08 12:58:36 +08:00

@chuhemiao 这个 style 是数据展示的，一般般丑啦，如果 10 分打比方的话，这个是标准的 3-4 分；
lz 那个是美女不会化妆的 5.5 分变成 4 分了

agdhole

2018-08-08 13:01:01 +08:00

@intellectual #19
肚子不是应该大吗?
不是专业 UI,我是写后端顺便写点前端的,能具体说说什么问题吗?

PulpFunction

2018-08-08 13:01:35 +08:00

代码高亮风格

aliipay

2018-08-08 13:01:51 +08:00

看到一坨黑色的就不太舒服

34C

2018-08-08 13:01:59 +08:00 via iPhone

丑到爆，怎么对自己审美这么自信的

stargazer242

2018-08-08 13:02:47 +08:00

巨丑

lingo

2018-08-08 13:03:13 +08:00

@chuhemiao 你这是借楼硬广啊。不过右侧快讯的上下 border 重起来不好看

intellectual

2018-08-08 13:06:30 +08:00

@agdhole 肚子大当然没错，但得有货，你的肚子上就一大片空白，和一个恐怖的丑丑的 php 未设计的 LOGO，谁敢这么穿衣服。
而且比例还要舒适。如果小头爸爸挺个啤酒肚是不是也有点诡异？？？

如果不能一比一照抄，无设计基础的人千万不要创新...是的，就是这么因吹斯汀，千万不要自己创新

watzds

2018-08-08 13:07:21 +08:00

还可以，有一些漂亮的点。
不过内容单调，背景黑色太多了，有些好看的背景图片会好点

e8c47a0d

2018-08-08 13:10:37 +08:00

php 三个字带来少许心理阴影。其他，比较没有逻辑层次，难理解。

watzds

2018-08-08 13:11:00 +08:00

今天看到的这个网站不错，https://www.algolia.com//#schedule-demo

agdhole

2018-08-08 13:13:39 +08:00

@watzds #29 没改之前的 algolia 花花绿绿的,有些人觉得也太乱了

@e8c47a0d #28 布局有问题

@intellectual #26 php 的那个 logo 已经删掉了,改之后布局还是有很大问题吗?白色色调类似的您看看怎么样: https://dev.inbuff.cn/

qwertyzzz

2018-08-08 13:14:01 +08:00

为什么我觉得大体一看不去扣还行啊

loryyang

2018-08-08 13:15:21 +08:00

感觉色差太强烈了。。稍微柔和一点吧

agdhole

2018-08-08 13:17:10 +08:00

@loryyang #32 是和白色的对比太强烈还是黑色和青色的对比太强烈?

kevil

2018-08-08 13:18:44 +08:00

也没有巨丑吧。我提个建议，一个页面里不要有两种蓝色啦。

DobbyQ

2018-08-08 13:19:55 +08:00

蓝绿色的区块看着很难受。

intellectual

2018-08-08 13:20:43 +08:00

@agdhole 问题还是有的，但已经好多了，可以接受的。
如果是面对的是非商业用户的话，马马虎虎的也行，大家也没那么讲究

loryyang

2018-08-08 13:21:27 +08:00

@agdhole 都太强烈了。。。黑白因为都占据了半页的空间，所以对比特别强烈，你要不把其中一个颜色作为主色，再扩大一些

loryyang

2018-08-08 13:22:02 +08:00

另外，我觉得你不要用青色吧，换个其他和黑或者白比较接近的颜色

pinews

2018-08-08 13:22:11 +08:00

楼主的设计很好，其实很多人不是批评楼主的设计，而是在批评微软的设计。
但有一点，欧美风格网站使用中文字体很不协调

loryyang

2018-08-08 13:23:15 +08:00

个人感觉哦，仅供参考。。

intellectual

2018-08-08 13:26:29 +08:00

@agdhole 当然，现在的设计对比前面的设计风格是退步的，但和谐程度好了点；
前面的风格很棒，只是你还没有足够的设计能力去驾驭，所以折腾出来的页面很奇怪；
眼光跟得上，能力跟不上，加油哦

agdhole

2018-08-08 13:28:20 +08:00

@pinews #39 谢谢,我也发现了这个问题,中文放上去有点难看

@loryyang #38 谢谢,配色好多人都不喜欢,可是我觉得黑色配上青色的这个高对比简直是设计的精髓,会尝试改掉,考虑把黑色的先铺满屏幕,然后下来再用其他背景色去写主要内容

@intellectual #36 谢谢,会尝试继续优化

paloalto

2018-08-08 13:45:21 +08:00

这俩地方留白太多。文字不够，加图来凑。

paloalto

2018-08-08 13:45:58 +08:00

第二张图片地址错了，应该是

paloalto

2018-08-08 13:46:45 +08:00

操，怎么又错了，再次更正：

agdhole

2018-08-08 13:47:30 +08:00

@paloalto #44 谢谢,确实空的太大,加图片应该会好一点

paloalto

2018-08-08 13:47:35 +08:00

line-height 改大一下。

moresteam

2018-08-08 13:47:53 +08:00 via Android

我觉得还阔以

paloalto

2018-08-08 13:48:18 +08:00

上面图又错了。
更正：

e8c47a0d

2018-08-08 13:49:46 +08:00

其实就 UX 而言，比较不直观。我看了一分钟后，仍然不知道这个网站提供的是什么讯息和服务……而且字太小。

allgy

2018-08-08 13:51:12 +08:00

颜色搭配方面需要下功夫

Libby520

2018-08-08 13:54:07 +08:00

不懂技术，非程序员，自己瞎弄的，你看我这个颜色的搭配

https://www.dutype.com/

takato

2018-08-08 13:56:52 +08:00

UX 还行，配色和样式细节有一些微调空间。整体 OK

takato

2018-08-08 13:57:12 +08:00

比如按钮的位置间距这些

blaxmirror

2018-08-08 14:00:39 +08:00

感觉上呢有一些无意义的刻意设计，有点让我觉得刻意追求诸如“极简”“扁平”“ MaterialDesign ”的设计风格。
俗话说加法容易减法难，单就 47L 的那一部分来说，书籍这一块上的蓝色横线就没有什么意义，而且给我感觉是想要跟下面的内容块对齐，但其实两者又没有直接关系。横线太长而留白太多，跟右边的文字块又是互相割裂，下方内容块的阴影在这个背景下又克制的非常不明显，远看像是长方形上突出了一块。

建议在能力还没突破天际的时候学院派一些，配色我认为不是什么大问题，只是色块关系的处理不太好，LZ 应该重点去补一些版式设计的知识。以上，仅个人观点，审美很主观的，LZ 别太在意别人的看法。

zhaogaz

2018-08-08 14:09:42 +08:00

微软的那个，哪有一大块白色补丁啊；你那个书籍那一大块，整个一补丁

再一点。微软这个，没什么线条，基本上是靠背景图片以及剪短的文字作为布局。

人家整体的文字很少，并且大部分都有配图。没有配图的文字分布都很清晰；你看看你做的什么，补丁上面有 3 段文字。分不清主次。

如果说你需要的东西，和这个布局不太搭，就别用这个。

要么你就学学这个精髓。。。

兄弟明显模仿的不是很成功啊。。。

killerv

2018-08-08 14:10:56 +08:00

真的不好看……

agdhole

2018-08-08 14:12:24 +08:00

@blaxmirror #55 谢谢,之前没有接触过设计知识,有机会会去学习的.

@takato #54 谢谢,细节部分确实有点问题

@paloalto #47 谢谢,变成多行之后确实有点挤,响应式的时候没考虑到

geying

2018-08-08 14:12:34 +08:00

白的好看具体也说不出来啥哈哈

xianxiaobo

2018-08-08 14:15:37 +08:00

我还蛮喜欢的，不过感觉上半部分差张背景图片

agdhole

2018-08-08 14:16:02 +08:00

@zhaogaz #56 最开始中间一大块参考的: https://www.microsoft.com/design/inclusive/ [Inclusive design in action]
只不过他整体是黑色的,我换成了白色.不是很清楚 Fluent 的精髓是什么.

mooo

2018-08-08 14:17:14 +08:00

。你这个左边是波浪对齐吗

agdhole

2018-08-08 14:19:40 +08:00

@mooo #62 我刚刚用 chrome 开发工具对比了一下,只有最顶栏的标题不是对其的,下面的部分都和 [InBuff Open Source] 对齐的

nocrush

2018-08-08 14:20:26 +08:00

讲道理确实有点丑

icyalala

2018-08-08 14:26:14 +08:00

看现在的版本，总感觉 CSS 乱了，或者图片没加载出来。

agdhole

2018-08-08 14:29:17 +08:00

@icyalala #65 没图片了,删掉了,APPEND 里面有新的截图

woxppooo

2018-08-08 14:33:35 +08:00

确实看起来还是有点小不顺。
不过同意楼上的，审美很主观的，目前的话补充一些版式设计应该会更好一些

zz233333zz

2018-08-08 14:37:35 +08:00

顏色有點傷眼睛····

chenyu8674

2018-08-08 14:41:52 +08:00

从排版到配色问题都太多，用一个丑字没法概括
而且 LZ 居然毫无察觉，说明审美能力不止是“偏差”的问题

建议老老实实找专门的 UI 来做

icyalala

2018-08-08 14:48:27 +08:00

@agdhole 额。。我是想说，刚打开那个黑色主题网页，感觉上面这么空肯定是有什么东西还没加载出来，但实际上就是空的。。
白色主题那个网页，上半部分空白这么大但只有一行文字，根据经验应该是有张图片加载失败了剩下个 alt 提示，但实际上就是只有一行文字。。

cccRaim

2018-08-08 14:51:25 +08:00

要么纯白，要么纯黑，这样夹杂很乱的

LemoAtom

2018-08-08 15:48:11 +08:00

缺乏逻辑

tamlok

2018-08-08 15:52:49 +08:00 via Android

眼睛要瞎

LegionGuo

2018-08-08 15:54:58 +08:00

蓝白配色还好，头和底的天蓝看着太亮了很难受

sunyi413

2018-08-08 15:55:08 +08:00

总感觉有什么东西没加载出来

paicha

2018-08-08 16:03:49 +08:00

推荐楼主一本书：《写给大家看的设计书》

wekw

2018-08-08 16:04:50 +08:00

一个字，刺眼

noword2say

2018-08-08 16:21:57 +08:00 via Android

配色布局都不舒服

colorfulberry

2018-08-08 16:23:39 +08:00

感觉这么大面积黑色不好啊。量色的的也不好看。感觉看上去很不好额

ELLIA

2018-08-08 16:23:54 +08:00

对齐不是什么都要对齐，“资源”和“书籍”的字体往后移，不要和前面的东西对齐。死板。

颜色你是抄的配色，但是你使用上感觉不舒服，两种方式，降低纯度或者颜色混白。

页面布局没有明确的逻辑，各个文字的排版搞不清重点，也看不出引导浏览的意图和设计。看起来感觉就是乱……

建议黑色的修改蓝色纯度看看。布局上得改