登錄
手機訪問
街坊 · 留言 關於我 小遊戲
为了更好的体验请切换为竖屏
回到顶部
分享页面
生成海报
邮箱订阅
今日访问
×
打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮
正在创建海报

个人博客也需要设计规范

2019-09-16
伍子蛇 发布在 雜文
2213
6min
9891 °C

今年重新拾起自己的个人Blog,空闲时间也看了很多现在还留存的Blog,目的是为了学习一下,看是否和当初有些不同,看完着实有很多点想吐槽。有部分网站还停留在电脑刚问世时的设计上,有的停留在令人怀念的非主流风格上,我在友链交换条件中写了一条:审美不在线的不换

在我看来一个网站不在于有多么炫酷,起码要有条理和规则。老布鞋、麻布裤、棉麻衣照样能穿地很好看,就像那句老话“衣服不需要太好看,至少要干净。”

很多博主在一路的摸爬滚打中略懂了一点点CSS,便开始大阴影、扁平化、凹凸、水晶风格混搭,给人一种时空错乱中非常难受的观感。当然,独立博客就是自己个性的表达,美丑都是自己对个人小空间的诠释,本网站的导航也是比较另类的,也有很多看起来很丑的站点人气都还居高不下,真是让人羡慕和诧异呀。

言论仅代表个人观点,只是希望大家的博客都能更有范儿,脱掉其实牛鬼蛇神还自诩个性的外衣。

伍子蛇

先展示一下孤斗网站的简要设计规范

常见设计规范简介

用于抛砖引玉并授人以渔
- 工作流程 -

以上是正常的工作流程,但大家或许没有这样的工匠精神,就吸取一点精华,不要求能设计,知道哪里不足能修改也行呀。

网页尺寸

网页尺寸与用户屏幕相关,而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率,其他分辨率用适配的方式来解决。

做网站时建议按主流的分辨率1920x1080px来设计。所以通常网站设计稿宽度为1920px。

每个屏幕的高度约为900px。为什么是900px呢?因为1080还要减去浏览器头部和底部高度,大约就是900px了。

内容安全区域为1200px (或1000px / 1400px)。以这个尺寸来设计相对标准。

伍子蛇 say:

宽度只有几百px的网站真的很丑!真的很丑!真的很丑!

不要单纯为了移动端来做一个PC端上很丑的网站,做成内容区域在1200px的网页也可以很方便地为移动端适配。

当然你喜欢复古风,可以设计宽度很小的网站,就像那个电脑屏幕全部都还很小的年代,请自己把控。

伍子蛇
文字规范

网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。

比如在苹果电脑上看到的文字效果和 Windows 系统电脑上看到的文字效果就有所不同:苹果会对文字进行渲染,而 windows 的文字几乎充满了像素颗粒。按照用户占比来说无疑 Windows 的用户是主流,所以尽管我们可能使用苹果电脑设计网页,但是设计出来的网页效果也应该和 Windows 显示一致。否则我们设计完漂亮的设计稿,程序员无法还原成我们设计的样子。

另外,字号的大小也非常重要。网页的显示区域决定了文字不可以过大,在网站设计中我们的文字大小一般来说是12-20像素。为什么不能比12px更小?因为如果比12像素更小的中文无法放得下复杂的笔画了。而且奇数的文字表现和适配都不好做,也就是说我们必须使用偶数的字号来设计。

孤斗网友 say:

字体大小怎么适应不同的屏幕呢?

伍子蛇 say:

字体单位 em,rem 了解一下

另外,请不要把文字用一个很挤的框框住,那样感觉文字都要窒息了,再美的文字都要失去生命力。非要框起来就给它一个padding,让它自由一些,快乐一些。行高尽可能大一点,1.5倍行距~2.5倍行距都没有任何问题,挤在一起谁有心情看又丑又长的裹脚布呢。

伍子蛇
按钮

按钮的风格在过去的十几年发生了很大的变化,由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」,现在更流行的是扁平风格。如果按钮在一张图片中,为了不影响图片的美观性,会去掉填充只保留边框,这种设计方式叫做幽灵按钮。注意在设计按钮时要兼顾网站的整体风格,轻易不要尝试不同风格的碰撞。

个人建议
  • 网页要有留白,不要过于紧凑,留白就是以“空白”为载体进而渲染出美的意境的艺术。
  • 风格不要混搭,比如你要自己装修房子,五颜六色的墙面以及古典、现代、欧式等等的软装硬装都存在的话是很难驾驭的。混搭需要极高的设计造诣才能打破常规体现美,否则请使用尽可能少的颜色并且贯穿某一种设计风格,比如扁平化、伪扁平。
  • 字体大小(font-size) 和 字重(font-weight) 要有把控,能直观的区分不同区域的权重。
  • 图标尽可能统一风格,能自己画的自己画,有很多平台可以参考,比如很有名的Iconfont。最好用svg,因为svg是矢量的。非矢量图标在你电脑上可能是清晰的,但在高分辨率的电脑上,比如mac上会非常模糊。

你们也许没有发现,这篇文章的所有图片都是自己画的svg
包括文章最开始的那张图片,这就是对审美有要求的人该有的态度

就说到这了,江湖再会~

伍子蛇
想学网站的朋友点击下方链接
「 教你:一天入门写网页 」
雜文
伍子蛇
送TA咖啡
- 请作者喝一杯咖啡吧!速溶的也可以 -
再不济留个言吧

文章分类 : 雜文

作者 : 伍子蛇

留言 : 50 条 »

写于 : 2019年09月16日     下午11:28

討論區
  1. 营销号(强制匿名)说道:

    文章不错

    1. 伍子蛇说道:

      贺州市的朋友,请你自重

  2. 征铎说道:

    果然一般敢谈设计的人博客都很好看啊,这篇也是😏。处处都有和一般模板不一样的地方,小细节特别多,但是丝毫不显突兀和杂乱,真是无处不精致。不过更难得的是内容也很丰富,看了书评页不像别的站那样只是转录豆瓣只能看到书封,贵站的还能直接看到书评打分细节,真好啊。虽然我自己的站是直接托管+套主题,但我还挺喜欢看别人精心设计的主题的,欣赏欣赏也是一种享受嘛~我挺喜欢那种花里胡哨动漫风的✨但博主这种当然更好啦哈哈。楼上@扶苏 的博客也蛮特别的,有一种怀旧又新潮的感觉,颜色搭配带着旧时代的感觉,但是圆角、图标之类的细节又很符合现代审美。

  3. 扶苏说道:

    受教了,的确很赞同大神的观点,要有一定的审美风格,不是五颜六色就是美。不过,很多博主自己也不会做主题,一般都用现成的,比如我,哈哈,唯一能做的就是凭着自己的审美观,在千百种主题中选出自己喜欢的那个。请大神指点下我现在的主题。

    1. 伍子蛇说道:

      不存在指点,那我说下自己的拙见,整体看来排版没有大问题,但是比如右边栏,日记归档和数据统计这两个栏目的右边距是不同的,并且左边距个人感觉还是窄了,或许应该和文章的边距相同。
      布局是始终全屏,这样的设计是很少的,一般文字类的模块都会有一个max-width居中,在我的iMac的大屏幕下就显得很空了,不是很友好。
      段落没有左右对齐,感觉不严谨
      顶部的渐变会显得有年代感,就像我文中的web2.0,以及顶部的彩色条,也是年代感。
      说了半天,自己喜欢就行,博客的目的就是取悦自己,多写点东西嘛,欢迎常来。

      1. 扶苏说道:

        非常感谢,说的都在点子上,近期调整下,只是技术有限,只能尽量美观大方一些

发表回复

您的电子邮箱地址不会被公开。

@
+
=
取消
發送
最新文章
Latest articles
由攻壳机动队思考永生
2022-08-15 44 °C
陪你很久很久
2022-08-10 97 °C
君の名は。
2022-07-31 105 °C
天道——遥远的救世主
2022-07-28 167 °C
随机推送 / Random push
522 °C
麻将速学|子蛇教你打麻将 丨 雜文
1455 °C
同病相怜 丨 陳老茂
6108 °C
原创视频 丨 刀刀校园搭讪 丨 信天翁
2902 °C
没事找事 丨 陳老茂
×
当前选择的是支付宝