这些 UI 设计案例很有想法

用户头像
杭州/UI设计师/337天前/13613浏览
这些 UI 设计案例很有想法
随着设计师技能水平的不断提升,产品设计的质量普遍得到了很大程度的提升,不过也会出现同质化的现象。为了使得自己的设计更有差异化,设计师依然在风格、特征和细节等方面不断探索,也出现了很多在 UI 设计表达层面很有想法的案例。
今天黑马哥也给大家精选几个案例互相欣赏一下,希望可以给大家带来更多设计启发。
这些 UI 设计案例很有想法(图ZMTUxOTg0MzI=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
体验目录
一、业务特征化的卡片式设计
二、巧妙设计表达的个人中心
三、异形卡片与图标的多层结构
四、APP 图标的应景式设计
五、不一样的系统通知开启设计
六、通过动效强化用户信任度
七、会员卡片的质感强化
八、灵活变化的底部标签栏设计
一、业务特征化的卡片式设计
卡片式设计是近些年非常流行的 UI 趋势,可以使得信息整合更高效,层级区分更明显等。卡片的设计表达也非常丰富,无论是造型、配色、空间感等方面,都可以进行不同的设计表达。
最近在体验闲鱼 APP 时,其租房栏目的设计中,将租房的业务特征进行图形化设计,结合到卡片式的造型表达中。其设计表达不仅强化业务特征,房屋结构的图形化更能吸引用户的关注度,特征符号的表达也更能强化用户对产品的记忆度。
这些 UI 设计案例很有想法(图ZMTUxOTg0MzY=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
二、巧妙设计表达的个人中心
个人中心是产品中必不可少的存在,其设计案例层出不穷,也是最容易导致设计同质化的模块。不过依然有一些设计得很巧妙的案例,会在布局、配色、背景、动效、交互等方面进行设计发挥。
最近在嘀嗒出行 APP 中,发现其个人中心的设计布局非常巧妙,利用超椭圆结构作为头像,结合卡片左上角凹陷的位置,使得布局结构更加饱满。不仅突出头像,也不会导致负空间过大,结构变形得非常巧妙。
这些 UI 设计案例很有想法(图ZMTUxOTg0NDA=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
三、异形卡片与图标的多层结构
卡片式设计的出现也是为了强化模块的层级感,让界面设计更有空间感。如何在卡片 Z 轴层上深入设计,是设计师重点探索的方向。
在闲鱼 APP 的副业栏目中,发现一组异形卡片与图标结合得很有意思的设计。通过卡片一角的凹陷形成异形结构,给图标提供布局位置,再利用背景卡片衬托层次感。使得整组卡片设计不仅层次更强,差异化的表达也更能吸引用户的关注度。
这些 UI 设计案例很有想法(图ZMTUxOTg0NDQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
四、APP 图标的应景式设计
APP 图标的主题化设计非常普及,在一些重要的节日庆典或者主题活动期间,都会通过应景式设计表达氛围,唤醒与用户的情感共鸣。
饿了么 APP 图标在这个炎热的季节换成了冰晶的造型,图标中还有上升的小气泡,散发出丝丝凉意。这种应景式的设计激活了用户的体感记忆,增强了用户对产品的体验好感度。
这些 UI 设计案例很有想法(图ZMTUxOTg0NDg=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
五、不一样的系统通知开启设计
随着下载的应用越来越多,各种消息的提示难免干扰自己,所以大部分情况下都会关闭系统通知。如何让用户开启通知,也尽量不造成过度干扰,这个问题值得深思。
在嘀嗒出行 APP 消息设置的设计中,关闭按钮十分醒目,用户可以触发按钮开启系统通知。为了担心用户因为过度推送而关闭通知,特意设计了“一键免打扰”,以此来精简消息推送,避免消息推送过度而干扰用户。站在用户角度考虑的设计,才能增加用户的选择性。
这些 UI 设计案例很有想法(图ZMTUxOTg0NTI=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
六、通过动效强化用户信任度
建立用户对产品的信任度是至关重要的,通过商品品质、服务质量、公信力等方式来建立信任度,如何将语言转化为设计表达是设计师的发力方向。
在闲鱼 APP 手机数码栏目中,设计师通过动效的方式表达商品从质检、包装到物流的标准化流程,以此感官的方式强化用户的信任度。流畅的动效相较于文字描述更有场景感,把复杂的流程简化为可视化的呈现,不仅便于理解,也能提升产品设计的感官度。
这些 UI 设计案例很有想法(图ZMTUxOTg0NTY=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
七、会员卡片的质感强化
卡片式设计除了在造型上面探索以外,质感和风格的表达也是突出设计感的方式,往往细节的处理可以带来意想不到的效果。
在小象优品 APP PLUS 会员等级卡片设计中,不仅通过异形卡片结构完美切换会员等级,也通过质感的差异突出等级区分。卡片边缘光影的处理也非常细节,使得卡片设计更加精致,也能更好的突出卡片与背景的空间层次感。
这些 UI 设计案例很有想法(图ZMTUxOTg0NjA=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
八、灵活变化的底部标签栏设计
底部标签栏在产品中是最普遍的存在,方便用户进行功能之间的频繁切换。在设计表达层面发挥空间很大,不仅可以在造型特征上进行设计,图标设计的表达方案也是层出不穷。
爱奇艺 APP 底部标签栏的“桃豆”功能以凸出的设计打破常规结构,以此吸引用户的关注度。当点击“免费”栏目时,为了不影响视频进度条的表达,凸出的结构会缩回常规版,伴随着流畅的动效过度。灵活的结构变化不仅避免干扰功能布局,也能通过动态的变化强化用户的关注度。
这些 UI 设计案例很有想法(图ZMTUxOTg0NjQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
小结
避免产品同质化的设计除了在 UI 风格层面探索以外,一些细节的设计创新也能展示出自我特征,希望这些案例可以带给大家一些启发。文中描述属于个人观点,不足之处欢迎大家留言补充。
本文由 @黑马青年 原创发布。未经许可,禁止转载。
399
阅读原文
|
举报
|
610
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI 登录界面设计模板包
【新年UI图标】积分icon
户外旅行飞机情侣假日出行
【新年UI图标】体育icon
【新年UI图标】活动icon
【新年UI图标】银行卡icon
Security Camera UI kit
【新年UI图标】美食icon
新拟态风格 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】旅行icon
【新年UI图标】相机icon
智能家居中心 简约 UI设计组件库
3D渐变流体抽象矢量UI背景图
UI应用平面图标
手表表盘UI系列
新能源APP应用UIKit
高级感金属拟物 UI设计组件库
UI通用设计素材1
高级表盘系列UI源文件
科技医疗透明柜UI界面设计
【新年UI图标】礼物/活动icon
森系3D渐变流体抽象矢量UI背景图
你可能喜欢
相关收藏夹
App
App
App
App
大家都在看
登录注册