网站首页 > 界面表现> 文章内容

UI设计稿和成品界面差异大?多半是网格系统没弄好!

※发布时间:2020-1-5 5:49:41   ※发布作者:habao   ※出自何处: 

  网格系统是一门知识面比较广的学科,这里专门针对Web设计中的一些方式、方法来对网格的知识做一个简洁的提炼,以便大家在界面设计和前端开发时,有一个比较理想化的参考。

  网格这一概念已经沿用了许多世纪。它不仅仅适用于Web设计,也可以运用于其他领域,如平面设计、广告创意、APP设计等,图为Web 设计的网格示意图。

  这里说到了前端开发,它和网格有什么必要的联系呢?在前端开发过程中,开发者需要对网站的安全宽度、各设备的响应式宽度,以及对不同模块之间及图片文字之间的对齐负责,这些参数需要和设计师的设计稿相符,才能够高度还原设计稿。设计稿和成品网站经常会有特别大的差异,一定程度是由于协作之间产生了很多问题,无法协作设计规范,导致设计与代码的相融性太差。所以我们在设计时,要做好网格标注。在开发过程中,一个像素的误差就可能造成模块间的错位,所以我们需要重视网格系统。

  在开始绘制一个网格之前,有许多因素需要考虑。比如,网站面向的用户是谁?界面想要传达的思想和意图是什么?使用什么尺寸的字体?界面模块的尺寸是多少?如何使设计的内容可读性强,易于用户理解?界面布局大概需要几行几列?思考这些问题,以更好地利用网格这个工具,你的设计会更上一层楼。

  熟练掌握基本设计原则,能够帮助你成为更好的设计师。使用网格也是基本的设计原则之一。掌握网格是一项由来已久的基本功,需要我们学习了解一些常出现的概念,如网格结构。

  首先分开来说,“网格”是由垂直和水平线组成的,“结构”指元素之间的组织与排列。那么通俗一点儿说网格结构就是通过沟槽、行和列、模块、空白、参考线等构件来给页面的文本、图片、信息或图表等元素做一个灵活的结构布局,它能够处理复杂的信息结构,能够更好地帮助设计师完成主要和次要信息的规划,如图所示。

  单列网格在结构布局上只有一列,用来处理篇幅较大的信息流、图片流,不需要复杂 的图文排版。这种结构在一些全屏设计、海报、布局、HTML5特效页面设计中是比 较常用的,如图所示。

  双列网格在结构布局上有两列,用来分隔设计中的一些不同类型的信息,这些信息可 以是图片、文字,也可以是视频等。两列可以是均等宽度,也可以是一定比例的不同宽度,较小宽度的可以用作侧边栏或辅助栏目,如图所示。这种结构常见于博客设计。

  如图所示的游戏风格的网页案例,使用了不同比例的双列布局,将区域固定在右侧,并且按钮比例偏大,非常明显,便于突出游戏主题和引导用户快速了解并操作游戏。

  多列网格顾名思义,是使用两列以上的结构,将不同的内容或相同的内容有序地组合起来。多列网格也可以使用一定比例的不同宽度列来进行布局,如图所示。这种布局在瀑布流、博客、、图片展示等领域运用非常广泛。

  如图所示的网页案例用瀑布流的砖块布局(Masonry Layout)展示用户的作品,显而易见、便于访问,同时也能够容纳较多的信息。

  简单地说模块网格就是由等距离、等空间的无数小方格组成的行与列的组合。它可以针对比较复杂的信息进行布局,如表格、日历、图标、统计数据、不规则图片、图片不规则排列等。模块网格多用于一些信息量大或复杂的排版,也用于大多数普通常见的信息排版、非传统布局 界面排版或偏向交互过程的网页界面排版。这类网页一般来说直观看上去并没有太明显的对齐 感,但是它也遵循了网格参考线(不可见的非实体线)的对齐约束,或者是在使用过程中由一定的交互动画来完成最终的对齐效果。这种稍微复杂的信息结构,并不能靠单纯地使用单列或多列网格结构解决问题,因此才引入了模块网格这个概念。

  如图所示的案例包含、表格、APP 图标、Banner、通栏文字等复杂元素,网站中每个模块都混合使用了单列、双列和多列结构,因此整个页面信息结构较为复杂。图中的淡红和淡绿色交汇区域,也是控制在网格的比例范围内的。

  简单地说,“网格结构”重在表现信息的结构和层次,是一种网格 的基本知识,并非设计过程中的工具。而“网格系统”作为一种工具和技巧,强调在设计过程中为设计师提供一个基础的网格,让设计师能够更好地运用不同的网格结构来展示信息。在网格系统的辅助下,设计师可以有效地运用不同的网格结构进行排版设计。往往一个 12 列的网格系统可以表现为多种网格结构。

  层级网格从字面理解就是采用横向的分层,将信息有序地展示出来。一般来说,介绍 产品功能的网站或单页网站,运用层级网格的方式展示常常见的。

  通常情况下,层级网格都是搭配单列、双列、多列或模块网格使用的,在设计过程中,不单单需要考虑信息的纵向阅读,更要考虑信息的横向对齐与可读性。

  如图所示的案例是一个单页网站,由上至下分别包含了全屏 Banner、特色、团队、通栏广告、表格、页脚等模块,这些模块由上至下展示,增强了用户操作页面时的可读性。淡红色区域使页面信息分层级有序地展示给用户。

  文字編排設計是複雜的過程,須考量層次、閱讀順序、可讀性與對比等諸多因素。但在字體排印系統上,過去台灣、亞洲平面設計學界及業界過度偏重「網格系統」,忽略其實還有其他系統的存在。本書即是透過八大系統的完整介紹,讓相關讀者能夠重新完整地認識文字排印系統,進一步增進設計師的設計能力、拓展設計的可能性。义渠骇

  

相关阅读
  • 没有资料
重庆学习网zslpsh,0755深圳房产人才招聘网,拾年网90后,anedc股票,最新电影下载淘娱淘乐,重庆中学生网高考,重庆中学生网高考,学习重庆方言网,重庆中学生学习方法,重庆俗语网,中学生网zslpsh,0755深圳交友网,重庆初中生,贵州重庆方言网,025新闻网,西南重庆方言歌曲,025南京交友网,重庆农家乐美女,观赏蟹种类zadull,云南重庆方言网,重庆中学学习网,028成都交友网,推广taoyutaol,西南四川方言网,观赏龟论坛zadull,四川重庆方言网,022天津交友网,重庆中学生网家长,鹦鹉鱼zadull,重庆俗语,电影淘娱淘乐,taoyutaole娱乐,华夏视讯网,0755深圳旅游招聘,昆明重庆方言网,淘娱淘乐影视,www.00game.net,观赏鱼zadul,重庆高考zslpsh,重庆中学生网高考,027房产招聘网,坝坝舞wagcw,西南重庆方言网,贵州重庆方言网,重庆言子儿网,热带鱼zadull,重庆高考zslpsh,0755深圳旅游招聘网,淘娱淘乐影视网,0571.361.cm,重庆方言学习网,028成都新闻,异形观赏鱼种类,影视网淘娱淘乐,最新电影下载淘娱淘乐,0773桂林论坛,拾年网80后动画片,观赏蟹论坛zadull,观赏龟繁殖教程,重庆一中zslpsh,重庆俗语网,广场舞wagcw,观赏虾的种类zadull,观赏鱼观赏虾观赏龟,西南方言网,观赏鱼之家论坛zadull,战争前线辅助00game,西南重庆方言小说,重庆中小学zslpsh,推广taoyutaol,战争前线论坛00game,0871交友网,025南京新闻网,重庆言子儿网站,娱乐taoyutaole,022天津交友网,025新闻网,重庆中学生网学习,022天津交友网,重庆方言歌网,www.120.cm健康网,anedc股票,重庆初中生