尧图网站建设 
简介这是专为UI设计岗面试准备的考试题文档面向UI设计师求职者、初级设计师及转岗学习者用于检验和巩固界面设计基础概念、网页与手机端设计规范、色彩理论、Photoshop工具使用及CSS语法等高频考点。资源包体积为510KB仅包含1个doc文件内容组织为总分150分的单选题共20题每题附参考答案适合笔试模拟、快速自测或考前冲刺。已有123人学习下载。文档从UI定义入手逐步覆盖栅格化布局、常见页面宽度、72dpi显示密度、九宫格排列、设计交付物、图像像素单元、CSS书写规则、GUI含义以及门户网站、SNS、IM、B2B等互联网术语既有理论辨析也有易混概念对比通过题目中的选项差异还能加深对UI设计与平面设计、电商模式等概念边界的理解。通过完成这份试题读者可以系统梳理UI设计知识框架发现薄弱环节为正式面试打下扎实基础。1. 拆开这份150分的UI设计师面试卷题量与考察重心拿到这份《UI设计师面试考试题(带答案).doc》之前我原本以为它和网上随手拼的“XX面试题库”差不多打开才发现它是一套结构完整的试卷20道单选、5道多选、5道判断再加一道70分的软件临摹题总分150分。更让我意外的是它没有只盯着Photoshop而是从UI的定义、网页栅格、色彩感受一路考到CSS语法、电商术语和用户浏览习惯。对准备面试的UI设计师来说它既是自测题也是“面试官会问哪些基础题”的目录。适合刚转行、准备面初级UI岗或者在校生巩固课程考点的人。文档是常见的.doc格式直接用Word/WPS就能打开也可以另存为PDF放进手机里随时刷想要系统过一遍UI基础的人值得留一份。2. 基础题里的硬规范栅格、网页宽度、dpi与色彩判断2.1 UI定义与设计范畴先破“UI就是画图”的误区单选题第1题问UI是什么意思答案是User Interface的缩写指用户界面设计。这道题放在第一题不是凑数它决定了你对岗位的认知边界。单选题第13题进一步说UI设计是指对互联网、移动互联网、软件等产品的人机交互、操作逻辑、界面美观的设计。注意这里出现了三个关键词人机交互、操作逻辑、界面美观。它们不是并列的三件事而是递进关系交互和逻辑在前美观是最后落点。很多新人把UI等同为“把图标画好看”一做面试题就露馅。判断题里还有一道关于GUI的说法“GUI包含网页界面设计、手机界面设计和游戏界面设计”答案是错误。原因是GUI不等于Good User Interface而是Graphical User Interface图形用户界面这里挖的坑是“看着像对的”。真正的分类维度里网页设计、手机界面设计、游戏界面设计都属于GUI的表象范畴但出题人的陷阱在于让你误判GUI是个“品质形容词”。这类题背后的考察逻辑是你要能区分UI、GUI、交互设计三者的边界而不是只会喊“好看”。单选题第10题问哪个不属于UI设计范畴答案是C户外海报设计。这题看起来很送分但它是检验设计思维的标尺户外海报没有可交互界面、没有操作流程属于视觉传达UI设计的目标物一定是产品界面是用户要“用”的东西而不只是“看”的东西。面试时如果你能把这个逻辑讲出来比单纯背答案更有说服力。我一般判断一个项目是不是UI项目就套用三条有没有用户操作有没有界面跳转有没有状态反馈都满足才算。2.2 栅格化与网页宽度960px为什么到今天还“活”着这道题是整套卷子里最容易被划过去的但它实际上是做版式的基本功。单选第2题的答案是C栅格系统源于平面栅格系统以规则的网格阵列及信息分布通俗讲就是运用固定的格子设计版面布局。简单来说栅格就是给页面画一套看不见的网格线所有模块按网格对齐版式立刻会从“随手放的”变得“工整有序”。为什么网页布局那么偏爱12栏栅格因为12能被2、3、4、6整除分两栏、三栏、四栏、六栏都整齐不会产生半栏宽度的尴尬。常见做法是用960px版心配12栏栏间距20px减去留白后每栏正好60px这是古典栅格里非常经典的一组参数。响应式兴起后栅格变成百分比但思想没变用网格线约束信息位置而不是靠感觉拖参考线。单选第5题问主流浏览器最常见的页面宽度答案是960px、970px、980px、990px、1000px。这组数值背后是历史原因以前主流分辨率是1024×768去掉滚动条和窗口边框实际可视区往往只剩1000px左右。为了保证一行内容在大多数屏幕上完整显示页面版心就会做成960~1000px之间两端留出安全边距。这套尺寸到今天仍有参考意义——做后台管理系统或政府项目时终端屏幕参差不齐保守的版心宽度依然是最省事的方案。提示遇到问栅格意义的题目别只背“网格阵列”。能补一句“12栏栅格可拆分为2/3/4栏兼容性好”面试官会明显觉得你是用过栅格的人。2.3 dpi、色彩与交付物三组翻车高发概念单选第6题问网页界面设计一般用多少dpi答案是72dpi。很多人想不通因为Photoshop新建文档时的默认值经常给到300dpi。这里的逻辑是屏幕显示以像素为单位网页设计最终输出在显示器上72dpi足够表达物理像素关系300dpi是印刷分辨率打印出来才需要。实际工程里大家聊得更准的名词是PPIPixels Per Inch但面试题沿用了设计师圈子里习惯的dpi说法答题时按题面口径写72dpi不要纠正它。单选第3题问哪组颜色体现“安宁、平静”答案给了冷色调那一组。色彩理论考的不是你背色值而是色彩情感。蓝色、青绿、低饱和灰这类冷色会降低视觉兴奋度所以金融、阅读、冥想类产品频繁使用。反过来家电促销页用红色橙色是利用高饱和暖色刺激行动冲动。面试时如果你能把“为什么这个产品用冷色”从用户情绪角度讲出来比报几个色号有用得多。单选第4题关于交付物答案是PSD效果图。围绕交付物最常见的完整清单应该是设计规范颜色、字号、间距、组件状态、产品原型线框图或交互稿、PSD效果图视觉稿、切图与标注。部分团队的UI设计师还要交HTML页面或组件代码但这一个要看岗位JD不能当成所有团队的标配。关于这道单选本身的争议我放到第4章避坑部分单独说。2.4 九宫格布局与工具选型手机端UI的两种高频考点单选题第7题问哪种手机端UI排列是类似九宫格的形式这类布局在功能型App里很常见。九宫格的本质是把入口按等宽等高处理成整齐的矩阵3列居多每个格子由图标和文字组成。它的优势是信息密度高、结构一目了然适合功能多且相互独立的工具型产品缺点也明显入口之间没有优先级容易把界面堆成均匀的格子铺。面试时能说出这条缺点比只认图例高级不少。单选题第8题问UI视觉设计常用软件答案是Photoshop。多选题第1题问交互设计过程中常用软件答案是Axure和Photoshop。这两道题合在一起聊才完整交互设计阶段用Axure画线框、定跳转逻辑视觉设计阶段用Photoshop出高保真效果图。工具题本身没有太多技术含量但能反映你对工作流是否清楚。我面试时会顺口说一句“Photoshop负责视觉Axure负责原型中间交接靠标注和切图”面试官立刻知道你跟过真实项目。3. 工具与代码题怎么答PS快捷键、像素与CSS语法3.1 Photoshop题像素、画布大小与复制变换阵列这套卷子在PS上考了三件事第一单选第9题图像最基本的组成单元是像素第二单选第19题CtrlAltC打开的是画布大小第三单选第20题ShiftCtrlAltT多用于固定角度复制原始形状。这三题是递进的像素是认知基础画布大小是操作边界复制变换阵列是高频技巧。先说过界。CtrlAltC是“画布大小”容易和CtrlAltI“图像大小”混。区别在于画布大小只改变可用区域不缩放图层内容图像大小会连内容带分辨率一起缩放。如果面试官追问你就说“我改画布是为了加边距或扩充背景缩放内容我用CtrlT配合约束比例”。ShiftCtrlAltT这个快捷键值得单独练因为它能直接画出表盘刻度、圆环图标、放射背景这类规则排列的图形。实际操作我一般这样做新建一块画布先画一个细长小矩形当作刻度放在圆心正上方的位置。按CtrlAltT进入“复制并变换”状态把变换中心点拖到圆心位置。在顶部角度输入框里填6度回车确认。按住ShiftCtrlAltT反复按每次自动生成新副本60次后得到一个完整圆环刻度。逻辑说明第2步的CtrlAltT是先复制一份再进入变换不是直接变换第4步的ShiftCtrlAltT是“再次变换并复制”它记录的是上一次变换的参数而不是重新弹出一个变换框。这正是这个快捷键能被用来做规则阵列的原因你只需要告诉它一次角度和圆心剩下的重复动作交给快捷键。参数上的关键是中心点位置和旋转角度。中心点不在圆心副本就会绕着一个错误轨迹转角度算不对复制出来的刻度要么重合要么错位。做60个刻度就是360/606度做12个就是30度。我习惯把这一步写进自己的面试作品集制作过程里因为“能聊清楚CtrlAltT和ShiftCtrlAltT区别”的人PS熟练度一般不会差。快捷键功能使用场景CtrlT自由变换缩放、旋转当前对象CtrlAltT复制并进入变换先复制一份再变换适合单次复制ShiftCtrlAltT再次变换并复制重复上一次变换参数并复制适合规则阵列3.2 CSS语法题从“body {color:black}”看面试官的考点单选第11题让选正确CSS语法答案是Cbody {color:black}。这道题是在过滤真假会用CSS的设计师。正确语法不难记难点在于记住“为什么另外三个是错的”。A写成body:colorblack把选择器和声明块挤在一起且属性用冒号连接值B写成{body;color:black}把选择器放进了花括号里当了一条声明D写成body {colorblack}属性和值之间用了等号。CSS的标准结构是选择器花括号属性冒号值多条声明之间用分号分隔。给你一段小示例/* 选择器body声明块{ color: black; } */ body { color: black; /* 文字黑色 */ } .card { background-color: #f5f5f5; /* 背景颜色 */ color: #333333; }逻辑说明第一段是标准规则选择器body选中页面根元素color设置文字颜色值用黑色关键字第二段是实际工作中更常见的写法用类选择器.card限定卡片区域background-color设置背景颜色颜色值用十六进制。属性与值之间必须是半角冒号不能写成等号这是CSS语法和普通编程语言的习惯差异。单选第12题单独问background-color是什么意思答案是背景颜色。它和background是两回事background是复合属性可以一口气写背景色、背景图、平铺方式、位置background-color只控制背景颜色。面试时如果聊到这一层我会顺着说一句“实际写样式时我会把颜色和背景图分开写方便后面做状态切换”这样回答就把死记硬背变成了方案选型。3.3 互联网术语与产品模式B2B/B2C/C2C/O2O怎么不被绕晕单选第15、16、17、18题把门类术语集中考了一遍这是很多UI求职者的盲区。它们看着像产品经理的题但面试官考的是“你能不能听懂业务方在说什么”。UI设计师和产品经理对接时嘴里全是C2C、O2O、转化率这些词连术语都要靠猜版本评审会基本没法开。抽屉里我会准备一份这样的速查表术语全称含义与典型场景门户网站Portal Website提供综合信息与服务的入口型网站如新浪、网易、搜狐SNSSocial Networking Services社交网络服务帮人建立社交关系如校内网、开心网、FacebookIMInstant Messaging即时通讯业务如QQ、MSN、百度HiB2BBusiness to Business企业对企业面向供应链的电商B2CBusiness to Consumer企业对消费者如京东自营、天猫品牌店C2CConsumer to Consumer个人对个人如淘宝、eBayO2OOnline to Offline线上到线下苏宁、大中这类线上线下结合的模式B2MBusiness to Manager面向销售者或企业工作者的电商模式本质是找代理分销AppApplication移动端应用程序APIApplication Program Interface应用程序接口如微博API、百度地图APIFTPFile Transfer Protocol文件传输协议用于把网站文件传到服务器IPInternet Protocol网际协议IP地址是网络地址不是住宅地址这张表不需要背关键是抓住模式带2的字母串2两端的对象就是交易双方B是Business企业C是Consumer消费者O是Online线上Offline线下。B2C和C2C最容易混一个商家统一卖给你一个个人卖个人淘宝是典型的C2C而天猫是B2C这个例子一摆就清楚了。单选第17题还有一个容易被忽视的坑BBS被解释成“记事本”答案是C。BBS全称Bulletin Board System是电子公告板和“记事本”没有关系。这道题看着是在考缩写实际是在提醒你在UI面试里能把网络产品形态讲清楚是岗位基础常识。答题遇上这类题优先用“全称还原法”——每个缩写先还原成英文再看中文解释对不对比凭印象猜准得多。4. 避坑这五处翻车现场帮你把90分稳到手4.1 浏览习惯与触屏精度两道人机常识判断题的翻车现场现象判断题第5题“用户的浏览习惯是从右到左从上到下”我看着“从上到下”挺对就选了正确结果答案是错误。判断题第1题“手机触屏操作比网页鼠标精确度高”我也凭感觉选了正确仍然错。这两题都是常识题但没接触过交互设计的人很容易凭日常经验掉坑。原因第一题的关键在“从右到左”——主流横排阅读的顺序是“从左到右从上到下”用户的注意力会沿着F型路径扫描而不是从右往左扫。第二题反过来鼠标是像素级定位手指触点面积大精度天然偏低。你在手机上一个按钮按错位置是常事但鼠标很少点偏。解决遇到这类题先问自己“用户是拿什么设备、用什么方式操作的”。网页用户有鼠标点击精度高所以网页按钮可以做得很小移动端用户拿手指点误触概率高所以移动端按钮点击区域一般建议不小于44×44pt图标之间的留白也要给足。这两道题不只在考答案还在考你“知不知道移动端UI和Web UI的差异”答题时把这个逻辑讲出来比只报正确还是错误更能拿分。4.2 GUI全称与电商术语缩写题不是靠猜的现象判断第4题“GUI包含网页界面设计、手机界面设计和游戏界面设计”我犹豫了一下还是选了正确单选第14题里写着“GUI是Good User Interface的简称”我也默认它对。结果不是“包含”错了而是GUI被解释成了Good。原因我把GUI的G记成了Good而它其实是Graphical User Interface的缩写即图形用户界面。GUI不是一个“品质形容词”而是一种界面技术形态。解决所有英文缩写的题都要先还原全称。Graphical User Interface图形用户界面User Interface用户界面。UI是总称GUI是其中一种可视化实现方式文本终端、命令行界面就不是GUI。答题时多写一步全称还原能避开一大半的缩写陷阱。另一个高频翻车点在第16题的D选项B2C被描述成“个人对个人”答案是不正确的。我一开始觉得“B2C就是那种个人卖家开店的事”其实这是把C2C安到了B2C头上。BBusinessCConsumerB2C是商家对消费者个人对个人要看C2CConsumer to Consumer。比如你在淘宝个人店铺买东西是C2C在天猫品牌店下单是B2C。记忆方法是只看两个字母的对象关系别被“2”的发音带跑。类似的还有FTP这题出题人把File Transfer Protocol写成了“文本传输协议”严格说是文件传输协议选项D错误更离谱把IP地址说成住宅地址。答题时碰到选项里有一个明显错误直接锁定它不用纠结另外选项的微小瑕疵。4.3 那两道争议题单选题遇上不严谨选项怎么答现象单选第4题“UI设计交付物都包含哪些”答案是CPSD效果图。可我最早做题时选了A和B因为设计规范、产品原型明明也是交付物。这套题只有一个正确选项ABD都不选这让我一度很困惑。原因题干用了“包含哪些”这种多选式的措辞选项里却只允许单选题目本身不够严谨。出题人真正想考的其实是“最能代表UI设计师交付成果的是哪一个”而PSD效果图在传统流程里是视觉设计最核心的产出物。解决如果是考试先按标准答案C选不要和题目对着干如果是面试回答时要把完整的交付物边界讲出来“规范、原型、视觉稿都是交付物最常见的是PSD效果图前端化团队里还需要切图和标注甚至HTML页面。”像这样把争议点正面接住面试官反而会认为你有自己的判断。遇到“多选改单选”的题现在我的第一反应不再是纠结答案而是先判断出题人想考哪个知识点再选最贴近的那个选项。现象单选第6题问网页分辨率显示密度是多少dpi答案是72dpi但我在新建Photoshop文档时看到默认值经常是300dpi于是总在这道题上翻车。原因PS的新建文档默认值不等于网页设计标准。300dpi是印刷品标准网页最终显示在屏幕上按72dpi设置即可。而且严格来说屏幕用的密度单位是ppi只是国内设计师习惯统一叫dpi。解决凡是被问“网页用多少dpi”直接答72被问“印刷用多少”答300被问“为什么不是300”就说“屏幕显示不需要印刷精度”。如果你还想更严谨可以在回答末尾补一句“实际导出切图时是按倍率走的和dpi没直接关系”这句话能展示你做过真实项目。5. 把题库变成面试演练自测方法、临摹题与复习节奏这套卷子如果只是“看答案过一遍”价值发挥不出一半。我拿到手后的做法是先把答案遮住再按照面试当天的状态去闭卷刷。客观题总分90分60分单选10分多选10分判断给自己定目标75分以上剩下的分数靠临摹题补。闭卷时我会卡20~25分钟做完客观题时间一到就停笔如果超时说明概念掌握还停留在“看着眼熟”的程度没有到“直接反应”的地步。错题要按题型统计而不是只看总分。单选错得多基本是基础概念边界不清多选错得多多半是并列关系没背全比如交互设计研究范围里“任务分析、说明实时响应标准、流程设计、易用性评估”这四项都是可选项漏一个就算错判断错得多就要回头补人机交互常识。统计完以后把错得最多的知识点做成一张速查卡每天早上一遍。临摹题建议限时45分钟来做。题面是给一段长文字要求用软件完整临摹成图文页面。那段文字信息层级其实很丰富一段引言、六个编号小标题、一个短故事外加一句名言引用。它的考察点不是“画得像”而是你的软件熟练度和信息层级意识。我一般这么做先建A4尺寸或屏幕尺寸画布72dpi然后分析文字层级标题用大号加粗章节编号用主色或深色突出正文用常规字重再拉辅助线定版心把段落宽度统一最后调行距段落间距统一宁可保守也不让页面看起来字挤字。做完后切到200%检查文字边缘有没有蹭到像素点这一步很多人忽略。如果想把这套题用到极致可以做一份一周计划前四天分别过UI概念、网页规范、PS快捷键、CSS基础第五天集中背术语表周六闭卷刷客观题并整理错题周日限时完成临摹题。这样一轮下来你至少能把这份题里90%的考点变成自己的条件反射。顺带说一个工具上的小习惯这份资料是.doc格式我通常在预习阶段就把它另存为PDF方便在手机或平板上翻也可以配合常用的文档转换插件批量处理。如果面试官允许带作品集我会把错题速查卡打印成一页纸放在文件夹里候场时快速扫一遍。从那以后每次面UI岗之前我都会把这类基础题从头走一遍不是背答案而是确认自己还能立刻说清“为什么选这个”。基础题看着不起眼真到面试现场翻车的往往不是难题而是你自以为了解的知识点。希望帮到你。本文还有配套的精品资源点击获取 UI设计师面试题全解析：从栅格到CSS，避开常见翻车点
简介这是专为UI设计岗面试准备的考试题文档面向UI设计师求职者、初级设计师及转岗学习者用于检验和巩固界面设计基础概念、网页与手机端设计规范、色彩理论、Photoshop工具使用及CSS语法等高频考点。资源包体积为510KB仅包含1个doc文件内容组织为总分150分的单选题共20题每题附参考答案适合笔试模拟、快速自测或考前冲刺。已有123人学习下载。文档从UI定义入手逐步覆盖栅格化布局、常见页面宽度、72dpi显示密度、九宫格排列、设计交付物、图像像素单元、CSS书写规则、GUI含义以及门户网站、SNS、IM、B2B等互联网术语既有理论辨析也有易混概念对比通过题目中的选项差异还能加深对UI设计与平面设计、电商模式等概念边界的理解。通过完成这份试题读者可以系统梳理UI设计知识框架发现薄弱环节为正式面试打下扎实基础。1. 拆开这份150分的UI设计师面试卷题量与考察重心拿到这份《UI设计师面试考试题(带答案).doc》之前我原本以为它和网上随手拼的“XX面试题库”差不多打开才发现它是一套结构完整的试卷20道单选、5道多选、5道判断再加一道70分的软件临摹题总分150分。更让我意外的是它没有只盯着Photoshop而是从UI的定义、网页栅格、色彩感受一路考到CSS语法、电商术语和用户浏览习惯。对准备面试的UI设计师来说它既是自测题也是“面试官会问哪些基础题”的目录。适合刚转行、准备面初级UI岗或者在校生巩固课程考点的人。文档是常见的.doc格式直接用Word/WPS就能打开也可以另存为PDF放进手机里随时刷想要系统过一遍UI基础的人值得留一份。2. 基础题里的硬规范栅格、网页宽度、dpi与色彩判断2.1 UI定义与设计范畴先破“UI就是画图”的误区单选题第1题问UI是什么意思答案是User Interface的缩写指用户界面设计。这道题放在第一题不是凑数它决定了你对岗位的认知边界。单选题第13题进一步说UI设计是指对互联网、移动互联网、软件等产品的人机交互、操作逻辑、界面美观的设计。注意这里出现了三个关键词人机交互、操作逻辑、界面美观。它们不是并列的三件事而是递进关系交互和逻辑在前美观是最后落点。很多新人把UI等同为“把图标画好看”一做面试题就露馅。判断题里还有一道关于GUI的说法“GUI包含网页界面设计、手机界面设计和游戏界面设计”答案是错误。原因是GUI不等于Good User Interface而是Graphical User Interface图形用户界面这里挖的坑是“看着像对的”。真正的分类维度里网页设计、手机界面设计、游戏界面设计都属于GUI的表象范畴但出题人的陷阱在于让你误判GUI是个“品质形容词”。这类题背后的考察逻辑是你要能区分UI、GUI、交互设计三者的边界而不是只会喊“好看”。单选题第10题问哪个不属于UI设计范畴答案是C户外海报设计。这题看起来很送分但它是检验设计思维的标尺户外海报没有可交互界面、没有操作流程属于视觉传达UI设计的目标物一定是产品界面是用户要“用”的东西而不只是“看”的东西。面试时如果你能把这个逻辑讲出来比单纯背答案更有说服力。我一般判断一个项目是不是UI项目就套用三条有没有用户操作有没有界面跳转有没有状态反馈都满足才算。2.2 栅格化与网页宽度960px为什么到今天还“活”着这道题是整套卷子里最容易被划过去的但它实际上是做版式的基本功。单选第2题的答案是C栅格系统源于平面栅格系统以规则的网格阵列及信息分布通俗讲就是运用固定的格子设计版面布局。简单来说栅格就是给页面画一套看不见的网格线所有模块按网格对齐版式立刻会从“随手放的”变得“工整有序”。为什么网页布局那么偏爱12栏栅格因为12能被2、3、4、6整除分两栏、三栏、四栏、六栏都整齐不会产生半栏宽度的尴尬。常见做法是用960px版心配12栏栏间距20px减去留白后每栏正好60px这是古典栅格里非常经典的一组参数。响应式兴起后栅格变成百分比但思想没变用网格线约束信息位置而不是靠感觉拖参考线。单选第5题问主流浏览器最常见的页面宽度答案是960px、970px、980px、990px、1000px。这组数值背后是历史原因以前主流分辨率是1024×768去掉滚动条和窗口边框实际可视区往往只剩1000px左右。为了保证一行内容在大多数屏幕上完整显示页面版心就会做成960~1000px之间两端留出安全边距。这套尺寸到今天仍有参考意义——做后台管理系统或政府项目时终端屏幕参差不齐保守的版心宽度依然是最省事的方案。提示遇到问栅格意义的题目别只背“网格阵列”。能补一句“12栏栅格可拆分为2/3/4栏兼容性好”面试官会明显觉得你是用过栅格的人。2.3 dpi、色彩与交付物三组翻车高发概念单选第6题问网页界面设计一般用多少dpi答案是72dpi。很多人想不通因为Photoshop新建文档时的默认值经常给到300dpi。这里的逻辑是屏幕显示以像素为单位网页设计最终输出在显示器上72dpi足够表达物理像素关系300dpi是印刷分辨率打印出来才需要。实际工程里大家聊得更准的名词是PPIPixels Per Inch但面试题沿用了设计师圈子里习惯的dpi说法答题时按题面口径写72dpi不要纠正它。单选第3题问哪组颜色体现“安宁、平静”答案给了冷色调那一组。色彩理论考的不是你背色值而是色彩情感。蓝色、青绿、低饱和灰这类冷色会降低视觉兴奋度所以金融、阅读、冥想类产品频繁使用。反过来家电促销页用红色橙色是利用高饱和暖色刺激行动冲动。面试时如果你能把“为什么这个产品用冷色”从用户情绪角度讲出来比报几个色号有用得多。单选第4题关于交付物答案是PSD效果图。围绕交付物最常见的完整清单应该是设计规范颜色、字号、间距、组件状态、产品原型线框图或交互稿、PSD效果图视觉稿、切图与标注。部分团队的UI设计师还要交HTML页面或组件代码但这一个要看岗位JD不能当成所有团队的标配。关于这道单选本身的争议我放到第4章避坑部分单独说。2.4 九宫格布局与工具选型手机端UI的两种高频考点单选题第7题问哪种手机端UI排列是类似九宫格的形式这类布局在功能型App里很常见。九宫格的本质是把入口按等宽等高处理成整齐的矩阵3列居多每个格子由图标和文字组成。它的优势是信息密度高、结构一目了然适合功能多且相互独立的工具型产品缺点也明显入口之间没有优先级容易把界面堆成均匀的格子铺。面试时能说出这条缺点比只认图例高级不少。单选题第8题问UI视觉设计常用软件答案是Photoshop。多选题第1题问交互设计过程中常用软件答案是Axure和Photoshop。这两道题合在一起聊才完整交互设计阶段用Axure画线框、定跳转逻辑视觉设计阶段用Photoshop出高保真效果图。工具题本身没有太多技术含量但能反映你对工作流是否清楚。我面试时会顺口说一句“Photoshop负责视觉Axure负责原型中间交接靠标注和切图”面试官立刻知道你跟过真实项目。3. 工具与代码题怎么答PS快捷键、像素与CSS语法3.1 Photoshop题像素、画布大小与复制变换阵列这套卷子在PS上考了三件事第一单选第9题图像最基本的组成单元是像素第二单选第19题CtrlAltC打开的是画布大小第三单选第20题ShiftCtrlAltT多用于固定角度复制原始形状。这三题是递进的像素是认知基础画布大小是操作边界复制变换阵列是高频技巧。先说过界。CtrlAltC是“画布大小”容易和CtrlAltI“图像大小”混。区别在于画布大小只改变可用区域不缩放图层内容图像大小会连内容带分辨率一起缩放。如果面试官追问你就说“我改画布是为了加边距或扩充背景缩放内容我用CtrlT配合约束比例”。ShiftCtrlAltT这个快捷键值得单独练因为它能直接画出表盘刻度、圆环图标、放射背景这类规则排列的图形。实际操作我一般这样做新建一块画布先画一个细长小矩形当作刻度放在圆心正上方的位置。按CtrlAltT进入“复制并变换”状态把变换中心点拖到圆心位置。在顶部角度输入框里填6度回车确认。按住ShiftCtrlAltT反复按每次自动生成新副本60次后得到一个完整圆环刻度。逻辑说明第2步的CtrlAltT是先复制一份再进入变换不是直接变换第4步的ShiftCtrlAltT是“再次变换并复制”它记录的是上一次变换的参数而不是重新弹出一个变换框。这正是这个快捷键能被用来做规则阵列的原因你只需要告诉它一次角度和圆心剩下的重复动作交给快捷键。参数上的关键是中心点位置和旋转角度。中心点不在圆心副本就会绕着一个错误轨迹转角度算不对复制出来的刻度要么重合要么错位。做60个刻度就是360/606度做12个就是30度。我习惯把这一步写进自己的面试作品集制作过程里因为“能聊清楚CtrlAltT和ShiftCtrlAltT区别”的人PS熟练度一般不会差。快捷键功能使用场景CtrlT自由变换缩放、旋转当前对象CtrlAltT复制并进入变换先复制一份再变换适合单次复制ShiftCtrlAltT再次变换并复制重复上一次变换参数并复制适合规则阵列3.2 CSS语法题从“body {color:black}”看面试官的考点单选第11题让选正确CSS语法答案是Cbody {color:black}。这道题是在过滤真假会用CSS的设计师。正确语法不难记难点在于记住“为什么另外三个是错的”。A写成body:colorblack把选择器和声明块挤在一起且属性用冒号连接值B写成{body;color:black}把选择器放进了花括号里当了一条声明D写成body {colorblack}属性和值之间用了等号。CSS的标准结构是选择器花括号属性冒号值多条声明之间用分号分隔。给你一段小示例/* 选择器body声明块{ color: black; } */ body { color: black; /* 文字黑色 */ } .card { background-color: #f5f5f5; /* 背景颜色 */ color: #333333; }逻辑说明第一段是标准规则选择器body选中页面根元素color设置文字颜色值用黑色关键字第二段是实际工作中更常见的写法用类选择器.card限定卡片区域background-color设置背景颜色颜色值用十六进制。属性与值之间必须是半角冒号不能写成等号这是CSS语法和普通编程语言的习惯差异。单选第12题单独问background-color是什么意思答案是背景颜色。它和background是两回事background是复合属性可以一口气写背景色、背景图、平铺方式、位置background-color只控制背景颜色。面试时如果聊到这一层我会顺着说一句“实际写样式时我会把颜色和背景图分开写方便后面做状态切换”这样回答就把死记硬背变成了方案选型。3.3 互联网术语与产品模式B2B/B2C/C2C/O2O怎么不被绕晕单选第15、16、17、18题把门类术语集中考了一遍这是很多UI求职者的盲区。它们看着像产品经理的题但面试官考的是“你能不能听懂业务方在说什么”。UI设计师和产品经理对接时嘴里全是C2C、O2O、转化率这些词连术语都要靠猜版本评审会基本没法开。抽屉里我会准备一份这样的速查表术语全称含义与典型场景门户网站Portal Website提供综合信息与服务的入口型网站如新浪、网易、搜狐SNSSocial Networking Services社交网络服务帮人建立社交关系如校内网、开心网、FacebookIMInstant Messaging即时通讯业务如QQ、MSN、百度HiB2BBusiness to Business企业对企业面向供应链的电商B2CBusiness to Consumer企业对消费者如京东自营、天猫品牌店C2CConsumer to Consumer个人对个人如淘宝、eBayO2OOnline to Offline线上到线下苏宁、大中这类线上线下结合的模式B2MBusiness to Manager面向销售者或企业工作者的电商模式本质是找代理分销AppApplication移动端应用程序APIApplication Program Interface应用程序接口如微博API、百度地图APIFTPFile Transfer Protocol文件传输协议用于把网站文件传到服务器IPInternet Protocol网际协议IP地址是网络地址不是住宅地址这张表不需要背关键是抓住模式带2的字母串2两端的对象就是交易双方B是Business企业C是Consumer消费者O是Online线上Offline线下。B2C和C2C最容易混一个商家统一卖给你一个个人卖个人淘宝是典型的C2C而天猫是B2C这个例子一摆就清楚了。单选第17题还有一个容易被忽视的坑BBS被解释成“记事本”答案是C。BBS全称Bulletin Board System是电子公告板和“记事本”没有关系。这道题看着是在考缩写实际是在提醒你在UI面试里能把网络产品形态讲清楚是岗位基础常识。答题遇上这类题优先用“全称还原法”——每个缩写先还原成英文再看中文解释对不对比凭印象猜准得多。4. 避坑这五处翻车现场帮你把90分稳到手4.1 浏览习惯与触屏精度两道人机常识判断题的翻车现场现象判断题第5题“用户的浏览习惯是从右到左从上到下”我看着“从上到下”挺对就选了正确结果答案是错误。判断题第1题“手机触屏操作比网页鼠标精确度高”我也凭感觉选了正确仍然错。这两题都是常识题但没接触过交互设计的人很容易凭日常经验掉坑。原因第一题的关键在“从右到左”——主流横排阅读的顺序是“从左到右从上到下”用户的注意力会沿着F型路径扫描而不是从右往左扫。第二题反过来鼠标是像素级定位手指触点面积大精度天然偏低。你在手机上一个按钮按错位置是常事但鼠标很少点偏。解决遇到这类题先问自己“用户是拿什么设备、用什么方式操作的”。网页用户有鼠标点击精度高所以网页按钮可以做得很小移动端用户拿手指点误触概率高所以移动端按钮点击区域一般建议不小于44×44pt图标之间的留白也要给足。这两道题不只在考答案还在考你“知不知道移动端UI和Web UI的差异”答题时把这个逻辑讲出来比只报正确还是错误更能拿分。4.2 GUI全称与电商术语缩写题不是靠猜的现象判断第4题“GUI包含网页界面设计、手机界面设计和游戏界面设计”我犹豫了一下还是选了正确单选第14题里写着“GUI是Good User Interface的简称”我也默认它对。结果不是“包含”错了而是GUI被解释成了Good。原因我把GUI的G记成了Good而它其实是Graphical User Interface的缩写即图形用户界面。GUI不是一个“品质形容词”而是一种界面技术形态。解决所有英文缩写的题都要先还原全称。Graphical User Interface图形用户界面User Interface用户界面。UI是总称GUI是其中一种可视化实现方式文本终端、命令行界面就不是GUI。答题时多写一步全称还原能避开一大半的缩写陷阱。另一个高频翻车点在第16题的D选项B2C被描述成“个人对个人”答案是不正确的。我一开始觉得“B2C就是那种个人卖家开店的事”其实这是把C2C安到了B2C头上。BBusinessCConsumerB2C是商家对消费者个人对个人要看C2CConsumer to Consumer。比如你在淘宝个人店铺买东西是C2C在天猫品牌店下单是B2C。记忆方法是只看两个字母的对象关系别被“2”的发音带跑。类似的还有FTP这题出题人把File Transfer Protocol写成了“文本传输协议”严格说是文件传输协议选项D错误更离谱把IP地址说成住宅地址。答题时碰到选项里有一个明显错误直接锁定它不用纠结另外选项的微小瑕疵。4.3 那两道争议题单选题遇上不严谨选项怎么答现象单选第4题“UI设计交付物都包含哪些”答案是CPSD效果图。可我最早做题时选了A和B因为设计规范、产品原型明明也是交付物。这套题只有一个正确选项ABD都不选这让我一度很困惑。原因题干用了“包含哪些”这种多选式的措辞选项里却只允许单选题目本身不够严谨。出题人真正想考的其实是“最能代表UI设计师交付成果的是哪一个”而PSD效果图在传统流程里是视觉设计最核心的产出物。解决如果是考试先按标准答案C选不要和题目对着干如果是面试回答时要把完整的交付物边界讲出来“规范、原型、视觉稿都是交付物最常见的是PSD效果图前端化团队里还需要切图和标注甚至HTML页面。”像这样把争议点正面接住面试官反而会认为你有自己的判断。遇到“多选改单选”的题现在我的第一反应不再是纠结答案而是先判断出题人想考哪个知识点再选最贴近的那个选项。现象单选第6题问网页分辨率显示密度是多少dpi答案是72dpi但我在新建Photoshop文档时看到默认值经常是300dpi于是总在这道题上翻车。原因PS的新建文档默认值不等于网页设计标准。300dpi是印刷品标准网页最终显示在屏幕上按72dpi设置即可。而且严格来说屏幕用的密度单位是ppi只是国内设计师习惯统一叫dpi。解决凡是被问“网页用多少dpi”直接答72被问“印刷用多少”答300被问“为什么不是300”就说“屏幕显示不需要印刷精度”。如果你还想更严谨可以在回答末尾补一句“实际导出切图时是按倍率走的和dpi没直接关系”这句话能展示你做过真实项目。5. 把题库变成面试演练自测方法、临摹题与复习节奏这套卷子如果只是“看答案过一遍”价值发挥不出一半。我拿到手后的做法是先把答案遮住再按照面试当天的状态去闭卷刷。客观题总分90分60分单选10分多选10分判断给自己定目标75分以上剩下的分数靠临摹题补。闭卷时我会卡20~25分钟做完客观题时间一到就停笔如果超时说明概念掌握还停留在“看着眼熟”的程度没有到“直接反应”的地步。错题要按题型统计而不是只看总分。单选错得多基本是基础概念边界不清多选错得多多半是并列关系没背全比如交互设计研究范围里“任务分析、说明实时响应标准、流程设计、易用性评估”这四项都是可选项漏一个就算错判断错得多就要回头补人机交互常识。统计完以后把错得最多的知识点做成一张速查卡每天早上一遍。临摹题建议限时45分钟来做。题面是给一段长文字要求用软件完整临摹成图文页面。那段文字信息层级其实很丰富一段引言、六个编号小标题、一个短故事外加一句名言引用。它的考察点不是“画得像”而是你的软件熟练度和信息层级意识。我一般这么做先建A4尺寸或屏幕尺寸画布72dpi然后分析文字层级标题用大号加粗章节编号用主色或深色突出正文用常规字重再拉辅助线定版心把段落宽度统一最后调行距段落间距统一宁可保守也不让页面看起来字挤字。做完后切到200%检查文字边缘有没有蹭到像素点这一步很多人忽略。如果想把这套题用到极致可以做一份一周计划前四天分别过UI概念、网页规范、PS快捷键、CSS基础第五天集中背术语表周六闭卷刷客观题并整理错题周日限时完成临摹题。这样一轮下来你至少能把这份题里90%的考点变成自己的条件反射。顺带说一个工具上的小习惯这份资料是.doc格式我通常在预习阶段就把它另存为PDF方便在手机或平板上翻也可以配合常用的文档转换插件批量处理。如果面试官允许带作品集我会把错题速查卡打印成一页纸放在文件夹里候场时快速扫一遍。从那以后每次面UI岗之前我都会把这类基础题从头走一遍不是背答案而是确认自己还能立刻说清“为什么选这个”。基础题看着不起眼真到面试现场翻车的往往不是难题而是你自以为了解的知识点。希望帮到你。本文还有配套的精品资源点击获取