UI設(shè)計(jì)大家一定不陌生，越來越多的UI設(shè)計(jì)師如雨后春筍般加入到設(shè)計(jì)這個大家庭∨塾埽現(xiàn)在有許多的設(shè)計(jì)師在鉆研怎么切圖更快，用什么軟件作圖塘揣，標(biāo)注更快包雀，我想告訴大家，先把手頭上的事情暫且放一放亲铡。因?yàn)槲覀兊漠a(chǎn)品是一個大團(tuán)隊(duì)在運(yùn)作才写，只顧干自己的事情無異于閉門造車，當(dāng)你切完一大堆圖發(fā)給開發(fā)的時候奖蔓，開發(fā)說你這樣切出來我實(shí)現(xiàn)不了赞草，傻眼了，留給開發(fā)的時間又縮短了一些吆鹤。當(dāng)你興致勃勃做完頁面等待UI評審的時候厨疙，卻發(fā)現(xiàn)自己缺少了好多狀態(tài)頁面，再臨時補(bǔ)上疑务，留給開發(fā)時間又縮短了一些沾凄，最終上了一個不那么完美的項(xiàng)目。

當(dāng)感覺自己遇到瓶頸知允，甚至覺得自己工作效率很低下的時候搭独，我們走出去看看，看看我們的上游和下游都在做一些什么事情廊镜，產(chǎn)品在規(guī)劃什么，交互在如何分析需求唉俗，用研是如何做訪談和問卷的嗤朴，開發(fā)又是如何調(diào)接口和后臺對接的配椭，我們都可以參與進(jìn)去，不要覺得困難雹姊，因?yàn)樵阶隼щy的事情股缸，對自己能力提升的越快，害怕接受新的事物只會原地踏步吱雏。

UI設(shè)計(jì)師如何前驅(qū)?

關(guān)于產(chǎn)品

作為一個UI設(shè)計(jì)師敦姻，我們還在干巴巴的等著產(chǎn)品經(jīng)理甚至交互提供的需求和原型再開始動手嗎?這樣被動的工作是永遠(yuǎn)無法提升自己的，當(dāng)然你也永遠(yuǎn)只能拿到幾千塊的薪水了歧杏。

我們應(yīng)該參與前期產(chǎn)品的規(guī)劃中去：

1.了解下一個版本計(jì)劃做哪些需求镰惦，上一個版本還留下什么需求?

2.在下一個版本中需求的目標(biāo)和目的分別的什么?

3.怎么樣挖掘出用戶的原始需求?

4.希望之后拿到哪些數(shù)據(jù)，并且對這些數(shù)據(jù)準(zhǔn)備做怎樣的分析犬绒，得出怎樣的結(jié)果? 產(chǎn)生的商業(yè)價值又是什么?

這個需求是否能為我們的產(chǎn)品帶來明顯的業(yè)務(wù)或者用戶體驗(yàn)的提升?

關(guān)于視覺

顏色：

為了保持產(chǎn)品的整體品牌調(diào)性旺入，我們將會使用一種主色調(diào)，兩種或三種輔色凯力，但一般選擇兩種輔色茵瘾，選擇同一色系或者鄰近的色系，比如主色是藍(lán)色咐鹤，那么我們可以選擇臨近色系的淺藍(lán)和深藍(lán)做為輔色拗秘。再加上1-2種點(diǎn)睛色，用來高亮顯示祈惶，提醒用戶的作用雕旨，比如紅色，橙色行瑞，黃色等對比色奸腺。

字體：

經(jīng)過研究及多方證實(shí)，在一倍設(shè)計(jì)圖下血久，最利于閱讀的字號以及大部分人所覺得最舒適的字號大小是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)有時候單獨(dú)存在又是個硬傷，對于一些抽象畫的字段圖標(biāo)沒辦法更好的繪制出來的時候我們就需要進(jìn)行圖文結(jié)合來描述滑燃。圖標(biāo)使用的位置不同役听，大小也會不同，甚至風(fēng)格也會迥異表窘。比如：微信底部標(biāo)簽欄的圖標(biāo)典予，和頂部導(dǎo)航欄的圖標(biāo)粗細(xì)不同，風(fēng)格也不同乐严。但是不是一個app里就有很多風(fēng)格的圖標(biāo)瘤袖，只要形成統(tǒng)一就行。一般圖標(biāo)能分為線性和色塊兩種昂验，線性圖標(biāo)更輕盈捂敌，缺點(diǎn)是放大之后線條會變粗，且線性圖標(biāo)沒有色塊圖標(biāo)來的表意明確既琴。色塊圖標(biāo)更直觀占婉，且放大縮小不影響，可以用到iconfont里甫恩，圖標(biāo)將成為一種字體逆济，比較大程度優(yōu)化app的內(nèi)存，缺點(diǎn)是信息較多時比較冗雜磺箕。

排版：

排版對于一個頁面來說是最最重要不過了奖慌，在交互稿上，交互已經(jīng)大致區(qū)分出了信息的布局松靡，這個時候我們視覺需要去進(jìn)行“具像化”(或許前期交互就是你自己做的)简僧。我們先將信息關(guān)聯(lián)度大的內(nèi)容整合在一起，再根據(jù)內(nèi)容的重要程度雕欺，以用戶的視覺流進(jìn)行排布岛马，當(dāng)然這個只是正常的設(shè)計(jì)流程棉姐，凡事無絕對，要懂得變通蛛枚。再說一個小竅門谅海，就是盡量保證信息元素之間的距離相等，除非為了區(qū)分兩個信息蹦浦，間距一致會使整個頁面更美觀，當(dāng)然我們考慮做頁面的時候不是能展示所有信息就是好設(shè)計(jì)撞蜂，我們強(qiáng)調(diào)的是用戶體驗(yàn)盲镶，那么用戶不希望一眼看去都是信息，這個時候我們需要做一些留白的設(shè)計(jì)或者信息的層級顯示蝌诡。

做項(xiàng)目碰到的問題：

1.目前采用的標(biāo)注方式使用sketch的插件marketch一鍵導(dǎo)出標(biāo)注溉贿，雖然不是很精確，但已經(jīng)大大提高了工作效率浦旱。問題來了宇色，開發(fā)到底看不看標(biāo)注?很有意思的問題，其實(shí)只要項(xiàng)目緊他們一般不會看標(biāo)注颁湖，等到邏輯寫完了宣蠕，再來改UI的問題。那么為了避免在頁面寫完后不做大的布局調(diào)整甥捺，做為視覺設(shè)計(jì)抢蚀，應(yīng)該在開發(fā)前期就和前端定義好布局的框架，交互镰禾，用自定義還是系統(tǒng)控件皿曲，否則等開發(fā)寫完你和開發(fā)說我要的效果不是這樣，但是開發(fā)說已經(jīng)改不了了吴侦，再改就要很大的精力去重寫(當(dāng)然也可能是開發(fā)想偷懶)屋休，這里必須說一下，其實(shí)為了你我他备韧，UI設(shè)計(jì)必須要學(xué)前端代碼劫樟，否則開發(fā)隨便忽悠下你你就放棄了自己的立場，這完全是對自己盯蝴，對產(chǎn)品不負(fù)責(zé)毅哗。

2.盡可能將頁面的狀態(tài)補(bǔ)全，因?yàn)榭赡軟]有交互捧挺，也可能交互的文檔原型沒有那么細(xì)致虑绵。比如你做完一個頁面發(fā)現(xiàn)所有字段都填滿了，整個頁面挺飽滿闽烙，這個時候測試的同學(xué)說了翅睛，這個字段后臺可能不返回声搁，是空，那里也是空捕发，這樣的頁面東邊少一塊疏旨，西邊少一塊還好看嗎?

3.適配的問題。運(yùn)營要做活動圖片扎酷，通過后臺返回獲取到不是由前段添加亚享，這時候我們需要定義一個比例篙程，不同機(jī)型等比例縮放即可。

4.同時接到3個以上的需求怎么辦，拍優(yōu)先級?怎么排?

把內(nèi)容少的应役，重要的部分先做震糖，再做內(nèi)容多的疏虫，重要的领铐。最重要的還是老板重視的，必須先做!

5.能這個版本迭代掉的內(nèi)容千萬不要放倒下一個版本荐糜，放著放著就沒了巷怜。

6.sketch的插件craft+dropbox的新組合用來制作app kit，能拖拽直接使用和編輯

最后講一句話：請基于場景設(shè)計(jì)!

首發(fā)地址: 這樣的UI設(shè)計(jì)你會了嗎?_絲路教程網(wǎng)

資源地址: http://blog.silucg.com/UI/jc/5246.html(分享請保留)