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

2.魔方视觉的设计原则

在历经了多轮方案稿产出、视觉评审后，魔方最终的视觉风格在布局框架基础上确定了。其中我们总结出几点魔方网站视觉的设计原则：

1.视觉平衡——页面信息要素的位置及分布需要和谐稳定的平衡感

2.空间舒适——整体页面留白空间要均匀、视觉感知需要舒适、有亲和力

3.尺寸统一——不同页面采用的版心要统一、不同组件大小要一致

4.比例和谐——信息要素排布比例要合适，突出焦点信息弱化辅助信息

5.颜色感知——品牌颜色三原色要与滴滴出行有最强品牌链接及视觉感知，用色比例要均匀

6.错落有致——事物的布局虽然参差不齐，但却极有情趣，使人看了有好感

四、布局框架的运用及落地

从2017年4月底至今，魔方已完成了平台化的一期搭建，上线了滴滴资源库中的图库和规范库、设计工具SCO主页、组建代码等产品。

1.魔方上下布局的运用

纵观全局，魔方采用上下布局方案。一级导航为页面中信息层级最重的组成部分，用色冷静而有力的品牌黑加强了页面的视觉重心，舒适的导航高度产生自然的视觉方向感，如此的全局一级导航能够帮助用户更便捷快速地抵达相应的子产品页面。

在魔方图库列表页中，二、三级导航相连一级全局导航为完整的顶部导航模块，在视觉表现方面，我们通过颜色的对比、阴影的距离与高度让模块之间具有“深度”的层次关系。白色的导航模块在顶部，而内容模块是在更低的层级，合理的顶部模块阴影作为必不可少的细节元素提升了页面高度，这样能让导航模块与内容模块分离出来但又不会造成生硬的距离感。

2.魔方“口”型布局的运用

魔方规范库中采用的是“口”型布局。为了方便用户在线阅读滴滴出行相关的设计语言与规范，我们从交互角度建立了几大块功能模块，如左侧导航模块，帮助用户筛选相应的规范子页面;右侧内容模块承载了快捷电梯导航;还有底部的页脚模块被规划成上下页转跳功能按钮区域。这样清晰的视觉层级及功能结构能让用户更好更快获取信息。

视觉层面，在满足产品功能性和可用性的前提下，信息元素排布比例大小错落有致，子页面的大部分留白与轻松活波的品牌桔产生对比，塑造了简洁有亲和力的视觉美感。

「结尾」

万丈高楼平地起，回顾项目就像是盖一座摩天大楼一样，首先要搭建好地基框架后，再往上一层一层增砖添瓦，最后大楼才能又高又稳又好看。

在经历了以上林林总总的认知与实践后，我们充分了解布局框架要素指南特性，将理论运用到实践项目中，提供最佳的魔方设计方案，还能举一反三将布局框架理论应用到其他屏幕产品中。

本文中还有很多值得推敲和学习的地方，自己能想到悟到的也只是九牛一毛，希望能与大家多多交流和学习。