UI机试题及详细答案.docxVIP

  • 1
  • 0
  • 约1.08万字
  • 约 12页
  • 2026-05-19 发布于河北
  • 举报

UI机试题及详细答案

一、基础应用题(40分)

题目1:简单登录页面设计(20分)

需求:设计一个移动端(375px宽度)登录页面,包含以下元素:

顶部logo(尺寸80x80,居中显示,下方间距16px)

两个输入框:手机号(提示文字“请输入手机号”)、密码(提示文字“请输入密码”,带密码隐藏/显示切换)

登录按钮(背景色#1677ff,圆角8px,文字居中,点击态背景色#0f62fe)

底部“忘记密码?”“注册账号”文字(分别居左、居右,文字颜色#1677ff,字体大小14px)

整体页面背景色#f5f7fa,输入框边框1pxsolid#e8e8e8,聚焦时边框色#1677ff,圆角6px

要求:写出核心HTML结构+CSS样式(可使用原生CSS或Tailwind,无需JS,重点体现布局和样式细节),说明设计思路。

详细答案

1.设计思路

贴合移动端用户习惯,优先保证操作便捷性:logo居中突出品牌识别,输入框上下间距合理(避免误触),登录按钮占满可用宽度(便于点击),底部文字区分清晰,色彩采用经典蓝白搭配,符合大众审美且突出交互重点(输入框聚焦、按钮点击态),整体风格简洁干净,无多余装饰,兼顾美观与实用性。

2.HTML结构(原生)

html

!DOCTYPEhtml

htmllang=zh-CN

head

metacharset=UTF-8

文档评论(0)

1亿VIP精品文档

相关文档