火星网校
三要素教你设计流行 大白风格UI
发布时间：2024-03-11 11:31:51 浏览量：111次
掌握简单三步，教你设计出2019最流行又最有B格的“大白UI风格”
失踪人口暂时回归~ 今天教一个如何跟着苹果爸爸走，设计出2017最流行最省事还最有B格的UI风格，这就是：“大白风格”（名字瞎起的，大家有没有想起那个又胖又可爱的大白机器人呢）快来跟着我学习如何设计这种风格的技巧吧 。
上面这几个图分别是苹果应用商店和Airbnb APP的部分UI界面截图，看完后大家注意到了共同点没有？没错，他们统一的特点就是文字大，留白多，看着很舒服
下面再放几个用了大白风格设计的APP：
这就是本教程要分享给大家的最近今年最流行的：“大白风格”。相信大家早就见到过类似这些风格的APP了，但你们真的尝试设计过吗？
下面打开PS来随着我开始设计吧，首先拿鄙人最近的一个羞羞案例来做示范（因为是示例，我把界面风格设计的更简单了些）：
第一要素：大字号
大家PS新建个750*1334宽高的标准iPhone6分辨率画布，然后输入标题文字，设字号：90；字体：平方 粗体；左间距50px；顶部间距100px;
（注意这里的字体要用平方粗体，直接加粗完事的话从态度和细节上就已经OUT了，这可能也是为什么你临摹别人作品，最后却总没原版好看的原因）
第二要素：大留白（可以理解成大间距）
大家可以参考我截图中的间距来设置，文末我也传了含iPhne X模板的PSD给大家下载（我一般常用的尺寸有：左右间距50；上下间距最少20；其它的话一般是10的倍数，绝不要出现11，13这些奇数数值）
足够的留白能使页面看起来更加的舒服，更佳的干净清爽。但自己心理一定要有套各情况下的留白间距尺寸规范，否则一套APP几十个页面没有规范会越设计越困难。
第三要素：大配图
新建一个宽650，高390的矩形，左右间距50。然后网上找个高质量的图片插入图片剪切蒙版进去。达啦~ 恭喜你已经完成了第一个大白风格的APP界面。
所谓大配图，其实就是不吝啬空间，因为大留白已经为你准备好了空间，勇敢的使用大图片来作为展示，尽可能的让图片成为页面的主视觉点，你会发现界面的档次和美观程度又有了进一步提升
依此类推，我们可以发挥创意，运用大白风格设计出更完善更高B格的页面，并且完美运用到实际项目中，比如下面这些~~
总结：
本文只是希望带大家入个门，掌握大白风格的设计要素总结来说就三个关键词：大字号！大留白！大配图！
另外再说几个要素：
1. 用色要慎重，大白风格中主色不再是主色，基本是用来画龙点睛，当配色点缀用的（如果您实力够，那么任意挥洒也没问题的）。
2. 为了方便大家理解所以我一直在说大字号，但别以为是加大加粗就行了。专业的说法是“重” ，用字体加粗，颜色加深来达到压住页面，撑得住场面的作用。
3.减少或淡化分割线的使用，改用留白来代替TA，现在的手机屏幕都已经很大了，不要舍不得留白。尝试平常设计时加一两倍的留白会使浏览效果出奇的好。
另外再送你免费PS等学习课程哦！
私信回复“学习”领取ps课程等海量资源。
私信回复“清明”领取清明海报PSD源文件。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
4. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
