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.十大原型设计工具,UI界面设计原型设计软件排行榜2024年原型设计工具十大品牌最新发布,原型设计工具排行榜前十名品牌有Sketch、Figma、Axure RP、Adobe XD、摹客、墨刀、莫高设计、Pixso、Proto.io、即时设计。原型设计工具10大品牌排行榜由品牌研究部门收集整理大数据分析、研究得出,帮助你了解原型设计工具哪个牌子好。https://www.maigoo.com/maigoo/9593yxsjgj_index.html
2.自媒体运营辅助工具汇总大全史上最全自媒体运营辅助工具汇总20.美图秀秀 21.可牛影像 22.天天P图 23.光影魔术手 24.photoshop 25.视频剪辑软件 26.xmind(思维导图软件) 27.ulesd 28.gif动画制作软件 29.gidot 30.typesetter排版助手 31.网络编辑超级工具箱 十、新添加工具 01.免费在线制作思维导图、流程图、UML图、界面原型设计、组织结构图 https://www.wandongli.com/news_detail.html?id=27545
3.→MarvelApp(原型编辑器Marvel(交互设计工具))v2.0.1安卓版原型编辑器Marvel帮助用户快速设计网页和手机界面,操作简单,易上手,支持多种移动端设备,支持绘图、从相册中导入、从云中添加等多种添加方式,用户可以自由调整图片大小,不写代码,也能轻松创建自己的原型APP了。 使用说明 打开Marvel,点击右上角的加号就能开始创建项目了。首先要选择App 的使用设备,包括 Nexus 5、HTC https://www.fxxz.com/azsoft/136169.html
4.2024年度原型图工具TOP10,超实用!原型图工具是设计师们的利器,它们可以帮助我们在早期阶段就理解和预览我们的设计。并且,通过原型工具的使用,我们能更准确地交流设计思路,节省我们的时间和资源。近年来,许多优秀的原型图工具进入了市场。以下是我们认为将在2024年最突出的实用的10款原型工具,每一款都有自己独特的特性和优势。 https://pixso.cn/designskills/2024-top-10-prototyping-tools/
5.什么是原型设计?入门最全讲解指南在产研工作环境中,原型设计的本质是一种交流工具,通过原型设计,产品经理可以准确地向设计师以及开发人员传达产品定位、目标、功能、构架、流程等信息,还可以与客户、投资者和利益相关者进行沟通和反馈,从而改进产品设计并增加其市场竞争力。 伴随互联网的发展,目前最常见的原型设计方式是通过原型设计工具创建原型图。原型https://www.douban.com/note/850214495/
6.2024年界面原型设计软件TOP10排行榜!2024 年界面原型设计软件排行榜:即时设计、Adobe XD、Axure RP、Mockplus、Figma、Balsamiq、Origami Studio 、InVision Studio、Proto.io、Marvel。本排行榜旨在评估和推荐在当前市场上表现突出的界面原型设计软件,帮助用户快速选择适合他们需求的工具。https://js.design/special/article/interface-prototyping-software.html
7.即时原型即时原型(原xiaopiu)是产品原型设计工具和团队实时协作平台,作为产品经理和交互设计师工作学习的必备软件工具,堪称快速原型交互设计神器。可制作手机app、web网站网页、桌面应用软件的原型,拥有海量原型交互模板资源素材,可替代axure在线使用无需下载https://www.xiaopiu.com/
8.Pencil原型图绘制工具下载Pencil原型图绘制工具最新版是一款原型图绘图软件。Pencil原型图绘制工具最新版的界面已经达到主流的绘图软件的标准了,常见的功能有画笔工具、图形、图标、跨页超链接、剪切浏览器、多背景文档以及各种原型设计模板等。Pencil原型图绘制工具的图标模型都是设计好的模板,直接拖拽到工作区域进行编辑即可,很适合制作流程图或者http://mip.downza.cn/soft/289358.html
9.神器一箩筐:创建高保真的移动Demo(工具篇)优设网神器一箩筐:创建高保真的移动Demo(工具篇) Zoey:学习交互设计的童鞋,都躲不过画原型图这个必考科目。如何创建保真度(视觉、交互、内容)都较高的 Demo 呢,今天腾讯设计师分享的好文,除了推荐很多简单易上手的画图神器,更宝贵更值得细读的是她的思路,完全体现了一个设计师该有的严谨与细致。童鞋们感受一下。https://www.uisdc.com/fidelity-mobile-demo-tools
10.原型图都可以用什么软件制作?推荐这9款原型图用什么软件做原型图都可以用什么软件制作?推荐这9款 对于设计师来说,一个有用的原型设计工具可以大大提高他们的工作效率,节省很多时间。当然,不同的原型设计工具有一定的差异!那么哪个原型设计工具更好呢?以下是一些有用的原型设计软件,有需要的朋友可以根据自己的需要进行参考。https://blog.csdn.net/weixin_44070413/article/details/134957069
11.中文版Dreamweaver/Firew通过本书的学习,读者可以学会应用这些软件工具进行网页编辑、网页效果图设计、网页图像处理、网页动画制作等,并能综合应用这些软件工具来创建个人站点或其它各类网站的前端页面。 书名 中文版Dreamweaver/Firew 类型 计算机与互联网 出版日期 2014年1月1日 语种 简体中文 ISBN 7121220695 作者 张江波 王海荣 出版社 电子https://baike.sogou.com/v84478517.htm
12.实体店搭建小程序流程2. 制作原型图 使用设计工具(如Sketch、Adobe XD、Figma等)制作小程序的原型图,包括首页、商品列表页、商品详情页、购物车页、订单页、个人中心页等。原型图应包含所有页面的布局和交互设计。 3. 设计UI界面 根据原型图设计UI界面,包括页面布局、按钮样式、文字排版等。可以使用设计工具制作高保真效果图,确保界面美观https://aliyunyh.com/4387.html
13.9款原型设计工具与Sketch的强强组合,轻松构建交互原型!Sketch相关资源:2018年不可错过的19款Sketch线框图套件 2. Mockplus + Sketch Mockplus是更快更简单的原型设计工具。自发布以来深受国内外用户喜爱,适合软件团队、个人在软件开发的设计阶段使用。简单快速的交互功能,能够很好地表达设计,帮助设计师「关注设计,而非工具」。随着越来越多设计师对协作功能的需求,他们也https://cloud.tencent.com/developer/article/1387446
14.产品经理必备14大效率工具人人都是产品经理作为一名互联网产品经理,在创造一款产品时,从了解需求、验证需求、做原型、评审到写PRD、跟进开发、测试……面对这漫长复杂的工作流,必须要使用一些工具软件辅助自己的工作,比方说思维导图、文档写作、原型设计方面的工具。今天就为大家分享一些产品经理常用的工具。 原https://www.woshipm.com/pmd/250261.html
15.耐下载安装耐app下载v1.5.6安卓最新版摹客由1个平台(摹客协作)和2个工具(原型工具摹客RP、UI工具摹客DT)构成, 产品研发团队可以使用摹客进行原型设计、UI设计以及交付Figma/Sketch/PS/XD/Axure设计稿,在线评审设计,自动标注切图,团队高效协作。 摹客APP 是摹客官方出品的助手工具。通过 摹客APP 可以在手机端实时查看原型,更好地掌握项目进度。 摹客app功https://m.qqtn.com/q/813532
16.收藏大牛设计师常用的资源站原型设计 InVision?—?www.invisionapp.com Mixture?—?www.mixture.io Flinto?—?www.flinto.com Gridset?—?www.gridsetapp.com Marvel?—?www.marvelapp.com Webflow?—?www.webflow.com Red Pen?—?www.redpen.io https://www.imooc.com/article/details/id/11643
17.15款在线画图软件深度测评:第一款绝对不要错过在当今数字化时代,在线画图软件成为了创作、设计和表达创意的重要工具。无论您是专业设计师还是创意爱好者,这些在线画图软件都将帮助您实现创意的无限可能。本文将为您介绍15款在线画图软件,从功能特点、优缺点和适用场景三个方面深度测评,助您找到最适合您需求的工具。 1. 流程图和图表软件 (1)博思白板boardmix 博https://boardmix.cn/article/15-online-drawing-softwares/
18.ProcessOn思维导图流程图在线画思维导图流程图ProcessOn是一款专业在线作图工具和知识分享社区,提供AI生成思维导图流程图。支持思维导图、流程图、组织结构图、网络拓扑图、鱼骨图、UML图等多种图形,同时可实现人与人之间的实时协作和共享,提升团队工作效率。https://www.processon.com/
19.几个常用的产品原型设计工具有人说产品经理是产品的灵魂,有人说产品经理是企业的核心。对于我们未来想要做产品经理,获得较高的收入,实现自己对产品的诠释,原型图是肯定绕不开的。即便刚毕业我们去做产品助理,原型设计也是产品助理的主要工作。 下面跟大家聊聊几款产品经理常用的原型设计工具,产品工作感兴趣的同学可以用来熟练下使用技巧,未来也提https://www.jianshu.com/p/9d9bbd31b0b5
20.前QQ浏览器产品负责人:从0到1深度认识产品经理三、设计产品-如何设计一款APP 产品需求文档=简单的描述产品功能架构、市场背景、用户需求情况、版本管理和规划。 用户原型图=产品经理会借助工具简单画产品的交互原型,给交互设计师参考。交互设计师会在这个基础上通过专业的知识再去细化,降低错误,或者通过界面的标准,再去优化。同时,视觉设计师会根据产品的原型图考虑https://www.digitaling.com/articles/20887.html
21.原型设计工具用哪个比较好?4种原型设计工具优缺点对比分析作为专门的原型设计工具,它比一般创建静态原型的工具,如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks等要快速、高效。它专为Rapid Prototype Design而生,可以辅助产品经理快速设计完整的产品原型,并结合批注、说明以及流程图、框架图等元素将产品完整地表述给各方面设计人员,如UI、UE等等https://www.niaogebiji.com/article-105555-1.html