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

个人博客也需要设计规范

2019-09-16
伍子蛇 发布在 雜文
2213
6min
2493 °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. 青山 says:

    搞设计的真不是一般人

    1. 伍子蛇 says:

      爱好罢了,搞着玩

  2. 卡卡讯 says:

    没学过设计,没啥审美观,不过大佬的网站确实不错!

  3. 三棵树人 says:

    在PC端看起来,整个页面色彩搭配很舒适,画的画也不错。
    自己动手,丰衣足食,有一门技术真好。

    1. 伍子蛇 says:

      感谢喜欢,不断进步,共勉

  4. 老杨 says:

    技术不行,审美也不行,有心无力,基本上瞎折腾……

    1. 伍子蛇 says:

      自嘲了,你的站点非常得体

  5. 北海轻歌 says:

    很有感觉的博客

    1. 伍子蛇 says:

      刚去了你的网站,坚持做自己喜欢的事,摄影、设计都是基础技能了,秀起来~

    1. 伍子蛇 says:

      摸摸扎~

  6. Unee Wang says:

    昂~~~美化博客,从入门到放弃

    1. 伍子蛇 says:

      刚去了你的网站,总体是还行的,个人建议边栏短一点,行高line-height设为2,会更好

  7. DOUMA says:

    博主是大牛,可惜网站停了好久人气还没起来,放心,时间问题!

    1. 伍子蛇 says:

      过奖了,随缘吧~

  8. DOUMA says:

    是不是看到很多人的博客,抑制不住地想要吐槽,想想还是敷衍了他一句挺好的😂

    1. 伍子蛇 says:

      每个人有创意审美之高低和能力见识之强弱,在自己地盘随便侃侃就行,哈哈。

    2. YIR says:

      以前我想把我的博客弄成像QQ空间那样子,也想弄成labix.net这样子,后来我放弃了,原因是不会弄。

      1. 伍子蛇 says:

        这是不错的想法,有人仿过百度仿过google,仿个QQ空间,那也确实挺酷的,最好仿成零几年的那种。可以尝试一下,其实很简单的,说不定你看看我文末的那篇文章你就学会了😆

      2. 伍子蛇 says:

        要是你能拉人来买QQ空间的WP主题,这个事情就交给我了,大大的分成,哈哈哈

        1. YIR says:

          但想想,就算有主题了也不像以前那样了。以前想有个网络地,然后和世界互通,想交流自己的想法,现在发现不存在的,大部分人已经被各大公司注册账户中心化了。

          1. 伍子蛇 says:

            现在流行的是圈层文化,rap圈火了,街舞圈火了,都是小众喜好,博客圈管他火不火呢,玩呗~

Leave a Reply

Your email address will not be published.

@
+
=
取消
發送
最新文章
Latest articles
因利来,因利走
2020-07-30 38 °C
为什么你觉得头(大脑)很重要?
2020-06-23 431 °C
自己的近况,Better man?
2020-06-10 662 °C
构建梦境的库,GoodNight.js
2020-06-06 1086 °C
最新活动
Latest events
随机推送 / Random push
707 °C
I am Joker 丨 夢境
846 °C
一个非常奇怪的梦 丨 夢境
2493 °C
个人博客也需要设计规范 丨 雜文
177 °C
语文课与唱歌 丨 陳老茂
×
当前选择的是支付宝