版式设计

今天这个系列教程的作者@孙青椒- 是一枚德国的平面设计师，现在结合自个多年的设计经验，把许多枯燥无味的版式知识重新嚼碎烹饪，力求让知识变得易于消化，让同学们吃嘛嘛香。不多说，正式开饭咯。

一个好的设计作品是由多种元素构成的，所以在设计的过程中，我们不仅需要看重画面的设计，还要注意文字的排版。

目前网站中信息整合最常见的方式就是卡片式设计和列表式设计。列表式在UI设计中算是一枚\"元老级\"的大将了，而卡片式设计则是一匹\"黑马\"，近年来异军突起，越来越受到大众的喜爱。两种设计在实现良好的用户体验上各有千秋，卡片式设计实现了图文的完美结合，能给用户呈现良好

Metro是基于瑞士平面设计的设计原则（清晰，真实，美观），来源于交通指示牌。生活中人们行色匆匆，更需要提供快速，简洁，直接，明确的设计。良好的排版有助于Web设计更加简洁有效。

版式技巧说了很多，不如直接来点优秀的案例给同学们借鉴，今天搜集了一组版式非同一般的网站，有创意有性格，可天马行空，花样繁多，也可现代简约，轻重分明，不说了，看得正欢呢！

响应式Web设计（Responsive Web design）的理念是页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。

传统平面排版的四大原则： 重复：将元素重复运用（包括颜色、形状、材质、字体、空间关系等）以增加画面的条理性和整体性； 对比：避免页面上的元素形态与关系构建过于相似；

为了从众多竞争对手中脱颖而出，不少站长又在探究别具一格的网站排版设计。这不，空间共享式网页排版开始火了，它是指让网站上的元素横跨不同的区块、实现空间共享的一种排版设计。这个概念听上去可能很复杂，但却很容易辨识，比如文字区域的文本横跨延伸到图片或色块区域中，共享其他组件的空间。这种共享式网页排版简单高

在淘宝店做设计，对一个合格设计师的基本要求就是效率，不管你会不会设计，你都要在限定的时间里完成设计工作。

现在的用户对地图应用是越来越苛刻，往其中投入的感情也越来越多。本文作者Sacha Greif 一名来自法国巴黎的设计师，当大家仍然对iOS版Google地图展现的地图数据以及服务功能赞不绝口时，他就犯了设计师的职业病，细数Google地图的设计点滴。昨天有人对着苹果地图说分手，而今天Sacha却又像评价女婿一样评价iOS版的Google地图。

打开网站，人们自然会从上往下浏览，首先映入眼帘的一定是BANNER主视觉，然后是网站主体内容部分。相比较而言，注意到网站底部版权信息的浏览者确实不多，但这并说明网站版权信息不重要。从最开始的一句话，简单扼要的放置上版权归属说明，到现在放置内容分享、二维码、站点地图、联系方式等等，网站版权信息的展现形

交互设计师在设计线框图原型时，熟知常见的web设计模式很有帮助，做到“心中有数”才能创造出符合需求，用户易学易用的界面来。

在本文中，我们可以发现好的排版设计，不但要美观，更多的要将信息内容组织、排布，使其规范有序、清晰明确，便于用户高效、准确的获取相关信息。这需要设计师深入理解所设计的信息内容，提高信息内容的组织、加工能力，将内容本身作为设计元素，依照设计原理有效排布。

此文主要讨论电子商务网站产品页面设计模式，从产品页面元素、设计理由，解决方案等对产品页面设计进行分析。以客观的思路来探讨如何设计出好用的产品页面。

前段事件完成了QQ输入法精简版的设计工作，在此与大家分享一下整体的设计思路。