我被产品经理笑话了,他说我做的设计稿和原型没区别!

用户头像
深圳/学生/1年前/4481浏览
我被产品经理笑话了,他说我做的设计稿和原型没区别!
本次跟大家分享一下如何避免自己的稿子和原型图过于相似,尤其在原型图已经做的比较好的情况下如何进一步的视觉化。
1.理解需求
进入正题,首先第一点,就是要理解需求。身为设计师,在接手一个需求时,首先就要去理解这个需求,不能仅仅从视觉的角度去做需求。
我们来看一个例子,比如说现在要设计页面的头部:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTcyNzI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
你会怎么去进行视觉化?
大部分的设计师,可能只会简单的上色然后优化排版就结束了:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTcyNzY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
但如果你去理解思考一下整个需求,你的设计就会大不同:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTcyODA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
首先是「我的行程」这个功能:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTcyODQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
当用户有「行程信息」时,我尝试将「行程信息」直接外放是否更合适,更友好呢
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTcyODg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
如果有多个行程信息时,又该怎么去展示?
我的解决办法是先加一个跑马灯在这里,让用户可以通过滑动去切换查看不同的行程:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTcyOTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
然后在卡片下面再叠一张卡片,从视觉上体现出它是有多个的:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTcyOTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
接着,原型图中还有个ai自动规划行程的功能:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMDA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
这个摆放的位置要如何处理?首先先要意识到这个功能的展示层级是弱于「我的行程」这张卡片的。所以在处理上我们不能很粗暴的直接放上去:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMDQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
这样做会显得很乱,没有主次。
怎么办呢?再回来看看整体,现在卡片上的信息都集中在左侧,右侧全是空的,从排版上看这种处理方式并不均衡,显得左重右侧轻:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMDg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
所以能不能考虑把ai推荐的功能挪到右侧去展示?
在卡片的右上角挖一个缺口,放ai的头像和文字
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
设计就和下棋对弈一般,我们要走一步看三步。放置好ai头像和对话之后,你会发现左侧还有一片空白。我们可以用天气来填补,还可以更好的为用户提供帮助。
那么从理解需求的角度,就完成了页面的视觉优化。
2.排版
第二点就是排版方面。透过现象看本质,我们从案例中学习:
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
这是一张很常见的小卡片,这样的排版没有什么问题。但是我们可以将排版处理的更好!
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMjA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
如果不知道该如何下手,我们可以先试着拆分,将一个整体拆分成多个部分。
比如这里,将标题以及日期还有报名信息去给它拆分到图片上面,你就会发现它下面的这些信息就没有那么的累赘、拥挤,而且它整体的排版更加舒适。
3.图形
图形在ui的设计稿中扮演的就是图标的角色,也可以说是当中的形状和容器,就比如说其中的一些卡片的设计,标签以及按钮都是一个容器。
图标:
如果要对原型图进行视觉化,那么可以直接从图标入手。如果说页面中没有图标,那么你就可以添加图标。有图标,就对图标精细化。
在这个页面中没有图标,我们可以直接添加图标来取代文字。
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMjQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
这个页面中已经有了图标了,所以我们要对图标精细化的处理。
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMjg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
如果在原型图的基础上,对图标造型进行优化,发现整体设计和原型图的区别并不是很大(如设计1)
我们需要进一步精细化,这里是将图标换了一种更复杂的风格——轻质感风,让图标在这里的风格化更加明显。
形状/容器:
除了图标之外,页面中的容器可以尝设计成异形。
像这种设计它都有一些缺角,或者每个角的圆角大小不统一,这些都是很通用的一个异形卡片的做法。
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMzI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
还有一些异形会根据设计的内容去变化。
比如下面这张页面展示的是电影相关的内容,它就会把每一个容器它给它画成电影票的形式。
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczMzY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
又比如是跟优惠券相关的内容,它的容器就做成了优惠券的形式。
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczNDA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
除此之外,我们可以根据品牌或者说ip的角度去设计容器。
比如下面这个例子,就把小标签做成了小猫的形式,这个小猫其实是app里的吉祥物。
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczNDQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
4.字体
最后一点是关于字体的,在进行视觉化的时候可以添加合适的字体设计来为整体画面增加设计感。
比如支付宝的这个页面,我们可以看到上面的标题字都是经过设计的。
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczNDg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
你能看出它有几层的设计细节吗,我们一起来拆解看一下。
第一层:将普通字体换成了带有风格感的字体
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczNTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
第二层:将字体做成倾斜的,并将当中部分笔画改成闪电icon
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczNTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
第三层:和品牌logo结合,延展到多个字体的设计当中
我被产品经理笑话了,他说我做的设计稿和原型没区别!(图ZMTQ4NTczNjA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
收藏
一般的字体设计到达第二层就已经差不多了,如果想要更好,可能就需要做到第三层,让整体设计更具差异化和品牌传播性。
总结
以上内容就是 本次分享的如何避免自己的稿子和原型图过于相似,怎么去进行视觉化的4种方向。
最后再来回顾一下这四个点吧:
1.理解需求
2.排版
3.图形
4.字体
希望对大家有所帮助,下期再见!
153
举报
|
168
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
手表表盘UI系列
UI应用平面图标
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】体育icon
新能源APP应用UIKit
UI通用设计素材1
Security Camera UI kit
高级表盘系列UI源文件
我的钱包-UI界面设计-app
科技医疗透明柜UI界面设计
盲盒APP UI设计
【新年UI图标】相机icon
钱包ui模板
【新年UI图标】银行卡icon
【新年UI图标】礼物/活动icon
户外旅行飞机情侣假日出行
智能家居中心 简约 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】活动icon
UI界面 组件
新拟态风格 UI设计组件库
UI 登录界面设计模板包
【新年UI图标】积分icon
你可能喜欢
相关收藏夹
大家都在看
登录注册