1. 前言

當我看著我以前做的一些app界面，我意識到我應該把我的界面設計能力水平再提升一個，因為實在是丑啊！貼一些以前的設計：

現在看來，是不能看的了。我主要是做需求設計，后面也有一些美工的工作，我覺得有必要總結一下關于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的風格就是沒有什么線條的扁平化方案，風格不統一，所以非常違和。

這樣就好多了。

• 一個運用圖標的小例子

又是這個圖。看到左邊那一排小圖標了嗎？teambition把這些圖標和其對應的解釋名詞放在“新建項目”和“修改項目”這種用戶最經常接觸到的地方，借此強化用戶對于這些圖標的記憶。在其他的地方就可以只放上圖標不做解釋（比如說工具條），大量節省空間。

4. 拿來主義

截取，借鑒，使用，修改

這是我等菜鳥最經常使用的方法。設計直接拿來用，反正網絡上有那么多配色庫、圖標庫，還能臨摹別人的設計。
不過一直臨摹別人也不好，有的時候還是得從原素材里面直接抽取有用部分。這里分享一個小技巧：

比如說我想弄一個夏日風格的配色，但是我這樣的菜鳥到配色網去看色卡沒感覺，怎么辦？
百度一張有夏日氣息的圖片，比如這個：

打開PS。沒有PS？那就用Windows畫圖，用取色器自己找顏色吧。
取色器示意圖

取色結果（Windows畫圖怎么搞的，整個畫面的色調都變了）

可以想見，兩種藍色和一種白色可以作為界面的主要顏色，另外兩種顏色作為輔助顏色。藍色在上黃色在下，綠色作重點標記色。

5. 延伸閱讀

APP界面常用的五種顏色搭配
配色網
阿里巴巴矢量圖標庫

轉載于:https://www.cnblogs.com/Metak/p/8290455.html

總結

以上是生活随笔為你收集整理的菜鸟对APP界面设计的一些心得小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。