APP界面設計<手把手教你用Inkscape繪制結構切片圖>

前言

大家平時給老板做產品設計稿的時候八拱，是不是經常需要用到許多原型工具呢？而這時候，一個美觀的UI展示原型粪摘，或許在會議上給你的設計大大增加說服力噢瀑晒，今天給大家?guī)淼氖亲髡呔趯W習Inkscape過程中做的一個小練習，通過復刻<簡書>的基本界面徘意，與大家分享如何繪制美觀的APP UI 切片結構圖苔悦，讓你的界面層次一目了然。

appdesign53.png

逐步教程

Step 0

首先椎咧，給大家介紹一下我們今天使用的工具Inkscape [下載鏈接請戳這里(https://inkscape.org/en/) ]玖详，Inkscape是一款開源社區(qū)支持的矢量圖繪制工具，支持包括png,jpg等格式的導入導出勤讽，支持貝塞爾曲線工具蟋座，并提供強大的文本工具支持，更重要的是脚牍，Inkscape完全來自開源社區(qū)向臀，是免費的噢！比起為了Illustrator 高昂的版權費而愁眉苦臉诸狭，還是讓我們張開雙臂券膀，一起擁抱開源吧，手動斜眼驯遇。

Inkscape_Logo.png

Step 1

好了芹彬，工具就位，大家首先打開Inkscape妹懒，可以看到左邊是類似PS和AI提供的一系列繪制工具雀监，右邊則是自定義窗口，中間那塊畫布就是我們接下來工作的地方啦眨唬，具體工具的用途大家可以自行百度会前，或者在評論下面留言，作者菌一定知無不言言無不盡～

appdesign0.png

我們在繪制移動端界面時匾竿，首先給自己找一個參考瓦宜，作者菌作為一個忠實的米粉，在這里當然是給大家推薦小米六啦～圖片有很多大家可以在網上自行選擇岭妖，或者直接下載作者菌提供的資源噢 ↓

小米六渲染圖(http://www.guphotos.com/images/P/4/PZ0041B-US-64/PZ0041B-US-64-1-cc0f-2UeN.jpg)

點擊菜單欄的File -> Document Property (或者直接按快捷鍵Ctrl + Shift + D)呼出文檔屬性設置临庇，在 <Page> 分欄內，我們暫時設置如下:

appdesign4.png

Step 2

導入參考圖片昵慌，點擊圖片假夺，把透明度設置成50%左右。

appdesign5.png

如果設置透明度的面板沒有出現斋攀，可以點擊最左邊那個按鈕呼出已卷。

appdesign2.png

Step 3

在左邊面板上選擇矩形工具，根據圖片的尺寸畫一個一模一樣的矩形覆蓋在參考圖上面淳蔼，保持矩形工具選中狀態(tài)下侧蘸，拖動矩形右上角的那個小圈圈裁眯，給它加一個圓角。

appdesign6.png

Step 4

同樣使用矩形工具讳癌，給我們的手機加上屏幕穿稳，注意這次可以暫時把屏幕設為黑色，不透明度100%晌坤。

appdesign7.png

點擊最右邊那個按鈕恢復直角逢艘。

appdesign8.png

Step 5

將黑色屏幕復制多幾分備用。

appdesign9.png

Step 6

按住Shift泡仗，使用左邊的選擇工具(光標)依次選中手機面板和屏幕埋虹，然后再在屏幕上點一下鼠標左鍵，進入旋轉模式娩怎。

appdesign10.png

這時按住Ctrl搔课，拖動上邊界中央箭頭向右旋轉兩個角度，然后再拖動上邊界右側箭頭向右旋轉兩個角度截亦，旋轉后我們的圖片是這個樣子的：

appdesign11.png

Step 7

選中兩個矩形爬泥，按Ctrl+D復制一份副本，按住Ctrl將其拖到下面一點點的位置崩瓤，變成這樣：

appdesign12.png

然后到左邊面板選中貝塞爾曲線工具

appdesign13.png

Step 8

滾動鼠標滾輪袍啡，放大至手機的邊角處，沿著邊界的縫隙繪制一個三角形:

appdesign14.png

保持貝塞爾軌跡選中狀態(tài)却桶，按住Shift境输，點擊選中手機下方顏色較深的矩形面板

appdesign15.png

到菜單選擇 Path -> Union

appdesign16.png

兩張屏幕間的邊角現在應該合上了

appdesign17.png

Step 9

另一邊同樣處理:

appdesign18.png

Step 10

拖一個選框，選中繪制好的手機模型颖系，為他們創(chuàng)建分組:

appdesign19.png

appdesign20.png

Step 11

這時候我們如果還想給手機加一個Home鍵該怎么辦呢嗅剖？別急，切回選擇工具嘁扼，用同樣的方法逆時針旋轉４次信粮，恢復原來的樣子：

appdesign21.png

繼續(xù)用矩形工具畫出Home鍵:

appdesign22.png

重復操作，恢復視角:

appdesign22.png

Step 12

打開對齊面板趁啸，在Align -> Relative to 一欄選擇 <Last selected>

appdesign24.png

找到其中一個之前準備好的黑色屏幕强缘，在上面隨便畫出幾個矩形:

appdesign25.png

逐個選中這些小矩形，到對齊面板的 Distribute 點擊 <Make vertical gaps between objects equal>

appdesign26.png

這時候不傅，我們的矩形就被均勻地分布在屏幕上啦:

appdesign27.png

Step 13

稍微調整上下兩側的矩形高度旅掂，作為導航欄:

appdesign28.png

Step 14

根據應用界面布局，導入圖標文件(最好是svg格式访娶，方便后續(xù)處理)平鋪在屏幕界面上商虐，作者菌使用的圖標庫是阿里巴巴的 IconFont，大家可以根據偏好自行選擇。

appdesign29.png

全選称龙，合并為組

appdesign30.png

Step 15

同樣方法完成<發(fā)現>頁面的元素填充:

appdesign31.png

appdesign32.png

現在畫面看起來應該是這樣子：

appdesign33.png

Step 16

選中手機屏幕背景，按Ctrl+D復制一份副本戳晌，點擊圖層切換按鈕將其移動到四個彩色小矩形下方:

appdesign1.png

按住Shift選中背景和最右邊的小矩形鲫尊，點擊 Path -> Intersection

appdesign34.png

裁邊之后，看起來應該是這樣子:

appdesign35.png

Step 17

同樣方法完成消息頁面:

appdesign36.png

Step 18

進入最后一個頁面沦偎，導入自己的形象圖片疫向，按住Ctrl用橢圓工具在上面畫一個圓:

appdesign37.png

選中繪制的圓形和圖片，點擊Path -> Intersection豪嚎，將其裁成圓形頭像搔驼。

appdesign38.png

點擊填充面板，切換到 Stroke paint侈询，給圖像描邊:

appdesign40.png

Step 19

完成剩下部分:

appdesign43.png

滾輪縮放返回原視角：

appdesign44.png

Step 20

選中四個子頁面舌涨，在對齊面板中選則Align -> Rrelative to -> Page，然后分別點擊垂直居中扔字、水平居中對齊按鈕將它們對齊到屏幕中心囊嘉。

將頁面分別旋轉四次，變?yōu)榱Ⅲw視角革为，同時按住Ctrl拖動把它們分開一點點：

appdesign45.png

Step 21

這時候參考背景圖已經完成了它的使命扭粱，讓我們把它移出畫布區(qū)域:

appdesign47.png

Step 22

點擊File -> Document properties 為圖片選擇一個合適的背景色:

appdesign48.png

Step 23

回到畫布中央，選中最上層的頁面震檩，Ctrl+D復制一份副本琢蛤，將副本向下拖動一點點，到上方面板點擊Ungroup按鈕抛虏，可以多點幾次博其，保證所有分組都被解綁:

appdesign49.png

保證組件元素選中，點擊Path -> Union嘉蕾，將組件合并成一個大矩形色塊:

appdesign50.png

Step 24

稍微調整顏色和透明度贺奠，使其呈陰影狀：

appdesign51.png

Ctrl+D復制陰影，令陰影副本與下方的頁面正好重疊错忱，然后選中兩個陰影塊儡率，點擊Path -> Intersection:

appdesign52.png

這樣一層漂亮的陰影就裁出來啦！

Step 25

微調一下整體細節(jié)以清，收工儿普！