如何设计软件界面

设计关键

在设计的过程中有较多注意的关键问题，以下列出几点:

(1)软件启动封面设计--Splash

应使软件启动封面最终为高清晰度的图像，如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式，并且对选用的色彩不宜超过256色，最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标，软件名称，版本号，网址，版权声明，序列号等信息，以树立软件形象，方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的，象征性强的，识别性高的，视觉传达效果好的图形，若使用摄影也应该进行数位处理，以形成该软件的个性化特征

(2)软件框架设计

软件的框架设计就复杂得多，因为涉及软件的使用功能，应该对该软件产品的程序和使用比较了解，这就需要设计师有一定的软件跟进经验，能够快速的学习软件产品，并且在和软件产品的程序开发员及程序使用对象进行共同沟通，以设计出友好的，独特的，符合程序开发原则的软件框架。软件框架设计应该简洁明快，尽量少用无谓的装饰，应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮，菜单，标签，滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配，将软件商标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用心理

(3)软件按钮设计

软件按钮设计应该具有交互性，即应该有3到6种状态效果:点击时状态;鼠标放在上面但未点击的状态;点击前鼠标未放在上面时的状态;点击后鼠标未放在上面时的状态;不能点击时状态;独立自动变化的状态。按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，功能差异大的按钮应该有所区别

(4)软件面板设计

软件面板设计应该具有缩放功能，面板应该对功能区间划分清晰，应该和对话框，弹出框等风格匹配，尽量节省空间，切换方便。

(5)菜单设计

菜单设计一般有选中状态和未选中状态，左边应为名称，右边应为快捷键，如果有下级菜单应该有下级箭头符号，不同功能区间应该用线条分割。

(6)标签设计

标签设计应该注意转角部分的变化，状态可参考按钮。

(7)图标设计

图标设计色彩不宜超过64色，大小为16x16、32x32两种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小的范围表现出软件的内涵，所以很多图标设计师在设计图标时使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出了许多精彩图标。

(8)滚动条及状态栏设计

滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计，应该有上下箭头，滚动标等，有些还有翻页标。状态栏是为了对软件当前状态的显示和提示。

(9)安装过程设计

安装过程设计主要是将软件安装的过程进行美化，包括对软件功能进行图示化。

(10)包装及商品化

最后软件产品的包装应该考虑保护好软件产品，功能的宣传融合于美观中，可以印刷部分产品介绍，产品界面设计。

看了问题，感觉兄弟应该是刚刚接触编程，还没有真正的参与商业软件或者是大型项目的开发。首先： 软件的界面，也就是UI，作为人机交互的接口，实用一定是第一位的。在商业软件开发中，更加注重的是用标准、规范的界面、最适合用户操作习惯的标准。这些标准，有很多参考，但是最直接的就是windows操作系统本身的标准。业务软件类，微软有一个money，多个版本制作都不错，可以作为参考。其次： 漂亮。这是个有很大弹性的标准，根据不同的审美人群，可能标准不太一样。完成这个任务，可以利用一些比较好的集成开发环境，比如vs2008，jbuilder等，设计起来比较轻松。也可以，根据自己所使用的开发语言，在网上找一些比较好的界面包，直接使用就行。最后： 说一下这个问题上，本人的小小见解，如果你打算进入这个行业，并将之作为自己的工作，建议区别来看这个问题：a 软件程序员，多关注编程语言的熟练、技巧，进阶一些可以关注算法、容错。这样能使自己在写的方面越来越熟练。可以尝试自己开发一些小软件，将会让自己多方面的能力都有所提高。 b 界面设计师 这个也是个方面，不过一般小公司都不设这种职位，但是如果做的很牛，也会很有潜力。 好了，一点个人看法，希望能够有所帮助。

方法步骤如下：

1、首先打开计算机在，在计算机内打开打开QtCreator，新建一个qt工程。

2、工程建立完毕，代码编辑界面出现，先不管代码。双击左侧的dialogui，将会打开图形界面编辑器界面。

3、可以看到左侧有很多控件，中间就是程序运行时显示的窗口，右侧是对象窗口和属性窗口。其实，图形界面编辑器有一个独立的软件，叫做qt designer，是专门用来编辑图形资源的。实际上，编辑完成的图形界面是一个纯文本的xml文件，其实还有很多类似的图形界面编辑器。Qt集成开发环境会将我们编辑的图形界面xml文件转换成可编译的c++代码。

4、下面我们在中间的窗口中拖入一个按钮，一个文本框。左键按住Push Button和Line Edit不放，拖到界面上即可。

5、要注意按钮和文本框的objectName，在编写代码时要用到。

6、将窗口调整下，让窗口大小合适，按钮和文本框能够对齐，并且能够随窗口的变化而变化。

7、先点击窗口空白的地方，再点击上方工具栏上的水平布局按钮。然后将窗口调整到合适大小，来看看效果。

8、点击菜单栏的工具Form Editor预览，来看看实际运行时窗口的效果。这只是外观效果，下面我们来添加一点代码。

9、在按钮上右键，点击转到槽。

10、然后再双击clicked()，将转到代码编辑页面。

11、在代码编辑页面添加如下代码：QMessageBox::information(this,"图形界面",ui->lineEdit->text());注意在顶部添加#include <QMessageBox>。

12、最后点击运行按钮即可。

我们需要先制作背景。也就是网页背景那块蓝色的部分。我们需要单独做出来。

2

新建一个1920px400px的文件

3

我们拉一个一个蓝色（#506dbb）到白色的一个渐变

4

效果图

5

然后我们保存这张为gif格式

这时候我们新建一个

1000800的文件

我们把网页效果图制作出来。这里都是用到ps制作的。没有写任何代码。这个过程我就不讲了

大家制作好网页效果图完成的时候一定要注意把网页背景图层删掉，保持透明

6

下一步我们使用切片工具。把页面进行切片。如下图所示

注意每一个链接都要切片一下。切片工具和矩形选区工具一样，拉一下就是一个切片

为了区分我这里加了背景。我们一会一定要记得去掉

7

我们再使用切片选择工具选择单个切片。然后右键

8

我们再逐个为切片添加链接

9

我们现在保存为web所用格式

10

我们把这里选择png—8

保存

保存完成后

效果图

保存完成后。会生成一个目录和一个html文件。我们用浏览器打开这个html文件可以看看效果。由于我们保存时选择的是png格式的所以看到的效果不美观，且网页靠左边。我们要做的就是让网页有一个背景就是我们刚刚制作的蓝色背景。且页面居中

为了方便，这里我们使用 Dreamweaver。这个软件破解版和安装教程问度娘要这里就不多说。

打开 Dreamweaver界面

我们新建一个站点

我们先要给网页居中。

我们用Dreamweaver打开ps生成的html文件

进入Dreamweaver的设计视图。注意看

我们用鼠标点一下最外边的这根线。（把鼠标放在四个角上单击一下就可以选中）

选中

然后把下边的属性设置为居中。注意看

这样网页就居中了。

我们再添加一个背景

我们先把鼠标在旁边空白地方单击一下，然后点击下面的页面属性

把背景设置为我们刚刚制作的背景图。重复选择no开头的那个。其他的不用管。

然后我们按ctrl+s保存好网页。然后即可使用浏览器预览效果了

ps制作网页就是这么简单

这类的解决方案是设计的app最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群：比如找地图，看天气，查数据等。

这类的解决方案是 我们尽最大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群，用来打发消磨时间的：无需求，漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西，帮助客户来打发消磨时光。

第二点：APP原型图的制作和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的APP原型图工具：移动APP原型设计神器 POP 、axure、Foreui等

第三点：APP视觉设计与设计要点

（1）大概设计板块有APP启动页面设计，APP界面设计的尺寸规范，app图标设计等

一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。

另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。

所以，设计师必须用减法设计，这个过程需要花时间思考、简化元素。

你必须记住：（1）隐藏设计或者减法设计 （2）分区或分类 （3）帮用户做决策 （4）提高交互创新设计 （5）让人有爽快感和新奇感 （6）在设计中浸入情感，把握用户的心理。（谈谈如何进行产品设计以及产品情感化设计）

一位大师这样说过“真正的简约设计是：作品必须不断的被简化，一改再改，直到设计最终成形。”

2014年 APP设计风格趋向扁平化和卡片化。卡片，扁平化都会是移动app设计的趋势！认为卡片设计确实同时兼具了“拟物”和“极简”2种优势！

第四点：APP界面设计流程

（1） 设计APP界面时，学会从优秀APP界面设计作品中寻求灵感，以前的艺术大师，用少量的资源做了大量的设计。

（2） 放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有

（3） 并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。

（4） 由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。

（5） 整个设计过程中不断问自己“真的需要吗？” 。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，

但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。

第五点：APP界面设计测试与预览修正

设计完成之后，我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具：快速在移动终端上预览APP界面设计效果图的方法最后：好的APP界面设计作品必然是要经过不断升级、重复迭代的。

一个好的交互设计对产品的成功起着很关键的作用

UI所做的就是用户最先接触到的东西，也是一般性的用户唯一接触到的东西

用户对于界面视觉效果和软件操作方式的易用性的关心，要远远大于他对底层到底用什么样的代码去实现的关心

如果说程序是一个人的肌肉和骨骼，那么UI设计就是人的外貌和品格!都是一个成功软件产品必不可少的重要组成部分!对我而言程序懂得不多所以只是从UI设计与软件产品整体的关系和如何才能使软件产品得到最佳的UI设计角度来谈

我们现有的开发流程一般都是由市场部门提出客户需求，产品设计人员提出产品设计报告，开发部门设计开发计划，由各个小组分别开发一个模块，最后整合成为一个完整的软件产品

在这些流程之间UI设计应该参与那一个部分，每一个部分应该做到什么地步才可以使产品得到最好的UI设计效果呢下面我们会在每一个部分具体分析

首先分析一下现在的问题所在，在一些软件业比较发达的国家软件产品的UI设计过程贯穿了软件开发的自始至终，而且是必不可少的

而在中国产品UI设计并没有被广泛接受，就算是已经有了UI设计师的一些企业也没有对产品的UI有着足够的重视，一般来讲他们大都会把重点放在如何使用代码实现所需要的功能，在我看来这只是一个成功软件产品的一个部分

一个优秀软件产品的开发过程应该是由四个部分组成:1

软件产品的设计(业务建模)2

系统的设计(技术建模)3

分单元的开发(把软件各个部分拆分分单元编写代码)4

测试(分为单元测试、系统集成测试和产品功能测试)，这些是由软件研发部门做的工作

除去以上软件开发过程的四个部分还有用户需求和用户验收测试，这两个过程是由市场部门和产品用户一起完成

所以说用代码实现产品功能(coding过程)只是软件开发的一个步骤

现在我们回到UI设计的角度来看，作为UI设计人员我们需要全程参与到软件开发过程中，而不只是在某一个步骤参与，现在在大多数软件企业里UI设计师只是在产品的coding过程的时候才实质性的参与到软件开发过程里，而在其它几个步骤里只是参加甚至根本没有参加(在这里我要强调“参与”和“参加”是两个词的不同概念，“参与”指的是完全加入到开发行列开始进入设计阶段，而“参加”指的只是旁听会议或者提出一些简单的意见并没有开始进入设计阶段)，这样就会大大降低软件产品的开发效率使开发成本成倍上升甚至导致整个产品的不成功!这并不是危言耸听，下面我们分析一下在一个软件产品的开发过程中UI设计应该怎么做、做到什么地步才能避免上边提到的那些问题下面我会根据软件开发的过程解释上边的问题，刚才我提过软件开发过程的几个步骤:1

产品建模2

技术建模3

分模块开发4

测试，那么我们也分为这四个部分进行讨论:一

在此我需要简单的提一下如果想要深入研究可以看一些有关于产品优化的书籍甚至是心理学的书籍，有很多人认为软件的优化就是代码的优化(用最少的代码实现产品功能)，在我看来这只是程序的优化是针对程序员而言的而不是整个软件产品的优化，产品优化包含了交互设计在现在的多数软件企业没有专门做这一部分的交互设计师所以往往这一部分被忽略，我认为这一部分应该又UI设计师承担起来，从文章的开头我就说过UI设计不只是图形界面的设计，就算是有企业里边有这样的优化人员或者交互设计师他们也要和UI设计师一起配合完成产品交互设计，作为UI设计师产品的交互性和易用性是在做设计的时候必须考虑的!言归正传，产品设计人员经常不会过多考虑简单易用原理也就是产品出来用什么样的组合形式体现给用户，这也是UI设计师考虑最多的事情，所以UI设计师一定要在产品建模期间参与设计，给产品设计师一些意见

作为一名优秀的UI设计师我们还要在了解了产品的需求之后更深入了解这个产品的使用环境和用户群体的使用习惯

我们还需要了解市场上的同类软件产品的设计方案，研究他们的优缺点，以便在我们设计的时候吸取它们的长处避免它们的错误

在产品建模之后一般的都会由产品设计人员给客户做一次功能设计讲解，往往这样的讲解只是文字性质的需要让客户想象着理解，这就会造成很大的隐患有的客户根本无法理解你的讲解甚至对这样的讲解根本不认真听，因为他们根本不懂，在讨论过程中他们经常会同意产品设计人员的一切设计想法但是产品测试的时候他们又会提出种种不满意，我想这是一般的软件公司都会遇到的也是最最头疼的事情，但这并不能怪客户我说过客户只会关心视觉效果和软件的操作而并不会去关心我们是怎么实现这一切的

这种情况带来的直接后果就是产品的反复修改开发成本成倍上升，怎么避免呢这就要靠UI设计师了，俗话说“眼见为实，耳听为虚”，所以需要UI设计师做出一个产品整体效果的demo

这个demo用的形式表现就可以，我们只需要将要体现的产品界面做一个拼凑就可以了，因为这并不是产品的最后样子，只是协助产品设计人员给客户讲解产品设计

产品建模时期UI设计师要了解客户的要求想法和产品设计人员对产品功能的要求深入了解产品，采集用户的使用需求、使用环境和使用习惯，了解市场同类产品的设计分析它们的优缺点

协助产品设计人员完成产品建模过程并制作产品展示demo模拟用户对主要功能的操作过程和界面呈现，生成交互原型(基本上产品的交互性和易用性问题都需要在产品建模的时期解决)

如果时间允许我们甚至可以提出一份“UI设计分析报告”，这份报告可以附在产品设计说明后，更有效的帮助客户了解我们的产品设计并且帮助开发人员更好的遵循UI的整体要求来完成开发工作

这个时期的关键是“交互设计”

二

技术建模时期:在这个时期作为UI设计师我们已经了解了软件产品的功能需求并且拿到了一份产品设计人员的产品设计说明，可以进入界面样式的设计过程了

有些客户会要求产品遵循一个整体的VI设计标准，那么我们就需要按照一个整体的已定的风格去设计软件的界面，要与客户公司的企业形象吻合

在这个时期软件的UI设计进入到了美术设计阶段，我们需要制定整个软件的风格，塑造软件的整体形象，并且具体的描述每一个界面中的元素和布局、文字字体等信息

在这个阶段我也不应过多的说什么，主要是每个UI设计师各自发挥你们的艺术专长用最简洁、最漂亮的界面表现软件产品

需要注意的就是在我们设计整体风格的时候一定要深入了解这个产品的理念，看看它是干什么用的

不同的产品要有不同的风格，这里边有很多的细节注意，不同的产品、同类的产品不同的内容、不同的传播介质，这些都会决定UI设计的风格

1

不同的产品:比如一个游戏产品就需要将界面做的花哨一些或者用大的充斥;如果要是一个应用软件就需要突出使用方便和强大的功能设计要简洁

2

同类不同的内容:比如一个可爱的游戏产品(像是卡通类游戏)就需要将界面做的活泼生动可爱一点;如果是一个角色扮演的战斗类游戏(像是枪战闯关类游戏)就要做的酷一点深沉一些

3

不同的传播介质:我们要做的软件产品有的需要在网络上传播那么就需要我们考虑到网络速度的问题;有的就是利用光盘当作介质那么这样的软件就可以做一些比较花哨的效果

所以说不同的产品还需要单独考虑，这也需要UI设计师多多了解产品，保持与客户交流

还需要重点注意的就是我们在做图形化设计的过程中千万要贯彻在前一个阶段做好的交互设计，始终注意产品的交互性和易用性

在设计过程中我们一定要做出每种结构每一个步骤的效果图，不能只提供图标、按钮、背景图等，这样的话程序员根本不知道往那放这些东西，在这个时期我们就要最终确定软件界面的呈现形式

技术建模一般是由高级程序员完成的，他们会将整个软件开发分为一个一个功能模块，分配给一个一个的开发小组

有时候我们还需要根据客户或者产品的特定需求做一些延伸性的设计(也叫UI产品设计的外延)，包括:软件的安装导航界面、产品的演示宣传动画、一些附带的桌面壁纸或者屏幕保护、代表软件的卡通小精灵、有时还会被要求设计软件的logo和广告banner等等

技术建模时期的关键是“风格和界面设计”

三

分模块开发时期:这个时期软件开发过程进入实现阶段，也是需要人力最多的时期，这样就会分散UI设计师的精力

软件会被切分为若干个小的模块进行代码编写，最后整合成一个完整的软件产品

对于一个程序员来讲他们大多根本不会考虑到产品应该是什么样子应该有什么整体风格，他们所考虑的只是如何用代码实现设计的要求，而且在现在的软件企业多都实现了模块的复用，这样会大大节约人力成本，那么程序员只是对原有模板进行修改使之适应新的软件产品，这样就会对UI设计的最终贯彻和实现带来很大的麻烦

做出的每一个模块虽然已经能够使用但是都是“各自为政”没有统一，因此我们也需要主动的协助和监督程序员完整的实现UI设计的要求，如果有技术无法实现的问题需要及时沟通改正设计方案

有的时候有些模块需要有单独的风格，比如一些已有的软件产品需要集合到某一个新的产品中去，这样就会加大了设计师的设计难度，我们必须要在保证产品整体风格不变的情况下将原有产品的设计风格集合进去，使之更加适合新的产品表现形式

如果我们仍旧保持原有产品的风格那么当各个模块集合起来之后往往会使新的产品感觉很松散，进入每一个功能都会觉得是另外一个软件，使人对软件的印象不深刻

在这个阶段我们还是要主动一些，跟进各个模块界面的实现

现在很多软件企业都存在很多UI设计师和程序员的协作问题，不是程序员做不到UI设计的要求，就是UI设计师坚持一些自己的想法不能改动，还有的时候经常会有人过来没头没尾的说帮我做点东西吧!当软件集成到一起再一看，就是很多不同风格的东西堆砌到一起，从头到尾都不舒服，领导或者客户看了以后极度不满狂批一阵，最后得出结果UI设计做的不到位

有人说UI设计师就要背着软件不成功的黑锅，因为人们根本看不见代码怎么写的，功能是怎么实现的，他们只知道对软件的样子和使用进行

让一个用户一个软件他们只会说这个软件好用看上去也不错挺漂亮的，但是做为一个普通用户决不会有人说这个软件程序写的不错

这么一看我们会联想到现在软件开发之中主要的冲突在UI设计师和程序员之间，其实这只是表面的表现形式

实质上这个现象体现了现在软件企业的一个通病就是这个开发组之间的协作关系混乱，程序员和UI设计师之间是平级协作关系，程序员是不会对产品负责的，这样看来UI设计师只应该听项目经理的，无论对设计做什么样的改动或者增添什么样的东西，都应该由开发项目经理和产品经理协商之后决定，只有他们可以对最终的产品负责

这样也可以避免很多程序员和UI设计师之间的争执和矛盾

但是现在大多说软件企业的产品经理和开发项目经理没有做到这一点，他们也根本不了解UI设计师和程序员的工作，也无法把握他们的工作量，这样无序的管理会造成很麻烦的后果

其实可以建立一些合理的流程管理制度，就算企业没有作为UI设计师也可以自己起草一份适合自己和企业的“UI设计需求申请单”，里边应该列出我们需要的“输入”内容、工作时间、最终的“输出”结果等等栏目(可以自己根据要求灵活决定)

这样形成一个有参与人、有依据、有存底的工作流程，出现问题或者争执的时候我们有据可依，这只是一个习惯性的东西因不同的企业而议不一定都要建立需求单

在分模块开发时期UI设计师应该做的是，在模块开发的前期做出产品每个模块的效果demo(可以用的形式表现)要求程序员按照demo的样式进行模块开发，协助和监督程序员严格按照UI设计要求生成最终产品，把握各个模块的统一，经常了解程序员的工作进展及时对不合理或者难以实现的设计进行讨论设计出新的方案

分模块开发时期的关键是“协助和监督程序员生成最终产品”

四

测试时期的输入和输出:软件产品的测试会分为三个测试阶段，第一个是分模块开发完成之后每一个模块进行的单元测试;第二个是将各个单元集成为一个整体的产品进行集成测试;第三个就是整个产品在交付使用前进行的整体测试

在测试过程中UI设计师的任务相对会轻松一些，我们只需要跟着测试人员走几遍流程，如果在其中发现没有按照UI设计要求的部分及时要求改正就好了

我们还会经常遇到客户在测试过程中突然觉得那里不合适需要修改，这也是最最头疼的事情了，有的时候他们说的并不一定对，只要我们设计的每一个步骤都有一定的道理能够说服他们就一切ok了

如果他们执意要修改设计方案，那么我们没办法只能按照客户需求修改

但是如果前边按照本文的流程走下来我想这样的可能性不大就算是修改也不会是大动干戈

在修改过程中我们还是需要先做出效果图，让客户确定再具体实施，这样也会避免很多麻烦的

测试时期的关键是“检查整个产品发现问题及时改正”

如今软件的越来越多的考虑到人的因素，“以人为本”的设计理念贯穿了整个软件产品开发的始终，因此软件产品的UI设计过程最重要的两个部分就是行为和构造，也就是交互设计和界面设计

上面我们按照软件开发的四个阶段，逐个的分析了每个时期UI设计的任务

由此我们可以看出UI设计并不完全是一个美术设计的过程，还有很重要的一个部分就是交互性和易用性的设计

我们要时刻把自己放在软件的用户角度来考虑，设计出最简单易用，界面友好的软件产品

善于使用继承，让美工团队去设计窗体的界面，程序团队只去实现窗体功能