恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
优漫动游一些被忽略的UI设计表现技巧
0.0°
2023-05-30 好文转载 经验/观点 原作者: 未知 举报 295 0 0 0

作为UI设计师来说,都是一群细节猎人,以像素级的细节刻画着每一个需求。

  设计师/设计进阶讲师
  作为UI设计师来说,都是一群细节猎人,以像素级的细节刻画着每一个需求。日常的体验积累也总能发现那些优秀的设计解决方案,以此来强化自己的设计认知,提高设计思维和变通能力。
  定期体验产品,记录优秀的设计解决方案和反思设计背后的思路,有助于提高专业层面的综合能力。小优也会定期为大家带来个人的体验总结,希望可以带给大家更多帮助。本期给大家带来的感官体验内容涉及手势交互、功能区延伸设计、情感化设计、微动效、悬浮动效设计等等。
  一、利用手势交互实现自动跳转
  随着手势交互的不断成熟,被普遍的应用到产品设计中。利用手势的辅助可以缩短用户的操作路径,通过不断优化用户的学习成本,带给用户更加便利的操作体验。
  通过指向按钮的引导可以让用户抵达需求目的,需要用户进行点击操作。针对横向滑动的交互输出中,在连贯的滑动操作中配合手势交互,随着滑动力度的不同可以实现自动跳转。比如开言英语APP课程模块中,针对推荐的课程卡片在向左滑动过程中,随着滑动的程度提示“查看更多”和“释放查看”,实现详情内容的自动跳转。对于需要查看更多推荐内容的用户来说,减少了二次点击的步骤,提高了操作的便捷度和使用效率。
  二、手势交互带来的切歌体验
  手势交互能够带给用户使用的便捷度,不过目前很多产品的手势玩法都还有待用户去挖掘。功能层面是否“暗藏玄机”需要用户的深度体验,如果可以培养用户的使用习惯,带来的便捷度和体验度都会进一步提升。
  在QQ音乐主页底部标签栏上方会浮层展示播放器,方便用户操作正在播放的歌曲。可以通过左右滑动的手势进行切歌体验,对于盲选歌曲来说非常便利。在不改变当前布局结构的基础上新增功能操作,手势交互是不错的选择,这个隐藏的手势体验你是否注意到呢?
  三、拖动进度条实时预览画面
  从短视频到长视频,内容量的丰富可以满足用户的观看需求,针对长视频来说进度的设计可以便于用户选取感兴趣的部分。
  抖音的进度条设计也在不断的探索新的体验,最近更新的版本中在拖动进度条时,会隐藏其他附属的功能,让界面显得更加简洁。拖动进度条时也会实时预览显示视频画面,辅助用户进行精准的内容确定,提高用户的操作效率。
  四、底部功能区的延伸设计
  底部功能区是手势操作的最佳区域,近些年越来越多的产品对该区域进行延伸设计,满足更多功能曝光的目的。
  百度翻译APP在底部标签栏上方延伸了一个功能区,初次进入时呈现隐藏式设计,单击或者上滑展开全部。延伸功能区为用户提供了更多常用功能,便于进行频繁操作,提升用户的操作体验和效率。
  五、情感化的功能引导设计
  初次使用一个产品时,针对一些重点功能都会进行引导设计,以此来提高功能的曝光度,降低用户的学习成本。
  百度翻译APP通过情感化的IP形象进行功能引导,可爱的形象趴在功能区上,趣味性十足。情感化设计的融入相较于普通的文字浮层,更能吸引用户的关注度。
  六、推荐模块的轮播翻页设计
  推荐模块在产品设计中较为普遍,也呈现了各式各样的设计解决方案,结合自身的内容属性进行设计,是体现差异化设计的关键。
  七、提高图文布局视野感的设计
  在针对新闻、资讯、热点等内容进行布局时,通常有左图右文、左文右图、纯文字布局、轮播图等形式。设计表达考虑了阅读引导和版面利用率,如果需要突出视觉感时,如何进行设计发挥呢?
  八、微动效增强签到设计的关注度
  签到的存在是为了提高用户粘性,通过签到获得积分,兑换礼品或者升级功能服务等权益。提高签到的曝光度才能吸引用户参与,进而达到需求目的。
  除了在签到设计的视觉感上面进行强化以外,微动效的表达也是非常不错的选择。快看APP就将代表签到的图标通过动效来强化,也能吸引到用户的关注,提高签到的点击率和参与度。
  九、辅助图形强化品牌感
  立足于品牌做设计,无论是那个方向的设计都需要从品牌的角度进行思考,特别是UI设计。通过辅助图形强化品牌感是一个方向,逐步被设计师加以运用。
  十、悬浮动效式空状态设计
  空状态代表无数据状态设计,通常形式有纯文案提示、图形加文案提示、情感化插画融入、IP形象结合、动效表达形式等。在体验的众多案例中,动效形式的表达相对较少,不过感官度也是不错的。
  在COVESAPP中,采用动效式空状态设计来表达无数据状态。在局部的模块还使用了悬浮动效式表达,无论是视觉感还是吸引力都呈现出不错的效果。不仅吸引用户的关注度,也融合了产品的设计风格,是一个不错的设计解决方案。
  小结
  每一次的体验、分析、总结都能吸收新的思路和灵感,有助于我们提高设计的灵活性和解决需求的效率。希望本期的整理可以带给你更多帮助,我们互相进步。

Powered by Froala Editor

更新:2023-05-30

收藏

0人已收藏

今天冇想上班

我就打打工的大老板

  • 225

    作品

  • 1

    粉丝

  • 0

    关注

  • 分享几个设计生成工具优漫教育
  • 交互设计之五要素优漫教育
  • UI界面视觉设计之和图标优漫教育
  • 为什么有人说UI就业不好该如何掌握高端技能优漫教育

    猜你喜欢

      2023-05-30 好文转载 经验/观点 原作者: 未知 举报 295 0 0 0

      优漫动游一些被忽略的UI设计表现技巧

      0.0°

      你确定要举报优漫动游一些被忽略的UI设计表现技巧

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2023年05月30日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      0
      0
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录