我是一個小白，在此記錄自己在UI設(shè)計中需要注意的一些坑，方便以后翻閱回憶來時的艱辛，總結(jié)的不好不要勿噴，只是一個自我的記錄。
自己在臨摹很多的界面后，才慢慢的意識到，這樣的復(fù)制性行動意義何在？如果在工作中，給你一需求，如何從開始最基本開始去實現(xiàn)？各個元素之間排版布局，又該如何去設(shè)置？（我知道工作中都會有規(guī)范文檔）但是如果沒有，要你自己去設(shè)置？該如何去做，那些知識點，你需要開始就掌握好，并去結(jié)合產(chǎn)品的調(diào)性去設(shè)置合適的排版布局，如何做？思考的點還有很多，我只記錄在設(shè)計一個界面開始要去掌握的基本概念，對于產(chǎn)品調(diào)性，做一點簡單的思考。
網(wǎng)格基礎(chǔ)概念：
想讓你的界面夠精致，那么界面的布局就不得不去了解，以及各元素空間間距，一個好的界面需要有規(guī)律性的布局排版，這是一個基本原則。網(wǎng)格布局一般在pc端是12列，移動端一般為6列。
在界面中屏幕的預(yù)留間距非常重要，在很多的小白臨摹中就不太會去注意這個。界面中的行可以根據(jù)你的元素大小合理去設(shè)置。屏幕間距不能放置任何的元素，水槽里面也盡量不要放內(nèi)容，除非和內(nèi)容模塊組合使用，內(nèi)容盡量的放在一個模塊內(nèi)。
水槽越小，視覺張力就越大，水槽越大，視覺張力越小。
小結(jié)：界面一般為6列，內(nèi)容區(qū)域（UI設(shè)計元素、內(nèi)容）一般都設(shè)置在里面內(nèi)容模塊和組合模塊，水槽和屏幕邊距不能放內(nèi)容，保存留白（城墻）。
網(wǎng)格的最低標(biāo)準(zhǔn)：
任何東西都有一個基本元素，即最低的標(biāo)準(zhǔn)，在網(wǎng)格中也是一樣的，我們得現(xiàn)有一個最小的單位，才能去推導(dǎo)出整個網(wǎng)格來。常見的單位有3px（淘寶，天貓，蘑菇街等電商平臺，他們種類多，想體現(xiàn)賣品視覺沖擊力就只能讓其間距小），4px（funcy），5px（京東金融，亞馬遜），設(shè)置最小單位都是要根據(jù)產(chǎn)品的調(diào)性去設(shè)置的，現(xiàn)在很多的設(shè)計都在采用大留白，給人一簡潔明了大氣，單位普遍在5px和6px，很受會有7px的，太多的留白，顯得缺少內(nèi)容 。
定邊距和水槽大小：如果我們把最小的單位設(shè)置成5px，左右間距設(shè)置的成20，水槽設(shè)置成10，注意一定要是5的倍速。公式如下：
375屏幕寬度-兩邊邊距40-水槽10x5個?6=47.5。那么內(nèi)容區(qū)大小就47.5（這里就不跟圖設(shè)置一樣的屏幕邊距數(shù)值了，以防誤導(dǎo)屏幕邊距設(shè)置必須和水槽一樣）
橫向的間距雖然可以忽略，但是為了設(shè)計間距的統(tǒng)一，還是利用到一些科學(xué)裝逼的數(shù)列：費波那契數(shù)列（黃金分割數(shù)列）
費波那契數(shù)列只是一個參考，也可以在其中加入自己的規(guī)范，但是一定要按照費波那契速列的最小單位去改變，并結(jié)合自身產(chǎn)品的定位，調(diào)性去改變。
網(wǎng)格系的刪格化定好了，那么接下來考慮的就是各個組件之間的間距了，這對于界面的是否統(tǒng)一是非常重要的，不要小看間距的設(shè)置，其中也包括按鈕中，文字與上下左右的間距，確保各種元素之間都是有序的，都是遵循一種規(guī)律，這種設(shè)計不僅方便自己設(shè)計，也能方便程序員工作，減少他們雞毛小時都來煩你，更能給用戶提供統(tǒng)一協(xié)調(diào)的視覺。
那么就需要去定一個最小的單位，前面的刪格化已經(jīng)定了最小的單位，完全可以用上的，但是也是可以改變的，不是什么都是按部就班，也是需要有自己的看法的。利用好裝逼數(shù)列，并去設(shè)置合適的規(guī)范。比如你設(shè)置的最小單位是5，那么按鈕中文字距離邊框上下左右就可以是5的倍速去變化，比如亞馬遜、京東、Pinterest等。
最小單位設(shè)置好，接下來就是確定間距之間的彈性。
在此需要注意不要過多的去設(shè)置間距數(shù)量，這只會給你帶來困惑和界面的復(fù)雜性，7個以下符合費波那契數(shù)列就可以了，這個需要根據(jù)你產(chǎn)品的定位和調(diào)性去設(shè)置。
總結(jié)：
統(tǒng)一間距規(guī)則，有利用構(gòu)建統(tǒng)一，一致性的界面，所有的邊距，元素之間都規(guī)律可循，對于我們設(shè)計，還是切圖標(biāo)注給到程序員都是能解決效率問題的。在我們剛開始設(shè)計時候，可能會覺得沒有真正的好處，但是當(dāng)項目越來越復(fù)雜時候，團(tuán)隊規(guī)模越來越大，每天處理各種設(shè)計細(xì)節(jié)時候，你會發(fā)現(xiàn)，當(dāng)你使用固定的間距，它會比之前隨意的間距規(guī)則有更好的效果。
做設(shè)計真的就是不斷的挖坑，填各種坑，總結(jié)的不是很好，莫笑我，只是想不斷的去填坑，記錄自己來時的路而已。
參考：skys的公眾號：我們的設(shè)計日記。強(qiáng)烈推薦，干貨滿滿。
