超实用B2B产品排列技巧

腾讯网UED 腾讯网UED 2015-05-29 15:54:39

图片描述

图20 后台细节页面设计(图为展示DEMO)

对于整体界面的呈现,设计师进行了有目的性的留白,迎合禅意的主旨。留白的目的是减轻用户浏览的压迫感,赋予界面构成以变化感,让其得到更多的扩展空间,从而达到宁静的氛围营造效果。背景点与线的搭配,在功能上对相似内容进行了分类统一,同时建立界面版式的平衡感。页面的主体内容在1000px之内,保证了宽窄屏用户的无损浏览,但对于大屏用户的浏览体验,就会显得过于寡淡,所以在页面1000px以外,对日文“DIOR”进行了拆分排版,力求该用户人群浏览的视觉美感。

同时,此项目也配以HTML5的响应式设计,保证了移动端用户的浏览需求,其设计氛围与PC端视觉统一,但对复杂元素进行了拆分与删减,更加明确信息的主体,利用移动端自身的优势增加了满屏大图的展示,在强调视觉效果的同时也便于用户细致浏览。通篇界面樱花花瓣缓缓飞舞,所营造的气息自然扑面而来(见图21)。

图片描述

图21 整体界面的呈现

总结

总结本小节的内容可以看到,一切的版面设计都是基于内容的存在,体现内容的主题思想,用视觉化的手段增强读者的注意力与理解力,以科学的方式实现层级递进的效果。大视觉、小细节,一个都不能少。


长按二维码关注我们