前端如何根据ui设计写页面，前端拿到UI设计的图 如何开始布局设计

各位亲爱的网友，您好！如果你对前端如何根据ui设计写页面还有些疑虑，别怕，今天我会为大家讲解前端如何根据ui设计写页面的相关信息，不仅如此，我还会涉及到前端拿到UI设计的图 如何开始布局设计的相关内容。希望通过这篇文章，能够帮你解决问题。下面，我们开始吧！

前端拿到UI设计的图 如何开始布局设计

前端拿到UI设计的图开始布局设计的方法

布局是页面构成的前提，是后续展开交互和视觉设计的基础。设计者在选择布局之前，需要注意以下几点原则：

明确用户在此场景中完成的主要任务和需获取的决策信息。

明确决策信息和操作的优先级及内容特点，选择合理布局。

一、常用布局

网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。

1、网站展示页

网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议：

明确你要传达的内容，保持简短而清晰的文案。

搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。

2、控制台页

控制台页（Dashboard）集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点：

按照信息的重要程度来组织页面排版，突出展示关键信息。

将数据可视化，让用户可以直观地了解关键信息及整体情况。

合理地使用颜色及栅格排版，减轻用户的视觉负担。

3、列表页

列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的「可阅读性」及「可操作性」是设计的关键。在设计时要注意以下几点：

根据用户需求来定义信息展示的等级，仅展示关键信息及操作。

当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。

4、表格页

表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点：

构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。

更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。

当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。

5、详情页

详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意：

清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。

图文搭配比单文本展示信息能更好地提高用户的理解。

6、表单页

表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程：

考虑用户的浏览方式，提供清晰的用户视线浏览路径；

内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；

标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；

醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。

二、栅格

我们通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按（移动：『页面总宽 750px，内容区 750px』，PC：『页面总宽 1440px，内容区 1208px』）来设定，并在此基础上以 12等分的栅格来划分整个设计建议区域。

建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。

注：图中灰色部分为栅格的列，定义为『Column』，白色部分为栅格的间隔，定义为『Gutter』。

栅格公式：

我们为页面中栅格的 Gutter设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column宽度会随之扩大或缩小，但 Gutter的宽度值固定不变。

网站展示页和 Dashboard的 Gutter宽度为 24px。

列表、表格、详情和表单页面的 Gutter宽度为 16px。

怎么根据前端ui的设计图写html元素大小

首先确认一点，设计稿1920x1080，实际中要减去标题栏、滚动条甚至工具栏、标签页等的距离，才是真实的页面大小；

确保观看页面效果的显示器或者屏幕，起码可以达到1920x1980的分辨率水平（当然也不是必须，但起码会比较省事。小屏幕比如1366x768，倒是也可以通过响应式设计模式，设置成较大的分辨率，但看起来总是麻烦点的不是？），并且DPR保持为1（系统的显示设置里缩放为100%，且浏览器的缩放为100%，不确定的话去控制台打印下window.devicePixelRatio看下是不是1）

确保那个被标注的组件确实是100x50，最好去ps里用标尺工具实际量一下……

如果3不能确定，那给浏览器装个设计稿比对插件然后把预览输出拖进去看看能不能重叠上就好了。

Web前端UI设计方法

UI设计不一定需要精通前端，但是如果UI设计了解前端可以减少和开发人员沟通的技术成本，让团队协作更加高效。那UI设计如何学习前端，需要学习到什么程度呢？

我们分享一个前端教程-网页链接，这里面详细讲解了UI设计中的Web前端设计规则及工具，可以帮助大家深入理解Web前端UI设计方法。

1、HTLM基础认知DIV框架及CSS样式

首先要了解HTLM基础、CIV框架以及CSS样式， HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。DIV元素是用来为HTLM文档内大块的内容提供结构和背景的元素。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2、浮动原理、Margin认知

Margin，是CSS的语法，这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。

3、框架应用搭建

框架很多，在这个教程中选择一个主流框架带大家看看前端框架如何搭建。

4、插入图片、文字标签和版头、导航栏

编写的网页中插入图片，可以使浏览网页的用户得到更好的体验效果。在这一部分会讲解插入图片、文字标签以及版头和导航栏如何实现。

5、Banner块插入、内容文字排版、内联元素、A标签和Banner链接定位

Banner是网络广告最早采用的形式，也是目前最常见的形式。它是横跨于网页上的矩形公告牌，当用户点击这些横幅的时候，通常可以链接到广告主的网页。而网页中的文字内容排版也直接影响着网页的美观以及网页的用户体验。

6、锚点标签、超链接标签、固定定位和绝对定位、相对定位

标签用于定义超链接，用于从一张页面链接到另一张页面。用于设置锚点，用于页面定位。

7、导航二级菜单显示隐藏

很多网页中的二级菜单栏不直接显示，需要鼠标移动到一级菜单或者点击一级菜单才会展开显示二级菜单。

8、input表单

input表单可以获取用户的信息，做出对应的动作，教程中直观的展示input表单的应用方法。

其实以上教程只是web前端很小的一部分，UI设计如果能够了解前端知识，在设计中可以更好的考虑实现问题，也能够更好的和开发人员交流，也能够提高团队协作的效率，加速项目的进度。