UIPower视觉设计 - 《UI的革命》文字版

小编的话：时间一晃已经到了2013年的元旦，距过去的2011年10月份UIPower启动的<a href="http://www.uipower.com/peixun/">《UI的革命》</a>全国巡回演讲已经过去了1年多的时间。在这1年多的时间里，每天都能接到很多有关与演讲相关的电话和邮件。为了方便广大网友在不打开视频的情况下也可以了解演讲的内容，本站小编认真聆听并整理了演讲的内容形成了完整的演讲稿。现在将这些稿件发到本站的新闻栏目里面来，以供查阅。

UIPower的官网：www.uipower.com

大家好，现在由我来为大家一起分享“革命性的UI的视觉设计”。

我经常碰到很多客户向我们反映，向我们抱怨，他们的UI设计无法通过客户的验收；也无法令他们的产品经理和老板满意。这也是很多设计师和设计团队经常碰到的问题。那为什么会出现这些状况呢？为什么你们的设计会返工呢？为什么无法通过客户的验收呢？为什么你们的UI设计会如此的曲折呢？之所以会这样，那是因为你们没有一套合理的UI设计思想、方法和工具来指导、鞭策你们展开设计活动，因此你们的很多设计很曲折，会返工，客户不买单。那么，我们的UI如何设计才能更好的令我们的用户满意，令我们的客户满意，令我们的产品经理和老板满意呢？接下来，我们就围绕这个问题来一起展开UI视觉设计的讨论。

 众所周知，UI设计分为“交互设计”和“视觉设计”两部分。两者是一种互补、相辅相成的统一关系。如果我们将一款软件的UI比做是一棵树，那么“交互”就是这棵树的树根和树干，这一点很好理解，那么视觉在这里起什么作用呢？“视觉”就是要将这棵树点缀成一颗许愿树，吸引更多的人们，也就是我们的用户为其驻足、祈祷和膜拜。那么这时候我们的软件的UI他就已经成功了。如果没有做到这一点，他就只是很普通很普通的一个UI。所以我们的老板，我们的产品经理不会对我们设计的界面会有多大的回应，或者反响平平，更别说是我们的用户啦。那么如何将我们的UI点缀成一棵许愿树呢。这个问题还得要从UI界面的窗体说起。

解释窗体：何谓窗体，窗体就是软件产品面向用户的理想界面。一款优秀的软件界面的窗体应该要最直观的表现该软件产品的主题信息、品牌定位、视觉特色等讯息。这一切都应尽在“窗体”中得到最佳的体现。

如果我们的客户，或者产品经理感觉我们的界面味道不够，甚至否定我们的界面设计，这时候我们就该考虑界面的窗体与软件主题信息、品牌定位、视觉特色之间是否一致，窗体的设计是否合理，是否贴切。那为什么会出现这种状况呢？那是因为你没有很好的熟悉并理解UI界面的窗体设计规则。我们只有更好的，更透彻的理解窗体设计规则，才能设计出更合理，更贴切的界面窗体；才能设计出令用户满意，令我们的团队满意的界面设计。

对设计而言，那么，“窗体”有哪些设计规则值得我们设计师注意呢，下面我们接下来就来看看作为软件产品面向用户的理想界面的窗体在设计的过程中的设计规则。

1、视觉风格一致性

窗体设计的规则首先就是要视觉风格的高度一致性。一款软件有多个信息界面，有登陆界面、主界面、弹出界面、提示界面、关于、设置等等，这多个界面的窗体风格就必须要是高度统一的。因为这些代表了软件产品的整合高度。

2、九宫格原则

第二条规则就是“九宫格原则”。“九宫格原则”作为一种设计绘图的规则对于软件UI而言有着特殊作用。什么是九宫格，大家请看这幅图，我们将一张图片分为9个格子，我们只需要选取上下左右四部分无规则的图片，将其拼接，整合设计成很小的一部分，然后根据设计需要，在实现的时候，无限的自适应的设计。很明显这种有规则的自适应的设计可以提高制作皮肤的效率，减少工作量；再者还可以节约内存，减少消耗，缩短加载时间。

3、窗体默认位置

第三点，在设计过程中还需要注意窗体的默认位置。这一点很容易被设计师忽略，很多情况下是工程师的自主的设置的。默认位置的分布有两个方面的因素，一是窗体与用户屏幕的位置分布关系。不同主题的软件产品，其位置在屏幕的分布是很讲究的。二是软件本身的各界面之间的位置关系。比如主界面与弹出界面、浮动界面等之间的分布关系。其实窗口的位置对于软件本身而言，应该要以用户的视点为中心展开或者在提示操作的事件附近展开。

4、异形窗体

第四点，有时候根据设计需求我们也会设计一些特殊的窗体，我们称之为“异形窗体”。窗体本身就像是一个方方正正的“盒子”，包容着我们所需要的各种信息。但是当我们的软件产品的某些信息无法在这个“盒子”中更好的视觉呈现的时候，就需要突破“盒子”这种概念的影响，设计出更适合产品主题信息的窗体。大家请看我们设计的这款名为“喜马拉雅非线性编辑软件”的这个启动界面的窗体。这是一款民族产品，用于视频剪辑和监控，在电视台里面使用的很普及，像央视就是用这款软件来进行节目转播的。大家请看这两个界面，右边这个界面是最初设计的，觉得视觉感受还是有点不够到位，后来经过我们的设计探索后，我们的设计师捕捉到了这种创意的设计，通过这种突破性的极富张力的窗体设计，完美的体现出了该公司对这款软件产品的品牌诉求：力图将喜马拉雅非线性编辑软件打造成业界的泰斗，期望其像喜马拉雅山一样伫立在世界的屋脊之上。很难想象一款富有个性的设计与产品的主题信息能否达到高度的无缝的契合。为此，我们在本次的设计中进行了深度的思考和探索。我们期望力图通过这种令人惊喜的完美的视觉设计，使得这款软件按能够以一种情理之中，意料之外的方式为广大的用户朋友带来便利和愉悦。事实上，我们已经做到了，UIPower做到了！

 5、窗体透