個人技術部落格

由于我在團隊裡負責的是美工的版塊，是以咱們就說說

UI那點事兒

~

0.關于UI

我是在結對程式設計才開始接觸原型設計，接觸UI的，發現有很大的興趣，才開始慢慢學習和了解~

以下是百度百科對UI的定義：

UI即User Interface（使用者界面）的簡稱。泛指使用者的操作界面，包含移動APP，網頁，智能穿戴裝置等。UI設計主要指界面的樣式，美觀程度。而使用上，對軟體的人機互動、操作邏輯、界面美觀的整體設計則是同樣重要的另一個門道。好的UI不僅是讓軟體變得有個性有品味，還要讓軟體的操作變得舒适、簡單、自由，充分展現軟體的定位和特點。

我對UI的定義：

一款軟體的顔值！是以要好看！功能清楚！使用者體驗友好！畢竟這是個看臉的世界

UI設計就像是在創造軟體的美麗的外表，而程式設計設計就像是在塑造軟體有趣的靈魂。軟體有了美麗的外表和有趣的靈魂，誰不喜歡呢?

1.UI學習

1.1 新手入門

俗話說巧婦難為無米之炊，是以新手入門第一件事就是了解界面設計的工具，根據自己的需求和能力，找到适合自己的工具~現階段UI設計産品層出不窮，種類繁多，功能各異，讓我這初學者無從下手，經過一番研究和咨詢，我嘗試用了幾款比較初級的原型設計軟體，以下是我的使用者體驗?

No.1: 墨刀（MockingBot）

• 版本 ：Mac os & iOS
• 使用者體驗：

  傻瓜式操作

  ，基本上都是拖拽式操作，不需要看教程，你就能夠上手。多按幾個按鈕，多試幾下，你就大概知道要怎麼操作了，

  非常适合新手入門！

  素材庫不算多，但是對于剛入門的新手來說，已經是打開新世界，耳目一新了！也可以進行團隊協作，互動性也不錯，手機ios端可以預覽界面設計的效果（手機端也就是這個功能，不過用了其他軟體以後覺得墨刀這個功能真的很良心了！！！）也可以生成網頁預覽版本，還可以二維碼分享預覽，互動性真是良心！總體來說，新手用墨刀應該是最合适不過了，操作簡單，功能完備，互動性好~
• 适合：新手入門，UI初步設計草稿~
• 安利指數：⭐️⭐️⭐️⭐️⭐️

No.2: Balsamiq Mockups3

• 版本：Mac os
• 使用者體驗：手繪風的界面很好看！手繪的畫風也有點是打草稿的意思，貌似開發者就是這個意圖。操作讓我覺得在做一頁頁的ppt?，操作不難。界面全英文的，得看懂這些英文，知道你要用的東西在哪找得到。互動性不是很好，要想看到界面轉換的效果，就要求對方的電腦也要有這個軟體，否則隻能導出每個界面的pdf圖檔，預覽效果不直覺。（當時聽說可以産生網頁預覽效果，開心了一下子。下了Napkee，效果可以說是一言難盡。以後想用Napkee的小夥伴可以放棄了?）為了讓别人預覽到頁面轉換關系，迫使我用OmniGraffle畫了一晚上的各頁面關系圖（orz）畢竟是一款小衆的原型設計軟體，如果你對互動性沒有要求，maybe為了顔值可以一試？但是對互動性稍微有點要求的小夥伴，就不要為難自己了（認真臉）
• 案例教程：Balsamiq Mockups3中文教程 全英文軟體，咱們還是看看教程吧。
• 适合：（英語好）新手入門，UI（不要求互動性）的草稿
• 安利指數：⭐️⭐️⭐️（可能完全為了手繪風安利？？？）
• 畫風：

  

原型設計的工具很多，找到一款好用的你喜歡的軟體的捷徑是——多試！探索期間，我也下了很多其他的軟體，因為不同得人安利的軟體可能都不一樣。下下來，試試，看看畫風是不是合胃口，不喜歡就卸掉呗，你終究會找到适合你的~

新手入門至此大概就了解了UI設計是怎麼一回事，也能夠設計一個比較簡單的作品出來了~

1.2 新手進階

完成前期界面初步設計（草稿），PM說接下來你們該去學習ps了，要學會切圖，切不同像素的圖。

（一臉懵逼?）什麼是切圖？？？聽說ps很難？？？

從這裡開始，我才覺得可能才真正接觸UI吧，是以在知乎搜了這麼一個問題從零基礎如何自學 UI 設計？裡面安利很多素材~很多教程~很多幹貨！值得一看！

進階工具：Sketch

在知乎裡探索發現，Mac做界面設計可以用Sketch，比ps做界面友好，功能也不遜于ps？那就試試呗~

• 使用者體驗：Sketch确實名不虛傳啊！真心強大~功能完備，操作不難，界面友好。就單純他比ps輕量級就能完勝ps?，我啟動和退出ps都要好久（可能我的電腦比較不給力）。而且Sketch有很多超級好用的插件，極大的友善界面設計——sketch measure（标注插件，一鍵标注所有，不要太良心！）等等，雖然sketch原版是英文的，但是也有漢化插件，反正就是各種好！上手也不難，看幾個視訊教程就會了~~
• 教程：這個網上還是蠻多的~畢竟sketch很熱門！
• 安利指數：⭐️⭐️⭐️⭐️⭐️ （良心軟體！）

其他工具：真的要設計出前端人員可用的UI還是需要用到很多工具的，好的工具也能減輕你的工作量~這裡有一個工具安利網站，個人覺得還不錯~工具-UI中國

進階素材

在設計UI的時候還需要用到許多的素材：圖示、圖檔、網頁模闆等，有的是要放入你的作品中的，有的也是需要激發你的設計靈感的~

圖示素材：Iconfont

圖檔素材：花瓣網、優界網

UI設計學習網站：UI中國、站酷網、優閣網等

這些幹貨網站都可以在上面提到的知乎的那個問題裡找到~~~

這些是我在UI設計學習過程中的一些收藏

其實在這些網站裡還能找到很多教程、設計規範等等很多幹貨，很多需要學習的東西！

2.經驗總結

完成我們産品的UI設計的過程，是邊學習邊完成的過程，這就是所謂的

Doing by Learning

吧~

學習了很多關于UI的知識，也激發了我的興趣（畢竟不喜歡程式設計，也許以後會走UI這條路也不一定呢~）

在寫這篇部落格的時候，想寫的東西很多，但是交叉的内容有很多，不知道該怎麼排版才能讓讀者真正能收獲一些東西呢，亦或是讓以後的自己想起當年這些前車之鑒，maybe I‘m not a good writer~

如果我有幸讓你看到這篇思路有些亂的技術部落格，原諒我的詞窮和亂七八糟的邏輯?

我是個新手，UI的路還很長~有幸我們可以一起學習~

轉載于:https://www.cnblogs.com/perhap-s/p/7830043.html