企业为什么需要UI设计?与产品经理的工作差异在哪?

2025-1-26    资深UI设计者 设计管理与成长

 
 
 
 
 
本次跟大家分享一下如何避免自己的稿子和原型图过于相似,尤其在原型图已经做的比较好的情况下如何进一步的视觉化。
 
 
1.理解需求
进入正题,首先第一点,就是要理解需求。身为设计师,在接手一个需求时,首先就要去理解这个需求,不能仅仅从视觉的角度去做需求。
我们来看一个例子,比如说现在要设计页面的头部:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
你会怎么去进行视觉化?
大部分的设计师,可能只会简单的上色然后优化排版就结束了:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
但如果你去理解思考一下整个需求,你的设计就会大不同:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
首先是「我的行程」这个功能:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
当用户有「行程信息」时,我尝试将「行程信息」直接外放是否更合适,更友好呢
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
如果有多个行程信息时,又该怎么去展示?
 
我的解决办法是先加一个跑马灯在这里,让用户可以通过滑动去切换查看不同的行程:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
然后在卡片下面再叠一张卡片,从视觉上体现出它是有多个的:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
接着,原型图中还有个ai自动规划行程的功能:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
这个摆放的位置要如何处理?首先先要意识到这个功能的展示层级是弱于「我的行程」这张卡片的。所以在处理上我们不能很粗暴的直接放上去:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
这样做会显得很乱,没有主次。
怎么办呢?再回来看看整体,现在卡片上的信息都集中在左侧,右侧全是空的,从排版上看这种处理方式并不均衡,显得左重右侧轻:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
所以能不能考虑把ai推荐的功能挪到右侧去展示?
 
 
在卡片的右上角挖一个缺口,放ai的头像和文字
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
设计就和下棋对弈一般,我们要走一步看三步。放置好ai头像和对话之后,你会发现左侧还有一片空白。我们可以用天气来填补,还可以更好的为用户提供帮助。
 
那么从理解需求的角度,就完成了页面的视觉优化。
 
 
2.排版
第二点就是排版方面。透过现象看本质,我们从案例中学习:
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
这是一张很常见的小卡片,这样的排版没有什么问题。但是我们可以将排版处理的更好!
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
如果不知道该如何下手,我们可以先试着拆分,将一个整体拆分成多个部分。
 
比如这里,将标题以及日期还有报名信息去给它拆分到图片上面,你就会发现它下面的这些信息就没有那么的累赘、拥挤,而且它整体的排版更加舒适。
 
 
 
3.图形
图形在ui的设计稿中扮演的就是图标的角色,也可以说是当中的形状和容器,就比如说其中的一些卡片的设计,标签以及按钮都是一个容器。
 
图标:
如果要对原型图进行视觉化,那么可以直接从图标入手。如果说页面中没有图标,那么你就可以添加图标。有图标,就对图标精细化。
 
在这个页面中没有图标,我们可以直接添加图标来取代文字。
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
这个页面中已经有了图标了,所以我们要对图标精细化的处理。
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
如果在原型图的基础上,对图标造型进行优化,发现整体设计和原型图的区别并不是很大(如设计1)
我们需要进一步精细化,这里是将图标换了一种更复杂的风格——轻质感风,让图标在这里的风格化更加明显。
 
 
 
形状/容器:
除了图标之外,页面中的容器可以尝设计成异形。
 
像这种设计它都有一些缺角,或者每个角的圆角大小不统一,这些都是很通用的一个异形卡片的做法。
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
还有一些异形会根据设计的内容去变化。
 
 
比如下面这张页面展示的是电影相关的内容,它就会把每一个容器它给它画成电影票的形式。
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
 
又比如是跟优惠券相关的内容,它的容器就做成了优惠券的形式。
 
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
 
除此之外,我们可以根据品牌或者说ip的角度去设计容器。
 
 
比如下面这个例子,就把小标签做成了小猫的形式,这个小猫其实是app里的吉祥物。
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
 
 
4.字体
最后一点是关于字体的,在进行视觉化的时候可以添加合适的字体设计来为整体画面增加设计感。
比如支付宝的这个页面,我们可以看到上面的标题字都是经过设计的。
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
你能看出它有几层的设计细节吗,我们一起来拆解看一下。
 
 
第一层:将普通字体换成了带有风格感的字体
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
第二层:将字体做成倾斜的,并将当中部分笔画改成闪电icon
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
第三层:和品牌logo结合,延展到多个字体的设计当中
我被产品经理笑话了,他说我做的设计稿和原型没区别!
 
 
一般的字体设计到达第二层就已经差不多了,如果想要更好,可能就需要做到第三层,让整体设计更具差异化和品牌传播性。
 
 
总结
以上内容就是 本次分享的如何避免自己的稿子和原型图过于相似,怎么去进行视觉化的4种方向。
最后再来回顾一下这四个点吧:
1.理解需求
2.排版
3.图形
4.字体
希望对大家有所帮助,下期再见!

 

 
 
作者:菜心轻量文
链接:https://www.zcool.com.cn/article/ZMTYyOTAyOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档