B2 Pro主题

之前春哥和我聊过,要我帮他设计一下主题的UI,我看群里面的朋友喜欢各种样式都有,怕满足不了大家的审美,就退缩了😂。后来看这群里面好多大佬,改的子主题样式都很牛逼,一时手痒后来想再尝试改一下(很多有想法的设计,没有实现,部分是自己的代码能力)…

有很多朋友问我子主题多少钱….在这里说明一下:本主题暂时没有售卖的想法。因为我觉得服务一个子主题要有足够精力、诚意和坚持,像我这种做个网站都是三天打鱼两天晒网的,想了想还是算了。

来自一位快要变成美工的设鸡师

改之前还是做了UI设计,花费了差不多7天,包含了基础组件、区块组件和15个页面。

整体上还是没有把春哥的主题大改,主要是细化春哥的主题,因为怕春哥更新后好多东西又要改。下面记录一下改版的思路:

一、整体样式

整体样式的设计采用的卡片设计,这种设计风格其实对于设计来说比较容易一点。而且优点很多:

  1. 层次分明,结构清晰
  2. 有明显的视觉分割
  3. 布局更为灵活
  4. 修改卡片样式时,不会影响其他卡片化的组件(主要是不会影响视觉间距)。
  5. 设计比较简单😁

整体间距也做调整,间距变小,让内容更加紧凑。但这种风格如果设置的页面宽度比较宽的话(比如1400px)就会很别扭,也不能把圆角设置的太大…

整体的字体大小和颜色也规范化了一遍,重新替换了一套icon图标。

增加了一个英文字体DIN,在一些特殊的统计模块上用到了这个字体(不是全局修改)。

二、头部header样式

头部参考好多样式,因为B2有两层头部,说实话我不喜欢这种样式,因为整体视觉上看起来会显得头部header比较重,所以采用了知乎的头部样式。做完以后看着样式OK,到第二天再次修改主题的时候,才发现头像的右上角的弹窗也被局限在了header里面(因为用了overflow: hidden),想了各种方法,最后需要把头像的弹窗拿出来,然后再用js操作。本着不大改的思路(嫌麻烦),最后修改为:隐藏第二层,滑动的时候第一层上去,第二层出现。

第二层的也加上了logo和搜索框(不加搜索框只有一个按钮的话感觉右边视觉比较轻),我看春哥的代码里面本来就有logo,只是隐藏了。

三、首页模块

现在首页模块主要修改了比较常用的模块:网格样式、瀑布流样式、列表样式、自定义代码。

没修改的:文章组合样式、文章纯文本、文章纯文本带自定义字段、专题的所有样式、商品所有样式。

1、模块导航

导航的设计还是采用了我之前的子主题的样式,用胶囊按钮,增加“查看更多”按钮,我没有去优化模块下面的“加载更多”的按钮,因为在首页去加载更多,显得首页内容过多,分散用户的目的性。

2、文章模块

文章模块没有做大的修改,只是规范化了字体和颜色

3、侧边栏

文章聚合

这个侧边栏应该是最重要的一个侧边栏,但是在观察了一些时间后,发现用户几乎不会去点击和使用这个组件,这不是我想看到的结果,所以我想尽办法去突显这个组件。

  • 文章聚合-大图样式,把字体放到了图上面,尽量缩小这个组件的高度。
  • 文章聚合-小图样式,添加了一个排行No. 具体参考的威锋,增加色彩点缀。
  • 文章聚合无图样式,也添加排行No.
  • 新增了作者侧边栏小工具。

用户侧边栏

  • 去掉了用户的余额和积分显示,增加用户的安全和隐私
  • 任务完成度背景色和网站背景色冲突了,所以把任务完成度上调了一层,同时用来分割层级。

4、右侧跟随工具条

同时沿用之前的子主题的样式。

5、底部样式

底部样式也没怎么修改,同时沿用之前的子主题的样式。只是修改字体和样色。

6、首页专题样式1

修改了首页模块的专题一的样式

四、分类页面

之前改的子主题看着分类页面的筛选也挺好看的,但总觉的那里有点不对劲。看的时间长了有了审美疲劳,觉得筛选模块用大的色彩背景太抢人眼球了(春哥还加了波浪动效!!!果然是程序员思路…哈哈哈😆开个玩笑),本身这个模块要弱于下面的主要内容的,我希望用户打开这个页面第一视觉注意力还是集中在分类的文章上,当用户有目的性的查找想要的文章时,再去注意到筛选模块。所以….我把波浪动效和色彩背景全部去掉!😬

增加了面包屑导航 现在还没做。

五、文章内页

把下面的“分享、收藏和点赞”按钮悬浮在页面的左侧,把这模块的视觉层次提高,增加用户的社交性。因为文章评论人数多的话就会把评论框压倒最下面,用户要多次滑动才能看到,所以在这个模块中添加了个“去评论”按钮,点击后滑动到评论框。

文章内容规范:

  • 修改了H1\H2\H3\H4\H5\H6的标题大小、颜色和间距;
  • 修改段落正文样式,增加阅读性。

评论模块:

  • 修改用户的头像,统一头像
  • 修改了评论的“点赞、回复”,让这两个按钮更加明显
  • 修改了评论的层级,去掉了评论中的评论色块

赞赏模块:是参考NPC网站的哔哩哔哩赞赏样式,增加趣味性。

文章样式2

文章样式2修改成图片文章展示的样式,想着把这个页面面做成弹窗效果的,搞了半天,虽然实现了,但是有许多BUG(代码能力🌶🐔)。最后还是放弃了,取了个折中方案,下面是修改的样式:

文章样式4

文章4的样式修改为资源下载文章。

六、圈子

圈子作为一个重要的网站社交模块春哥做的非常不错,我修改主要是优化了细节:字体、颜色和间距。

  • 修改了发布圈子文本框这块的间距,和圈子统一对齐;
  • 圈子内容的对齐方式修改了一下,,让用户一眼就能区分出每个用户发布的圈子。
  • 突出了点赞按钮(根据用户懒人心理,用户一般很少会去评论,大概率都是赞或者踩)。这个我也很纠结,其实我想弱化一下的(改为灰色的背景),这样就不会圈子一竖排下来都有个浅蓝色的方块。这个我还是在研究一下。。。
  • 修改了一下所属圈子的样式;
  • 圈子“参与讨论”这个按钮,春哥在做的时候应该是有点纠结。因为有用户提到这个按钮不显眼,然后春哥把他做成了按钮形状😂。我觉得大可不必,因为很多出名网站(微博、推特等)已经把用户养出了习惯,当用户有评论的需求时,第一步都是去点击“xx条评论”。所以我这边只是增加了个icon,字体加粗了
  • 修改了圈子一张图片的展示样式;
  • 圈子一张长图的高度,做了一下限制
  • 优化了圈子评论模块的样式,评论内容加了阴影,抬高一层

给TA买糖
共{{data.count}}人
人已赞赏
瀑布图

腾讯设计师用这个素材整理方法,提高35%的工作效率!

2021-5-8 13:14:40

列表图文章测试未分类瀑布图网格图

文章段落示例

2021-3-4 11:29:37

16 条回复 A文章作者 M管理员
  1. 嗨,这是一条评论。
    要开始审核、编辑及删除评论,请访问仪表盘的“评论”页面。
    评论者头像来自Gravatar

  2. 怎么才能使用这个子主题呢 感觉很nice 哈哈😱😱

    • 子主题不出售的,你可以看着我的样式尝试自己修改,很多都是按照我的意愿来修改的。针对不同的网站类型,某些细节可能不是你想要的😂。

    • 测试仪呀

      这个楼中楼改成圈子那样的就行了,这个太丑了

  3. Dshaw

    作者你好,听说你的主题后期可能内嵌到B2里面是真的吗

    • 主题修改君

      嗯 有可能,请关注看春哥改版:https://b2.7b2.com

  4. miknio

    大兄弟。你这个主题太好看了。我在憨宝下载了一个你这样的子主题,移动端滑动页面的问题是怎么解决了,求方法,感谢,期待你的回复。

    • 主题修改君

      、、、、、
      html{
      overflow-y: inherit;
      overflow-x: inherit;
      }
      加到@media screen and (max-width: 768px)这里面

    • miknio

      其他页面可以了。就是首页还是有问题,也不是缓存的问题😱

    • 主题修改君

      😂再加这个试试:
      .home .site{
      overflow-x: hidden;
      }

  5. 可汗网

    大佬,联系把移动端侧边栏菜单优化一下

  6. 可汗网

    大佬,建议把手机端首页分类文章的ajax筛选加上

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索