初學UI小知識總結

當作一個網站的時候你要清楚或者作一個內部的小問卷：當你第一次看到……網的時，你但願他的反應是什麼？

工做流程，每次Ui作完，Ue同窗須要覈對內容是否對，是否缺頁，視覺需覈對規範。

第一步：網頁尺寸

WEB端主流顯示器：1920*1080\1366*768

內容區域爲：1200PX

第二步：柵格系統，善於靈活運用！

——網頁模塊大小規範，網頁設計中柵格系統。W=(A*n)-i。

第三步：排版小技巧

【A】文字排版規範

一、對文字信息進行層級區分（能夠參考一些好的APP）
經過對字體大小、顏色、留白、層級劃分等處理，把相同屬性的信息歸類設計，讓整個信息排列主次分明，層級清晰。
二、預估好信息呈現的最大值（即字符數量的最大值，設定一個字符上限，以避免信息超出可控範圍）
三、善於利用提示符進行設計：數字、符號、字母等（也屬於層級範疇，提高視覺傳遞效果，同時加強用戶體驗）

【B】圖片的使用技巧

一、圖片比例：經常使用的圖片比例，如 1:一、4:三、16:九、16:10等等；
1:1 強調主體的存在感 例：電商
4:3 圖像緊湊、更易構圖 例：站酷、UI中國的做品封面、Dribbble做品展現
16:9 電影場景般的效果 例：影視娛樂類APP
16:10 擁抱黃金比例 例：視頻等APP
X:≤Y 瀑布流設計 H花瓣網的最大值爲848px
二、圖片比例一致性
三、提升圖片質量
四、圖片的真實還原——場景應用

【C】設計策略

一、親密原則：先對內容進行信息分層，屬於一個層級分爲一組，有關聯的內容會離的更近，有間距規律可清洗區分信息。
二、對比原則：經過顏色對比、粗細對比、形狀對比、疏密對比、大小對比使咱們聚焦在咱們須要關注的信息上，在進行對比排班的時候，須要多維度考慮。
三、平衡原則：平衡原則是界面排班佈局的首要原則，大到整個官網，小到一張圖文，都須要咱們對頁面視覺平衡有一很好節奏控制。
四、類似原則：對類似的內容賦予相同的屬性，例如同一級別的標題文字大小相同，相同顏色的字體均可以點擊等，類似原則的因素也不僅有文字顏色，還有背景色、方向、大小等等。
五、簡單原則：對頁面全部元素避免有小數點，頁面間距規則簡單通用（最好不超過兩種間距，大模塊內容間隔是區塊內容域內間隔的兩倍便可），視覺樣式輕量化，無線化分割，同時注意頁面右邊邊緣對齊。
六、封閉原則：用於區分兩個獨立的模塊部分時候通常採用封閉原則即便用卡片，線框或者間隔的顏色來封閉內容。

固然，若是你在行業內沒有這方面的工做經驗，這種排班技巧還須要你們搜索國內知名WEB及APP練習一下，局部練習也是能夠的，只要練習了就是經驗……

第四步：掌握文字規範

【A】字體規範

中文通用微軟雅黑/英文Arial（若是所在公司沒有購買字庫的狀況下儘可能使用免費字體）

【B】文字顏色

通用顏色：標題文字#33333三、內容文字#66666六、副文本文字#99999九、描邊#dddddd、分割線#e5e5e五、背景色#eeeeee(此配色爲最安全使用色，設計時，可根據實際配色狀況選定)

【C】字號規範

H1——32px：頁面個別主標題、副標題
H2——24px：板塊主標題
H3——18px：一級導航、產品標題、新聞標題
H4——16px：二級導航、產品小標題、新聞小標題
H5——14px：正文
H6——12px：註釋
（固然，以上字號是通用的，還須要根據實際狀況而定，畢竟每個產品都是獨一無二的！）

【D】字體排版

完美閱讀用戶體驗的10大排版技巧：
對於絕大多數網站而言，最佳行間距應該是字體高度的125%
對於絕大多數移動端設備而言，最佳行間距是字體高度的150%
寬鬆的行間距（好比直接空一行做爲行間距）能讓內容更易於被識別和掃描
控制行間距的鬆緊，用雙眼來瀏覽段落進行測試，基於感受來進行調整

第五步：色彩的使用技巧

一、配色這個就要小初們本身腦補了！熟練掌握色相、明度等。

二、色彩採集——創建色庫（養成採集色彩的好習慣，尤爲看到好的頁面可採集顏色腦補對比造成本身的顏色庫）
採集方式：
A\Photoshop打開圖片 → 存儲爲Web所用格式→ 選擇GIF格式 → 顏色選擇 8 → 顏色表中雙擊色塊 → 拾色器
B\Photoshop打開圖片 → 濾鏡 → 像素化→ 馬賽克 → 設置單元格大小
軟件https://juejin.im/entry/59c201b16fb9a00a5a31f257?utm_source=gold_browser_extension

第六步：腦洞各大資源網站

一、UIkits雲端界面 https://www.yrucd.com/（UI自學推薦——需購買VIP）
二、skech UI規範模板https://www.yrucd.com/53232.html
三、http://www.shejidaren.com/ui-style-guide.html

四、http://www.xiaopiu.com/  免費在線APP工具

五、在線原型墨刀 https://modao.cc/

六、http://www.uisdc.com/create-ui-design-guideline  UI設計規範

七、https://xituqu.com/786.html   UI組件

優設/站酷/UI中國

第七步：UI設計規範

提早設計好使用規範或在設計過程當中整理一套屬於界面的設計規範

小學如下前端知識，掌握專業規範詞彙，便於與產品、前端層溝通

不斷更新中……