ui界面设计怎么切片教程

1. 加深品牌印象与品牌感

一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，例如闲鱼、马蜂窝等，主色都采用了黄色，因为黄色具有非常活泼的特性。另外，有一点一定要注意，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用，所以在色彩选择上还是要谨慎。

2. 引导用户视觉来增加易读性

大家应该都有所体会，色彩的运用会将整个页面的层级凸显出来，而不单纯的用中性色来区分层级。所以在界面中，什么样的地方使用色彩是有讲究的。在设计中，通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩，这样做的目的就是提升易读性。

3. 区分信息交互的状态

同样是设计作品，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的「4.7万」和「展开」却不一样，「展开」使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性──点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱。

另外，UI 设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺 app 中播放详情页面，当前版块标签和正在播放剧集的激活状态。

4. 营造氛围传递热度

色彩除了上述所说的不同使用之外，在图片和整体氛围营造中也起了很大的作用，目前很多 2c 的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销版块的瓷片区域都会用品牌色在活动时段内进行氛围打造。

以上就是小编分享的色彩对于UI设计的重要性，对于想要学习UI设计配色的小伙伴们来说，掌握这些内容很重要。最后，希望大家都成为一名优秀的UI设计师。

1、确认目标用户：

在UI设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

2、采集目标用户的习惯交互方式：

不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。

当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。

3、提示和引导用户：

软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。

4、一致性原则：

软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。

例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是局部。

5、可用性原则：

软件要为用户使用，用户必须可以理解软件各元素对应的功能。

比如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

扩展资料

UI设计师的职能大体包括三方面：

一是图形设计，软件产品的“外形”设计。

二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。

三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量UI设计的合理性。

如果没有这方面的测试研究，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来极大的风险。

参考资料来源：百度百科-UI设计

iOS 10 以及 Apple Music 的新界面验证了我持续几年的一些想法：

无论是所谓扁平还是拟物，过去十年来的 GUI 设计都是在屏幕上的。对于移动设备，就是在玻璃上。

无论我们做了多么细致的皮革与金属拉丝的纹理，或仅仅是一片 #000000，用户都是在摸着玻璃，而不是摸皮革摸金属或者摸一片虚空。

对于第一种情况，我们把拟物效果做的越逼真，就越会 frusrate 掉用户的期待；第二种情况，我们很难猜用户在想什么。

但无论如何用户都在摸玻璃，所以有了 iOS 7，玻璃是一切隐喻的载体。

地摊上十块钱三个的仿玻璃塑料花瓶就是一种 low poly。

现代手机 app 的 UI 设计一大半的点在排版上，typography 在 UI 设计师群体里已经成了显学。

人们在玻璃上的排版经验并不丰富，你可以想一想商场的玻璃门。

但人们在纸上的排版经验很丰富，所以 Holo 一步步变成了 Material Design。

卡片似乎是最好的解决方案，但这个风格已经被 Google 占了。

瓷片也可以，不过这个概念已经被 Microsoft 占了并且并不意外的搞砸了。

那么，圆角瓷片！

瓷片不再是玻璃上的一层镀膜，而是有厚度的，可以水平重叠的。想想 Safari 的所有标签页和回复邮件的界面，它们都是像一层层没有厚度的玻璃幕墙一样竖立着。

新的 Apple Watch Edition 是陶瓷材料。

别忘了，上面这些东西背后的 boss 都只有 Jonathan 爵士一个人，一个曾经设计过陶瓷马桶的人。

1、界面尺寸：1920-2000px带有底图必须那么大（无底图的1366-2000px）

2、版心：980-1220px

3、Banner高度建议870px；

4、分辨率72px

5、色彩模式RGB

6、按钮高度为文字字高的的2-2.5倍

7、字体

导航：14px

字体：宋体 微软雅黑

字号：12、14、16、18、20px

专题页字体建议是12、14px，电商主页建议：16、18、20px

8、焦点图高度：600px-700px

1、尺寸：730x320px

2、登录界面的字体：12px 宋体 字体样式无

3、文本框高度为文字字高的的2-2.5倍

4、头标与框高度为20px

1、企业占中颜色尽量控制在三种以内

2、背景色：70%     主色调：25%     强调色：5%

背景有底纹画布大小建为1920-2000px

背景无底纹画布大小建为1366-2000px

4、版心宽度 980px 或 1000px 左右

5、焦点图高度小于580px 底部坐标到580px

6、在做企业站中要使用统一字体：宋体（Banner图除外）

1、头部注册、登录：12px 宋体

2、导航：16 18px 仿粗    底色块高度为字高的2-2.5倍

下拉导航与导航为从属关系建议使用小一号字体14px

内容区域的文字一般分为标题和正文两种，可以选择统一字号，用仿粗区分

文字区域到表框的边距一般为10px-20px

版权信息文字用12px

1、1寸：2.5x3.5cm     5寸：12.7x8.9cm

证件照拼版建议画布大小为12.7x8.9cm

横版：90x54mm  90x55mm

竖版：50x90mm  45x90mm

圆角名片：85x54mm

折叠名片尺寸不固定

使用材质：纸张（大于200g）

四色印刷：CMYK      出血值1mm

名片的主要内容：公司名称  LOGO    姓名  职务  联系方式  业务范围

1、名片边缘留足5-10mm距离

2、logo大小不能小于1cm

3、名片中最小的文字不能小于6px

1、将所有文字转曲（交与客户源文件）ctrl+a-    ctrl+shift+o

2、交与印刷厂PDF格式，不保留AI编辑功能

3、加入出血值

1、x展架尺寸：60x160cm  80x180cm

易拉宝：高200cm  宽80  90  100  110  150cm  常见的为80*200cm

展架、易拉宝输出方式为写真机，写真机输出幅面一般为：90  120  150cm

易拉宝输出材质：相纸（背面无胶）

展架：背胶纸（背面有胶） 装裱在KT版上

输出方式：写真：1软件可以使用ps软件（黑色为四色黑）

2、颜色模式可以为RGB也可以用CMYK

3、文档建立尺寸和实际尺寸一致，不需要加出血

4、展架易拉宝分辨率为72或80，特殊情况可以使用300（封面）

5、查看画布效果时，缩放比例为100%

6、使用黑色必须为四色黑（CMYK都为100），不能使用单色黑，使用单色黑，制作出的易拉版展架会有条纹。

7、背景的过度使用弱对比：色相H接近或相同，饱和度S差值在30以内或者明度B差值在30以内

8、强对比（背景与要突出的产品或文案）：色相H相反，饱和度S差值在70以内或者明度B差值在70以内。

1、四色印刷----CMYK(专色印刷要出专色版)

2、成品尺寸：制作一个90*120的三折页（从印刷厂制作完成后并且折叠后的尺寸）

2、展开尺寸：宽度 90+90+90=270  高度210

2、制作尺寸：展开尺寸+出血

2、大16K：210*285 毫米      成品尺寸 ：95*210或90*210     正度16K：185*260毫米

iPhone：320x480  640x960  640x1136  750x1334  1080x1920

Ipad:1024x768  2048x1536

Android:482x800  720x1280  1080x1920

Ipad、iPhone:状态栏：40px

导航栏：88px

主菜单栏：98px

内容区域：910px

状态栏：50px

导航栏和主菜单栏：96px

内容：1038px

1、iphone英文字体为Helvetica,中文为华为细黑，冬青黑体，不用微软雅黑。

2、可点击对象的区域：尺寸不要小于44*44px

六、智能电视

分辨率模式：1920×1080、1280×720 我们常用还是1920×1080的分辨率进行设计

颜色与分辨率

1、不要使用纯白色（#FFFFFF）可采用#F0F0F0

2、高饱和度颜色尽可能少用，会显示失真

3、大范围渐变会导致带状显示，无法达到平滑过渡

4、在界面边缘最好留出10%左右的空间（54PX）

LM317是可调节三端正电压稳压器，在输出电压范围1.2V到37V时能够提供超过1.5A的电流，此稳压器非常易于使用。 LM317作为输出电压可变的集成三端稳压块，是一种使用方便、应用广泛的集成稳压块。LM317系列稳压块的型号很多：例如LM317HVH、W317L等。电子爱好者经常用317稳压块制作输出电压可变的稳压电源。 稳压电源的输出电压可用下式计算，Vo＝1.25（1＋R2/R1）。仅仅从公式本身看，R1、R2的电阻值可以随意设定。然而作为稳压电源的输出电压计算公式，R1和R2的阻值是不能随意设定的。 首先LM317稳压块的输出电压变化范围是Vo＝1.25V—37V（高输出电压的LM317稳压块如LM317HVA、LM317HVK等，其输出电压变化范围是Vo＝1.25V—45V），所以R2/R1的比值范围只能是0—28.6。 其次是LM317稳压块都有一个最小稳定工作电流，有的资料称为最小输出电流，也有的资料称为最小泄放电流。最小稳定工作电流的值一般为1.5mA。由于生产厂家不同、型号不同，其最小稳定工作电流也不相同，但一般不大于5mA。当LM317稳压块的输出电流小于其最小稳定工作电流时，就不能正常工作。当LM317稳压块的输出电流大于其最小稳定工作电流时，就可以输出稳定的直流电压。如果用LM317稳压块制作稳压电源时，没有注意最小稳定工作电流，那么制作的稳压电源可能会出现下述不正常现象：稳压电源输出的有载电压和空载电压差别较大。 在应用中，为了电路的稳定工作，在一般情况下，还需要接二极管作为保护电路，防止电路中的电容放电时的高压把LM317烧坏。 三端稳压器件78xx/79xx 系列三端稳压器件是最常用的线性降压型 DC/DC 转换器，目前也有大量先进的 DC/DC 转换器层出不穷，例如低压差线性稳压器 LDO等, （例如，NSC 的 LM2940、LM2651、LM5020，MAXIAM 的 MAX1747 等等）。 78xx/79 系列简单易用、价格低廉，直到今天还在大多电路中采用。 如7805，7806，7809，7812，7815，7824，（79××）。以及三瑞可调稳压（LM317,337,338......） 78xx/79xx系列在降压电路中应注意以下事项： 1、输入输出压差不能太大,太大则转换效率急速降低，而且容易击穿损坏； 2、输出电流不能太大，1.5A 是其极限值。大电流的输出，散热片的尺寸要足够大，否则会导致高温保护或热击穿； 3、输入输出压差也不能太小,大小效率很差。

1.竖右弯2.竖3.竖4点

1、u两笔写成，右弯,然后写竖,写成的u占中格。

2、i两笔写成，先在中格写竖,在上格写点。标声调时不写点。

注意: ui的声调标在i.上并且占.上格。

一、字体

                iOS的字体：

                                  中文字体：苹方 / PingFang SC

                                   CSS：Font-Family：PingFang SC

                                   英文、数字：Helvetial

           

               Andioid的字体：

                                  中文字体：思源黑体 / Noto Sans Han

                                   英文、数字：Roboto

二、规范

       

            1、  iPhone界面尺寸

2、  iPhone图标尺寸

3、  iPad的设计尺寸

4、 iPad的图标尺寸

5、 Andioid的图标尺寸

6、Andioid的dp/sp/px换算表

三：小结

                    iPhone的主流设计尺寸：750x1334 px

                                                          1242x2208 px

                    Andioid的主流设计尺寸：720x1280 px

                                                           1080x1920 px

文中还提到了Sketch迁移到 Figma 的一些问题和解决方案，来，我们一起学习吧。Figma进阶功能

3.1 组件(components)

组件和实例：组件是母体，实例是复制体，组件可以删除和修改，不可逆向为组，实例不可直接编辑，但可以逆向为组，然后修改。没有一个固定位置用来存放组件，你最初组件化的那个组，就是唯一的组件母体，且组件不会被收起在一个组件页中，而是存在原本的位置。

组件和实例是分开的，简单理解就是，你最初设计的一个元素，通过Component功能打包为组件A，这个组件就是原始组件A，此时在左侧assert模块下就会存在一个固定组件(类似组件库模块)，当你从Assert模块中拖动出来一个新的组件A，或者从原始组件A复制一个新的组件A，这个新的组件A就是实例，实例可以被还原为组。

3.11我如何找到最初的组件?

首先需要说明，Figma的组件管理方式很灵活，但相较于Sketch的确不够规范，这里仍建议设计师新建一个layers,以组件来命名，将原始组件都放置在这个页面，易于管理。

该Layer主要目的在于管理原始组件，例如当需要大批量修改组件时，切换到组件Layer快速修改，修改后快速映射到所有设计稿。

当需要调用组件时，则推荐使用官方提供的Assert模块，通过拖拽调用组件实例。

在实际工作场景中，我们需要从实例跳转到原始组件，以进行大批量效果修改时，可通过属性检查器中的组件icon快捷跳转至原始组件。

3.12实例操作

在实际工作中，我们会遇到使用一个类似组件来建立新组件的场景，此时需要将组件逆向为组，然后进行编辑，在Figma中仅实例可以进行逆向，方法是右键，或者在属性检查器区域执行Detach

instance命令。

当直接在当前正在操作的实例上进行少量变更后，可以通过覆盖功能将当前的属性同步给组件和所有实例。

方法是在右侧属性检查器执行Push Overrides to Main Components。

3.13组件库的使用

如何上传和维护组件库?

Figma的组件库系统极其友好，易于维护。设计师只需要将已经设计完成的组件系统和样式系统放置在一个文件中，然后就可以基于当前的文件已有的样式和组件直接建立共享组件库，只需要在Assert的Library入口进入组件窗口，通过组件库窗口中的上传(Publish)功能,完成上传，团队成员就能获得该组件库内容。

后续维护组件库的工作只需要在该文件上进行修改和完善，随后回到library窗口进行更新。当然，在你对组件库进行修改后，Figma会自动弹出快捷窗口以供你迅速更新组件库，这也不失为一种好办法。

当你更新组件库后，其他使用了该组件库内容的设计师会同步收到更新消息，且可以快速同步到最新版本，以保证设计一致性。

如何使用团队成员已上传的组件库?

在Library窗口，团队已公开的组件库会以List的形式展示，设计师只需要点击你的目标组件库左侧的switch，即可唤醒该组件库，回到你的文件画板中，此时即可调用该组件库的内容，如组件、颜色样式、字体系统等。

想要快速查看组件库内的内容可以使用Option+2，快速调起Assert资源窗口，在左侧图层列表查看。

3.2响应式约束(constraints)

通过约束功能的官方定义我们更容易理解这个功能。首先要说明其限制条件，约束功能只有在Frame中才可以发挥作用，也只有Frame中的元素，才会展示Constraints工具。因此，官方定义其为：“允许你将设计元素固定在父框架的不同位置”，所以，请谨记约束功能以建立Frame为前提，而其主流使用场景就是构建流畅的布局以适应不同设备尺寸，即当设计师将Frame尺寸进行变更时，Frame内的元素会自动按照预先设定的规则固定位置。

但在真实场景下，响应式约束的功能并不局限于此，它更是可复用、可快速编辑组件的必要组成条件。Figma的Frame不同于Sketch的画板工具，可以互相嵌套且不会影响到复杂度产生墒增的问题，因此可以通过Constraints配合Frame组合成规范布局的组件系统，再加上我们后面要讲的Auto

layout功能，可以构建出高自由度，可任意调用，且能够根据真实填充数据自动布局的超级组件，这样构建的组件一方面还原了真实场景下的设计效果，一方面大大减少了设计师重复性工作。

下面是响应式约束的不同条件及对应的效果。

响应式约束的常规案例。

3.3自动化布局(Auto layout)

自动化布局工具是制作复杂组件的核心技巧，与响应式约束搭配可以设计出高度自由可编辑的组件乃至半成品页面。

一般来说，我们谈到组件系统主要聚焦的是其规范一致性，设计资源管理等方面，但实际上，组件库在提升设计师效率，减少重复性工作方面能够发挥更强大的作用。常规组件调用后需要花费一定精力修改，但通过自动化布局工具设定好规则后，设计师能沉淀一整套可直接使用、根据内容填充物自动布局变化的超级组件，甚至是成熟的典型页面，可极大提升设计效率，减少在移动、复制、填充内容等基础操作上的时间浪费。

下面我实现了一个最简单的案例，再该search组件中需要填充真实数据以模拟真实场景下的样式，设计师只需要输入新的填充内容，组件内其他元素会自动匹配到对应的正确位置。

自动布局按照常规布局规则划分为三个属性，分别是左右空隙、上下空隙、元素间空隙。

当选中多个元素，执行Shift+A(建议熟悉快捷键提升效率)后，会为这些元素建立自动布局，规则可以在右侧属性检查区设定。

例如我需要建立一组横排的card，此时可以先设计好三个card，然后选中它们，执行Shift+A即可创建一组横排的自动布局(横排竖排根据你真实场景下元素的排列情况，也可以在右侧更改横排为竖排)。另外一种小技巧是，直接给一个card执行Shift+A命令，然后选中组内的card执行复制命名cmd+D，后复制出的每一个card也会按照预定规则排列。

如下图案例所示，元素与元素组合构成自动布局的组件，自动布局的组件组合则能构成更复杂的大兴组件乃至典型模块、典型页面。建议设计师快速掌握该技巧的方法是将其套入实际需求中，从提升设计效率，减少重复工作的出发点开始设计自己的典型组件模块。

3.4共享样式 (style)

关于共享样式，从sketch转型到Figma的同学应该再熟悉不过了，共享样式是组件库的核心构成之一，主要包括颜色、字体及各种样式效果。这里着重说明一下Figma共享样式与Sketch共享样式的差异。Figma中对样式进行了更为细致的划分，共包括颜色、字体、效果三类。

以颜色为例，Figma中颜色样式可自由运用到图形、描边、字体等各细分元素上面，无任何限制，可与各元素自由搭配。以字体为例，字体样式仅包括字体字号、字重、行高等字体本身的属性，不包括颜色，换言之，Font样式的颜色可以自由使用Color样式。

概括来讲，Sketch更注重常规理解下，组件系统的实际应用时的场景，如字体样式是由字体字族、字号、字重、行高、颜色所有属性一同构成的，而Figma强调更高的自由和编辑性，孰优孰劣无法一言蔽之，从严谨性和组件自我封闭完整性来讲，sketch的要更好一些，但从组件自由度，组件嵌套组合的效率上来讲Figma要更好一些，所以关键在于设计师能否合理运用，快速掌握技巧并提高效率。

3.5交互原型

Figma的交互功能，在设计软件中我愿称之为最强，极简的操作逻辑以及优秀的实现效果使其在中小复杂度的交互场景下不逊色于专业UI动效设计软件。在FIgma的交互模式下能看到Principle的影子，其背后的设计逻辑高度相似，符合UI设计领域快速输出产品交互物的场景。

如下图所示，界面间的交互逻辑通过选择起始画板或其中的元素然后简单的连线即可完成。当然，如果设计师不满足于此可以在右侧属性检查器制作更精致的过度效果。Figma拥有者完善的交互手势可供设计师选择，如点击、hover、拖拽等。

然后是过渡效果，在这里我只推荐一种交互方式，那就是Smart Animate，一句话概括，Smart

Animate复刻了Principle元素演变的逻辑，所以如果你是Principle的忠实拥趸，那在FIgma交互模式下你可以无缝代入到Principle的使用经验中。

除此之外，需要特殊说明的一个交互功能是弹窗交互Open

Overly。使用该交互会调起一个覆盖层，适合弹窗类场景。方法如下图所示。Figma交互模块有很多功能，感兴趣的可以自行探索，而对于大部分设计师来讲，掌握最基础的Figma交互原型功能就已经能够让你的演示事半功倍了。

遗憾的是，每次演示只能演示一条流程。如下图所示，有编辑权限的设计师需要将播放功能固定到起始画板，演示模块会以此为当前交互线程的出发点。若你有多条交互线程，那只能手动调整起点进行演示了。

3.5输出

直接分享链接给对应的利益相关者即可。PM可以在视觉稿上直接评论，快捷沟通解决问题。开发可以切换到开发者模式查看切图标注。