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

2019-05-15

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


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

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

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

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

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

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


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


免费获取报价

  • 29923329

  • 杭州市莫干山路110号华龙大厦307

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2019 杭州派迪科技有限公司  Copyright © 2008-2019  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号