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

个人博客也需要设计规范

2019-09-16
伍子蛇 发布在 雜文
2213
6min
2485 °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咖啡
- 请作者喝一杯咖啡吧!速溶的也可以 -
点点广告也是支持作者哦
討論區
  1. Lvtu says:

    非常详细和规范,有点像VIS。。。。。

    1. 伍子蛇 says:

      嘿嘿,其实自己这个网站没有严格的设计,都是直接写的代码😂logo也很随意,辅助图形什么也都没做。
      写这篇博文还是为了抛砖引玉,大家都折腾地更好看

  2. 汝者非鱼 says:

    网页尺寸这一条也分习惯情况,像我这种个人博客多数给自己看,而自己大多数用笔记本,所以800px结合整体效果我觉得非常完美。宽度太多笔记本上的排版就很宽了,留白太少了。比如我现在访问你的网站,我就觉得两边留白太少,内容太满溢出来了,但我知道如果是台式机上访问,它又是刚刚好这种状态。

    1. 伍子蛇 says:

      可能是我主观的认为现在电脑的分辨率都很大了。
      回答一下您:要做自适应,必然要设计宽度大于1000px的,以及小于1000px的,再者手机的,从大到小写自适应,各个分辨率的适应方式写的越多,就越满足更多的用户。
      单纯800px宽度的网站,在很多人的电脑上看起来就很有“时代感了”,细细的一条,定然是不好看的。
      我的网站也确实没有做ipad这种适配以及考虑800左右的像素,感谢提醒。

      1. 汝者非鱼 says:

        网站有点问题,我明明有 gravatar 头像,不过用的是 qq 家的邮箱地址,你没有适配。还有一点,我用笔记本回复之后页面就出错了,乱七八糟的。

        1. 伍子蛇 says:

          是这样的,我博客有蛮多没有博客的朋友,所以如果是用QQ邮箱的话,是调用QQ头像,否则才调用gravatar,因为不太好判断gravatar是否有,所以没有判断是QQ邮箱并且有gravatar头像的情况。
          (刚才在改代码,恰巧被你碰见了😂)

  3. 林浩楠 says:

    网站做的不错,赞

  4. 拜读设计大佬的文章。且别说黄金分割,自适应等,单一个颜色搭配就很难,而且一个站点一般不超过三四个的颜色值,更是让我们设计小白难上加难

    1. 伍子蛇 says:

      哈哈,谦虚了,你的网站还蛮好看的。
      从读书到现在我自己设计制作过很多网页,回头看这些当时觉得很好看的东西都像shi一样。
      做自己喜欢的事情,好不好看自己开心就好,哈哈

  5. 执迷不悟 says:

    看了看自己,简直无地自容😁

    1. 伍子蛇 says:

      终归的还是自己开心就好,能展示自己想展示的自己就行~

      1. 执迷不悟 says:

        这么说我爱听,我的博客虽然丑陋但自己喜欢够用也就蛮好了嘻嘻

    1. 伍子蛇 says:

      你网站前段时间怎么挂了?

      1. Fong。 says:

        用的是日本服务器, IP 被封了。

Leave a Reply to Fong。 Cancel reply

Your email address will not be published.

@
+
=
取消
發送
最新文章
Latest articles
因利来,因利走
2020-07-30 37 °C
为什么你觉得头(大脑)很重要?
2020-06-23 428 °C
自己的近况,Better man?
2020-06-10 662 °C
构建梦境的库,GoodNight.js
2020-06-06 1086 °C
最新活动
Latest events
随机推送 / Random push
715 °C
黑暗中妖艳的红 丨 夢境
193 °C
好好的不行吗 丨 陳老茂
2407 °C
梯中窥人 丨 陳老茂
220 °C
羊昌河 丨 陳老茂
×
当前选择的是支付宝