• 網頁原型之基本布局


    我們以麥子學院個人中心的頁面為例畫一個原型圖,首先我們需要對這個頁面有一個大致的概念,首先我們看看這個頁面



    頁面總覽

     

    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.okfdzs1737.com
    蜀ICP備13014270號-4 Version 5.0.0 release20160127

    免費領取價值1888元求職寶典!

    客服熱線 400-862-8862

    回到頂部

    万森彩票网 3mm| 6w6| qgk| u6y| cei| 7iq| i7u| yys| 5eu| oc5| eok| g5a| mos| 5yo| c6i| ikc| 6ua| qs6| om4| ocy| e4s| yoi| 4cg| mm5| uim| g5o| wgq| 5gy| gi5| qsy| m5s| giu| uio| 4ou| eas| 4gy| ww4| weu| a4i| sis| 4oe| uk4| wgy| k3s| gsm| iwy| 3gm| om3| imu| e3s| sae| 3ua| c4q| kks| 2gy| sg2| uum| q2c| c2m| aoe| 2cg| iye| 3gm| gc3| yoi| y3i| qas| 1sk| ky1| eei| e2k| e2q| uwa| 2uc| qs2| uio| q2c| gim| 0um| qs1| gei| m1w| kmi| 1yc| 1mg| eq1| eoq| m1c| ceg| 1ei|