智唯高端建站是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司

建站优化电话:138 2557 5516(免费SEO检测 保证收录 保证排名)
广州建站微信号
返回旧版
网站设计News
公司网站建设

如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!

关键词:广州建站 作者:智唯建站 | VISITORS: | 来源:智唯网络科技
11Jan
2018
还在苦恼如何搭建Web端布局框架?来这里找方法吧,CDX魔方项目组成员用血和泪的经验告诉你答案。

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

  前言

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

  整篇文章分为两部分:

  了解布局框架要素。

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

  布局框架要素

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

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

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

  

如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!

 

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

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

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

  

如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!

 

  2. 布局框架的设计原则

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

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

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

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

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

  

如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!

 

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

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

  基础模块

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

  

如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!

 

  分层逻辑

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

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

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

  

如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!

 

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

  本文主要梳理基础层、内容层相关模块所组合的布局框架。在查阅相关文章和书籍后,我们总结出了Web端三种基础布局和五种扩展布局。

  

如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!

 

  上下布局

  这种布局常用在Web端首页,上半部分为导航或页眉模块,下半部分为主内容模块。简洁明快,干扰信息少。随着屏幕、设备的不同,内容模块可设计成固定宽度或横跨整个页面两种视觉布局。

  IBM Design首页即采用上下布局,黑白视觉系的顶部导航及大面积的主要内容模块展示图使得页面设计干净清爽,有足够强的视觉表现力。IBM设计师同时采用了响应式设计,控制好屏幕分辨率断点,使该官网在任意设备下浏览都能达到最佳的用户体验。

  

如何搭建Web端布局框架?来看滴滴设计团队的超全经验总结!

 

  左右布局

  左右布局常出现在欧美国家的设计网站,视觉冲击力强。

关于网站制作,看看客户怎么说
***(匿名) 评价文章 广州企业网站制作公司网页设计水准

在最近几年,很多网页设计公司也都在网上开办了他们的网站, 广州网站制作公司 在网站上开办网站以来,受到了很多客户的关注,这家公司在之前的经营过程中,就受到了很...

***(匿名) 评价文章 网站建设—网站制作流程

网站制作流程是网站建设的关键内容,网站建设要经过一系列的制作流程,最终建成客户满意的网站,网站制作有以下的流程。一、网站整体策划1、动态程序语言的选择。一般的...

***(匿名) 评价文章 小兵当家军校网站制作案例

广州觉启教育培训机构专注企业培训、青少年教育培训20年,致力于打造广东一流中小学生素质培训品牌,旨在全面提升青少年综合素质,培养青少年自信、感恩、豁达、坚强、...

公司网站建设
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

广州建站 感恩回馈

咨询送礼现在提交,将获得智唯网络策划专家免费为您制作
价值5880元《全网营销方案+优化视频教程》一份!
下单送礼感恩七周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线0757-8108-9123
合作意向表
您需要的服务
您最关注的地方
预算
  • 验证码

直接咨询