1.色彩设计： 至 我不会重复与美学有关的知识（色彩构成，平面构成等），并且我相信这类行业中没有人知道这一点。 这是关于WebApp设计中颜色和成分的特殊功能的简短讨论。 至 首先是色彩。 从事广告和印刷行业设计工作的人们应该接触过一件事，即标准调色板。 什么颜色 您看到的可能不正确。 相反，您可能看不到真相。 呵呵，有点抽象。 让我们举一个实际的例子。 ＃f0f0f0是非常浅的灰色。 目前，有80％的客户已升级到液晶显示器。 大多数液晶显示器无法正确显示此内容。 差异很大，这是为什么呢？ LCD面板起源于LCD面板类型，大致分为以下类型：NT，VA，IPS。 VA和IPS面板的显示能力与CRT相当。 尽管价格相对较高，但它们的大视角（178）和完整的色彩还原确实是设计师放弃CRT的推动力（当然，大型的专业图形设计师在这一生中不能放弃Diamond Long CRT，哈哈 ，不同就是不同）。 至 NT面板由于其快速的响应速度和低成本而占据了当前的大部分市场。 22英寸的液晶屏只卖不到2000元。 您无需查看它就知道它必须使用低成本的NT面板。 由于其固有的技术局限性，NT面板的显示容量仅为1620万色（当前的16.7M色NT面板应通过冲击模拟来实现。色彩是设计者的命脉。缺乏色彩意味着 您精心设计的设计可能与客户完全不同，我看到了很多界面，这些浅灰色的使用看起来非常优雅，但您是否真的考虑了用户的实际工作环境？ 使用不发光的廉价LCD，您的设计是否会引起人们的嘲笑？ 至 总而言之，首先，设计人员必须确保其设计具有良好的灵活性-它们必须在各种复杂的环境中“可用”。并且没有严重的视觉障碍。 您需要至少在CRT和NT面板的LCD上检查您自己的设计，以查看是否存在由于颜色不足而引起的布局异常和视觉干扰。 在这里，我必须在没有彩色NT面板的情况下使用BS Microsoft的实时邮件，然后，它已经完全消失了，边框和背景色都看不到。 这绝对是失败的视觉设计。 相比之下，Yahoo！mail的设计要好几百倍（包括两者的门户）。 通过这种方式）。 至 除了使用环境中的硬件差异外，颜色设置也有所差异（甚至有时是由劣质显卡引起的）。 仅支持增强的16位颜色的PCI插槽图形卡已基本消失。 你知道，那就是奔腾。 MMX时代的经典。 目前，最低端的图形卡也至少支持24位真彩色，并且支持32位色的图形卡无处不在。 但是，仍然有些人在不知道的情况下使用16位增强的色彩设置（“不”使用计算机的软件用户实际上是少数）。 结果自然是难看的轮廓和令人讨厌的颜色匹配。 至 综上所述，由于WebUI的受众非常广泛且不确定，并且由于技术架构的特点，我们不能也不希望询问最终用户（如果需要人们来安装它，那会更好。 进行设置）。 至 因此，充分保证设计的灵活性是每个WebUI设计人员在进行视觉设计时应首先掌握的一项措施。 桌面应用程序由于其硬件环境的可控制性而可以变得先进而华丽。 但是，Web设计，尤其是基于Web的企业应用程序的用户界面设计，必须始终保持清晰的头脑。 至 看一下Javaeye的界面。 简单但美丽。 我相信没有人会特别喜欢或不喜欢他。 如果进行了投票，则80％的人会接受，而其他20％的人会说没关系。 这是UI视觉设计中追求的80/20原则。 只要80％以上的人感到满意，我们就不需要特别华丽的外观。 至 再说一遍Ext，问自己多少钱很少有人被他的外表吸引吗？ 外观偏好会给人一个强烈的先入为主的观念，这就是为什么大多数应用程序都喜欢寻求外观突破以形成概念（许多软件版本中最大的改进是外观）。 至 但是，行业软件绝对不会以其华丽的外观而取胜。 换句话说，在当前的国内市场上，工业软件还没有达到只能在外观上寻求突破的高度。 因此，作为应用程序软件领域的UI设计师，您可以提出一个概念，吸引人们的注意力，并获得一席之地。 但是行业软件中的UI设计师绝对不应该专注于视觉设计。 这不仅会迷惑您，还会迷惑您的产品。 至 2.构图和视觉风格设计： 至 我们仅讨论以下三种常见的应用程序。 至于3D界面和虚拟现实，我们将不再临时讨论。 它们是：Web应用程序，桌面应用程序和移动设备。 至 首先，让我们看一下桌面应用程序。 可以说操作系统是桌面用户界面设计的领导者。 换句话说，UI设计者在设计桌面UI时应首先考虑操作系统环境。 至 通常，在特定软件环境中的桌面应用程序的UI也有很多限制。 此限制是系统固有的交互样式设置。 至 例如，看到某个软件界面后，我们经常说“哇，Mac风格看起来不错！” “这是用.Net开发的”“ Swing制作的损坏的东西太难看了。”，为什么会出现这种情况？ 因为在大多数情况下，当我们在特定的操作系统环境下设计和开发软件时，其组件和控件将不可避免地使用操作系统本身提供的UI API，也就是说，无论您做什么，软件都需要遵守 以及相关操作系统用户界面的开发规范。 至 在MSDN上有Windows的官方参考。 同样，苹果，Java甚至诺基亚，它们都有对应的冗长的API文档和开发规范。 所以，这里我不得不提到Ext。 什么是Ext的API文档？ 哈哈，它与上述操作系统的GUI规范没有什么不同，并且其API文档就是其开发规范。 至 因此，我曾经说过“无论多少折腾，它也是Ext”，现在您应该真正理解我的意思了。 在我看来，Ext不再是Web UI，我更喜欢将其归因于Windows系列桌面UI。 桌面UI具有最基本的度量标准WIMP（窗口，图标，菜单，指针），显然，Ext是桌面UI样式。 它的交互模式与Windows相同，因此我将其定位为基于浏览器的Windows风格的桌面UI库。 至 总而言之，桌面应用程序的常见布局是：主要是框架结构，由Grid，Toolbar，Menu，Form，Icon和其他控件组成。 至 让我们再次看一下Web应用程序。 我已经不止一次提到了这种观点，即Web是免费开放的。 由于其开放性，今天出现了Ext，Ajax以及瘦客户机和富客户机的争议。 至 网页设计应该是什么样？ 这没有定论，因为Web是每个人的Web，而且存在是合理的。 在网页设计中，最重要的考虑因素是“设计上下文”。 在完全开放的平台上进行设计就像在一张白纸上画图一样。 至 最大的限制不是技术，而是设计师本人。 只有设计师才能决定如何进行自己的设计，类似地，只有他的能力才能限制自己的设计。 结合上下文，如果您开发Web邮件程序，那么如何为已经使用Outlook多年并且已经根深蒂固的使用习惯的用户设计这样的界面？ 您是否开发出一种没人能碰到的全新奇特的东西？ 不，它偏离了设计的人性，因此满足用户最简单的方法是在Web上进行设计和开发。样式和外观类似于Outlook的应用程序使用户可以在熟悉的环境中有效地进行工作，而不会承受任何压力。 至 然后，如果要开发新闻发布系统，则必须自然地遵循用户已建立的Web知识和习惯，设计应用程序（例如报纸或杂志），并提供良好的内容分类和搜索功能，以使用户容易使用。 可以在最短的时间内找到所需的资源并获得更多有价值的信息（为此生成了RSS和Portal）。 至 再举一个例子，如果您正在设计和开发信息管理系统，则高效，便捷的添加，删除和修改功能以及功能强大的报表和查询系统可能是UI设计的首要考虑因素（台式风格的UI非常适合 此类应用程序）。 或者，如果您要开发一个反映业务流程的庞大而复杂的行业应用程序，则它应反映行业解决方案的高度概念性以及软件在业务流程中的标准和指导作用。 这是设计UI时的主要考虑因素。 由于全世界开发人员和设计人员的共同努力，多亏了Ajax，所有这些都可以在Web上实现。 至 综上所述，Web界面的通用布局-如果涉及到传统，则自然而然地是纯文本流（Web最初是为研究人员之间共享和查看文档而设计的）。 但是，随着当今Web的发展，我真的不知道如何总结其布局样式。 只能说常见的是：横幅导航内容布局（在网站和大多数Web应用程序中更常见），左右框架布局（在基于内容和数据维护的Web应用程序中常见），门户布局（企业） 门户或门户），等等等待。 至 最后，谈谈移动设备的用户界面。 通常，手机上的应用软件，颜色，尺寸和图形处理性能是主要限制。 基本上，要在每个平台上开发应用程序，您必须遵循平台的开发准则和规范，并且样式通常与操作系统本身一致，因此在此不再赘述。 实际上，我们之所以单独提及移动设备，是因为某些行业软件还需要考虑PDA和移动电话用户的需求。对我们设计风格定位和技术选择的限制。 至 3.图标，CSS，结构和性能的分离： 至 根据其创作风格，图标可以大致分为两种类型：矢量图标和像素图标。 几年前，当没有Alpha通道时，图标几乎都是像素样式，既僵硬又简洁（例如Windows2000图标），但是它们非常吸引人。 至 近年来，随着Alpha频道变得越来越流行，图标变得越来越漂亮（主要归因于Apple），并且越来越逼真。 为了创建更漂亮的图标，设计人员已逐渐切换到矢量设计软件进行创作。 。 WindowsXP样式图标是矢量图标。 绘图图标几乎已成为所有UI设计人员的管家，并且它也是UI设计人员在GUI设计中能力的一种衡量标准。 这个地方的平方英寸是英雄。 至 那么，除了漂亮的图标外，它们还有什么其他功能？ 实际上，图形用户界面中图标的主要功能是帮助识别。 在成长过程中，每个人都首先通过识别轮廓来识别事物，而不是通过单词。 至 因此，图标通常使用最简洁的方式来表达事物的功能和特征：例如，突出的事物意味着它应该是可单击的，小信封意味着它是电子邮件，而放大镜则意味着它是搜索。 至 图标一直以来都尽可能接近现实，但并非Web上的所有事物都能在现实中找到它们的存在。 学习能力是人类的天生能力。 最初接触网络的人们开始不断学习和理解世界。 他们知道什么是鼠标指针，什么是光标，什么是链接以及什么是滚动条。 至 养成习惯的原因是人类不断的认知，形成了当今的各种用户界面样式。 最早的Web没有图标。 换句话说，Web上图标的概念与桌面UI完全不同。 在WebUI中，图标的作用通常是帮助解释而不是“单击”，这与桌面UI中的图标功能有很大不同。 因此，您可以仔细看一下。 在大多数传统的WebUI中，永远不会有任何单击图标（论坛表情符号除外）。 WebUI更习惯于以文本显示信息，使用带下划线的文本表示链接是可单击的。 至 综上所述，WebUI和桌面应用程序中的图标本质上是不同的。 因此，复制桌面UI的设计通常会给用户带来错误的习惯，使用户认为WebUI应该这样做。 这对Web是不公平的，并且对WebUI设计具有很大的讽刺意味。 您知道，WebUI完全不需要图标和工具栏和菜单。 至 让我们看一下CSS。 什么是CSS？ 它最初出现在印刷业中，后来被引入网络以格式化文档。 说到CSS，您必须提到结构和性能的分离。 说到这一点，有些人可能会想到网站的裸奔部分，哈哈。 我相信大家对如何区分结构和性能都有自己的见解。 至 我的理解是，Web不仅是CSS + HTML，而且还是各种服务器端技术。 实际上，与其让HTML和CSS实现结构和性能的分离，不如让开发人员在编码时更好地分离结构和性能。 我不是将结构和表示分离的想法的坚定支持者。 必要时，我将使用Table进行布局。 即使HTML代码增加，那又如何呢？ 我得到的是良好的兼容性，再也不会使用它了。 要特别注意浏览器之间CSS解析和呈现方面的细微差别。 这是值得的。 至 只要某种方式允许开发人员仅通过编写简单标签来开发页面，谁会关心HTML和CSS的结构和性能的分离？ 当然，标签封装不仅仅是一个原因，我将在后面的章节中详细讨论它。 至 每个UI设计师都从处理图片开始他的职业生涯。 慢慢地，他们发现为什么每次他们自己的设计都会使开发人员皱眉，并说这是不可能或非常困难的？ 什么技术？ 后来，UI设计师学习了HTML，哦〜事实证明HTML就是这样，他们的设计开始了变得更加实用，它们不仅可以处理和设计图片，还可以为开发人员提供必要的HTML支持。 后来，他们发现为什么自己的设计总是这么慢加载而别人的设计这么快加载？ 后来，他们逐渐学习了如何裁剪图片并了解CSS。 至 后来，他们不仅了解HTML和CSS，还考虑了性能和兼容性，并开始关注编码技术，并了解了称为抽象和封装的设计模式。 在这一点上，他们真正地将自己提升到WebUI设计人员的高度。 他们发现自己变得越来越懒惰，他们宁愿通过复杂的CSS编码来实现特殊效果，而不是花时间绘制图片（例如阴影）。 他们写了越来越少的代码，越来越多的CSS，并且慢慢地，结构和性能被分离了，HTML在整个文本中都变成了DIV和UL，而CSS文件就像一本几十kb的书。 至 因此，结构和性能的分离是思想的自然演变。 我看到今天有这么多的设计师将其用作指导原则并将其用作规范。 我忍不住觉得WebUI不是那样，而Table是无辜的。 当您引入大量JS或仅因无法使用DIV + CSS来实现特定布局而更改设计时，是否值得？ 至 综上所述，CSS无疑为WebUI设计人员提供了更多的发展空间。 对于WebUI设计人员来说，这是一把利剑，当然，它也是一把双刃剑。 对CSS的过度依赖只会使您的设计越来越简洁和枯燥。 这就是CSS的损失。 图片不是罪。 如果您不希望自己的灵感停滞不前，然后再次拾取图片，您会发现设计可以更漂亮（请参阅Vista相关网站，设计可以更漂亮）。 这里稍微提到一下Ext。 尽管它具有自己的主题支持，但它真的可以让设计师做他们想做的事吗？ 做任何您想做的事要花多少钱？ 至 本章的结论是，WebUI图形设计的自由度由交互样式和技术体系结构的双重功能决定。 限制交互样式和技术体系结构等同于限制图形设计风格，等同于限制UI设计人员的工作。 因此，让UI设计人员选择并确定交互样式和技术体系结构是UI设计中必不可少的关键步骤。 只有从用户的业务角度以及对交互样式和技术体系结构的合理定位，才能创建真正满足用户习惯和需求的界面。 设计人员真正需要控制的不是技术，而是设计本身。 因此，在这里，我想说：永远不要在技术面前迷路。 选择技术是设计，而不是技术来决定设计。