APP介面設計

weixin_33924312發表於2017-07-19

前言

大家平時給老闆做產品設計稿的時候，是不是經常需要用到許多原型工具呢？而這時候，一個美觀的UI展示原型，或許在會議上給你的設計大大增加說服力噢，今天給大家帶來的是作者菌在學習Inkscape過程中做的一個小練習，通過復刻<簡書>的基本介面，與大家分享如何繪製美觀的APP UI 切片結構圖，讓你的介面層次一目瞭然。

appdesign53.png

逐步教程

Step 0

首先，給大家介紹一下我們今天使用的工具Inkscape [下載連結請戳這裡(https://inkscape.org/en/) ]，Inkscape是一款開源社群支援的向量圖繪製工具，支援包括png,jpg等格式的匯入匯出，支援貝塞爾曲線工具，並提供強大的文字工具支援，更重要的是，Inkscape完全來自開源社群，是免費的噢！比起為了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

在左邊皮膚上選擇矩形工具，根據圖片的尺寸畫一個一模一樣的矩形覆蓋在參考圖上面，保持矩形工具選中狀態下，拖動矩形右上角的那個小圈圈，給它加一個圓角。

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

保持貝塞爾軌跡選中狀態，按住Shift，點選選中手機下方顏色較深的矩形皮膚

appdesign15.png

到選單選擇 Path -> Union

appdesign16.png

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

appdesign17.png

Step 9

另一邊同樣處理:

appdesign18.png

Step 10

拖一個選框，選中繪製好的手機模型，為他們建立分組:

appdesign19.png

appdesign20.png

Step 11

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

appdesign21.png

繼續用矩形工具畫出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格式，方便後續處理)平鋪在螢幕介面上，作者菌使用的圖示庫是阿里巴巴的 IconFont，大家可以根據偏好自行選擇。

appdesign29.png

全選，合併為組

appdesign30.png

Step 15

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

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，然後分別點選垂直居中、水平居中對齊按鈕將它們對齊到螢幕中心。

將頁面分別旋轉四次，變為立體視角，同時按住Ctrl拖動把它們分開一點點：

appdesign45.png

Step 21

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

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

微調一下整體細節，收工！