這樣的UI設(shè)計你會了嗎
ui設(shè)計大家一定不陌生，越來越多的UI設(shè)計師如雨后春筍般加入到設(shè)計這個大家庭?，F(xiàn)在有許多的設(shè)計師在鉆研怎么切圖更快，用什么軟件作圖，標(biāo)注更快，我想告訴大家，先把手頭上的事情暫且放一放。因為我們的產(chǎn)品是一個大團隊在運作，只顧*自己的事情無異于閉門造車，當(dāng)你切完一大堆圖發(fā)給**的時候，**說你這樣切出來我實現(xiàn)不了，傻眼了，留給**的時間又縮短了一些。當(dāng)你興致勃勃做完頁面等待UI評審的時候，卻發(fā)現(xiàn)自己缺少了好多狀態(tài)頁面，再臨時補上，留給**時間又縮短了一些，最終上了一個不那么完美的項目。
當(dāng)感覺自己遇到瓶頸，甚至覺得自己工作效率很低下的時候，我們走出去看看，看看我們的上游和下游都在做一些什么事情，產(chǎn)品在規(guī)劃什么，交互在如何分析需求，用研是如何做訪談和問卷的，**又是如何調(diào)接口和后臺對接的，我們都可以參與進去，不要覺得困難，因為越做困難的事情，對自己能力提升的越快，害怕接受新的事物只會原地踏步。
UI設(shè)計師如何前驅(qū)?
關(guān)于產(chǎn)品
作為一個UI設(shè)計師，我們還在*巴巴的等著產(chǎn)品經(jīng)理甚至交互提供的需求和原型再開始動手嗎?這樣被動的工作是永遠無法提升自己的，當(dāng)然你也永遠只能拿到幾千塊的薪水了。
我們應(yīng)該參與前期產(chǎn)品的規(guī)劃中去：
1.了解下一個版*計劃做哪些需求，上一個版*還留下什么需求?
2.在下一個版*中需求的目標(biāo)和目的分別的什么?
3.怎么樣挖掘出用戶的原始需求?
4.希望之后拿到哪些數(shù)據(jù)，并且對這些數(shù)據(jù)準(zhǔn)備做怎樣的分析，得出怎樣的結(jié)果? 產(chǎn)生的商業(yè)價值又是什么? 這個需求是否能為我們的產(chǎn)品帶來明顯的業(yè)務(wù)或者用戶體驗的提升?
關(guān)于視覺
顏色：
為了保持產(chǎn)品的整體品牌調(diào)*，我們將會使用一種主色調(diào)，兩種或三種輔色，但一般選擇兩種輔色，選擇同一色系或者鄰近的色系，比如主色是藍色，那么我們可以選擇臨近色系的淺藍和深藍做為輔色。再加上1-2種點睛色，用來高亮顯示，提醒用戶的作用，比如紅色，橙色，**等對比色。
字體：
經(jīng)過研究及多方證實，在一倍設(shè)計圖下，最利于閱讀的字號以及大部分人所覺得最舒適的字號大小是16px。那么，在同一個產(chǎn)品里，我們將用到除了頂部導(dǎo)航以外的3種字體大小，分別為正文16px，次要*文字14px，提示文字12px。對于10px文字小編建議盡量少的使用。字體的顏色也通常使用3個顏色便足以用于這個產(chǎn)品，深色，深灰色，以及淺色字體。
線條：
線條所起的作用一個是分割內(nèi)容，第二個是流引導(dǎo)，同樣的內(nèi)容，用橫向線條或者豎向線條，用戶的瀏覽路徑將會發(fā)生變化，所以分割線在整個app里的所用也是不言而喻的，那么我們將分割線也可以定義1-2個層級的顏色，在移動端肉眼能識別即可，但注意不能太深，也不能太淺。
圖標(biāo)：
圖標(biāo)能使整個app更生動，但是圖標(biāo)有時候單獨存在又是個硬傷，對于一些*象畫的字段圖標(biāo)沒辦法更好的繪制出來的時候我們就需要進行圖文結(jié)合來描述。圖標(biāo)使用的位置不同，大小也會不同，甚至風(fēng)格也會迥異。比如：微信底部標(biāo)簽欄的圖標(biāo)，和頂部導(dǎo)航欄的圖標(biāo)粗細不同，風(fēng)格也不同。但是不是一個app里就有很多風(fēng)格的圖標(biāo)，只要形成統(tǒng)一就行。一般圖標(biāo)能分為線*和色塊兩種，線*圖標(biāo)更輕盈，缺點是放大之后線條會變粗，且線*圖標(biāo)沒有色塊圖標(biāo)來的表意明確。色塊圖標(biāo)更直觀，且放大縮小不影響，可以用到iconfont里，圖標(biāo)將成為一種字體，比較大程度優(yōu)化app的內(nèi)存，缺點是**較多時比較冗雜。
排版：
排版對于一個頁面來說是最最重要不過了，在交互稿上，交互已經(jīng)大致區(qū)分出了**的布局，這個時候我們視覺需要去進行“具像化”(或許前期交互就是你自己做的)。我們先將**關(guān)聯(lián)度大的內(nèi)容整合在一起，再根據(jù)內(nèi)容的重要程度，以用戶的視覺流進行排布，當(dāng)然這個只是正常的設(shè)計流程，凡事無絕對，要懂得變通。再說一個小竅門，就是盡量保證**元素之間的距離相等，除非為了區(qū)分兩個**，間距一致會使整個頁面更美觀，當(dāng)然我們考慮做頁面的時候不是能展示所有**就是好設(shè)計，我們強調(diào)的是用戶體驗，那么用戶不希望一眼看去都是**，這個時候我們需要做一些留白的設(shè)計或者**的層級顯示。
做項目碰到的問題：
1.目前采用的標(biāo)注方式使用sketch的*件******ch一鍵導(dǎo)出標(biāo)注，雖然不是很精確，但已經(jīng)大大提高了工作效率。問題來了，**到底看不看標(biāo)注?很有意思的問題，其實只要項目緊他們一般不會看標(biāo)注，等到邏輯寫完了，再來改UI的問題。那么為了避免在頁面寫完后不做大的布局調(diào)整，做為視覺設(shè)計，應(yīng)該在**前期就和前端定義好布局的框架，交互，用自定義還是**控件，否則等**寫完你和**說我要的效果不是這樣，但是**說已經(jīng)改不了了，再改就要很大的精力去重寫(當(dāng)然也可能是**想偷懶)，這里必須說一下，其實為了你我他，UI設(shè)計必須要學(xué)前端代碼，否則**隨便忽悠下你你就放棄了自己的立場，這完全是對自己，對產(chǎn)品不負責(zé)。
2.盡可能將頁面的狀態(tài)補全，因為可能沒有交互，也可能交互的文檔原型沒有那么細致。比如你做完一個頁面發(fā)現(xiàn)所有字段都填滿了，整個頁面挺飽滿，這個時候**的同學(xué)說了，這個字段后臺可能不返回，是空，那里也是空，這樣的頁面東邊少一塊，西邊少一塊還好看嗎?
3.適配的問題。**要做活動圖片，通過后臺返回獲取到不是由前段添加，這時候我們需要定義一個比例，不同機型等比例縮放即可。
4.同時接到3個以上的需求怎么辦，拍優(yōu)先級?怎么排?
把內(nèi)容少的，重要的部分先做，再做內(nèi)容多的，重要的。最重要的還是老板重視的，必須先做!
5.能這個版*迭代掉的內(nèi)容千萬不要放倒下一個版*，放著放著就沒了。
