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

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

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

我們在繪製移動端介面時,首先給自己找一個參考,作者菌作為一個忠實的米粉,在這裡當然是給大家推薦小米六啦~圖片有很多大家可以在網上自行選擇,或者直接下載作者菌提供的資源噢 ↓
小米六渲染圖(http://www.guphotos.com/images/P/4/PZ0041B-US-64/PZ0041B-US-64-1-cc0f-2UeN.jpg)
點選選單欄的File -> Document Property (或者直接按快捷鍵Ctrl + Shift + D)撥出文件屬性設定,在 <Page> 分欄內,我們暫時設定如下:

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

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

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

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

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

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

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

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

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

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

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

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

到選單選擇 Path -> Union

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

Step 9
另一邊同樣處理:

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


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

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

重複操作,恢復視角:

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

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

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

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

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

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

全選,合併為組

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


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

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

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

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

Step 17
同樣方法完成訊息頁面:

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

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

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

Step 19
完成剩下部分:

滾輪縮放返回原視角:

Step 20
選中四個子頁面,在對齊皮膚中選則Align -> Rrelative to -> Page,然後分別點選垂直居中、水平居中對齊按鈕將它們對齊到螢幕中心。
將頁面分別旋轉四次,變為立體視角,同時按住Ctrl拖動把它們分開一點點:

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

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

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

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

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

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

這樣一層漂亮的陰影就裁出來啦!
Step 25
微調一下整體細節,收工!

結語
產品設計其實是一門很深的學問,一個優秀的原型設計,應該給讀者呈現出一個清晰的佈局結構,通過簡潔美觀的原型設計圖,讓你的客戶快速瞭解產品的設計意圖、互動手段、動畫,以及產品功能。不誇張的說,一個優秀的產品設計師,可以讓團隊開發工作量有效減少一半甚至更多。今天給大家分享的一點設計乾貨,如果能被大家以後應用於實際工作之中,那作者菌的辛苦也就沒有白費啦。我們後續還可以給APP切片圖加上註釋,通過連線與箭頭生成頁面與頁面之間,頁面與第三方應用之間的互動關係圖,讓你的工作一目瞭然。
歡迎大家在下面跟帖留言,作者菌只要有時間看到了,就一定儘可能給大家答疑噢~
相關文章
- 國外APP介面設計參考APP
- UI設計 | 分享一波購票類的APP介面設計UIAPP
- UI | 一組酒店類APP介面設計參考UIAPP
- 一組郵箱類APP介面設計參考APP
- 一組動物主題APP介面設計參考APP
- “手把手教你設計”—12個最佳手機APP介面設計教程APP
- 10個最新手機美食APP介面設計欣賞APP
- UI培訓教程分享:APP啟動頁UI介面設計UIAPP
- 乾貨 | APP介面設計的色彩注意細節,有哪些?APP
- 【介面功能設計】TopThink介面功能設計建議
- 介面設計分析
- API介面設計API
- UI | 寶寶的世界 分享一組嬰兒用品APP介面設計UIAPP
- 賞析 | APP介面設計,靈感來啦(第四期)APP
- 賞析 | APP介面設計,靈感來啦(第五期)APP
- 後臺介面設計之表格設計
- 短影片app開發,可以借鑑的幾個登入介面設計APP
- RPC呼叫介面設計RPC
- 面向介面程式設計程式設計
- 轉賬介面設計
- 介面設計標準
- app 呼叫介面APP
- UI | 點選,開始我們的征途! 分享一組旅行APP介面設計UIAPP
- App可靠性設計APP
- API 介面設計規範API
- 微信模板介面設計
- WTL 介面設計篇(CSkinEdit)
- QT硬體介面設計QT
- 介面卡設計模式設計模式
- 自適應介面設計
- 介面設計的那些事
- Angular Public API 介面設計AngularAPI
- (03)Flink 程式設計介面程式設計
- WTL 介面設計篇(CSkinListCtrl)
- Java設計模式之介面卡設計模式Java設計模式
- 【乾貨】遊戲介面設計 (一)核心設計遊戲
- 介面設計方法 — 3. 字典功能的設計
- 如何設計出“好看”的UI介面(二):4個步驟,搞定介面設計UI
- java 介面,介面的特性,介面實現多型,面向介面程式設計Java多型程式設計