I設(shè)計(jì)師是唯一要和程序員合作的設(shè)計(jì)師職業(yè)益愈，我們看多了相互取笑的段子，那么怎樣的UI設(shè)計(jì)師會(huì)是程序員眼中最牛的呢夷家？這其中有3個(gè)層次蒸其。
1.懂UI
沒(méi)錯(cuò)，首先是懂UI库快。UI設(shè)計(jì)師設(shè)計(jì)的是人機(jī)交互界面摸袁，界面的載體是設(shè)備。這是區(qū)別于其他設(shè)計(jì)師的地方义屏。不同設(shè)備又有它的特性和要求靠汁，了解設(shè)備知識(shí)是程序員和設(shè)計(jì)師共同的目標(biāo)，也是他們找到共同語(yǔ)言的基礎(chǔ)闽铐。
設(shè)計(jì)師需要了解這些東西：
可控制的基本屬性：字體蝶怔，字形，字號(hào)與單位兄墅，高寬踢星、間距留白，顏色（256色察迟，RGBA）斩狱、漸變，圓角扎瓶，透明度所踊，陰影，對(duì)齊方式概荷，層級(jí)秕岛。
系統(tǒng)自帶組件（導(dǎo)航欄、菜單欄、任務(wù)欄继薛、對(duì)話(huà)框等）的大小修壕、樣式風(fēng)格、交互形式遏考、版本差異慈鸠。
自定義組件：1/2/3級(jí)標(biāo)題、正文灌具、提示框青团、按鈕、彈窗咖楣、選擇框督笆、下拉列表、圖標(biāo)诱贿、各種卡片……
狀態(tài)變化：普通娃肿、懸停（hover）、選中/激活（selected/active）珠十、不可用（disabled）料扰。
動(dòng)畫(huà)：位置、大小宵睦、顏色记罚、透明度、形狀的變化壳嚎，并可控制時(shí)長(zhǎng)桐智、速度曲線(xiàn)、循環(huán)烟馅。
柵格：2说庭、4、8郑趁、16刊驴、32的倍數(shù)對(duì)齊。
屏幕適配：大小寡润、高寬比捆憎，像素密度（2x、3x梭纹，hdpi躲惰、xhdpi……），組件的可變大小規(guī)則变抽。
多語(yǔ)言適配础拨，兼容文字最長(zhǎng)的語(yǔ)種
2.懂規(guī)范
初級(jí)設(shè)計(jì)師更想多做練習(xí)氮块，每個(gè)項(xiàng)目甚至每個(gè)需求都發(fā)揮一次創(chuàng)意。漸漸地诡宗，在重復(fù)勞動(dòng)中知道了要把某些東西固化利用滔蝉，既可減少自己和程序員的工作量，又能統(tǒng)一設(shè)計(jì)風(fēng)格塔沃，于是就產(chǎn)生了規(guī)范蝠引。規(guī)范化是提高設(shè)計(jì)師和程序員間協(xié)作效率的最佳實(shí)踐》急可進(jìn)行規(guī)范化的東西有這些：
基本屬性
各平臺(tái)（iOS立肘、Android、Windows）下的設(shè)計(jì)風(fēng)格規(guī)范
自定義組件
切圖：文件命名規(guī)范(全小寫(xiě)英文名扛，下劃線(xiàn)連接)，什么情況需要帶透明邊框
標(biāo)注：要標(biāo)齊茧痒，所有大小均為偶數(shù)
設(shè)計(jì)迭代：稿件版本號(hào)管理
維護(hù)：管理所有用到的切圖肮韧，每次產(chǎn)品迭代除了新增圖外還會(huì)剔除掉廢棄的圖后才整體地給程序員
這些規(guī)范的確定，除了依賴(lài)設(shè)計(jì)能力旺订，還需要了解開(kāi)發(fā)的實(shí)現(xiàn)機(jī)理弄企。要知道開(kāi)發(fā)限制，不能做出難以實(shí)現(xiàn)的效果区拳，同時(shí)衡量好開(kāi)發(fā)和維護(hù)成本拘领。例如理解“以左上角為原點(diǎn)坐標(biāo)系”的開(kāi)發(fā)定位機(jī)制才可以把標(biāo)注都標(biāo)齊；web項(xiàng)目的字號(hào)不能低于12px樱调，否則最新的瀏覽器上不會(huì)生效等约素。
另外，執(zhí)行規(guī)范是否到位是程序員和設(shè)計(jì)師互相評(píng)價(jià)的標(biāo)準(zhǔn)之一笆凌，這要求雙方都足夠地細(xì)心圣猎。在驗(yàn)收時(shí)會(huì)糾結(jié)1px或1數(shù)值顏色偏差的設(shè)計(jì)師，不僅不會(huì)被嫌煩乞而，反而會(huì)被認(rèn)為是敬業(yè)的表現(xiàn)送悔。如果哪一方能利用或研發(fā)出工具——比如自動(dòng)標(biāo)注或代碼級(jí)核對(duì)檢驗(yàn)等——來(lái)增強(qiáng)協(xié)作，那肯定會(huì)被當(dāng)成神一樣的存在爪模。
3.懂設(shè)計(jì)
審美是每個(gè)有感情的人都具備的欠啤，如果UI能讓技術(shù)在日常工作時(shí)也看得賞心悅目那自然備受尊崇。到了這個(gè)層次屋灌，對(duì)UI設(shè)計(jì)師的要求又回歸到設(shè)計(jì)本身洁段，最基本的就是要把通用的設(shè)計(jì)手法很好地結(jié)合業(yè)務(wù)運(yùn)用到產(chǎn)品上。
下面這些創(chuàng)作手法和意識(shí)的運(yùn)用声滥，在項(xiàng)目組眼中都是專(zhuān)業(yè)的體現(xiàn)：
色彩運(yùn)用
根據(jù)業(yè)務(wù)目標(biāo)渲染情緒氛圍眉撵。比如電商網(wǎng)站用紅侦香、黃為主色調(diào)，以引起用戶(hù)興奮纽疟，一個(gè)沖動(dòng)就產(chǎn)生購(gòu)買(mǎi)行為罐韩。
符合產(chǎn)品特性，比如綠色代表安全污朽，藍(lán)色代表科技
符合用戶(hù)特性散吵，綜合考慮性別、年齡等因素蟆肆，比如粉色適合女性矾睦，艷麗色適合老年人
層次感強(qiáng)，突出重點(diǎn)
風(fēng)格把控炎功，迎合用戶(hù)群體喜好枚冗，例如：柔和、青春蛇损、穩(wěn)重赁温、擬物等
炫酷又不喧賓奪主的動(dòng)畫(huà)
個(gè)性化，比如換膚
這其中某些部分可以說(shuō)是視覺(jué)設(shè)計(jì)師的技能淤齐，其實(shí)UI設(shè)計(jì)師向其它設(shè)計(jì)領(lǐng)域滲透是設(shè)計(jì)水平到一定程度后的自然升級(jí)股囊。可以往這些方面拓展：
廣告和平面設(shè)計(jì)
設(shè)計(jì)理念：能向項(xiàng)目組成員說(shuō)清楚這樣設(shè)計(jì)的思路和好處更啄，以及想通過(guò)設(shè)計(jì)來(lái)傳達(dá)什么信息給用戶(hù)
非功能性區(qū)域（例如引導(dǎo)頁(yè)）的營(yíng)銷(xiāo)文案
運(yùn)營(yíng)物料的設(shè)計(jì)
交互設(shè)計(jì)
接管產(chǎn)品經(jīng)理的職責(zé)稚疹，根據(jù)業(yè)務(wù)流程直接設(shè)計(jì)界面和交互流程
熟悉用戶(hù)體驗(yàn)理論和優(yōu)化方法
熟悉平臺(tái)特色的人機(jī)交互指南
明確業(yè)務(wù)導(dǎo)向的設(shè)計(jì)目標(biāo)，例如引導(dǎo)用戶(hù)沖動(dòng)消費(fèi)
VI設(shè)計(jì)
從產(chǎn)品UI演化到企業(yè)logo祭务、slogan
吉祥物設(shè)計(jì)
UI設(shè)計(jì)擴(kuò)展影響到公司名片内狗、包裝、郵件簽名欄等
產(chǎn)品設(shè)計(jì)
能指正產(chǎn)品文檔上的交互邏輯疏漏
研究競(jìng)品的設(shè)計(jì)理念并超越
網(wǎng)頁(yè)設(shè)計(jì)
前端是最貼近UI設(shè)計(jì)師的開(kāi)發(fā)工作待牵，懂點(diǎn)HTML/CSS/JS也就更懂程序員了
最后其屏，和程序員一樣的是，設(shè)計(jì)師如果能提高英語(yǔ)水平缨该，直接閱讀學(xué)習(xí)國(guó)外資料偎行，會(huì)非常有助于緊跟國(guó)際設(shè)計(jì)潮流、提升技能贰拿。畢竟操作系統(tǒng)和UI設(shè)計(jì)潮流多是外國(guó)人發(fā)明和引領(lǐng)的蛤袒，我們期待在國(guó)內(nèi)出現(xiàn)業(yè)界的帶頭大哥。
轉(zhuǎn)載來(lái)源：https://blog.csdn.net/hursing/article/details/84395402
圖片來(lái)源：unsplash
感覺(jué)有用的小伙伴贊點(diǎn)個(gè)贊賞哈膨更，給小編一些獎(jiǎng)勵(lì)妙真。
