淘宝装修的设计教程之简约页面的设计少即是多.docVIP

design of ECD（易视觉） 简约页面设计——少即是多 米斯·凡德洛曾经提出少即是多（less is more）的设计原则，这个原则的提出奠定了现代设计的基础。少即是多，简约而不简单是现代简约设计的核心，可以形容为用最精简的表现手段达到最好的效果，去掉多余的元素，颜色，形状和纹理，其目的是使内容脱颖而出，成为焦点。 在进行淘宝页面设计规划时，我们都知道用户体验很重要，而如何做到拥有好的用户体验却是件让人头疼的事。下面让我们来看看下面三个页面 上面这个页面在顶部向我们传达了店铺的分类导航，店名，天然、绿色、健康的产品特性，品牌有三十年了，以及优惠的活动等多条信息。这些信息在文字排列上不是很整齐，给人有点乱的感觉。文字表达上，本应突出显示的品牌名也让人有点混乱，到底这个店铺叫AB呢，还是叫AB股份电子商务部？本应突出显示的店铺分类导航却用了与背景相近的颜色，让人不易看清。 我们再来看看下面这个店铺 首先在顶部进入视野的是ONLY这四个字母，顶部导航部分信息很清晰得显示着导航分类，背景是深色，字为浅色，视觉上很容易分辨。主体图上就传达出圣诞快乐，每天8款活动商品信息和店铺的一些公告，信息很少，但我们并不觉得乏味，这是为什么呢？细看页面，清晰的雪花和模糊的灯光，对圣诞活动款作了一个红色的图章来强调，这些地方都增加了页面的细节。 看完上面那个店铺我们再看看这个店铺， 乍一看，要关注的太多了啊，新款、热卖、清仓5折等等，还有下面不是讲得什么的“清折畅冬”个大字。仔细看店铺的细节方面做的还是不错的，有节日的气氛。但让我们一下子接受这么多，实在有点晕啊 看完上面三个我们来回想一下，哪个店铺让我们感觉舒服，印象深刻，还记得店铺名呢？显然是第二个了。 通过对这三个页面的比较，我们了解到：我们对简洁干净、信息比较少的页面印象深刻，而对复杂繁多的页面印象模糊。会出现这样的状况是因为人们对简约的设计记忆度和好感度高于繁杂的设计作品。这是一种天生直观的形象思维能力。这种能力导致人们的内心渴望看到一种以简洁和纯净来体现功能和美感的设计。 在这里所说的简约，并不是说我们只要最基本的文字就好了。就像下面这张图 这张图很简单，信息很明了，可是却缺少了细节的支撑，显得粗糙。 所谓简约不是纯粹的简单，简约的设计更注重细节和品质，特别是页面图片细节的设计和文字的排版，因为它是人们眼球的焦点所在。如果只是一味的简单，在细节上没有做好，那么，整个页面就会给人留下内容空洞、简单得没有意义的印象。 对比过各个店铺，什么样的店铺给我们的感觉更好？这是显而易见的。 下面我们来看看怎样才能做到简约二字： 尽量使模块布局清晰 布局是否清晰明了，对于设计能否让用户感觉简单实在太重要了。布局简约，不是简简单单地削减图形和文字，而是要重新思考重要内容的顺序，对模块进行组织和分块。通常我们会利用不可见的网格来对齐模块中的元素，这是吸引用户注意力的一种有效方式。 如下图红线就是所说的网格，这样的网格很多情况下是不显示出来的。 用户虽然看不见有网格，但视觉加想象会告诉他们“接着请看这里”，这样可能就无需使用明亮的颜色或者动态图片了。网格越是简单，效果就越明显。但网格布局也会让人感觉局促和受压制。要解决这个问题，可以设计一个不对称的布局，可以将少量元素设计成跨在两列甚至三列之上。就像下面这张图一样 抽空看一看淘宝商城首页或秋売、尤麦、OSA等很多店铺的页面，都是基于网格来排布的。如果页面让你觉得混乱的话，可能一部分原因就在于没有根据一定的网格来对齐布置。 二、使页面设计风格明确 我们来看看下面这两个页面，猜猜店铺主要经营什么？ 第二个页面我们一看就知道主要经营化妆品的，而第一个页面却不能让我们一目了然了。这就是整个店铺的设计风格呈现给我们的感受了。用户对店铺的记忆也就从这里开始，风格不明确的页面也许就印象分就会大打折扣了。 我们打开淘宝中一些做得相对比较好的店铺，如Only、可可尼、七格格等店铺，呈现在我们眼前的往往是醒目的店标、清晰的导航以及一张做得非常精致，视觉冲击力比较强的焦点图。这一部分十分重要，是整个页面风格的风向标。如果这个时候在店铺网页的左边或右边栏经常出现了花里胡哨的与整体风格不同的元素，就容易把用户的注意力从页面的焦点区引开，会让整个页面变得混乱。这其中包括左右两侧的浮动窗口的设计，浮动窗口的出现给用户提供了快捷的通道，这在用户体验上是十分好的，但如果浮动窗口设计得太花哨，就会有喧宾夺主的危险了。所以在页面上，最好每一块元素都与整体风格相协调，相呼应。 三、使页面细节统一 页面之中有很多元素，元素过多意味着人们必须处理的信息变多了，很难把注意力集中到真正重要的内容上了。所以我们