UI机试题及详细答案.docxVIP

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