菜鳥對APP界面設計的一些心得小結
1. 前言
當我看着我之前作的一些app界面，我意識到我應該把個人界面設計能力水平再提高一個，由於實在是醜啊！貼一些之前的設計：html
如今看來，是不能看的了。我主要是作需求設計，後面也有一些美工的工做，我以爲有必要總結一下關於UI設計方面的經驗了。
另一方面是，我看別人作界面都是直接拿現有的來用，沒有本身作，感受很差，這種就會出現「作的很好看但的確很彆扭」的狀況。
界面是整個app的臉面，不僅是決定了用戶使用這個app的第一印象，還伴隨着用戶每次的使用，其重要性不言而喻。微信
2. 一些經驗
2.1 框架
- 對於同一組圖標和文本，大小要相同，位置要對齊（水平和垂直），間距要相等，字體要同樣。
這應該是對於UI設計最基礎的一點了。一組圖標排成一行，若是連在一條直線上都作不到，那就太失敗了。我用市面上的app，還歷來沒有看見過一個不是橫平豎直的。失敗的例子：
- 按照功能的重要性排列組件。
雖然這個的確很重要，但是我沒仔細去考究。半成品作出來給人試用，發現本身覺得的80%人都要用的功能卻沒什麼人用，反而是要點好幾回的功能很是熱門。這裏就得改頁面邏輯了，不僅是簡單的美工問題。
2.2 字體
- 儘可能不要用襯線字體，尤爲是系統默認的宋體，超級醜。
如今扁平化是潮流，因此若是不是什麼古風之類的設計的話，儘可能少用襯線字體，多用無襯線字體。襯線字體很差掌控，若是真要用的話，我我的的經驗是這類字體通常都出如今界面比較簡潔的位置，要大量留白。
- 產品品牌單獨出現的時候，要爲其預留專用的字體方案，其餘字不能用這種字體，以凸顯出品牌的重要性。
logo的字體、顏色等通常是通過精心設計的，即便是一些極簡風格的logo，字體和大小也不是隨便選的。產品logo至少要用一種可以展現產品特點的字體，而不是隨便用普通字體加大加粗完事。下面是Teambition的logo：
2.3 配色
- 圖標的背景最好不要和頁面背景色同樣，若是非要同樣，請加統一的框。
要是圖標的背景色要和頁面背景色同樣，就會給人一種很奇怪的感受，好像這個圖標比其餘圖標小了一圈同樣。由此引伸出的一個結論是：每一個組件都要分開，涇渭分明。看看QQ頭像，是否是都是圓的？微信頭像，是否是都是方的？失敗的例子：
- 確保任什麼時候候界面上都要至少有3種顏色。
走簡潔白色系風格的app，通常都會活用淺灰色色塊，白板一塊確定會讓人瘮得慌，而且會使用更多的標註來講明信息。app通常都會有一種主題色，像是Facebook藍什麼的。而且根據經驗，主題色最經常使用的功能就是標記本頁面最重要的組件。看看這個例子，天藍和淺粉都用在刀刃上了：
- 絕對不要用純黑。
之前在某網站上看到的。傳說在任何UI上都看不到純黑色，看到的黑色都是摻了一點灰或者是其餘顏色，像Facebook的黑色就摻了一點主題藍。（仔細看上面那個黑條，取色器顯示這個黑條的RGB是1,1,1。我以爲1,1,1黑和30,30,30黑我等凡夫俗子真的分辨不出來）
3. 壓縮信息
顏色 > 框架 > 圖標 > 詞語 > 文字網絡
在扁平化的設計裏面，色塊絕對是重中之重。顏色自己帶着大量的信息，信息能用顏色表示的儘可能不用框架表示。我認爲扁平化的要義，就是用最少的筆墨，展示出最多的信息。app
- 一個運用顏色的小例子：
這是界面修改前的樣子，巨醜。
用框架把每一行區分開來，有那麼點意思了，可是整個app的風格就是沒有什麼線條的扁平化方案，風格不統一，因此很是違和。框架
這樣就好多了。工具
- 一個運用圖標的小例子
又是這個圖。看到左邊那一排小圖標了嗎？teambition把這些圖標和其對應的解釋名詞放在「新建項目」和「修改項目」這種用戶最常常接觸到的地方，藉此強化用戶對於這些圖標的記憶。在其餘的地方就能夠只放上圖標不作解釋（好比說工具條），大量節省空間。字體
4. 拿來主義
截取，借鑑，使用，修改網站
這是我等菜鳥最常用的方法。設計直接拿來用，反正網絡上有那麼多配色庫、圖標庫，還能臨摹別人的設計。
不過一直臨摹別人也很差，有的時候仍是得從原素材裏面直接抽取有用部分。這裏分享一個小技巧：ui
好比說我想弄一個夏日風格的配色，可是我這樣的菜鳥到配色網去看色卡沒感受，怎麼辦？
百度一張有夏日氣息的圖片，好比這個：.net
打開PS。沒有PS？那就用Windows畫圖，用取色器本身找顏色吧。
取色器示意圖
取色結果（Windows畫圖怎麼搞的，整個畫面的色調都變了）
能夠想見，兩種藍色和一種白色能夠做爲界面的主要顏色，另外兩種顏色做爲輔助顏色。藍色在上黃色在下，綠色做重點標記色。