UI岗拿到笔试题,如何做?测试题面试ui

www.zcool.com.cn/article/ZMTIxODQ0NA==.html

为什么要做笔试题呢?

对于公司来说

考察面试者的真实能力,近些年陆陆续续作品集造假太多了,如果没有笔试题,面试者进入公司做的东西和作品集相差甚远,那么公司付出的成本会是很多很多。这方面主要考虑的是公司人力成本。

对于自身而言

之前也收到过测试题,也有同学让我看过测试题,同时也给面试者发过测试题。大多数初级设计师的测试题基本就是一张图片,jpg的格式就发过去了,怎么说呢,个人不太建议这么做,太简单了。如果我是面试官,我希望看到的是你全局的一个思考以及对一个产品或者需求的理解,其实测试题也是一个需求,那么最好的方式就是以pdf的形式提交,如果会做动画(前提是动画效果细腻入微,不生硬;如果你的动画比较硬或者只是会动,那么不建议去做,这样暴露了你的短板),那么就是pdf+mp4的形式提交。

设计工具

UI做测试题的话,现在国内大厂基本都在用sketch+蓝湖,但是部分大厂已经开始用figma了,我也是近期才接触figma,已经体验到了它的强大,未来趋势差不多也是figma没跑儿了,那么简要的说一下figma的强大在哪儿:

1.sketch缺点

之前用了两年sketch,毛病太多;第一,更新太频繁,组内每个同学使用的版本都不一样,如果互传源文件的话,版本低的是不是很吃亏,打不开!而且源文件过大的话,传输速度太慢,有时候因为网络问题中断,影响效率。第二,有时候太卡了,导致软件崩溃,你之前做的都白做了。第三,上传蓝湖后,新版的蓝湖14天后,链接失效,是不是还得重新给?项目多了,找半天,效率又低了吧?

2.figma优势

第一,快速;其实界面和xd用起来有点类似那种感觉,而且至今不会卡死。第二,同时多人在线编辑,这几乎是figma最大的优势了,没有哪个设计软件是同时多人在线编辑的,便于实时反馈信息,收集信息,加强团队沟通成本。第三,只需要一个软件,就能完成PM需求-UX交互-UI设计-研发的过程,是不是很爽。

不过最后还是要迎合团队用什么设计软件。

比如你要做一个某音乐类app的首页改版设计的测试题,切忌拿到题目马上开始撸图。首先要明确哪个前提?

1.充分的进行思考

拿到笔试题,首先先看需求,我们做笔试题其实也是在做一个需求,然后大致浏览一下原型图结构,明确需求后,再开始做。这里需要强调一点是:如果看需求后有疑问,一定要去和面试官主动沟通,不要不懂装懂,自以为是,结果提交上去的提示题不尽人意,切忌不要害羞,要主动大胆的去表明自己的困惑。

2.品牌色

切忌改人家的品牌色,是什么颜色就用什么颜色,如果没有给你提供色值,你就打开app用吸管吸就行。品牌色是体现一个app属性最终要的途径之一,不要随意改动。

3.分析原型图

切忌做原型的美工,意思就是你把人家的原型图照搬过来,上个色就完事了,那还要ui干啥!你需要梳理当中的交互逻辑以及跳转逻辑,还有功能,原型图中功能点的摆放是否还有最优解法,举个例子:

我们要针对原型图的设计,来设计可以解决用户问题的UI设计,也就是所谓的最优解法:

4.不要随意增删东西

不要增加和删除人家测试题里的东西,一个都不行!!如果实在有自己的创意点,建议你按照人家的出一版,随后将你的创意点再出一版,而且要说明为啥这么做)

5.视觉第一还是落地第一

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

那么测试题应该具体细化到什么程度呢?个人认为主要要做以下几个部分,也可以理解成几个页面,顺序是这么来的:

第一步:找竞品

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

第二步,做一些精致的东西

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

第三步:开始做图

首先要搭大框架,从顶部状态栏一直到底部导航栏,这里要做几个统一:

1.如果没有特别的要求,一般用iPhonex尺寸来做,明确好状态栏、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.是否有创意点(一个即可)

第六步,测试题包装(尺寸1920*1080)

牛逼的界面做完了,那么并不是就完事了,需要进行包装一下,显得完整、专业一些,证明你的态度也是很诚恳并且也是对本次面试的一种认真。那么如何包装呢?控制在10页内就行,以下是包装过程:

1.封面(1页)

封面主要考验你的版式能力和视觉基础,个人认为简洁就好,不用做的特别复杂~

2.竞品分析(1-2页)

把你做测试题前提调研的过程,得出的分析结论(一定是正确的结论)放进去,简单一些,不用写太多冗余的文字。控制在2页就行。

3.规范类(1-2p)

放一些你做的精致图标,出彩的东西,比如金刚区图标,功能类图标;然后再加一些辅助线,证明专业性。同时可以放一些颜色规范,字体规范,栅格规范等等。

4.主界面(要加分析,2-3p)

-先放设计好的界面,这一页要加一些你的思考,也就是说在这个页面里,你为什么这么做,一些理论依据,可以加一些站在用户角度思考的点。

-如果测试题邮件里发了旧的页面,让你改版设计,那么这一页你可以左右布局,左边放旧页面,右边放新设计的页面,形成左右对比可以让面试官一眼能看出来差异,同时也要放一些文案说明,写一下哪儿设计的好,为什么这么做。

5.页面单独包装(1p)

可以下载一些精致度很高的样机,把你设计的页面包装一下,模拟真实场景下的使用情景。

6.尾页(1p)

也就是“谢谢”“期待您的联系”这类的话语,明确一点就是:最好从封面开始到中间页到结束,每页都要与首页的颜色有关联,有始有终,版式设计上要讲究。

第七步,导出-文件命名

我们在软件里做完后,需要整合成pdf形式,推荐adobeAcrobat,里面自带压缩,最好保证在10M内,5M内极佳。文件命名为:测试题名字-姓名-日期。

Adobeacrobat的压缩方式,下图:

第八步,发送邮件

以为第七步就完事了对吗?那大大错了!第七步也是很重要的,标题这块,一定要写,有的同学不写标题;还有的不写正文;更离谱的写了标题正文,附件竟然忘了上传。。。那么具体应该是这样的:

-邮件标题:******测试题

-正文格式(参考):

您好,笔试题在附件中,请查收下载~

期待加入***公司**设计部,谢谢~

记得要上传附件!记得要上传附件!记得要上传附件!

关于笔试题基本就是这些情况,做到面面俱到,专业能力没问题,沟通能力到位,那么剩下的就看运气了,其实面试和笔试题,有一部分真的是运气成分占了很多,所以大家不要觉得一次的面试失败或者笔试题失败就觉得自己不行,如果自己真的能力达到要求了,却没有通过,那么就不是你自己的问题了,就是公司或者部门以及面试官那边的问题。好的公司这么多,总有一个会成功的~

THE END
1.在线PSPS软件网页版,ps在线图片处理工具photopea稿定设计PS是一款专业精简的在线ps图片处理软件,免下载、免安装,直接在浏览器打开网页版就可随时随地用它修正,调整和美化您的图片。https://ps.gaoding.com/
2.在线原型图,推荐这些原型图工具原型图在产品开发中起着重要的作用,它可以帮助公司评估产品的功能性和可操作性,确定产品的效果。为了提高原型图的质量,设计师们会注意到每一个细节。使用在线画原型图工具可以方便设计师掌握原型图设计技巧,并将这些技巧应用到自己的原型图中。 此外,在线画原型图工具具有一些独特的优势,比如不需要下载安装、方便团队https://js.design/special/article/online-prototype-drawing-tools.html
3.哪些在线工具适合制作App原型图?制作App原型图是重要的一步,可以帮助开发团队理解和共享设计想法,并提供给用户和利益相关者可视化展示。本文介绍了几个流行的在线工具,包括Adobe XD、Sketch、Figma、InVision和Proto.io,它们提供了丰富的功能和灵活的界面,可以创建逼真的原型,包括交互式动画、过渡效果和页面链接。选择适合自己需求和偏好的工具,以完美呈http://www.apppark.cn/t-53132.html
4.即时原型即时原型(原xiaopiu)是产品原型设计工具和团队实时协作平台,作为产品经理和交互设计师工作学习的必备软件工具,堪称快速原型交互设计神器。可制作手机app、web网站网页、桌面应用软件的原型,拥有海量原型交互模板资源素材,可替代axure在线使用无需下载https://www.xiaopiu.com/
5.十个完全免费的网页原型(线框图)工具梦想天空(山边小溪)fluidIA是一个在线的但是可以下载的富用户界面原型设计工具。它基于面向对象的理念,可以让你快速完善。它设计的基本思想是团队中的任何成员,无论是设计师还是工程师都可以自由的设计自己的原型。最近fluidIA的更新稍微慢了点,但是它仍是一个非常优秀的线框图工具。 https://www.cnblogs.com/lhb25/archive/2011/02/26/1964294.html
6.免费原型图设计工具,先收藏这9个!在当今迅速发展的数字化世界中,原型图设计工具无疑是设计师们必不可少的利器。一个高效易用的工具,不仅可以使设计流程更为顺畅,还可以有效提升设计质量。在这个富有竞争力的市场上,有许多优秀的免费原型图设计工具可供选择。以下是我们精选的9款免费原型图设计工具,我https://pixso.cn/designskills/free-prototype-design-tool/
7.产品原型图是什么意思原型制作工具 作为数字原型最常见的原型制作形式,可以使用专门为原型制作的应用程序和软件来构建数字原型。比如常见的摹客、sketch、axure,您甚至可以使用演示软件制作简单的数字原型。 HTML原型 这一类是适合有编码能力的设计人员。因为它对PM要求较高。 学习产品原型图,对很多设计人员来说,还是很有必要的,如果你对这一https://www.hxsd.com/content/27094
8.ProcessOn思维导图流程图在线画思维导图流程图ProcessOn是一款专业在线作图工具和知识分享社区,提供AI生成思维导图流程图。支持思维导图、流程图、组织结构图、网络拓扑图、鱼骨图、UML图等多种图形,同时可实现人与人之间的实时协作和共享,提升团队工作效率。https://www.processon.com/
9.蓝湖mastergo官网蓝湖mastergo,在线原型图设计工具,为团队协作而生的一站式产品设计工具 标签:原型设计工具 1+1-001+ 链接直达 ?>1.免费ai视频生成+写作(可联网)?>>2.免费ai视频神器推荐3.免费ai写作绘画 蓝湖mastergo官网-在线原型图设计工具,为团队协作而生的一站式产品设计工具 https://biemoyu.com/sites/mastergo.html
10.在线作图工具:ProcessOn,流程图思维导图原型图UML图等这两天项目要结束了,领导让写设计文档。于是,涉及到了流程图、类结构图、思维导图之类的。然后我的电脑上装的office2013并没装viso,于是就在网上搜了下有什么替代品,发现还真有不少呢,其中个人觉得很不错的免费在线工具:ProcessOn。 简介:ProcessOn是一个方便易用、免费高效的在线作图工具,运用它可以免费制作多种https://www.jianshu.com/p/de31ebe40a8e
11.分享10款非常实用的在线网站原型设计工具建站经验网站运营在线原型工具相比于桌面版有得天独厚的优势,它不需要安装、不限制地点、不限制操作系统,无论你使用的Linux,Solaris, Mac 还是Windows,你都可以使用这些工具。下面小编就为大家推荐10款非常实用的在线原型设计工具,相信总有一款你会喜欢 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! https://www.jb51.net/yunying/308561.html
12.耐RP摹客RP是一款专业的在线快速原型设计工具,具有强大的交互能力,支持多人协作,能够全面覆盖设计需求,并满足多种应用场景。https://pidoutv.com/sites/5816.html
13.8款免费原型和图片设计工具让你工作效率倍增Mockplus是一款更快更简单的免费原型设计工具,产品设计师5分钟即可创建交互原型。快速原型设计、精细团队管理、高效协作设计、轻松多终端演示,是原型设计的不二之选。 适用情景:中低保真原型,快速原型, WEB/移动端/平板原型,线框图,视觉稿 Axure RP Axure RP是一款专业设计师不容错过的免费原型设计工具,设计师可以用https://www.imooc.com/article/285797
14.干货!产品经理必备技能原型图教程将产品的交互步骤按照顺序进行梳理,制作成流程图,可以在绘制原型图时更有逻辑性。 工具:亿图图示 3、利用工具进行绘制 为了让设计师、开发尽可能的了解产品架构与交互,产品一般会需要提前绘制出直观原型图,以此来讨论产品内部结构、跳转原理等。 工具:Pixso https://www.zol.com.cn/toutiao/7721902.html
15.十大原型设计工具,UI界面设计原型设计软件排行榜2024年原型设计工具十大品牌最新发布,原型设计工具排行榜前十名品牌有Sketch、Figma、Axure RP、Adobe XD、摹客、墨刀、莫高设计、Pixso、Proto.io、即时设计。原型设计工具10大品牌排行榜由品牌研究部门收集整理大数据分析、研究得出,帮助你了解原型设计工具哪个牌子好。https://www.maigoo.com/maigoo/9593yxsjgj_index.html
16.即时设计官网,即时设计是一款在线可协作的UI设计工具,是可协作的即时设计是一款在线可协作的UI设计工具,是可协作的在线sketch、国内版figma,拥有海量的设计资源与素材,支持导入sketch格式的源文件。支持创建交互原型、获取设计标注、快速切图、团队协作等工作。https://www.ypsotu.com/sites/1454.html
17.超全的在线流程图和图表制作工具码力全开大家推荐几个新发现的流程图和图表制作工具,分别是Creately - 在线图表制作协作平台,Miro - 在线协作式的白板平台,VisualSitemaps - 在几秒钟内自动生成可视站点地图,FlowMapp - 可视站点和用户流程的在线工具,Lucidchart - 在线流程图绘制协作平台,Wireflow - 创建漂亮的用户流原型,Coggle - 简约漂亮的思维导图工具https://www.maliquankai.com/2020/03/08/2020-03-08-flow-mind/
18.墨刀强大易用的原型设计与协同工具原型设计墨刀是一款在线办公协作平台,集原型设计,线上版sketch设计师工具、流程图、思维导图为一体,支持团队项目实时协作和管理,金融级数据安全保障,还支持私有化部署,是设计师、产品经理和技术开发团队必备工具。 使用教程 创建应用 首先打开墨刀软件,新建一个应用,选择应用类型(这里我选择了iPhone设备),输入应用名称,设备类型https://123.meibp.com/909.html
19.「设计方法」UI工作流程指南(一)《超全面总结!如何画出专业的原型图?(下)》 关于原型工具 Axure 官网链接:http://www.axure.com/ 很有名的原型设计工具,也算是日常工作中最常用的原型工具,成名很早,很多设计师、PM(产品经理)都有用它,它除了能够高效率制作产品原型,快速绘制线框图、流程图、网站架构图、示意图、HTML 模版外,还支持javascripthttps://maimai.cn/article/detail?fid=1432760722&efid=WECXIWo5VTVdp8MWzUWhCA
20.2024年10款好用的原型设计工具推荐只需点击一下,就可以将图板连接在一起,简化设计流程,定义用户流程,添加过渡和动画,并为所有类型的用户输入定义微交互,如点击、拖动、语音命令、键盘快捷键等。您还可以使用设计系统中的UI元素进行原型设计。 墨刀 墨刀是一款在线的原型设计工具,你可以用它在线设计自己的网页或APP原型,该工具上手非常简单,它提供了https://www.v1tx.com/post/best-prototyping-tools/
21.界面原型图是什么?该怎么画?界面原型图可以简单理解为根据需求分析阶段的要求构建出可用的产品界面,常用于项目初期或精细化阶段。可以帮助设计师将抽象的界面具体地展现,辅助设计;帮助开发工程师了解界面在系统中的作用,辅助开发;辅助产品测试员制定产品测试计划;作为产品经理、设计师、开发工程https://www.liuchengtu.com/tutorial/jiemianyuanxingtushishenme.html
22.MasterGo莫高设计原型线框图、流程图、交互式模型设计等,均可通过智能动画在线演示交互效果,帮助设计师更好的在平台内展示产品的功能和流程。 如何创建交互原型 → “ 原型设计时通过简单的操作设置,无缝完成从设计到原型演示的切换,高效预览体验沉浸式使用效果,非常好用的一款在线设计工具。” https://www.mastergo.com/
23.原型设计工具有哪些?原型设计工具排名免费原型工具推荐原型设计工具哪个最好用?像axure、mockplus、sketch、墨刀等都是常用的原型设计软件,可以用于画原型图、web网页原型设计等,是交互设计师和产品经理必备工具。绿色资源网还提供了手机版原型设计工具哦!http://www.downcc.com/k/yxsjgj/
24.菜鸟工具菜鸟工具,为开发设计人员提供在线工具,网址导航,提供在线PHP、Python、 CSS、JS 调试,中文简繁体转换,进制转换等工具。致力于打造国内专业WEB开发工具,集成开发环境,WEB开发教程。..https://c.runoob.com/
25.原型设计工具UI在线设计网站即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办创意设计设计工具 进入网站 收藏 手机查看即时设计是一款功能强大的专业级 UI 设计工具,它支持在线协作,使设计团队能够方便地进行协作和https://www.colostar.cn/links/12952.html
26.干货“在线”正当道,8款在线原型工具推荐HotGloo的原型设计功能简单易上手,学习成本较低,且提供了大量的预置UI组件和超过5000个常用的图标,即使是产品新手也能在这里做出专业的产品交互原型。 Gliffy Gliffy是一款号称用途最广泛的在线原型工具,可制作非常专业的流程图、org图、UML图、network图,也可以绘制简单的原型线框图。 https://blog.51cto.com/u_9540389/3231462
27.在线原型报表工具在线原型报表工具在哪在线原型报表工具在哪 报表原型设计图 更新时间:2024-10-18 报表原型设计图报表原型设计图 在线原型图软件 更新时间:2024-10-18 在线原型图软件在线原型图软件 在线制作原型图 更新时间:2024-10-18 在线制作原型图在线制作原型图 https://news.qingflow.com/plugin/ss/a36602af217e5116456e8b081840049f.html
28.Pidoco:在线原型图制作工具Pidoco 是一个基于浏览器的在线快速制作线框原型图工具,无需安装任何软件即可在有网络的情况下完成原型图布局和规划,内容只了众多原型模块,设计师可以快速创建可交互的UX原型,适合于任何小型团队和大型公司设计师使用。 Pidoco 功能特点: 1.互动能力强:可创建完整的互动原型,模拟应用程序功能,可支持点击、触摸手势、键http://www.360doc.com/content/16/0107/05/7863900_526054218.shtml
29.UI草图设计软件(界面示意图设计工具Balsamiq Mockup允许设计师快速地创建出界面示意图,通过简洁、手绘风格的图标和组件,模拟出应用或网站的初步布局,从而在项目早期就获得反馈并进行调整。 设计工具Balsamiq Mockup的特点主要包括: 1. **快速原型设计**:Balsamiq Mockup以其高效快捷的草图绘制功能著称,设计师可以迅速地把想法转化为可视化的界面设计,大https://download.csdn.net/download/liuqiaoying_lqy/4856294
30.十大界面原型与布局工具人人都是产品经理摘要:原型设计能起到有效沟通的作用,漂亮,直观的原型图更是让人赏心悦目。本文罗列了2013年最新的10大界面原型与布局工具以帮助设计师和开发者创建出更加优秀的产品。 创建网页或者程序不仅要关注主页的排版以及与主题想匹配的图片,还应注重视觉设计,这是因为它更能吸引用户进而提升搜索量。因此,项目开发首先需要确立良https://www.woshipm.com/rp/42740.html