恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
三要素教你设计流行 大白风格UI
0.0°
2018-04-09 原创文章 教程 举报 20377 610 841 61

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


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

Image title

Image title

Image title


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

下面再放几个用了大白风格设计的APP:

Image title

Image title


这就是本教程要分享给大家的最近今年最流行的:“大白风格”。相信大家早就见到过类似这些风格的APP了,但你们真的尝试设计过吗?

下面打开PS来随着我开始设计吧,首先拿鄙人最近的一个羞羞案例来做示范(因为是示例,我把界面风格设计的更简单了些):

Image title



第一要素:大字号

大家PS新建个750*1334宽高的标准iPhone6分辨率画布,然后输入标题文字,设字号:90;字体:平方 粗体;左间距50px;顶部间距100px;

(注意这里的字体要用平方粗体,直接加粗完事的话从态度和细节上就已经OUT了,这可能也是为什么你临摹别人作品,最后却总没原版好看的原因)

Image title


第二要素:大留白(可以理解成大间距)

大家可以参考我截图中的间距来设置,文末我也传了含iPhne X模板的PSD给大家下载(我一般常用的尺寸有:左右间距50;上下间距最少20;其它的话一般是10的倍数,绝不要出现11,13这些奇数数值)

足够的留白能使页面看起来更加的舒服,更佳的干净清爽。但自己心理一定要有套各情况下的留白间距尺寸规范,否则一套APP几十个页面没有规范会越设计越困难。

Image title


第三要素:大配图

新建一个宽650,高390的矩形,左右间距50。然后网上找个高质量的图片插入图片剪切蒙版进去。达啦~ 恭喜你已经完成了第一个大白风格的APP界面。

所谓大配图,其实就是不吝啬空间,因为大留白已经为你准备好了空间,勇敢的使用大图片来作为展示,尽可能的让图片成为页面的主视觉点,你会发现界面的档次和美观程度又有了进一步提升

Image title


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

Image title

Image title

Image title

Image title


总结:

本文只是希望带大家入个门,掌握大白风格的设计要素总结来说就三个关键词:大字号!大留白!大配图!

(文中图片部份是网上找的,部份是我自己的,如果善用了您的作品请联系删除( ^_^ )/~~)


另外再说几个要素:

1. 用色要慎重,大白风格中主色不再是主色,基本是用来画龙点睛,当配色点缀用的(如果您实力够,那么任意挥洒也没问题的)。

2. 为了方便大家理解所以我一直在说大字号,但别以为是加大加粗就行了。专业的说法是“重” ,用字体加粗,颜色加深来达到压住页面,撑得住场面的作用。

3.减少或淡化分割线的使用,改用留白来代替TA,现在的手机屏幕都已经很大了,不要舍不得留白。尝试平常设计时加一两倍的留白会使浏览效果出奇的好。



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

Image title


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

Image title

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

更新:2018-04-09

下载
收藏

610人已收藏

宋聚安

不定期更新课程 可加微信s85009500咨询啦~

  • 24

    作品

  • 7129

    粉丝

  • 43

    关注

  • 一批精选APP作品界面 PSD分享
  • UI视频教程 教你设计个简历APP
  • 简单三步 教你设计个精美启动页
  • 三步设计这种“实用型”描边风
相关标签
UI设计ps教程教程

    猜你喜欢

      2018-04-09 原创文章 教程 举报 20377 610 841 61

      三要素教你设计流行 大白风格UI

      0.0°

      你确定要举报三要素教你设计流行 大白风格UI

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年12月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      841
      610
      61

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录