什么是屏幕
最近读了设计师Frank Chimero的两篇文章 What screens want 和 The webs grain 非常喜欢，文章很长，但却很有意思，讨论了平时设计的时候很少被提起的设计介质-屏幕。
什么是屏幕
很有趣的是，在过去很长一段学习 UI 的过程中，我都没有仔细想过是什么组成了最终的UI界面。
可能从最本质的角度来说，是 HTML/CSS 帮助你实现了设计的展示， Javascript 帮助你实现的基本的交互。
但是不管是代码也好，最后的 UI 视觉呈现也好，没有屏幕，就无法向用户展现。用户通过屏幕来完成一切的输入输出。
相较于平面设计而言，纸张是最终的视觉呈现载体，那么对于 UI 设计来说，屏幕就是视觉呈现的载体。
因此，了解屏幕这个东西，就变得更加显而易见了。但似乎这个问题，很少有被讨论起。
在我用 Sketch 做设计的时候，通常直接快捷键a，然后选择一块画布大小，就画起来，似乎这样的步骤同传统的在 PS 里的画布里做平面设计的过程没什么两样，一个可能是在画布上堆放各种控件，一个则可能在画布上随心所欲。
但问题是这两者毕竟是有本质的区别的，纸张是静态的，而屏幕则是动态的，这两者本身有拥有着不一样的特质。因此在做设计的时候， 我们自然而然的选择一块画布合理摆布控件，得到的往往可能也是静态的结果，这可能就是为什么prototype为什么这么重要，它将制图软件做不到的事情，予以完善，也就是让静态的画布动起来。
屏幕的纹理 (Grain)
很自然的，我们都认为，纸张各有其纹理，而屏幕呢，似乎一成不变，只是上面展示的内容不一样。那屏幕的纹理是什么呢。
让我们来回顾一下屏幕的诞生。从最早的照片开始，将一系列连着拍摄的照片连在一起，快速翻动，就变成了动态的照片，这可能就是GIF的雏形吧。 若是要展现这种动态图片，则就变成了屏幕。
因此，就如之前所说，屏幕是动态的，是不断变化的(flux)。 我们用动效来表达界面之间元素的关系。
而作为设计师，不仅要思考这个东西看起来会是怎样的，也要思考用户同界面生交互之后的反应。
无边界（Edgelessness)
让我们先试着不将屏幕上的网页视为画布，而把他视为一种我们用来搭建的材料。
摄影师David Hockney 用照片做了个实验，将不同的但有相关性的照片平凑成同一个画面，也就是将画面上的局部元素拍下，然后通过空间的方式拼接。拼接方式有两种，一种是网格（Grid）， 一种是重叠（overlaid）。
这一种拼图的方式，相比很多完整性的图片，这种拼图的画是一些没有边界的的独立细小的元素组成的。通过这些组合来获取整体的概念。
也就是说，完整性图片是有控制性 (control)，统一性(uniform), 而拼图则是发现性(discovery)和多样性（multiplicity)。
因此屏幕就好似这种Hockney的这种画，它是无边界性的（edgelessness)。
无边界就是屏幕上网页的结构，是由一系列单个的页面（或者说我们设计时的画布）组成的，因此，页面可以永远的不断的增加分支（branch）。
通过这些不同的分支，我们学会如何将实物在空间中关联起来。
有一个很好的例子是，响应式设计(responsive design) ， 网页端，手机端，pad端的设计都有着细小的差别，根据屏幕（画布/网页）的大小，在手机端我们可能要将网页端一屏上的内容分成好几屏或好几页，手机屏幕的无边界性也就更明显了。
而在写网页前段代码的时候我们可能会通过在CSS添加media queries的break points, 让浏览器尺寸在变化的时候，展示的内容更加合理布局。在这里，可能叫做breakpoint （断点）并不是最合适的，因为breakpoint的字面意思让人感觉就把页面切断分割了，而页面之间是有连贯性的，因此改成reassembly（关联性）会更加合适。
再来反观我们在做设计的时候，都是先建一个画布，再在上面添加控件，图片和文字，我们是否可以考虑将步骤反过来，先从一个单个元素开始，在扩展到将各个元素联系起来，合理分布。 就像是Hockney的画一样。
为屏幕而设计
就上述提到的屏幕的两个特质而言，不断变化和无便捷性，我们在设计的时候，不能仅仅因为在设计软件里设置了一个静态的画布，就将UI设计当做是静态的。
再来，纵观UI设计的历史，最初专家通过用command line直接同电脑对话，但是为了将电脑普及到千家万户，产生了可视化的电脑语言，GUI的诞生就是为了在计算机和用户之间建立起一座桥梁。 而现在之所以很多人觉得UI入门门槛低，很大程度上是因为，UI设计其实已经发展出了一套自己的语言 —— UI控件（下拉选项，汉堡包菜单， 单选框，复选框，输入框，表格 等等），用上这些标准的控件外带照着ios GUI 或者 Material Design 的guidelines来一个中规中矩的设计也不会出很大的错误。
但是很多的设计只是无聊的控件堆放，过多的交互（interaction）对于大多数获取信息型（information software) 的软件来说是不必要的。
因为用户用这些软件是来获取信息的不是手动来回答一些无聊问题，再等待你给出反馈的。 减少不必要的交互，给到用户最直观最需要的可视化信息，应该是获取信息型软件应该做的。
总而言之，为屏幕设计的时候，我们不能将画布就视为单一的画布，画布上的每一个控件，每一个标签(label)都可能是动态的，不管是电脑做出的变化，还是用户给到的变化。
就像我们在做纸媒设计的时候可能会考虑到纸张的材质一样，杂志的纸张和普通书本的纸张介质是不一样的，印刷出来后给人的感官也是不一样的。在做UI的时候，也要考虑到屏幕的特质，从这个高度去思考去设计，才能将设计和你的材质结合的更加完美。
最后，再分享 What screens want 里作者提到的一个可能有一点点抽象的观点。
人们为了便于了解世界的构造就发明了地图，但是大部分人想到的地图都是一个模式的，但是地图可以是各种各样的，上下颠倒的，是谁定义了南极就是南不是东。
抽象化给了你一种固定的复杂现实的表现。如果你内化了这种抽象化，那你就会用这种方式来思考，就好像，你觉得地图上每个国家的大小就是其真实的大小比例一样。 而实际上你误解了你周围的世界。因为我们看到的地图是扭曲的，因为光就非洲而言，地图上的非洲，看上去好像就比中国大一点，但实际上，非洲的面积比西欧、美国、阿根廷、印度、中国加起来都要大。
这就像是，我们都有自己对网络的抽象理解。 这往往远大于界面，应用，网站等等。 但我们用一些抽象的概念去定义了他，比如商业网站。
这样的定义，让我们大部分人表现的似乎我们已经知道了所有。
我们创造了科技，科技也塑造了我们，我们创造的这种抽象化有扭曲，它伤害并且削弱了我们。也就是说我们需要更多的“地图”。
同地图一样的，科技，互联网也有许多种地图。针对不同的目标我们创造新的网络视图。
只要我们想要，我们就可以重塑我们所看到的。
因此，不要固化思维，互联网有各式各样的形状，就像地图我们虽然创造了地图，但地图也反过来制约了我们思想，科技互联网也是，我们发明了他们，但是反过来他们也制约着我们，我们要针对不同的目标去找到合适的视角重塑。
