2015-7-30 用心设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供有效的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本文来自：设计派
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
页面设计中层级不仅仅与内容和文字有关。设计中使用的所有图片资源，从照片到图标，按钮和其他任何除了文字的视觉元素，对于页面的层级以及呈现的感觉有很大的影响。
在设计网站的时候，图片资源会在很大程度上帮助你设置站点，以及颜色，排版或者更多内容的基调。如果图片视觉元素没有和设计正确的结合，他很可能会破坏你原本想呈现的感觉。
Neonmob 页面中图片视觉元素都被正确摆放，因为他们和站点的产品密切相关。Neonmob用一种很优秀的方式呈现他们的产品，当你握住卡片的时候，会有一种半现实的感觉。这种方式帮助强调了产品的方式，自然的讲出故事。
创建一个好的视觉流需要理解怎么在不打断内容流利用这些视觉元素去加深用户的体验。
图片资源同样是另一种讲故事的好方式，帮助我们向用户解释他们应该走向哪里，应该做些什么，他们会从站点得到些什么。相对于使用内容，图片是一种很视觉化方式帮助用户理解清楚需要讲述的东西。
使用诸如图片，图标这样的视觉元素可以有效帮助建立令人兴奋和具有创意的视觉点来吸引用户的注意力。利用这一点我们可以高亮突出需要更多注意力的内容。
通过图片建立视觉层级
下面是一些可以帮你建立很强图片视觉层级的tips
1.想想你需要设定的页面基调
图片描绘了网站的基调。如果你想设定的基调是专业的，放松的，随意的，实用的（或者其他任何样式），那么你需要选择能够反应他们的图片。
使用图片加强网站的感觉比不得不使用图片来解释引导用户下一步做什么更重要。一个没有图片的网站应该具备能够向用户讲述的能力，而图片只是用来加强 讲述内容使他们表现更好的方式。然而图片不是后来才需要加上去的东西。他们需要得到页面中其他内容同样的关注和重视，确保他们跟页面中其他内容配合默契。
HopSkoch 需要向客户讲述他们的产品，他们需要被立即展示出来。 这种简单，直观，又强大的展示方式表现的不错，能够立即吸引来访者的注意力。
2.永远不要使用图片代替文字
不要设想图片使容易理解的。我会建议你给图片加上标题或者自子标题，这样可以帮助用户理解，更好的讲述内容。并且这样可以在图片和文字之间建立更好的连接。这样也可以在图片没有现实出来的时候内容是可获得的。
3.使用全景图库或者自己拍片？
这完全取决于你网站想要传达的感觉和你需要展示的设计质量等级。但是这也看你是想要全景图片或者自己拍摄。
个人认为全景图片有些也一般，特别是如果你想要一种标准化办公室风 格样子的照片。也就是说，使用精心布置的拍摄方式，自己拍摄完全可以达到那种水平。
作为自己拍摄的图片，特别是当你请了一个专业摄影师时，同样可以给你的设计带了很出色的表现 ，因为出色的图片通常会促使你提高设计水平添加一些视觉对比
有时候对于一些电商网站也是需要自己定制拍摄的图片的，但是要记住，拍摄的图片要符合网站风格，感觉。否则就可能会有网站设计很漂亮，图片也很吸引人但是放在一块儿就是奇怪的风险。
HopSKock 同样使用自己制作的图标来展示他们的作品，如果这些图标使用图库的图片，品牌信息传递就会减半。
4.小心使用尺寸和对比
还有一个需要注意的小点是使用图片的尺寸。如果可以，保持图片在你之前创建的垂直方向上的韵律。这同样会保证你的内容流顺畅流动在浏览的时候不会感觉结结巴巴。
同样需要注意图片的实际尺寸会影响到内容的阅读。你当然不希望创建出文字和图片的强对比，这会使内容变得难以阅读甚至完全破坏视觉流。也就是说，你可以使用大一点的图片，打破这个规则。自由使用他们，给页面创建一些亮点。
Fitbit页面呈现的图片就都是关于自家产品的。他们使用大小，和对比来呈现产品引发交互。
4.将颜色变成优势
使用的任何一张照片元素都是应该有原因的。我们使用颜色的大部分原因都是想吸引注意，或者将元素与元素，区域与区域之间区分开。
这是一种很有效率的使用颜色的方法，它可以给你页面中元素应有的视觉权重。你同样可以聪明的使用颜色来抓去注意力以区分出元素的轻重缓急。看看你页面中图标的颜色是如何影响整个页面的感觉和信息传达的。
Fibit就是传达出品牌的网站之一。他们在网站和线下其他服务中都适用一致的颜色，徽章设计中也是。这很细微的将所有设计元素联系在一起形成一个品牌整体。
5.不要忘记形状
形状是容易被低估和被忘记的视觉元素之一 。不要害怕将形状和内容，图片混合在一起使用，尽管圆形在如今的设计界很流行，也可以 尝试一下其他形状，然后看看如何结合到自己的设计当中。不管是一个图标的形状，还是你给图片
