UI设计中文字和图片不对齐

㈠ UI设计中如果图标大小不一致一般怎么处理

首先，这种方法制作出来的图标大小为48px*48px，需要其他尺寸的图标可以做完之后等比放缩即可，放缩过程中可能需要注意半像素（见下文）的问题。

Material Design把图标的形状类型分为三种：圆形、方形和矩形。其中圆形的半径为44px，方形的边长为38px，矩形为44px*32px。

怎么判定图标应该套用那种尺寸的？有一种方法是：将图标与上图的模板居中对齐，然后中心不动，放大图标使之图标依次碰到三种形状的边界，填充最满的那个形状的尺寸就是该图标需要规定的尺寸。如下图，依次将设置图标放大并使之接触到不同形状的边界，可以看到在圆形里，该图标最大，证明设置图标最匹配圆形，所以使用圆形的尺寸44px*44px。

顺便把这次整理图标遇到的坑也记录一下：

1. 关于半像素的问题。

半像素的问题主要是在进行Android不同尺寸适配的时候，有时候开发会要求图标不能出现非整数的尺寸，不然可能图标就会糊掉。所以在设计Android端使用的图标时，注意一下这个问题。适当地对尺寸进行四舍五入一下即可。

2. 关于iconfont的问题。

现在大部分团队都会将图标转换为iconfont，这样可以缩小整个项目的大小。图标在转换为iconfont的时候，会忽略所有的线条（包括填充色块的边）。所以，如果图标中有线条，则需要利用高度为1px的矩形代替，色块的边长需要用色块叠加来替代。

3. 关于对齐的问题。

如果有仔细看，我这个方法指定的图标大小为48px*48px，但是里面有内容的部分，比如说圆形，就只会占据44px*44px，这时候我们当然会希望把图形放置在图标的中央。免不了就会使用对齐工具，咻咻两下，一个上下居中对齐，一个左右居中对齐，搞掂。但是，慢着，如果仔细发现一下，你会发现看上去并不是居中的。这是由于人的视觉错觉造成的，这时候就需要进行适当的调整，通过自己的视觉判断来进行对齐。

4. 关于颜色统一的问题。

一般而言，图标设定为同一个色值（比如#999999）就能统一颜色，但是也有遇到过某个图标会显得颜色比较浅，具体原因未知，这时候就需要进行特殊的处理，比如设定更加深的颜色，比如#333333，具体通过自己视觉调整即可。

㈡ UI设计中的文字到底应该怎么设计

针对文字这一块，一般不需要UI设计师操心，程序员会针对不同的操作系统，使用不同的字体（想IOS系统，对中文字和英文字的字体都是有要求的）。如果是艺术字，那就需要UI设计师自己设计了，做好之后要切图给程序员！

㈢ ui设计流程图怎么做

一、流程图工具

1、Mindnode

Mindnode是在Mac和IOS上的流程图工具，它同时具备专注性和灵活性。是进行头脑风暴和组织规划生活事务的绝佳工具。

4、MindManager

其实，思维导图工具都是大同小异，具体的你用的舒不舒服，需要你亲自实践，你觉得哪个合适你，你就选择用哪一个。

有关UI设计的工具可以看《ui设计工具大揭秘》

㈣ UI设计常用字体有哪

1.平平稳稳:微软雅黑/方正中黑
微软雅黑系列：在网页设计中这款字体使用的非常平凡，这款只无论是放大还是缩小，形体都非常的规整舒服。在设计过程中建议多使用雅黑，大标题用加粗字体，正文用常规字体。
方正正中黑系列：中黑系列的字体笔画比较锐利而浑厚，一般运用在标题文字中。但这种字体不适用于正文中，因为边缘相对比较的复杂，文字一多会影响用户的阅读。

㈤ 到底什么是UI设计规范

没有规矩，不成方圆。UI设计也不例外，具有设计规范，系统建议的规范可以让我们设计具有统一性，界面视觉更美观。

想要高效顺畅地完成设计任务，就必须遵守UI设计的规范。

今天带来的这些规范，可是成为优秀UI设计师必须知道的"纯干货"，还能让大家深刻了解UI设计规范的本质是什么。

图标规范

很多设计师以为UI设计就是设计图标。虽然事实并非如此，但图标的设计在整个UI设计中是比较基础的一个环节。

图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计。

而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。

特别是对于新人，所以大家一起来看看图标设计的规范吧：

1
像素对齐
需要严格的做到像素对齐，尤其是在做较小尺寸的图标时，如果不严格的遵循像素对齐，那最终的显示效果就会出现问题。

2
多用布尔运算
在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔，这样做的好处有如下几点：

o 让你的图标更加规范
o 对图形结构理解更加深刻
o 后期更改形状更加方便

3
独特的风格
在做系列图标的时候，一定要在前期给图标设定一个风格及原则，使之看起来与众不同。

在这里值得一提就是，我们在做线性图标时，一定要保证描边粗细相同、圆角相同，如果这些基础的规则都没有遵循，那也就谈不上风格的统一、创新了。
4
视觉大小统一
在进行图标设计的时候，我们会使用栅格辅助线来帮助我们更加严格谨慎，但一定不要被辅助线困住，学会灵活运用，保持视觉上的大小统一。

在如今的APP设计环境当中，一些APP设计大牛都一直强调，设计师要为有品牌意识。

那么，在图标的设计中，我们也必须强调"品牌性"，简单的说就是把品牌中的抽象的概念变成具象化的图形，把品牌主副色调应用到图标设计中。

同时建议大家每个星期完成一个主题的作品，提升自己的平面设计能力。

标注规范

如何把标注的思路整理清晰--结构化思维进行拆解，将大问题拆解成小问题，逐一击破！

标注主要是以下四种不同属性的内容：尺寸、文字、间距、颜色。
在进行标注时，首先去除导航栏和标签栏，因为这些控件通用性非常强，需要单独拿出来进行统一标注，这里我们只对内容区来进行标注示例。

㈥ UI设计和平面设计有什么区别，该怎么选择

很多人都不能分清平面设计和UI设计在本质上有什么不同，甚至认为两者都是设计，没什么区别。其实不然，UI设计和平面设计有很多不同。
平面设计：也叫做视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
UI设计：是对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网常用的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。
设计载体的差异
平面设计通常以各种纸张平面为载体，设计师以毫米为单位进行设计工作。往往存在这种情况，只是相差一毫米，一个包装盒就无法成型。而UI设计是以像素为度量单位的，举个最简单的例子，宽度30毫米的方格可以和宽度1毫米的直线居中对齐很简单，但是宽度30
像素的方格是无论如何不可能和宽度1像素的直线对齐的。这就是很多非专业UI设计师在设计框架结构时常常出现错误的原因。
两者应用的方向不同
平面设计由于更多地针对视觉进行设计，因此要更多地注重视觉上的美观，要符合大众的审美，更多地注重色彩搭配，版式排布、字体字号等视觉上的展现形式，应用的方向也都是为了吸引看到的人。让他们觉得眼前一亮，就算成功了。
但是UI设计需要在虚拟应用的界面上展示，更多要注意的是用户的应用体验和使用感受。如果你设计的界面在操作上特别麻烦，不舒服，那无论多么好看的设计都是失败的。
这里我更建议你选择UI设计

㈦ UI设计的时候要注意什么

学UI设计需要注意的问题：

1.简易性。界面的简洁是要用户便于使用、便于了解产品，并能减少用户发生错误选择的可能性。

2.用户语言 界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。

3 记忆负担最小化 人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定，24小时内存在约25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。

4.一致性 它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与产品内容相一致。

5.清楚 在视觉效果上便于理解和使用。

6.用户的熟悉程度 用户可通过已掌握的知识来使用界面，但不应超出一般常识。

7.从用户习惯考虑想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。通过比较两个不同世界(真实与虚拟)的事物，完成更好的设计，如：书籍对比竹简。

8.排列一个有序的界面能让用户轻松的使用。

9.安全性 用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。

10.灵活性 简单来说就是要让用户方便的使用，但不同于上述。即互动多重性，不局限于单一的工具(包括鼠标、键盘或手柄、界面)。

11.人性化 高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。以上在设计UI作品是需要有的思维，所以不妨在设计前，先构思一下，是否符合这些标准，才给老板客户交稿吧!

如果有兴趣学UI设计的话，建议花60秒时间点击下方评论测试一下自己适不适合学：↓↓

㈧ UI设计网页设计字体规范应该要注意什么

下面列出UI设计网页设计字体规范特点：

微软雅黑/方正中黑：在网页设计中这款字体使用的非常频繁，这款字无论是放大还是缩小，形体都非常的规整舒服。在设计过程中建议多使用雅黑，大标题用加粗字体，正文用常规字体。

方正正中黑系列：中黑系列的字体笔画比较锐利而浑厚，一般运用在标题文字中。但这种字体不适用于正文中，因为边缘相对比较的复杂，文字一多会影响用户的阅读。

方正兰亭系列：整个兰亭系列的字体有大黑、准黑、纤黑超细黑等。因笔画清晰简洁，这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合，不仅能保证字体的统一感，还能很好的区分出文本的层次。

汉仪菱心简/造字工房力黑/造字工房劲黑：在这几个字体中，他们有着共同的特点，字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式，让文字显得更为活力。

在这三种字体中，菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松，更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多，效果比较突出。

宋体：Win最常见的字体，小字体点阵，大字体TrueType,但是大字体并不好看，所以最好别做标题。适用于复古，典雅，传统，品质，灵动等主题。

Arial：Helvetica的“克隆”，和Helvetica非常像，细节，上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显 示都正常。

(8)UI设计中文字和图片不对齐扩展阅读

UI设计规范：

网页的布局主要有两种：左右布局和居中布局。布局不一样使设计的空间也不相同。

⑴、左右布局，灵活性强，UI限制小；左右通栏为导航栏，宽度没具体限制，可根据实际情况调整；右侧为内容板块范围，是网站内容展示区域。

⑵、居中布局，中间的深色部分为有效的显示局域，用于网站内容的展示；两边留白没实际用图，只是为适配而存在

当前最流行的分辨率是1920px*1080px的，所以建议创建网页尺寸为1920px*1080px，页面中心区域常设置为1200px（或1000px -1400px区间），以这个尺寸来设计相对标准。每个屏幕的高度约为900px。因为1080还要减去浏览器头部和底部高度，大约就是900px了。

网站的字体大小并没有硬性规定具体的字号，根据实际情况可以酌情考虑，但是要使用偶数字号。

1、字体规格也不需要太多，最多使用三种混搭，当一个页面中使用的字体超过 3 种时，会给用户带来“不专业”、“没有权 威性”、“没有层次结构”之类的感觉。

2、层次的区别，可以改变字体颜色或加粗来体现。

3、字体优先使用各操作系统默认的字体。字体选择有版权、笔画严谨、清晰可读、经典。

㈨ 如何体现在UI设计中细节展示

UI的组成元素？界面大多都是由字体，图形，色彩构成的，这也是设计三大要素。那么在设计中，我们如何去处理好里面的关系呢，今天和大家分享一些常用的设计技巧，帮助大家在做设计时候更好去排版，英文示例只说明技巧中文同样适用。▲我们尝试把上图这个UI界面拆分一下，可以看到界面基本都是由字体、色彩、图形三大板块组成的。 ▲同理：上图我们按照同样的方式去拆分，依然可以获得三部分的内容 字重创建层级▲我们都知道字体是有重量的，不同的字重可以体现界面层级，特别是现在的iOS风格中，更强调通过字重对比来提升视觉层次，但是很多设计师只知道运用字体大小去做对比，却忽略了：运用字重和颜色去做层级区分同样适用。 ▲这段文字比较重要，就加大，这个文字次要就缩小,这是大多数设计师做设计的习惯，但是不要过多依赖大小对比去区分层级 ▲我们可以尝试通过加大字重，同样可以达到效果 ▲可以感受一下当视觉字重变化时，整体版面的层级区分 ▲字重的对比在平面设计，版式设计运用比较多 ▲品牌设计中，不同字重带来视觉感受和舒适度是截然不同的 ▲商品卡片设计中，通过字重区分层级的视觉效果，信息捕捉效率显然要比整个版面都用统一字重要更快。 颜色创建层级在UI排版中，除了字体层级，颜色也是很重要排版手法之一，做界面时候不要只用一种颜色，主要内容黑色，次要内容灰色（文章日期等）辅助内容浅灰色，然后结合前面所说字重运用，能很好的和信息组成视觉节奏。 ▲界面中的线条和色块都是区分层级的辅助手段，按照界面调性去实际调整 ▲错误做法：让文字变成浅色比较适合在白色背景下，如果不彩色背景上面使用灰色，因为带色彩背景和灰色如果一起使用，会显得界面特别脏，识别度还低 ▲通过对图片，彩色背景通过降低透明度的效果会更加好 ▲通过降低文字透明度也能拉开视觉层级 ▲选择与背景相同的色相，直到饱和度合适为止 投影运用创建层级市面流行风格里面，投影运用大都比较多，但是在用投影的时候，我们需要尽量保持它的干净和利索，不要使用过大的投影值和扩散范围，尽量使用柔和投影或者垂直投影。 间距创建层级 ▲我们在做很多设计的时候，容易用到很多分割，什么时候用线什么时候用投影，如何让界面更加干净，有时候通过留白来区分层级，效果会比线更加干净清爽。 中心轴创建层级 ▲这个页面中，很明显左边比右边好，右边信息缺少对齐和呼吸感，左边有一条明显中心轴让页面更加的清晰。 总结今天和大家分享的只是UI界面中一部分经典区分层级的要素特点，希望大家都能举一反三，运用到自己的作品中去，做出更多具备细节感受的作品！

㈩ 在UI设计创作时要注意些什么

在UI设计创作时要注意些什么，UI设计作为信息设计的一部分，它正在悄然出现在我们的生活。UI即User Interface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。

③颜色的协调。为让设计更具吸引人的亮点，细心、科学的选择颜色，是一个不错的选择，它是一种用来烘托主题的重要手段。例如，彩色的搭配能打破视觉单一，促进交互行为。

选择不同的配色技巧时，要考虑色彩如何最好地与品牌相结合，并为用户服务。要产生最佳效果，就要带着特定目的运用色彩，通过设计吸引用户，促使他们采取行动。无论是使用浅色还是深色，或者是纯色和流行混搭，色彩都能影响用户对于设计的认同和使用频次。

学习UI设计注意这几点

UI设计