qml中loader加载页面会闪屏_如何解决UI设计中的同质化

d3c22574a5a4705b88abaf3ff08a7255.png

  解决设计同质化问题,是我们每个设计师必须要具备的能力,但是又不能为了不一样而不一样,所以以自身品牌出发来做差异化,才是正确的方式。今天我就给大家讲讲如何解决UI设计中的同质化。

  最近看了很多别人家的app,总结了一些视觉触点,可以融入我们的品牌基因,大概分为以下几类:

  大纲如下:

  1.控件类

  2.页面类

  3.标识类

  4.动效类

  1.控件类

  不用解释太多,这一类就是指一些常用控件,比如按钮、搜索框、弹窗等等,我们可以依次来看下案例

  1.1 按钮

  按钮虽然不适合做全局差异化,但是对于一些特殊化的按钮,是可以有一些特殊化处理的,比如一零零一弹窗上、登录页上的按钮,都有融入一些特殊化的品牌基因:

0f445e701d7b65a0d6cee93f52aa920e.png

  1.2.弹窗

  弹窗是很好融入品牌基因的触点,例如叭哒的弹窗:

3ab212338775a638d9d9d0dc4d57a6d6.png

  1.3 下划线

  大部分app产品中都会有下划线,这是一个非常利于视觉发挥的触点,比如一零零一中,他的下划线,是一个椭圆:

bda8c950b8339e871f7203196285eed6.png

  这个椭圆来自他们家猫猫出来的洞口形状:

4ad900c13c0c616d9d0a5df5bc0385dd.png

  1.4.搜索框

  搜索框很容易被我们忽略,但其实它也可以融入一些品牌基因,比如波洞的机械基因,融入在搜索框的样式:

162e87c6611d359adf3408bfa223b056.png

  就是对搜索框的差异化设计。

  1.5.滑杆

  如果你的产品有播放器体系,那播放器的滑杆,也是可以融合品牌形象的,比如b站和波洞的滑杆:

372ad40b2fa331f5f3f9026cd8819687.png

  但切记形象不要搞得太复杂,不然就有点本末倒置了。

  1.6.占位图

  在图片未加载出来的时候,会有一个默认占位图,这个占位图可以使用品牌符号或者吉祥物,例如波洞的这个占位图:

cfa897fd60db163abf30434e2fac99f4.png

  2.页面类

  这一类一般都是整个页面,比如闪屏啊、活动页面啊、空页面等等。

  我们看看实例:

  2.1 闪屏

  每次打开app都会看到一张闪屏,他的目的是缓解用户等待时间,也是很好的植入品牌的触点,比如哔哩哔哩漫画就用了品牌吉祥物:

765be7da43555d6bf6ff0ae1e21fe1b5.png

  2.2.个人中心

  还是叭哒,个人中心头图也融入了品牌形象:

26066d567b47b42e454802015ba040cc.png

  当然他这个形象不是为了加而加,它配合了养宠物的功能来进行设计的。

  2.3活动入口及活动页面

  我们经常会做一些活动放在产品里,有些活动除了页面头图以外,还会有一个活动入口,这个入口漂浮在页面之上。

  不论是活动入口还是页面头图,如何解决UI设计中的同质化都可以与品牌吉祥物结合来进行设计,比如咚漫的:

09be2d31c0f91503ede4a2dcd91ca01c.png

  2.4.登录页

  登录页是每个产品都会有的,也是很好的植入品牌基因的触点,或是logo、或是品牌形象。

  比如一零零一的登录页面,就结合了品牌形象:

8509e178ca45f7239402b8ac7525a497.png

  2.5.空页面

  空页面就是在页面没有内容时候的一种空状态,很好的一个触点,比如躺平的空页面结合了自家形象,再配合差异化构图:

f515410fe7826d56a7f2b79676b10166.png

  整挺好!

  3.标识类

  以前写过很多关于图标融入品牌基因的文章,图标就是标识类的一种,除此之外还有一些标签、图形之类的都属于标识类,看下案例:

  3.1.图标

  图标这个触点,以前在品牌基因法里经常提到,就不多说了,看下咚漫的这组分类图标,结合吉祥物的表情来设计的:

6e65976be34f32696c5a43f4f9b6e406.png

  还是挺生动有趣的。

  3.2排行榜序号图形

  排行榜都会有前三名,这前三名不整点特殊化处理,怎么显得人家高贵呢,比如颜色方面经常使用的手法就是金银铜,而图形其实就可以从品牌图形来切入,比如闪现一下的前三名就用品牌图形:

09af3b9cf505780b0b7a773cf5d39a42.png

  3.3等级标识

  很多产品都会区分用户的等级,一旦区分就会涉及到很多等级相关的内容,比如等级标识、等级卡片等等。

  这些内容都可以基于自身的品牌形象来进行设计,比如我们看下闪现一下app,他的等级卡片、等级标识,都有用到他们的品牌形象:

6c90634461b997e94cfb3fac25a306af.png

  4.动效类

  4.1.加载动画

  这个触点就不多说了,太多产品都在用了,比如b站的这个小电视:

665bbbef4c32f5c0b1d1c22b80ef73f1.png

  4.1.点击动效

  这除此之外,其实一些点击动效也可以做一些品牌基因的融入,比如波洞进入首页时有一个波纹的品牌动效:

54d4d05f5898ea8e075ac1ba6f328baa.png

  这个动效不仅使用在这里,在icon的点击动效也进行了植入:

609e8d0c329105c91da975a8edf7a837.png

  从而形成了一个非常强烈的记忆点。

  总结

  其实除了这些上面的这些例子外,还有很多都应该都可以于品牌基因相互结合,我这里只当抛砖引玉。

  大家仔细思考,你会发现他们并不是出自同一个app,因为并不是所有的触点都适合我们的产品,切记不能为了差异而差异,产生过度设计的现象。

  长点心,比啥都强!

越努力越幸运:UI设计必备基础知识2​zhuanlan.zhihu.com
53ddd5e22e1e8cf01729c4e2ed3d6584.png
越努力越幸运:UI设计必备基础知识3​zhuanlan.zhihu.com
d8efb313c8799265cb877cbe5edfd4f2.png
越努力越幸运:Ui设计中的按钮设计分析​zhuanlan.zhihu.com
fe8223dce892d56f517e3db66da77bae.png
越努力越幸运:UI设计中的暗黑模式​zhuanlan.zhihu.com
003174fbf6e14b1b0e80f7bb058197f8.png
越努力越幸运:如何在UI设计中达到画面平衡​zhuanlan.zhihu.com
6413cc80fdb592874913bd471eed1d30.png
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值