大厂是如何做UI设计的?从10个产品细节剖析大厂UI设计。

作为 UI 设计师来说,都是一群细节猎人,以像素级的细节刻画着每一个需求。日常的体验积累也总能发现那些优秀的设计解决方案,以此来强化自己的设计认知,提高设计思维和变通能力。

定期体验产品,记录优秀的设计解决方案和反思设计背后的思路,有助于提高专业层面的综合能力。黑马哥也会定期为大家带来个人的体验总结,希望可以带给大家更多帮助。本期给大家带来的感官体验内容涉及手势交互、功能区延伸设计、情感化设计、微动效、悬浮动效设计等等。

10个产品细节剖析,让你看看大厂是如何做设计的!

利用手势交互实现自动跳转

随着手势交互的不断成熟,被普遍的应用到产品设计中。利用手势的辅助可以缩短用户的操作路径,通过不断优化用户的学习成本,带给用户更加便利的操作体验。

通过指向按钮的引导可以让用户抵达需求目的,需要用户进行点击操作。针对横向滑动的交互输出中,在连贯的滑动操作中配合手势交互,随着滑动力度的不同可以实现自动跳转。比如开言英语
APP
课程模块中,针对推荐的课程卡片在向左滑动过程中,随着滑动的程度提示"查看更多"和"释放查看",实现详情内容的自动跳转。对于需要查看更多推荐内容的用户来说,减少了二次点击的步骤,提高了操作的便捷度和使用效率。

10个产品细节剖析,让你看看大厂是如何做设计的!

10个产品细节剖析,让你看看大厂是如何做设计的!

手势交互带来的切歌体验

手势交互能够带给用户使用的便捷度,不过目前很多产品的手势玩法都还有待用户去挖掘。功能层面是否"暗藏玄机"需要用户的深度体验,如果可以培养用户的使用习惯,带来的便捷度和体验度都会进一步提升。

在 QQ 音乐主页底部标签栏上方会浮层展示播放器,方便用户操作正在播放的歌曲。可以通过左右滑动的手势进行切歌体验,对于盲选歌曲来说非常便利。在不改变当前布局结构的基础上新增功能操作,手势交互是不错的选择,这个隐藏的手势体验你是否注意到呢?

10个产品细节剖析,让你看看大厂是如何做设计的!

拖动进度条实时预览画面

从短视频到长视频,内容量的丰富可以满足用户的观看需求,针对长视频来说进度的设计可以便于用户选取感兴趣的部分。

抖音的进度条设计也在不断的探索新的体验,最近更新的版本中在拖动进度条时,会隐藏其他附属的功能,让界面显得更加简洁。拖动进度条时也会实时预览显示视频画面,辅助用户进行精准的内容确定,提高用户的操作效率。

10个产品细节剖析,让你看看大厂是如何做设计的!

10个产品细节剖析,让你看看大厂是如何做设计的!

底部功能区的延伸设计

底部功能区是手势操作的最佳区域,近些年越来越多的产品对该区域进行延伸设计,满足更多功能曝光的目的。

百度翻译 APP 在底部标签栏上方延伸了一个功能区,初次进入时呈现隐藏式设计,单击或者上滑展开全部。延伸功能区为用户提供了更多常用功能,便于进行频繁操作,提升用户的操作体验和效率。

10个产品细节剖析,让你看看大厂是如何做设计的!

情感化的功能引导设计

初次使用一个产品时,针对一些重点功能都会进行引导设计,以此来提高功能的曝光度,降低用户的学习成本。

百度翻译 APP 通过情感化的 IP 形象进行功能引导,可爱的形象趴在功能区上,趣味性十足。情感化设计的融入相较于普通的文字浮层,更能吸引用户的关注度。

10个产品细节剖析,让你看看大厂是如何做设计的!

推荐模块的轮播翻页设计

推荐模块在产品设计中较为普遍,也呈现了各式各样的设计解决方案,结合自身的内容属性进行设计,是体现差异化设计的关键。

最近在喜马拉雅 APP 播客栏目发现了不一样的设计表达,通过专辑封面形式结合辅助解释来设计。不仅结合了自身内容属性,也能在强化视觉感的同时利用文案辅助让解释更加清楚。通过手势滑动进行翻页切换,动态效果也是非常的流畅自然。

10个产品细节剖析,让你看看大厂是如何做设计的!

提高图文布局视野感的设计

在针对新闻、资讯、热点等内容进行布局时,通常有左图右文、左文右图、纯文字布局、轮播图等形式。设计表达考虑了阅读引导和版面利用率,如果需要突出视觉感时,如何进行设计发挥呢?

最近在芒果 TV APP 首页的看点专栏发现了一个感官体验不错的设计,将文字信息以卡片式进行布局,以大图作为背景来衬托卡片。滑动时也会有进度条式的控件提示,整体的视野感更强,更能吸引用户的关注度。

10个产品细节剖析,让你看看大厂是如何做设计的!

微动效增强签到设计的关注度

签到的存在是为了提高用户粘性,通过签到获得积分,兑换礼品或者升级功能服务等权益。提高签到的曝光度才能吸引用户参与,进而达到需求目的。

除了在签到设计的视觉感上面进行强化以外,微动效的表达也是非常不错的选择。快看 APP 就将代表签到的图标通过动效来强化,也能吸引到用户的关注,提高签到的点击率和参与度。

10个产品细节剖析,让你看看大厂是如何做设计的!

辅助图形强化品牌感

立足于品牌做设计,无论是那个方向的设计都需要从品牌的角度进行思考,特别是 UI 设计。通过辅助图形强化品牌感是一个方向,逐步被设计师加以运用。

比如考拉海购 APP 在多个局部区域融入了辅助图形进行强化,将辅助图形作为背景使用。辅助图形结合到 UI 场景中,是 UI 设计师后期需要逐步探索的方向。

10个产品细节剖析,让你看看大厂是如何做设计的!

悬浮动效式空状态设计

空状态代表无数据状态设计,通常形式有纯文案提示、图形加文案提示、情感化插画融入、IP 形象结合、动效表达形式等。在体验的众多案例中,动效形式的表达相对较少,不过感官度也是不错的。

在 COVES APP 中,采用动效式空状态设计来表达无数据状态。在局部的模块还使用了悬浮动效式表达,无论是视觉感还是吸引力都呈现出不错的效果。不仅吸引用户的关注度,也融合了产品的设计风格,是一个不错的设计解决方案。

10个产品细节剖析,让你看看大厂是如何做设计的!

小结

每一次的体验、分析、总结都能吸收新的思路和灵感,有助于我们提高设计的灵活性和解决需求的效率。希望本期的整理可以带给你更多帮助,我们互相进步。

黑马家族

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/231858.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年3月1日 12:03
下一篇 2023年3月1日 12:03

相关推荐

  • 小编教你如何做好高端网站设计看看这些方法。

    电子商务网站越来越受欢迎,但许多企业不知道如何设计好它们。网站设计意味着什么?简而言之,只有通过调整整体布局、框架、风格、图片和文本,网站才能有美丽的视觉呈现和个性化的展示。如果你的购物中心网站只是…

    2023年6月17日
    00
  • 想把表单的用户体验做到极致?这5个细节不容忽视。

    我们每天都在填写各种表单,例如发帖、填单、登录等等。然而,在填写时经常容易出错,例如可能会输错密码。从用户体验角度看,帮助用户尽可能顺利地处理这些错误至关重要。对于我们设计师来说,尤其是现在 B 端设计…

    2023年3月2日 SEO操作
    01
  • 小编教你网站设计复杂吗。

    网站设计没有你想象中那么复杂,如果一个网站看起很炫酷,很独特这说明该网站已经成功了一大半,其实这类网站建设起来并不难,本文小编带大家来分析下该网站建设的方法。 首先,设计风格。上面所说的cute无非就是一…

    2023年6月13日
    01
  • 今日分享如何自己建网站。

    购买域名、选择主机、设计网站、编写代码、测试上线,不断优化更新。 (图片来源网络,侵删) 在当今数字化时代,拥有自己的网站已经成为许多个人和企业展示自己、推广产品和服务的重要途径,那么如何自己建网站呢…

    2024年6月30日
    01
  • 要想改善用户体验友好度,可以通过新颖的搜索栏目框设计。

    网站搜索栏如何使用户体验更好?一个成熟的网站总是充满了大量的内容,如果用户想在短时间内找到他们想要的内容,那么他们必然会使用搜索栏。接下来,优化猩小编将与您分享网站搜索栏设计的技巧,让我们来看看! 1…

    2023年2月18日
    02
  • 用好这些网站设计工具,你的工作效率翻倍。

    通观企业建站公司的项目开发流程,大体上都离不开项目前期沟通、项目立案、网站原型图设计及论证、网页界面视觉高设计、网站前端制作Html生成及交互动效设计、网站后端程序开发、网站测试与基础数据添加、网站验收…

    2023年2月22日 SEO操作
    010
  • 网站设计中最大的7个错误。

    拥有一个吸引用户的独特而有创意的网站设计不再是一个选择,2019年,网站设计中必须具备这些功能。枯燥和老式的网站设计不再可行,因为它们不能吸引注意力或让用户想要进一步探索。用户应该有独特的体验。一个功能…

    2023年2月19日 SEO操作
    00
  • 快速提升 UI 设计效果的14 个小技巧 (UI 设计集-2)。

    编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Mark Andrew 的文章梳理了 14 个实用性很强的 UI 效果提升小技巧,这篇文章由两篇文章组合而成,原文最早发布…

    2023年3月1日 SEO操作
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息