大标题风格中的UI设计细节

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
1300 0 1 2019-10-17

自ios11系统更新之后,大标题风格已经在UI设计中占有独特的领导性地位,且在移动互联网设计中逐渐流行,越来越多的设计者竞相模仿和参考大标题风格的设计。


虽然大标题风格在设计师眼里很受欢迎,但是要落地到真正的产品中去,不是所有产品都可以适用的。


要注意把握好大标题风格的运用场景,接下来就来总结一下大标题风格中哪些UI设计细节需要我们注意:


大标题风格设计的特点:


1.大号字体,加粗显示


2.卡片式设计,弥散阴影,大圆角


3.极简去线,大留白



iOS系统界面


1.大号字体,加粗显示


加粗加大后的字体简单粗暴,显然更加吸引用户的注意,这样设计的好处可以把页面的重点内容突然出来。提升文字层次性,增加对比效果。


一般我们在设计一级标题是字号大小设置在40-48px之间,iOS系统标题字是48px,具体的字号大小可根据页面效果调整,但是重要的是要突显大标题风格的文字信息,吸引用户注意力。



追波风格页面设计


2.卡片式设计,弥散阴影,大圆角


卡片设计往往带有足够的空间留白、足够的图片和通过少量的阴影造就合理的层次,使内容更加聚焦,集中信息显示,圆角化的亲切感形成轻量化设计给人一种质感和舒适感。


一般我们在设计时可以把卡片圆角度数调在10-20px之间。还要注意页面中的圆角卡片度数要保持一致。每个卡片之间的上下左右留白间距按照偶数保持一致。加上图文排版,和适当的弥散阴影。



一个页面多个卡片式设计度数保持一致



卡片式下的弥散阴影设计


3.极简去线,大留白


极简主义的设计不仅美观、大方,还能更加有效、清晰地传递页面信息。这种化繁为简的设计方式颇受设计者们的喜爱。我们在设计时要考虑为用户保留重要的信息,减轻用户的认知负荷。


一般在设计时减少多余的线条区分,使用大片留白,分块设计,优化模块之间的层次性。




大量留白给主要信息留出位置,强化页面信息


综上所述,大标题风格更加注重内容本身,内容性产品为主。如信息咨询类产品,工具化产品。


实用UI设计技巧分享 ↓ (点击免费观看~)


萌萌的动态表情,我也能绘制出来作作妖

http://www.makeru.com.cn/live/5541_2104.html?s=96806


和套路说"No",解锁LOGO设计新技巧!

http://www.makeru.com.cn/live/5541_2098.html?s=96806


吉祥物设计,原来就这么简单!

http://www.makeru.com.cn/live/5541_2093.html?s=96806


字体这样改,就能为公司节省上万元开销!

http://www.makeru.com.cn/live/5541_2072.html?s=96806


建了个裙,大家一起学 UI 啊  700842555  有很多同样在学习UI的小伙伴在里面。大家可以一起学习,分享学习资料,每天还会有免费的直播公开课,大家手动添加下,找管理要资料就好


附件有相关的学习视频,需要的可以自行下载观看哦~~ 

Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票