如何成为一个ui设计师打造出色UI的7个法则〔上〕.doc

首先，明确一点，这篇文章并不适用于所有的人，而是为以下人群准备的： 那些想要在开发产品时设计出好看UI的开发者。 想要让自己的作品集更出彩的UX设计师，或是想要做出更精美的UI和UX的设计师。 如果你上过艺术学校，或者已经是一个UI设计师了，你可能会觉得这篇文章比较无趣，而且观点都是错的，甚至会让你感觉不舒服。没关系，你的批评没有错，把网页关掉继续做你的事吧。 我曾是一名不懂UI的UX设计师，我喜欢设计UX，但是没过多久我便意识到做出精美的界面是多么有必要：（创优翼推荐） 我的作品集看起来很糟糕，显得我的思考和工作过程很差劲。 找我做UX咨询的客户更喜欢有能力呈现作品的人，而不是只会画方框和箭头的人。 我能去给早期的创业团队工作吗？明显不能。 我也有一些理由来安慰自己：我不知道美学的糟粕是什么，我主修工程专业，因此做出来的东西很不美观也无可厚非。 最后，我学习了app的美学，同样我也学会冷静、努力地分析创意，而且毫不羞愧地去临摹好的作品。如果我在一个UI项目上花了10个小时，那么只有1个小时是有效的，其他的9个小时却是在失败中学习。我拼命地Google、Pinterest、Dribbble 里面找可以临摹的东西。 这篇文章就是这些失败所总结的“法则”。 因此，我想对那些新人说：我现在擅长UI设计，那是因为不断的分析，而不是突然领悟到美与平衡。 这篇文章不是理论研究，只讲实际的应用。文章里不会出现黄金分割，也不会提什么色彩理论，只有我从失败和不断的磨练中学到的东西。比如：柔道的发展源于日本武术和哲学思想。上柔道课时，除了过招，你还能学到能量、气息与和谐之类的东西。以色列格斗与此不同，它是由20世纪30年代的犹太人发明的，那时犹太人正处于纳粹人的压迫之中。其中没有艺术，在以色列格斗术的课上，你会学到怎么用笔和书本去袭击别人的眼睛。这就是荧屏上的以色列格斗术。 法则如下： 光线要由上往下 黑白优先 增加空白的空间 处理好图片上的文字 突出与淡化文本 只用优秀字体 像艺术家那样偷师 ? 1：光线要由上往下 阴影对于我们所见到的UI元素意义重大。 或许这就是我们在学习UI设计的过程中最为重要的非明显事物。光线来自天空，光线总来自于天空，因此从下面产生的光就显得很诡异。 当光线来自于天空时，它会照亮食物的顶部，在下面产生阴影。上面部分颜色浅，下面部分颜色深。光纤由上到下照到脸上很自然，如果反过来话就很瘆人： 当然，UI设计也是如此。正如我们五官下都有些许阴影，在任何一个UI元素下方你都能找到阴影。我们的屏幕是平的，但是我们可以采用艺术手段让它看起来是3D的。 拿按钮来举例。即便是相对“扁平化”的按钮，依然能看到一些光线变化的细节： 未按下去的按钮底边更暗，光线没有照到那里。 这种未按下去的按钮上半部比下半部更亮，这是因为在它模仿了一个稍微弯曲的表面。当你将面前的镜子倾斜来看镜中的太阳时，表面会反射出比太阳投射还要多的光。 未按下去的按钮有微妙的阴影，在放大的图中可能会更清楚。 按下去的按钮虽然底部比上部更暗，但是整体都是暗的，这是因为它处于屏幕的平面上，阳光不容易照到。有人会说，在现实生活中按下去的按钮更暗，那是因为我们的手挡住了光线。 仅仅一个按钮就有4种不同的光线变化，重点就在这里。现在，我们将这种手法用到别的地方。 这里有一组ios6的“勿扰模式”和“通知”设置，现在来看看会有多少种光线的变化。 在控制面板的上边缘有一小块阴影。 “开启”滑动槽也有阴影。 在“开启”滑动槽的下半部分反射了光线。 这些按钮是突出的，看到了在它们上半部分边缘的光线没？因为是与光源垂直的，接收了大量的光，折射到了你的眼睛里。 因为光线角度问题，分割线处出现了阴影。 通常会内凹的元素： 文本输入框 按下的按钮 滑动槽 单选框（未选中的） 复选框 通常会通常会外凸的元素： 按钮（未按下的） 滑动按钮 下拉控件 卡片 被选中后的单选按钮 弹出消息 了解了这些之后，你就会在很多地方发现这一法则。恭喜你入门了！ 等等，那扁平化设计呢？ ios7引发了科技界对“扁平化设计”的追求。也就是说图标是扁平化的，不再模仿外凸或内凹，而是只有线条和单一颜色的形状。 我很喜欢，干净、整洁的风格，但我不认为这是一种长久的趋势。通过光纤的微妙变化来模拟3D的效果很自然，但是无法被完全取代。 在不久的将来，我们很可能会看到半扁平的UI（这也是我推荐你们要深入学习的设计）。我把它叫做“flatty design”，依然干净、简洁，但是会有一些阴影，有轻点、滑动和点击操作的提示。 现在，Google在各个产品上推行他们的Material Design语言，这是一种统一的视觉语言，其核心部分就是模仿物理世界。 Material Design的说明展示了它如何运用不同的