[思考]内容即界面-去修饰的尝试与漫谈

打开一些设计作品的网站，近几年的快速发展让人感慨，无数的设计者们，通过色彩、图形、线条、版式、动效，让当下的数字产品异彩纷呈，这些贴心而又让人惊喜的细节无疑会给产品加分不少。

在这些设计之中，我总是会带上一些个人喜好上的倾向，希望能找到一种更为内容服务，通过界面元素之间的潜在关联性来表达，呈现的一种设计形态。我们无需搭建一个过于花哨的框架，内容本身就是最值得去阅读的。

现在来回忆一下，当前有多少种页面的表现形式？

-阴影，可以通过用来表现界面中元素的优先级

-分割线，可以用来划分界面内元素之间的相关性

-线框，可以用来对界面中部分元素的整合

-明度，通过调整页面中不同部分的层级和有效区域

这些元素的使用，帮助我们整理页面的浏览结构，对功能进行分区，够用，而且能够用得很好；那么是不是还能够再去简化，通过更少的修饰来梳理清晰的结构呢？

SMASHING magazine

这是我非常喜欢的一个网站，干货很多，它在页面信息的组织上也使用了很多方法，通过背景明度和阴影的分层，区分主要的阅读区域和广告信息，通过线条来划分标题和内容，字体高亮和加粗，来表现可响应和着重的内容。但是纷杂的内容也许在刚进来的时候不够专注。

我们来看看早期的计算机界面是什么样：

（Gentoo Linux中的Bash命令行界面）

受限于当时的软硬件环境，命令行界面中更多的表现需求，通过内容来呈现。字体的颜色，间距，下划线，对齐方式等都是表现的方法，意图将信息清晰地组织起来。这样的内容看起来也很清晰，也很容易专注，虽然在图形化普及后使用场景减少，但仍在使用。

就像是建筑中的粗野主义一样，强调自身元素的特性，它的质感和比例，自洽地融入到界面中去。

文字，图片，它们自身包含的属性就很丰富了，它们占据的大小尺寸，颜色，倾斜，词意，延伸出的版式设计和书法都能为人欣赏。

粗野主义建筑-马赛公寓，未经粉饰的混凝土立面

印刷品版式设计，通过文字来表现层级和整体感

当下的很多设计，也在体现元素本身的属性，减少外在修饰，着重于内容。Medium就是一个正面的案例，在首页整个的flow中，仅在顶部和底部使用了分割线划分与故事无关的信息，导航的浮动层常驻在页面顶部，使用了阴影体验层级。然后所有的故事内容，都由图片，标题，摘要，作者，和发布日期组成。通过1／3和2/3的文章组成有限的信息流，响应式布局也有良好的适应性，所见都是故事，对一些可操作的部分进行了着色，看起来纯粹而又不会让人觉得松散。

对内容的设计，让内容成为主角

在移动端同样出众的是airbnb的设计，根据内容的不同，airbnb对图片也进行了相应的裁剪，长矩形的体验，宽矩形的房源，正方形的攻略，仍是内容组成了页面上的全部信息。想想看，为了让信息能够看起来像一个整体，有很多产品会运用上卡片，运用上线框，但是这里都没有，你所见的都是内容，但是并没有让你在相近性上产生误解，你仍然知道哪一个标题对应的是哪一张图片，你仍会去尝试点击，滑动，而不是以为它们是静态的。内容本身就有这样的亲近性。

干净，信赖的界面

当我开始去想，最早这样一种去修饰的风格是从哪兴起的呢？

Windows Phone

这是一个可能陌生而又尴尬的存在，1%的荣耀用户。

在一个iOS和Android两家design style统治的移动时代，UWP的设计少有人问津，占据很大区域却无用的title，当时看起来更是怪异，包括导航的字号同样如此，这琢磨不透的模数让人很难去理解UWP的设计。但是现在来看，UWP的设计是一直在秉承着内容即界面的原则，脱胎于印刷品的Metro Design更加现代。而在新的Apple music中，也出现了大字号，加粗的title，弱修饰元素的界面似乎也在Apple的设计下发展。

少有人问津的UWP，内容优先，去修饰的界面看起来依然现代

更大的title，文字化操作，编辑不是一个图标而是文字

因为对这类设计的喜爱，开始去尝试发现这些设计上的规律，在以后可能的设计中去实践。

文字的节奏感

在删减修饰元素之后，文字成为了页面中主要的表现元素，对文字的字号作出一个统一的应用规范限定，可以建立起浏览页面时的一种“节奏感”。从内容浏览的先后顺序而来，更大号，色值更深的文字会优先的被注意到，那些小，颜色偏浅的文字如果不有意去阅读，也很容易忽略。有节奏的文字可以帮助用户在浏览时更加轻松，减少去对内容的筛分，降低疲劳感。

文字按钮

对按钮的去修饰化，除了保留主要按钮的样式，一些次级的功能，例如编辑，页面入口等，都可以通过对应主题色高亮的方式去表现，也可以辅以箭头等符号元素增加可操作性的暗示。

对齐

减少了线框和分割线，强对齐属性来体现内容的潜在边界，不会让内容看起来凌乱或者无序。

间距

间距和对齐一起构成了页面内容组合的亲近性。亲近疏远，这是人们的一个客观认识，在这一块的应用，更多的建议参考8pt网格设计原则，确立一个页面模数，例如8pt，再根据内容各个部分的亲近性，去对模数进行放大缩小，来进行一个统一的划分。

页面承载量

并不是减少了线条和网格就能让内容更好的表达，在一屏页面上承载的内容数量同样需要去考虑，值得关注的信息是少数的，用户愿意去关注的信息也是少数的。这里举一个同样是非常喜欢的网站，但是成为了反面案例：

B站在对视频内容的组织上，也没有采用分割线和线框，但是在更多曝光量下，页面承载的信息过多，还是增加了页面的负担，这可能也是综合了商业层面的考虑，因为商业的考量，修饰元素的存在也是十分必要。

动效与响应

大家现在普遍都认可动效的价值，灵活有趣的动效可以带来愉悦感，提升用户对产品的好感。在更少修饰元素的界面中，动效的价值更为明显;动效直观的表现了页面前后关系，动效是有表现力的，可以参考office fabric中对动画的表达，https://dev.office.com/fabric#animations。在日常对文本或内容的接触中，它们大多数是不可交互或者弱交互性的，在去修饰之后，文字和内容成为了主角，文字动作的响应，关系到是否能够引起或者维持用户的操作行为，缺乏操作感的交互会让用户失去兴趣，特别是失去了装饰元素的点缀，你需要动画作为内容之外的点缀。

在谈一些自己对big title的看法，会有人认为，这么大一个不可操作的title放在顶部，占据了重要的位置却并没有额外的操作，是不是多余？

对于这样一种方式，我也是惶恐，生怕自己走进了虚饰主义的漩涡，流于形式，只能投锅给UWP，说这是微软的时尚。但是再仔细去想想，也能找到一些内在的逻辑。

我们把每个网页比作是繁华街道上的一家家店铺，每一家店铺都会在门口挂上招牌或者门牌，这是你在进入店之前就会了解到的信息，帮助辨识出你现在是在哪家店门口，有没有走错。那么这个title比作门牌就好了吗？它可能还会扮演一个门帘或者屏风的作用，不至于在你刚进入到网页，就给你填塞满页面里的信息，大量的信息会带来压迫感和无所适从，你总需要一个过渡，抬起门帘，绕过屏风，滑一下滚轮查看下一屏页面内容。

好像还是有些牵强附会 ：|

去修饰后的局限

形式追随于结构，结构服务于功能，去修饰的页面虽然会在一些功能单一，内容优先的产品中去实践，但是在工具性强的产品，和业务逻辑复杂，操作繁琐的产品上并不适用。同样缺少功能上的互动，用户关注的并不是看起来多么简单，而是期望于每一步流畅的操作，那么势必就需要布满足够丰富的控制台面，那么装饰元素就会在视觉区分上的作用就会很大。

AutoCAD界面上丰富的视觉和修饰元素，即使操作很多，仍然能帮助找出需要的功能