交互原型畫得醜？29個優秀UI/UX線框草圖

如今愈來愈多UI設計師都須要畫一些交互的線框圖，然而做爲視覺專家，固然要把它畫得靚靚的嘛，是否是？因此不少用戶會使用《5款高效的原型設計工具》來繪製，或者直接手繪更有逼格。

今天達人手工整理一大波UI/UX的原型圖，有手繪的、有用軟件繪製的，分別來源於不一樣的設計師、交互設計師、產品經理之手，雖只是草圖，但小編看後，已經有靈感了哦！來一塊兒看看他們的傑做。

草圖來源：wireflow，ux_ui_wireframes

1. 小編達人喜歡這個佈局，因此直接放第一個截圖，首先草圖是Q版的，還加入了一些顏色，讓草圖生動起來。其次這是迷你草圖，文字直接用「粗簽字筆」來表示，能快速的記錄臨時的靈感想法。

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

3 配色參考

4 頭腦風暴

5 灰度

5.

6.

7.

8. 這個流程圖好看

9.

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

11. Wow…

12. 還有陰影也畫了

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

14

15

16

17

18. 全黑很差看，加點顏色~

19. 打印出來，標記重點爲

20. Cool! 這個主意太好了，我以前爲何沒想到呢，原來有顏色的地方表示連接（可點擊），而後畫引導線的時候就不須要從連接點開始畫，這樣簡潔不少。

21. 你看到的連線，使用的軟件是 Adobe XD，根據設計達人網小編體驗，感受仍是 Sketch 來作UI設計好一些，但願它快點出Windows版吧……

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

23. 網頁原型

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

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

26. 臨時想法

27.

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

原型草圖，大可能是記錄臨時的想法，當進一點肯定後，就會去使用軟件畫正規一點的原型或者直接出UI設計稿。

今天分享到這裏，下次畫線框圖時不妨先看看這篇文章，裏面的草圖、筆記本、顏色筆、原型工具都是不錯的。

 

原文連接：http://www.shejidaren.com/ui-and-ux-wireframes.html