回答

收藏

搬运--UI岗拿到笔试题,如何做?(二)

数字艺术学院 数字艺术学院 583 人阅读 | 0 人回复 | 2021-01-20

接上篇
5.视觉第一还是落地第一
这个仔细审题就行,一般题目里会写到,比如有几个关键词会体现:如果出现类似“大胆发挥”、“不拘泥于现有视觉形式”、“突破当前风格”这种,那么你就可以适当的去突破一下视觉层面的东西,这个的意思就是让你充分发挥自己的设计优势,在当前测试图页面上做个视觉突破。


那么测试题应该具体细化到什么程度呢?个人认为主要要做以下几个部分,也可以理解成几个页面,顺序是这么来的:
第一步:找竞品
找市面上音乐类app top前三,然后把首页截图下来,分析他们的视觉特性和功能特性;要注意:目的是做竞品分析,不是让你去抄他们的设计,要分析它们哪里做的好,哪里做的不好;其实找竞品的过程也是给自己一个熟悉的过程,除了国内top三外,国外的也可以找出来进行分析,这是一个必要的过程,往文档内贴图的时候,也要注意一下排版,不要随随便便就放上去了,要知道,测试题不光看页面,任何地方都在体现着一名设计师的基本功。

第二步,做一些精致的东西
根据题目,绘制icon(分金刚区和导航区),为什么要单独拿出来说呢?这里要提的一点是:icon一定要好好画,而且要精致,icon是体现UI设计师基本功的一个重要的点,切忌不要去下载,有时候你下载的未必统一!UI的笔试题,肯定有icon的部分,是否出彩,是否能博人眼球,在这里会体现一下,比如我自己的排版:


第三步:开始做图
首先要搭大框架,从顶部状态栏一直到底部导航栏,这里要做几个统一:
1.如果没有特别的要求,一般用iPhone x尺寸来做,明确好状态栏、navbar、内容区、底部导航栏的高度(底部导航3-5个图标,要分布好对齐关系)
2.页面边距,一般都是16或者20。
3.统一字体字重行高间距(以2倍图为例,一般最小字号24,以4逐渐递增,那么就是24、28、32这样,最小注释差不多就是20的样子,特殊情况除外。间距一般是8的倍数递增,8、16、24 以此类推。)
4.统一卡片(卡片圆角、卡片间距)
5.统一标题与正文的字体与间距(标题一般是加醋,字号没有固定样式,看具体需求。)

做图的过程中,我们尽量去考虑哪些地方可以考虑有一些创意,比如最近流行的毛玻璃icon风格,就可以融入一些等等。
特别注意的是:我们在做完界面的时候,最好在包装的时候,写明界面里的一些点,你是如何思考的,最好用简短的文案描述清楚,有理有据,说明情况,可以让面试官一目了然。
第四步,找图
这步可以和第三步并行。俗话说三分在画,七分在表。那么界面可以说是三分在做,七分在图了,特别是音乐类这些有专辑图的界面里,所以找一些高级感的图来提升品质感,这里就会涉及一个审美的问题,可能又有人问我怎么来提升审美?其实提升审美一方面是基本功到位的情况下,随着阅历的提示而提升;如果不是科班出身,那么可以下载几个好的app、或者有好的设计杂志、或者用eagle可以收藏很多精美的图片来提升自己的审美感。下面我放几个自己做的app界面,图是不是可以撑起来整体质感呢?下面放一些我自己做的UI:
以上UI设计里的图片,是不是可以撑起来整个UI的质感呢?

第五步,细节决定成败
大家在软件里做完界面后,一定要在手机里预览一下,sketch可以从applestore里下载mirror,figma可以在applestore里下载figma,直接搜就行;ps好像也有,最笨的办法就是导出2倍图在手机里查看最终效果,来走查一些UI细节问题那么需要走查的细节都有哪儿呢?
1.字体字号字重(字号不要超过3种,字重不要超过2种,特殊情况除外)
2.间距是否统一。
3.卡片圆角是否统一。
4.金刚区icon或者导航icon视觉重量是否一致。
5.整体品牌色渗透是否足够。
6.是否有创意点(一个即可)
接下篇

高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则