GUI设计准则

本文旨在介绍UI设计中需要接触的元素和设计上的客观准则，避开弯路，做更好的设计，提升自己设计作品的精致程度。

关于设计准则，可以参考一下几点：

1、符合用户认知设计

深入理解产品要提供给用户的功能是什么，任何设计都要功能优先，其次才是视觉效果

图解：作为一个按钮，有用户普遍认知的形状，如果改变了，就会有误解。

2、先功能后表现

研究设计对象的功能，考虑它的下一步，元素必须能够表达功能的意义

图解：

3、界面一致性

一个产品的完整性也要求界面风格的统一，布局统一继承，图标尺寸规范，设计过程可以通过制定设计指引来控制页面风格和规格

图解：上图界面很好的延续了风格布局的一致性，而下图则风格与布局，间距结构不统一，就显现杂乱

4、界面友好

简洁的界面会让操作简单，美观的界面会让操作舒心，要求整齐，有空间，对比分明。

图解：上两个图界面简洁干净，颜色统一，后两图颜色杂乱，布局不整洁，显得十分低档。

5、满足不同用户的需求

了解你的用户群里，做合适的设计，别给一个商务范的人设计卡通风格的界面，要把人逼疯的节奏。

提供可个性化配置也上不错的选择

图解：一个商务人士，如果使用的软件界面如下图一样粉扑扑的，着实不对劲。

6、设计元素清晰可识别

图形、元素、字体等要保证清晰可见，

图解：图二出现文字错位、图标间距错位，视觉感观上就觉得乱；图三的icon造型粗糙，风格不统一，也会显得乱。

7、图标功能一致性

图标是通过形状和颜色来告诉用户他们的作用，在同一个系统中，必须保障同样功能的图标要表达一致，允许变形，但必须可以轻松识别出关联性

图解：此图也不用多说，没有按照统一样式绘制的icon，必定出现杂乱的效果。

 

8、控件可识别

控件是组成GUI的基础元素，同样用户也对控件的功能造型有了基本认知，轻易改变控件造型可能引起不少麻烦发，若要改变，请不要影响它和原来的识别度

图解：图三直观准确表达“单选”这一控件的意思。

9、人性化设计

考虑情感，考虑阅读顺序，足够大的按钮，提示声音输入，考虑色盲，个性化风格，符合手势，可以缩放文字大小等等

10、设计可扩展

适合自适应和响应式扩展，方便改变和添加模块，考虑往前往后的兼容性，考虑多设备的使用，可以轻松更换皮肤，模块适合重用。

11、保持品牌识别度

品牌对产品来说至关重要，时刻提醒自己在设计中融入品牌元素

图解：前三个界面都在主页面菜单中凸显了品牌颜色与logo形状，最后一个图则颜色差异大，品牌图形不见踪影

下面，我们来回顾一下，有哪些界面元素在GUI设计中需要经常被涉及到，掌握它原本的概念，有助于设计时有更深层的思考。

桌面 Desktop

在启动时显示，也是界面中最底层，有时也指代包括窗口、文件浏览器在内的“桌面环境”。

墙纸，即桌面背景。可以设置为各种图片和各种附件，成为视觉美观的重要因素之一。

 

 

视窗 Window

应用程序为使用数据而在图形用户界面中设置的基本单元。

在窗口中，用户可以在窗口中操作应用程序，进行数据的管理、生成和编辑。通常在窗口四周设有菜单、图标，数据放在中央

 

标签 Tab

多文件界面的数据管理方式中使用的一种界面，将数据的标题在窗口中并排，通过选择标签标题显示必要的数据，这样使得接入数据方式变得更为便捷。

 

菜单 Menu

将系统可以执行的命令以阶层的方式显示出来的一个界面。

一般置于画面的最上方或者最下方，应用程序能使用的所有命令几乎全部都能放入。重要程度一般是从左到右，越往右重要度越低。

 

即时菜单（又称功能表）

与应用程序准备好的层次菜单不同，在菜单栏以外的地方，

菜单内容即时变化，列出所指示的对象可以进行的操作。

 

图标 Icon

显示在管理数据的应用程序中的数据，或者显示应用程序本身

数据管理程序，即在文件夹中用户数据的管理、进行特定数据管理的程序的情况下，数据通过图标显示出来。通常情况下显示的是数据的内容或者与数据相关联的应用程序的图案。另外，点击数据的图标，一般可以之间完成启动相关应用程序以后再显示数据本身这两个步骤的工作。应用程序的图标只能用于启动应用程序。

 

按钮 Button

菜单中，利用程度高的命令用图形表示出来，配置在应用程序中，成为按钮。应用程序中的按钮，通常可以代替菜单。一些使用程度高的命令，不必通过菜单一层层翻动才能调出，极大提高了工作效率。但是，各种用户使用的命令频率是不一样的，因此这种配置一般都是可以由用户自定义编辑。