设计:导航 - 移动端

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们再去设计一下页面的导航在移动端的样式 .. 在小尺寸的移动端,标志的位置是在导航的中间 ... 复制一个标志 ..

调整一下标志的尺寸 ... 宽度设置成 70 ..

导航的两边是两个工具小图标 ... 右边儿是搜索图标 ... 复制一个搜索图标 ... 放在导航栏的右边 ...

图标的右边距可以是 16 像素 ...

导航栏的左边是一个菜单图标 .. 在项目的下面找到这个 ic_menu_black_24px.svg .. 调整一下它的位置 ... 垂直居中 ... 左边留出 16 个像素 ..

点击这个菜单图标会打开一个边栏,上面会显示导航栏上的菜单项目 ..

修改一下这些图层的名字 ...

把它们放在一个群组里 ... 名字是 normal ,表示导航栏的正常状态 .

再去设计一下导航栏的搜索状态 .. 隐藏这个群组 ..

复制一个关闭小图标 ..

放在导航栏的右边儿 ..

导航栏的左边显示一个点位符文字 ... 搜索 ... 可以直接复制一下 ...

设计:导航 - 移动端《 网页设计案例:导航设计 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点