cover

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

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

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

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

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

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

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

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

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中对动画的表达,Office UI fabric。在日常对文本或内容的接触中,它们大多数是不可交互或者弱交互性的,在去修饰之后,文字和内容成为了主角,文字动作的响应,关系到是否能够引起或者维持用户的操作行为,缺乏操作感的交互会让用户失去兴趣,特别是失去了装饰元素的点缀,你需要动画作为内容之外的点缀。

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

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

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

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

去修饰后的局限

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

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

扫描二维码,分享此文章

ShuSQ's Picture
ShuSQ