你好，欢迎来到原型设计课，只给你讲立刻就能用的干货，优秀产品经理基本功。
今天的内容比较简单，但是也很重要，有些看上去比较高大上的效果，可能很容易就实现了。今天我们以头条号页面为例来讲，如下图：
(案例图)
1.设置背景颜色
（图1）在页面空白处点击一下鼠标，在右侧“检视窗格 – 样式”里“背景颜色”选项中选择一个灰色；
（图1）
2.制作通栏导航条
2.1（图2）保存案例图到电脑，打开案例图，用qq截图方式把上面的头部空白位置截图保存到本地，宽度随意，高度按正常高度截取；
（图2）
2.2（图3）回到axure里，在右侧“检视窗格 – 样式”里“背景图片”选项点击“导入”按钮，选择刚才的qq截图；
（图3）
2.3（图4）然后选择下面下拉列表里的“水平重复”；为了节省时间，我们只设计头部作为演示，我们继续；
（图4）
3.页面草图效果
（图5）在“检视窗格 – 样式”里“草图/页面效果”区域滑动横向的滑块，数字越大对比度越明显，但是对图片、动态面板、内联框架等元件不起作用；下面两个图片小图标，可以设置草图是彩色或者灰色；
（图5）
4.页面居中
（图6）在“检视窗格 – 样式”里“页面排列”选项点击右侧“居中”图标，页面运行时整体居中显示，默认是居左显示；
（图6）
5.快速预览原型
（图7）其实在以前课程中已经多次讲过了，今天在正式讲一下，点击右上角“预览”图标，快速预览原型，或者快捷键f5。
（图7）
怎么样，看看效果是不是头部宽度和屏幕宽度一致，内容居中显示？现在很多网站设计都采用这种风格，也是目前比较流行的，是不是很简单。
-----课后小结-----
今天我们学习了制作通栏导航条、设置草图效果、页面居中显示，今天的内容比较简单，你试试吧。
-----课后练习-----
今天我留给你的作业是： 用今天所学的方式，制作淘宝网头部效果。
今天是我陪你成长的第16天，期待你的进步。
原型设计课 （微云）董进瑞 出品
原创内容，个人转载无需申请版权许可，商业用途无授权禁止转载。
图文编辑：董进瑞