A5创业网

项目发布

申请报道

扫一扫，联系编辑获得审核机会

符合以下要求，获得报道机会

1. 新公司求报道

2. 好项目求报道

3. 服务商求报道

4. 投资融资爆料

中介交易 网站交易 域名交易 公众号

登录 注册

会员中心 退出

微信

微博

手机版

网站导航

找项目 找服务

客服热线：400-995-7855

创业

创业动态 投资融资 创业故事 众创空间

财税

工商注册 公司财税 资质办理

产权

商标 版权 专利

科技

互联网 IT业界 移动 八卦休闲

站长

网站运营 建站经验 SEO 交互设计 好站推荐

营销

营销策划 网络推广 移动营销

电商

电商资讯 电商分析 移动电商

IDC

IDC报告 云计算 服务器 安全 CDN

更多

自媒体 公众号 小程序 产品 域名 会议 数码 游戏 系统 技术

首页

创业

创业项目

科技

站长

产品

营销

电商

域名

会议

A5交易

A5营销

创业服务

当前位置：首页 > 站长 > 交互设计 > 正文 品牌

标签

专题

软文

三要素教你设计流行 大白风格UI 2017-12-22 14:23 来源：UI中国 我来投稿 我要评论

创业项目优选 好项目来A5招商 ，点击入驻！

掌握简单三步，教你设计出2017最流行又最有B格的“大白UI风格”

失踪人口暂时回归~ 今天教一个如何跟着苹果爸爸走，设计出2017最流行最省事还最有B格的UI风格，这就是：“大白风格”(名字瞎起的，大家有没有想起那个又胖又可爱的大白机器人呢)快来跟着我学习如何设计这种风格的技巧吧 (*^__^*))

上面这几个图分别是苹果应用商店和Airbnb APP的部分UI界面截图，看完后大家注意到了共同点没有?没错，他们统一的特点就是文字大，留白多，看着很舒服下面再放几个用了大白风格设计的APP：

这就是本教程要分享给大家的最近今年最流行的：“大白风格”。相信大家早就见到过类似这些风格的APP了，但你们真的尝试设计过吗?下面打开PS来随着我开始设计吧，首先拿鄙人最近的一个羞羞案例来做示范(因为是示例，我把界面风格设计的更简单了些)：

第一要素：大字号大家PS新建个750*1334宽高的标准iPhone6分辨率画布，然后输入标题文字，设字号：90;字体：平方 粗体;左间距50px;顶部间距100px;(注意这里的字体要用平方粗体，直接加粗完事的话从态度和细节上就已经OUT了，这可能也是为什么你临摹别人作品，最后却总没原版好看的原因)

第二要素：大留白(可以理解成大间距)大家可以参考我截图中的间距来设置，文末我也传了含iPhne X模板的PSD给大家下载(我一般常用的尺寸有：左右间距50;上下间距最少20;其它的话一般是5的倍数，绝不要出现11，12这些奇怪数值)足够的留白能使页面看起来更加的舒服，更佳的干净清爽。但自己心理一定要有套各情况下的留白间距尺寸规范，否则一套APP几十个页面没有规范会越设计越困难。

第三要素：大配图新建一个宽650，高390的矩形，左右间距50。然后网上找个高质量的图片插入图片剪切蒙版进去。达啦~ 恭喜你已经完成了第一个大白风格的APP界面。所谓大配图，其实就是不吝啬空间，因为大留白已经为你准备好了空间，勇敢的使用大图片来作为展示，尽可能的让图片成为页面的主视觉点，你会发现界面的档次和美观程度又有了进一步提升

依此类推，我们可以发挥创意，运用大白风格设计出更完善更高B格的页面，并且完美运用到实际项目中，比如下面这些~~

总结：本文只是希望带大家入个门，掌握大白风格的设计要素总结来说就三个关键词：大字号!大留白!大配图!(文中图片部份是网上找的，部份是我自己的，如果善用了您的作品请联系删除( ^_^ )/~~)

另外再说几个要素：1. 用色要慎重，大白风格中主色不再是主色，基本是用来画龙点睛，当配色点缀用的(如果您实力够，那么任意挥洒也没问题的)。2. 为了方便大家理解所以我一直在说大字号，但别以为是加大加粗就行了。专业的说法是“重” ，用字体加粗，颜色加深来达到压住页面，撑得住场面的作用。3. 现在的手机屏幕都已经很大了，不要舍不得留白。尝试平常设计时加一两倍的留白会使浏览效果出奇的好。

下一期分享预告：UI设计师需要注意的微信小程序与原生APP的设计区别 ↓

如果客官觉得本教程还行，看在大白的面子上 欢迎关注并帮忙推荐哦 ↓

(文中图片部份是网上找的，部份是我自己的，如果善用了您的作品请联系删除( ^_^ )/~~)本教程中优选APP案例名称如下：APP Store，Airbnb，OFO，马蜂窝，VUE，客路旅行，One兔，自如