后使用快捷导航没有帐号？
　论坛入口：
　　|　　　|　　　　|　　　|　
不得不存！UI设计新手不可错过的7条实用法则
1.png (494.81 KB, 下载次数: 13)
11:57 上传
　　本文编译自 Medium，作者是一位UX（User Experience, 用户体验）设计师，他通过自己学习UI设计的过程，总结出7条实用的法则，为UI设计新手提供了宝贵的经验。
　　序言首先，明确一点，这篇文章并不是为所有人准备的，而是有特定的目标读者：
想要在开发产品时设计出好看UI的开发者。想要让自己作品集更出彩的UX设计师，或者是想要做出更精美的UI和UX的设计师。
　　如果你是学艺术的学生或者已经是 UI 设计师了，你可能觉得这篇文章很无聊，而且观点都是错的。没关系，你的批评没错，把这个网页关了，去忙别的事吧。
　　那么从这篇文章中到底能学到什么呢？我曾是一名不懂 UI 的 UX 设计师。我非常热爱 UX 设计，但是后来我发现，做出精美的界面是多么的必要:
我以前的作品集看起来一团糟，显得我的作品和思考过程很差劲。我做UX咨询的客户更喜欢有能力呈现作品的人，而不是只会画一堆方块和箭头的人。我能为一些早期的创业公司工作吗？还是一边儿呆着吧。
　　我当然也有借口：
　　我没有美术基础，我主修工程专业，所以我做出难看的东西也无可厚非。
　　最终，我还是学了 app 设计，不断地分析案例，厚着脸皮临摹成功的作品。假设我在 1 个 UI 项目上花 10 个小时的时间，其中只有 1 个小时是有效的，其它 9 个小时都是在失败中不断地学习，玩命的在 Google、Pinterest 或者 Dribble 上找值得借鉴的东西。
　　下面这些“法则”都是我从失败中总结出来的。所以，我需要提醒新人：我现在擅长UI，主要得益于我经常分析，并不是突然开悟，理解了什么是美，什么是平衡。
　　这篇文章不讲理论，只谈应用。我不会讲什么黄金分割、色彩理论，只有实站中总结出的经验和教训。就好像，柔道源于日本几个世纪以来的尚武精神和哲学理念。上柔道课时，不仅能学到打斗，还会学到很多关于能量、气息与和谐之类的东西。而以色列格斗术（Krav Maga）则完全不同。
　　这种格斗术是纳粹压迫下犹太人发明的。其中根本没有“艺术”，在以色列格斗术的课堂上，你学到就是怎样用一根笔或者本书袭击别人的眼睛。
　　这篇文章就是产品设计领域的以色列格斗术。
　　以下是我要讲的法则：
光线来自天空黑白优先增加空白空间学会在图片上呈现文字做好强调和淡化只用合适的字体像艺术家一样偷师
　　我们来一起看看这些法则。
　　法则一：光线来自天空
　　阴影能够告诉人脑我们到底在看什么样的UI元素。
　　这可能是学习 UI 设计时，最容易忽略却又极为重要的一点了: 光线来自天空。光线总是从天空（上方）来的，从下面照上来的光看起来会非常诡异。
　　当光线从天上照下来的时候，物品的上端会偏亮，而下方会出现阴影。上半部分颜色浅一些，而下半部分深一些。
2.jpg (64.74 KB, 下载次数: 9)
11:57 上传
　　从下面打一束光到人脸上是不是看起来很渗人？UI 设计也是同理。我们的屏幕是平的，但是我们可以通过一些艺术手法让它看起来是 3D 的，在每个元素的下方加一些阴影。
3.png (20.89 KB, 下载次数: 14)
11:57 上传
　　就拿这个按钮举例，这是一个相对“扁平化”(flat) 的按钮，但依然可以看出一些光线变化的细节:
没有按下去的按钮底部边缘更暗，因为没有光线照到那里。没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面（见侧视图）。没有按下去的按钮下方有一些细微的阴影，在放大图中看得更清楚。按下去的按钮整体颜色都更暗了，但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上，光线不容易照到。也有人说，在现实中，按下去的按钮颜色更深，因为手遮挡住了光线。
　　这么一个简单的按钮就有 4 种不同的光线变化。实际上，我们可以把这种原则运用到各处。
4.png (128.46 KB, 下载次数: 11)
11:57 上传
　　IOS 6 有点过时了，但还是学习光线不错的案例。这张图是 iOS 6“勿扰模式”和“通知”的设置，看看上面有多少种不同的光线变化。
控制面板的上边缘有一小块阴影。“开启”滑动槽上部也有阴影。“开启”滑动槽的下半部分，反射了一些光线。按钮是突出的，上边缘较亮，因为是与光源垂直的，接收了大量光线，折射到你的眼睛中。因为光线角度的问题，分割线处出现了阴影。
5.png (98.34 KB, 下载次数: 9)
11:57 上传
　　通常会内嵌的元素：
文字输入框按下的按钮滑动槽单选框（未选择的）复选框
　　通常会外凸的元素：
未按下的按钮滑动按钮下拉控件卡片选择后的单选按钮弹出消息
　　等等，现在不是追求扁平化的设计吗？
　　iOS 7 引发了科技界对于“扁平化设计”(flat design) 的追求。也就是说图标是平的，不再模仿实物而外凸或内凹，只有线条和单一颜色的形状。
6.png (168.37 KB, 下载次数: 10)
11:57 上传
　　我很喜欢这种干净、简洁的风格，但是我认为这种趋势不会长久。通过细微的变化模拟出 3D 的效果非常自然，不会被完全取代的。
　　在不久的将来，我们很可能会看到半扁平的 UI（这也是我推荐你使用的设计风格）我把它称为“flatty design”，依然非常干净简洁，但是也有一些阴影，有轻点、滑动、按下操作的提示。
7.png (159.47 KB, 下载次数: 9)
11:57 上传
　　现在，Google 也在各个产品上推行他们的 Material Design，提供一种统一的视觉设计语言。Material Design 的设计指导为我们展示了它如何运用阴影表现不同的层次。
8.png (48.78 KB, 下载次数: 9)
11:57 上传
　　这也是我所认同的类型。用现实世界的元素来传递信息，关键在于:细微。你不能说它没有模仿现实世界，但也绝不是 2006 年的网页风格，没有纹理，没有梯度，更没有光泽。
　　我认为“flatty”是未来的方向。扁平化？早晚会过时的。
9.png (166.09 KB, 下载次数: 9)
11:57 上传
　　法则二：黑白优先
　　在上色前用灰度模式设计可以简化大量的工作，让你更加关注空间和元素布局。
　　UX 设计师现在都喜欢“移动优先”的概念，这就意味着你要先考虑好在手机上如何显示页面，然后才考虑在超清的 Retina 屏幕上的显示效果。
　　这种限制非常好，能够帮你理清思路。先解决一些棘手的问题（在小屏幕上显示）。然后再解决简单的问题（在大屏幕上的可用性）。
　　我希望你先用黑色和白色设计，先把复杂的问题解决了。在不借助颜色帮助的情况下把 app 做得美观易用。最后再有目的地上色。
10.png (111.73 KB, 下载次数: 9)
11:57 上传
　　这种方法能保持 app“干净”、“简洁”。加入过多的颜色很容易毁掉简洁性。“黑白优先”会促使你关注空间、尺寸和布局这些更重要的问题。先来看一些经典的用灰度模式设计的页面。
11.png (346.89 KB, 下载次数: 10)
11:57 上传
12.jpg (179.83 KB, 下载次数: 9)
11:57 上传
13.png (73.49 KB, 下载次数: 9)
11:57 上传
　　“黑白优先”法则并不适用于所有情况，比如运动、卡通等有着鲜明特色的设计就需要好好地运用各种颜色。不过，大部分app并没有这样鲜明的特点，只要保持干净和整洁就好，绚丽的颜色被公认是很难设计的，所以，还是先用黑色和白色来吧。
14.png (218.56 KB, 下载次数: 9)
11:57 上传
15.png (442.27 KB, 下载次数: 9)
11:57 上传
　　第二步：如何上色
　　上色最简单的方法就是只加一种颜色。
16.png (346.89 KB, 下载次数: 9)
11:57 上传
　　在灰色的基础上只加一种颜色可以简单快速的吸引眼球和注意力。
17.png (219.54 KB, 下载次数: 9)
11:57 上传
　　你也可以更进一步，在灰色的基础上加两种颜色，或者添加统一色调的多种颜色。
　　实践中的颜色法则——什么是色调？
　　网页主要用的是十六进制 RGB 表。但 RGB 不是个好的颜色设计框架，HSB 模式会更好用，其中 H(hues) 表示色相，S(saturation) 表示饱和度，B（brightness）表示亮度。
　　HSB 模式是比 RGB 模式更适合我们看待颜色的方式。如果你对这方面不太了解，以下是一些 HSB 模式简单的入门知识。
18.jpg (9.02 KB, 下载次数: 11)
11:57 上传
19.jpg (9.2 KB, 下载次数: 11)
11:57 上传
　　通过调整单一色相的饱和度和亮度，你可以生成各种不同的颜色——深色、浅色、背景色、强调的地方、吸引眼球的地方等，但是又不会很扎眼。
　　使用一种或两种基础色调的多种颜色是强调和淡化某些元素，而又不把设计搞得一团糟的最可靠的方法。
20.png (145.13 KB, 下载次数: 9)
11:57 上传
　　关于颜色的其它几点建议
　　颜色是视觉设计中最复杂的。我从复杂的理论和长期的实践中挑出了一些好的建议送给你:
　　小工具箱：
不要用纯黑色：在现实世界中几乎见不到绝对的黑色。调整不同的饱和度可以增加设计的丰富程度，也更接近现实世界。Adobe Color CC：寻找、调整、创造颜色组合的绝佳工具。在Dribble通过颜色搜索：寻找某种颜色如何搭配的好方法，非常实用，如果你已经决定了要用那种颜色，可以通过颜色搜索看看世界顶级的设计师是如何配色的。
　　法则三：增加空白空间
　　为了让UI看起来更加有设计感，留出一些空白的空间。
　　在第 2 条法则中，我说到了黑白优先的原则，让设计师在考虑颜色之前先想想空间和布局，那么现在我们就来说说如何安排空间和布局。
　　HTML 的默认版式是这样的：
21.png (199.37 KB, 下载次数: 9)
11:57 上传
　　所有东西都堆在屏幕上，字号、行距都很小，段与段之间有一些间隔，但是也不是很大。这么布局实在是太难看了。如果你想设计出精美的UI，那就需要留出更多空白的空间。
　　留白空间、HTML 和 CSS
　　如果你和我以前一样，习惯用 CSS 来调整布局，那你最好改掉这个坏习惯，因为 CSS 默认是没有留出空间的。试着把空白当作默认状态，在空白页面添加各种元素。从没有修饰过的 HTML 开始，先做好内容，然后再做排版。
　　下图是 Piotr Kwiatkowski 设计的一个音乐播放器。
22.jpg (146.23 KB, 下载次数: 10)
11:57 上传
　　请注意左侧的菜单栏。字号是 12px，行间距有文字的两倍高。再看看列表的名称，“PLAYLISTS”和下划线之间有 15px 的空白，播放列表名称之间还有 25px 的间距。
23.png (67.35 KB, 下载次数: 9)
11:57 上传
　　在顶部导航栏也有很大的空间，搜索图标和“Search all music”占到了导航栏高度的 20%。
24.png (149.33 KB, 下载次数: 9)
11:57 上传
　　留白的空间收到了良好的效果，不同的元素有机的组合在一起，使得这个页面成为最好的音乐播放器 UI 之一。
　　大量的空白可以把混乱的界面做得简洁美观，比如这个论坛：
25.png (185.27 KB, 下载次数: 9)
11:57 上传
　　或者维基百科：
26.png (300.8 KB, 下载次数: 9)
11:57 上传
　　很多人认为在维基百科的这个新页面上，很多功能找不到了，但是你不能否认这是学习页面设计的一个好案例。
在行之间留出空间。在各个元素之间留出空间。在各组元素之间留出空间。分析一下哪些是可行的。
　　法则四：学会在图片上呈现文字
　　在图片上优雅地呈现文字并不容易，这里给出6种方法。
　　如果你想要成为好的 UI 设计师，你必须学会在图片上美观地呈现文字。优秀的设计师在这方面做得都不错，而水平较低的设计师往往在这方面也比较差，甚至完全不会。在学习了这部分以后，相信你会有很大的提升。
　　方法1：直接在图片上放文字
　　我很犹豫要不要讲这种方法，因为应用起来十分困难。不过直接在图片上放文字从技术上来说也是可行的，下面这个网站的首页就很不错，所以说说也无妨。
　　直接在图片上放文字时，有几点需要非常注意：
图片应该比较暗，而且颜色不能有太大的反差。文字必须是白色的，我知道你也能找到用其它颜色的案例。但是我觉得，你最好还是用白色。在不同屏幕，不同尺寸的窗口调试页面，确保各种情况下文字都是清晰、易于辨识的。
　　上面这 3 个方面调整好就 OK 了，不要再做其它处理。
　　我自己从来没有在任何专业的项目上直接把文字放在图片上，这种方法是可行的，也能做出酷炫的效果，但还是小心点。
27.png (294.07 KB, 下载次数: 9)
11:57 上传
　　方法2：暗化整张图片
　　可能在图片上放文字最简单的方法就是暗化整张图片，如果原图颜色不够深，你可以用半透明的黑色在上面覆盖一层，比如下面这个案例就加了一层不透明度 35% 的黑色。
28.png (536.9 KB, 下载次数: 10)
11:57 上传
　　如果你直接放原图，底色太亮，和文字的反差不够明显，看不清文字。
　　类似的方法同样适用于小图。
29.png (184.18 KB, 下载次数: 9)
11:57 上传
　　加一层黑色是最简单、普适性最强的。当然你也可以用其它合适的颜色，比如这样：
30.png (85.19 KB, 下载次数: 9)
11:57 上传
　　方法3：给文字加个框
　　这是一种简单有效的方法。在白色文字下方加上一个略透明的黑色方块，就可以放在各种各样的图片上了，而且显示效果非常清晰。
31.png (201.41 KB, 下载次数: 9)
11:57 上传
　　当然，你也可以放别的颜色，只是需要小心谨慎。
32.png (107.81 KB, 下载次数: 9)
11:57 上传
　　方法4：虚化图片
　　虚化图片是增加文字易读性的好方法，把文字下方的图片虚化了，同时把虚化部分亮度调低。
33.png (233.66 KB, 下载次数: 9)
11:57 上传
　　iOS 7 用毛玻璃的效果虚化了背景，而 Windows Vista 也使用了这种虚化效果。
34.jpg (53.7 KB, 下载次数: 9)
11:57 上传
35.png (36.16 KB, 下载次数: 9)
11:57 上传
　　虚化图片的方法也有局限性，你需要确保在不同屏幕上图片尺寸调整后，文字依然是在虚化的区域上的。
36.png (403.6 KB, 下载次数: 9)
11:57 上传
　　看看下面这个例子，你能看清小标题吗？真不知道这样的设计是怎么通过审核上线的。
37.png (275.06 KB, 下载次数: 9)
11:57 上传
　　方法5：底部褪色
　　所谓底部褪色是将图片的下边缘变暗一些，然后在放上白色的文字。这是一种非常有独创性的方法，我不知道在 Medium 之前有没有人用过，但我是先在 Medium 上看到的。
38.png (225.95 KB, 下载次数: 9)
11:57 上传
　　乍一看，你可能觉得这就是把文字放在了图片上。其实不然，图片上有一些非常细微的变化，中间完全没有黑色覆盖，而底部有不透明度大约 20% 的黑色覆盖在上面。
　　这样的变化很难看出来，但确实存在，而且确实提高了文字的可辨认性。
　　此外，Medium 还给文集图片上的文字加了些许阴影，进一步提高了文字的易读性。最终的效果就是 Medium 可以把任何文字放在任何图片上，阅读体验非常好。
　　有人可能会问了，为什么是把图片的底部变暗呢？为什么不能是图片的其它区域？要回答这个问题，请看法则1：光线来自天空。光线从上面照下来，图片的上方亮一些，而底部较暗，看起来更自然。
　　此外，你还可以把虚化和底部褪色结合起来，做出底部虚化的效果，比如下面这张图的效果：
39.png (246.89 KB, 下载次数: 9)
11:57 上传
　　方法6：把图片部分区域的光线变得更柔和
　　Elastica 的博客的题图并不是太暗，而且对比都较强。为什么文字的辨识度还这么高呢，就像下面两张图显示的这样：
40.png (458.25 KB, 下载次数: 9)
11:58 上传
41.png (358.11 KB, 下载次数: 9)
11:58 上传
　　这里实际上是把图片局部区域的光线变得更柔和，突出了文字。如果我们在浏览器上缩小 Elastica 博客，会看出到底发生了什么。
42.png (171.12 KB, 下载次数: 9)
11:58 上传
　　在图片左下角有一块阴影区域，文字置于其上，就很容易辨认了。
　　这可能是在图片优雅呈现文字最细微的一种方法。我还没在别处见过，保存下来，说不定将来什么时候就用到了。
　　法则五：做好强调与弱化
　　把文字设计得又美观又得体通常就是通过放大或缩小文字，做出反差的效果。
　　我认为，UI 设计最困难的地方就在于文字的装饰，因为设计文字时需要考虑的因素太多了：
字号颜色字体粗细大小写斜体字母间距页边空白（准确的说不是文字的一部分，但是容易影响阅读时的注意力，所以也算在这个列表里了）
　　还有其它一些方法调整文字吸引读者的注意力，但是不常用，也不推荐你使用。
下划线。下划线现在基本上等同于超链接了，我觉得你还是不要挑战人们的常识比较好。文字背景色。这个有时候也被当作超链接，只不过不是那么常见。删除线。一边待着去吧，你这个怪人。
　　就我个人经验来说，当我觉得一段文字设计的不好时，通常不是因为用了大写字母，或者颜色太重，而是因为各种要素的搭配出了问题。
　　强调和弱化
　　你可以把所有的文字样式分成两类：
增强可读性的样式：大字号、粗体、大写等；减弱可读性的样式：小字号、与背景对比不明显、空白较少等。
43.png (135.96 KB, 下载次数: 9)
11:58 上传
　　上图“Material Design”这个标题就很突出：字号大、反衬明显、字体较粗
44.png (7.93 KB, 下载次数: 9)
11:58 上传
　　上图页脚的字就是弱化处理的，字号小、反衬不明显、字体较细
　　我认为文字设计的核心在于：
　　标题是唯一需要全部强调的元素，其它的部分则应该将强调与弱化结合使用。
　　如果网页上某个元素需要强调，把强调和弱化结合在一起，可以避免整个页面看起来太有压迫感，同时又让各个元素的呈现效果恰到好处。
45.png (175.38 KB, 下载次数: 9)
11:58 上传
　　下面这张 Blu Homes 的首页堪称是这方面的典范：上方文字较大，突出显示，但是用了小写字母。没有给人强烈的压迫感。
46.png (340.94 KB, 下载次数: 9)
11:58 上传
　　网页上的数字字号较大，是网页上的重要信息。但是请注意，数字的字体很细，与背景色对比也不明显；而数字下方的单位虽然写得很小，却全部加粗，用大写字母。
　　这就是设计中的平衡。
47.png (284.66 KB, 下载次数: 9)
11:58 上传
　　上面这张图是 Contents Magazine 的网站，也是学习强调和弱化的一个好案例。
　　文章标题是唯一没有用斜体的部分，而且还做了加粗处理，更容易吸引读者的关注。
　　作者姓名写在文章标题下方，字体加粗，与没有加粗的”by“区分开来。
　　“ALREADY OUT”独立出来，字号很小，与背景区分不明显，但是用了大写字母，字间距很大，文字外围空白较多，当你想要找它的时候一眼就能看见。
　　鼠标悬停或选中时的样式
　　设计鼠标悬停或选中时的样式也是同样的道理，只不过更难一些。
　　通常情况下，改变字体大小、大小写、粗细时会改变文字所占空间的大小，让人们理解鼠标正悬停在这里。
　　此外，下面这些要素也能够影响人们的感受：
文字颜色背景色阴影下划线细小的动画——上升、下降等
　　这里再推荐一个比较普适的方法：给白色的元素上色；或者当背景颜色较深时，把有颜色的内容变成白色。
48.png (110.57 KB, 下载次数: 9)
11:58 上传
　　装饰文字是非常难的，但是每当我感到“这些文字不可能再变好看时”，我的判断都是错的。我需要做的就是不断优化，不断尝试。
　　所以想开点吧，如果你设计出来的文字不好看，不要担心，你需要不断地提升自己的能力，让自己变得更好。
　　法则六：只用合适的字体
　　有些字体很不错，就用它们吧。
　　注意:这一部分没有太多知识要学，我只是给你推荐一些好用的免费字体给你。
　　有的网站很有个性，会用到比较特别的字体。但是，大多数产品的 UI 设计只要保持干净、简洁就可以了。所以，把那些太花哨的字体放到一边吧。
　　我在这里推荐一些免费的字体。因为这篇文章是为初学 UI 设计的人所写，这些免费的字体完全够用了。
　　我希望你把这些字体下载下来，在你开始项目设计之前，浏览一下它们。
49.png (84.16 KB, 下载次数: 9)
11:58 上传
　　以下是我推荐的字体：
50.png (99.58 KB, 下载次数: 9)
11:58 上传
　　Ubuntu（上图）——字体偏粗，对于有些 app 来说太张扬了，但是对于大多数 app 来说还是不错的。在 Google Fonts 上可以找到。
51.png (98.14 KB, 下载次数: 9)
11:58 上传
　　Open Sans——非常易于辩读，是一款很流行的字体，用在正文非常合适，在 Google Fonts 上也能找到。
52.png (97.34 KB, 下载次数: 9)
11:58 上传
　　Bebas Neue——适合作标题，都是大写字母，在 Fontfabric 上能找到，这个网站上还有一些 Bebas Neue 的应用实例。
53.png (57.79 KB, 下载次数: 9)
11:58 上传
　　Montserrat——只有两种粗细，但也足够了。是 Gotham 和 Proximate Nova 最好的免费替代品，但不如那两种好。在 Google Fonts 上能找到。
54.png (59.52 KB, 下载次数: 9)
11:58 上传
　　Raleway——适合作标题，但不适合用于正文。有一个极细的版本（上图没有展现），在 Google Fonts 可以找到。
55.png (98.02 KB, 下载次数: 12)
11:58 上传
　　Cabin——在 Google Fonts 可以找到。
56.png (103.54 KB, 下载次数: 9)
11:58 上传
　　Lato——在 Google Fonts 可以找到。
57.png (103.54 KB, 下载次数: 9)
11:58 上传
　　PT Sans——在 Google Fonts 可以找到。
58.png (28.48 KB, 下载次数: 9)
11:58 上传
　　Entypo Social——一个社交网络图标集，在 Entypo.com 上能找到。
　　这里还有其它一些资源：
Beautiful Google web fonts——有Google Fonts的运用实例，我经常在这里找灵感。FontSquiirrel——收集了不少可以免费商用的好字体。Typekit——如果你用Adobe Creative Cloud（也就是用Photoshop或Illustrator等），你就可以从Typekit中获得包括Proximate Nova在内的大量字体。
　　法则七：像艺术家一样偷师
　　我第一次坐下来试着设计按钮、图标、弹窗等各个 app 元素时，我感到我对于什么是“好”知之甚少。但是我也很幸运，我并不需要完全设计全新的 UI，因为有很多优秀的作品可以借鉴。
　　下面列出一些资源，肯定会对你的设计非常有用 (按照重要性从高到低排列)
　　1. Dribbble
　　这个专为设计师而做的网站集合了网上最好的 UI 设计作品，在 Dribbble 上你能找到几乎各种类型的案例。
　　你可以关注一下我的 Dribbble 作品集。下面是其他一些推荐给你关注的人：
　　Victor Erixon——有着非常明显的个人风格，非常厉害。他的作品很漂亮、简洁，扁平设计。他做 UI 设计师已经 3 年了，是这方面数一数二的人才。
59.png (101.79 KB, 下载次数: 9)
11:58 上传
　　Focus Lab——这些人是 Dribbble 中的名人，他们的作品非常多样化，绝对是一流的。
60.png (205.98 KB, 下载次数: 10)
11:58 上传
　　Cosmin Capitanu——他是个通才，做出来的东西很疯狂，有未来感，但又不太花哨。他用色非常棒，但并不只专注做 UX 设计的。
61.jpg (23.98 KB, 下载次数: 9)
12:15 上传
　　2. Flat UI Pinboard
　　这里面有一些特别棒的手机 UI 设计，你能找到很多精美的 UI 设计实例。
62.png (327.58 KB, 下载次数: 9)
11:58 上传
　　3. Pttrns
　　这里面有大量 app 截屏，它的一大好处在于，它是按照 UX 模式分类的，因此，你在搜索你手头正在做的这一类作品时非常方便。
63.png (290.04 KB, 下载次数: 9)
11:58 上传
　　我坚定地认为每个艺术家初期都该像鹦鹉一样，不断的模仿和学习，直到能把顶尖的作品模仿得惟妙惟肖，然后再开始找到自己的风格，引领新的潮流。
　　所以，像个艺术家一样偷师吧！
　　我之所以写这篇文章，是因为我很遗憾自己当初在学 UI 设计时，没有这样的教程。我希望这篇文章能帮到你。如果你是一名 UX 设计师，在画好框架和线框图之后，做出个漂亮的实物模型吧。如果你是一名开发者，把你下一个项目做得更美观一些吧。
　　UI 设计的学习不可能一蹴而就，而是需要不断地观察、模仿并且和他人交流。以上是到目前为止我所学到的，我也会保持着初学者的心态，继续前进。
关注我们官方微信公众号
下载我们官方APP-游戏行
关注手游动态微信公众号
很美的设计...但是这些点子和思路适用到游戏的UI上面吗？
看了，起码以后对一些设计能说出到底什么是怪
3月19日—3月25日共有51款游戏开测｜GameRe从小众到付费榜Top 1，耐玩的Roguelike游戏拒绝暴雪，《战锤》的十年求生路数十位两会代表热议严控网络游戏 马化腾被网易全面发力电竞产业，重金打造全球首个奖微软：主机之外寻求游戏业务增长 志在争夺2
微信扫一扫关注我们→29,444被浏览1,371,999分享邀请回答weixin.qq.com/r/J0hgeDTE1mmprXAb9x01 (二维码自动识别)......................................................................................................................................................................................................................................................................................................................正文：看了这么多答案，我也来讲讲我的自学设计之路2011年，大学一年级的时候，我的专业是软件工程，但是我奇怪的被分到了物理电子工程学院，老师从来不教软件，天天教电路基础和大学物理，由于没兴趣，我从来不去上课，就和同学们开黑打dota，这样打了一年。2012年，大二了，我妈有一天和我讲，说以后肯定不能帮我安排工作，我突然有了危机感，如果毕业了我还没工作，会很丢人，我父母都是教师，别人家的孩子不是出国就是考上重点大学，压力还是很大的。当时我还挂着4门课在学校。当时喜欢研究各种手机越狱和雨滴之类的东西，然后有一天，我打完游戏上网的时候看到了一张图片当时我还不知道，《1126》，设计师叫罗子雄，现在是锤子科技的视觉设计总监，那时候我还没有ui设计的概念，把这个都叫做主题，它太精致了，给我带来极大的震撼，不仅细节完美，而且还特别严谨，运用了黄金分割。如果你以为我看了这个作品就开始努力学UI那你就大错特错了,我根本不知道这是用什么软件做的，我开始学习了网页设计，研究css样式和html，学了半个月发现好像有点不对，这是帮助别人实现效果的啊。。。然后有一天看到邵飞老师的一个视频教程，是教你画图标的，需要用ps这个软件，我跟着做了一下，完全做不下来，我就百度如何学ps，找到了李涛老师的《ps高手之路》，这样开始一步步学习ps，每天也不上课就看视频学习。不得不说学软件是个漫长的过程。所幸李涛老师的讲解很幽默，也就跟着学下来了。接下来要讲的是我的临摹之路，这个相当漫长，也最为重要。因为UI设计也是设计的一种，所以它第一个要求就是你设计的东西要美，如何能美？细节是最重要的，你需要观察，仔细的观察你和大神的作品之间的差别，然后再想办法实现它。现在设计之所以浮躁的原因我想就是很多人不愿意也没有耐心去培养自己的审美了。当时站酷上有一个视频教程叫《十分钟UI设计》，是腾讯的设计师omega和老程一起做的，里面的内容特别好，大家可以去搜索一下，我跟着里面的教程做了很多练习，当时老程说，windows的图标是很不错的，当你能把一整套图标都临摹下来，你就出师了。这是我当时跟着临摹教程做下来的，一个比一个有进步，每个都花了一天或者半天时间完成，当达不到原作效果的时候就继续观察，继续改，现在一看还有好多问题，比如第一个铅笔的投影是黑色的很难看，第二个台球的边缘太锐利，很不真实，如果当时不是疯狂修改我想问题会更多。2013年，大三了当我临摹了半年以后，我认为我的ps技术已经很不错了，跟同学说话的时候也爱吹牛，说自己是ps大神，一天一个同学下午来我寝室，说你干嘛呢？不知道今天晚上团里要开荒？你的萨满装等多少了？天天日常任务也不做。。。我说我画会图标，他说？？？我说我以后想当设计师，他说你别逗了。。。我当时心想一定要坚持下来！有一天在上站酷的时候，发现一个主题设计，再次深深震撼到了我，那时候ios7扁平风格盛行，很少有拟物的东西出现了，在看了很多千篇一律的设计以后很难被打动。牛mo王的《心随我动》，参加了康佳首届主题设计比赛，我立马跑到他站酷的主页 膜拜了他，看了他当时发的所有文章，他也是自学，我觉得太厉害了，他当时写了好多文章，告诉大家如何自学，感触特别深。后来我找到了他的qq，没想到他居然同意了，真的特别兴奋。。。然后我问了他一个图标方面的问题，令我没想到的是，他居然打开ps手把手教我如何调参数。。。一边做一边传图片给我，教我如何实现效果，他说好多东西其实非常简单，但是没有人告诉你的话自己很难想出来，到现在我都特别感谢他，叫他牛哥，虽然他不姓牛。。。我问他心随我动这个主题是怎么做出来的？他说只有积累到一定程度才可以。。。然后我默默努力，偷偷临摹它，一天一个图标。下面是我临摹的《心随我动》。做了快一个月，其实我在最后一天偷懒了，上面的哪个大的天气widget是用的原来的图抠下来的。。。然后我把临摹的给牛哥看，他当时就说，哇，好棒，你进步好快！可能没有谁像我一样把它临摹了一遍，在这些过程中，我的技法运用越来越熟练了，其实做这种ui，只需要你用好图层样式这一个ps功能就好！剩下的就是不断调整内阴影，投影，还有渐变，一定要注意投影的颜色，不要用黑色！要用深色，比如说黄色就用深黄色当投影，蓝色就用深蓝色，这样。推荐大家去站酷看看牛哥的文章，他的分享真的是很详细也很实用，从字体选择到ui入门都讲的特别到位，在学习路上能有他这样的老师带路我想我很幸运，再次谢谢他！当ps技术熟练以后，我就想着做一些自己的东西出来，然后照着照片用ps涂抹了一张定制耳机现在感觉阴影有一些深，线的感觉也不自然，有些发虚。在大三后半学期，参加了小米的主题比赛，每个图标都在网上搜索好多的图片做参考，然后自己绘制，差不多两个月的时间，最后入围了决赛。自己做主题和临摹是有很大不同的，每个图标做多大？用什么颜色？这些都需要自己控制，可以看出，这个作品在这两个方面都很差。。。当时很迷茫，自己做的东西究竟是不是设计？字体要用什么？排版怎么才好看？因为平时积累的东西太少了，所以真的很质疑自己。我意识到需要多看设计方面的东西，所有的都需要积累，到需要用的时候才能用到。第一次 接触实际项目 是大三后半学期，我的一个老师要做一款ios应用，主打背单词功能，我们两个人他写代码，我负责设计 ui 。我花了一天时间研究切图，研究我做的图片怎么才能用在实际的app中，然后我模仿path做了几个样式出来，我们干劲十足，前后做了好几个版本，修改了十几次。这个软件前前后后一共做了半年，对我实际项目的实践是一个挑战，靠这个软件我还拿到了在京东实习的机会，大四后半学期在京东实习了半年。期间还和同学做了一个网站叫野渡集市现在我工作已经一年了，在北京的美餐网，自己一路自学过来，毅力很重要，我想兴趣更重要，我现在还在不断学习，因为自己的设计知识还是很不足，到这个时候要多看看ios和google的设计规范，知道ios的最小点击区域是44pt，字体不要小于22像素，36像素适合阅读，这些都是在以前自己很少注意到的。现在每天还在自学c4d和ae，加强自己动效方面的实力。发一点现在的作品吧，我觉得很少有人能听我啰嗦到现在。。最后推荐大家一定要多上dribbble，看看国外的大神是怎么做的，当我上dribbble以后才发现，很多国内的所谓大神不过是抄袭别人的作品而已。///////////////////////////////////////////////
9月25日更新
////////////////////////////////////////////刚才写了一大堆然后浏览器崩溃了都没了。。。只好重写了2天收获了500多个赞，我真的没有想到，还是有好多同学提问或者私信我，我在这里做统一的解答1.好多人问我用的是什么软件？是ps还是ai？这个问题在我学ps的时候也特别困惑，我想说的是一门心思学好ps就行了，ps比ai更适合做ui设计，我都是用ps做的，当然用ai也能做出来但是会不方便，而且网上ps的教程会很多，ai就很少了，所以建议大家学好ps。我现在工作以后使用sketch进行设计，因为公司是全mac办公，用sketch能极大提高效率，sketch默认输出一倍图片，减少了标注的麻烦，而且设计稿可以让ios工程师直接使用。（现在这个软件只有mac能用到，这是它不好的一点，当然有条件的可以学习一下，很方便。）这是用sketch设计的设计稿，虽然最后没有用，但是可以看出来一个文件搞定了好多设计稿（不会说话了。。。）2.我向大家推荐了使用dribbble来提高审美，并且了解ui设计的最新趋势，但是说的不仔细，现在给大家分享一下我如何使用dribbble。首先在dribbble里有一个点赞功能，叫likes。拿我举个例子，在我的主页，这个地方，进去有我喜欢的作品。这个有什么用呢？比如我在浏览今天dribbble的推荐作品的时候，发现两个超棒的作品,看下面的图：我们可以发现，这是两种不同的风格，也是现在最流行的两种第一种设计是那种酷炫的，很有ios的风格，像自带的应用日历一样，里面有很多小的控件，很精致。第二种设计现在更多得流行起来，用大的色块，大的按钮，大的圆角，还有流畅的动效给使用者带来非常愉悦的感觉，有的配合了卡通形象，更加增加了亲切感，这类的app有marval，还有游戏jellies（就是那个抓水母游戏）。我们点击作者的名字，到他们的主页，看到他们更多的作品。可以发现他们在自己的风格里面都做的特别棒，有很多值得我们学习和研究的地方，最好能看看他们的likes，看看他们都喜欢什么作品比如这个大神，应该是中国人但是原谅我不知道他是谁，低调的人太多了这个是他的主页，可以看出来他也是第二种风格的，我们看看他的喜欢果然，可以看到更多的大色块和卡通的设计。也让我们发现更多的擅长此类设计的大神。接下来讲讲dribbble的搜索当有一天老板需要我设计一个登录界面，但是我并没有什么好的灵感，大家肯定早就注意到dribbble上有search按钮了，我们搜索“login”，出来以下结果这么多的登录界面设计，这下不怕没有灵感了，我忘了是谁说的了，世界上没有纯粹的设计，所有伟大的作品都是以前的作品的结合和再创造，我们学习别人的想法和设计语言。dribbble还有很多psd可以下载的，比如iphone的各种展示模型，我们搜索“mockups”或者“mockup iphone”就可以找到下载了。做展示的时候很好用。看下图：我做界面设计的时间也不长，只是说一些自己的理解，尤其是工作以后，那些很炫很酷的界面往往是不能实现的，我们的设计不能出格，比如在ios上你使用安卓的材料设计语言就很错误，但是在遵守大的设计规范的时候如何才能让你的设计出彩？这就需要我们对细节的处理，比如path里掉下来的小卡片，或者是一个小的可爱的动画，让用户能感觉到设计的精致，现在我们也管这种小细节叫“情怀”。我们看好的作品不一定要把他实现，但是要学里面的细节，有时一抹亮色或者一点光晕就能为你的设计点睛。3.前面有些提到的素材有人说找不到，我帮大家把链接贴出来
还有就是回音的ui分享会，牛哥的u1系列教程，我都看过，也推荐大家认真看一下。
学c4d可以看看ihdt上海映速的免费教程（以上教程我都是一步步看过来的，还有好多跟着做了临摹，我一直认为，如果你回答里推荐的那些素材网站你从来没有看过那是不负责任的，推荐一大堆链接不如不推荐，有人评论和私信喷我我必须说他们两句。。。）这次更新就到此为止，祝大家每天都有进步。下次更新可能要到我动效或者c4d有大的进步的时候再来了！最新作品更新：dribbble：zcool：我会经常更新的！！！！6.1K449 条评论分享收藏感谢收起weixin.qq.com/r/gTru9lzEAgF9rRiV92_T (二维码自动识别)--------------------------------分割线-----------------------------------第一点：学习准备——启蒙学习一项技能，尤其是已经有一定沉淀并在各行各业有广泛应用的技能，就一定要对它先有充分的认知。在开始正式学习前，你需要花足够的经历去了解和查阅它的起源、发展、应用、未来。UI作为平面设计的一部分，再往上又从属与美术学这一大类。因此，首先要先去了解整个美术史的发展。从人类起源各个阶段中，美术经历了什么样的变化，在各自的时代发挥了什么作用，近代美术史又经历了哪些波折，平面设计艺术是如何发展壮大走进千家万户，并且有哪些经验成功过度到后来的UI设计中。那些享誉中外的艺术大师有何过人之处，他们为美术学发展做出了哪些贡献，他们的名作到底有何动人之处。
在今天的UI设计群体中，我们作为专业的设计人员，可以和别人侃侃而谈雷军的创业心得，罗胖子的工匠情怀，滴滴快滴的商业模式以及BAT在传统行业的布局等等，各种其实并不太相干的话题，却说不出半点艺术见解。
我们看不懂博物馆展览那些画作，不知道梵高画了什么作品，抽象派到底在闹腾些什么，更甚者连扁平化的推动有什么深层次的原因都不明白。如果说最近很火的二月河说大学生不看《红楼梦》是耻辱尚有争议性，那么设计师无法理解前人艺术成就是绝对的悲哀，无法去辩驳的事实。
了解美术史，学会入门的美术鉴赏，目的是以正视听。学会用多个纬度去思考美学，学会用更深入的方法来看待问题，学会从更宏观的视角审视行业……这样，你才能更客观的去理解UI的发展历程。这些知识和思想，将为你的职业生涯做出启蒙，才更容易成为一个有内涵有深度的设计师，这当中还有诸多优点，就得靠你们自己慢慢体会。
下面推荐书目：（重点）
近代设计史 （一下搜不到这书的地址，回头我拍张照片）
（有1.2.3，都得看）以上是我目前看过能想到的最基础书目，如果有朋友觉得还有合适的请给我留言补充上来。
哲学有三大哲学问题，“你是谁？”“你从哪里来？”“你要到哪里去？”，构成了哲人在探索人世真理时的基础框架。我们也一样，要在阶段给自己提出三个问题，并花至少一个月的时间寻找答案：
设计是什么？设计是如何产生的？设计可以做什么？第二点：绘画技巧——洞察这个点更新了一片回答~~可以参照这个！曾经和很多同行争论过，UI设计，到底需不需要手绘训练。想必大家都知道，目前国内知名的UI设计师，站酷、、追波上的大神们，很多都是草根出身，从其它行业空降来的，他们的出色是有目共睹的，似乎从某种层面上证实，不需要有绘画基础，也可以做好UI，也可以当大神？图样拿衣服！我们来说说绘画的问题。美术高考主要考的三大项：素描、速写、色彩。就是绘画入门的三大基础课题，我们学习的过程也是以这个顺序逐步覆盖的。如果你已经在第一部看完了那些书籍，就会知道，学习基础绘画的过程中，我们在纸张上对现实世界的物体进行细致准确的描绘，也就需要我们更仔细的观察事物。光照射的角度是如何的，在对应的形状中表现出什么明暗分布，在透视原理下杯口厚度的弧形是怎么变化的。随着绘画的深入你就会逐渐培养一双洞察细节的眼睛，你会对所有设计和形体做出本能的反应，分析它们的美丑，找出核心所在。我们看看下面这样的案例：这是一个很简洁的小鸟，只用几个细节就轻松的表现出来，但我相信，如果要原图照抄，有90%以上的UI设计师是画不出精髓的（不信你们试试）。越是这般简单的图形，在弧度、头身比、重心偏向这类细节上就越关键，如果你没有良好的观察能力，那么就连抄也抄不像，你只能做出曲线都歪歪扭扭的贝西货并自己洋洋得意的四处上传设计媒体求赞求认可。前面提到的这批国内的大神，其实就是在远超常人的勤奋中积累了观察的经验，以此可以复制一定的风格，并能发现设计中的细节而不断做出改正。但这就完了么？当然不是。你们可以仔细去观察这些没有绘画能力的UI设计师，他们的作品存在着很强的局限性，虽然可以很好完成熟悉领域和流行风格的设计，但是形势是很单一，并且缺乏真正的创造力。强大的手绘能力，除了提高洞察力以外，就是为你将来创作的多元化提供更多可能，看下面案例：比如绘制这样的图形，私以为没有手绘技能无异于天方夜谭，而GAME UI的最大门槛就在这里。你的绘画技巧会支撑你跨过更多的门槛，在设计的道路上有更多的选择和可能，也会支撑你走的更远。那么学习绘画要到什么程度呢？直到你觉得可以正确绘出静物为止。推荐去报一些高考培训的机构，和高三孩纸们一块儿学画，你会提升的相当快，这个过程只需要两三个月的时间。不要觉得可以跳过，将来成为出色设计师的成本将远低于不学习绘画的其他人。还有，最重点要掌握的一个绘画技能，我觉得是结构素描。你就可以在纸张上对想绘制的图形做出快速、准确的打稿，效率和延展性远胜上机鼠绘。
手绘将贯穿你整个职业生涯，在今后的学习工作中要保持这个习惯，相信我，每到一个合适的时机，它总会给你带来意想不到的惊喜。第三点：掌握软件——手段这一步就正式开始进入学习软件的步骤。如果学习的是UI，那么以下几种软件是必不可少的：
PS、AI、DW、Sketch……其余的根据爱好自己补充
这里要先和大家谈谈，我们都知道美工对于设计师来说已经成为具有侮辱性的贬义词，设计师们喜欢反驳，你丫才是美工，你全家都是美工。有点小理想的有志青年们都对这个称谓充满鄙夷，但我得给大多数人泼冷水，因为大多数设计师连一个合格的美工都够不上。
我们知道美工代表的是一种技师的称谓，有一定技巧但没有创造力。可偏偏就是绝大多数人都没有掌握足够的技巧，这就是当前设计行业所需要面对的事实。很多设计师没有经过前两个步骤的熏陶的，所以在学习软件的过程中很容易自满，明明对软件的掌握还很肤浅就已经恬不知耻的在简历中输入”精通“二次（哎呀，好像在说我自己！）。他们的视角是狭隘的，只认为学会了PS这些工具，就学会了设计，也忽略了自己远远没有达到美工门槛的界限。下面我来谈谈怎么学习这些软件。首先看李涛视频的前三课：只看前三课！重复强调一遍，先只看前三课，并且做好笔记把所有内容都背到滚瓜烂熟为止（我看了至少五遍以上）。这是整个UI设计行业里最基础的知识点，光、色、分辨率、色彩模式，连这些都没有掌握你就不要想精通设计软件和掌握它们的原理。然后你就开始去看别的视频教程，这时候可以去淘宝买：几块钱就有一打的高清入门视频，不要浪费时间在搜索免费的低质量视频上。入门教程基本都是相同的，你要完整的看完和跟着学习几个新手教程，直至对软件使用有了初步的理解，然后再返回去看李涛的视频剩下的内容。那软件要学到什么程度？学到你可以用它临摹出任何使用这种软件设计的图形。一定要记住，设计软件只是我们用来实现设计的一种手段，过渡沉迷在软件的研究中是本末倒置的，但如果你使用软件连抄都抄不出来，那就是一种不需要反驳的耻辱。例如下图：这样的作品，你有了足够的观察力，靠对软件的掌握度就可以轻松临摹，但很多已经从业数年时间的设计师连这种临摹都做不到，原因在哪里你们自己好好想想。软件的掌握是为你实现更多设计方案提供可能性，不要让软件熟悉度这件最简单容易的技能变成自己的短板，至少我们要成为一个合格的美工！经常自己做一些练习来测试自己对软件掌握度在哪里，就很容易发现问题，然后自己去查资料做研究。下面就是一个我很久以前做的软件练习（要点开大图，大神轻拍= =！）：好好去理解每个软件可以实现什么，优势是什么，极限在哪里。然后你就再！也！不！会！跑去大神评论区里问：好牛逼，请问这是PS做的吗？请和我默念这是本世纪设计界里最愚蠢的评论，不要让它们发生在自己身上。
再唠叨一次，软件只是一种手段，你还并不懂设计，少吹牛逼！第四点：设计理论——实践广义上来说，到这步才是真正开始学习设计，也是让一、二两点作用开始充分发挥的时候。
因为看过艺术史，所以你会知道，每个时代流行的艺术创作有各自的手法特点，有共性，所以可以被归纳和总结，也就可以教授，培养出相同的作家。换句话说，美术家是可以被量产的。在理论不断被完善的今天，要做出好的设计一样是可以通过理论学习——实践产生，一定不要认为这是天赋上的差距，别人比自己就更有艺术细胞。那些能被历史铭记的艺术大师，之所以伟大，是因为他们的开创性或者作品所包含的人文精神和伟大的灵魂，而不只是一幅出色的图画。
前面的几点都为你提供了足够的实践基础，所以在这部才能让你正确看待自己的潜力，不会轻易停下追求进步的脚步。只有最伟大的设计师才需要较量天赋，而成为一个优秀的设计师靠的是努力。设计是勤行，不是设计人，不入设计门。
那么理论知识我们该学习什么呢？首先是基础中的基础：
每个方向都需要阅读相应的教材，重要性无以复加，你需要在观看的时候一边做练习。然后才是具体设计类的书籍，记得不要再买那些无用的通篇告诉你软件操作的书籍。
还有个差点被我忽略，本来想单当一个步骤说得，后来想想还是归纳到这里来，那就是对于字体的认识。UI设计师普遍对字体缺乏敬畏，尤其在扁平化盛行的今天，字体的作用更加突出。只有掌握了字体的奥义，才能设计出有力的排版，才能对可读性和观赏性文字符号有充分的了解。比如日本二十四节气网站就是运用字体的优秀案例：（原网站好像打不开了，只有图）。推荐书目：
一定要看！！）
接着就是关乎排版，、，这也是UI设计师必须掌握的基础技巧之一。对栅格化有充分理解，就可以设计出足够安全而和谐的页面，下面书目：
栅格排版法（找不到了，我回去翻翻）
还有一些相关的基础推荐书籍，太困，记不起来，希望知友推荐：
重点推荐）
设计的理论书籍教会你怎么设计，你需要在不断接受知识的同时，马上对它们做实验，不停的练习，不停的产生问题并解决。在你的设计观念足够成熟前，绝对不要没事上网看设计的XX法则，如何做好网页设计你需要掌握的XX个技巧，完全就是设计界的鸡汤文，它们看着其实挺有道理，但完全没办法给新人提供实践指南，是用来遗忘的，即使看再多这类鸡汤文，你也做不好设计。举个本题内的例子：这样的回答实际上可有给你提供详细的帮助？没有（无意冒犯）！你的学习过程在每个方面都要系统而有调理，书籍比零碎的阅读可以给你带来更多的帮助和进步。第五点：逻辑取舍——平衡
在我这个回答：
已经说很详细了，作为UI设计师，是必须掌握前端的对应技能的，这不是可以完全无限制的发挥设计技艺的地方，你就要有取舍，要跟的上前端开发的逻辑，做出稳定可以被实现的设计稿。
学会HTML5 CSS3 JQ的入门，安卓、IOS的实现规范！第六点：鉴赏模仿——超越
特地把这点放到后面，也是有理由的，前面的步奏都是一个设计师基础素养的实现，而一个出色设计师还需要培养自己的套路和风格——站在巨人的肩膀上。
你要学会如何辨别优秀的作品，可以从多个渠道收集优秀作品和案例，首推使用：
（又到了求粉的季节，懒惰的可以只看我的花瓣 ）
（其它的可以在导航里逛）学会看优秀的案例，用它们给你提供设计的燃料，然后你要做的就是抄！抄！抄！用你学过的设计理论在实现中对案例进行分析，只有发现了它们的优点并自己动手实践实现了，才对你的提升有实际帮助。你每天抄一个案例，BANNER、ICON、APP界面，那么不出几个月，你就能对现有的设计形式套路了如指掌，可以设计出安全不会有太大毛病的UI设计稿，你可以轻松完成这样的：而不会做出这样的：同时，必须提醒一点就是，我们在设计过程中对美的追求和实际实现、用户需要很多时候是不一致的，这是一个坑，需要有足够的经验去判断什么样的设计已经足够了，什么样的是过度设计，没有实际意义。你不止要在网上搜索优秀的案例，一定要持续关注这些那些最简单，但是最受欢迎的网站和应用。例如：知乎、INS、微信、淘宝等等。去不断讨论、查阅，来理解为什么是当前的呈现式样，而不如自己的预期。比如我写的另一个回答的思考方式：
你要在练习和思考中进步，不要盲目的追求视觉表现，这样的UI设计师是很难真正的成长起来。
设计的终极目的是解决问题，而不是盲目的表现自己对美的追求。所以我要新手不要去看那些只上传飞机稿的网站：、追波等等。
当前主流设计平台的趋势就是，少数大神驱动庞大的底端设计群体，如果你已经在前几个步奏得到提升，那么这些网站的多数设计师已经在思想上没法和你并驾齐驱，不要去这些地方混迹。这些网站不会有真正有价值对等的交流和见解，只有设计师在自己圈子里找自信刷存在感的证明，你去扫两眼评论，就知道不会有“落霞与孤鹜齐飞，秋水共长天一色”这种回答，只有“哎呀，我草，牛逼”，“请问这是用数位板画的吗？”，“请问这是AI做的吗？”。这些大神的飞机稿和普通练习的迅速流传，很可能会产生诸多的不良印象。
就拿我深深唾弃的追波来说，大量的作品没有任何实践价值，尤其为了吸引同行关注而过分秀技巧，秀动效。于是动效的风气马上在国内圈子弥漫开，明明是连基础排版、配色都做不好，PS都还没捂热，就追着赶着学习AE，开始玩转交高大上交互特效了。具体请看下文：
当你抄了两三个月案例，就已经有足够多的作品集了，你已经可以打包做简历去应聘了。届时你的水准将超越绝大多有数年经验的设计师了！第七点：阅读思考——扩展
整个UI设计圈，还有一个很致命的缺点，就是对其它行业知识的排斥，科班毕业生尤甚。因为学生时代大多讨厌学习，有艺术生这个庇护伞，就可以合理安慰自己不学习不念书那是放荡不羁爱自由。屎丢皮啊！！
艺术史还要教会你们的一点就是，真正的大师绝对不会只是孤陋寡闻而只专注在手中的笔杆和油墨，他们不断在认识世界，不断在研究感兴趣的知识和见解，这也就是知乎存在所要满足的需求。不要做一个只知有设计，不知有数理化的蟾蜍，只能在你自己的井里蹦跶。
成熟的设计不只是你个性技巧的表达，还有你对解决问题所展示出来的理性和洞见。很多设计师和同层次的其它专业人员比较起来显得太幼稚和粗浅，症状也在这里。不要只用设计的角度去看世界，去涉猎更多的专业，让眼界更宽广，有更多的角度去理解世界，得到的感悟将给你带来难以估量的升华和进步。
这是可以持续一生的事业和技艺，在正确的方法下，越积累越成熟，老而弥坚。请不要再用肤浅的思想认为它是吃青饭的过度阶段！
……………………
===================================================
设计是一门需要沉淀的技艺，却恰巧遇见了日新月异的互联网文化。这让大家对流行极具敏感度，而开始追赶潮流，轻视正统和法则。这整个流程需要或许需要1整年的时间，但我相信，只要有足够的耐心，是可以让一个新手成长成为一名合格的UI设计师，请放慢你的角度不要急于求成。更新下QQ群：5537969，有时间会在这里讲解下设计过程~~7.8K637 条评论分享收藏感谢收起