想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

設計師 軟件 Adobe Windows UI巴巴 UI巴巴 2017-09-10

現在越來越多ui設計師都需要畫一些交互的線框圖,如果掌握好這些技巧,可以讓你的B格提升一大節,今天為大家整理了一大波UI/UX的原型圖,有手繪的、有用軟件繪製的,分別來源於不同的設計師、交互設計師、產品經理之手,雖只是草圖,但小編看後,已經有靈感了哦!來一起看看他們的傑作。

下面來一起看看這些個優秀UI/UX線框圖

1. 草圖是Q版的,還加入了一些顏色,讓草圖生動起來。其次這是迷你草圖,文字直接用「粗簽字筆」來表示,能快速的記錄臨時的靈感想法。

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

2. 正規一點的草圖,直接用電腦軟件繪製

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

3 配色參考

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

4 頭腦風暴

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

5 灰度

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

6.快速記錄想法的草圖

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

7.用軟件製作的原型圖

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

8. 這個流程圖好看

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

9.也是快速整理結構想法的

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

10. 原型就該用這些淺灰的配色

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

11. Wow…這想法還是真豐富

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

12. 還有陰影也畫了

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

13. 草圖質量做到這樣就很棒了

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

14

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

15

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

16

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

17

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

18. 全黑不好看,加點顏色~

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

19. 打印出來,標記重點為

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

20. Cool! 這個主意太好了,我之前為什麼沒想到呢,原來有顏色的地方表示鏈接(可點擊),然後畫引導線的時候就不需要從鏈接點開始畫,這樣簡潔很多。

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

21. 你看到的連線,使用的軟件是 Adobe XD,根據設計達人網小編體驗,感覺還是 Sketch 來做ui設計好一些,希望它快點出Windows版吧……

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

22. UI設計專用的點點本?

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

23. 網頁原型

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

24. 一個迷你版原型圖,好Q~

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

25. UI比例控制很好,很整齊

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

26. 臨時想法

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

27.

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

28. 產品經理,還是用更快、更簡單的原型設計工具Mockplus吧

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

29

想要提升你的設計B格,請先學會畫這些UI/UX線框草圖

原型草圖,大多是記錄臨時的想法,當進一步確定後,就會去使用軟件畫正規一點的原型或者直接出UI設計稿。今天分享到這裡,下次畫線框圖時不妨先看看這篇文章,裡面的草圖、筆記本、顏色筆、原型工具都是不錯的。

相關推薦

推薦中...