UI 設計小白入門論

做者：不洗碗工做室 - Ajiajia葭

做者聯繫方式：549044363@qq.com

版權歸做者全部，轉載請註明出處

（兩個月前，新手入門的我能夠說是一頭霧水，不少方面都從未涉足，但，「種一棵樹最好的時間是十年前，其次是如今」，慢慢摸索，在學長學姐們的點撥和建議中慢慢成長起來，平日裏也留下了一些小總結，近日對學到的東西進行了歸類整理，必定程度上對新手能夠提供入門幫助。因而這篇小文章就誕生了。然而個人命名和尺寸等也還不規範，工具也不還不夠熟練，如今仍處於猥瑣發育期，因此這篇文章不只僅是供你們參考，更是寫給本身，若是文中有什麼不恰當的地方，歡迎批評指教，但願與你們共勉，一塊兒進步）

基礎工具

設備

• 一臺Mac能夠助你一臂之力，或者裝黑蘋果

app（基於蘋果系統）

• sketch能夠說是專門爲UI設計師量身定作的PS簡化版本，所須要的功能都有，界面友好，並且對我而言，用起來會感受比Photoshop更加便捷。（附：sketch中文用戶手冊 ）
• 切圖工具
  • PxCook（後面會具體講到）
  • Zeplin

網址

設計師導航網址（其實這個用好了，enough)

• 設計導航1
• 設計導航2

icon

• 阿里巴巴Iconfont
• flaticons
• icomoon
• Noun Project

圖片（有時候就是靈魂）

• 圖蟲
• Libre Stock
• Unsplash
• 500px

什麼都不會的時候，最好的方式就是借鑑

• UI中國
• 學UI網（這個網站對全部界面進行了分類）

顏色素材與靈感

• dribbble

logo設計

• 25學堂（裏面的UI乾貨，挺不錯的）
• 手機上的兩個app也能夠進行初設計（裝在口袋裏的logo設計）
  • Logo Market和 Logo Shop

分層級關係(接下來，打開你的sketch)

你設計出來的界面，不只僅是給你本身看的，還有開發工程師，不只僅是給你當下看的，還有將來接手此項目的下一屆UI，因此，你得有明確的分類規範，命名規範.....若是可讓從未接觸過此項目的人，看到你的目錄可以一目瞭然，那你就成功一半了。接下來，咱們就一塊兒來學習一下。

三句箴言

• 每個 app 對應 一個 Sketch 文件
• 每個 app獨立界面的彙總 對應 一個page
• 每個 app的小界面是一個 Artboard

注意：在每個Page內，還須要專門創建一個Artboard來講明 尺寸規範

• 顏色規範（color所出現的不一樣場景）
• 字體大小規範
• 圖標規範（icon選中及未被選中時的顏色）
• 按鈕規範（默認和不可點擊的狀態、及其餘）

命名

通常來講，安卓或IOS開發工程師是在接收到UI的設計圖以後開始工做，然而不少時候，在處理來自UI的圖片命名上，總要或多或少的花費一些時間，由於大部分是「中文+數字」，因此安卓師在畫layout佈局的時候就須要：打開英漢詞典查單詞->安卓規範命名id->修改圖片名字id,再把圖片拖入drawable中。 其實，UI能夠爲這個過程加一個「疾跑」，想象一下，若是工程師在拿到切圖的時候，就能夠直接用這個名字來令爲id,這能夠必定程度上節省不少時間，與此同時，UI的英文單詞量能夠有顯著上升的，這個能夠有！哈哈哈哈

• Artboard（畫板）命名

  • 模塊-功能

  

  • 將全部的Artboard按照序列號排好，相同模塊內容的須要放在一塊兒
  • 另外：最頂層加一個額外的Artboard，主要用來畫流程線，和一些信息備註，如：

• Layer（圖層）命名

  • 將頁面大型分塊，大塊建文件包，按照圖層內容進行分包
  • 類型--範圍--功能

• icon（圖標）命名

  • 模塊--類別--功能--狀態
  • 文本顏色：text前綴
  • 分割線顏色：div前綴

狀態：

• 默認狀態的顏色，添加normal後綴
• 按下時的顏色，添加pressed後綴
• 選中時的顏色，添加selected後綴
• 不可用時的顏色，添加disable後綴

類別：

• 導航欄：nav
• 頁面標題：title
• 按鈕：btn
• 標籤：label
• 提示文字：hint
• 菜單欄：tab
• 背景圖片：bg
• 默認圖片：def

基礎概念

Android開發單位

• dp
  用於標註「長度」的單位
• sp
  用於標註「字體」的單位

設計稿尺寸

• 推薦1080x1920px（sketch用戶：540 x 960）

界面控件尺寸

• 底部（頂部）導航欄

  • 做用：便於用戶切換頁面，提供快速導航的功能
  • 適用條件：3～5個同等級的跳轉界面，若是少於三個能夠考慮Tabs（標籤）來替代，若是大於三個則能夠經過其餘位置，好比導航抽屜來安放。

• 狀態欄

  • 做用：顯示電量、時間、信號、網絡等狀態

• 標籤欄

界面圖標尺寸(1080x1920px)

• 啓動圖標（home頁或app列表頁）：48 x 48 dp
• 操做欄圖標：總體大小爲32x32dp圖形實際區域爲 24x24dp
• 上下文圖標：總體大小爲16x 16dp圖形實際區域爲 12x12dp
• 系統通知圖標：總體大小爲24x24dp ，圖形實際區域爲 22x22dp
• 最細畫筆：不小於6px

界面文字

• 字體
  • 英文字體：Roboto
  • 中文字體：source han sans 或者noto sans CJK

圖片命名規範

• 模塊--類別--功能--狀態.png

爲你飛得更高，來一些助攻吧

• 如何在4小時內學會 AI
• iOS設計規範
• Android設計規範
• 界面切圖命名規範

切圖工具PxCook

使用詳情

具體操做：Pxcook

• 快速導出：一鍵快速導出到PxCook，無縫享受智能標註

• 數據填充：快速批量填充名字、時間、日期、手機號、郵箱

• 快速複製：精準到像素的快速批量複製設計元素

• 快速參考線

不斷更新中.....