进阶篇！超适用的版式计划能力全方位总结

如图17所示是对黑眼圈的专题描述，如果单纯用文字描述，则用户将很难理解氛围和场景。用熊猫拟人化体现，在增加了趣味性的同时，还让用户在轻松愉快的氛围中了解了所表述的内容。

图17黑眼圈专题

“DIOR迷醉东京”案例分析：一场樱花飞舞的视觉盛宴

该项目的最初需求是要有日本气息的DIOR潮流感。承载的内容为迪奥精神-2015东京大秀的独家专访，以及现场图片推送，其中包括访谈、点评、图片信息展示的功能。

了解了情境之后，如何用科学的方法进行设计呢？首先就是主题的突出，由于秀场位于日本东京，所以日式的元素必不可少。由此进行发散，提炼出关键词樱花、折扇、禅意。因此封面气氛以大面积樱花铺底营造，主题仅对文字进行排列，以衬线体的英文与中文组合，放大所要重点突出的内容“迷醉东京”及“DIOR”，并在保证英文识别度的基础上，对其进行切割，运用距离与节奏的方法，体现主题的主次关系。线描樱花的处理则是基于禅意对于圆满的追求，运用点、线、面的基本组合原理，搭建视觉中心的完整性。两侧日文“DIOR”的点缀，在细节处强调日式东方的气息，不抢镜也加分。引导进度条以折扇的形状作为引导，运用之前谈到的时间轴的引导方法，保证用户在浏览的过程中掌握阅读的进度，对自己的浏览有心理预估（见图18）。

图18 封面设计

内部内页更多承载的是信息的输出，因此应避免大面积的氛围强调。为保证基调性的统一，我们以禅意的麻布质感铺底，两侧仅放出樱花盛放枝头的延伸，与封面氛围呼应。关于内容信息如何良好输出，这里以专访页面和后台细节为例简单分析一下。

首先看专访页面（见图19），由于界面中需承载着专访人物、主打妆容作品、好友寄语及专访对话四大内容，因此如何处理它们之间的逻辑关系则是首要问题。首先，抓住核心主体，即为专访人物Peter，而所有的内容承载都以他为中心进行展开，因此在视觉比重上他的图片也被着重强调，其主打的妆容作品围绕在周围但小于主体。这里运用了不同的形状，从而使间隔看上去更大。

这里抛弃了方图的处理方式而运用了圆图的处理方式，在信息量大的排版中，巧妙营造了透气效果。好友寄语部分以便签变形的形式体现，区别于主体的功能性，作为辅助性功能点缀。最后则是专访对话内容的呈现，由于权重较高，同样留有较大的布局处理。问答的形式运用了之前提到过的文字排版法则，用不同的颜色区分不同层级的内容，营造阅读的节奏感。

图19 专访页面设计（人物图片由尤目YVMIN品牌授权使用）

后台细节页面（见图20）同样运用了对称与等比的法则。但在此对称的设计中，运用了不规则的处理方式，以发散的形式呈现图片的排版，营造若有若无的动感。同样，为方便需求方的自动调取，图片仍采取等比的处理方式，降低维护成本。图片的尺寸仅设置了大、中、小三个层级，调解了其平衡关系的同时又有规律可循。

图20 后台细节页面设计（图为展示DEMO）

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

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

图21 整体界面的呈现

总结

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!