020-29815005
预约专线时间:09:00-23:59

【UI设计培训】七条UI设计视觉表现技巧

新闻来源:优漫教育 日期:2021-12-29
分享在UI设计层面的案例分析,希望可以抛砖引玉,带给大家在设计处理技巧上的经验总结。
  分享在UI设计层面的案例分析,希望可以抛砖引玉,带给大家在设计处理技巧上的经验总结。


【UI设计培训】七条UI设计视觉表现技巧


  01.磨砂玻璃式的金刚区图标设计


  轻质感在UI设计场景中的运用近些年比较明显,以磨砂效果为代表的无论是在图标设计还是界面表现上面都较为常见,特别是在金刚区的图标设计上面。

  喜马拉雅App首页金刚区图标结合磨砂效果呈现,材质感和舒适度都较为突出。实现难度也比较小,通过Sketch软件的背景模煳很容易实现。突出业务以微动效的形式表达,这也是较为常见的差异化设计解决方案之一。

  02.多种模式满足用户不同喜好

  不同用户的操作习惯和感官标准各不相同,越来越多的产品为了满足用户的不同喜好,设计多种模式进行设置切换。最早的就是主题皮肤,逐步延展到更多的功能模块中,比如音乐播放页的布局设置。

  MOO音乐为用户提供了以专辑封面和背景大图来进行播放页的模式设置,用户可以根据自己的喜好进行设置。在进行UI设计的时候无法判断用户的唯一喜好,多种模式的自定义设置更能带给用户良好的体验。

  03.独一无二的个性化首页定制

  随着用户喜好的变化,自定义模式可以满足各自不同的需求,网易云音乐推出了独一无二的个性化首页定制设计。用户可以通过预设的默认模式、歌单模式、视频模式进行选择,为了方便用户判断定制后的效果,可以通过“功能说明”观看预设后的样式,直观的展示提高用户的判断体验。

  自定义模式打破了千篇一律的设计,根据用户的喜好呈现内容,提高了用户粘性和使用体验。

  04.App Banner呈现的裸眼3D效果

  移动端的设计已经越来越成熟,设计师都在寻找新的发力点,不断向细分的功能探索更好的设计体验,而Banner设计也是研究的方向之一。

  突然有一天在使用自如App的时候发现了这个隐藏的“彩蛋”,模拟裸眼3D效果的呈现方式在Banner上面,是一次全新的尝试。通过借助移动设备上的传感器等将2D影像转化为景深效果,以呈现出不用3D眼镜就可看到的3D效果。

  自如

  05.简单的动效不一样的场景代入感

  微动效在产品设计中的运用已经非常普及,特别是在图标中的运用,既能提高图标的关注度,也能体现图标的差异化。就像一个扫一扫的功能图标,加上简单的动效呈现,提高了场景代入感。

  将现实中的扫描动作运用到图标动效的表达上面,既增加了该功能的关注度,也能让主题表达更清晰。

  平安口袋银行

  06.视频引导关注度更强

  引导页是UI设计中较为普遍的存在,而动效的引导和视频形式的引导相较于静态图文形式来说,更能吸引用户的关注度。特别是随着C4D等三维软件的普及,结合立体感和动效形式形成视频引导,也是一种全新的体验。

  07.底部手势区的充分运用

  对于移动端来说,随着大屏手机的普及,手势操作舒适区的研究至关重要。底部操作范围算是手势的最佳区域之一,充分的利用好有利的位置进行更多功能的设计,提高功能的曝光度。

  将一些重点功能通过悬浮层的形式设计在底部,随着交互的变化进行隐藏和显示,也是一种非常不错的设计解决方案。比如平安口袋银行将我的余额、积分兑换、签到、抽奖、领取红包等设计在底部标签栏之上,通过悬浮层的形式呈现,让这些原本隐藏的功能得到了曝光,增加了用户的关注度。