界面设计（UI设计）是人与机器之间传输和交换信息的媒介。 1.0介绍
界面设计（UI设计）是人与机器之间传输和交换信息的媒介。 FaceUI被称为硬件界面和软件界面。它是计算机科学与心理学，设计艺术，认知科学和人体工程学的交叉研究领域。近年来，随着信息技术和计算机技术的飞速发展以及网络技术的飞速发展，人机界面的设计和开发已成为国际计算机界和设计界最活跃的研究方向。通过对不同界面设计要求的分类以及界面设计元素对用户行为的影响，研究了用户在界面设计中的重要性。交互性已成为界面设计中的设计目标。为了使设计符合可用性要求，有必要全面了解用户特性和多样化要求。这需要找到正确的方法来记录和实施多样化的用户需求。界面是人与物体相互作用的媒介。换句话说，界面是设计师赋予物体的新面孔。
2.0移动界面的产生和发展
21世纪，随着互联网的发展和互联网的普及，手机，电脑，手机，和设备的公司开发商已经意识到移动端界面设计的重要性.在当今社会飞速发展中我们对移动端界面的设计已经像电影中那样出现各种各样的视觉画面。无论是应用功能的丰富还是视觉感官的提升都在渐渐的像未来电影中那样奇特。
当电影渐渐远离现实时，场景失去吸引力。但最近，我们已经看到了数据分析或大数据中机器人的趋势（即使数字并不像黑客世界那么令人兴奋）。 2024年，装修将继续占上风。对于传统的平面设计来说，添加一些细节可能会在2024年设计正确的方向：平面设计仍然占据主导地位，但有一点影子将有助于提供柔软物体的视觉体验和更丰富的维度设计。在移动趋势的呼声中，回应信号也是一种趋势。在移动体验的未来，PC终端设计变得越来越重要。无论是在智能手机，平板电脑还是横幅上，品牌本身都必须适应新的竞争环境。响应式徽标对设计师非常重要：品牌必须能够在各种维度空间中表达自己。对于设计师来说，一个令人兴奋的挑战就在眼前 - 响应式徽标设计将成为2024年的技巧。旧式风格将过时。所以在2024年，我们会看到更多的定制设计，定制插图，新图标和更多艺术作品。 品牌个性化从设计开始，需要根据绘画和插图找到品牌语言。 这种个性化设计将为品牌创造独特而清晰的品牌形象，并在用户初次登陆时建立清晰的品牌印象。 我们喜欢移动和移动的东西！ 随着GIF在整个网络中的流行，动画越来越被在线应用。 在横幅或角色上使用一些动态元素以及启动屏幕或着陆页可以确保更多关注。 2024年回归将最有可能看到动态照片的趋势。 最重要的是永远不要留在你身边。 随着平板设计的进一步增强和主流的支配，渐变现在已经是新鲜，酷炫和数字世代的代名词。
2005-2010年拟物化的设计风格最早由苹果公司的ios系统发起，拟物化借助已有的实体进行设计，真实感和操作性让用户感到亲切。。瑞士的国际现代主义在2010年开始冲击拟物化设计风格，扁平化、半扁平的设计风格由此诞生。平面设计在使用特效或不使用视觉设计的过程中，以简单的形式诞生2012-windows8系统的设计，是最具代表性的WEB端平面设计风格。2013年扁平化、轻量化开始大量的出现在各种移动端设计风格中。如ios7 android4.4ios-轻量化的设计语言、android-以魔法卡片为主的MD设计语言。纯扁平化设计是一种纯二次元的设计风格，完全抛弃了例如，渐变，投影，羽化，斜面浮雕这样的拟物设计手法，仅利用色块拼接进行表现的一种抽象化的视觉表现方式。它的优点在于，开发成本小信息传递快，设计的逻辑性更强，迎合了移动互联快速，效率的时代特点。其缺点就是情感共鸣不足，界面冰冷用户的视觉感受不是很活跃。而伪扁平化设计，即保留了扁平化的最大特点的同时，也加入了轻微的拟物手法，使的用户在视觉享受的到良好的提升。而且伪扁平化设计的优点就在于；信息传递的速度，界面设计的轻量，开发成本的减少，用户情感的共鸣之间达到了平衡。期间其设计风格也在不断提升如：2013-ios7-轻量化设计-至今（保留扁平化的最大特点的同时，加入了渐变，投影等拟物手法、2014-Android卡片式设计、2015-弥散投影、2017到现在的双向渐变。
3.1影响产品视觉设计因素研究
影响产品视觉设计的因素主要有5点：服务人群、开发成本、设计视觉语言、硬件以及行业特征，服务人群是影响移动端界面的主要因素。界面的设计必须服务于所针对的人群，根据服务人群的特点去设计界面，不同服务人群拥有不同的特点。对产品进行市场分析，分析同类型产品占据的用户人群比重，是否挖掘小众用户的需求及进行产品开发，针对于行业中的某一个细分领域完成垂直的产品挖掘）针对于固定以及需求高度相同的用户打造一款产品，小众产品-服务设计的专业化，（马斯诺 生理，安全（性价比），被尊重（个性化的信息推荐，因人而异，共享经济）个人价值的实现。
开发成本影响产品的视觉设计。设计师可通过对产品的设计稿进行技术成本预估，产品的设计对企业的经营盈利影响巨大，基于价值创新的产品开发成本设计方法是以价值最大化为目的。移动端界面视觉设计时，每个行业的标志特征都不一样，根据行业的特征选择适合该行业的颜色，文字等。设计语言与硬件也会影响产品视觉设计。
3.2产品视觉设计的内容
产品的视觉设计主要是软件界面的艺术设计，创意作品和制作工作。
根据各种相关软件的用户群，提出了新颖而具有吸引力的创意设计; 页面优化，用户操作更人性化，维护现有应用产品，并对用户进行收集和分析。 对GUI的需求。
快速设计的三个主要过程通常是手绘低保真原型，Axure，proto等交互设计工具的布局，以及具有高度最终视觉完美性的高保真原型。
1. 简单的手绘草图原型：通常可以让专业人员快速验证产品设计的逻辑是否存在问题以及操作过程是否顺畅。
2. Axure创建的低保真原型可以验证页面布局是否合理以及按钮是否处于良好位置。 还可以向熟悉互联网产品但尚未使用该产品的人员提供可用性测试。
3. 视觉恢复的高保真原型：视觉原型是产品的最终形式，可用于测试目标人群。 您还可以验证产品的功能是否满足目标用户的需求。
上述三种原型可以在开发者移动之前验证产品的逻辑，过程，信息架构，按钮布局和核心功能，并且在产品开发之前可以进行多次修改和调整。 尽可能保证产品在设计中的合理性，避免产品开发过程中的设计缺陷或产品开发完成，造成大量的时间成本和开发成本。 了解产品：在开发过程中，我们必须对产品有一定的了解，定位产品。最后和工程师对接实现页面。
3.3产品视觉设计基本要求研究
在产品视觉设计基本要素研究中对于其视觉的重要性是至关重要，且对用户的使用也起到决定性。而在其中对于文字、颜色等影响产品视觉设计除外，产品的布局规范也是十分重要的。布局中主要分为七大布局：布局分为宫格式布局、列表式布局、侧滑式布局、标签式布局、大平移动式布局、不规则式布局以及混合式布局。
（1）宫格式布局
宫格式布局中，运用最多的设计方法是卡片式设计。一行最多为3个，
主要用来展示图片、视频、功能。展示方法是瀑布流的方式，它可以简单直观的展示界面信息，比较适合初级用户，但要注意层及不可以太多。
卡片设计是一种栅格化设计，将整个页面的内容切割成多个区域。 当一个模块的媒体形式太多时，可以通过卡片的携带来进行混合呈现，这可以使视觉更有序并且便于设计迭代。 卡片设计有缺陷，卡片的设计上下左右有不同的间距，导致空间浪费更多，画面可显示内容较少，但太多会使分割视觉不适，所以当用户需要浏览和接受大量信息，不推荐使用卡片式的设计。
（2）列表式布局
最早也是总容易接受的信息方式方式之一（包括手风琴），可以信息比较麻烦，多结合其他形式使用，如标签式布局（分组）搜索 搜索提示。
（3）侧滑式布局
侧滑式布局适用于中高级用户，通过特殊提示，动效来吸引用户来注意。属于隐藏信息，对客户本身来讲要对APP有一定的了解。其特点是减少界面跳转、信息延展性强、左侧滑动优先，结合右侧滑动辅助。
（4）标签式布局（选项卡）
标签式布局多用于iOS平台多用于底部(tab栏)或顶部（分段选择器）和Android，WP选项卡通常位于顶部，其特点是减少界面跳转的层级，重复利用同一块屏幕。对于当前页面没有过多的隐藏信息，相对于未选择的选项，就会出现隐藏信息，信息量较大，信息量巨大的网站APP使用居多。
(5)大平移动式布局
大屏移动式布局从iOS10开始大量流行，信息量30个以下：按信息多少决定每屏放置多少内容，增加单屏展示数量减少点击次数、界面相对于高端产品，以推荐详情为主、解放屏幕横向区域，分页闪屏，推荐信息定制方案、减少跳转，操作较为简单，层及不可太过多、让产品代替用户做筛选，节省用户时间、信息扩展性较差、信息量受到制约展示不可太多，加入缩略信息来弥补页面数量少的缺陷。
(6)不规则式布局
不规则式布局多用于页面丰富且具有特色功能的页面设计中。常见的有游戏、 地图；可加入大量文字信息，但不可加入过多点击按钮。不规则布局总结；用于高级定制型APP 通常在工具型app 手游界面中使用较多。优势在于界面个性美观，缺陷就是延展性较差，对用户要求比较高，会产生一定的学习成本。
(7)混合式布局（同一界面中，出现了多个不同板块的信息）
混合式布局的页面功能丰富，展示信息量多，视觉享受较强。
在产品视觉设计基本要素研究中除了对于页面布局的设计除外我们在文字、颜色、明暗分布和页面疏密度，以及图片、图标等细节的规范性也是十分重要的。
移动端界面色彩应该与界面主题一致，在界面的颜色设计中，应该适当地使用颜色来协调各种元素之间的关系，使其形态和功能特征更加突出，从而达到产品的一个清晰的特征。 在掌握界面的整体基调的同时，还要注意图标，努力激活整个界面，避免整个界面的单一和暗淡的色彩，逐渐使用线条和颜色，以确保完美的移动端界面设计。 图片应选择清晰的图片、图片的颜色、布局的合理，风格的一致性都是产品视觉设计研究中所要考虑的。
图标(lcon)是种可视性很强的图像语言，通常具有能熟悉和易辦的方式表示对象，图形应具有 APP这些应用软件的出现给我们带了极大的方便，这种方简洁:抽象、易读的特质，这种特质的美表现为简洁的、动感 式比起我们以传统的方式打开网页要容易的多。一个APP的成的。富有冲击力的等，增大Icon的舞识度。在图标的设计上， 就是用户愿意坚持使用它，实用性强。APP界面设计采用简单
的色彩，小巧精致的造型，在追求最人性化的视觉冲动中，以最快捷，最便捷的方式传达给使用者，满足消息传达的感觉，逐渐产生良好的美学需求，使其功能美观和风格一致。
字体，对于不同硬件的要求所需要展示的字体也是要保持在规范一致性的考虑范围内。中英文的搭配，衬线体、无衬线体的字体应用都是重要的规范性问题。
细节的处理中我们要对投影、折纸效果、线条粗细、轻量化进行适配统一。页面处理的细节应清晰明了。 了解每个控件的含义。 对于视觉干扰，提高交互效率。 在处理细节时，我们必须不断优化页面布局并考虑颜色匹配应用场景。
3.4视觉方法
在随着时间的积累和长期的视觉设计方法中我们对于移动端界面给生活中带来的设计思路和思想理念对于现在的界面视觉设计方法主要分为三类：
（1）视觉分层系统
视觉分层系统是可以在移动界面中更顺序组织的信息的一部分。 该系统的建立基于布局中组件的排列（排版，线条，形状，图像，颜色和空间）。设计和创建视觉分层系统将允许用户以有序的方式浏览他们需要沟通的信息。 视觉分级系统是基于组件的合理布局，优先考虑后者的优先级，第二信息的信息显示。 良好的视觉分层系统和构图使您能够顺利浏览整体布局。缺乏视觉分层的系统会导致您误解和混淆您传达的信息。视觉分层系统。 对于可调组件，我有如下建议:字体(更大更粗的字体可以引起人们的注意)，但它应该尽可能的保守。分割线帮助组织信息，提供布局，弥补尴尬的空白。颜色更深更饱和的颜色容易引起注意，使用空白分组或分离信息是重要的。
（2）格式塔理论
每位设计师都应该了解格式塔理论和视觉感知原理。格式塔理论是20世纪早期德国心理学家提出的，提出了一种组织视觉体验的理论方法。今天，设计师使用格式塔原则作为更有效的设计框架来增强信息的视觉连接。格式塔理论主要基于4个方面：
接近性，是指通过对接近性对象进行视觉分组。 它可以与颜色结合使分组更清晰。与邻近性相反，空间空白还可以加强分组或隔离不相关的元素。相似的物体会被认为是相关的。相似的物体可以拥有相同的颜色，形状，尺寸大小，或是朝着相同的方向。运用相似性原理可以使相关的物体产生紧密的关联性。
连续性，人的视线会随着线，曲线或者按顺序放置的目标保持连续的观察。当连续的目标被其他主体打断，我们的眼睛会自然而然认为这些主体之间是不同的实体（不属于一组）。运用颜色可以加强连续性和连贯性。
封闭性，不完整的主体，或是有留白导致不完全封闭的物体，会被大
脑感知为是完整的物体，大脑自动填补了空白处。设计师可以利用这条封闭性原则去创造引人注目的图形。
（3）字体的检查
设计师应该确保文本的清晰性和可读性。 随着年龄的增长，用户对这些字体变得更加不耐烦，比如超难读，超细字体，字体颜色浅等。
4.1规范性
在移动端界面的视觉设计中对于其页面设计的规范性要特别注意。在界面中的风格一致性要保持在界面整齐的基础上。界面是否整齐决定了用户的第一视觉感受。其次是对于比例关系的重要把握，比例是否恰到好处，对于用户的操作和内容的了解起到引导作用。其次在设计
中也要注意其方法，对于参考线的使用可以大大降低用户界面比例失调和画面感不平衡的严重后果。其次就是对于规定图形的参数也要了解，可以提高界面风格的统一对后期对于移动界面的实现降低难度。 4.2配色
在移动端界面设计中，确定页面布局后，设置自定义颜色匹配规则，主要颜色，辅助颜色，页面颜色以及运行方向的颜色趋势。颜色的风格是由纯度决定的。在配色中的三要素：明度，纯度（饱和度），色相对于画面的色感是非常重要的，对用户的心理和视觉感官起到了决定性作用。例如暖色系，如黄色，橙色，红色都属于暖色系列一般用于购物类型网站，电子商务，儿童等网站居多，用户感觉较为活泼，温馨，积极向上。冷色系，例如绿色，蓝色，紫色等都属于是冷色系列常应用于科技，商务等严谨，稳重，清爽的效果。在界面的颜色分布在色系不超过三种。标准颜色系统用于徽标，标题，主菜单和主色块，给人一种风格统一感。浅灰，深灰色系适合做调和色与背景色，一白遮万丑，不同色块间白色区分，切勿使用纯色！脏色！主ICON，主按钮和产品中的各种插图使用了70％的主色，并且考虑了背景中
颜色的区域识别，并且使用颜色来扮演冷热平衡的角色。 它主要用于辅助ICON，辅助颜色插入页面内，并使用非重要级别的小区域。 颜色和文字对用户的眼球更具吸引力。页面的信息列表尽量避免使用颜色干扰用户的阅读体验，但在一些指示性符号中，用户可以方便地识别和使用颜色来强调。 4.3控件
在IOS设计规范中控件大致为开关、筛选框、页面加载器、进度条、滑动条、调数器、文本输入框、清除按钮、键盘。
导航栏运用在首页和二级页面中较多 ，Tob栏和搜索栏则在首页和二级页面中较为常见，底部按钮主要是在用户点击前，点击时，禁用时使用。其次是弹出框1、系统弹出框（ios原生控件，不需要第三方设计）第三方应用需要和手机的功能以及原生应用发生关联时，需要系统弹出框加以验证（相机，相册，指纹）2、第三方应用的内部通知以及消息（第三方应用的风格完成设计）。3、运营所需要的弹出框（视觉效果更加的个性以及丰富，通过颜值和暴走的文案)。4、3DTouch，功能弹出框适用于活动提示和个性化页面展示。
本文内容由北大青鸟佳音校区老师于网络整理，学计算机技术就选北大青鸟佳音校区！了解校区详情可进入www.bjaccp.com网站，学校地址位于北京市西城区北礼士路100号！
UI设计初中级认知浅谈
