系统界面设计是什么意思？详解系统界面设计的原则、设计流程及规范

一、系统界面设计是什么意思

系统界面设计一般是指B/S结构的后台管理系统界面设计，是对后台管理系统的使用界面进行视觉美化、风格规范化的设计，从而满足软件专业化、标准化的需求，以达到合理的布局、便捷的操作以及统一的视觉效果。系统界面设计包括登录界面设计、主界面设计、信息列表设计、操作页面设计、按钮设计、菜单设计、图标设计等。

二、系统界面设计的原则

1、简易性

系统界面的简洁是要让用户便于使用、便于了解产品，并能减少用户发生错误选择的可能性。值得注意的是，设计中不能让系统界面设计太过引人注目，而要弱化程序本身的功能。需要平衡视觉设计和功能，寻找最佳点，消除华丽的装饰和不必要的元素，UI界面要简单直接的页面逻辑和直观必需的元素组成。

2、高效性

熟悉用户的流程，了解用户的目标，然后在此基础上尽量简化流程，使得用户能够便捷快速的达成目标。在此过程中，仔细考虑系统界面每个功能细节，规避可能存在的漏洞，帮助用户快速完成用户流程。

3、记忆负担最小化

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

4、一致性

用户界面可视化设计中最重要的原则是一致性原则。用户期待用自己的体验探索更多的内容，探索是否有效取决于设计的一致性是否足够好。具体表现是为用户提供一个统一的界面，这意味着用户可以从一个界面操作自己，从而减少操作和学习的时间。这个过程中的体验直接移植到另一个界面，使整个ui体验更加流畅。

5、清晰

清晰性应该是所有ui界面的基本属性。请记住， UI界面是为了让用户更容易与系统交互，因为它需要能够与用户清楚地交互。保持一个清晰的ui界面设计并不困难。首先，要保证标签和标签文本的操作清晰指向，并允许信息的清晰传递，这样用户才能快速理解交互的方向性。尽量不要在ui中使用冗长、复杂、难以记住的文本标签。它越复杂，对整体用户体验的影响就越大。

6、用户的熟悉程度

用户体验设计的一个重要目标是要让用户能够凭借直觉来操作UI界面。用户要能够自然地理解其中的内容，操作自然就不难了，也就是说，要让用户对你的界面产生"熟悉感"。所以，要充分利用用户对于系统界面设计所熟悉的部分。

当用户对UI界面抱有熟悉感的时候，通常意味着他们对于这个设计有所了解，甚至知道怎么交互，他们明白操作之后大概会发生什么，也知道哪些事情不应该做。所以，如果你能利用好用户对于交互和界面模式的熟悉来进行设计的话，能让用户更快上手操作。

7、从用户习惯考虑

想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。通过比较真实与虚拟的事物，完成更好的设计。好的UI界面是隐形的，华丽的装饰和不必要的元素都已经被剔除，简单直接的页面逻辑和直观必要的元素构成了这样的UI界面，专注于核心的用户体验。

8、层次

系统界面的视觉层次是非常重要且常常被忽视的一个属性，它能够帮助用户专注重要的内容。如果你想让界面中每个内容都看起来很重要，那么只会单纯地让信息过载，让每个元素都分摊用户的注意力，最终只会让整个设计显得混乱不堪。不同尺寸的字体、不同的色彩和不同的控件最终应该是相互搭配，构成层次，有轻重缓急地呈现给用户，将复杂的结构简单化，帮助用户完成任务。

9、灵活性

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

10、安全性

用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。这样会让用户会觉得很安全，自己的权益不会遭到损失！

11、人性化

高效、用户满意度是人性化的体现。应该有一个专家和初级玩家系统，即用户可以根据自己的习惯自定义界面并保存设置。因此，一个好的系统界面设计师，在技巧方面，不仅可以画图标，而且界面会有很多的互动知识。

三、系统界面设计流程

1、产品需求分析

当一个UI设计师拿到项目或者需求之后，正常情况是交互设计师细化过后的交互文档，里面包含交互原型。而作为UI设计师所要做的就是理解并吃透文档，包括里面交互逻辑，具体的操作方式，流程，反馈等，需要不断核对和确认。

2、深层次的用户体验研究与分析

对已定义的目标用户群体及特征进行深层次的剖析，包括目标用户群体的年龄，性别及目标户群体的一些情感习惯，心理特征等，这样就可以有针对的对这个产品构想设计出一个大概的色系搭配及元素控件设计。

3、初稿设计

结合产品设计原型和自己对产品的体验研究分析结合起来设计初稿。（大概的色系搭配，框架布局，元素控件，图标ICON等设计都可以在这一步呈现出来）

4、视觉规范设计及细节优化设计

初稿设计完成后，就是要做好视觉规范设计及细节优化设计。视觉规范设计就是要对整个产品的颜色，字体，字号，元素控件，图标ICON，间距及交互效果做个统一的规范，这样才可以做出一个成熟的产品，对前端制作也是有很大的好处的。

5、前端对接

确认完设计稿后，进入ui设计师与前端工程师对接的阶段，ui设计师需要提供切图，标注，设计说明文档以及设计图给到前端工程师，一般常用的与开发对接的工具有蓝湖，figma。这个阶段需要保持跟开发频繁地沟通，确保可以很好地还原设计稿（实际工作中很难苛求百分百还原），特别是需要设计师自身要懂得一点前端代码知识，可以更好地进行沟通。

6、测试与反馈

产品进入到测试阶段，需要测试人员介入，一般这个时候是先部门内部进行可用性测试，然后扩大到整个公司，反复测试几轮之后确保没有很大的问题之后才可以发包给客户测试或者上线，而ui设计师这个时候就要收集反馈，收集意见，与产品一起讨论改进方案。

四、系统界面设计规范

1、一致性

坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。

字体：保持字体及颜色一致，避免一套主题出现多个字体不可修改的字段，统一用深灰色文字显示。

对齐：保持页面内元素对齐方式的一致，如无特殊情况应避免同一页面出现多种数据对齐方式。

表单录入：在包含必须与选填的页面中，必须在必填项旁边给出醒目标识（*）；　　-各类型数据输入需限制文本类型，并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含"@"等，在用户输入有误时给出明确提示。

鼠标手势：可点击的按钮、链接需要切换鼠标手势至手型；

保持功能及内容描述一致：避免同一功能描述使用多个词汇，如编辑和修改，新增和增加，删除和清除混用等。建议在项目开发阶段建立一个产品词典，包括产品中常用术语及描述，设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。

2、准确性

使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源。

● 显示有意义的出错信息，而不是单纯的程序错误代码。

● 避免使用文本输入框来放置不可编辑的文字内容，不要文本将输入框当成标签使用。

● 使用缩进和文本来辅助理解。

● 使用用户语言词汇，而不是单纯的专业计算机术语。

● 高效地使用显示器的显示空间，但要避免空间过于拥挤。

● 保持语言的一致性，如"确定"对应"取消","是"对应"否"。

3、布局

在进行系统界面设计时需要充分考虑布局的合理化问题，遵循用户从上而下，自左向右浏览、操作习惯，避免常用业务功能按键排列过于分散，以造成用户鼠标移动距离过长的弊端。多做"减法"运算，将不常用的功能区块隐藏，以保持界面的简洁，使用户专注于主要业务操作流程，有利于提高软件的易用性及可用性。

菜单：保持菜单简洁性及分类的准确性，避免菜单深度超过3层。菜单中功能是需要打开一个新页面来完成的，需要在菜单名字后面加上"…"。

按钮：确认操作按钮放置左边，取消或关闭按钮放置于右边。

功能：未完成功能必须隐藏处理，不要置于页面内容中，以免引起误会。

排版：所有文字内容排版避免贴边显示（页面边缘），尽量保持10-20像素的间距并在垂直方向上居中对齐；各控件元素间也保持至少10像素以上的间距，并确保控件元素不紧贴于页面边沿。

表格数据列表：字符型数据保持左对齐，数值型右对齐（方便阅读对比），并根据字段要求，统一显示小数位位数。

滚动条：页面布局设计时应避免出现横向滚动条。

页面导航（面包屑导航）：在页面显眼位置应该出现面包屑导航栏，让用户知道当前所在页面的位置，并明确导航结构，如：首页>新闻中心>欧科智能招商服务平台正式发布，其中带下划线部分为可点击链接。

信息提示窗口：信息提示窗口应位于当前页面的居中位置，并适当弱化背景层以减少信息干扰，让用户把注意力集中在当前的信息提示窗口。一般做法是在信息提示窗口的背面加一个半透明颜色填充的遮罩层。

4、系统操作

● 尽量确保用户在不使用鼠标（只使用键盘）的情况下也可以流畅地完成一些常用的业务操作，各控件间可以通过Tab键进行切换，并将可编辑的文本全选处理。

● 查询检索类页面，在查询条件输入框内按回车应该自动触发查询操作。

● 在进行一些不可逆或者删除操作时应该有信息提示用户，并让用户确认是否继续操作，必要时应该把操作造成的后果也告诉用户。

● 信息提示窗口的"确认"及"取消"按钮需要分别映射键盘按键"Enter"和"ESC"。

● 避免使用鼠标双击动作，不仅会增加用户操作难度，还可能会引过用户误会，认为功能点击无效。

● 表单录入页面，需要把输入焦点定位到第一个输入项。用户通过Tab键可以在输入框或操作按钮间切换，并注意Tab的操作应该遵循从左向右、从上而下的顺序。

5、系统响应

系统响应时间应该适中，响应时间过长，用户就会感到不安和沮丧，而响应时间过快也会影响到用户的操作节奏，并可能导致错误。因此在系统响应时间上坚持如下原则：

● 2-5秒窗口显示处理信息提示，避免用户误认为没响应而重复操作；

● 5秒以上显示处理窗口，或显示进度条；

● 一个长时间的处理完成时应给予完成警告信息。

五、系统界面设计常用工具

1、Adobe Photoshop

Adobe Photoshop是一种优质的网页设计工具。它有很多选项来创建和编辑您的Web模板。它适用于图像，您可以为您的网页设计创建图形。通过无限的颜色和渐变选项，可以制作出最佳的模板设计。它为您提供了一个空白的画布，让您的想象力生动。您可以按照自己的方式附加图像，移动元素，绘制框，裁剪边缘以及编辑模板。它适用于图层，这使您的工作非常简单。您可以显示/隐藏图层以有效管理Web设计元素。

2、Sketch

Sketch是适用于Mac设备的网页设计软件。它是专注于创建Web模板和设计的专业工具。它适用于矢量图像，因此您将获得最佳，最高分辨率的结果。工具栏和选项非常简单。Sketch提供了创建和管理Web设计项目的完全灵活性。它具有镜像功能，允许在多种设备（如手机或平板电脑）上测试您的网页设计模板，可以100％确定您的网页设计将如何在不同的屏幕尺寸上显示。

3、Figma

Figma是一个多用户网页设计软件。它允许您与设计团队联系以使用相同的Web模板。它是与客户共享项目并在模板设计上进行实时更改的智能工具。Figma将网页设计提升到一个全新的水平，它的编辑面板中包含字体，颜色和其他设置。用于创建图标或完整的Web模板时，工具和选项非常棒。

4、Adobe Illustrator

Adobe Illustrator 提供了一个完美的像素级设计环境，您可以在其中创建灵活且流畅的 Web 元素。它为您提供了创建清爽利落的 Web 布局所需的一切，包括矢量图形、响应式媒体图标、可伸缩组件、CSS 生成、SVG 导出、线框以及可重复使用的符号。

Adobe Illustrator

5、Adobe XD

adobe家打造的一款集页面设计和交互原型为一体的设计工具，支持多人在线实时协作功能。另外在兼容性上优势最大，能跟全家桶产品进行联动；但是在资源和功能这两方面相对于前面两款就比较弱势了。

6、Canva

Canva是一款免费的设计工具。它不能被认为是一个成熟的网页设计软件，但你可以使用Canva创建有趣和有吸引力的设计来支持你的网页模板。它非常适合构建可以添加到Web设计中的图像。

它配备了数百个模板，使您的工作更轻松。如果您没有任何设计技能，可以使用Canva中的模板，轻松地为您的Web模板构建具有专业外观的图像。

六、系统界面设计注意事项

1、布局要简洁

不管是用户的浏览体验还是操作体验，系统界面设计都应当尽量将整体的布局设计简单化，让用户可以一目了然。

2、色彩运用

系统界面的色彩运用倾向于少而精，少代表了整体页面的颜色使用；精代表了在配色的时候尽可能的协调。

3、注意实用性

UI设计师在设计产品时，首要考虑的就是该产品的实用性。只考虑设计本身，而脱离产品使用，那产品注定是失败的。

4、信息归类

系统界面中的信息操作页面页面比较多，在进行系统操作界面设计时，如果操作项过多，则要注意将操作项进行归类并分步骤进行，有利于用户更快更有效的完成操作。

最后总结

优化猩SEO：很多产品的应用都是通过B/S结构实现的，系统界面设计的需求量很大，尤其是手机的普及与云计算的发展，系统界面设计不仅要考虑PC端的，还要考虑移动端产品界面设计。

修改于2023-08-24