手把手教你玩儿转UI—旅游类app界面设计（无边框设计）
手把手教你玩儿转UI—旅游类app界面设计（无边框设计）
不知道你们有没有注意过App store 下载界面的动效设计，从下图界面1到界面2的，乍一看是图片放大到了整个屏幕，增加了下方的文字，翻来覆去研究了好久才发现并不简单，才发现是界面1有蒙版效果，只显示出了一部分效果，界面2只是慢慢淡化了图层蒙版，而且最最最重要的是，文字是从图片图层的下一图层蒙版底下出现，消失的时候也是，都收在图片底下，给人感觉就是这手机屏幕是一个水面，你点一下，类似于波纹扩散的原理，一下子扩展到了整个页面，让我瞬间觉得：哇塞，好酷，怎么想出来的。更别说它很逆天的阴影效果和圆角设计了。真的，一直以来都对苹果有一种又爱又气又恨的感觉，不管是设计界面也好，各种小操作也好，总会让我发出由衷的感叹：我去，还可以这样。包括它的震动反馈，给人一种虽然没啥卵用，但就是感觉很高大上的样子。
从上面的界面来看，卡片化、无边界设计差不多已经是大势所趋，之前的界面边界都会有90像素的安全距离，从目前的情形来看无边界界面才是以后的发展趋势，毕竟手机更新迭代的速度很快，全面屏手机的高速发展，要是你设计的界面还停留在只能适配之前的手机界面，那么它会在全面屏手机上还留有边缘空白区域，不得不说这样还是蛮很可惜的，用户体验也相应的受到影响。
|美团| |穿衣助手|的登录界面
以前总是会注意边界安全距离，好像目前比较流行的是无边框设计，在比较干净的界面上，通过距离和元素大小的分割，主题和副标题的展现，也可以很好的展现页面信息重点，下图个人中心界面，包括很多功能，文字和icon居多，如果全都用边框框起来的话其实很影响页面内容的展现，所以上面两个页面基本上看不到有边框的存在，但是有一种隐形的边界感。
|美团| |穿衣助手|的发现页
无框界面趋势下，淡化边框淡化，用户甚至不会察觉，他们只会关心自己来这个界面的目的，搜寻信息的主要功能，有很好的搜索功能的话，卡片的概念被淡化，显示屏的尺寸越来越多，卡片将内容分割成固定的小区块，可以适配各种屏幕尺寸，需要的时候灵活删减卡片，灵活控制页面的内容和种类，无框界面和卡片化并不相同，将内容划分成小区块的概念依然在，只不过卡片变成透明，不需要看到卡片的样子。
无边框设计的优势：
掌控用户的注意力
|美团| 白色卡片和灰色背景，第一眼看上去一定会注意到的是边线而不是内容，对比明显，而且边框的尺寸很大，内容挤成一团，边框之间的空白处反而非常吸引注意力，造成了很不舒服的感觉；
|穿衣助手| 没有边框，只有内容，页面对于用户最重要的莫过于吸引注意力了，一个产品想要提供的内容很多，就可以通过对边框的淡化来将用户的注意力集中到内容上；
减少设计束缚
一旦页面上有一个设计元素有边框，相应的元素也需要增加边框效果，也就是说制作者对于可掌控的变化并不多，想象一下你要是被关在只能容纳你自己的小屋子里，能想到的活动或者能做到的事情也并不是很多吧；
增加页面的利用率
要是有边框的话，需要设置内边距和外边距的距离，这就多了很多并不能利用的空间，本来一个手机的界面就够小，要是你还无端端用边框浪费掉空间的话，可就太傻了，而相反的，用距离分割内容区块，在有效空间里摆放更多内容，提升空间利用率，才是真正为用户体验做贡献啊；
减少工作量 提升画图效率
边框设计会有加圆角或者加边线的操作，要是你想改变其中一个元素的色值、大小，相应的元素也必须做出相应的改变，这无疑是一个庞大的工程，要是你的产品经理前期不是很确定最后效果到底要什么样的话，你可能就得来来回回调整无数遍，想想就酸爽，所以无边框设计无疑是你最好的选择；
以下是尝试用无边框手法做出来的旅游类App界面线框图：
|旅游界面线框图|
附件是线框图源文件，有需要的可以下载。
