10个优秀的UI/UX设计技巧

Recommanded by editor
杭州/UI设计师/3年前/5400浏览
10个优秀的UI/UX设计技巧Recommanded by editor

2022 原创输出第 17 篇,我们互相努力。

UI/UX 设计能力的提升离不开分析与探索,针对优秀产品的设计进行分析总结,探索设计背后的经验规则。为了辅助大家不断思考和总结,黑马家族产品体验日记栏目持续更新,希望可以开启大家更多的灵感。


今天给大家分享的总结涉及手势交互、情感化设计探索、感官体验升级、结构布局突破、自定义设计强化等内容。




一、利用手势辅助实现快捷操作


利用手势交互辅助隐藏式功能操作,可以在不改变当前结构的基础上实现快捷操作,带给用户更加便捷化的体验。


夸克 APP 在访问了多层级页面之后,如果想要快速回到浏览器主页,点击返回按钮一级一级返回过于繁琐。通过底部导航栏向上进行滑动,可以快速激活返回主页的操作,手势辅助实现自动跳转。该设计解决方案通过手势辅助隐藏功能操作,提高了用户对于产品的使用体验。




二、点赞设计的情感化探索


点赞在阅读类场景中随处可见,用于表达用户对内容的认可度而产生的情感共鸣,通过点赞给予赞同。点赞设计的创新已逐步在探索,通过更加情感化的设计表达提高用户体验,借助手势的变化呈现出更有趣味性的点赞设计。


今日头条 APP 单击点赞图标会随机性弹出表情化符号,多次点击会持续弹出更为丰富密集的表情符号,长按则会像模拟持续发射的特效,伴随着音效和震动带来视听触等多重体验。点赞设计的情感化探索不仅带给用户多重感官体验,也是用户释放阅读压力的一种情感共鸣。




三、情感化的点赞文案设计


除了从点赞视觉感官层面进行设计探索以外,众多产品也在文案提示设计上面进行情感化探索。


AcFun APP 在对话题等内容点赞时,会弹出温馨的文案提示,每次点赞都会出现不同的文案。情感化的文案设计提高了话题互动的活跃度,带给用户更好的社交互动体验。




四、突破常规的模式切换设计


设计都在探索差异化的感官表达,如何突破常规至关重要。无论是在布局结构层面还是元素情感化表达层面,设计师都在尝试更有创新的表达,带给用户不一样的使用体验。


Wonder APP 在模式切换上做出了一个新颖的设计解决方案,通过环形卡片设计进行模式切换,可以单击和滑动进行切换。动态的卡通形象增加了感官体验,流畅的卡片切换也带来了不错的操作体验,是一个在布局层、视觉感官层、互动层等方面的不错探索。




五、特色的签到展示设计


签到设计对于大家来说并不陌生,提高用户签到的参与度是大家都在不断思考和探索的方向。


AcFun APP 将签到设计成日历展示形式,点击签到之后弹出,配合日历运势的概念来设计,提高用户的签到兴趣。内容却不是正式的日历运势相关内容,配合趣味化的文案设计,让用户会心一笑。视觉感和情感化文案设计的融入,提高了签到设计的感官体验,进而提高用户的参与度。




六、自定义字号提高阅读体验


通过公众号等自媒体进行阅读已经成为大家的习惯,不同公众号编辑内容都会有所不同,字体大小和行间距等没有特定的规范。官方虽然会有默认设置,但是无法兼顾不同的内容需求。提高小编的编辑体验和满足用户的阅读体验,自定义的阅读调整至关重要。


在公众号阅读文章时,可以通过右上角的功能入口进入调整字体。用户可以根据自己的阅读习惯设置字体大小,在标准和自定义大小之间切换,提高用户的阅读体验。




七、自选色实现更灵活的个性换肤


个性化的皮肤主题在众多产品中已经运用普遍,当用户体量增加之后,个性化的设置才能满足不同用户的体验需求。


酷我音乐 APP 在个性换肤模块中,除了设置多个主题皮肤供选择以外,用户还可以通过自选色设置更加灵活的配色风格。可以选择更多推荐的配色风格,也可以通过色环自己调节任意颜色,满足不同用户对于感官体验的需求。




八、自定义图满足用户的创作欲


对于一些追寻个性化较强的用户,预装的自定义设计已经无法满足他们的体验需求,激发用户创作欲的设计迎面而来。


酷我音乐 APP 在个性换肤模块中,用户可以通过自定义图实现更加个性化的皮肤。用户可以选择任意拍摄的照片,然后通过透明度和模糊度来调节照片效果,满足自己对背景效果的要求。针对按钮的颜色也提供了几个配色选择,用户可以根据自己调节后的背景效果进行搭配。基于更加个性化的需求满足用户的创作欲,才能带给用户更加人性化的使用体验。




九、关联功能叠加设计提高使用率


为了提高功能的曝光度,直接展示在用户的视野中是很多设计师的处理形式,但是却增加了感官层面的视觉负担。


幸识 APP 把关联功能进行合并式的叠加设计,不仅对视觉进行降噪,由于属于关联性的操作,用户更容易通过功能联想进行使用。当用户点击观看时间戳时,底部功能会被替换为发起,发起时间戳和观看本身就是一个流程的体验。当我们遇到关联性功能设计时,不一定选择各自展示,相互叠加或者切换式的交互设计也是不错的解决方案。




十、趣味性爆满的点赞设计


点赞是用户情绪化表达的关键,表示对于内容的认可度和作者的支持度。普通的点赞设计已经无法满足一些情绪爆满的用户,更加趣味夸张的设计在逐步被探索。


微博 APP 针对点赞设计单击时,出现表情化的符号弹出,持续点击或者长按点赞图标则会出现色彩丰富、表情符号四处爆发的视觉效果。一场趣味性爆满的视觉盛宴,满足用户释放情绪的最大化需求。




小结


在用户使用体验和感官体验层面探索了这些优秀的案例,希望可以抛砖引玉,带给大家更多启发。发现设计背后的思路,总结设计表达的经验,运用优秀案例的技巧,提高我们的设计解决能力。


以上总结仅代表个人观点,如有不足欢迎大家留言补充,我们互相进步。



作者:黑马青年(vx: heimaux

本文由 @黑马青年 原创发布。未经许可,禁止转载。

95
阅读原文
|
Report
|
185
Share
相关推荐
这些 UI 设计案例很有想法
Homepage recommendation
文章
设计理论知识
设计理论知识
设计理论知识
设计理论知识
作品收藏夹
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
字体设计
Homepage recommendation
相关收藏夹
设计理论知识
设计理论知识
设计理论知识
设计理论知识
作品收藏夹
页面
页面
页面
页面
作品收藏夹
知识
知识
知识
知识
作品收藏夹
UI APP设计
UI APP设计
UI APP设计
UI APP设计
作品收藏夹
文章
文章
文章
文章
作品收藏夹
素材搜集
素材搜集
素材搜集
素材搜集
作品收藏夹
大家都在看
Log in