UI設(shè)計(jì)師是唯一要和程序員合作的設(shè)計(jì)師職業(yè)，我們看多了相互取笑的段子，那么怎樣的UI設(shè)計(jì)師會(huì)是程序員眼中最牛的呢？這其中有3個(gè)層次。

1.懂UI

沒錯(cuò)，首先是懂UI。UI設(shè)計(jì)師設(shè)計(jì)的是人機(jī)交互界面，界面的載體是設(shè)備。這是區(qū)別于其他設(shè)計(jì)師的地方。不同設(shè)備又有它的特性和要求，了解設(shè)備知識(shí)是程序員和設(shè)計(jì)師共同的目標(biāo)，也是他們找到共同語言的基礎(chǔ)。

設(shè)計(jì)師需要了解這些東西：

• 可控制的基本屬性：字體，字形，字號(hào)與單位，高寬、間距留白，顏色（256色，RGBA）、漸變，圓角，透明度，陰影，對(duì)齊方式，層級(jí)。
• 系統(tǒng)自帶組件（導(dǎo)航欄、菜單欄、任務(wù)欄、對(duì)話框等）的大小、樣式風(fēng)格、交互形式、版本差異。
• 自定義組件：1/2/3級(jí)標(biāo)題、正文、提示框、按鈕、彈窗、選擇框、下拉列表、圖標(biāo)、各種卡片……
• 狀態(tài)變化：普通、懸停（hover）、選中/激活（selected/active）、不可用（disabled）。
• 動(dòng)畫：位置、大小、顏色、透明度、形狀的變化，并可控制時(shí)長、速度曲線、循環(huán)。
• 柵格：2、4、8、16、32的倍數(shù)對(duì)齊。
• 屏幕適配：大小、高寬比，像素密度（2x、3x，hdpi、xhdpi……），組件的可變大小規(guī)則。
• 多語言適配，兼容文字最長的語種

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ī)范(全小寫英文，下劃線連接)，什么情況需要帶透明邊框
• 標(biāo)注：要標(biāo)齊，所有大小均為偶數(shù)
• 設(shè)計(jì)迭代：稿件版本號(hào)管理
• 維護(hù)：管理所有用到的切圖，每次產(chǎn)品迭代除了新增圖外還會(huì)剔除掉廢棄的圖后才整體地給程序員

這些規(guī)范的確定，除了依賴設(shè)計(jì)能力，還需要了解開發(fā)的實(shí)現(xiàn)機(jī)理。要知道開發(fā)限制，不能做出難以實(shí)現(xiàn)的效果，同時(shí)衡量好開發(fā)和維護(hù)成本。例如理解“以左上角為原點(diǎn)坐標(biāo)系”的開發(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)等——來增強(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)目組眼中都是專業(yè)的體現(xiàn)：

• 色彩運(yùn)用
  • 根據(jù)業(yè)務(wù)目標(biāo)渲染情緒氛圍。比如電商網(wǎng)站用紅、黃為主色調(diào)，以引起用戶興奮，一個(gè)沖動(dòng)就產(chǎn)生購買行為。
  • 符合產(chǎn)品特性，比如綠色代表安全，藍(lán)色代表科技
  • 符合用戶特性，綜合考慮性別、年齡等因素，比如粉色適合女性，艷麗色適合老年人
• 層次感強(qiáng)，突出重點(diǎn)
• 風(fēng)格把控，迎合用戶群體喜好，例如：柔和、青春、穩(wěn)重、擬物等
• 炫酷又不喧賓奪主的動(dòng)畫
• 個(gè)性化，比如換膚

這其中某些部分可以說是視覺設(shè)計(jì)師的技能，其實(shí)UI設(shè)計(jì)師向其它設(shè)計(jì)領(lǐng)域滲透是設(shè)計(jì)水平到一定程度后的自然升級(jí)。可以往這些方面拓展：

• 廣告和平面設(shè)計(jì)
  • 設(shè)計(jì)理念：能向項(xiàng)目組成員說清楚這樣設(shè)計(jì)的思路和好處，以及想通過設(shè)計(jì)來傳達(dá)什么信息給用戶
  • 非功能性區(qū)域（例如引導(dǎo)頁）的營銷文案
  • 運(yùn)營物料的設(shè)計(jì)
• 交互設(shè)計(jì)
  • 接管產(chǎn)品經(jīng)理的職責(zé)，根據(jù)業(yè)務(wù)流程直接設(shè)計(jì)界面和交互流程
  • 熟悉用戶體驗(yàn)理論和優(yōu)化方法
  • 熟悉平臺(tái)特色的人機(jī)交互指南
  • 明確業(yè)務(wù)導(dǎo)向的設(shè)計(jì)目標(biāo)，例如引導(dǎo)用戶沖動(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)品文檔上的交互邏輯疏漏
  • 研究競品的設(shè)計(jì)理念并超越
• 網(wǎng)頁設(shè)計(jì)
  • 前端是最貼近UI設(shè)計(jì)師的開發(fā)工作，懂點(diǎn)HTML/CSS/JS也就更懂程序員了

最后，和程序員一樣的是，設(shè)計(jì)師如果能提高英語水平，直接閱讀學(xué)習(xí)國外資料，會(huì)非常有助于緊跟國際設(shè)計(jì)潮流、提升技能。畢竟操作系統(tǒng)和UI設(shè)計(jì)潮流多是外國人發(fā)明和引領(lǐng)的，我們期待在國內(nèi)出現(xiàn)業(yè)界的帶頭大哥。

總結(jié)

以上是生活随笔為你收集整理的程序员眼中最牛的UI设计师是怎样的？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。