A5创业网

项目发布

申请报道

扫一扫，联系编辑获得审核机会

符合以下要求，获得报道机会

1. 新公司求报道

2. 好项目求报道

3. 服务商求报道

4. 投资融资爆料

中介交易 网站交易 域名交易 公众号

登录 注册

会员中心 退出

微信

微博

手机版

网站导航

找项目 找服务

客服热线：400-995-7855

创业

创业动态 投资融资 创业故事 众创空间

财税

工商注册 公司财税 资质办理

产权

商标 版权 专利

科技

互联网 IT业界 移动 八卦休闲

站长

网站运营 建站经验 SEO 交互设计 好站推荐

营销

营销策划 网络推广 移动营销

电商

电商资讯 电商分析 移动电商

IDC

IDC报告 云计算 服务器 安全 CDN

更多

自媒体 公众号 小程序 产品 域名 会议 数码 游戏 系统 技术

首页

创业

创业项目

科技

站长

产品

营销

电商

域名

会议

A5交易

A5营销

创业服务

当前位置：首页 > 站长 > 交互设计 > 正文 品牌

标签

专题

软文

如何搭建Web端布局框架？来看滴滴设计团队的超全经验总结！ 2018-01-11 08:58 来源：优设网 我来投稿 我要评论

创业项目优选 好项目来A5招商 ，点击入驻！

还在苦恼如何搭建Web端布局框架?来这里找方法吧，CDX魔方项目组成员用血和泪的经验告诉你答案。

前言

对于承载多个子产品的网站而言，单一的布局形式不能完全适用，因此我们需要全方面了解相关的布局框架理论。这有利于我们在定义复杂结构的Web界面时得心应手，做到统一化、规范化、可拓展及可快速迭代。

整篇文章分为两部分：

了解布局框架要素。

项目沉淀：滴滴魔方网站布局框架的构建与实现。

布局框架要素

1. 布局框架在设计中的重要性

在涉及数字媒体的屏幕布局时，我们需要将一些看似互不相干的元素和谐、有序的组织在一起，这是很有挑战性的。

对设计师而言，熟练掌握知觉要素的格式塔理论、视觉要素的组织和结构及感觉要素的层级和秩序，并将这些方法论运用到布局设计的每一处，才能创建出该产品真正的布局基础。

布局框架能帮助我们正确考虑产品的焦点，理性的传达有效信息而不是感性的创意视觉表达。

布局框架能保证优质产品及良好的用户体验，方便用户对界面的识别和使用习惯。

布局框架是产品的骨架和基础。在框架确定之后，设计师才可进行下一步的构建——统一的视觉元素，清晰的功能操作，具体流程的交互等等。

2. 布局框架的设计原则

了解布局框架设计的重要性后，我们再来认识一下布局框架的设计原则，分别为统一性、逻辑性、可扩展性、可预测性。

统一性——确保产品布局在结构和视觉的一致性，为用户提供高度的舒适感。

逻辑性——视觉中的各种分类构成具有逻辑思路，结构联系紧密且通畅。

可扩展性——无论产品功能是简单还是复杂，布局框架能够随着产品需求的变化进行布局结构的延展和扩充。

可预测性——选择可预测和可识别的布局，并连接到体验的每一个环境中且在适当的地方引导用户。

3. Web端的基础模块和分层逻辑

我们在进行布局框架设计前，先来熟悉一下Web端界面相关的基础模块和分层逻辑。

基础模块

根据模块自身属性及功能定义。常见的模块有九类，分别为顶部导航模块、左侧导航模块、页眉模块、页脚模块、主内容模块、左内容模块、右内容模块、抽屉模块、弹窗模块。

分层逻辑

基础层为常置的功能底层，是提供稳定性和可预测性必不可少的层级，具体有顶部导航模块、左侧导航模块等。

内容层可分为常置展示层，具体有主内容模块、左右内容模块等。

叠层为动态出现的功能顶层，始终叠加在基础层及内容层上方，是链接上下体验流程的模块，具体有抽屉模块、弹窗浮层模块。

4. 常用的基础布局与扩展布局