• 请不要在回答技术问题时复制粘贴 AI 生成的内容
agdhole
V2EX  ›  程序员

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

  •  
  •   agdhole · Aug 8, 2018 · 18716 views
    This topic created in 3018 days ago, the information mentioned may be changed or developed.

    image

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

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

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

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

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

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

    @e8c47a0d #28 布局有问题

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

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

    @intellectual #36 谢谢,会尝试继续优化
    paloalto
    paloalto
    Aug 8, 2018
    43
    这俩地方留白太多。文字不够,加图来凑。






    paloalto
    paloalto
    Aug 8, 2018
    44
    第二张图片地址错了,应该是

    paloalto
    paloalto
    Aug 8, 2018❤️1
    45
    操,怎么又错了,再次更正:

    agdhole
    agdhole
    OP
    Aug 8, 2018
    46
    @paloalto #44 谢谢,确实空的太大,加图片应该会好一点
    paloalto
    paloalto
    Aug 8, 2018
    47


    line-height 改大一下。
    moresteam
    moresteam
    Aug 8, 2018 via Android
    48
    我觉得还阔以
    paloalto
    paloalto
    Aug 8, 2018
    49
    上面图又错了。
    更正:

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

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

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

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

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

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

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

    兄弟明显模仿的不是很成功啊。。。
    killerv
    killerv
    Aug 8, 2018
    57
    真的不好看……
    agdhole
    agdhole
    OP
    Aug 8, 2018
    58
    @blaxmirror #55 谢谢,之前没有接触过设计知识,有机会会去学习的.

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

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

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

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

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

    建议黑色的修改蓝色纯度看看。布局上得改
    580a388da131
    580a388da131
    Aug 8, 2018 via iPhone
    81
    简单来说就是没主题
    第一行字是主体就要大点突出
    下面书籍区域是主体那上面深色区域高度要见小
    你这个没办法让人第一眼看出来是干嘛的
    luozic
    luozic
    Aug 8, 2018
    82
    配色风格很渣,都不清楚一开始眼睛要放哪。
    这种最快的不是去看看某果,某 IBM,某 miscrosoft,或者 gayhub 主页也行吧。
    bbbai
    bbbai
    Aug 8, 2018
    83
    黑色 部分感觉很难受 , 黑色部分内容不够突出,请看你的参考页面 他的内容以及颜色
    luozic
    luozic
    Aug 8, 2018
    84
    内容展示区最好有边界区分一下,
    rebill
    rebill
    Aug 8, 2018
    85
    是真的,不骗你。
    gouflv
    gouflv
    Aug 8, 2018
    86
    非专业设计最好避免使用黑色做主色调
    BFInWR
    BFInWR
    Aug 8, 2018
    87
    黑色背景换成图片会好很多
    caaat
    caaat
    Aug 8, 2018
    88
    确实丑,还有黑色背景……
    HiJackXD
    HiJackXD
    Aug 8, 2018
    89
    黑色那 3 个卡片内部排版也需要改进啊.
    比如第一个卡片,参考微软那个话,也应该是应用程式和 steamhub 一起放在第一排呀,并取消按钮效果.
    两个按钮都通向一个连接,会让人觉得很乱
    lynan
    lynan
    Aug 8, 2018
    91
    too dark. deep dark fan...
    kamal
    kamal
    Aug 8, 2018
    92
    @paloalto 浏览器主题很漂亮,求名字。
    paloalto
    paloalto
    Aug 8, 2018
    93
    @kamal #92 就是 mac 上 chrome 默认的样式啊。
    kamal
    kamal
    Aug 8, 2018
    94
    @paloalto 哈哈,还以为是白底蓝点的主题。
    paloalto
    paloalto
    Aug 8, 2018
    95
    @kamal #94 为了节省,图片存成了 png8 格式的,就是这个效果了
    songkai
    songkai
    Aug 8, 2018
    96
    界面颜色真心的不舒服,还有这么布局看着不协调。
    myfei
    myfei
    Aug 8, 2018
    97
    布局太乱了,字体不统一,大小也不一致,有些空一大块,有的全挤一块,确实一般。
    winglight2016
    winglight2016
    Aug 8, 2018
    98
    呵呵,看来 LZ 审美大概可以类比于五音不全,配色乱来不说,大块的空白,文字字号相差悬殊,这是在做反设计的典型案例啊
    nightan
    nightan
    Aug 8, 2018
    99
    字号,字的位置,这些是显而易见的问题;
    对比过于强烈,因而引起眼睛不适
    CoderGeek
    CoderGeek
    Aug 8, 2018
    100
    lz 布局再看看 确实有点不适
    1  2  
    ❮ ❯
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1771 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 133ms · UTC 16:14 · PVG 00:14 · LAX 08:14 · JFK 11:14
    ♥ Do have faith in what you're doing.