为什么我做不出这样的设计呢?

用户头像
杭州/UI设计师/363天前/4058浏览
为什么我做不出这样的设计呢?
大家经常会遇到这样的问题,为啥同样的需求我却没有别人做得好呢!或者自己的作品总感觉没有别人的好看,到底是哪个环节出了问题呢?
设计能力的提升离不开动手能力和设计感知能力,如果你的执行力没问题,那就要努力提高眼界,多体验、多分析、多总结。为了提高大家的眼界,我们也会定期分享一些优秀的设计案例,希望可以和大家一起进步。
为什么我做不出这样的设计呢?(图ZMTUwOTI4NDA=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
体验目录
一、品牌基因点缀图标设计
二、场景式设计表达
三、不一样的轮播结构
四、产品设计的外观自定义
五、产品设计的 AI 趋势
六、悬浮影像强化内容关注度
七、平衡结构和延展功能
八、收缩式设计提升视觉体验感
九、对比式突出功能优势
十、通过图标设计形成版块对比
 
一、品牌基因点缀图标设计
图标设计的差异化在产品中尤为重要,设计师的图标设计能力也是非常重要的考验之一,如何结合产品特征和品牌文化等因素强化图标设计,需要我们立足于品牌做更多探索。
最近在体验优酷 App 时,发现了一组结合品牌基因点缀图标设计的案例,很有启发性。该组图标设计以线性方式表达,结合优酷品牌基因图形作为底层点缀,不仅强化了品牌感,也能让单调的线性图标变得更有层次感。
为什么我做不出这样的设计呢?(图ZMTUwOTI4NDQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
二、场景式设计表达
把线下的场景还原到线上的体验中,可以让用户体验更有代入感,无论是体验度还原还是场景式的设计表达,都能以此提升用户体验度。
爱奇艺 App 在云包场栏目的设计中,将影院的观影场景还原到界面中,让用户感受到身临其境的体验。通过场景式的设计还原,使得功能表达更加直观,无论是操作体验还是感官体验都能呈现出不错的效果。
为什么我做不出这样的设计呢?(图ZMTUwOTI4NDg=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
三、不一样的轮播结构
轮播图在产品中非常普遍,从创意角度、结构差异化、轮播体验度等方面都可以进行设计发挥。
最近在体验优酷 App 时,淘好片“正在热播”栏目中,针对影片的推荐采用横向轮播的交互方式,轮播图以竖版封面图的结构进行渐层叠加。单击或者滑动交互都很流畅,样式表达区别于常规结构,更能吸引用户的关注度。
为什么我做不出这样的设计呢?(图ZMTUwOTI4NTI=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
四、产品设计的外观自定义
产品外观设计大部分情况都是统一的,这也使得无法满足所有用户的喜好,为了打破这个局限性,产品设计师也在外观的设置中提出了自定义的解决方案。
比如网易邮箱大师在个人中心添加了外观偏好的设置,用户可以根据自己的喜好设置应用图标、深浅模式、皮肤主题等主要内容,也可以切换语言和调节文字大小。自定义的外观设计可以满足更多用户的审美需求,提升用户对产品服务的好感度。
为什么我做不出这样的设计呢?(图ZMTUwOTI4NTY=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
五、产品设计的 AI 趋势
随着 AI 趋势的发展,众多产品都在融入这个趋势,都在自家功能诉求中添加 AI 的功能,产品设计也变得 AI 化。
通过 AI 强化搜索体验是最为普及的,比如爱奇艺在底部标签栏的重要位置添加了 AI 机器人桃豆(测试版)。通过与桃豆对话,可以让你对影片的搜索体验更佳,不仅只是搜索结果的呈现,更有简短的分析辅助你做出判断,让你的选择变得更有方向感。
为什么我做不出这样的设计呢?(图ZMTUwOTI4NjA=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
六、悬浮影像强化内容关注度
如何在不改变产品布局结构的基础上强化局部内容的关注度呢?这个问题使得界面视觉表达花样百出。
最近在体验爱奇艺 App 时,发现了一个有意思的设计表达。利用悬浮影像强化了当前内容的关注度,几秒后消失也不会过度干扰,像一片墨迹一样的结构也让悬浮的内容不会太突兀,更能融合在界面中,是一个值得学习的解决方案。
为什么我做不出这样的设计呢?(图ZMTUwOTI4NjQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
为什么我做不出这样的设计呢?(图ZMTUwOTI4Njg=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
七、平衡结构和延展功能
见缝插针式的设计是我们比较忌讳的,但是为了平衡结构和延展功能也会往这个方向进行探索,特别是在体量庞大的产品中。
前段时间京东外卖走热,将外卖业务纳入秒送栏目中,在导航栏右侧添加了一个营销入口,使其布局结构左右平衡。延展的功能也将空白区域的价值发挥到极致,即平衡了结构,又拓展了营销接口。
为什么我做不出这样的设计呢?(图ZMTUwOTI4NzI=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
八、收缩式设计提升视觉体验感
根据当前结构的视觉表现灵活调整设计,不同的结构采用不同的设计表达,这样灵活的设计思维才能做出更有体验感的产品。
在美图秀秀设计室中,默认展示的搜索框较短,可以给 Banner 图的表达腾出空间,使其显示效果更佳。滑动界面后搜索框会延展长度,让导航栏的布局更加饱满平衡。这种收缩式的设计不仅使得布局更灵活,也能给其它元素带来更好的视觉体验感。
为什么我做不出这样的设计呢?(图ZMTUwOTI4NzY=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
为什么我做不出这样的设计呢?(图ZMTUwOTI4ODA=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
九、对比式突出功能优势
通过前后对比可以突出变化过程,吸引用户感受功能或者服务带来的优势,这种对比式的设计你觉得可以用到哪个场景呢?
在 Photoshop Express App 的引导页设计中,我发现了这个对比式的设计表达,通过拖动滑块可以感受前后图片的变化,以此突出工具的优势。相较于展示形式的引导页设计而言,这种可交互的互动性设计体验度更高。
为什么我做不出这样的设计呢?(图ZMTUwOTI4ODQ=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
十、通过图标设计形成版块对比
在产品中版块之间需要通过对比形成差异和层级感,形成对比的设计手法很多,本次探索的是通过图标设计的强弱影响版块对比的方式。
在智行火车票个人中心栏目中,周边服务版块的图标采用高明度低饱和度的处理方式,通过配色弱化了视觉张力,与其它版块形成视觉上的强弱对比。也能让整个界面的图标设计形成层次对比,对于一些需要弱化的版块来说,这是一个不错的设计思路。
为什么我做不出这样的设计呢?(图ZMTUwOTI4ODg=) - 观点 - 站酷设计师黑马青年原创素材 - 站酷ZCOOL
收藏
小结
本次分享的体验总结到此结束,希望可以带给大家一些设计启发,以优秀的案例为原型,辅助我们输出更优秀的设计解决方案。文中描述属于个人观点,仅作为参考,不足之处欢迎大家留言补充。
本文由 @黑马青年 原创发布。未经许可,禁止转载。
78
阅读原文
|
举报
|
542
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
Security Camera UI kit
智能家居中心 简约 UI设计组件库
【新年UI图标】银行卡icon
手表表盘UI系列
3D卡通UI界面图标可爱插画免扣素
UI 登录界面设计模板包
UI界面 组件
3D渐变流体抽象矢量UI背景图
拟物风质感写实UI卡片合集源文件
UI通用设计素材1
UI应用平面图标
【新年UI图标】钱包icon
新能源APP应用UIKit
盲盒APP UI设计
【新年UI图标】秒杀icon
新拟态风格 UI设计组件库
【新年UI图标】30个图标
高级表盘系列UI源文件
抽象液态渐变UI背景模版
高级感金属拟物 UI设计组件库
钱包ui模板
【新年UI图标】会员icon
科技医疗透明柜UI界面设计
你可能喜欢
相关收藏夹
干货
干货
干货
干货
大家都在看
登录注册