登錄
手機訪問
街坊 · 留言 關於我 小遊戲 FlagList
回到顶部
分享页面
邮箱订阅
×
打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

个人博客也需要设计规范

954 °C
伍子蛇
2019 / 09 / 16

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

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

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

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

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

常见设计规范简介

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

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

网页尺寸

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

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

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

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

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

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

伍子蛇
文字规范

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

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

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

为了适应不同的屏幕,字体大小单位em,rem了解一下。

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

伍子蛇
按钮

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

个人建议
  • ① 网页要有留白,不要过于紧凑,留白就是以“空白”为载体进而渲染出美的意境的艺术。
  • ② 风格不要混搭,比如你要自己装修房子,五颜六色的墙面以及古典、现代、欧式等等的软装硬装都存在的话是很难驾驭的。混搭需要极高的设计造诣才能体现美,否则请使用尽可能少的颜色并且贯穿某一种设计风格,比如扁平化、伪扁平。
  • ③ 字体大小和自重要有区别,很直观的区分不同区域的权重。
  • ④ 图标尽可能统一风格,能自己画的自己画,最好用svg,当你把图标换成svg后你会明显觉得网站清爽了一些。

你们可能没有发现,这篇文章的所有图片都是自己画的svg
包括文章最开始的那张图片,这就是一个做设计的人该有的态度

就说到这了,江湖再会~

伍子蛇


想学网站的朋友点击下方链接

「 教你:一天入门写网页 」
雜文
伍子蛇

送TA咖啡
- 请作者喝一杯咖啡吧!速溶的也可以 -
点点广告也是支持作者哦
討論區
  1. 拜读设计大佬的文章。且别说黄金分割,自适应等,单一个颜色搭配就很难,而且一个站点一般不超过三四个的颜色值,更是让我们设计小白难上加难

    1. 伍子蛇 says:

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

  2. 执迷不悟 says:

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

    1. 伍子蛇 says:

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

      1. 执迷不悟 says:

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

    1. 伍子蛇 says:

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

      1. Fong。 says:

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

Leave a Reply to 伍子蛇 Cancel reply

Your email address will not be published.

+
=
發送
最新文章
Latest articles
我的朋友——狗哥
2019-12-10 76 °C
RGB颅内成像
2019-12-03 241 °C
I am Joker
2019-11-25 73 °C
且和
2019-11-21 105 °C
夜阑梦境管理局
2019-11-14 70 °C
熱門作者
Popular author
随机推送 / Random push
105 °C
三分钟 丨 陳老茂
913 °C
福建之行 丨 信天翁
76 °C
我的朋友——狗哥 丨 信天翁
136 °C
带儿子上晚自习 丨 陳老茂
×
当前选择的是支付宝