UI界面设计风格大致都有哪些

UI界面设计风格有：用户研究、交互设计、界面设计。

1、用户研究

用户研究包含两个方面：一是可用性工程学，研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；二是通过可用性工程学研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法。

2、交互设计

这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。

3、界面设计

在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。

扩展资料

UI界面设计原则

1、用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。

2、可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。（参考简单导向原则）

3、设计时，要让用户把注意力放在最重要的地方。每一个元素的尺寸、颜色还有位置，它们为理解界面共同指明了道路。清晰的层级关系将对降低外观的复杂性起到重要作用（甚至当行为本身也同样复杂的时候）。

—cUI设计    

UI设计按钮是什么？其实按钮是一种交互元素，允许您通过特定命令从系统中获得期望的交互反馈。基本来说，按钮是一种控制，允许用户直接与数字产品交流，并发送必要的命令以达到特定的目的。比如发送电子邮件，购买一个产品，下载一些数据或者内容，打开一个播放器等等。按键之所以流行的一个原因是按钮可以有效地模拟和真实世界中对象的交互。

接下来我们就来详细的了解一下：UI设计用户界面按钮有哪些类型？影响按钮因素有哪些？

UI设计用户界面按钮有哪些类型？

1、CTA按钮

召唤式语言(CTA)按钮是用户界面的一个交互元素，旨在鼓励用户进行交互行为，然后提供特定页面或屏幕的转换(例如，购买，联系，订阅等等)，换句话说，就是将被动用户变成积极的状态。所以，从技术上讲，它可以是任何类型的按钮，通过号召性语言文字支持。这款按钮和网页上其他所有按钮的区别就是它引人注目的特点：CTA按钮必须引起用户的注意，并且刺激用户执行所需的动作。

2、文字按钮

如其名文字按钮表示没有任何形状、填充标签或类似内容。所以从直觉上看，它不像是按钮。但是，如果使用这些标记为颜色或者带下划线的按钮，仍然能够实现用户交互的转换。文字按钮通常用来创建次要的部分，而不会分散主标题或CTA元素的注意力。

特定的网站设计：整个交互部分采用文字按钮，其它功能只包含标题和标签的复制功能，此文本按钮方式通常用于网页简洁风格的网页

3、下拉按钮

当点击下拉按钮时，互斥项的下拉列表出现。通常通常是设置按钮。通常当用户从列表中选择一个选项时，就会根据颜色来标记。

下面的图表是这样的：当你点击按钮，选项下拉列表就会打开。当你选择完成一个项目时，下拉列表消失，只保留选择选项和加号按钮，以防你再一次选择下拉列表。

4、“汉堡”按钮

这是隐藏的菜单式按钮。当点击或光标选择按钮时，菜单展开。这个菜单(或按钮)的名字是由三条水平线组成的，看起来就像典型的面包-肉-面包，正如“汉堡”按钮。如今，它已经成为一个应用广泛的Web和移动布局的交互元素；对其优缺点的争论也非常激烈。

对活跃的因特网用户来说，知道这个按钮默认隐藏了不同类别的网站内容，所以这种技巧无需额外的说明和提示。当然，汉堡按钮菜单释放出空间，使界面更加简洁和舒适；从功能上来说，它可以为其它重要布局元素节省大量空间。响应和适应性设计隐藏了导航元素，使得不同的设备上的界面看起来更加协调。

讨厌“汉堡”按钮的人认为，这一设计元素可能会使不经常使用网站的人迷惑，并被高度抽象的标志所误导。这样做会对导航有负面影响，并且会导致用户体验差。所以，应该根据用户对目标用户的能力和需求进行调查，然后决定是否使用“汉堡”按钮。

这里有一个使用“汉堡”按钮的例子。为了把用户的注意力集中在视觉效果和核心信息上，它可以隐藏扩展的选项菜单。

5、可伸缩的按钮

单击或点击该按钮后，该按钮将打开多种选项。另外一种不会让屏幕超载的方式来设置合适的交互流程，这对有限屏幕空间的移动界面特别重要。

某个APP：标签栏的中心交互元素是一个加号按钮，用户在操作期间可以添加新的行程或项目。要简化操作，按钮扩展成一组按钮，标记明确类型的内容，这样用户就可以从一开始做出选择，到达需要的屏幕。

6、共享按钮

共享按钮可以直接向社交网络帐户共享内容或共享。为让这种联系变得更清晰，网站上会出现带有特定社会网络logo的图标。若用户并非专门为共享登录站点而设计，通常无需精心设计共享按钮(没有额外的图形、颜色标记、下划线等)，只看到图标也是可以的，这种方法适合于简洁风格，有效利用负空间。不要让用户太关注分享按钮，而是抢到页面主要内容的风头。

风格各异的一家网站。从首页的左下方，你可以看到logo图标的社交平台。容易引起注意，但是不影响站点的内容平衡，也不会分散核心导航和CTA按钮的注意力。

7、镂空按钮

中空按钮是一个看上去很透明的按钮。以细线形状环绕按钮来呈现视觉效果。如果有多个CTA元素导致用户难以识别主要信息的CTA元素，这样的按钮可以帮助分类视觉层次结构：核心CTA将显示为填充按钮，而中间的CTA则是镂空按钮。

某个APP首页：有三种不同类型的按钮：核心CTA上的填充按钮，提供快速注册方式；中空按钮提供第二个选项；文本按钮放到下一行，用颜色标注。此方法帮助构建屏幕上按钮的可靠视觉层次结构

8浮动操作按钮(FAB)

浮动式操作按钮(简称FAB)是在APP屏幕上显示主要操作的按钮。一般情况下，它是一个圆形图标的按钮，内容高于其他页面。这个按钮通常会立即访问用户通过APP执行的基本动作或常用动作。基于手机APP设计和信息架构，FAB可以：

1执行典型的核心操作(打开新电子邮件的屏幕，打开添加照片或视频内容的屏幕，搜索所需内容等等)

2显示附加操作

3转换成其他UI元素。

FAB在屏幕上的位置通常取决于高可见度因素，它可以根据屏幕的总体设计理念而改变。最好的办法是每个屏幕只使用一个FAB，以避免注意力分散。

影响按钮因素有哪些？

1、尺寸：按键尺寸是告诉用户布局元素的重要性和构成部分层次结构的核心方法之一。一个吸引人、高效的CTA按钮应该足够大，以便快速找到，但不要太大，以免破坏布局结构。例如，苹果表示，移动UI中的CTA应该至少是44-44像素，而苹果则建议34-26像素。

2、颜色：选择合适的颜色对于使次要按钮同样容易引起注意至关重要。人的情绪和行为与视觉环境密切相关，颜色是这方面最有力的工具之一。选择CTA颜色时要记住：按钮和背景颜色必须对比得当，这样按钮才能从其他UI内容中一目了然。

3、形状：在CTA按钮方面，一般采用水平矩形。这是因为人们习惯于把这种形状当作一个按钮。另外，建议设计带圆角的CTA，因为圆角可以指向按钮内部，从而引起按钮本身的注意。这种形状当然是在与网页或APP屏幕风格一致时使用的。

4、布局：按钮的布局对于构建良好的视觉层次和清晰的导航非常重要。如果它们位于用户一眼就找不到的位置，即使使用颜色和尺寸也没用。设计师必须掌握核心功能的按钮，放置最有效的位置。

现代化的UI按钮非常多样，可以满足多种用途。通常是呈现交互部分的典型的、常用的按钮，通常以可见性和特定的几何图形显示，同时有副本支持通过按钮所执行的操作的说明。按钮设计者需要精心设计有效且引人入胜的按钮，这些按钮要自然地与整个设计风格相融合，在对比度和布局上要明显突出。最后，学习UI设计，就上~

 一、字体

                  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

在人和机器的互动过程（Human Machine Interaction）中，有一个层面，即我们所说的界面（interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。

用户界面设计在工作流程上分为结构设计、交互设计、视觉设计三个部分。

结构设计 Structure Design

结构设计也成概念设计 （Conceptual Design），是界面设计的骨架。通过对用户研究和任务分析，制定出产品的整体架构。基于纸质的的低保真原型（Paper Prototype）可提供用户测试并进行完善。在结构设计中，目录体系的逻辑分类和语词定义是用户易于理解和操作的重要前提。如西门子手机的设置闹钟的词条是“重要记事”，让用户很难找到。

交互设计 Interactive Design

交互设计的目的是使产品让用户能简单使用。 任何产品功能的实现都是通过人和机器的交互来完成的。因此，人的因素应作为设计的核心被体现出来。交互设计的原则如下：

1) 有清楚的错误提示。误操作后，系统提供有针对性的提示。

2) 让用户控制界面。“下一步”、“完成”，面对不同层次提供多种选择，给不同层次的用户提供多种可能性。

3) 允许兼用鼠标和键盘。同一种功能，同时可以用鼠标和键盘。提供多种可能性。

4) 允许工作中断。例如用手机写新短信的时候，收到短信或电话，完成后回来仍能够找到刚才正写的新短信。

5) 使用用户的语言，而非技术的语言。

6) 提供快速反馈。给用户心理上的暗示，避免用户焦急。

7) 方便退出。如手机的退出，是按一个键完全退出，还是一层一层的退出。提供两种可能性。

8）导航功能。随时转移功能，很容易从一个功能跳到另外一个功能。

9）让用户知道自己当前的位置，使其做出下一步行动的决定。

视觉设计 Visual Design

在结构设计的基础上，参照目标群体的心理模型和任务达成进行视觉设计。包括色彩、字体、页面等。视觉设计要达到用户愉悦使用的目的。视觉设计的原则如下：

1）界面清晰明了。允许用户定制界面。

2） 减少短期记忆的负担。让计算机帮助记忆，例：User Name,、Password、IE进入界面地址可以让机器记住。

3） 依赖认知而非记忆。如打印图标的记忆、下拉菜单列表中的选择

4） 提供视觉线索。图形符号的视觉的刺激；GUI（图形界面设计）：Where, What, Next Step

5） 提供默认（default）、撤销（undo）、恢复（redo）的功能

6） 提供界面的快捷方式

7） 尽量使用真实世界的比喻。如：电话、打印机的图标设计，尊重用户以往的使用经验。

8） 完善视觉的清晰度。条理清晰；、文字的布局和隐喻不要让用户去猜。

9）界面的协调一致。如手机界面按钮排放，左键肯定；右键否定；或按内容摆放。

10） 同样功能用同样的图形。

11）色彩与内容。整体软件不超过5个色系，尽量少用红色、绿色。近似的颜色表示近似的意思。

西门子6688：“确定”按键设计的不一致性

用户界面设计构筑了产品设计的基础。如只有首先确定了手机菜单的交互形式，才能在造型设计上决定是采用五项键或上下键。

在国外，用户界面设计人员有了一个新的称谓：Information Architecture,信息建筑师。它不仅仅是指美工，而是具有心理学、软件工程学、设计学等综合知识的人。