-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy path1094 - 2014-06-11 17:40:10 +0800 - 无边框设计_设计词典_好奇心日报.html
35 lines (31 loc) · 6.58 KB
/
1094 - 2014-06-11 17:40:10 +0800 - 无边框设计_设计词典_好奇心日报.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<h1>无边框设计_设计词典_好奇心日报
</h1><p><img src="http://img.qdaily.com/uploads/20160606143401x8PF9Dz3jNByM16Z.jpeg-w600"></p><div class="article-detail-bd"><div class="author-share clearfix"> <div class="author"> <a rel="nofollow" href="javascript:void(0)" class="avatar x32 circle"><img src="http://img.qdaily.com/user/face/20181127085847qnRW2AtjLr1y6u8c.jpg?imageMogr2/auto-orient/thumbnail/!80x80r/gravity/Center/crop/80x80/ignore-error/1"/> </a> <span class="name">李如一</span><span class="date smart-date" data-origindate="2014-06-11 17:40:10 +0800"/><script language="JavaScript" type="text/javascript"><![CDATA[var o="div",a=" style='disp",b="lay:",c="none'";document.write("<"+o+a+b+c+">")]]></script><span class="date">2014-06-11 17:40:10</span><script language="JavaScript" type="text/javascript"><![CDATA[var o="div";document.write("</"+o+">")]]></script></div> <div class="com-share-favor" data-id="1094" data-title="《无边框设计》，来自@好奇心日报" data-pic="http://img.qdaily.com/article/article_show/20160606143402PAqvCTM4h8osLDVm.jpg?imageMogr2/auto-orient/thumbnail/!640x380r/gravity/Center/crop/640x380/ignore-error/1" data-url="http://www.qdaily.com/articles/1094" data-weiboappkey="2462590045"><div class="share-favor-bd clearfix"><a rel="nofollow" data-ga-event="pc:share:weixin" href="javascript:void(0)" class="share iconfont icon-weixin"/><a rel="nofollow" data-ga-event="pc:share:weibo" href="http://service.weibo.com/share/share.php" class="share iconfont icon-weibo"/><a rel="nofollow" data-ga-event="pc:share:tengxunweixin" href="http://share.v.t.qq.com/index.php" class="share iconfont icon-tengxunweibo"/><a rel="nofollow" data-ga-event="pc:share:kongjian" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey" class="share iconfont icon-kongjian"/><a rel="nofollow" data-ga-event="pc:share:douban" href="http://www.douban.com/share/service" class="share iconfont icon-douban"/><a rel="nofollow" data-ga-event="pc:share:linkedin" href="http://www.linkedin.com/shareArticle" class="share iconfont icon-linkedin"/> <a rel="nofollow" data-ga-event="pc:favor:aritcle" href="#" class="favor iconfont icon-heart"><span class="num smart-count" data-origincount="10"/></a> </div></div> </div> <p class="excerpt"/> <div class="detail">
<p class="p1">
「无边框设计」并不是专业名词，而是这几年流行的一种设计趋势，西人谓之曰「edge-to-edge design」。这种一眼望去就觉得大气的设计风格直到最近才流行，是颇为匪夷所思的事：假如我要在网页上放一张「大图」，我理应拥有「让这张图片延伸到浏览器边框以外」的设计自由。不过由于种种原因，这种处理方法在数字内容设计领域一直较为罕见。
</p>
<p class="p1">
无边框设计的本质是用屏幕上尽可能多的像素来显示内容本身，而非装载内容的容器。有时，人们恨不得连实体边框都尽可能地去除。在 iOS 6 甚至 iOS 5 的时代，小道消息站就爆料说下一代 iPhone 将采用无边框设计──左右两边框消失，正面看到的只有一块纯粹的玻璃。虽然这样的智能手机至今尚未出现，但把边框不断做窄已经成了不少手机厂商的设计追求与营销卖点。
</p>
<p class="p1">
iOS 7 是无边框设计得以流行的功臣。在 iOS 7 版的<a href="https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/index.html">《人机介面则例》</a>（Human Interface Guidelines）里，苹果把「尊重内容」立为首要设计原则。而尊重内容的具体表现之一，就是尽量减少边框的存在：
</p>
<p class="p2">
请善用整块屏幕，慎用内容卡片和视觉边框，让内容填充至屏幕的边缘。
</p>
<p class="p1">
苹果给出的天气 app 截图对比可谓一目了然。看过 iOS 7 版的天气之后，你会好奇当年 iOS 6 的设计者为什么要把内容塞入一张虚拟卡片里，并在上下左右留出那看似多余的黑边。
</p>
<p class="p1">
<img alt="" data-ratio="0.85323383" data-format="jpeg" class="lazyload" src="http://img.qdaily.com/uploads/20160606143401x8PF9Dz3jNByM16Z.jpeg-w600"/><br/>
iOS 7 与 iOS 6 中的天气 app 截图对比。左为 iOS 7。
</p>
<p class="p1">
iOS 7 不是第一个倡导无边框设计的作品，但 iPhone 和 iPad 的普及无疑令它成为最强势的一个。在它之前，第三方 to-do 软件 <a href="http://realmacsoftware.com/clear">Clear</a> 和电子书软件 <a href="http://pushpoppress.com/ourchoice/"><em>Our Choice</em></a> 都是无边框设计的典型例子。RSS 阅读器 <a href="http://reederapp.com/">Reeder</a> 和 iOS 杂志 <a href="http://the-magazine.org/"><em>The Magazine</em></a> 较早地将图片的左右边界延伸到了屏幕边缘，而最近开始被主流世界注意到的新媒体网站 <a href="http://medium.com/">Medium</a>，则把「半屏无边框大图美学」用到了极致。
</p>
<p class="p1">
无边框设计并非孤立的潮流，它是数字设计整体演化趋势的一部分。随着软件和数字媒体对三次元世界的渗透逐渐加深，人们对于软件的操作模式日渐熟悉。很多时候，我们已经不需要设计师通过形如真实物体的控件来手把手带领我们在软件操作流程的迷宫中穿梭。另一方面，没有实体世界的包袱的设计师将屏幕上的像素视为第一设计阵地，他们不需要甚至不屑于在设计软件和数字内容时反复指涉实体世界。延伸到边缘的大图只是潮流和表象，把内容从虚拟容器（例如上引《人机介面则例》中提到的内容卡片和视觉边框）中解放出来，让它们成为数字世界的一等公民，才是无边框设计背后的深刻信念。
</p>
<p class="p1">
<img alt="" data-ratio="0.59375" data-format="png" class="lazyload" src="http://img.qdaily.com/uploads/201606061434011PnmgpUjcCB2kFD8.png-w600"/>
</p>
<div class="embed-mask"><div class="embed-bd"><span class="triangle"/><div class="play"/></div><div class="embed-control"><span class="player"/><div class="bar"><span/></div><span class="sound iconfont icon-shengyin"/></div></div><p><img data-format="jpg" data-ratio="0.456667" class="lazyload lazylood" src="http://img.qdaily.com/uploads/20160725204735MvuXsg6iz3bhj7yi.jpg-w600" alt=""/></p><p class="lazylood">喜欢这篇文章？去 App 商店搜 <a href="http://m.qdaily.com/mobile/downloads/empty/2">好奇心日报</a> ，每天看点不一样的。</p></div></div>