不知道大家是否工作中经常听到有人点评某个作品说：这个设计缺乏细节？过去在拟物化时期，设计师细节能很好的在质感，图标，光影处理等方面去体现，但是现在越来越扁平的设计风格，色彩、规范都千篇一律，仿佛设计都能被AI智能取代，今天就来聊聊UI设计师该如何在设计中体现细节！

 UI的组成元素？

界面大多都是由字体，图形，色彩构成的，这也是设计三大要素。那么在设计中，我们如何去处理好里面的关系呢，今天和大家分享一些常用的设计技巧，帮助大家在做设计时候更好去排版，英文示例只说明技巧中文同样适用。

▲我们尝试把上图这个UI界面拆分一下，可以看到界面基本都是由字体、色彩、图形三大板块组成的。

▲同理：上图我们按照同样的方式去拆分，依然可以获得三部分的内容

 字重创建层级

▲我们都知道字体是有重量的，不同的字重可以体现界面层级，特别是现在的iOS风格中，更强调通过字重对比来提升视觉层次，但是很多设计师只知道运用字体大小去做对比，却忽略了：运用字重和颜色去做层级区分同样适用。

▲这段文字比较重要，就加大，这个文字次要就缩小,这是大多数设计师做设计的习惯，但是不要过多依赖大小对比去区分层级

▲我们可以尝试通过加大字重，同样可以达到效果

▲可以感受一下当视觉字重变化时，整体版面的层级区分

▲字重的对比在平面设计，版式设计运用比较多

▲品牌设计中，不同字重带来视觉感受和舒适度是截然不同的

▲商品卡片设计中，通过字重区分层级的视觉效果，信息捕捉效率显然要比整个版面都用统一字重要更快。

 颜色创建层级

在UI排版中，除了字体层级，颜色也是很重要排版手法之一，做界面时候不要只用一种颜色，主要内容黑色，次要内容灰色（文章日期等）辅助内容浅灰色，然后结合前面所说字重运用，能很好的和信息组成视觉节奏。

▲界面中的线条和色块都是区分层级的辅助手段，按照界面调性去实际调整

▲错误做法：让文字变成浅色比较适合在白色背景下，如果不彩色背景上面使用灰色，因为带色彩背景和灰色如果一起使用，会显得界面特别脏，识别度还低

▲通过对图片，彩色背景通过降低透明度的效果会更加好

▲通过降低文字透明度也能拉开视觉层级

▲选择与背景相同的色相，直到饱和度合适为止

 投影运用创建层级

市面流行风格里面，投影运用大都比较多，但是在用投影的时候，我们需要尽量保持它的干净和利索，不要使用过大的投影值和扩散范围，尽量使用柔和投影或者垂直投影。

 间距创建层级

▲我们在做很多设计的时候，容易用到很多分割，什么时候用线什么时候用投影，如何让界面更加干净，有时候通过留白来区分层级，效果会比线更加干净清爽。

 中心轴创建层级

▲这个页面中，很明显左边比右边好，右边信息缺少对齐和呼吸感，左边有一条明显中心轴让页面更加的清晰。

 总结

今天和大家分享的只是UI界面中一部分经典区分层级的要素特点，希望大家都能举一反三，运用到自己的作品中去，做出更多具备细节感受的作品！

原文地址：我们的设计日记

作者：sky

我们的设计日记

微信号 helloskys

功能介绍

通常，硬件的外观仅仅是作为一种体验的容器存在，而软件用户界面（User Interface）的体验，则决定了我们是否喜欢这个设备。下面，就和大家看看 Apple 在界面方面做的努力。

01. 高度统一的设计语言

苹果的设计语言有四个标志性特征：平滑圆角矩形 (Squircle)、阴影 (Shadows)、半透明 (Translucency) 和高斯模糊 (Blurring)，它们几乎贯穿整个系统。从原生应用：相册、App Store 应用商店、音乐都有这些元素，并且高度统一。
 

App Store 十年变化

– 圆角矩形

从 iOS 7 转型扁平化的今天，苹果完成了对「圆角矩形」的终极运用。苹果引入了工业设计中连续曲率概念，应用在圆角图标的轮廓之上。

圆角矩形

但真正意义上的运用，体现在 iPhone X 发布之后。得益于 OLED 柔性屏和 COP 封装，iPhone X 四边等宽的机身达到了最高的设计美学，屏幕的外轮廓也追随机身形态，于是就有了圆角的 Dock。

蜗牛读书 App

在《致匠心，以设计》这本书中有提到蜗牛读书App，在大的弹窗和卡片引入了曲率圆角。虽然这是一个很细节的设计，甚至感知不到。但它就是设计师不断追求的东西。

– 阴影、半透明和高斯模糊

投影可以凸显内容的重要性，半透明和高斯模糊暗示背后有更多的内容，同时可以保持界面轻盈、通透。

Apple Music iOS 13 版本
 

相对于 iOS 12，iOS 13 将半透明的特性更进一步。除了迷你播放器之外，Apple Music 的底部导航菜单也变成半透明+高斯模糊了。

细心观察，微信同样认同这种语言，在顶栏和底栏做了微弱的半透明和模糊。

相册 iOS 13 版本

而系统相册的更新，则延续了 App Store 应用商店的卡片样式。至此，圆角、投影、半透明和高斯模糊，这四个特征在相册界面皆得到了印证。

02. 极致的图标细节

– 语音备忘录

就拿语音备忘录来说，它的音轨图形并不是随意画出来的。而是用录音功能，说出“Apple”这个单词，所呈现的音轨波形。

语音备忘录 & Apple单词的音轨

而且，还有一个小细节是，语音备忘录是唯一支持180°竖屏旋转的自带应用。因为它常见的使用场景是采访，需要将手机底部的麦克风对着受访者，而这时图形界面是反的。所以支持旋转，这是一个基于用户使用场景的细节设计。

– 地图

在苹果地图 App 图标上有一个角标「280」，它代表的是苹果所在的总部位置，一条位于美国加州 280 州际公路附近。

苹果地图 App

另外，新的图标里，右上角露出了 Apple Park ，也就是我们熟知的飞船图形，这和实际的平面地图完全吻合。

苹果新总部位置

– Safari 浏览器

新的 Safari 图标，磁针的角度由原来的45°变成了50°。有一个颇有意思的解释是，地磁的北极在一直在持续向北移动，在过去的150年里偏移超过1000公里。这个说法显然更具有故事性，但事实并非如此。因为磁极向北，那么磁针角度应该越来越小才对，而不是增大。 

Safari 浏览器

实际上，45° 改为 50° 是出于视觉上的修正。左边旧的图标，45°磁针刚覆盖的是短的刻度条，被俩长刻度条相夹，略显拥挤。而新的图标刚好相反，50°磁针相邻是短刻度，视觉上更具空间感和韵律感。

– 时钟

大家都知道时钟 App 的图标时间是和系统时间同步的，秒针也会匀速转动。重点来了，长按时钟 App ，秒针的运动方式由匀速变成滴答滴答机械式转动了。

时钟 App 滴答动画

03. 利用视觉线索

为什么苹果系统上手容易？在现实世界中，有些东西你一看就知道它如何使用，比如门把手、无印良品的CD机。

这里有个心理学的概念：示能 （Affordance），在 iOS 中也建立了类似的机制。用户借助以往的经验，通过图形，预期下一步的行为或感知它的是做什么的。

滚动内容 & 多页内容

比如，左边有一列滚动内容，你可以在底部裁剪掉半个文字，让人尝试着去发现下面还有更多的内容。如果有好几页内容，那就可以用页面指示物，来引导还有其他几页内容。

滑动窗口
 

对于滑动窗口内容，你可以用像这样的一个把手来暗示它是可以被抓取并滑动的。

04. 隐喻

好的设计是有沟通力的，隐喻 (Metaphors) 就是一种很好的方式，它同时也是 iOS 六大设计原则之一。

– 时间隐喻

很多人觉得 UI，不就是颜色、间距那些东西吗，好像没什么可设计的。那我们且看，iOS 短信界面是怎么处理的：

• 短信气泡的背景颜色是有深浅变化的，信息越早，颜色越淡。
• 连发两条信息，它们上下的间矩是很小的，并且只有下面的信息气泡有角标。
• 如果发送的间隔时间长一点，短信的上下间距会变大。

短信界面

苹果就这样通过颜色渐变、间距，完成了对时间的隐喻。

– 速度隐喻

苹果系统有一项“朗读屏幕”的功能，双指从屏幕顶部向下轻扫，即可呼出。将 iPhone 或 iPad 上的文档、网页或微信里的文字读出来，帮助你将阅读变为朗读。

当然，你也可以控制系统朗读的语速，Apple 很形象的将龟兔赛跑的图标，隐喻在速度之上。当一个应用程序的虚拟界面是植根于熟悉的真实世界时，那么用户会学习的更快。

龟兔赛跑

05. 设备同步

苹果的音频产品线有很多，诸如 Airpods、Airpods Pro、Beats Solo、HomePod、Powerbeats3，每一个都有各自的图标。不管你连接哪个，都会同步显示具体设备。

比如，当你手机连接了 AirPods Pro ，电话界面的音频喇叭 icon 会变成  AirPods Pro 的 icon。另外，AirPlay 功能可以连接多个扬声器，甚至新旧款的 iPhone 图标都有区分。

AirPods Pro 图标 & 全面屏 iPhone 图标

同样，如果你有 Powerbeats3 耳机，并且系统是最新的iOS 13。当你调节音量的时候，喇叭 icon 同样会变成 Powerbeats3 耳机图标。

Powerbeats3 图标

06. San Francisco 字体的秘密

旧金山字体现在是 Apple 平台统一的标准字体：被应用在 Apple Watch，iPhone，iPad和Mac上，取代了以前的 Helvetica Neue。

冒号的居中对齐优化

新字体有些微妙的变化，最让我印象深刻的是冒号「 : 」的显示方式。正常情况下，冒号是在基线上，视觉感知会偏下。但如果冒号是放在数字中间，系统会将它垂直居中对齐。

符号的优化

除此之外，「 #」符号中间的开口是个非平行切口，这是特意被增大处理的。因为 # 的字号在缩小到一定程度的时候，切口会难以识别。所以视觉上需要更多的空白，提高可读性。

07. 非线性动画

用户体验有一个重要性能指标是：响应速度（Speed Index）。随着硬件设备的不断提升，不可否认的是，现在的 Android 启动速度比 iOS 更快，但是，苹果加入了很多非线性动画，以及稳定的帧率表现，在流畅度方面 iOS 更胜一筹。

iOS 13 黑暗模式切换动画
 

解释下非线性动画，就是一开始很快，最后慢慢慢下来。比如，打开任意一个 App 的过程动画、键盘拉起时的瞬间，以及 iOS 13 控制中心黑暗模式快捷切换，这个icon 动画同样用了非线性。

iOS 13 静音开关动画

还有一直被诟病的音量和静音调节，终于得到解决。原先的大 Toast 提示会挡住当前内容，现在改到居顶显示，并加入物理衰减铃铛动画，极为真实。

总结

在 Apple 的界面视觉中，我们看到了各种隐喻和暗示，我们看到了非线性动画带来的流畅体验，我们看到了雕刻细节的过程。它是设计师不断追求的东西，最终给用户呈现的是额外礼遇般的的产品体验。

原文地址：洋爷（公众号）

作者：洋爷

1. 3D图形

许多设计师开始从静态图形转而使用3D动画，动态的图形可以承载更多信息，更加令人印象深刻。另外，3D图形最大的优势就在于能够不断突破想象，渲染出一个梦幻的世界。

2. 版式

你的电脑里是不是安装了上百款字体，然后再盯着屏幕选择一个最适合界面展示的字体。

其实只要一个不错的排版就能解决字体选择困难症了，而且可以清晰地展现文字信息。目前Dribbble网页设计中的热门趋势之一就是将多种字体、大小字号和不同的图案混合在一起，这样的页面更加有视觉冲击力。

此外，文字的排列方向也不局限于传统的水平排列，可以按照垂直、对角线方向排列，甚至是围绕特定的形状。这些独特的编排方式无疑可以增加布局的新颖程度，但是在使用时也要注意保证文字的可读性。

3. 纹理材质

虽然扁平化设计依然是占据主流，但Dribbble中另一个引人注目的趋势就是在网页或者UI界面中使用可以反映真实生活的纹理背景，比如细致的纸张纹理、柔软的织物纹理或者粗糙的木材纹理等。

这样的背景通常也会用在海报或者PPT的设计中，可以为设计作品增加质感，纹理能够简化现实生活中的视觉效果带入到平面设计中，快速建立和观众的视觉联系。类似的背景可以前往这边下载。

4. 全屏视频和图像

许多设计师都开始尝试使用全屏的图像或者视频作为网页的背景，可以在用户刚开始进行交互动作的短时间内传达出网页的主题和氛围。

当然了，全屏背景图像和视频的加载需要一定时间，想要使用这种方式还需要多方面考虑和测试，以便页面看起来更加自然。

5. 无图像网页

这就和上面所说的趋势相反了，Dribbble上也有一群设计师更加青睐不包含任何图像或者视频的页面。

这类网页或者交互页面通常是基于文字和字体的，借助字体的大小、衬线等特点来增加吸引力。流畅的交互动画也可以增强纯文字页面的表现力，从大量以图片为主的页面中脱颖而出。

6. 数字插画

插画在网页和手机UI中的使用非常广泛，比文字更有表现力，更清晰和时尚。一方面是因为插画可以出触发用户情绪，从线条、色彩再到面部表情和曲线，无一例外地都在诠释一个故事，营造某种氛围。

另一方面，数字插画对于交互动效来说十分方便。通过软件处理后，动起来的插画就具备了更多的可能性，在网页、手机UI、广告和视频中都可以使用，不同的玩法还可以带来全新的体验。

虽然我们介绍了6种在Dribbble上最流行的设计趋势，但这并不代表在实际工作中的应用就非常广泛，大多数时候设计师还是要根据产品属性和甲方需求来决定设计风格。

我们讨论这些流行趋势的意义在于突破设计原力，吸引设计师不断创作出新的表现形式。毕竟设计也是一个圈，谁又能知道下一个流行的设计趋势究竟会是什么呢？

来源：25xt

1 使用光栅来更好的设计图标

UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。 如果把它们做成高斯模糊效果，你就会发现它们具有相同的视觉重量，因为它们变成或多或少相同的斑点效果。

根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。

图标越紧凑，所需空间就越小。图标的边缘越锐利，细节越多，它们占据的画板空间就越多。

请注意，不要过分的依赖于网格来设计图标。它们是用来帮你而不是限制你的。如果一个图标的某些元素伸展出来更好看，那就顺其自然让它们伸出来。

2注意像素网格的重要性

在非视网膜屏幕上设计图形的时候，要特别遵循使用像素网格，并优先选用2像素的边框作为图标的线条。因为它可以让图标在这些显示屏上更加清晰。

如果为图标设置1像素的边框，这个时候，这些边框应该使用外部或内部的描边样式，但不建议是居中的。如下图，你可以看到他们的区别。

居中描边的一像素边框，虽然在放大它们的时候，它们看起来很清晰。但在100%比例大小显示的时候，它们会模糊掉。所以，慎用~下面两张图是图标在居中描边的时候所产生的效果：

根据像素的网格线来设置一条线的起点和终点，会让你的图标看起来更清晰。通常情况下，线的倾斜角度在45°，30°，60°的时候，清晰度会比一些不常见的角度效果会更好，比如13.7°，81°等等。所以，尽量避免用这样的数值。

3保持一定的图标细节

从一套图标中最复杂的那个开始来设计通常是最有效的，因为它会帮助我们定义相同的视觉重量，让所有的图标视觉重量保持一致。

当图标具有不同的细节层次时，更复杂的图标会吸引用户更多的注意力，而且视觉上看上去更重。

4控制最小的间隙尺寸

图标的相邻元素之间空间在整个图标集中不应太小或不一致。在任何情况下，都要定义最小间隙，以避免轮廓“粘滞”。比如下方的图标，太小的间隙，所产生的粘滞感要特别注意：

下面这个则是调整后的效果，是不是好多了？

对于线性图标来说，图标线段的最小间隙应该等于线的粗度。另外，线条应该明确的分开或者准确的闭合连接。下图是从错误的例子：

下面这个则是修改后的效果，是不是好多了？

5去除重复部分

在一套图标集中，你很可能会重复一些细节，比如下图这样。但是尽量不要这么做，让观众的注意力集中在不同的东西上。这就像数学中的分数简化一样。您看到的图形噪声越少，用户的理解就越清晰。

比如下方这个邮件收发主题的图标，当用户已经非常熟知自己的具体操作，比如收邮件，发邮件，回复等等。那就不要在设计图标的时候反复强调“信封”这个图形了。将它们简化，效果反而更好。

此规则还涉及图标周围的各种装饰，框架，背景。如果它们没有帮助帮助更好的阅读图标，就让它们更加简化一点比较好。

6保持图标风格统一

下面的两幅图可以很好的展示正确的和错误的例子，比如一套家具的图标，如果一个图标的绘制角度是斜45°，那么其他的图标也尽量保持这样的角度。而不能一个是正视，一个是斜视。看看下面两幅图，哪幅图是正确的呢？

相同的原理适用于线性图标和填充图标。 如果你把它们混为一谈，人们可能会认为它们具有不同的重要性或地位。 当然，除非你刻意想要那个。 例如，填充图标用于键命令，线图标用于其他命令。

当然，我们可以用填充图标表示当前态，线性图标代表非选中状态，这样也是不错的选择。

7基于二倍数的度量系统来设计

与基于十进制的大小调整相比，8像素网格和12列布局用于许多接口更灵活。 12可以分为2,3,4和6。因此，24或48像素图标区域已成为标准。 如果需要更大的尺寸，可以缩放这些图标。是时候补习下数学啦！

8保持轮廓的干净和准确

对于完美主义，设计师不能钻牛角尖，因为没有完美的事物。但是在你的最终设计稿里边，正确的，不扭曲的图标设计还是非常重要的。特别要注意，确保相邻的节点和相邻的元素是完全对齐或者没有间隙的。

一定要避免 “8.999 px”或“100.001 px”这样的尺寸。如果节点定位准确，图标边缘看起来很清晰。这个非常必要，保持整数吧！

9清理SVG图标中的垃圾代码

我们都知道SVG图标最终是一串代码。在Sketch中生成的SVG图标通常会包含很多不必要的冗余代码，比如组，颜色图层还有遮罩。下面的这个图标在Sketch中看起来很棒，但是…….

我们把Sketch生成的SVG图标在AI中打开的时候，你会发现它的图层非常混乱。这些混乱的图层都可以会让前端开发工程师在转换代码的时候出现问题。

我们可以把这些不必要的图层删除掉，这样看起来简洁多了：

10不要把本文当公式

当然，以上我们讨论的建议只是建议，他们不是刻板的公式。如果你知道自己在做什么，则可以仅仅把它们当作参考，而不一定要完全遵从它们。设计是灵活多变的，只要符合用户体验的规律，都可以被我们所用。

作者：Slava Shestopalov

原文：https://medium.muz.li/icon-set-3b4fc87dc6b5

翻译：静电

许多人对现代艺术的评价是这样的：“这不就是一团乱麻吗！”“一滩烂泥！”“复制粘贴而已，我也会。”（请自行脑补该类文字所描述的作品）。每当一个艺术家的作品在国际艺术品拍卖会上拍得天价时，总有几个围观的吃瓜群众会泼下几滴自信的冷水：“这是什么玩意儿！我也能做好不好！”
 

然而，有一幅图是这么机智地反驳的：

图1，QUOTE BY CRAIG DAMRAUER

作者默默地表示赞同…谁叫你想到的时候没有做呢？
 

然而，无论你是否能真的创作出与大师相同的作品，你都需要先对大师创作的动机有些了解。即使说有许多作品的确很容易复制（想想那些专业复制名画的油画村吧），如果不去思考作画背后的过程和背景的话，所作出来的画也只能是形似，达不到神似，更不用提自己创作了。这篇文章就是想讨论几点现代艺术家在创作过程中的思考，并扯一扯这些思考与用户界面设计的一些微妙的联系。
 

虽然从事着UI这个行业，作者的大学专业却是艺术史。经过了四年的专业洗（cui）礼（can），对从古至今的艺术的变革历程有了一个客观的、系统的了解。当看到吃瓜群众们从媒体引用有关艺术品的观点时，作者时不时要为他们擦一把冷汗。许多看上去好似极易上手、平庸无奇的作品实际上是艺术家做了无数次加减法的结果。

图2

当时作者的期末考试便是背画名，画家，及作画时间。想象一下，每日盯着几百幅画作背诵它们创作的时间、地点、创作媒介是件多么美（nao）好（can）的事情！所以在经历了这样的洗礼后，作者每接触一个与曾经背过的画有类似元素的图像时，脑中就如数据库般调出那幅画的图像记录。自然到好似自己已变成一个移动的艺术品数据库（真是感动不已）。
 

这种感觉作者称之为“回光返照”之感，即在有意识的情况下，你所接收到的信息令你回想到了过去所接触到的信息，下意识地与之形成对比。那么在UI的世界里，我们能否寻觅到现代艺术的影子呢？

一、格子，格子，格子

先看它：

图3，大众点评APP 主界面

在许多令作者印象深刻的UI风格中，最典型的就数已遍地开花的“方格子风格”，或“网格化风格”。比如上面大众点评的APP主界面，也如Windows Surface Pro的主屏界面：

图4 ，WINDOWS 移动端操作系统主界面

大家一定在想，作者的数据库此时调出的是哪位艺术家的作品？

？

？

？

？

？

？

？

？

？

？

答案是：

图5，COMPOSITION A, PIET MONDRIAN, 1923 (OIL ON CANVAS)

方格子的设计让作者分分钟联想到了蒙德里安啊！
 

网格化风格在近年来已被广泛地应用于许多主界面的设计当中，如上面截图的Windows Surface Pro和许多文件管理APP和游戏APP。对于Windows Surface Pro来说，这样的设计旨在将多样化的软件和文件快捷方式均匀且富有变化地排布在桌面上，它相比于传统的Windows桌面快捷方式更为生动，并可以缓解用户使用时的乏味感。有人这么总结过，“网格的最重要的用处是为一个构图中如何定位元素而建立一套规则。一个有效的网格不仅定义着它的度量，也为设计增添了韵律，。”（引用1）之所以作者想到了蒙德里安，不仅因为表面上可以看到的“网格”风，更在于它与网格化设计共同想体现的一种富有变化的韵律。下面这幅画的灵感取自于纽约曼哈顿的百老汇街道。

图6，PIET MONDRIAN. BROADWAY BOOGIE WOOGIE. 1942-43 (OIL ON CANVAS)

繁荣热闹的百老汇街道被蒙德里安用抽象化的方式浓缩进横竖交错的网格，而散布在网格上的较小的方格则代表了川流不息的车流和人群。在表现“欢腾、热闹”这一主题时，除了错落的网格，网格中填充的颜色同时起到了至关重要的作用。当作者看到Windows Surface Pro的主界面时，第一个感受到的也是界面的非静止性。当代表着不同意义的方格被同时呈现在一个界面、由直线相互连接着时，观者的目光不再是静定的，而是沿着各色格子的边框而不断跳跃。

二、极简的标志

在艺术不断被“现代化”的过程中，有一个非常关键的词汇，那就是“简化（simplify）”。几乎所有经典的，传统的画作中常见的特点，如精致的人像或物件轮廓、一丝不苟的质地描绘、对眼见之物准确完整的再现，都在艺术的现代化进程中，被一点一点地抹去了。简化有一个关键的目的：让观看者更加专注于剩下的部分。通过做减法，艺术家们逐渐学会了有目的性的只留下他们想呈现的部分。古典艺术很像是复刻了照片，每一个细节都完美展现，而现代艺术作品则是往截然相反的方向发展，尽可能地简化现实中的景象，浓缩成简化的形态。
 

请看Picasso不同时期的作品对比：

图7左，AUTOPORTRAIT, PABLO PICASSO, UNKNOWN DATE (OIL ON CANVAS)

图7右，AUTOPORTRAIT, PABLO PICASSO, 1907 (OIL ON CANVAS)

人们熟知的毕加索是右边这张图代表的风格，而孰不知风格大胆的毕加索也曾经做过循规蹈矩的好学生。同样是自画像，毕加索把自己化成了完全不同的样子。事实上，从写实到抽象的描绘方式的不同，是现代艺术相对于古典艺术的一大革新之处。
 

如果上面毕加索作品的对比不够深刻，请参考这组：

图8左，米老鼠, WALT DISNEY

图8右，DAMIEN HIRST – MICKEY (2014)

米老鼠竟还可以这样画？而如此几何化之后，我们竟然还能认得出它是什么。这与UI设计中的扁平化好像如出一辙？是的，无需完整的边描，仅仅使用基本的几何形状依然可以呈现物件最基本的结构，UI设计也是如此。
 

若要谈UI设计，就不得不谈icon这个不可或缺的基本元素，以及近年来被极度推崇的扁平化设计。而从拟物化到扁平化的设计发展，就如古典艺术至现代艺术的进程。过度的设计容易使人产生视觉审美疲劳。在电脑普及的短短几十年内，icon的风格已从最早的精致刻画逐渐发展到今日扁平化、极简化、几何化的风格。
 

iOS 6 和 iOS 7 的对比：

图9

阴影被弱化，纹路被舍去，字体纤细了，也不再有摄影精度的图片出现在icon内，取代而之的是平铺的色块和精简的几何形状。生活中的物件被不断抽象化，提取至几条简单的线条。icon的设计进化似乎借鉴了艺术的现代化，不再具象、立体。因而不得不说，不管是在艺术作品还是UI设计中，精简化都是一个必要的走势。

三、模糊的意义

最后要比较的一个UI效果是它：

图10，WINDOWS VISTA

没错，就是毛玻璃效果。对此类设计最早的接触来自于Windows vista的窗口栏。那时作者对印象派的了解并不深。而后正式学习了印象派的定义时，才意识到，如今在OS 8.0中随处可见的毛玻璃效果原来与印象派有着异曲同工之妙。请看莫奈的雾莲系列作品：

图11，CLAUDE MONET, WATER LILIES, CA. 1915-1926

被誉为最喜爱雾霾的艺术家，莫奈的创作特点是舍去对具象物体的描绘，而反过来通过描绘光影对物体的效果来呈现物体本身。他的目的是营造一种光影的氛围，而不是具体体现任何一个具体的物件。
 

莫奈这样描述他的“Water-Lilies”，’创造一种没有尽头的整体感，一种没有水平线或边岸的水平面’（引用2）。距离和角度已被摒弃，水好似无限地延伸到了我们整个的视觉中。
 

而作者转念一想，在UI中对毛玻璃的运用不亦如此吗？通过模糊背景、却保留背景的光影，使得原背景中较为锐化的颗粒得以模糊化，为浮于上层的功能性控件提供了极好的背景效果。它使窗口内的文字清晰呈现，却又维持了大环境的色泽、光影的流向，得以让我们的视觉沉浸在无限广阔的背景当中。试着把莫奈的作品置于常用的天气APP的背景，即是如下的效果：

图12，IOS UI

毛玻璃的作用效果与莫奈的光影处理如此相似，着实耐人寻味，让人不禁感叹到艺术的博大精深。

最后，写给吃瓜群众这些话：

笼统得说，设计和艺术的区别在于，设计更有目的性，它为特定的用户、需求而存在，而艺术更加自由、主观。尽管如此，在现代艺术的极简化道路中也不乏与UI设计思路相谋的地方。上面列举的只是作者发现的UI设计中与现代艺术的几处微妙的联系。抛开商业化、功能化、用户需求这些词语，设计和艺术的区别也许并没有那么明显。我们只是需要用一双开阔的眼睛去感受这些视觉的变化，这些不同时空里的匠心独运。
 

怎么样，是不是对艺术和设计的关系有了全新的认识？想不想尝试一下回光返照的美好感受？快去丰富下自己的数据库，开始背画吧。可以先从《教你看100幅世界名作》开始。来，作者悄悄告诉你一个快速背画的秘诀……：

…

…

…

…

…

…

…

…

那就是，

没有秘诀。

原文链接: dianrong

    UI的本意是用户界面，是英文User和interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互设计、界面设计。

1、用户研究

    用户研究包含两个方面：一是可用性工程学（usability Engineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；二是通过可用性工程学的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法（consumer insight）。所以有：Usability is all about making things easier to use so people can focus more on the work and less on the tools that help them do the work.

    用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等学科。用户研究技术是站在人文学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。

   用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。

    他是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准。

2、交互设计

    这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业，这样的交互使电脑成为让人恐惧的科技怪兽。于是我们把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。

3、界面设计

    在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

现在我们的软件产品存在的一些问题有技术方面的问题，但是更多的问题来源于各个部门、各个项目小组的之间的配合。我们现有的开发流程一般都是由市场部门提出客户需求，产品设计人员提出产品设计报告，开发部门设计开发计划，由各个小组分别开发一个模块，最后整合成为一个完整的软件产品。在这些流程之间UI设计应该参与那一个部分，每一个部分应该做到什么地步才可以使产品得到最好的UI设计效果呢？下面我们会在每一个部分具体分析。

首先分析一下现在的问题所在，在一些软件业比较发达的国家软件产品的UI设计过程贯穿了软件开发的自始至终，而且是必不可少的。而在中国产品UI设计并没有被广泛接受，就算是已经有了UI设计师的一些企业也没有对产品的UI有着足够的重视，一般来讲他们大都会把重点放在如何使用代码实现所需要的功能，在我看来这只是一个成功软件产品的一个部分。一个优秀软件产品的开发过程应该是由四个部分组成：
1.软件产品的设计（业务建模）
2.系统的设计（技术建模）
3.分单元的开发（把软件各个部分拆分分单元编写代码）
4.测试（分为单元测试、系统集成测试和产品功能测试），这些是由软件研发部门做的工作。
除去以上软件开发过程的四个部分还有用户需求和用户验收测试，这两个过程是由市场部门和产品用户一起完成。所以说用代码实现产品功能（coding过程）只是软件开发的一个步骤。现在我们回到UI设计的角度来看，作为UI设计人员我们需要全程参与到软件开发过程中，而不只是在某一个步骤参与，现在在大多数软件企业里UI设计师只是在产品的coding过程的时候才实质性的参与到软件开发过程里，而在其它几个步骤里只是参加甚至根本没有参加（在这里我要强调“参与”和“参加”是两个词的不同概念，“参与”指的是完全加入到开发行列开始进入设计阶段，而“参加”指的只是旁听会议或者提出一些简单的意见并没有开始进入设计阶段），这样就会大大降低软件产品的开发效率使开发成本成倍上升甚至导致整个产品的不成功！这并不是危言耸听，下面我们分析一下在一个软件产品的开发过程中UI设计应该怎么做、做到什么地步才能避免上边提到的那些问题？

下面我会根据软件开发的过程解释上边的问题，刚才我提过软件开发过程的几个步骤，
1.产品建模
2.技术建模
3.分模块开发
4.测试，那么我们也分为这四个部分进行讨论：

一.产品建模时期：

我们首先来了解一下“输入”和“输出”，在UI设计里是很重要的两个概念，经常会有人过来对我说“我们有一个软件产品需要美化一下”然后再也没有什么深入的解释了，仅仅这句话我的工作就要开始了，然而这个软件是给谁用的？是干什么的？我们却一无所知！成功的UI设计首先要有完整的“输入”，怎么才能叫做完整的“输入”呢？也就需要UI设计师从整个软件产品的策划阶段就开始介入，在产品用户（也就是客户）向市场部门或者产品部门提出产品需求的时候就要开始参与到产品策划开发过程中来，这一部分对于UI设计师而言就是第一个输入阶段，并且在这个阶段里UI设计师也需要提出一些对产品交互设计的意见，以便产品部门在做产品设计的时候更多的考虑到产品的交互性和功能的简单表现原则，有很多软件在设计阶段就被加入了许多并不是用的附加功能，其实一个好的软件设计就是要用最简单的结构实现用户的想法，一些可有可无的功能看上去很花哨往往会影响用户的判断能力，这些就是产品优化的一些概念了在此我需要简单的提一下如果想要深入研究可以看一些有关于产品优化的书籍甚至是心理学的书籍，有很多人认为软件的优化就是代码的优化（用最少的代码实现产品功能），在我看来这只是程序的优化是针对程序员而言的而不是整个软件产品的优化，产品优化包含了交互设计在现在的多数软件企业没有专门做这一部分的交互设计师所以往往这一部分被忽略，我认为这一部分应该又UI设计师承担起来，从文章的开头我就说过UI设计不只是图形界面的设计，就算是有企业里边有这样的优化人员或者交互设计师他们也要和UI设计师一起配合完成产品交互设计，作为UI设计师产品的交互性和易用性是在做设计的时候必须考虑的！
言归正传，产品设计人员经常不会过多考虑简单易用原理也就是产品出来用什么样的组合形式体现给用户，这也是UI设计师考虑最多的事情，所以UI设计师一定要在产品建模期间参与设计，给产品设计师一些意见。作为一名优秀的UI设计师我们还要在了解了产品的需求之后更深入了解这个产品的使用环境和用户群体的使用习惯。我们还需要了解市场上的同类软件产品的设计方案，研究他们的优缺点，以便在我们设计的时候吸取它们的长处避免它们的错误。在产品建模之后一般的都会由产品设计人员给客户做一次功能设计讲解，往往这样的讲解只是文字性质的需要让客户想象着理解，这就会造成很大的隐患有的客户根本无法理解你的讲解甚至对这样的讲解根本不认真听，因为他们根本不懂，在讨论过程中他们经常会同意产品设计人员的一切设计想法但是产品测试的时候他们又会提出种种不满意，我想这是一般的软件公司都会遇到的也是最最头疼的事情，但这并不能怪客户我说过客户只会关心视觉效果和软件的操作而并不会去关心我们是怎么实现这一切的。这种情况带来的直接后果就是产品的反复修改开发成本成倍上升，怎么避免呢？这就要靠UI设计师了，俗话说“眼见为实，耳听为虚”，所以需要UI设计师做出一个产品整体效果的demo。这个demo用图片的形式表现就可以，我们只需要将要体现的产品界面做一个拼凑就可以了，因为这并不是产品的最后样子，只是协助产品设计人员给客户讲解产品设计。产品建模时期UI设计师要了解客户的要求想法和产品设计人员对产品功能的要求深入了解产品，采集用户的使用需求、使用环境和使用习惯，了解市场同类产品的设计分析它们的优缺点。协助产品设计人员完成产品建模过程并制作产品展示demo模拟用户对主要功能的操作过程和界面呈现，生成交互原型（基本上产品的交互性和易用性问题都需要在产品建模的时期解决）。如果时间允许我们甚至可以提出一份“UI设计分析报告”，这份报告可以附在产品设计说明后，更有效的帮助客户了解我们的产品设计并且帮助开发人员更好的遵循UI的整体要求来完成开发工作。这个时期的关键是“交互设计”。

二.技术建模时期：

在这个时期作为UI设计师我们已经了解了软件产品的功能需求并且拿到了一份产品设计人员的产品设计说明，可以进入界面样式的设计过程了。这个时候我们应该考虑更多的应该是产品的整体风格和界面的设计，通常我们也会做出几份方案给客户选择。有些客户会要求产品遵循一个整体的VI设计标准，那么我们就需要按照一个整体的已定的风格去设计软件的界面，要与客户公司的企业形象吻合。在这个时期软件的UI设计进入到了美术设计阶段，我们需要制定整个软件的风格，塑造软件的整体形象，并且具体的描述每一个界面中的元素和布局、文字字体等信息。在这个阶段我也不应过多的说什么，主要是每个UI设计师各自发挥你们的艺术专长用最简洁、最漂亮的界面表现软件产品。需要注意的就是在我们设计整体风格的时候一定要深入了解这个产品的理念，看看它是干什么用的。不同的产品要有不同的风格，这里边有很多的细节注意，不同的产品、同类的产品不同的内容、不同的传播介质，这些都会决定UI设计的风格。1.不同的产品：比如一个游戏产品就需要将界面做的花哨一些或者用大的图片充斥；如果要是一个应用软件就需要突出使用方便和强大的功能设计要简洁。2.同类不同的内容：比如一个可爱的游戏产品（像是卡通类游戏）就需要将界面做的活泼生动可爱一点；如果是一个角色扮演的战斗类游戏（像是枪战闯关类游戏）就要做的酷一点深沉一些。3.不同的传播介质：我们要做的软件产品有的需要在网络上传播那么就需要我们考虑到网络速度的问题；有的就是利用光盘当作介质那么这样的软件就可以做一些比较花哨的效果。所以说不同的产品还需要单独考虑，这也需要UI设计师多多了解产品，保持与客户交流。还需要重点注意的就是我们在做图形化设计的过程中千万要贯彻在前一个阶段做好的交互设计，始终注意产品的交互性和易用性。在设计过程中我们一定要做出每种结构每一个步骤的效果图，不能只提供图标、按钮、背景图等图片，这样的话程序员根本不知道往那放这些东西，在这个时期我们就要最终确定软件界面的呈现形式。技术建模一般是由高级程序员完成的，他们会将整个软件开发分为一个一个功能模块，分配给一个一个的开发小组。但是这些负责技术建模的高级程序员考虑更多的往往是如何将整个设计用代码实现、怎么才能更有效的复用以前已有的模块等等，而不是软件是什么模样会有什么样的风格，所以作为UI设计师我们必须主动出击，多多和他们交流以保证我们的想法能够完整的实现，如果有技术实现的问题我们还要及时做出修改。有时候我们还需要根据客户或者产品的特定需求做一些延伸性的设计（也叫UI产品设计的外延），包括：软件的安装导航界面、产品的演示宣传动画、一些附带的桌面壁纸或者屏幕保护、代表软件的卡通小精灵、有时还会被要求设计软件的logo和广告banner等等。技术建模时期的关键是“风格和界面设计”。

三.分模块开发时期：

这个时期软件开发过程进入实现阶段，也是需要人力最多的时期，这样就会分散UI设计师的精力。软件会被切分为若干个小的模块进行代码编写，最后整合成一个完整的软件产品。对于一个程序员来讲他们大多根本不会考虑到产品应该是什么样子应该有什么整体风格，他们所考虑的只是如何用代码实现设计的要求，而且在现在的软件企业多都实现了模块的复用，这样会大大节约人力成本，那么程序员只是对原有模板进行修改使之适应新的软件产品，这样就会对UI设计的最终贯彻和实现带来很大的麻烦。做出的每一个模块虽然已经能够使用但是都是“各自为政”没有统一，因此我们也需要主动的协助和监督程序员完整的实现UI设计的要求，如果有技术无法实现的问题需要及时沟通改正设计方案。有的时候有些模块需要有单独的风格，比如一些已有的软件产品需要集合到某一个新的产品中去，这样就会加大了设计师的设计难度，我们必须要在保证产品整体风格不变的情况下将原有产品的设计风格集合进去，使之更加适合新的产品表现形式。如果我们仍旧保持原有产品的风格那么当各个模块集合起来之后往往会使新的产品感觉很松散，进入每一个功能都会觉得是另外一个软件，使人对软件的印象不深刻。在这个阶段我们还是要主动一些，跟进各个模块界面的实现。现在很多软件企业都存在很多UI设计师和程序员的协作问题，不是程序员做不到UI设计的要求，就是UI设计师坚持一些自己的想法不能改动，还有的时候经常会有人过来没头没尾的说帮我做点东西吧！当软件集成到一起再一看，就是很多不同风格的东西堆砌到一起，从头到尾都不舒服，领导或者客户看了以后极度不满狂批一阵，最后得出结果UI设计做的不到位。有人说UI设计师就要背着软件不成功的黑锅，因为人们根本看不见代码怎么写的，功能是怎么实现的，他们只知道对软件的样子和使用进行评论。让一个用户评论一个软件他们只会说这个软件好用看上去也不错挺漂亮的，但是做为一个普通用户决不会有人说这个软件程序写的不错。这么一看我们会联想到现在软件开发之中主要的冲突在UI设计师和程序员之间，其实这只是表面的表现形式。实质上这个现象体现了现在软件企业的一个通病就是这个开发组之间的协作关系混乱，程序员和UI设计师之间是平级协作关系，程序员是不会对产品负责的，这样看来UI设计师只应该听项目经理的，无论对设计做什么样的改动或者增添什么样的东西，都应该由开发项目经理和产品经理协商之后决定，只有他们可以对最终的产品负责。这样也可以避免很多程序员和UI设计师之间的争执和矛盾。但是现在大多说软件企业的产品经理和开发项目经理没有做到这一点，他们也根本不了解UI设计师和程序员的工作，也无法把握他们的工作量，这样无序的管理会造成很麻烦的后果。其实可以建立一些合理的流程管理制度，就算企业没有作为UI设计师也可以自己起草一份适合自己和企业的“UI设计需求申请单”，里边应该列出我们需要的“输入”内容、工作时间、最终的“输出”结果等等栏目（可以自己根据要求灵活决定）。这样形成一个有参与人、有依据、有存底的工作流程，出现问题或者争执的时候我们有据可依，这只是一个习惯性的东西因不同的企业而议不一定都要建立需求单。在分模块开发时期UI设计师应该做的是，在模块开发的前期做出产品每个模块的效果demo（可以用图片的形式表现）要求程序员按照demo的样式进行模块开发，协助和监督程序员严格按照UI设计要求生成最终产品，把握各个模块的统一，经常了解程序员的工作进展及时对不合理或者难以实现的设计进行讨论设计出新的方案。分模块开发时期的关键是“协助和监督程序员生成最终产品”。

四.测试时期的输入和输出：

软件产品的测试会分为三个测试阶段，第一个是分模块开发完成之后每一个模块进行的单元测试；第二个是将各个单元集成为一个整体的产品进行集成测试；第三个就是整个产品在交付使用前进行的整体测试。在测试过程中UI设计师的任务相对会轻松一些，我们只需要跟着测试人员走几遍流程，如果在其中发现没有按照UI设计要求的部分及时要求改正就好了。我们还会经常遇到客户在测试过程中突然觉得那里不合适需要修改，这也是最最头疼的事情了，有的时候他们说的并不一定对，只要我们设计的每一个步骤都有一定的道理能够说服他们就一切ok了。如果他们执意要修改设计方案，那么我们没办法只能按照客户需求修改。但是如果前边按照本文的流程走下来我想这样的可能性不大就算是修改也不会是大动干戈。在修改过程中我们还是需要先做出效果图，让客户确定再具体实施，这样也会避免很多麻烦的。测试时期的关键是“检查整个产品发现问题及时改正”。

如今软件的越来越多的考虑到人的因素，“以人为本”的设计理念贯穿了整个软件产品开发的始终，因此软件产品的UI设计过程最重要的两个部分就是行为和构造，也就是交互设计和界面设计。上面我们按照软件开发的四个阶段，逐个的分析了每个时期UI设计的任务。由此我们可以看出UI设计并不完全是一个美术设计的过程，还有很重要的一个部分就是交互性和易用性的设计。我们要时刻把自己放在软件的用户角度来考虑，设计出最简单易用，界面友好的软件产品。