数字媒体UI设计刘腾手机15814093901893901.pptxVIP

数字媒体UI设计主讲人：刘腾手机893901QQ：147668221

第五章GraphicUserDesign视觉设计

CONTENTS1设计原则234APP设计规范PS技巧标注与切图

设计原则1.Design

最好的设计方法——学会分析优秀的设计案例并使用在自己的界面中法则1：光线来自天空阴影能够告诉人脑我们到底在看什么样的UI元素。当光线从天上照下来的时候，物品的上端会偏亮，而下方会出现阴影。上半部分颜色浅一些，而下半部分深一些。1.UI设计新手必知7条法则

法则1：光线来自天空1.底部边缘更暗，因为没有光线照到那里。2.上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面（见侧视图）。3.下方有一些细微的阴影，在放大图中看得更清楚。4.整体颜色都更暗了，但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上，光线不容易照到。也有人说，在现实中，按下去的按钮颜色更深，因为手遮挡住了光线。1.UI设计新手必知7条法则

法则1：光线来自天空这张图是iOS6“勿扰模式”和“通知”的设置，看看上面有多少种不同的光线变化。1.UI设计新手必知7条法则

法则1：光线来自天空1.UI设计新手必知7条法则

法则1：光线来自天空通常会内嵌的元素：文字输入框按下的按钮滑动槽单选框（未选择的）复选框1.UI设计新手必知7条法则通常会外凸的元素：未按下的按钮滑动按钮下拉控件卡片选择后的单选按钮弹出消息

法则1：光线来自天空扁平风格1.UI设计新手必知7条法则

法则1：光线来自天空半扁平的UI（这也是我推荐你使用的设计风格）我把它称为“flattydesign”，依然非常干净简洁，但是也有一些阴影，有轻点、滑动、按下操作的提示。1.UI设计新手必知7条法则

法则1：光线来自天空Google的MaterialDesign，提供一种统一的视觉设计语言。用现实世界的元素来传递信息，关键在于:细微。1.UI设计新手必知7条法则

法则2：黑白优先在上色前用灰度模式设计可以简化大量的工作，让你更加关注空间和元素布局。UX设计师现在都喜欢“移动优先”的概念，这就意味着你要先考虑好在手机上如何显示页面，然后才考虑在超清的Retina屏幕上的显示效果。这种限制非常好，能够帮你理清思路。先解决一些棘手的问题（在小屏幕上显示）。然后再解决简单的问题（在大屏幕上的可用性）。我希望你先用黑色和白色设计，先把复杂的问题解决了。在不借助颜色帮助的情况下把app做得美观易用。最后再有目的地上色。1.UI设计新手必知7条法则

法则2：黑白优先1.UI设计新手必知7条法则

法则2：黑白优先1.UI设计新手必知7条法则

法则2：黑白优先1.UI设计新手必知7条法则

法则2：黑白优先1.UI设计新手必知7条法则

法则2：黑白优先“黑白优先”法则并不适用于所有情况，比如运动、卡通等有着鲜明特色的设计就需要好好地运用各种颜色。1.UI设计新手必知7条法则

法则2：黑白优先不过，大部分app并没有这样鲜明的特点，只要保持干净和整洁就好，绚丽的颜色被公认是很难设计的，所以，还是先用黑色和白色来吧。1.UI设计新手必知7条法则

法则2：黑白优先第二步:如何上色上色最简单的方法就是只加一种颜色。1.UI设计新手必知7条法则

法则2：黑白优先第二步:如何上色上色最简单的方法就是只加一种颜色。在灰色的基础上只加一种颜色可以简单快速的吸引眼球和注意力。1.UI设计新手必知7条法则

法则2：黑白优先实践中的颜色法则——什么是色调？网页主要用的是十六进制RGB表。但RGB不是个好的颜色设计框架，HSB模式会更好用，其中H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度。通过调整单一色相的饱和度和亮度，你可以生成各种不同的颜色——深色、浅色、背景色、强调的地方、吸引眼球的地方等，但是又不会很扎眼。1.UI设计新手必知7条法则

法则2：黑白优先使用一种或两种基础色调的多种颜色是强调和淡化某些元素，而又不把设计搞得一团糟的最可靠的方法。关于颜色的其它几点建议颜色是视觉设计中最复杂的。-不要用纯黑色：在现实世界中几乎见不到绝对的黑色。调整不同的饱和度可以增加设计的丰富程度，也更接近现实世界。-AdobeColorCC：寻找、调整、创造颜色组合的绝佳工具。-在Dribble通过颜色搜索：寻找某种颜色如何搭配的好方法，非常实用，如果你已经决定了要用那种颜色，可以通过颜色搜索看看世界顶级的设计师是如何配色的。1.UI设计新手必知7条法则

法则3：增加空白空间为了让UI看起来更加有设计感，留出一些空白的空间。在第2条法则中，我说到