APP介面設計

weixin_33924312發表於2017-07-19

前言

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

5663540-6e0fc04f0226ec84.png
appdesign53.png

逐步教程

Step 0

首先,給大家介紹一下我們今天使用的工具Inkscape [下載連結請戳這裡(https://inkscape.org/en/) ],Inkscape是一款開源社群支援的向量圖繪製工具,支援包括png,jpg等格式的匯入匯出,支援貝塞爾曲線工具,並提供強大的文字工具支援,更重要的是,Inkscape完全來自開源社群,是免費的噢!比起為了Illustrator 高昂的版權費而愁眉苦臉,還是讓我們張開雙臂,一起擁抱開源吧,手動斜眼。

5663540-1bf8b61368c0a870.png
Inkscape_Logo.png

Step 1

好了,工具就位,大家首先開啟Inkscape,可以看到左邊是類似PS和AI提供的一系列繪製工具,右邊則是自定義視窗,中間那塊畫布就是我們接下來工作的地方啦,具體工具的用途大家可以自行百度,或者在評論下面留言,作者菌一定知無不言言無不盡~

5663540-e94d56d685933a1b.png
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> 分欄內,我們暫時設定如下:

5663540-8b368ac643a6b437.png
appdesign4.png

Step 2

匯入參考圖片,點選圖片,把透明度設定成50%左右。


5663540-6374df96b90c7290.png
appdesign5.png

如果設定透明度的皮膚沒有出現,可以點選最左邊那個按鈕撥出。


5663540-9f62c8a29351fca3.png
appdesign2.png

Step 3

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


5663540-0ff2c1cbfea79003.png
appdesign6.png

Step 4

同樣使用矩形工具,給我們的手機加上螢幕,注意這次可以暫時把螢幕設為黑色,不透明度100%。


5663540-0df24db73ff692be.png
appdesign7.png

點選最右邊那個按鈕恢復直角。

5663540-e2afe37e33cc9fe7.png
appdesign8.png

Step 5

將黑色螢幕複製多幾分備用。


5663540-995c3873f73d026e.png
appdesign9.png

Step 6

按住Shift,使用左邊的選擇工具(游標)依次選中手機皮膚和螢幕,然後再在螢幕上點一下滑鼠左鍵,進入旋轉模式。


5663540-e3395ddda09e5f1e.png
appdesign10.png

這時按住Ctrl,拖動上邊界中央箭頭向右旋轉兩個角度,然後再拖動上邊界右側箭頭向右旋轉兩個角度,旋轉後我們的圖片是這個樣子的:

5663540-f310dd98b94fb164.png
appdesign11.png

Step 7

選中兩個矩形,按Ctrl+D複製一份副本,按住Ctrl將其拖到下面一點點的位置,變成這樣:


5663540-6e8ec20d7b59743d.png
appdesign12.png

然後到左邊皮膚選中貝塞爾曲線工具

5663540-16b5104e0e7f9fd9.png
appdesign13.png

Step 8

滾動滑鼠滾輪,放大至手機的邊角處,沿著邊界的縫隙繪製一個三角形:

5663540-b4de8fb25837baf3.png
appdesign14.png

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


5663540-ef31a154431d9185.png
appdesign15.png

到選單選擇 Path -> Union

5663540-334bd02c71336e30.png
appdesign16.png

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

5663540-6b1fb56dc4d854d8.png
appdesign17.png

Step 9

另一邊同樣處理:


5663540-fe2f4e6671166330.png
appdesign18.png

Step 10

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

5663540-7e486a4dda50d7e9.png
appdesign19.png
5663540-4675eaa229925746.png
appdesign20.png

Step 11

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

5663540-753dcffe40f06d90.png
appdesign21.png

繼續用矩形工具畫出Home鍵:


5663540-8f76451c097e23c3.png
appdesign22.png

重複操作,恢復視角:

5663540-b912964c7e566780.png
appdesign22.png

Step 12

開啟對齊皮膚,在Align -> Relative to 一欄選擇 <Last selected>


5663540-5e35047f4c81789f.png
appdesign24.png

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

5663540-d4060fddf16cfeba.png
appdesign25.png

逐個選中這些小矩形,到對齊皮膚的 Distribute 點選 <Make vertical gaps between objects equal>

5663540-b8e2cbe15f0761c6.png
appdesign26.png

這時候,我們的矩形就被均勻地分佈在螢幕上啦:

5663540-1d1ea7043602a2a6.png
appdesign27.png

Step 13

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


5663540-c7adf0679f1e1244.png
appdesign28.png

Step 14

根據應用介面佈局,匯入圖示檔案(最好是svg格式,方便後續處理)平鋪在螢幕介面上,作者菌使用的圖示庫是阿里巴巴的 IconFont,大家可以根據偏好自行選擇。

5663540-48f2b2aa51705442.png
appdesign29.png

全選,合併為組

5663540-45b08f4def6114bf.png
appdesign30.png

Step 15

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

5663540-4d727daf6ef42407.png
appdesign31.png
5663540-b240cda66c40e0b0.png
appdesign32.png

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

5663540-2ace84822de1eb8c.png
appdesign33.png

Step 16

選中手機螢幕背景,按Ctrl+D複製一份副本,點選圖層切換按鈕將其移動到四個彩色小矩形下方:


5663540-bb4452ad86d227b2.png
appdesign1.png

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

5663540-80f7b48eac4cb2fa.png
appdesign34.png

裁邊之後,看起來應該是這樣子:

5663540-094f621c933ef7a0.png
appdesign35.png

Step 17

同樣方法完成訊息頁面:

5663540-43a1e38c8fcf1cb5.png
appdesign36.png

Step 18

進入最後一個頁面,匯入自己的形象圖片,按住Ctrl用橢圓工具在上面畫一個圓:

5663540-436f113c79928570.png
appdesign37.png

選中繪製的圓形和圖片,點選Path -> Intersection,將其裁成圓形頭像。

5663540-7daed5398586c442.png
appdesign38.png

點選填充皮膚,切換到 Stroke paint,給影象描邊:


5663540-cccb49d16d553be3.png
appdesign40.png

Step 19

完成剩下部分:

5663540-a2cac531b07bef28.png
appdesign43.png

滾輪縮放返回原視角:

5663540-d51dc9d383eea678.png
appdesign44.png

Step 20

選中四個子頁面,在對齊皮膚中選則Align -> Rrelative to -> Page,然後分別點選垂直居中、水平居中對齊按鈕將它們對齊到螢幕中心。

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

5663540-5b8ddfecb535da4b.png
appdesign45.png

Step 21

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


5663540-10d145f88413f73a.png
appdesign47.png

Step 22

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


5663540-7bfda2ac95a15a39.png
appdesign48.png

Step 23

回到畫布中央,選中最上層的頁面,Ctrl+D複製一份副本,將副本向下拖動一點點,到上方皮膚點選Ungroup按鈕,可以多點幾次,保證所有分組都被解綁:

5663540-9351d525a2ac676a.png
appdesign49.png

保證元件元素選中,點選Path -> Union,將元件合併成一個大矩形色塊:

5663540-68d4069b9ae8de93.png
appdesign50.png

Step 24

稍微調整顏色和透明度,使其呈陰影狀:


5663540-ccef9542d0c1711b.png
appdesign51.png

Ctrl+D複製陰影,令陰影副本與下方的頁面正好重疊,然後選中兩個陰影塊,點選Path -> Intersection:

5663540-368db8e173467536.png
appdesign52.png

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

Step 25

微調一下整體細節,收工!

5663540-7f1e1db21af1cfdf.png
appdesign53.png

結語

產品設計其實是一門很深的學問,一個優秀的原型設計,應該給讀者呈現出一個清晰的佈局結構,通過簡潔美觀的原型設計圖,讓你的客戶快速瞭解產品的設計意圖、互動手段、動畫,以及產品功能。不誇張的說,一個優秀的產品設計師,可以讓團隊開發工作量有效減少一半甚至更多。今天給大家分享的一點設計乾貨,如果能被大家以後應用於實際工作之中,那作者菌的辛苦也就沒有白費啦。我們後續還可以給APP切片圖加上註釋,通過連線與箭頭生成頁面與頁面之間,頁面與第三方應用之間的互動關係圖,讓你的工作一目瞭然。

歡迎大家在下面跟帖留言,作者菌只要有時間看到了,就一定儘可能給大家答疑噢~

相關文章