适合开发者UI设计7条法则(上).pdfVIP

适合开发者的U I设计7条法则 （上 ） 本文编译自Medium ，作者是一位UX （User Experience, 用户体验)设计师 ，他通 自己学习UI设计 的 程 ，总结出7条实用的法则 ，为UI设计新手提供了宝贵的经验。文章分为2个部分 ，这里是第1 部分。 序言 首先 ，明确一点 ，这篇文章并不是为所有人准备的 ，而是有特定的目标读者 ： 想要在开发产品时设计出好看UI的开发者。 想要让自己作品集更出彩的UX设计师 ，或者是想要做出更精美的UI和UX 的设计师。 如果你是学艺术的学生或者已经是UI设计师了 ，你可能觉得这篇文章很无聊 ，而且观点都是错的。 没关系 ，你的批评没错 ，把这个网页关了 ，去忙别的事吧。 那么从这篇文章中到底能学到什么呢 ？我曾是一名不懂UI的UX设计师。我非常热爱UX设计 ，但是 后来我发现 ，做出精美的界面是多么的必要: 我以前的作品集看起来一团糟 ，显得我的作品和思考 程很差劲。 我做UX咨询的客户更喜欢有能力呈现作品的人 ，而不是只会画一堆方块和箭头的人。 我能为一些早期的创业公司工作吗 ？还是一边儿呆着吧。 我当然也有借口 ： 我没有美术基础 ，我主修工程专业 ，所以我做出难看的东西也无可厚非。 最终 ，我还是学了app设计 ，不断地分析案例 ，厚着脸皮临摹成功的作品。假设我在1个UI项目上 花10个小时的时间 ，其中只有1个小时是有效的 ，其它9个小时都是在失败中不断地学习 ，玩命的 在Google、Pin eres 或者Dribble上找值得借鉴的东西。 下面这些“法则”都是我从失败中总结出来的。所以 ，我需要提醒新人 ：我现在擅长UI ，主要得益于 我经常分析 ，并不是突然开悟 ，理解了什么是美 ，什么是平衡。 这篇文章不讲理论 ，只谈应用。我不会讲什么黄金分割、色彩理论 ，只有实站中总结出的经验和 教训。就好像 ，柔道源于日本几个世纪以来的尚武精神和哲学理念。上柔道课时 ，不仅能学到打斗 ，还会学到很多关于能量、气息与和谐之类的东西。而以色列格斗术 （Krav Maga ）则完全不同。 这种格斗术是纳粹压迫下犹太人发明的。其中根本没有“艺术” ，在以色列格斗术的课堂上 ，你学到 就是怎样用一根笔或者本书袭击别人的眼睛。 这篇文章就是产品设计领域的以色列格斗术。 以下是我要讲的法则 ： 1. 光线来自天空 2. 黑白优先 3. 增加空白空间 4 . 学会在图片上呈现文字 （第 ２部分 ） 5. 做好强调和淡化 （第 ２部分 ） 6. 只用合适的字体 （第 ２部分 ） 7. 善于借鉴优秀的作品 （第 ２部分 ） 我们来一起看看这些法则。 法则1 ：光线来自天空 阴影能够告诉人脑我们到底在看什么样的UI元素。 这可能是学习UI设计时 ，最容易忽略却又极为重要的一点了:光线来自天空。光线总是从天空 （上方 ）来的 ，从下面照上来的光看起来会非常诡异。 当光线从天上照下来的时候 ，物品的上端会偏亮 ，而下方会出现阴影。上半部分颜色浅一些 ，而下 半部分深一些。 从下面打一束光到人脸上是不是看起来很渗人 ？UI设计也是同理。我们的屏幕是平的 ，但是我们可 以通 一些艺术手法让它看起来是3D的 ，在每个元素的下方加一些阴影。 就拿这个按钮举例 ，这是一个相对“扁平化”(f la )的按钮 ，但依然可以看出一些光线变化的细节: 1. 没有按下去的按钮底部边缘更暗 ，因为没有光线照到那里。 2. 没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面 （见侧 视图 ）。 3. 没有按下去的按钮下方有一些细微的阴影 ，在放大图中看得更清楚。 4 . 按下去的按钮整体颜色都更暗了 ，但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平 面上 ，光线不容易照到。也有人说 ，在现实中 ，按下去的按钮颜色更深 ，因为手遮挡住了光线。 这么一个简单的按钮就有4种不同的光线变化。实际上 ，我们可以把这种原则运用到各处。 iO S 6有点 时了 ，但还是学习光线不错的案例。这张图是iO S 6“勿扰模式”和“通知”的设置 ，看看上 面有多少种不同的光线变化。 控制面板的上边缘有一小块阴影。 “开启”滑动槽上部也有阴影。 “开启”滑动槽的下半部分 ，反射了一些光线。 按钮是突出的 ，上边缘较亮 ，因为是与光源垂直的 ，接收了大量光线 ，折射到你的眼睛中。 因为光线角度的问题 ，分割线处出现了阴影。 通常会内嵌的元素 ： 文字输入框 按下的按钮 滑动槽 单选框 （未选择的 ） 复选框