申请报道

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

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

  • 1. 新公司求报道
  • 2. 好项目求报道
  • 3. 服务商求报道
  • 4. 投资融资爆料

当前位置:首页 >  站长 >  交互设计 >  正文

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

 2018-01-11 08:58  来源:优设网  我来投稿

  月入百万 2018互联网创业项目加盟

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

  前言

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

  整篇文章分为两部分:

  了解布局框架要素。

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

  布局框架要素

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

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

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

  

 

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

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

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

  

 

  2. 布局框架的设计原则

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

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

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

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

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

  

 

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

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

  基础模块

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

  

 

  分层逻辑

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

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

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

  

 

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

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

  

 

  上下布局

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

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

  

 

  左右布局

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

  Atlassian Design统一采用了左右布局,页面左边为全局侧边导航模块,其他部分为主内容模块。从交互体验以及用色搭配等视觉层面分析,Atlassian整体布局结构清晰有条理,用户按照从左至右的视觉顺序浏览并可快速理解内容,精美绘制的插图更是让网站充满了吸引力。

  

 

  「T」型布局

  「T」型布局是Web端运用最广泛的布局方式之一,因布局效果酷似英文字母「T」而得名。优点是页面结构清晰,主次分明。缺点是规矩呆板,如果不注意视觉元素的合理运用及色彩细节,很容易让人「看之无味」。

  Ant Design是阿里蚂蚁金服设计团队打造的工具型网站,用来落地支付宝公司旗下产品的设计语言、代码工具等等。Ant Design正是采用了此布局,作为基础层,顶部全局导航承接了所有子库入口的功能,内容区域再划分成左侧边栏模块及主内容模块两部分,此框架布局既能满足人们的「F」型浏览习惯又能解决信息层级过多的问题。

  

 

  「C」型布局1&2

  「C」型布局是在「T」型布局上的扩展,增加的页脚模块可设置成基础内容区域或功能操作区。根据基础模块的不同,可分为两种「C」型结构。

  Audi.com是奥迪集团多年设计成果展示的Web端入口。在整体布局框架中,左侧栏导航模块被定义成基础层,页面右边被分为三块内容层模块,分别为页眉模块(也就是页面标题栏)、主内容模块及页脚模块。设计风格时尚大气,色彩、图形元素的和谐搭配使得页面布局错落有致。在交互操作体验方面,让用户做到真正的「don’t make me think」。

  

 

  「口」型布局

  这是一个象形的说法。页面顶部为基础层的导航模块,中间为左、中、右三块内容层模块,底部再嵌套一个页脚。这种布局的优点是充分利用版面特性可承载最多的信息及功能,缺点是页面拥挤,不够灵活。

  Microsoft 作为业内老牌的互联网公司,其官方网站承载了产品应用、设计、开发等多类子项目,而内容的复杂性使得微软的设计师们在搭建此网站时考虑了「口」型布局。

  

 

  综合型布局1&2

  综合型布局是统称,原理就是遵循分层逻辑并在九种基础模块中自由组合、嵌套,是在简单的布局基础上有更多模块叠加的复杂布局。其差异就是布局模块之间的数量及模块摆放的具体位置不同。我们定义的综合性布局1比综合性布局2多一个右内容面板。在此布局中,最重要的基础层通常为左侧栏导航模块。综合型布局1&2根据网站自身的产品规划及功能定义可删减右内容模块、页脚等内容层模块。

  

 

  

 

  以上是九种最常用的默认布局,通过基础模块以及分层逻辑可以相互组合、嵌套的方法,可以总结出更多的Web端布局框架并落地到项目中。

  魔方网站布局的构建与实现

  1. 项目背景

  魔方是CDX创意设计中心发起的设计工具化平台。项目初期规划的子产品涉及了设计侧及开发侧,包含了设计资源库、设计工具、设计板、组件代码等多维度不同类别的产品。作为最重要的多功能、多信息的载体,项目起步后,我们首先需要考虑的就是合理的布局框架,为将来高效、精准的表达和流畅的体验做好基础。

  

 

  2. 项目分析与布局定义

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

  同类产品分析

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

  魔方产品分析

  刚孵化的产品都会经历从暗到明、从0到1的过程,魔方也不例外。最初产品形态并不清晰时,我们进行了多方面的自我分析。

  第一步思考整个魔方的定位、产品模式、设计目标以及目标用户会如何理解魔方、使用魔方。

  第二步定义每一个子产品的项目目标,并分析其中展示信息内容及对应的功能需求。

  第三步再以组件化设计的思维方式对基础功能进行梳理、拆解分类、归纳重组。

  魔方布局的确定与总结

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

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

  

 

  魔方布局的构成原则

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

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

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

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

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

  

 

  3. 视觉风格探索与总结

  视觉风格探索

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

  

 

  

 

  魔方视觉的设计原则

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

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

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

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

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

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

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

  

 

  4. 布局框架的运用及落地

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

  

 

  魔方上下布局的运用

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

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

  

 

  魔方「口」型布局的运用

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

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

  

 

  总结

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

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

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

扫一扫关注A5创业网公众号

扫一扫关注A5创业网公众号

责任编辑:西瓜

相关文章

  • 如何设计一个好LOGO?LOGO设计网让LOGO设计不再难!

    LOGO是让品牌呈现在用户面前的最好形式,通过LOGO,用户可以快速地识别公司和品牌,因此拥有一个让人过目难忘的LOGO是品牌营销的重要方式。LOGO的形状、颜色、形式,每一个元素都直接影响人们对他的印象,那么什么样的LOGO才能深入人心,起到很好的宣传效果呢?

  • 如何优化操作流程,提升用户体验?

    关于提升用户体验的方法论非常多,其中一个比较常见的就是简化操作流程。我们对此非常熟悉,但是我很少看到有文章系统的去论述该如何去简化操作流程。这里我就做一个简单的分析,如果大家看完之后有所收获或启发,不胜荣幸。

  • 在设计APP签到功能的时候,我在想什么?

    什么是签到?让我们先从表象理解:签到就是用户每天在APP内使用此功能,并得到系统给予的奖励。签到功能,用好了能够有效的促活,用不好的话只是一个增加应用包大小的鸡肋功能。怎么设计一个高效的签到功能呢?这篇文字记录了我的思考,希望能对你有启发。

    标签:
    app设计
  • 抖音播放主页交互设计分析

    众所周知,交互设计是产品经理的必备技能,对一款产品进行交互设计分析,也是产品经理的日常工作之一。那么对于互联网产品来说,我们应该如何对其进行交互设计分析?选取的维度,关注的重点又有哪些?下文我以抖音播放主页为例,说说我的看法。

  • 交互设计师在全流程设计中,有哪些注意事项?

    在整个设计过程中,我们有标准化的设计流程。据我了解:很多大的设计团队流程都是一样的,这里不做过多讲解。在具体的项目中我们经常会碰见各种各样的困难,我们如何克服困难帮助业务成功?如何在协同业务的全流程中利用体验的视角洞见机会,让设计的价值最大化至关重要?

    标签:
    交互设计师
  • 理财产品中,体验金的设计与分析

    理财产品,从推广营销活动开始,用户一层一层流失掉,到最后,投资的用户所剩无几,转化率可想而知。这也是困扰从业者普遍的问题。如何使新用户成功转化为投资用户,成为关键一环。众所周知,在这个线上流量枯竭的时代,互联网理财产品如今获取一个真实有效投资用户的成本相当高。尤其是和金钱挂钩的理财产品,与用户建立信

  • 在设计过程中,有哪些不容忽视的交互设计要点?

    本文总结了一些在交互设计中重要的理论要点,并针对各理论要点展开描述相应的设计策略。主要涉及视觉感知、认知摩擦、认知负荷和情境认知四个方面。视觉是人类认识自然、了解客观世界的重要手段,同时也是理解人类认知功能的突破口。当人们开始观察外界物体时,视觉系统将剌激以图像的方式传递到大脑,并通过大脑的视觉皮层

    标签:
    交互设计
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?

    在设计中,情绪的传达和氛围的营造通常是要看设计项目的目的是什么,而不同的配色和不同的元素组合,往往能够呈现出截然不同的风貌。相比之下,深色系网站常常会呈现出更为独特的氛围,传达出更为复杂多样的情绪。虽然这样的情绪并不一定是正面和向上的,但是好设计总归是让人过目难忘的。想要借助深沉的色调来创造情绪相对

  • 浅色还是深色?教你选择合适的界面配色方案!

    我们的日常生活总是会面临无数的选择,尤其是在职业生涯中,我们必须考虑到很多的反对和挑战,更好的设计解决方案不仅是基于建议,而且是以事实、经验和知识为基础的。今天我们要讨论的是UI设计师在工作中经常会遇到的一个项目:对于用户界面来说哪个配色方案更好,是浅色还是深色?

    标签:
    界面设计
  • PC端表单设计的研究:如何设计一个优秀的表单页面

    最近身边的一些小伙伴,总会遇见B端设计工作,对于这种偏后台设计的B端设计,总会有大量的表单设计需要做,结合以前自己也有过不少表单设计的工作,在这里给大家分享一下自己对于PC端表单设计的研究,聊一聊表单在PC端中的运用。

    标签:
    表单设计
小程序

热门排行

信息推荐

扫一扫关注最新创业资讯