系统页面布局-电脑系统界面布局设计

1.什么是UI设计，什么是UX设计？

2.UI界面设计需要遵循哪些规范

3.到底什么是UI设计规范

4.用户界面设计的基础要素有哪些?

什么是UI设计，什么是UX设计？

UI设计与UX的说明如下：

UI设计中的“UI”代表“用户界面”。用户界面是应用程序的图像布局。 它由用户点击的按钮，阅读的文本，图像，滑块，文本输入框， 以及其他所有用户可以与之交互的项目组成。 这包括页面布局，过渡，界面动画和每一个微小的交互细节。任何类型的视觉元素，交互细节或动画都必须经过精心设计。

“UX”代表“用户体验”。用户对应用程序的体验取决于他们如何与程序进行交互。 体验是否是流畅而直观，还是复杂而困惑。浏览应用程序时是否感觉符合逻辑，还是完全摸不着规律。在与应用程序交互时是否让人们感觉到他们有效地完成了他们想要实现的任务，还是说感觉过程很艰难。用户体验取决于用户在与UI设计者所创建的用户界面元素进行交互时的难易程度。

想要了解更多关于ui与ux的相关信息推荐选择Pixso协同设计。Pixso自带组件变体、自动布局等专业设计工具，支持UI/UX设计和原型播放，一体化完成高保真产品设计，直接拖拽使用自带的设计库，还可以将项目中常用的图标、自制组件一键保存，共享至团队库，省去大量重复劳动，形成统一视觉规范。

UI界面设计需要遵循哪些规范

一：遵循一致的准则，确立标准并遵循

无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。

这样得到的好处：

1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解

2：降低培训、支持成本，支持人员不会行费力逐个指导。

3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加

二：(Color)颜色使用恰当，遵循对比原则：

1：统一色调，针对软件类型以及用户工作环境选择恰当色调：

如：安全软件，根据工业标准，可以选取**，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等

2：如果没有自己的系列界面，用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表

3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等

4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试

5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。6：整个界面色彩尽量少的使用类别不同的颜色

三：(Resource)

一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示、底图等。

1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的outlookbar图标设计标准

2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及风格

3：底图应该融于底图，使用浅色,低对比，尽量少的使用颜色。

4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出默认奇妙的图案。

5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。

四：(Font)字体

使用统一字体，字体标准的选择依据操作系统类型决定。

中文用标准字体，“宋体”，英文用标准MicrosoftSansSerif不考虑特殊字体(隶书、草书等,特殊情况可以使用取代),保证每个用户使用起来显示都很正常。

字体大小根据系统标准字体来，例如MSS字体8磅，宋体的小五号字(9磅)五号字(10.5磅)。

所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况

Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。

但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。

这个情况下，应该做相应处理：

1：写程序自动调节大小，点阵值乘以一个相应比例

2：全部用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多用这种方法，但是必然结果是和系统不统一。

五：(Text)文字表达

提示信息、帮助文档文字表达遵循以下准则：

1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字

2：断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段，

3：警告、信息、错误使用对应的表示方法

4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。

5:根据用户不同用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。

六：(STYLE)控件风格，不要使用错误控件，控件功能要专一

有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章

不要错误使用控件，例如：

使用Button样式做TTable的功能，拿主菜单条显示版权信息，

统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映

一个控件只做单一功能，不复用

七：(ALIGN)控件布局，窗口不拥挤，按功能组合控件

1：屏幕不能拥挤

拥挤的屏幕让人难以理解，因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40％，而分组钟覆盖度不应该超过62％。

让人看上去，不能太拥挤，也不能太松散。

整个项目，用统一的控件间距，通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的行间距。

2：区域排列

一行控件，纵向中对齐,控件间距基本保持一致

行与行之间间距相同，靠窗体Border距离应大于行间间距(间距加边缘留空)。

当屏幕有多个编辑区域，要以视觉效果和效率来组织这些区域。

3：数据对齐要适当

说明文字，中文版应使用中文全角冒号，纵向对齐时，并按冒号右对其，如图。纵向控件宽度尽量保持相通。并左对齐。

4：有效组合

逻辑上相关联的控件应当加以组合，以表示其关联性，反之，任何不想光的项目应当风格开，在项目集合间，用间隔对其进行分组，或者使用方框划分各自区域。

例如：以下界面，选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围，和入帐方式无关，

则应该修改为：搜索方式和入帐方式调换位置。以免用户产生误解。

5：窗口缩放时，控件位置、布局：

为了使界面不出现跑版或者难看的局面，解决方法：

1：固定窗口大小，不允许改变尺寸，

2：改变尺寸的窗口，在Onsize的时候做控件位置、大小的相应改变。

BCB/DELPHI的VCL中，大部分控件有布局属性： 某些控件拥有alignment属性，可以用来做布局调节：TcustomPanel，Tmemo等，考左靠右靠上靠下以及撑满(Client)属性，用来根据版面自动调节。

大部分控件有属性Anchors，里面上下左右akLeft,akTop等如果为true，则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。

八：(TABORDER)TAB顺序

习惯用法，阅读顺序，从从左到右，从上到下

窗体中控件的Tab按键激活顺序，TabOrder,.BCB/DELPHI中使用窗体设计右键菜单选择taborder设置，VC中窗体RES编辑区域使用ctrl+D

九：(ShortcutKey&Accelerator&PopMenu)快捷键、加速键和弹出菜单

快捷键：

1：全局快捷键菜单中加以描述CTRL+XXX并入帮助列表。

2：快捷键写入帮助，特殊说明，并在使用培训时强调使用

十：(ACTION)用户交互

1：disable而不是notvisible

要使一个功能有时允许有时不允许用户使用，则这个控件的不能随便隐藏，应该使用disable属性进行表示，以免用户发现控件失踪后措手无策

2：窗口弹出位置要明显

点击一个控件，弹出窗口或者菜单，应该给人明显提示，最低要求是覆盖刚才点击的位置，让用户轻松跳转到新的界面。

3：执行动作要提示

十一：(HELP)联机帮助：

1：系统默认、行业标准的控件操作不需要逐一描述，只需要对特殊控件加以描述

2：特殊操作、特殊功能界面，在界面上加控件直接连接到对应的HELP文件中

3：特殊设置详细，应该在界面上用简洁明了的语句说明，或者是好用Tiptool，并由第二步帮助

十二：发行时阐明规则

对统一的东西进行逐一阐述，并加以典型描述，放入HELP和用户手册中，同时加有词汇表

附录：

美工何时参与进来：

美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出系统参考意见。

1：软件设计前期，美工参与需求了解，分析同类软件界面有缺点，提出主色调、典型界面风格、以及构思整个美术包装等。

2：界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。

3：程序开发过程中，提供标准风格的文件(icon,cur,bmp等)，并总结出统一风格的的设计过程，形成规范文档*.

4：产品化方面，协助制作帮助文件、网站风格以及参与制作，制作附带宣传、动画、产品包装、海报等。

到底什么是UI设计规范

UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。UI 设计分为实体 UI 和虚拟UI，互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。

UI 设计师的职能大体包括三方面:一是图形设计，软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量 UI 设计的合理性。

UI设计目前的前景还是很不错的，很多企业都缺少 UI设计师。而且可以看到的是，现在社会的发展，更多的智能机和智能机器人研发出现，这些都离不开UI 设计师。所以说 UI 设计的是很有前途的，是不会失业的。而且 UI 设计门槛不高，要入门也不难的。

从工作内容来说，UI 设计在当前的互联网领域、科技领域可以说无处不在，

好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向，一个是交互设计,另一个是视觉设计。

总的来说，UI 设计相比较于编程而言，还是非常适合大众学的并且就业前景很广阔。学完 UI 设计，能获得一份稳定而又不失乐趣的工作，同时有利于追求更高品质的生活，在艺术领域可以获得更多的启迪。

用户界面设计的基础要素有哪些?

一、用户界面设计的基础要素?布局原则

布局平衡:注意屏幕的平衡。不要堆积数据。过度拥挤和接收会导致视觉疲劳。

布局预期和经济:屏幕上的所有对象，如窗口、按钮、菜单等，应该以一致的方式处理，这样它们的动作就可以预期。

布局顺序规则:按照需要的显示顺序排列对象。通常，对话应该首先出现，然后用于分割系统。

布局标准化:在应用系统设计中，屏幕要对称，显示命令、对话、提示行要标准化。

二、用户界面设计的基础要素?单词和词组

1. 我们应该注意语言的简洁性:避免使用计算机术语;尽量使用肯定句而不是否定句;使用主动语态而不是被动语态。在短信对话中使用礼貌但不过分强调的句子;避免英文单词的缩写;尽可能使用在按钮和功能键中描述动作的动词。当单词较长时，减少字符数量或使用某种编码方法。

2. 格式:在屏幕设计中，不应该有太多的文字。如果你必须有更多的字，试着分组，页，粗体，改变字体的关键字，但试着统一字体的同一文本。除了口号，英语单词应该是小写的，容易识别。

3.信息内容:信息内容应以简洁明了的方式显示，并使用用户熟悉的简单语句。尽量不要向左或向右滚动。当内容较多时，应分成空白部分或小窗口，便于记忆和理解。重要领域可大胆闪动，以吸引眼球，增强效果。加固效果多种多样，所以要根据实际情况选择。

三、用户界面设计的基础要素?使用的颜色

1. 限制同时显示的颜色数量。一般来说，同一幅不应该超过4 - 5幅。不同的图层和形状可以用来匹配颜色，增加多样性;

2. 画面中运动物体的颜色要明亮，非运动物体的颜色要暗淡;

3.尽量不要把不相配的颜色放在一起，如黄、蓝、红、绿，除非是为了比较;

4. 如果某些信息或对象属性是用颜色表示的，用户应该理解这种表示，并尝试使用普通标准来表示它们。

以上就是需要透彻理解哪些用户界面设计的基础要素的主要内容，如果你想了解ui设计的基本知识，并且将他们运用到您的作品中，那么本文一定会给你有效的帮助。如果你想学习更多关于ui设计的知识或资讯等，可以点击本站其他文章进行学习。