欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2017:12:22 19:06:09 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1104个文字,预计阅读时间3分钟
导语
掌握简单三步,教你设计出2017最流行又最有B格的“大白UI风格”

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:如何通过字体设计提升跨平台APP界面的一致性?

下一篇:腾讯设计师:超全面的变体美术字设计手册

  • 18886 文章总数
  • 2255477访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信