品牌驱动UI设计进阶
2020-08-12 本文已影响0人
celeryzzz
针对设计师的T型能力模型?
横向的要求会的比较广泛:运营设计、动效设计、视觉设计、插画、产品;
纵向要求会的深度:项目经验、方法论、数据理解;
![](https://img.haomeiwen.com/i12467223/ec96e0143139c662.png)
1:如果通过品牌设计思维,做出具有品牌感的banner?
案例:生鲜主题banner (设计来源于生活)
![](https://img.haomeiwen.com/i12467223/3fb8315160c30198.png)
时光机联想:回到小时候(回家的小路); 菜板台面; 立体感:厨房的台面;
![](https://img.haomeiwen.com/i12467223/43be81d1f7f1b856.png)
![](https://img.haomeiwen.com/i12467223/80b70f1c54188dbb.png)
案例2:通过以下文案(用听的也能过教资)完成一个插画类的banner设计;
利用的方法论: 4W场景分析(什么人,什么时间,什么地点,做了什么事?)
![](https://img.haomeiwen.com/i12467223/8d059cbdcead577d.png)
有效的文案分析思路:
(1)听什么? (2)在哪儿听? (3)用什么听?
![](https://img.haomeiwen.com/i12467223/c04c4c73b5d79e5c.png)
![](https://img.haomeiwen.com/i12467223/b9723f2964ab954e.png)
![](https://img.haomeiwen.com/i12467223/7eee9cc87a2ae5c8.png)
![](https://img.haomeiwen.com/i12467223/938c4f847c89f1e9.png)
![](https://img.haomeiwen.com/i12467223/eba8a3fd146b2001.png)
4w(who、when、where、what)场景分析应用场景:
场景1:运营文案场景分析,关键词查找;
场景2:UI界面中;
案例:外卖APP中:
![](https://img.haomeiwen.com/i12467223/b88371d1dff259d9.png)
案例:买票APP中:
![](https://img.haomeiwen.com/i12467223/0324d735adc849ae.png)
在首页中展示快捷入口,让用户在首页中快速获取取票信息;帮用户减少一些操作,即交互减步长;
![](https://img.haomeiwen.com/i12467223/19327c61ee173a3d.png)
![](https://img.haomeiwen.com/i12467223/5e8bc8ce32b2f4de.png)
图标设计中,怎么融入品牌细节?
情绪板方法论:
![](https://img.haomeiwen.com/i12467223/674d02d0ce7fdd79.png)
案例:金融类产品icon设计
通过图片推导出合理的细节
![](https://img.haomeiwen.com/i12467223/d7257251108aaee2.png)
可靠性:圆润的造型; 安全感和稳重感;
![](https://img.haomeiwen.com/i12467223/b002b2223ef6c72f.jpg)
除了用于图标设计,还可以用于IP形象设计打造;
![](https://img.haomeiwen.com/i12467223/b07edd49550b0e93.png)
将品牌细节融入到UI设计当中;
品牌形象要符合产品战略、服务定位
大众点评图标案例:
![](https://img.haomeiwen.com/i12467223/3ba9fdbfb6c52137.png)
1:根据分析用户描述和产品定位分析出产品关键词:
![](https://img.haomeiwen.com/i12467223/ee6b79121bbc6ea1.png)
2:根据关键词,情绪板图库中找出图片参考:
![](https://img.haomeiwen.com/i12467223/b722987289e77e41.png)
3:提炼出图标用色:
![](https://img.haomeiwen.com/i12467223/8b690193be8e7d30.png)
UI设计中的导航栏:
(1)导航栏的由来:生活中的指路牌
![](https://img.haomeiwen.com/i12467223/67fab08419a38341.png)
![](https://img.haomeiwen.com/i12467223/1e14f66cac92bc0e.png)
导航栏
![](https://img.haomeiwen.com/i12467223/f4fe14f675eaae36.png)
导航栏搜索框要怎么做?
分析:在做导航栏搜索框的时候,需要首先跟产品沟通,需要强化的是搜索框的功能?还是搜索框两边的功能?
下图:01淘宝强调搜索框两边的功能; 02强调搜索框; 03强调两边功能。
![](https://img.haomeiwen.com/i12467223/39c28bcc67614985.png)
搜索框如何融入品牌元素?
飞猪的搜索框在右上角融入了飞猪品牌logo的飞扬刘海;
![](https://img.haomeiwen.com/i12467223/8929e88ef01d66e4.png)
![](https://img.haomeiwen.com/i12467223/e56c4a241a5ce9ee.png)
天猫的品牌容器,很常见的;
![](https://img.haomeiwen.com/i12467223/e0f3b0e6494ad9bd.png)
下图的导航栏背景,哪个更加通透一点?
左边的通栏导航栏更加通透一点,右边更加强调品牌色; 若要是强调导航栏上的功能,右边更好;
![](https://img.haomeiwen.com/i12467223/658fc1992ea4fa55.png)
![](https://img.haomeiwen.com/i12467223/3b146c8e7388e839.png)
![](https://img.haomeiwen.com/i12467223/046c7916cdca77ec.png)
![](https://img.haomeiwen.com/i12467223/d0f5e8232fce7381.png)
![](https://img.haomeiwen.com/i12467223/c7a8ab4ce29acbbf.png)