浅谈WEB端布局框架的思考与设计(4)

二、项目分析与布局定义

魔方项目前期做了以下几个方向的分析与研究：

1.同类产品分析

在魔方还只是纸面信息框架的时候，我们分析了各大同类网站，梳理出相应布局框架的特性和优缺点，也就有了本文上半部分的理论成果。

2.魔方产品分析

刚孵化的产品都会经历从暗到明、从0到1的过程，魔方也不例外。最初产品形态并不清晰时，我们进行了多方面的自我分析：第一步思考整个魔方的定位、产品模式、设计目标以及目标用户会如何理解魔方、使用魔方。第二步定义每一个子产品的项目目标，并分析其中展示信息内容及对应的功能需求。第三步再以组件化设计的思维方式对基础功能进行梳理、拆解分类、归纳重组。

3.魔方布局的确定与总结

最终我们通过基础模块及分层逻辑相互组合嵌套的设计方法，使魔方布局数量和布局复杂程度被满足。我们将可复用的功能模块统一成基础层，如全局一级导航模块是为承载了所有子产品页面的入口;而需要单独定义的功能模块被划分成子产品的特殊功能，并一一整合到对应的布局模块中，如规范库中的电梯划分成单独的右内容模块。

魔方网站采用了上下布局、“T”型布局及“口”型布局。

4.魔方布局的构成原则

在获得这些成果后，我们再次回归到根本的布局框架设计中，总结出以下构成原则：

1)组织原则——根据产品特性将功能点分解后重新划分成组

2)隐藏原则——突出布局中的主要焦点信息并隐藏次要辅助信息

3)接近原则——将临近的元素归类为一个模式或整体

4)熟悉­­原则——按照熟悉的认知，把复杂对象简单化，变成规则图形

三、视觉风格探索与总结

1.视觉风格探索

魔方的视觉风格与布局框架是同步进行探索的。在这个过程中，我们一边考虑整体布局能否满足魔方各个子产品，一边思考视觉元素如何设计和呈现。从最基础的品牌色定义、组件元素样式，再到设计细节中字体的大小、按钮在空间布局上的占比是否合理都要不断打磨与调整，最后细化成成最和谐统一的视觉方案。