pc端ui设计规范.docx

1、pc端ui设计规范pc端ui设计规范篇一：微软软件界面设计规范 假如你在Windows环境下开发，微软定义了一套称为“用户体验”的参考规范（当然，“用户体验”的内容已经超出了狭义的“用户界面”）。这个规范对菜单、按钮、图标、窗体、快捷键、消息框和文本等界面元素的设计，给出了一整套建议。倘若不是编写游戏之类的东西，就没有理由不参照这个规范。 以下是我见过的一些糟糕的用户界面风格 ： 过份使用各种奇形怪状、五颜六色的控件。这些界面往往出自充满激情和想法的新手。它很容易使人想起过去农村穿着红褂子、绿裤子的小 媳妇，或者今天城市街头画着大花脸的扭秧歌的大妈。 界面元素比例失调。我见过按钮巨大无比，其尺

2、寸甚至超过显示重要内容的文本框的界面。 界面元素凌乱。比如说，按钮和文本框摆放地点随意，相当于客厅当卧室，卫生间当厨房。 违背使用习惯。你按下F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。 消息框信息含糊、混乱。下面是某软件弹出的消息框。把“确定”和“取消”改为“是”和“否”会不会更清晰一些？就事论事，假如干脆自己做个form，改成“想”和“不想”，那更好。 还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。 这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。

3、 对于这种软件来说，默认界面只应该显示目标用户最常使用的功能，至于不常用到的高级功能，可以“隐藏”起来，比如说，放到菜单里，不要都做成按钮摆到界面上。果真需要需要这些高级功能的话，用户自然会到菜单里去找的。 在这方面，微软Office软件堪称楷模。比如Word，从编写“代办文凭”这样的电线杆上的“狗皮膏”，到排版严肃的长篇巨著，都游刃有余。对于低级用户来说，它简单易用，对于高级用户来说，要的功能都有。这个软件界面做得就非常有水平。就象那些高级数码相机一样，操作之简单可以和“傻瓜”相机媲美。按一个按钮就可以使你心想事成，恰恰说明它聪明得可以。 一句话，你愿意使用界面上摆满了各种让人眼花缭乱的玩意

4、儿，左看右看也不知道从哪儿下手的 软件吗？ 软件界面设计相关的各项介绍 界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计，软 件框架设计，按钮设计，面板设计，菜单设计，标签设计，图标设计，滚动条及状态栏设计，安装过程设计，包装及商品化。 在设计的过程中有较多注意的关键问题，以下列出几点： (1)软件启动封面设计 应使软件启动封面最终为高清晰度的图像，如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式，并且对选用的色彩不 宜超过256 色，最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。如果

5、是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标，软件名称，版本号，网址，版权声明，序列号等信息，以树立软件形象，方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的，象征性强的，识别性高的，视觉传达效果好的图形，若使用摄影也应该进行数位处理，以形成该软件的个性化特征。 (2)软件框架设计 软件的框架设计就复杂得多，因为涉及软件的使用功能，应该对该软件产品的程序和使用比较了解，这就需要设计师有一定的软件跟进经验，能够快速的学习软件产品，并且在和软件产品的程序开发员及程序使用对象进行共同沟通，以设计出友好的，独特的，符合程序开发原则的软件

6、框架。软件框架设计应该简洁明快，尽量少用无谓的装饰，应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮，菜单，标签，滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配，将软件商标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用心理。 (3)软件按钮设计 软件按钮设计应该具有交互性，即应该有3到6种状态效果：点击时状态；鼠标放在上面但未点击的状态；点击前鼠标未放在上面时的状态；点击后鼠标未放在上面时的状态；不能点击时状态；独立自动变化的状态。按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风

7、格统一，功能差异大的按钮应该有所区别。 (4)软件面板设计 软件面板设计应该具有缩放功能，面板应该对功能区间划分清晰，应该和对话框，弹出框等风格匹配，尽量节省空间，切换方便。 (5)菜单设计 菜单设计一般有选中状态和未选中状态，左边应为名称，右边应为快捷键，如果有下级菜单应该有下级箭头符号，不同功能区间应该用线条分割。 (6)标签设计 标签设计应该注意转角部分的变化，状态可参考按钮。 (7)图标设计 图标设计色彩不宜超过64色，大小为16x16、32x32两种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小的范围表现出软件的内涵，所以很多图标设计师在设计图标时使用简单的颜色，利用

8、眼睛对色彩和网点的空间混合效果，做出了许多精彩图标。 (8)滚动条及状态栏设计 滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计，应该有上下箭头，滚动标等，有些还有翻页标。状态栏是为了对软件当前状态的显示和提示。 (9)安装过程设计 安装过程设计主要是将软件安装的过程进行美化，包括对软件功能进行图示化。 (10)包装及商品化 最后软件产品的包装应该考虑保护好软件产品，功能的宣传融合于美观中，可以印刷部分产品介绍，产品界面设计。 图标设计规范 数位设计引入了一种新的图标设计样式。以下是设计和创建样式图标的具体规范。 图标样式应该有趣、色彩丰富且充满活力，因为现在的系统支持图标是32位

9、图标，并且边缘非常平滑。在矢量程序中绘制完每个图标后，再用Adobe Photoshop进行处理可使图像更加完美。本规范是专为设计者编写的。在创建图像时，建议您与高水平的图形设计者一起工作，尤其是具有丰富的矢量和 3D软件经验的图形设计者。 图标设计概述的目的是让您熟悉WindowsXP的新样式，为创建图标做好准备。 图标样式特性 (1) 色彩丰富，是对WindowsXP外观的补充。 (2) 不同的角度和透视特性为图像增添了动态活力。 (3) 元素的边角十分柔和，并略微有些圆滑。 (4) 光源位于图标的左上角，同时有环绕光照亮图标的其它部分。 (5) 渐变效果使图标具有立体感，进而使图标的外观

10、更加丰满。 (6) 投影使图标更具对比度和立体感。 (7) 添加轮廓可使图像更清晰。 (8) 日常对象(如计算机和设备)具有更现代化的个人外观。 图标尺寸 Windows XP图标有四种尺寸，建议使用以下四种尺寸： (1) 48?8像素 (2) 32?2像素 (3) 24?4像素 (4) 16?6像素 图标色彩深度支持 WindowsXP支持32位图标。32位图标为24位图像加上8位alpha通道。使图标边缘非常平滑，且与背景相融合。 每个WindowsXP图标应包含以下三种色彩深度，以支持不同的显示器显示设置： 24位图像加上8位alpha通道(32位) 8位图像(256色)，加上1位透明色

11、 4位图像(16色)，加上1位透明色 调色板 图标中使用的主要颜色。 对象的角度和分组 WindowsXP样式图标使用的透视网格：并非所有对象使用16?6的复杂图像都能获得较好效果。某些对象通常以直观图像显示：文档图标、符号图标(如警告或信息图标)、单一对象图标(如放大镜) 除非创建重叠辅助对象可以更清楚地表达图标的含义，否则就可读性和完整性而言，还是应使用直观图像。还应考虑如何按组查看图标，以便确定如何将对象分组。 投影 使用投影后，WindowsXP图标将更清晰且更具立体感。可在Photoshop中实现这种效果，本指南的后面部分将对此进行描述。若要为图像添加投影，请在 Photoshop中

12、双击图像的图层，并选择Drop Shadow。然后将Angle更改为135，Distance更改为 2，Size更改为2。此时投影为75%不透明黑色。 轮廓 绘制XP样式图标时，为图像添加轮廓可使之更清晰，并可保证图像在不同背景色上都具有较好效果。 概念 设计图标时，请考虑以下因素： 使用已有概念以确保真实表达了用户的想法。考虑图标在用户界面环境中以何种形式出现，以及如何作为图标集的一部分使用。考虑图形的 文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时，请尽可能使其大众化。如果图标中的图像由多个对象组成，应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于

13、16?6的尺寸大小，还可考虑删除某些对象或简化图像使之更容易辨认。 透明工具 将Gif Movie Gear(GMG)打开一个对话框，其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在 GMG中选作 透明背景色的颜色)。重复所有4位和8位帧。若要保存图标，请选择 File-Save Icon As.。 创建工具栏 Windows工具栏图标除不使用投影之外，使用的样式与其它图标相同。由于工具栏图标非常小，建议您使用简单的图像。如果以直观方式显示 图像即可清晰地表达图标的含义，则不必使用其它复杂方式。 创建AVI WindowsXP使用8位AVI。创建.avi文件的过程与

14、创建图标的过程相同-在Photoshop中准备图像，然后将其拖动到GMG 中。请按以下指导创建8位图标。若要使用GMG保存AVI，请转至File-Export As-AVI file。创建.avi文件时，请考虑以下因素：使用品红(R255 G0 B255)作为背景透明色。在Photoshop中，重要的一点是不要出现杂散像素。请将填充能力设置为0，并确认未选中取消锯齿。 软件人机界面 UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得 有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定

15、位和特点。 美丽的事物常常会让人无法抗拒。这就是为什么产品出色的外观设计对于电脑、汽车、日用品、家具、食品、服装等等几乎所有商品的销售与推广，都有着举足轻重的作用的原因。 同样的道理，对于软件公司来说，软件产品就是他们的商品，而软件界面就是他们产品的外观，界面的美观与否，直接关系到了软件产品的营销成败。 我们可以清楚地看到，微软公司对软件界面设计的重视。请回想一下您在第一次见到winXX时的情景，与相比是否惊叹他界面的美观性与易用性？而您如果使用过xp系统，则会被其令人神奇的感官概念而震惊折服！金山公司的金山词霸就是国内软件成功的例子了，从金山词霸到金山词霸XX 的变化堪称经典。著名的网页动画制作软件flash从到，仅仅修改了图标和窗体，立即大为增色? 现今世界上成功的软件公司都非常重视软件界面的美化设计工作，因为他们深刻地知道，在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。我们可以相象一下，您在挑选手机的时候，如果有两款手机，性能相同，而第一款比第二款要美观很 篇二：Android的界面设计规范