当前位置:首页 >> 时尚

8个产品细节剖析 ,看看高手如何做设计 !

8个产品细节剖析,个产看看高手如何做设计
!品细

随着设计师技能水平的节剖计不断提升  ,产品设计的看高质量普遍得到了很大程度的提升 ,不过也会出现同质化的手何现象 。为了使得自己的做设设计更有差异化 ,设计师依然在风格、个产特征和细节等方面不断探索,品细也出现了很多在 UI 设计表达层面很有想法的节剖计案例。

今天黑马哥也给大家精选几个案例互相欣赏一下 ,看高希望可以给大家带来更多设计启发。手何

一 、做设业务特征化的个产卡片式设计

卡片式设计是近些年非常流行的 UI 趋势 ,可以使得信息整合更高效,品细层级区分更明显等。节剖计卡片的设计表达也非常丰富,无论是造型、配色 、空间感等方面,都可以进行不同的设计表达 。

最近在体验闲鱼 APP 时,其租房栏目的设计中,将租房的业务特征进行图形化设计 ,结合到卡片式的造型表达中。其设计表达不仅强化业务特征,房屋结构的图形化更能吸引用户的关注度 ,特征符号的表达也更能强化用户对产品的记忆度 。

8个产品细节剖析,看看高手如何做设计
!

二、巧妙设计表达的个人中心

个人中心是产品中必不可少的存在,其设计案例层出不穷,也是最容易导致设计同质化的模块。不过依然有一些设计得很巧妙的案例 ,会在布局 、配色、背景 、动效、交互等方面进行设计发挥。

最近在嘀嗒出行 APP 中,发现其个人中心的设计布局非常巧妙 ,利用超椭圆结构作为头像 ,结合卡片左上角凹陷的位置 ,使得布局结构更加饱满。不仅突出头像 ,也不会导致负空间过大 ,结构变形得非常巧妙 。

8个产品细节剖析
,看看高手如何做设计!

三、异形卡片与图标的多层结构

卡片式设计的出现也是为了强化模块的层级感,让界面设计更有空间感 。如何在卡片 Z 轴层上深入设计,是设计师重点探索的方向  。

在闲鱼 APP 的副业栏目中 ,发现一组异形卡片与图标结合得很有意思的设计。通过卡片一角的凹陷形成异形结构,给图标提供布局位置 ,再利用背景卡片衬托层次感 。使得整组卡片设计不仅层次更强,差异化的表达也更能吸引用户的关注度 。

8个产品细节剖析,看看高手如何做设计	!

四、APP 图标的应景式设计

APP 图标的主题化设计非常普及,在一些重要的节日庆典或者主题活动期间,都会通过应景式设计表达氛围,唤醒与用户的情感共鸣 。

饿了么 APP 图标在这个炎热的季节换成了冰晶的造型 ,图标中还有上升的小气泡  ,散发出丝丝凉意。这种应景式的设计激活了用户的体感记忆 ,增强了用户对产品的体验好感度  。

8个产品细节剖析,看看高手如何做设计!

五、不一样的系统通知开启设计

随着下载的应用越来越多,各种消息的提示难免干扰自己 ,所以大部分情况下都会关闭系统通知 。如何让用户开启通知 ,也尽量不造成过度干扰 ,这个问题值得深思。

在嘀嗒出行 APP 消息设置的设计中  ,关闭按钮十分醒目,用户可以触发按钮开启系统通知 。为了担心用户因为过度推送而关闭通知 ,特意设计了“一键免打扰”,以此来精简消息推送,避免消息推送过度而干扰用户。站在用户角度考虑的设计 ,才能增加用户的选择性  。

8个产品细节剖析,看看高手如何做设计
!

六 、通过动效强化用户信任度

建立用户对产品的信任度是至关重要的 ,通过商品品质、服务质量、公信力等方式来建立信任度,如何将语言转化为设计表达是设计师的发力方向 。

在闲鱼 APP 手机数码栏目中 ,设计师通过动效的方式表达商品从质检、包装到物流的标准化流程,通过视觉化方式强化用户的信任度。流畅的动效相较于文字描述更有场景感 ,把复杂的流程简化为可视化的呈现,不仅便于理解 ,也能提升产品设计的感官度 。

8个产品细节剖析	
,看看高手如何做设计!

七、会员卡片的质感强化

卡片式设计除了在造型上面探索以外 ,质感和风格的表达也是突出设计感的方式,往往细节的处理可以带来意想不到的效果。

在小象优品 APP PLUS 会员等级卡片设计中,不仅通过异形卡片结构完美切换会员等级,也通过质感的差异突出等级区分 。卡片边缘光影的处理也非常细节 ,使得卡片设计更加精致  ,也能更好的突出卡片与背景的空间层次感。

8个产品细节剖析	,看看高手如何做设计�!

八 、灵活变化的底部标签栏设计

底部标签栏在产品中是最普遍的存在 ,方便用户进行功能之间的频繁切换。在设计表达层面发挥空间很大,不仅可以在造型特征上进行设计 ,图标设计的表达方案也是层出不穷。

爱奇艺 APP 底部标签栏的“桃豆”功能以凸出的设计打破常规结构 ,以此吸引用户的关注度。当点击“免费”栏目时,为了不影响视频进度条的表达,凸出的结构会缩回常规版,伴随着流畅的动效过渡。灵活的结构变化不仅避免干扰功能布局,也能通过动态的变化强化用户的关注度。

8个产品细节剖析,看看高手如何做设计�!

小结

避免产品同质化的设计除了在 UI 风格层面探索以外,一些细节的设计创新也能展示出自我特征,希望这些案例可以带给大家一些启发。文中描述属于个人观点,不足之处欢迎大家留言补充 。

作者:黑马青年

综合

8个产品细节剖析,个产看看高手如何做设计
!品细

随着设计师技能水平的节剖计不断提升  ,产品设计的看高质量普遍得到了很大程度的提升 ,不过也会出现同质化的手何现象 。为了使得自己的做设设计更有差异化 ,设计师依然在风格、个产特征和细节等方面不断探索,品细也出现了很多在 UI 设计表达层面很有想法的节剖计案例。

今天黑马哥也给大家精选几个案例互相欣赏一下 ,看高希望可以给大家带来更多设计启发。手何

一 、做设业务特征化的个产卡片式设计

卡片式设计是近些年非常流行的 UI 趋势 ,可以使得信息整合更高效,品细层级区分更明显等。节剖计卡片的设计表达也非常丰富,无论是造型、配色 、空间感等方面,都可以进行不同的设计表达 。

最近在体验闲鱼 APP 时,其租房栏目的设计中,将租房的业务特征进行图形化设计 ,结合到卡片式的造型表达中。其设计表达不仅强化业务特征,房屋结构的图形化更能吸引用户的关注度 ,特征符号的表达也更能强化用户对产品的记忆度 。

8个产品细节剖析,看看高手如何做设计
!

二、巧妙设计表达的个人中心

个人中心是产品中必不可少的存在,其设计案例层出不穷,也是最容易导致设计同质化的模块。不过依然有一些设计得很巧妙的案例 ,会在布局 、配色、背景 、动效、交互等方面进行设计发挥。

最近在嘀嗒出行 APP 中,发现其个人中心的设计布局非常巧妙 ,利用超椭圆结构作为头像 ,结合卡片左上角凹陷的位置 ,使得布局结构更加饱满。不仅突出头像 ,也不会导致负空间过大 ,结构变形得非常巧妙 。

8个产品细节剖析
,看看高手如何做设计!

三、异形卡片与图标的多层结构

卡片式设计的出现也是为了强化模块的层级感,让界面设计更有空间感 。如何在卡片 Z 轴层上深入设计,是设计师重点探索的方向  。

在闲鱼 APP 的副业栏目中 ,发现一组异形卡片与图标结合得很有意思的设计。通过卡片一角的凹陷形成异形结构,给图标提供布局位置 ,再利用背景卡片衬托层次感 。使得整组卡片设计不仅层次更强,差异化的表达也更能吸引用户的关注度 。

8个产品细节剖析,看看高手如何做设计	!

四、APP 图标的应景式设计

APP 图标的主题化设计非常普及,在一些重要的节日庆典或者主题活动期间,都会通过应景式设计表达氛围,唤醒与用户的情感共鸣 。

饿了么 APP 图标在这个炎热的季节换成了冰晶的造型 ,图标中还有上升的小气泡  ,散发出丝丝凉意。这种应景式的设计激活了用户的体感记忆 ,增强了用户对产品的体验好感度  。

8个产品细节剖析,看看高手如何做设计!

五、不一样的系统通知开启设计

随着下载的应用越来越多,各种消息的提示难免干扰自己 ,所以大部分情况下都会关闭系统通知 。如何让用户开启通知 ,也尽量不造成过度干扰 ,这个问题值得深思。

在嘀嗒出行 APP 消息设置的设计中  ,关闭按钮十分醒目,用户可以触发按钮开启系统通知 。为了担心用户因为过度推送而关闭通知 ,特意设计了“一键免打扰”,以此来精简消息推送,避免消息推送过度而干扰用户。站在用户角度考虑的设计 ,才能增加用户的选择性  。

8个产品细节剖析,看看高手如何做设计
!

六 、通过动效强化用户信任度

建立用户对产品的信任度是至关重要的 ,通过商品品质、服务质量、公信力等方式来建立信任度,如何将语言转化为设计表达是设计师的发力方向 。

在闲鱼 APP 手机数码栏目中 ,设计师通过动效的方式表达商品从质检、包装到物流的标准化流程,通过视觉化方式强化用户的信任度。流畅的动效相较于文字描述更有场景感 ,把复杂的流程简化为可视化的呈现,不仅便于理解 ,也能提升产品设计的感官度 。

8个产品细节剖析	
,看看高手如何做设计!

七、会员卡片的质感强化

卡片式设计除了在造型上面探索以外 ,质感和风格的表达也是突出设计感的方式,往往细节的处理可以带来意想不到的效果。

在小象优品 APP PLUS 会员等级卡片设计中,不仅通过异形卡片结构完美切换会员等级,也通过质感的差异突出等级区分 。卡片边缘光影的处理也非常细节 ,使得卡片设计更加精致  ,也能更好的突出卡片与背景的空间层次感。

8个产品细节剖析	,看看高手如何做设计�!

八 、灵活变化的底部标签栏设计

底部标签栏在产品中是最普遍的存在 ,方便用户进行功能之间的频繁切换。在设计表达层面发挥空间很大,不仅可以在造型特征上进行设计 ,图标设计的表达方案也是层出不穷。

爱奇艺 APP 底部标签栏的“桃豆”功能以凸出的设计打破常规结构 ,以此吸引用户的关注度。当点击“免费”栏目时,为了不影响视频进度条的表达,凸出的结构会缩回常规版,伴随着流畅的动效过渡。灵活的结构变化不仅避免干扰功能布局,也能通过动态的变化强化用户的关注度。

8个产品细节剖析,看看高手如何做设计�!

小结

避免产品同质化的设计除了在 UI 风格层面探索以外,一些细节的设计创新也能展示出自我特征,希望这些案例可以带给大家一些启发。文中描述属于个人观点,不足之处欢迎大家留言补充 。

作者:黑马青年


{dede:include filename="menu.htm"/}