网页原型之基本布局


我们以麦子学院个人中心的页面为例画一个原型图,首先我们需要对这个页面有一个大致的概念,首先我们看看这个页面



页面总览

 

PM1.png 

 

这个页面包括顶部的导航条,中间老师的个人简介,下部的老师动态列表,侧边的访客信息等。有了这个基本框架后,我们就开始画这个页面吧。

 


绘制步骤


1.确定这个页面的宽度并拉出两根参考线,分别是100像素和1200像素(这个页面的宽度是1100像素)


PM2.png 

 

2.绘制导航条的白色背景:选择矩形部件拉一个1350像素的导航条

 

 PM3.png

 

3.锁定导航条

 

PM4.png 

4.选择图片部件并替换成麦子学院的logo

 

PM5.png 

 

5.选择标签部件绘制导航文字部分(企业直通班,麦子圈,课程库,移动APP),可用快捷键Ctrl+c快速复制。

 

PM6.png 

 

6.在部件库中找到搜索图标移入画布,并在部件属性和样式中更改透明度

 

PM7.png 

 

7.在网上下载”提醒“按钮,直接复制到画布中并更改大小,透明度等。

 

PM8.png 

 

8.复制老师照片过来并更改圆角半径使其成为圆形,再添加文字标签“文有为”


9.添加三角小箭头(选择矩形部件并点击下面圆点),填充小箭头的颜色

PM9.png 

 

10.这时候整个导航条就绘制好了,因为这个导航条在很多的页面都会用到,所以这里转换为母版(选中导航条,右击转换为母版)

 

PM10.png 

 

11.绘制老师的个人简介部分(选择矩形部件拉出一个矩形并填充背景颜色)


PM11.png 

 

12.复制老师头像并设为圆形,填充老师的个人简介,绘制”老师“这个标签

 

PM12.png 

13.绘制右边的排版

 

PM13.png 

 

14.绘制下方的栏目(以以上的方法拉出一个矩形,添加两个标签:教学和动态,在网上下载教学和动态的图标添加到画布,调整他们的透明度)


PM14.png 

 

15.绘制动态模块的头像并设置为圆

 

  PM15.png

 

16.拉出矩形并绘制小箭头


PM16.png 

 

17.填充动态模块的内容(当文字很多时,用颜色,透明度来区分重点)


PM17.png 

 

18.用矩形部件拼接绘制成如下元素,并填充文字内容


PM18.png 

 

19.绘制3个一样大的矩形

PM19.png


20.在上面3个矩形中分别填充:我的问答,(图标可在网上下载)


PM20.png 

 

21.“最近访客”模块的绘制(用上面的方法绘制头像,并设置昵称,复制头像和昵称的组合


PM21.png 

 

22.广告位置的绘制(可使用占位符部件)


PM22.png 

 

23.更多动态的填充(可复制绘制好的组来表示)


24.绘制底部的翻页图标(用矩形部件并修改圆角即可)


PM23.png 

 

25.底部版权信息的绘制


26.预览


PM24.png 


【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

有一位课程导师想与你聊聊

客服热线 400-862-8862

回到顶部