1.理解需求
进入正题,首先第一点,就是要理解需求。身为设计师,在接手一个需求时,首先就要去理解这个需求,不能仅仅从视觉的角度去做需求。
我们来看一个例子,比如说现在要设计页面的头部:
大部分的设计师,可能只会简单的上色然后优化排版就结束了:
我的解决办法是先加一个跑马灯在这里,让用户可以通过滑动去切换查看不同的行程:
怎么办呢?再回来看看整体,现在卡片上的信息都集中在左侧,右侧全是空的,从排版上看这种处理方式并不均衡,显得左重右侧轻:
在卡片的右上角挖一个缺口,放ai的头像和文字
那么从理解需求的角度,就完成了页面的视觉优化。
2.排版
第二点就是排版方面。透过现象看本质,我们从案例中学习:
比如这里,将标题以及日期还有报名信息去给它拆分到图片上面,你就会发现它下面的这些信息就没有那么的累赘、拥挤,而且它整体的排版更加舒适。
3.图形
图形在ui的设计稿中扮演的就是图标的角色,也可以说是当中的形状和容器,就比如说其中的一些卡片的设计,标签以及按钮都是一个容器。
图标:
如果要对原型图进行视觉化,那么可以直接从图标入手。如果说页面中没有图标,那么你就可以添加图标。有图标,就对图标精细化。
在这个页面中没有图标,我们可以直接添加图标来取代文字。
我们需要进一步精细化,这里是将图标换了一种更复杂的风格——轻质感风,让图标在这里的风格化更加明显。
形状/容器:
除了图标之外,页面中的容器可以尝设计成异形。
像这种设计它都有一些缺角,或者每个角的圆角大小不统一,这些都是很通用的一个异形卡片的做法。
比如下面这张页面展示的是电影相关的内容,它就会把每一个容器它给它画成电影票的形式。
最后一点是关于字体的,在进行视觉化的时候可以添加合适的字体设计来为整体画面增加设计感。
比如支付宝的这个页面,我们可以看到上面的标题字都是经过设计的。
第一层:将普通字体换成了带有风格感的字体
总结
以上内容就是 本次分享的如何避免自己的稿子和原型图过于相似,怎么去进行视觉化的4种方向。
最后再来回顾一下这四个点吧:
1.理解需求
2.排版
3.图形
4.字体
希望对大家有所帮助,下期再见!喜欢记得收藏并转发!
加 “星标” ⭐ 精彩文章不错过
觉得有用点击“在看”↓↓