項(xiàng)目的UI培訓(xùn)設(shè)計(jì)理念
 

     UI制作，是基于產(chǎn)品原型而做的設(shè)計(jì)。在交互的原型確定后，視覺(jué)方面也就緊鑼密鼓地行動(dòng)。
 

     對(duì)于UI設(shè)計(jì)，我一開(kāi)始不是直接就開(kāi)始做效果圖，而是在規(guī)劃一些設(shè)計(jì)規(guī)則。嘗試著把整體的UI拆散成一個(gè)個(gè)元件，去分析規(guī)劃、統(tǒng)一。
 

例如：

1，我們的產(chǎn)品顏色定義。主色調(diào)以及輔助色，包括“刪除”，“保存”，“登錄”，“注冊(cè)”等這些常用按鈕的顏色定義（前面我們定的會(huì)比較少，后面根據(jù)頁(yè)面的需求，會(huì)增加一些顏色，但是我們盡量控制顏色的數(shù)量）。
 

2，我畫(huà)的icon，線條粗是2px還是3px，或是多，或者其它用“面”的形式畫(huà)icon？
 

3，我的一、二級(jí)頁(yè)面Tab是什么形式？確定它的規(guī)則之后，就必須延續(xù)這樣一個(gè)規(guī)則，方便用戶(hù)對(duì)于產(chǎn)品結(jié)構(gòu)劃分的理解。
 

4，字體大小，我們定幾個(gè)規(guī)格？一級(jí)字體，二級(jí)字體，三級(jí)字體，都是具體多少pt。
 

5，根據(jù)交互原型，我們的列表頁(yè)單元格有多少類(lèi)型？定一個(gè)統(tǒng)一的規(guī)格。圖標(biāo)大小統(tǒng)一，圖片大小統(tǒng)一，主標(biāo)題字體大小、顏色統(tǒng)一，副標(biāo)題字體大小、顏色統(tǒng)一。對(duì)于數(shù)字，我喜歡取偶數(shù)，因?yàn)檫@個(gè)涉及到轉(zhuǎn)化IOS尺寸的一些細(xì)節(jié)問(wèn)題（@2x，@3x），奇數(shù)會(huì)出現(xiàn)一些麻煩。
 

6，邊距設(shè)置。設(shè)置幾個(gè)邊距，有助于我們區(qū)分層級(jí)。一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題，通過(guò)字體大小、顏色、加粗、邊距，我們能很清晰的分出頁(yè)面層級(jí)，這樣也能幫助用戶(hù)更好的理解我們的軟件模塊層級(jí)關(guān)系是什么樣子的。
 

7，icon尺寸大小規(guī)劃。注：當(dāng)選擇中等清晰度（720p）時(shí)，一定要是偶數(shù)，他的1.5倍（1080p）才能是整數(shù)。我們?nèi)绻�前期�?guī)劃好，未來(lái)對(duì)于提供不同分辨率的icon切圖，將會(huì)特別省力。
 

按照這種規(guī)則設(shè)置icon大小，之后都在一個(gè)psd文件里繪制。后面做其它尺寸的icon，只需要統(tǒng)一壓縮或放大，通過(guò)調(diào)邊線處理icon，效率將非常高。

二、為什么我們的設(shè)計(jì)要去定這些東西？
 

主要有這幾點(diǎn)：
 

1，防止我們顏色過(guò)于雜亂，影響導(dǎo)向認(rèn)知。
 

2，統(tǒng)一的規(guī)則，有助于用戶(hù)預(yù)判沒(méi)有見(jiàn)過(guò)的頁(yè)面，更加清楚頁(yè)面的結(jié)構(gòu)，某一個(gè)細(xì)節(jié)的導(dǎo)向特點(diǎn)。例如藍(lán)色的字體可以點(diǎn)擊，“”icon+文字”代表也可以點(diǎn)擊。
 

3，設(shè)計(jì)過(guò)程中，如果過(guò)于用感性去設(shè)計(jì)，那么我們有時(shí)候一些標(biāo)題字體大小、以及顏色、圖片倒角，很有可能都設(shè)置的不一樣，這會(huì)影響風(fēng)格的統(tǒng)一，以及程序員編輯頁(yè)面工作會(huì)加重。
 

4，規(guī)劃這些，有助于我們把頁(yè)面的層次劃分的更清晰。
 

5，方便統(tǒng)計(jì)工作量，未來(lái)工作量也會(huì)減少很多。還能避免一些不必要的返工。
 

   UI設(shè)計(jì)的細(xì)節(jié)規(guī)則很多，這里我就這樣簡(jiǎn)單說(shuō)明一下我所注重的一些點(diǎn)�？傮w來(lái)說(shuō)，設(shè)計(jì)一定要有規(guī)劃性，去處理未來(lái)可能會(huì)更省力的事情、避免做一些低效率的修改工作。以及在設(shè)計(jì)中，心理一定要有這么一個(gè)“輔助線”，幫助我們完成有思路的設(shè)計(jì)。美觀有一定是感性，但是如果我們把它整理成一個(gè)規(guī)律，把抽象變成具象、數(shù)據(jù)化的東西，那就能創(chuàng)造“美的理論”了。規(guī)律產(chǎn)生美！  更多培訓(xùn)資訊請(qǐng)持續(xù)關(guān)注天琥教育官網(wǎng)。