今年重新拾起自己的个人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倍行距都没有任何问题,挤在一起谁有心情看又丑又长的裹脚布呢。
伍子蛇
按钮的风格在过去的十几年发生了很大的变化,由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」,现在更流行的是扁平风格。如果按钮在一张图片中,为了不影响图片的美观性,会去掉填充只保留边框,这种设计方式叫做幽灵按钮。注意在设计按钮时要兼顾网站的整体风格,轻易不要尝试不同风格的碰撞。
- ① 网页要有留白,不要过于紧凑,留白就是以“空白”为载体进而渲染出美的意境的艺术。
- ② 风格不要混搭,比如你要自己装修房子,五颜六色的墙面以及古典、现代、欧式等等的软装硬装都存在的话是很难驾驭的。混搭需要极高的设计造诣才能打破常规体现美,否则请使用尽可能少的颜色并且贯穿某一种设计风格,比如扁平化、伪扁平。
- ③ 字体大小(font-size) 和 字重(font-weight) 要有把控,能直观的区分不同区域的权重。
- ④ 图标尽可能统一风格,能自己画的自己画,有很多平台可以参考,比如很有名的Iconfont。最好用svg,因为svg是矢量的。非矢量图标在你电脑上可能是清晰的,但在高分辨率的电脑上,比如mac上会非常模糊。
你们也许没有发现,这篇文章的所有图片都是自己画的svg
包括文章最开始的那张图片,这就是对审美有要求的人该有的态度就说到这了,江湖再会~
伍子蛇
搞设计的真不是一般人
爱好罢了,搞着玩
没学过设计,没啥审美观,不过大佬的网站确实不错!
在PC端看起来,整个页面色彩搭配很舒适,画的画也不错。
自己动手,丰衣足食,有一门技术真好。
感谢喜欢,不断进步,共勉
技术不行,审美也不行,有心无力,基本上瞎折腾……
自嘲了,你的站点非常得体
很有感觉的博客
刚去了你的网站,坚持做自己喜欢的事,摄影、设计都是基础技能了,秀起来~
手动点个赞
摸摸扎~
昂~~~美化博客,从入门到放弃
不会,咋整?
刚去了你的网站,总体是还行的,个人建议边栏短一点,行高line-height设为2,会更好
博主是大牛,可惜网站停了好久人气还没起来,放心,时间问题!
过奖了,随缘吧~
是不是看到很多人的博客,抑制不住地想要吐槽,想想还是敷衍了他一句挺好的😂
每个人有创意审美之高低和能力见识之强弱,在自己地盘随便侃侃就行,哈哈。
以前我想把我的博客弄成像QQ空间那样子,也想弄成labix.net这样子,后来我放弃了,原因是不会弄。
这是不错的想法,有人仿过百度仿过google,仿个QQ空间,那也确实挺酷的,最好仿成零几年的那种。可以尝试一下,其实很简单的,说不定你看看我文末的那篇文章你就学会了😆
要是你能拉人来买QQ空间的WP主题,这个事情就交给我了,大大的分成,哈哈哈
但想想,就算有主题了也不像以前那样了。以前想有个网络地,然后和世界互通,想交流自己的想法,现在发现不存在的,大部分人已经被各大公司注册账户中心化了。
现在流行的是圈层文化,rap圈火了,街舞圈火了,都是小众喜好,博客圈管他火不火呢,玩呗~