① UI前端设计怎么做
UI前端设计做法分析是：
1、UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。从字面上看是用户与界面两个组成部分，但实际上还包括用户与界面之间的交互关系。
2、界面设计不是单纯的平面设计，需要定位使用者、使用环境、使用方式并且为最终用户而设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。
3、好的UI设计基础界面要做到能够吸引人，给人耳目一新的感觉这就要求工作者不仅要具备广告创意和美工艺术，还要了解心理学，抓住用户的心理。UI设计里面最重要的就是交互设计，负责人类与机器之间的交流，这一操作要简单，便捷，直接有效。通过这一操作从而达到用户的使用目的，这也是交互设计的目的。
② UI设计规范说明书
高质量的规范文档是一个优秀设计系统的代表物。我们详实地描述每个 UI 组件的设计与代码规范，来帮助设计师高效地作出决策，推动开发速度。编写高质量的文档需要前期规划和一系列合理的流程来辅助，付出的成本相当高。
这个系列由六篇文章组成，致力于描述编写组件规范文档的过程。本篇我会从目标读者、文档内容、文档结构开始。然后会涉及案例，设计与代码指南。这些内容来自于我自己这些年的实践经验以及社区里大家所分享的知识。
那么我以一个问题开始今天的主题：文档的目标读者是谁，他们需要什么样的内容，作为编写者我们该怎样组织文档结构来作出清晰的表达？
文档的目标读者
首先：你要弄清楚谁是你的文档的主要读者。
工程师，设计师，还有公司里的所有人！
当一个设计系统包含了代码指南，工程师们显然会是读者。那么一个只包含了代码指南的设计系统应该服务于设计师吗？如果文档里只包含了设计规范而没有代码（如 Material Design），工程师还是读者吗？
在我看来，两个问题的答案都是肯定的。规范文档是从不同的角度来服务于多种角色的。
除了设计与工程，它还服务于其他人吗？很有可能，特别是当文档所在的设计系统已经成为产品的基石时。简短有效的介绍对于 PM（产品经理） 很有价值，QA（测试） 则比较关注案例部分…等等。
Morningstar Design System 在文档页面右侧设计了一个两级的定位导航栏
Takeaway：不论选择哪种形式，最重要的是在整个系统中保持逻辑一致，符合读者的预期与心理模型。
展示设计？展示代码？还是都展示？
把设计和代码融合，就会有读者只对其中一个方面感兴趣，他们会提出自己的意见：
设计负责人可能会问到：我能把这些代码案例和指南隐藏掉嘛？
工程师可能会问：我能把这些和设计规范有关的文字隐藏掉嘛？
可以考虑加一个选项或按钮来允许隐藏设计/代码内容。比如：
Design Only：把代码指南、代码片段和属性表等等都隐藏起来
Code Only：把视觉样式指南和文案指南都隐藏，但还是要把一部分交互用法指南保留着，这对工程师们也有用。
③ UI设计的设计内容是什么
1、图形设计，软件产品的“造型”设计。
2、交互设计，主要是软件操作过程、树结构、操作规范等的设计，软件产品在编码前需要做的是交互设计，并建立交互模型和交互规范。
3、用户测试／研究，这里所谓的“测试”，旨在测试交互设计的合理性和图形设计的美感，主要是通过以目标用户问卷的形式测量用户界面设计的合理性。
如果没有这方面的测试研究，用户界面设计的质量只能由设计师的经验或领导的审美来判断，这将给企业带来很大的风险。
有些公司有非常详细的用户界面设计工作，有些需要做一切。比如，淘宝网的艺术家专注于平面设计；游戏行业的用户界面细分很深，做艺术的人做艺术，做互动的人做互动。一些公司需要在UI上有更多的通用性，甚至在素描交互原型艺术上有一定的前端编码能力。
(3)前端ui设计说明书扩展阅读：
界面设计的前身是图形设计和网页设计。在原有专业的基础上，增加了人机交互逻辑、控制应用、组件状态设计等内容。这是由于互联网的发展细化了扩展的新范畴，所以软件应用程序的设计是基本技能。
有必要掌握诸如PS图象处理软件（图像处理）、插图器（图形制作）、后效（视频处理）、AxEube（原型设计）、Dreamweaver（网页制作）、CordelDRAW（矢量制作）、Flash（动画制作）、HTML5和DIV+CSS网页代码基础等设计软件。
学习各种设计软件的应用是不够的，目前还不能独立创作。由于缺乏创作表现技巧，需要熟练掌握铅笔、水彩笔、素描本、素描板等不同手绘工具的使用。这一部分主要是关于设计思维的训练和表现，着重研究设计理论和构图技巧，并学习分析各种图标的设计原则和表现手法。
④ 说一下前端ui设计是什么
前端UI设计也是网页设计的一种，web端设备例如平板电脑等属于网页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设计有什么区别
两个工作岗位不同，要求的技术侧重点也不同，类比建筑来说，UI相当于设计图纸的，前端是实现图纸
UI设计：用PS把网页设计出来，切html静态页面，前端把按照设计，利用HTML、CSS、javascript把图片上的内容制作成HTML页面。
前端：需要掌握HTML、CSS、javascript 这三种技能，实现静态界面的动态html。
⑦ UI前端设计是什么怎么做
UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI 设计分为实体 UI 和虚拟UI，互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。
UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。
UI设计目前的前景还是很不错的，很多企业都缺少 UI 设计师。而且可以看到的是，现在社会的发展，更多的智能机和智能机器人研发出现，这些都离不开UI 设计师。所以说 UI 设计的是很有前途的，是不会失业的。而且 UI 设计门槛不高，要入门也不难的。
从工作内容来说，UI设计在当前的互联网领域、科技领域可以说无处不在，
好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UI 设计通常分为两个大的工作方向，一个是交互设计,另一个是视觉设计。
总的来说，UI 设计相比较于编程而言，还是非常适合大众学的并且就业前景很广阔。学完 UI 设计，能获得一份稳定而又不失乐趣的工作，同时有利于追求更高品质的生活，在艺术领域可以获得更多的启迪。
⑧ 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、锚点标签、超链接标签、固定定位和绝对定位、相对定位
<a> 标签用于定义超链接，用于从一张页面链接到另一张页面。用于设置锚点，用于页面定位。
7、导航二级菜单显示隐藏
很多网页中的二级菜单栏不直接显示，需要鼠标移动到一级菜单或者点击一级菜单才会展开显示二级菜单。
8、input表单
input表单可以获取用户的信息，做出对应的动作，教程中直观的展示input表单的应用方法。
其实以上教程只是web前端很小的一部分，UI设计如果能够了解前端知识，在设计中可以更好的考虑实现问题，也能够更好的和开发人员交流，也能够提高团队协作的效率，加速项目的进度。
⑨ 前端、UI设计这些到底都是做什么的呀
前端和UI设计这两个技术具体有什么区别，还有很多小伙伴不是很了解。下面小编给大家讲讲前端和UI设计的联系和区别有哪些
一般来讲前端包括网站的表现层和结构层。表现层即前端设计，通俗一点就是Web端展现出来的你可以看到的“美”的东西；结构层就是涉及的前端开发部分，即网站的前台代码实现。
UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。通常包括平面设计，网页设计以及移动界面设计。
前端开发与UI设计之间是相通的。优秀的前端开发人员，不仅要精通前端语言，还要懂一些设计知识以及后端编程。而优秀的UI设计师不仅要会设计，还要懂代码，能在设计的道路上加上程序员的思维。
⑩ UI设计是学什么的啊
UI设计的前身是平面、网页设计，在原专业的基础上加入了一些人机交互的逻辑、控件的应用、组件的状态设计等内容。这是由于互联网发展的精细化延伸出来的新门类，因此设计的软件应用就是基本功了。需要掌握Photoshop（图像处理）、illustrator（图形制作）、After Effects（视频处理）、Axure（原型设计）、Dreamweaver（网页制作）、Coreldraw（矢量制作）、Flash（动画制作）等设计软件及HTML5.0和DIV+CSS网页代码基础。
学会了各类设计软件的应用还不够，此时还不能独立创作，因为缺乏创意的表现技能，所以需要掌握铅笔、水彩笔、素描本、手绘板等不同手绘工具的熟练运用。此部分主要是设计思维的训练及表现，重在设计理论的学习与构图技巧，学会解析各类图标的设计原理及表现技法。