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

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

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

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

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

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

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

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

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

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界面上丰富的视觉和修饰元素,即使操作很多,仍然能帮助找出需要的功能
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,429评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 从 Odds 角度理解 Logistic Regression 模型的参数
    wumingkeqi阅读 836评论 0 0
  • 1、二进制转十六进制 四位二进制表示一位十六进制,先把四位二进制转成十进制,再转成十六进制eg:10110110=...
    陈志龙阅读 403评论 0 0
  • 很多我们以为一辈子都不会忘记的事情,就在我们念念不忘的日子里,被我们遗忘了——————————————— 初三的那...
    秋果阅读 1,009评论 0 2