对非主流的设计排版说不！

一些关于网页的小分享，文末有我想说的话。...

我真的有一阵没更新了，临近毕业事情多了也忙碌了起来，这次想说一说最近对我影响比较大的事情。我写这些文章也许不是那么的有意思，更多的是一些比较实际的经验的总结，所以如果你有空，就当无聊的教科书来看一看吧。

是的，我本以为进步这种事情是很难用实际的什么感受去衡量，但是我发现对比我进鹅厂实习以来两个月以前和两个月以后做出来的东西，有些进步是用肉眼可见的。

在这里得到的最大的结论是：只有优秀的环境和优秀的人才能促使你进步，并且不能闭门造车，去接触真实的项目和不同的人，才是正确的方法。

由于最近的两个多月我一直都是在做界面的排版布局等工作，接触到的视觉类的设计明显占比有些低，但是正是这些布局和排版的工作，使我在很多方面得到了潜移默化的提升，今天趁着项目阶段需求的完结，抽空写出来做一个记录，希望能有所帮助。

一、大家来找茬？

今天我要拿我自己的黑历史开刀了，鼓起勇气面对过去才是真的勇士！

先贴上一张我在去年10月份做的一个我现在姑且称之为网页的作品。



这种新手飞机稿还拿出来对不起伤了大家的眼睛。。。

先说网页内容部分的有效区域，我们都知道，在做网页的设计时，不能把东西全都填充满，两边一定是会有留白的部分，中间的内容我们称之为有效区域，这是是最基本的规则不多赘述，当时我对这些规则的理解并不是很深刻，于是就出现了下面这样。



设计规则中的四个基本原则之一：对齐，在我这里就完完全被忽略掉了。整体对不齐就算了，头部的两边大留白还没有对齐!这只是一眼看过去就能发现的最基本最新手的问题，之后呢？

Banner。

所以里面不知道多大的字号和莫名其妙的字体还有根本看不清的搜索框都是什么鬼啊！！！



搜索的icon要不要再粗糙一点啊！！这么大怎么不放到天安门广场正中央去呢！！！And,明明是阳光灿烂的向日葵和晴天非要把色调弄的狂风暴雨到底是几个意思！！！

Banner,作为打开网站的第一眼，几乎很大程度就决定了我要不要往下滑以及我要不要长时间停留在这里。

经测量，宝宝的banner标题用了68号字，搜索的提示也用了24号字，上一篇我提到过网页正文字体的大小通常在12、14、16号之间选择。所以这是什么概念 ？

一张精致的小脸上面有一个

半张脸大的鼻孔，可以脑补吗？

是不是一眼就可以看到你想要捕捉的信息！

高斯模糊是一个很机智的选择，还有普遍比较常见的就是加黑色遮罩，一般是百分之50的透明度，这时候要保证图片的绝对清晰，就会有一种低调高端上档次的感觉啦！

比如：



对比之后，可以肯定这个一年前的网页设计根本就是一个极其失败的排版案例，完全的新人+初级+小白。至于下面的色块区分，我现在感觉到的问题就是颜色区域太实心，视觉分割太严重，左右的关联性欠缺，拥挤，不舒服。

所以本来想要尝试修改一下，但是无奈年代久远源文件已经丢失，况且它惨烈成这个样子完全让我放弃了大刀阔斧的想法。

我会重新再做一个谢罪的！

二、在哪里改进？

由于我现在工作所做的东西还没有正式上线和大家见面，所以我不方便拿出来做对比案例分析说明有没有进步。但是现在可以拿一个我在今年2月份也就是我还没有在腾讯实习的时候所做的东西出来作比较。前后4个月，尽管也是有一堆槽点，但是我已经决心要做2.0版本啦~

如下：



由于微信图片的高度要求限制，我只能裁切一部分，完整版地址如下：

旅行志_V1.0 All Design

http://www.ui.cn/detail/102546.html

我不说字体大小和类型的问题，因为那阵我对字体大小以及选择都处于一个完全白痴的状态，此后恶补专业知识，所以在改进新一版的时候，字体的大小和选择将成为改进的重点。

说说这一版的优缺点。

优点

首先，该对齐的都对齐了，这真的很好。其次，略掉了非主流的英文字体，OK。

第三就是区域的划分变得清晰了起来，没有揉到一团，也没有紧凑的文字。配色采用了黑白灰和一种出挑的红色，对比鲜明。

缺点

字体字体字体，糟糕的事情要重点强调，字体的大小实在是一大败笔。除此之外，交互的不明显以及图标的不够精致也是一大缺憾。

这些问题我都会在后续的过程中不断改进，期待能有更好的进步。

高潮来了！！还要吐槽一点的就是，在并没有经过我的允许的同意下，这一版设计已经被不知名人士拿去做了网站。在这里必须要把它裱出来，或者百度搜索【旅行志】，第2页就可以搜索到。网址在这里：

http://www.benbendan.com/

点击可以发现这个非常渣渣的还原度已经激发不了我的吐槽欲望，只想说死美工也是要赚钱吃饭的，你这样真的好吗？三、要注意什么？

①字体的选择、使用。网页正文字体建议使用微软雅黑Regular 14号足够，或者还会选择Windows LCD模式，获得更加真实的预览效果。其他的要放在Banner上或者Title之类的设计字体，建议单独做成png，便于整体的修改和操作。

②排版的原则，重复，对比，亲密，对齐。同样的页面对齐方式最好有统一感，不要一会左对齐一会右对齐，居中对齐也尽量少用吧，毕竟不不太符合正常的阅读顺序，而且增加辨识负担。

③精致感的前提是该对齐的对齐了，该大的大，该小的小。现在主流的设计中已经很少看见浮雕渐变大阴影的非主流设计了，偶尔会见层次区分，也大都是加1px的淡灰色投影或者干脆用1px的灰色线条来表示效果。弥散阴影是最近流行起来的很棒的小清新配色，在drlbbble上时常可见：



④图文逻辑要清晰。相同的区域模块一定要摆在正确的位置，不能将它们分隔开。而不同的地方则要果断的有区分的表示。就像我最开始吐槽的那张网页，说实话我现在还没分清图片对应的文字区域是上下左还是右，如下：

最后，预祝我改版成功吧！

另外说一下更新，当我觉得有收获有进步的时候才会来更新新的东西，每次的更新也都是诚意满满的写作，而不是说每天草草发发段子哗众取宠博关注就完了。

“世界始终是自己的，无关他人。”

致敬昨天离世的杨绛先生，这也是我一直所追求的内心安定，写这些不需要多高的人气和追逐，只求自我的提升和价值升华。

    关注 七媗Pic