魔兽争霸3冰封王座1.27下载:網頁原型之基本布局


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



頁面總覽

 

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.繪制動態??櫚耐廢癲⑸柚夢?/strong>

 

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

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

客服熱線 400-862-8862

回到頂部