• 移动开发移动端
  • 学习Android基础
  • 学习Android进阶
  • 学习Android组件
  • 学习Android实战
  • 学习Swift
  • 学习ios
  • 学习Android UI
  • 数据库开发数据库
  • 学习Mysql
  • 学习Redis
  • 学习Memcache
  • 学习云计算
  • 产品经理,网站运营产品运营
  • 学习产品经理
  • 学习互联网思维
  • 学习产品分析
  • 学习产品原型
  • 学习产品设计
  • 学习网络运营
  • 学习新媒体运营
  • 学习网络推广
  • 网站设计,UI设计设计教程
  • 学习设计基础
  • 学习设计工具
  • 学习UI设计
  • 学习平面构成
  • 学习AE
  • 学习平面设计
  • 嵌入式开发,物联网开发智能硬件
  • 学习物联网
  • 学习ARM
  • 学习嵌入式
  • 学习蓝牙开发
  • 开发工具开发工具
  • 学习Eclipse IDE
  • 网站建设网站建设
  • 学习Web应用安全
  • 产品经理培训
    思维导图教程 AXURE教程 流程图教程

    网页原型之基本布局


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



    页面总览

     

    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 


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

    相关内容

  • ·  思维导图 产品经理常用工具
  • ·  流程图
  • ·  产品经理原型设计工具Axure使用基础
  • ·  产品经理:战略精准定位【SABC法】(上)
  • ·  一年仅一次的狂欢,百万优惠等你来拿!
  • logo
    © 2012-2016 www.maiziedu.com
    蜀ICP备13014270号-4 Version 5.0.0 release20160127

    免费领取价值1888元求职宝典!

    客服热线 400-862-8862

    回到顶部