如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

常见的网页设计、文章设计错误
本文来自阮一峰分享

 1.内容未按逻辑分成块

用户可以根据逻辑块轻易的获取信息。

具体做法为：将padding设置为120px-180px，同时不同的逻辑块使用不同的背景。

2.每个逻辑块的空白大小不一致 

对于每个逻辑块，需要设置同等大小且适宜的空白。否则网页看起来会很混乱，作者不会对每个逻辑块同等对待。



 

3.Padding不能设置过小，否则用户无法将内容分为逻辑块

 为了这点，插入大的空白（至少120px），以使内容按逻辑块分开。





4.背景图片和文字 应该对比鲜明

 


5.在一页中，样式过多

太多不同 的排版和样式将会使得页面不太专业以及难以阅读。

解决的方法是，以字体为例，设置一种字体，字体为正常或粗体（保证在两种不同样式之内）



 

6.背景颜色块过于狭窄




7. 在一个狭窄的列中，放入了过多的文字

这导致用户阅读需跳很多行，整体看起来也不行。推荐的做法为，减少列的数量，精炼文字。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

名片，是品牌传递的重要工具，但往往被人忽视。虽然纸质的名片几乎已被微信媒介所取代，但是作为设计师更不应该放弃这种貌似不重要的设计。

相反，越简单的设计，更考验设计能力。一张名片，可以看出一个人是否真的懂得设计，因为里面包含太多基本功了。如果连一张简单的名片都做不好，更不要说其他的设计了。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

2019草莓音乐节的主题是“循环世界Circular World”。

摩登天空联合世界自然基金会(WWF)发起今年的音乐节主题“循环世界”，以环保为核心理念，携手海内外环保机构对草莓音乐节进行多方位环保实践，并聚合知乎、摩拜等多平台力量影响年轻人，让环保成为青年生活方式的一部分。

今年的主视觉海元素是被三个箭头环绕的草莓星球，表达了“循环世界”的主题。风格延续了去年的样式，色彩略有调整，并加入了太空元素。

今年的主视觉当然仍由摩登天空的当家工作室——MVM design label_工作室操刀。

这张是今年的主视觉海报。今年，MVM特地为各城市举办的2019草莓音乐节单独设计了专门的海报，一样的版式，不一样的内容，既统一又包含新意。

2019草莓音乐节武汉站

2019草莓音乐节成都站

2019草莓音乐节西安站

2019草莓音乐节上海站

2019草莓音乐节长沙站

在今年3月30日的“地球一小时”公益活动中，草莓音乐节把自己的参与定义为“草莓星球一小时”。

而武汉OYO酒店与摩登天空联合主办的活动中，一张以“音乐满房”为主题的插画也分外有趣——原来大家为了迎接音乐节，都关上门在房间里引吭高歌呀…

音乐节配套周边产品的销售，推广视觉设计也很有意思。

即使不是音乐迷，设计师对这样的设计也无法抗拒吧！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

目前从官方介绍来看，UI组件还相当齐全，可用它来快速搭建漂亮、时尚的网页和UI设计作品，下面一起来看看介绍。

关于 Shards 这个主题虽然免费，但并不代表它只有「表面」，制作者还为性能性能考虑，压缩版仅12KB大小，实在太好了，以这样的大小，制作出来的网页直接能秒开。

它并不是直接使用 Bootstrap 的设计样式，所有的组件都是重新设计，以便得到统一的风格！

着陆页演示

这是非常不错的UI KIT素材 ，它还包含了10个额外的自定义组件，可以让使用者快事制作着陆页。

演示地址：https://designrevision.com/demo/shards/extra/app-promo.html

演示地址：https://designrevision.com/demo/shards/extra/agency-landing.html

UI 组件演示

Shards 含有丰富的 UI 组件，网页端常用的元素几乎包含了，大方便用户自由定制。

颜色：

字体

图标支持900+ Material icons 和 Font awesome 两大图标库！

表单上的细节，也不容忽视：

还有日期组件的设计：

卡片

按钮

导航菜单

我想这些漂亮的元素，已经足够你设计一般的网页，即使不够，也完全可以自己利用 Sketch 源文件或 HTML 模板再创作。

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

当我们打开一个网站，我们会看网站界面是否美观，交互是否符合人性化，布局是否合理等等，这些因素对网站起到一定的影响作用，但最根本影响一个网站的是整个网站的可读性。
良好的设计应该都是可读的设计，如果信息都无法正常而清晰的传达，那么设计就失去了意义。设计的可读性和排版设计息息相关，与此同时，对比度的控制也是其中的核心。想要提升内容的可读性，让内容以更加顺畅、更符合逻辑的形式呈现在用户面前，可以通过以下几种方式来提高网页的可读性。

1.文字的可读性

要让文字提高可读性，可以通过调整字体样式、外边距、内边距、颜色和对比度等参数来提高文字的可读性。

• 字体样式：字体的样式会影响可读性。

• 行长度：每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽，阅读性差。同理，每行文字太短也不行，会给读者的眼睛带来压力，造成混乱。

• 外边距和内边距：和行距一样，元素周边和之间的空隙也影响着用户阅读文字本身。

• 颜色与对比度：文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字，就难以阅读了。设计师选择浅色字深色背景，或是深色字浅色背景，都是有原因的。对比使得字符容易阅读。

目前文章内容流行的字体是14PX（像素），这样不容易造成视觉疲劳。可以统一去设置全局的字体大小，包括行距。

除此，文字链接最好用颜色或是其他样式跟正文区分开来，这样读者可以清楚的知道哪里可以点击。例如：可以给a标签写个下划线代码text-decoration: underline；。

2.段落的可读性

段落的可读性一样可以用过文字和图片来提高。文字方面跟上面提到的，可以通过字体样式、外边距、内边距、颜色和对比度等参数来调整之外，还可以通过段落行距来调整字段间距。

• 行距：每行文字间的间距也同样重要。看看这篇文章，如果每行文字都与上下两行粘在一起，你就无法理解这些句子。

可以从上图看出，文字段落之间不留白可读性不高。右边的标题和段落之间、行与行之间和段落与段落之间都留了一定的距离，所以整体会显得更为整洁和可读性高，这些在网站当中用Margin、Padding和Line-height可以来调整留白的大小。切记，行距大小不是越大越好，一定要适当。

在通篇文字的文章当中也可以考虑适当的穿插一两张图片进去，配图可以提高文章的可读性。

3.区块的可读性

区块间也要有一定的间距才能提高区块的可读性。

区块留白这个有点类似上面的文字段落留白，在网页当中，每个区块与区块之间也要适当的留白，而这个留白主要还是体现在Margin和Padding上。如果取消两个区块的Margin和Padding，那两个区块的内容会聚集在一起，这样不利于观者去区分区块之间的关系，也不利于阅读。所以一般我们在给网站做界面的时候，都会设置一定的间距，就像蝉知系统中默认的间距是7px，当然，这个间距的大小都是可以调整的，看你怎么去设计这个页面和页面的整体风格是否和谐而定。

可以看到上图左侧区块之间的间距为0，整体区块和区块之间看不出间隙，给人拥堵的感觉。但是右侧留有一定的间隙，所以看起来比较舒畅，可读性也相对高很多。

4.图片的可读性

为什么说图片也具有可读性，要知道一张好的幻灯片设计可以起到一定的作用，大部分的网站第一眼看的就是幻灯片，所以图片的设计也不能忽视。
图片的设计可以通过对比来设计，比如色彩对比、字体对比等。切记勿用复杂的背景来当幻灯片，这样标题在画面上就不够突出。

上面的例子，显而易见，当图片背景比较复杂的时候，文字的阅读性就差一点。第一张图的背景比较简洁大方，加上不用设计的字体，自然而然的主题就凸显出来了。

5.导航的可读性

说到导航，这个其实是整个网站架构当中最重要的，所以我也把这点放到最后来讲。网站一定要有清晰的导航，方便读者浏览和了解整个网站的架构。所以在设计导航的时候一定要考虑到浏览者的习惯。

• 导航要简单明了，避免奇怪的布局。

上面这个导航不是说做得不好看，而是找交互的设计用起来让用户会有点不舒服，导航下拉时，除头部内容整个页面整体下移，这也可能就是设计师特意做的效果，但是很明显，效果不是特别出彩。

• 导航点击状态下的样式和普通样式需要有明显区别。

上面的这个导航，点击状态下和正常显示的样式效果区别不大，所以识别性不够高。

• 导航的层级关系设计简单点，最好不要超过三级。

现在很多导航设计都将二级导航和三级导航放在一起，这样受众在浏览的时候也可以更清晰网站的架构。

优秀的网站，通常在用户体验上非常用心，而网站良好的客户体验除了优秀的界面设计、合理简洁的框架布局，还有一点至关重要——网页的可读性。

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

不要小看一个登录界面，它内里包含很多细微的东西，除去外观视觉，更多要注意的是交互的操作体验，比如一些动画、一些文案提示等细节都要注意，如果你是UI设计师，建议看看这次经验文章，附上了大量案例，也许能助你未来更好的去设计一个用户体验友好的APP登录界面。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

如果要深究近期网页设计趋势的变化，这些变化更多是关于用户模式，色彩和排版设计的。但是不论是其中哪种，都牵涉到一些微妙的设计技巧和复杂的影响因素，将它们纳入6月的设计趋势，似乎略有不足。在过去一个月所出现的新网页设计作品当中，最显著的设计趋势还是体现在一些设计元素上，风格独特的底部导航，自由随性的Box元素，装饰性极强的竖线元素。

近期如果你在纠结怎么设计网页的话，这些设计趋势可以用来看看~

在网页设计当中有各种形式和法则可以运用，前面也介绍了网页设计中常用的一些运用法则，界面上的美观有了，那交互上的呢？今天我们就界面上来分享变化在网页设计当中的运用。

现如今，栅格已经几乎是所有网页设计的基础。这些隐形的线条创造出空间的节奏感和视觉的流畅感，他们是让网页变得更加和谐的基础。

但是，栅格存在的目的是帮你创造好的设计，当你开始逐渐适应栅格的存在，千万不要被它束缚住。你并没有必要100%地受限于栅格，偶尔打破栅格的设计可能会让你的设计更加抓人眼球。不过，想要打破栅格又保持网页的协调，是有技巧的，并非任何“破格”的设计都是好的。今天，我们来聊聊这个。

了解栅格系统

虽然绝大多数的设计都遵循设计规则和用户的使用习惯，但是标新立异的设计仍然非常有市场。独特的设计更容易让人难忘，这一点是毋庸置疑的。在网页的导航栏设计上，也是如此。随着越来越多的网页开始采用加粗的非衬线字体置于网页顶部作为导航，许多有想法的设计师开始有意识的打破这一规律，别出机杼，采用不一样的导航模式。

当然，如果你的网站用户量大，并且需要尽量降低用户的使用门槛，遵循常规的设计更合适。如果你的网站是更加偏向实验性的小网站，有趣而好玩的导航模式，反而更适宜于用户探索。不同的导航模式对于网站的影响不尽相同，针对不同的内容、不同的用户，你需要仔细挑选导航模式。

实验性的导航并不具备泛用性，但是如果你在追求别具一格的设计，那么下面这些独特的导航设计应该能激发你的灵感。

侧边栏导航