UI設計技巧指南

烏魚説第六期嘉賓預告文章

【烏·魚·說】

不想高談闊論，只想和你促膝而談，以設計實踐經驗交流為主的公益圈子，每期我們將邀請一位嘉賓與大家聊聊工作實踐中的那些事，不容錯過你值得擁有！

圖示是UI設計裡非常重要的模組，最重要的一點，保持風格統一。如果是填充型的圖示那麼一套設計裡不要出現線性的圖示，其次就是描邊大小的統一，定下了3PX就全套保持即可。最後圖示要做到識別度、差異性。

字型合理運用是UI設計很重要的一點，要麼字型很不相同，要麼就用一款字型。像第一個案例，字型字形比較接近，但是又不是一款字型，看久了非常突兒。其次就是要突出主視覺文案的時候，要儘量吧輔助字型縮小，型成對比。

目前最流行的兩種設計方式，第一:扁平化第二:卡片式。卡片式最有意思的就是運用投影來模擬現實的距離感和層級。如果選用卡片式的設計方式，那麼全域性儘量都要運用上投影效果，不要一塊卡片，一塊扁平，風格保持統很關鍵。

投影選用的顏色正確和錯誤，直接拉低作品質量。在工作中，按鈕等控制元件使用投影儘量用吸取工具，吧主色調提取出來吧明度壓低一些，總之要保持同色系的投影，這樣才符合視覺邏輯。其次，如果按鈕上有文字，文字儘量不要純白，記得帶一一些同色系的淡淡顏色。

規則是死的，人是活的。很多時候，如果需求是比較寬且走文藝氣息的時候，要嘗試突破原則，用一些另類的排版方式，其實也是做好設計的本質。在圖片類APP中，錯落性一些的排版，會使你的作品更有魅力。

好的設計，是在最少的元素下還能第一時間突出重點資訊。極簡是種趨勢，你要減少不必要的元素，或者簡化元素。不要想著吧畫面撐滿就是好的設計，有時候，適當的留白，給使用者呼吸的空間更重要。

如果經常用第一種方式給客戶看稿件，那麼你很難通過。做方案時，文案符合標題或者產品主旨才行，其次就是上下間距一般是20-28，一般用24就夠。千萬不要全部放無關的文案，很拉低你的設計水準。

輔助文字的合理運用，也是提升質感和視覺的關鍵點。如果有一個或者多個主要的視覺要素，那麼輔助的文字大小盡量比主視覺小，顏色要比主視覺淺。比如主文字字號24PX輔助視覺就需要14-18左右即可，主文字純黑，輔助文字淺灰色。

線段的作用，主要是區分資訊層級。所以輔助線段一般採取淺色調處理，千萬不要過重會顯得很髒，拉低整體質感。

引導頁的作用，是引導使用者如何使用產品或者提醒更新內容。不能爲了設計而設計，要把握住主題，針對主題進行圖示等元素設計，比如新增查閱資料夾功能，那麼就要根據資料夾、放大鏡等元素進行設計。做一個掃描器就肯定是錯誤的了。其次就是，風格統一，如果都是圖示，或者都是圖片，那麼全套都要統。

間距的統一性，是排版中時刻要注意的。等距等比是保證介面乾淨整齊的一個關鍵要素切記，要麼處處一致，要麼全都不一致。

顏色的合理運用，是至關重要的。一個APP或者一個介面儘量保證一個主色調，一個輔色調即可，不要出現干擾或者與主色調無關的顏色，這樣會導致使用者質疑你到底是不是一款產品。其次就是，想讓使用者點選什麼按鈕，那麼取消按鈕最好弱化視覺。

這一點是很多人經常忽視的，一款好的設計或者好的產品，一定要做好輔助指引工作比如上面的兩個登入介面，如果再輸入過程中有相應的指引，  那麼會減少使用者出錯的機率，也會減少來回點選檢視這個框是幹什麼的次數，總之，指引很關鍵。

很多時候，對比突出做到位了，才能讓使用者第一眼進 來把注意力集中在一個點上。比如上面第一個案例，沒有形成鮮明的對比， 使用者進來就會不知道先把注意力集中在哪個點上，第三個是正確的做法。

使用者位置，是互動邏輯上很重要的一點。你要讓當前位置足夠清晰，要一眼看到我在什麼位置纔是正確的。不要害怕對比過重，你要做的，就是告訴使用者，我在這裏。

人的正常習慣閱讀順序是從上而下，從左到右，所以在做某些需求的時候，需要考慮閱讀頁序這個概念，要讓使用者最快的時間獲取到文字資訊。

2017年自從淘寶U|改版之後，漸變色又逐漸流行起來。但是也不能盲目跟隨，還是看產品主要氣質，其次就是運用漸變色彩不要垮色系，儘量同色系，根據明度的變化來調節，太浮誇太誇張就是不適合的了。

這一期教程到這裏就告一段落了，希望你們能再設計路上做得越來越好。安逸使人沉迷，每天進步一點點，久了，你就離那個目標近了。沒有什麼東西是絕對的，你要根據情況進行選擇進行，反覆思考。

【第六期嘉賓部分作品】

大家猜一下嘉賓是誰，讓我們6月7號在烏魚說揭曉！