7大热门风格UI界面练习
乐佩Rapunzel
呼和浩特/设计爱好者/3年前/101浏览
版权
7大热门风格UI界面练习
7大热门风格UI界面练习
极简风格特征：
01、留白空间大-页面存在大量留白，相对的，信息量更少。
02、样式简约化-元素样式的使用越简单越好，较少地加入投影、模糊等视觉要素。
03、色彩简洁-色彩简单、多以纯色为主。
优点：信息清晰集中、更具视觉张力、开发简单高效。
缺点：信息密度低、承载功能少、易用性偏差。
使用场景：适合功能单一、信息较少的页面类型，例如：音乐/FM播放页、闪屏页、Todo/专注页等。
01、留白空间大-页面存在大量留白，相对的，信息量更少。
02、样式简约化-元素样式的使用越简单越好，较少地加入投影、模糊等视觉要素。
03、色彩简洁-色彩简单、多以纯色为主。
优点：信息清晰集中、更具视觉张力、开发简单高效。
缺点：信息密度低、承载功能少、易用性偏差。
使用场景：适合功能单一、信息较少的页面类型，例如：音乐/FM播放页、闪屏页、Todo/专注页等。
收藏
平面杂志风特征：
01、平面化排版--界面的排版具有平面设计的气质，对比强烈，变化多样。
02、分割线/边框线--如果页面中出现分割线或边框线，那么这类线元素会非常显眼。
03、个性化字体--不管是衬线体还是非衬线体，杂志风格的页面偶尔会使用除系统默认字体之外的特殊字体。
优点：视觉张力强、容易做出高级感、风格强烈。 缺点：配图要求高、平面功底要求高、界面布局不常规。
使用场景：品牌逼格较高、艺术气息浓厚的页面类型，例如：轻奢/奢侈品的APP、博物馆/艺术馆APP等。
01、平面化排版--界面的排版具有平面设计的气质，对比强烈，变化多样。
02、分割线/边框线--如果页面中出现分割线或边框线，那么这类线元素会非常显眼。
03、个性化字体--不管是衬线体还是非衬线体，杂志风格的页面偶尔会使用除系统默认字体之外的特殊字体。
优点：视觉张力强、容易做出高级感、风格强烈。 缺点：配图要求高、平面功底要求高、界面布局不常规。
使用场景：品牌逼格较高、艺术气息浓厚的页面类型，例如：轻奢/奢侈品的APP、博物馆/艺术馆APP等。
收藏
深色模式风格概念：
深色模式不等于夜间模式。夜间模式是专门针对在底光源甚至无光源环境下查看电子设备而生的，而深色模式则需要保证界面在白天太阳光下也清晰可用。
深色模式风格特征：
01、高对比度
02、较少使用投影
优点：神秘、高雅、调用系统api开发方便适用性强。
缺点：用户上传内容不可控色彩选择局限性大。
深色模式不等于夜间模式。夜间模式是专门针对在底光源甚至无光源环境下查看电子设备而生的，而深色模式则需要保证界面在白天太阳光下也清晰可用。
深色模式风格特征：
01、高对比度
02、较少使用投影
优点：神秘、高雅、调用系统api开发方便适用性强。
缺点：用户上传内容不可控色彩选择局限性大。
收藏
玻璃拟态：透明、悬浮、鲜明、微妙
要点：1、玻璃拟态通过阴影、透明度和背景模糊来表现。
2、悬浮越高的元素、模糊值就越高（越模糊），越靠近背景层则越弱。
3、添加1px的高光内描边可以有效突出主题物。
4、背景颜色变化越大则拟化效果越好。
优点：更丰富的层次感、更好的材质感、容易做视觉统一。
缺点：对比度偏低、对背景图的要求高、容易显得油腻。
使用场景：本身具有图案/图片背景的界面组件，例如：音乐播放器页、某一些卡片上的遮罩、带背景的个人页等。
要点：1、玻璃拟态通过阴影、透明度和背景模糊来表现。
2、悬浮越高的元素、模糊值就越高（越模糊），越靠近背景层则越弱。
3、添加1px的高光内描边可以有效突出主题物。
4、背景颜色变化越大则拟化效果越好。
优点：更丰富的层次感、更好的材质感、容易做视觉统一。
缺点：对比度偏低、对背景图的要求高、容易显得油腻。
使用场景：本身具有图案/图片背景的界面组件，例如：音乐播放器页、某一些卡片上的遮罩、带背景的个人页等。
收藏
新拟态特征：左上角高光立面、右下角暗部立面、使用圆角过渡、非纯白色背景。
优点：强烈的新鲜感，让界面脱颖而出。
缺点：可用性较差、缺少层次感，对背景色依赖较大。
使用场景：适合功能少、层级简单、页面简洁的工具类应用。例如：FM应用、音乐类应用、部分页面的按钮元素等。
优点：强烈的新鲜感，让界面脱颖而出。
缺点：可用性较差、缺少层次感，对背景色依赖较大。
使用场景：适合功能少、层级简单、页面简洁的工具类应用。例如：FM应用、音乐类应用、部分页面的按钮元素等。
收藏
特征：受光面-反光、平面-形状、背光面阴影、背景-色彩
收藏
3D空间风格
收藏
霓虹渐变风格
收藏
3
举报
2
分享
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
登录注册
3登录即可同步推荐记录哦
2登录即可加入我的收藏
评论登录即可评论想法
分享分享