網頁原型之基本布局

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

頁面總覽

這個頁面包括頂部的導航條，中間老師的個人簡介，下部的老師動態列表，側邊的訪客信息等。有了這個基本框架後，我們就開始畫這個頁面吧。

繪制步驟

1.確定這個頁面的寬度並拉出兩根參考線，分別是100像素和1200像素（這個頁面的寬度是1100像素）

2.繪制導航條的白色背景：選擇矩形部件拉一個1350像素的導航條

3.鎖定導航條

4.選擇圖片部件並替換成麥子學院的logo

5.選擇標簽部件繪制導航文字部分（企業直通班，麥子圈，課程庫，移動APP),可用快捷鍵Ctrl+c快速複制。

6.在部件庫中找到搜索圖標移入畫布，並在部件屬性和樣式中更改透明度

7.在網上下載”提醒“按鈕，直接複制到畫布中並更改大小，透明度等。

8.複制老師照片過來並更改圓角半徑使其成爲圓形，再添加文字標簽“文有爲”

9.添加三角小箭頭（選擇矩形部件並點擊下面圓點），填充小箭頭的顔色

10.這時候整個導航條就繪制好了，因爲這個導航條在很多的頁面都會用到，所以這裏轉換爲母版（選中導航條，右擊轉換爲母版）

11.繪制老師的個人簡介部分（選擇矩形部件拉出一個矩形並填充背景顔色）

12.複制老師頭像並設爲圓形，填充老師的個人簡介，繪制”老師“這個標簽

13.繪制右邊的排版

14.繪制下方的欄目（以以上的方法拉出一個矩形，添加兩個標簽：教學和動態，在網上下載教學和動態的圖標添加到畫布，調整他們的透明度）

15.繪制動態模塊的頭像並設置爲圓

16.拉出矩形並繪制小箭頭

17.填充動態模塊的內容（當文字很多時，用顔色，透明度來區分重點）

18.用矩形部件拼接繪制成如下元素，並填充文字內容

19.繪制3個一樣大的矩形

20.在上面3個矩形中分別填充：我的問答，（圖標可在網上下載）

21.“最近訪客”模塊的繪制（用上面的方法繪制頭像，並設置昵稱，複制頭像和昵稱的組合

22.廣告位置的繪制（可使用占位符部件）

23.更多動態的填充（可複制繪制好的組來表示）

24.繪制底部的翻頁圖標（用矩形部件並修改圓角即可）

25.底部版權信息的繪制

26.預覽

【本文由麥子學院獨家原創，轉載請注明出處並保留原文鏈接】