布局结构设计首页布局核心主次分明,移动端优先H5为例不同断点的布局调整,断点布局结构从上到下本地化细节,移动端定位栏核心按钮、橙色固定底部热门服务单列卡片。
平板端定位搜索栏顶部双列布局,左列热门服务右列推荐,预约按钮悬浮右侧新增悬浮入口,PC端顶部导航、首页、服务、关于我们、联系我们、三列布局左列分类中列服务,右列本地口碑预约表单直接展示,无需点击底部添加增强信任,核心功能模块设计表单模块,移动端单列表单字段极简,输入框高度≥44px适配手指点击。
PC端双列表单补充备注企业信息,等次要字段适配鼠标操作,移动端单列列表每行仅展示核心信息,PC端多列列表展示完整信息按钮模块,移动端核心按钮占屏幕宽度80%≥280px,固定底部避免滚动后找不到,PC端按钮宽度自适应120-180px悬浮显示提示,本地化按钮文案用户易懂表达。
交互设计适配多设备操作习惯移动端交互,支持滑动切换下拉刷新点击放大图片,表单提交后弹出简洁提示避免复杂弹窗,中老年适配点击放大字体表单支持语音输入减少打字。
PC端交互支持鼠标悬浮提示、键盘回车提交表单侧边栏导航固定,无需滚动查找跨设备交互统一,返回按钮移动端左上角、PC端左上角样式一致数据同步,客户信息、审批记录在手机/PC端实时同步,操作状态一致。
视觉设计本地化多设备适配配色,蓝色#165DFF无鲜艳配色符合官方规范,蓝色橙色行动适配保定用户审美,避免过于新潮的撞色,企业H5深灰色专业、绿色增长贴合保定制造业 商贸企业风格。
字体全局用微软雅黑思源黑体,全设备兼容移动端正文字号≥14px,PC端≥16px中老年适配,新增大字模式字号放大1.5 倍,行间距增加至1.8倍,图片图标图标用矢量图标SVG,确保缩放不失真。