V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
star7th
V2EX  ›  分享创造

在设计师帮忙下把产品首页 UI 优化了,欢迎提出建议

  •  
  •   star7th · 336 天前 · 6842 次点击
    这是一个创建于 336 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在设计师帮忙下把产品首页 UI 优化了,欢迎提出建议

    开源版地址: https://github.com/star7th/showdoc

    官网网址: https://www.showdoc.com.cn/

    107 条回复    2021-01-06 08:42:23 +08:00
    1  2  
    wanku0225
        1
    wanku0225   336 天前   ❤️ 9
    刚浏览完,整体给人感觉非常压抑,上下滚动两下,我就感觉我进了棺材铺,不是黑就是白。建议插入一下其他轻快的颜色以缓解这种压抑
    3x1415926535
        2
    3x1415926535   336 天前   ❤️ 1
    楼上说的对
    这设计师属乌鸦的吧
    star7th
        3
    star7th   336 天前   ❤️ 1
    @wanku0225 黑色是为了显得专业一点。这是以技术团队为主的工具,可能你不是程序员?程序员对酷黑风格是不抗拒的,很多代码编辑器都黑色风格
    lneoi
        4
    lneoi   336 天前   ❤️ 1
    纯黑非常奇怪.. 特别是中间一段纯黑加蓝 很怪异
    kop1989
        5
    kop1989   336 天前
    1 、信息密度太低,同屏信息量太少。(苹果官网的信息量比你这个高多了,而且有段式滚动和高端动效来吸引眼球)
    2 、如楼上所说,颜色太压抑。
    3 、部分 icon 有不利的心理暗示。比如: 我感觉怎么那么像病毒文件
    Flymachine
        6
    Flymachine   336 天前
    @star7th 但这个黑色太纯了。我建议你去看一下 Visual Studio Code 官网看看别人的设计师是怎么协调暗色调和明色调的。
    Varobjs
        7
    Varobjs   336 天前
    还不如加入 dark 模式切换的,官网黑乎乎的,点进去又是白色背景,😂
    torenayto
        8
    torenayto   336 天前 via iPhone
    顶部的 ShowDoc 有点模糊(肉眼可见)。用上了好多 3D Object,非常时髦👍
    zhoushiya
        9
    zhoushiya   336 天前
    @star7th #3 赶紧重新配色吧,真是接受不了,太难看了,这设计师水平堪忧
    caryqy
        10
    caryqy   336 天前
    黑的太黑,白的太白,结果就是对比过于强烈,刺眼了

    建议 黑 和 白都换个柔和点的,可以参考下苹果的颜色
    torenayto
        11
    torenayto   336 天前 via iPhone
    star7th
        12
    star7th   336 天前
    @kop1989 信息密度低是我想尽量用那么一两句话介绍产品,简单明了。更多的介绍是可以点击首页的“了解更多”按钮,里面长篇介绍。图标的话,再看下其他人怎么想吧
    ParfoisMeng
        13
    ParfoisMeng   336 天前
    上家公司用过,具体啥样子已经忘了,但可以确定是比以前好看。
    不过颜色是不是太锐了?
    Flymachine
        14
    Flymachine   336 天前
    此外,如果蓝色已经是图标和文字的底色,就不适合再充当背景色了。而且黑色背景配黑色图片实在过于模糊,如果不能改图片底色,那就给图片加个亮色边框吧,不然太奇怪了
    star7th
        15
    star7th   336 天前
    @caryqy
    @zhoushiya
    @Varobjs
    @Flymachine

    可能配色是需要参考下 vscode 那样,把黑色调偏暗色一点而不是纯黑的好。我回头问问设计师
    star7th
        16
    star7th   336 天前
    @torenayto 价格页的话,我想的是应该没有移动端访问价格的需求。而且一个大表格做响应式太麻烦了,所以算了。
    torenayto
        17
    torenayto   336 天前
    接近纯黑色做网页背景也是可以的,看看 https://www.framer.com
    DreamCMS
        18
    DreamCMS   336 天前
    细节不到位
    star7th
        19
    star7th   336 天前
    @torenayto 好多人都不太认同纯黑,看到你发的例子我安心了些。。。
    star7th
        20
    star7th   336 天前
    @DreamCMS 你说的是哪些细节
    chengfeng
        21
    chengfeng   336 天前
    一会黑一会蓝一会又全白了,眼睛要瞎了
    wanku0225
        22
    wanku0225   336 天前
    @star7th 程序员确实对酷黑风格有所偏爱,但是黑色也是有多重的,可以试试添加一些细节在里面。现在内容少而空,反倒成了累赘。还有各个类目所展示的和背景真的有点不搭,对比色太突兀了,这个设计是认真的吗,半路没出家的那种吧 233333
    mrtrying
        23
    mrtrying   336 天前
    看的太刺激了,黑的这么暗。我还特意看了一下 Github 的 dark,和这个差不多,但是没有这种高对比度。
    real3cho
        24
    real3cho   336 天前
    黑色本身没什么问题 关键是中间还穿插别的颜色 就像晚上在房间里 有人不停开关灯一样
    omph
        25
    omph   336 天前
    一般是浅色皮肤白天,黑色晚上不伤眼,可以加个开关按钮
    limuyan44
        26
    limuyan44   336 天前
    这个黑色挺离谱了,能闪眼睛的那种,黑色蓝色黑色蓝色白色 0 分。
    lxd152
        27
    lxd152   336 天前
    我的设计师朋友曾经跟我说过:一般没人用纯黑,都用接近纯黑的
    kaiki
        28
    kaiki   336 天前
    黑色没问题,就是缺少过渡,突然转进其他颜色很难接受。
    如果其他的颜色是放在黑色里面的会好一点。
    最后是你想搞的空间感被一排一排的色块毁了。
    hoythan
        29
    hoythan   336 天前
    首屏字体大的不够大,小的不够小,该突出的又不明显...那几个小数字这么点大还不如不放.
    设计四大基本原则都没搞懂:
    亲密 重复 对齐 对比
    hoythan
        30
    hoythan   336 天前   ❤️ 1
    物理位置接近就意味着关联

    避免元素太过相似 如果元素之间不相同,那么干脆让他们截然不同

    每个项都应当与页面上的某个内容存在某种视觉上的联系

    重复的目的就是统一,并增强视觉效果

    避免太多地重复一个元素,重复太多会让人讨厌

    对比就必须强烈,千万不要畏畏缩缩。
    如果对比效果不明显,那么不是对比,而是冲突!
    hoythan
        31
    hoythan   336 天前
    黑色背景不是为了显得专业,是为了突出需要的特别突出的内容.
    并不是 程序员对酷黑风格不抗拒 ,是因为酷黑风格不会轻易转移视线重点. 花里胡哨的背景下写代码眼睛会很累.
    前后逻辑关系要先清除,再做设计.

    你看你最后一张图,背景纯黑,前景灰不溜秋的,简直反人类哦.
    VsevenMagic
        32
    VsevenMagic   336 天前
    建议让你的设计师看看这个
    https://www.zcool.com.cn/article/ZMTExOTc4OA==.html
    hoythan
        33
    hoythan   336 天前
    hoythan
        34
    hoythan   336 天前
    可以点的可以用强调色
    dingdangnao
        35
    dingdangnao   336 天前
    Safari 上有很明显的问题,第一张图片的内容根本看不到。。
    star7th
        36
    star7th   336 天前
    @hoythan 你的建议还是挺专业的,感谢
    star7th
        37
    star7th   336 天前
    @dingdangnao 手机上的 Safari 吗?我试了好像没有明显问题
    gimp
        38
    gimp   336 天前
    纯黑太压抑了
    dingdangnao
        39
    dingdangnao   336 天前
    @star7th 电脑..是我自己的问题😂被当作广告过滤掉了好像
    ppphp
        40
    ppphp   336 天前
    黑的还行,蓝色也太丑了
    ccraohng
        41
    ccraohng   336 天前 via iPhone
    不喜欢这种蓝色。
    下拉菜单展开缓动不自然
    arac
        42
    arac   336 天前
    最主要是信息密度太低,完全可用一半甚至四分之一长度解决
    以及重点被无意义的图片抢去

    最上方导航栏太高,可降低一半
    如果图像或者图标不是你产品本身,大可极度缩小或者不放,提高文字的地位传递更多重点信息
    如果前后景的图像都是深色,可将前景图加浅色阴影或者外发光进行有层次的分离
    koolob
        43
    koolob   336 天前
    这其实不能叫酷黑,这是纯黑。会给人一种什么都看不见的感觉。
    Geekgogo
        44
    Geekgogo   336 天前
    颜色对比太强烈,眼睛看着不舒服
    dream4ever
        45
    dream4ever   336 天前
    一上来的黑底白字太沉重了,让人以为在发布讣告……
    jiaxinbinggan
        46
    jiaxinbinggan   336 天前
    加点动效让它们动起来
    参考
    https://www.xmind.net/
    https://pc.wps.cn/
    Kenny
        47
    Kenny   335 天前
    超过 1 0 0 0 0 0 + 互联网团队正在使用 ShowDoc,好牛~
    mader
        48
    mader   335 天前
    巧了,之前我们团队用过你们产品。支持一下~
    star7th
        49
    star7th   335 天前
    @mader “之前”?那现在为啥不用了呢,说说原因,看看产品有什么可以完善的地方
    MYlyc
        50
    MYlyc   335 天前
    免费的时候用,后来收费之后。。。公司自己用 docker 搭了这个
    star7th
        51
    star7th   335 天前
    @MYlyc 在线服务是给一些成本不敏感同时省掉运维成本的企业。使用私有服务和在线服务都是 showdoc 的用户,有使用的问题可以多反馈下,这样产品才能完善。
    vanityfairn
        52
    vanityfairn   335 天前   ❤️ 1
    一会黑一会蓝一会又全白,好丑。。。。
    ily433664
        53
    ily433664   335 天前
    1 、为什么要用黑色背景,用就算了,往下拉一块黑一块亮晃眼睛。
    2 、最上面的那行 tab 和顶端的间距有点大了吧。
    3 、点“客户端”打开的弹窗无法关闭,正常的设计是有个关闭按钮,人性化的设计是点其它空白地方就关闭,现在是根本没法关闭
    4 、价格页面,1080p 下居然一页显示不全,每行还留那么大的间距。另外在外层加个 div 背景吧。
    5 、登录页做的这么窄干嘛。
    ns20
        54
    ns20   335 天前
    首页每个版块的高度增加些。
    若要用黑色基调,可以适当加个灰色块做过度。
    有色彩的地方更绚丽些,提高些光感就不会沉闷了(这条可以忽略)。
    zx125
        55
    zx125   335 天前   ❤️ 1
    这个蓝色差点要了我的命
    Junn
        56
    Junn   335 天前
    1 、缺少过度色,黑白蓝三色太过抢眼,颜色上没有层次。黑色建议混合一些品牌色,或者灰色。
    2 、页面上所有图片都比较模糊,不够精致。
    3 、排版上很多不统一,建议图片及右侧内容垂直居中。(目前有的应该在只有标题是垂直居中的)
    LaGeNanRen
        57
    LaGeNanRen   335 天前
    我也算 ui,我看了下官网,
    1.首屏的颜色是 111,这个黑色和下面的蓝色有同样的问题:就是颜色太深了
    2.风格偏国外的风格吧,国内用户看着可能不讨喜(当然什么风格不是问题)
    3.点了几个次级页面,基本没内容,我不是很清楚目前这个产品处于什么阶段,但没有任何扩展内容,那些说明文档目标用户是不会看的,不同的人关注的点是不一样的:D
    thuang
        58
    thuang   335 天前
    设计师没有灵感的时候看了眼桌边的 NS,设计出了客户端页面。
    gaigechunfeng
        59
    gaigechunfeng   335 天前
    看着比较压抑。
    我也是程序员,有一点不敢苟同。就我个人来说,写代码 ide 我喜欢酷黑,并不代表我浏览网页,使用产品也要用酷黑。
    我 tm 的需要多姿多彩好吗?

    为什么我流泪了呢。
    gaigechunfeng
        60
    gaigechunfeng   335 天前
    @hoythan 非常的专业
    lepig
        61
    lepig   335 天前
    我提一个

    登录的时候如果验证码错误,请帮忙把验证码一栏置空,不想手动删。

    刚入行的那会就用了 showdoc,一直用了将近 3 年。 现在有 2 年多没用了,突然看到这个还是有点亲切的感觉
    Boor
        62
    Boor   335 天前   ❤️ 1
    身为设计师的我看到大家的评论,流下了心酸的泪水。建议你自己来设计这个网站,然后再挂到网上,让各种各样的人提意见。不谢~
    star7th
        63
    star7th   335 天前
    @Boor 我做了产品新功能(不仅是 UI 层面的),也是会发出来让各种各样的人提意见的。产品总是要面向大众的,所以无论发帖不发帖,总会很多人看到。所以不如自己主动收集建议。有反馈才能改善的空间,不然无从下手。不过 UI 这种东西一般人与人的审美差异大,所以需要批判性接受他人意见。不能全听别人说,也不能只做自己喜欢看的。至于你说的由我来设计,我不是专业的,做出来并不会更好。只能说在各种反馈声和自我思考磨合中把产品做得更完善。
    star7th
        64
    star7th   335 天前
    @lepig 为啥后来又不用了呢,有没有产品上的优化空间可以提一下
    xwanjia
        65
    xwanjia   335 天前
    黑色有点不适应。
    star7th
        66
    star7th   335 天前
    @Boor 网络上收集的声音,大部分是有异议的才会提。认同的比较少说话。所以对这种情况要客观看待。什么观点要吸收什么观点要放弃,需要权衡。另外我也没暴露出设计师身份,目前的质疑声都是直接反馈到我的产品上的,对设计师影响有限。这更多算是我在收集用户对我产品的讨论吧。
    gps949
        67
    gps949   335 天前
    一开始看到觉得“暗黑模式”?感觉还不错啊
    往下滚动页面,妈呀,我的眼睛瞎了……
    如果不是“暗黑模式”不建议纯粹的黑,不管是不是“暗黑模式”都不应该大片黑色后突然出现大片明蓝和白色,真的会瞎眼的
    gzf6
        68
    gzf6   335 天前
    颜色这种的可以做成可更换主题,当然,前提是功能已经完善的情况下
    windsgone
        69
    windsgone   335 天前
    哈哈,之前一直在用,不过由于不能实时协作,所以改用其它产品了。
    lepig
        70
    lepig   335 天前
    @star7th 主要就是目前在职公司统一使用的是 yapi 这个接口管理平台,以前刚入行那会都是去的小公司,后端可以自己做一下决定,现在貌似只能听从安排了,哈哈。

    说说我使用 yapi 感受吧,也可以当个建议参考
    1. 对于开发来说 yapi 有个 json 导入功能,就是模拟器或者 postman 调试完接口后返回的 json 数据,我可以复制后导入到 yapi 的 response 字段中,这样我就不用在手动书写每个返回的字段了,我只要在自动生成的字段后面补充上这个字段是什么含义就好,这点我特别喜欢。

    2. yapi 是有人员权限分组的,这个对于开发来说无关痛痒,但是对领导级别的尤其是一共公司中有多支开发团队或者一些有跨部门协作的时候可以申请开通别人组的接口权限,这样我就可以看到部分 api 接口列表了。

    3. 这点因人而异,刚看了 showDoc 在编辑文档时是使用 markdown 的方式,这点对于我来说无所谓,但是相对于 yapi 提供的传统方式,鼠标点一下添加一个 request 字段来说还是 yapi 的方便。首先我观察了下,周围的同事好像对 markdown 不感冒,也没见他们用过 markdown 书写文档或者记录。这点会导致他们有点排斥。


    其他的 mock 功能就不评价了,我没怎么用过。其实 showdoc 我现在偶尔在用,不过放的都是个人项目的接口,给我自己看的。或者接个外包的时候和别人调试接口的时候用一下,主要是不用登录,地址发给他就能网页直接打开看了。
    star7th
        71
    star7th   335 天前
    @lepig

    不知道是不是我的功能藏得深的原因,你说的其实 showdoc 都有解决方案。
    1,导入接送的话,showdoc 编辑器上方的格式工具,json 转表格就有类似功能。
    2,showdoc 也可以添加不同项目成员权限,甚至可以按目录细分配权限。
    3,已经增加了一个 runapi 客户端,类似 postman,可以直接调试接口就自动生成文档,不需要手写 markdown https://www.showdoc.com.cn/runapi?page_id=30291
    asdf123101
        72
    asdf123101   335 天前 via Android
    黑色是用来看大量文字的。首页作为展示是需要亮色的,有克制的花里胡哨比较好。
    kerinlin
        73
    kerinlin   335 天前
    黑蓝配色感觉很奇怪
    lepig
        74
    lepig   335 天前
    @star7th 好的感谢提醒。 看了下 runapi 不错
    intellectual
        75
    intellectual   335 天前
    并不是图标用了 3D 就说做了 UI 优化。。。
    颜色上。。。不懂配色!不懂设计。

    不认做这图的人有设计的水平。除了图标算这两年的新花样,其它均一无是处,慎重啊。比比看同行业的国外其它带有 设计感的网站吧。
    intellectual
        76
    intellectual   335 天前
    https://stripe.com
    马上 2021 了,这时候设计体验没达到有类似这个网站同等水平,都算不太灵的了。这也是面向程序员之类人的网站。。。
    wjfz
        77
    wjfz   335 天前
    黑色感觉没什么,插蓝确实有点突兀。

    顶部菜单栏太宽了,会有压抑的感觉。
    logo 分辨率不够清晰。
    wjfz
        78
    wjfz   335 天前
    页面内容的 padding-top 整整 305px,也太大了,导致主要内容没在页面中间。

    总结,对小屏设备很不友好( mbp 13)。

    (大学时期就把 lz 博客加收藏夹了
    star7th
        79
    star7th   334 天前
    @intellectual 你发的这个网站,配色一眼看上去似乎不错啊
    star7th
        80
    star7th   334 天前
    @wjfz 不同屏幕的响应式问题得再额外调调,确实是优先考虑主流大屏。
    EasonCheng
        81
    EasonCheng   334 天前
    UI 过来说一下,现在几乎没有人用这种纯度的黑色做设计,因为对心理和视觉都不友好;类 3D 的装饰部门的色彩感觉就是从其他颜色的块面直接调整过来的,那种违和感不能忽视;
    waytocode
        82
    waytocode   334 天前
    这么差的 UI 居然流量还不小,怎么做到的
    hemioneoo
        83
    hemioneoo   334 天前
    有点瘆人
    star7th
        84
    star7th   334 天前
    @EasonCheng 你的建议确实是最简洁又实用的。
    star7th
        85
    star7th   334 天前
    @waytocode 因为 showdoc 的核心竞争力不在 UI 上。只是说好的 UI 能锦上添花,我现在想把 UI 做得更好。
    bojue
        86
    bojue   334 天前
    建议直接参考类似的产品,然后搞个多主题
    mader
        87
    mader   334 天前
    @star7th 当时是一个项目的文档放上面,项目停止维护,后续也就没用了。
    有一些细节体验,可以继续提升。不过我不是开发, 基本没怎么用,后面如果有时间深度体验,会给提的
    MJZ1995
        88
    MJZ1995   334 天前
    看了一下楼上的评价,大多数围绕着颜色、心理压力进行评价。
    我觉得吧,前期不用很在意这些因素,重要的是内在使用流程。
    流程 OK 了,再去完善这些细枝末节。
    流程不 OK,你 UI 做的再好看又有什么用呢?
    lackar
        89
    lackar   334 天前
    视觉重点难以联系内容重点,甚至是干扰,还不如纯文字。头图大大的“Login”就已经让整个产品在用户心中 pass 掉了。
    MapleObserver
        90
    MapleObserver   333 天前
    用 Stylus 瞎🐔儿调了下配色。

    几个地方有点问题:

    1. 个别图片好黑,比如那个 [数据字典] 的配图,图片设计好之后导出时出了问题?
    2. PNG 图片可以压缩下,省点加载时间和流量。
    3. 客户端页面,有个按钮漏了 class

    ![]( )

    ```
    /* ==UserStyle==
    @name showdoc.com.cn
    @namespace github.com/openstyles/stylus
    @version 1.0.0
    @description A new userstyle
    @author Me
    ==/UserStyle== */
    @-moz-document domain("showdoc.com.cn") {
    .body {
    color: #393e46 !important;
    }
    .header {
    background: #F3F4F6 !important;
    }
    .logo {
    filter: invert(100%);
    }
    .hbanner {
    background: #F3F4F6;
    }
    .hbanner-txt h2 {
    color: #393e46 !important;
    }
    .hbanner-txt .list .num {
    color: #F3F4F6;
    }
    .hbanner-txt .btns a.on {
    background-color: #5991f3 !important;
    color: #eeeeee !important;
    border: 1px solid #5991f3 !important;
    }
    .hbanner-txt .btns a {
    border: 1px solid #393e46 !important;
    }
    .hrow .img {
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, .5));
    }
    .hrow1,
    .hrow3,
    .hrow5,
    .hrow7 {
    background: #f7f7f7 !important;
    }
    .hrow2,
    .hrow4,
    .hrow6 {
    background: #eeeeee !important;
    }
    .regbg {
    background: #eeeeee !important;
    }
    .downpage {
    background: #f7f7f7 !important;
    }
    }
    ```
    MapleObserver
        91
    MapleObserver   333 天前
    忘记说了:

    每个段的文字内容都比较少,而高度又太多,整体看着会觉得缺乏内容,建议缩减一下高度,或者优化下文案。
    又或者部分内容,做成 3-4 栏并列的方式,减少滚动长度,看着也比较有内容。
    以及,配图还是感觉略丑🐒建议翻一翻公共免费素材库,比如: https://interfacer.xyz/
    star7th
        92
    star7th   333 天前
    @MapleObserver 感谢建议。你这个方案不错,我顺着这个方向再优化下
    MapleObserver
        94
    MapleObserver   332 天前
    @star7th 其实你们可以直接把顶部导航菜单那几个页面(客户端、价格、联系)全部集中在首页,做成一个产品单页就行了。
    alisasiky
        95
    alisasiky   332 天前
    @3x1415926535 hha 真乌鸦设计师
    bianqurenfm
        96
    bianqurenfm   331 天前
    设计师成功的把话题带偏了,都没人讨论你产品本身了😂
    star7th
        97
    star7th   330 天前
    @MapleObserver 我在昨天假期的时候,根据你的建议改了一版。但是我发现如果要改成这种灰色背景风格的话,图标必须换才行,不然比现状更难看。而我一时找不齐那么多图标,所以还是先保持原风格吧。目前我是把导航条变窄了些,文字变小一点。然后,中间的蓝色和白色背景,改成了某深色背景,这样跟黑色 /深灰色能平滑过渡,不会“亮瞎眼”。
    目前可能只能这么做了,要换风格可能还是得另外找设计师换一套图标。
    Boor
        98
    Boor   330 天前
    @star7th 我看了你改的页面。换回没改之前的吧,现在更差
    star7th
        99
    star7th   330 天前
    @Boor 现状更差吗,好吧,我晚点有时间再改回去。
    Boor
        100
    Boor   330 天前
    @star7th 太为难你了。。。我觉得你要不就纯黑好了,要不就黑白配。
    1  2  
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2641 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 13:16 · PVG 21:16 · LAX 05:16 · JFK 08:16
    ♥ Do have faith in what you're doing.