我的审美是不是出现了偏差,这个设计真的很丑吗? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
agdhole
V2EX    程序员

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

  •  
  •   agdhole 2018-08-08 12:15:24 +08:00 16576 次点击
    这是一个创建于 2631 天前的主题,其中的信息可能已经有所发展或是发生改变。

    image

    在线预览: 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/.
    不过这种网站用图片的好多,完全不知道图片应该放什么从哪里找.
    152 条回复    2018-08-10 09:15:44 +08:00
    1  2  
    codepark
        1
    codepark  
       2018-08-08 12:20:33 +08:00   4
    看下面的一大块紫很不舒服~ 而且文字如果对称下会好看点~ 我也觉得不好看
    lamada
        2
    lamada  
       2018-08-08 12:26:35 +08:00
    布局不平衡
    nlysh007
        3
    nlysh007  
       2018-08-08 12:27:07 +08:00
    讲道理对比度太高了... 要么你就一个色块占满屏幕
    jydeng
        4
    jydeng  
       2018-08-08 12:28:54 +08:0
    确实不好看
    agdhole
        5
    agdhole  
    OP
       2018-08-08 12:28:55 +08:00
    @codepark #1
    @lamada #2
    中间一大坨的原因?
    agdhole
        6
    agdhole  
    OP
       2018-08-08 12:29:06 +08:00
    @nlysh007 #3 对比度是白色的问题吗?
    greed1is9good
        7
    greed1is9good  
       2018-08-08 12:35:38 +08:00
    好乱的说。。。
    sfqtsh
        8
    sfqtsh  
       2018-08-08 12:36:41 +08:00 via Android
    是的
    learnshare
        9
    learnshare  
       2018-08-08 12:38:01 +08:00
    对比度过高,也就是说明暗差异很大。PHP 这一块过于明显,其他东西没有存在感
    leekafai
        10
    leekafai  
       2018-08-08 12:38:25 +08:00
    fluent 的设计还是倾向无边界的,你的太卡片了。
    nlysh007
        11
    nlysh007  
       2018-08-08 12:40:57 +08:00
    @agdhole 白背景还好了,,上面的蓝黑对比,你还分了那么多项目,,
    weberCd
        12
    weberCd  
       2018-08-08 12:41:32 +08:00
    突兀的一大块紫,有种压迫感
    agdhole
        13
    agdhole  
    OP
       2018-08-08 12:44:19 +08:00
    @learnshare #9
    @nlysh007 #11
    @greed1is9good #7
    看来布局有很大的问题
    agdhole
        14
    agdhole  
    OP
       2018-08-08 12:46:03 +08:00
    zcjfesky
        15
    zcjfesky  
       2018-08-08 12:50:23 +08:00 via Android
    排版逼死强迫症… 你先把元素的对齐弄整齐吧,这左一个右一个,左对齐的左边线还都全都不重叠…
    intellectual
        16
    intellectual  
       2018-08-08 12:53:21 +08:00
    现在改了,改了的也不好看,但至少比第一次的好多了;
    脑袋小,肚子大,且还突出,屁股也很累赘
    intellectual
        17
    intellectual  
       2018-08-08 12:54:14 +08:00
    对比,比例,配色,留白,快接近一无是处了
    chuhemiao
        18
    chuhemiao  
       2018-08-08 12:55:20 +08:00
    借楼: https://bsatoshi.com 这个真的丑吗??
    intellectual
        19
    intellectual  
       2018-08-08 12:58:36 +08:00
    @chuhemiao 这个 style 是数据展示的,一般般丑啦,如果 10 分打比方的话,这个是标准的 3-4 分;
    lz 那个是美女不会化妆的 5.5 分变成 4 分了
    agdhole
        20
    agdhole  
    OP
       2018-08-08 13:01:01 +08:00
    @intellectual #19
    肚子不是应该大吗?
    不是专业 UI,我是写后端顺便写点前端的,能具体说说什么问题吗?
    PulpFunction
        21
    PulpFunction  
       2018-08-08 13:01:35 +08:00
    代码高亮风格
    aliipay
        22
    aliipay  
       2018-08-08 13:01:51 +08:00
    看到一坨黑色的就不太舒服
    34C
        23
    34C  
       2018-08-08 13:01:59 +08:00 via iPhone
    丑到爆,怎么对自己审美这么自信的
    stargazer242
        24
    stargazer242  
       2018-08-08 13:02:47 +08:00
    巨丑
    lingo
        25
    lingo  
       2018-08-08 13:03:13 +08:00
    @chuhemiao 你这是借楼硬广啊。不过右侧快讯的上下 border 重起来不好看
    intellectual
        26
    intellectual  
       2018-08-08 13:06:30 +08:00
    @agdhole 肚子大当然没错,但得有货,你的肚子上就一大片空白,和一个恐怖的丑丑的 php 未设计的 LOGO,谁敢这么穿衣服。
    而且比例还要舒适。如果小头爸爸挺个啤酒肚是不是也有点诡异???

    如果不能一比一照抄,无设计基础的人千万不要创新...是的,就是这么因吹斯汀,千万不要自己创新
    watzds
        27
    watzds  
       2018-08-08 13:07:21 +08:00
    还可以,有一些漂亮的点。
    不过内容单调,背景黑色太多了,有些好看的背景图片会好点
    e8c47a0d
        28
    e8c47a0d  
       2018-08-08 13:10:37 +08:00
    php 三个字带来少许心理阴影。其他,比较没有逻辑层次,难理解。
    watzds
        29
    watzds  
       2018-08-08 13:11:00 +08:00
    今天看到的这个网站不错,https://www.algolia.com//#schedule-demo
    agdhole
        30
    agdhole  
    OP
       2018-08-08 13:13:39 +08:00
    @watzds #29 没改之前的 algolia 花花绿绿的,有些人觉得也太乱了

    @e8c47a0d #28 布局有问题

    @intellectual #26 php 的那个 logo 已经删掉了,改之后布局还是有很大问题吗?白色色调类似的您看看怎么样: https://dev.inbuff.cn/
    asLw0P981N0M0TCC
        31
    asLw0P981N0M0TCC  
       2018-08-08 13:14:01 +08:00
    为什么我觉得大体一看 不去扣 还行啊
    loryyang
        32
    loryyang  
       2018-08-08 13:15:21 +08:00
    感觉色差太强烈了。。稍微柔和一点吧
    agdhole
        33
    agdhole  
    OP
       2018-08-08 13:17:10 +08:00
    @loryyang #32 是和白色的对比太强烈还是黑色和青色的对比太强烈?
    kevil
        34
    kevil  
       2018-08-08 13:18:44 +08:00
    也没有巨丑吧。我提个建议,一个页面里不要有两种蓝色啦。
    DobbyQ
        35
    DobbyQ  
       2018-08-08 13:19:55 +08:00
    蓝绿色的区块看着很难受。
    intellectual
        36
    intellectual  
       2018-08-08 13:20:43 +08:00
    @agdhole 问题还是有的,但已经好多了,可以接受的。
    如果是面对的是非商业用户的话,马马虎虎的也行,大家也没那么讲究
    loryyang
        37
    loryyang  
       2018-08-08 13:21:27 +08:00
    @agdhole 都太强烈了。。。黑白因为都占据了半页的空间,所以对比特别强烈,你要不把其中一个颜色作为主色,再扩大一些
    loryyang
        38
    loryyang  
       2018-08-08 13:22:02 +08:00
    另外,我觉得你不要用青色吧,换个其他和黑或者白比较接近的颜色
    pinews
        39
    pinews  
       2018-08-08 13:22:11 +08:00
    楼主的设计很好,其实很多人不是批评楼主的设计,而是在批评微软的设计。
    但有一点,欧美风格网站使用中文字体很不协调
    loryyang
        40
    loryyang  
       2018-08-08 13:23:15 +08:00
    个人感觉哦,仅供参考。。
    intellectual
        41
    intellectual  
       2018-08-08 13:26:29 +08:00
    @agdhole 当然,现在的设计对比前面的设计风格是退步的,但和谐程度好了点;
    前面的风格很棒,只是你还没有足够的设计能力去驾驭,所以折腾出来的页面很奇怪;
    眼光跟得上,能力跟不上,加油哦
    agdhole
        42
    agdhole  
    OP
       2018-08-08 13:28:20 +08:00
    @pinews #39 谢谢,我也发现了这个问题,中文放上去有点难看

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

    @intellectual #36 谢谢,会尝试继续优化
    paloalto
        43
    paloalto  
       2018-08-08 13:45:21 +08:00
    这俩地方留白太多。文字不够,加图来凑。






    paloalto
        44
    paloalto  
       2018-08-08 13:45:58 +08:00
    第二张图片地址错了,应该是

    paloalto
        45
    paloalto  
       2018-08-08 13:46:45 +08:00   1
    操,怎么又错了,再次更正:

    agdhole
        46
    agdhole  
    OP
       2018-08-08 13:47:30 +08:00
    @paloalto #44 谢谢,确实空的太大,加图片应该会好一点
    paloalto
        47
    paloalto  
       2018-08-08 13:47:35 +08:00


    line-height 改大一下。
    moresteam
        48
    moresteam  
       2018-08-08 13:47:53 +08:00 via Android
    我觉得还阔以
    paloalto
        49
    paloalto  
       2018-08-08 13:48:18 +08:00
    上面图又错了。
    更正:

    e8c47a0d
        50
    e8c47a0d  
       2018-08-08 13:49:46 +08:00
    其实就 UX 而言,比较不直观。我看了一分钟后,仍然不知道这个网站提供的是什么讯息和服务……而且字太小。
    allgy
        51
    allgy  
       2018-08-08 13:51:12 +08:00
    颜色搭配方面需要下功夫
    Libby520
        52
    Libby520  
       2018-08-08 13:54:07 +08:00
    不懂技术,非程序员,自己瞎弄的,你看我这个颜色的搭配

    https://www.dutype.com/
    takato
        53
    takato  
       2018-08-08 13:56:52 +08:00
    UX 还行,配色和样式细节有一些微调空间。整体 OK
    takato
        54
    takato  
       2018-08-08 13:57:12 +08:00
    比如按钮的位置间距这些
    blaxmirror
        55
    blaxmirror  
       2018-08-08 14:00:39 +08:00   1
    感觉上呢有一些无意义的刻意设计,有点让我觉得刻意追求诸如“极简”“扁平”“ MaterialDesign ”的设计风格。
    俗话说加法容易减法难,单就 47L 的那一部分来说,书籍这一块上的蓝色横线就没有什么意义,而且给我感觉是想要跟下面的内容块对齐,但其实两者又没有直接关系。横线太长而留白太多,跟右边的文字块又是互相割裂,下方内容块的阴影在这个背景下又克制的非常不明显,远看像是长方形上突出了一块。

    建议在能力还没突破天际的时候学院派一些,配色我认为不是什么大问题,只是色块关系的处理不太好,LZ 应该重点去补一些版式设计的知识。以上,仅个人观点,审美很主观的,LZ 别太在意别人的看法。
    zhaogaz
        56
    zhaogaz  
       2018-08-08 14:09:42 +08:00
    微软的那个,哪有一大块白色补丁啊;你那个书籍那一大块,整个一补丁

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

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

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

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

    兄弟明显模仿的不是很成功啊。。。
    killerv
        57
    killerv  
       2018-08-08 14:10:56 +08:00
    真的不好看……
    agdhole
        58
    agdhole  
    OP
       2018-08-08 14:12:24 +08:00
    @blaxmirror #55 谢谢,之前没有接触过设计知识,有机会会去学习的.

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

    @paloalto #47 谢谢,变成多行之后确实有点挤,响应式的时候没考虑到
    geying
        59
    geying  
       2018-08-08 14:12:34 +08:00
    白的好看 具体也说不出来啥 哈哈
    xianxiaobo
        60
    xianxiaobo  
       2018-08-08 14:15:37 +08:00
    我还蛮喜欢的,不过感觉上半部分差张背景图片
    agdhole
        61
    agdhole  
    OP
       2018-08-08 14:16:02 +08:00
    @zhaogaz #56 最开始中间一大块参考的: https://www.microsoft.com/design/inclusive/ [Inclusive design in action]
    只不过他整体是黑色的,我换成了白色.不是很清楚 Fluent 的精髓是什么.
    mooo
        62
    mooo  
       2018-08-08 14:17:14 +08:00
    。 你这个左边是波浪对齐吗
    agdhole
        63
    agdhole  
    OP
       2018-08-08 14:19:40 +08:00
    @mooo #62 我刚刚用 chrome 开发工具对比了一下,只有最顶栏的标题不是对其的,下面的部分都和 [InBuff Open Source] 对齐的
    nocrush
        64
    nocrush  
       2018-08-08 14:20:26 +08:00
    讲道理 确实有点丑
    icyalala
        65
    icyalala  
       2018-08-08 14:26:14 +08:00
    看现在的版本,总感觉 CSS 乱了,或者图片没加载出来。
    agdhole
        66
    agdhole  
    OP
       2018-08-08 14:29:17 +08:00
    @icyalala #65 没图片了,删掉了,APPEND 里面有新的截图
    woxppooo
        67
    woxppooo  
       2018-08-08 14:33:35 +08:00
    确实看起来还是有点小不顺。
    不过同意楼上的,审美很主观的,目前的话补充一些版式设计应该会更好一些
    zz233333zz
        68
    zz233333zz  
       2018-08-08 14:37:35 +08:00
    色有眼睛
    chenyu8674
        69
    chenyu8674  
       2018-08-08 14:41:52 +08:00
    从排版到配色问题都太多,用一个丑字没法概括
    而且 LZ 居然毫无察觉,说明审美能力不止是“偏差”的问题

    建议老老实实找专门的 UI 来做
    icyalala
        70
    icyalala  
       2018-08-08 14:48:27 +08:00
    @agdhole 额。。我是想说,刚打开那个黑色主题网页,感觉上面这么空肯定是有什么东西还没加载出来,但实际上就是空的。。
    白色主题那个网页,上半部分空白这么大但只有一行文字,根据经验应该是有张图片加载失败了剩下个 alt 提示,但实际上就是只有一行文字。。
    cccRaim
        71
    cccRaim  
       2018-08-08 14:51:25 +08:00
    要么纯白,要么纯黑,这样夹杂很乱的
    webstorm
        72
    webstorm  
       2018-08-08 15:48:11 +08:00
    缺乏逻辑
    tamlok
        73
    tamlok  
       2018-08-08 15:52:49 +08:00 via Android
    眼睛要瞎
    LegionGuo
        74
    LegionGuo  
       2018-08-08 15:54:58 +08:00
    蓝白配色还好,头和底的天蓝看着太亮了 很难受
    sunyi413
        75
    sunyi413  
       2018-08-08 15:55:08 +08:00
    总感觉有什么东西没加载出来
    paicha
        76
    paicha  
    PRO
       2018-08-08 16:03:49 +08:00
    推荐楼主一本书:《写给大家看的设计书》
    wekw
        77
    wekw  
       2018-08-08 16:04:50 +08:00
    一个字,刺眼
    noword2say
        78
    noword2say  
       2018-08-08 16:21:57 +08:00 via Android
    配色布局都不舒服
    colorfulberry
        79
    colorfulberry  
       2018-08-08 16:23:39 +08:00
    感觉这么大面积黑色不好啊。量色的的也不好看。感觉看上去很不好额
    ELLIA
        80
    ELLIA  
       2018-08-08 16:23:54 +08:00
    对齐不是什么都要对齐,“资源”和“书籍”的字体往后移,不要和前面的东西对齐。死板。

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

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

    建议黑色的修改蓝色纯度看看。布局上得改
    580a388da131
        81
    580a388da131  
       2018-08-08 16:26:46 +08:00 via iPhone
    简单来说就是没主题
    第一行字是主体就要大点突出
    下面书籍区域是主体那上面深色区域高度要见小
    你这个没办法让人第一眼看出来是干嘛的
    luozic
        82
    luozic  
       2018-08-08 16:28:07 +08:00
    配色风格很渣,都不清楚一开始眼睛要放哪。
    这种最快的不是去看看某果,某 IBM,某 miscrosoft,或者 gayhub 主页也行吧。
    bbbai
        83
    bbbai  
       2018-08-08 16:33:59 +08:00
    黑色 部分感觉很难受 , 黑色部分内容不够突出,请看你的参考页面 他的内容以及颜色
    luozic
        84
    luozic  
       2018-08-08 16:39:01 +08:00
    内容展示区最好有边界区分一下,
    rebill
        85
    rebill  
       2018-08-08 16:46:39 +08:00
    是真的,不骗你。
    gouflv
        86
    gouflv  
       2018-08-08 16:55:23 +08:00
    非专业设计最好避免使用黑色做主色调
    BFInWR
        87
    BFInWR  
       2018-08-08 16:56:30 +08:00
    黑色背景换成图片会好很多
    caaat
        88
    caaat  
       2018-08-08 17:10:41 +08:00
    确实丑,还有黑色背景……
    HiJackXD
        89
    HiJackXD  
       2018-08-08 17:16:00 +08:00
    黑色那 3 个卡片内部排版也需要改进啊.
    比如第一个卡片,参考微软那个话,也应该是应用程式和 steamhub 一起放在第一排呀,并取消按钮效果.
    两个按钮都通向一个连接,会让人觉得很乱
    initialdp
        90
    initialdp  
       2018-08-08 17:26:27 +08:00
    lynan
        91
    lynan  
       2018-08-08 17:38:10 +08:00
    too dark. deep dark fan...
    kamal
        92
    kamal  
       2018-08-08 17:38:17 +08:00
    @paloalto 浏览器主题很漂亮,求名字。
    paloalto
        93
    paloalto  
       2018-08-08 17:43:41 +08:00
    @kamal #92 就是 mac 上 chrome 默认的样式啊。
    kamal
        94
    kamal  
       2018-08-08 18:00:00 +08:00
    @paloalto 哈哈,还以为是白底蓝点的主题。
    paloalto
        95
    paloalto  
       2018-08-08 18:08:09 +08:00
    @kamal #94 为了节省,图片存成了 png8 格式的,就是这个效果了
    songkai
        96
    songkai  
       2018-08-08 18:16:01 +08:00
    界面颜色真心的不舒服,还有这么布局看着不协调。
    myfei
        97
    myfei  
       2018-08-08 19:02:25 +08:00
    布局太乱了,字体不统一,大小也不一致,有些空一大块,有的全挤一块,确实一般。
    winglight2016
        98
    winglight2016  
       2018-08-08 19:05:52 +08:00
    呵呵,看来 LZ 审美大概可以类比于五音不全,配色乱来不说,大块的空白,文字字号相差悬殊,这是在做反设计的典型案例啊
    nightan
        99
    nightan  
       2018-08-08 19:20:08 +08:00
    字号,字的位置,这些是显而易见的问题;
    对比过于强烈,因而引起眼睛不适
    CoderGeek
        100
    CoderGeek  
       2018-08-08 19:47:10 +08:00
    lz 布局再看看 确实有点不适
    1  2  
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2275 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 33ms UTC 16:01 PVG 00:01 LAX 09:01 JFK 12:01
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86