關(guān)注互聯(lián)網(wǎng)，關(guān)注硅谷堂匈织。想了解更多關(guān)于互聯(lián)網(wǎng)崗位知識的信息浪默，關(guān)注微信公眾號：硅谷堂（ID：guigutang）或下載“硅谷堂”APP。
許多人認(rèn)為創(chuàng)造力和邏輯是左右半腦分開管轄的缀匕、設(shè)計(jì)師和工程師使用的是不同部分的能力纳决，所以大家各安其份做好自己的工作就好——我負(fù)責(zé)光鮮亮麗地畫圖，工程師就負(fù)責(zé)用超大聲的同刻鍵盤在黑色的屏幕上編寫外星文乡小。
但事實(shí)上這種刻板印象除了阻礙你進(jìn)步以外可說是一點(diǎn)用都沒有（而且不見得是正確的）岳链。
巴別塔的故事大家?guī)缀醵悸犨^，會造成溝通問題的原因很簡單劲件，就是講的「語言」不同，而非思考方式不一樣——無論是什么領(lǐng)域约急，要成為佼佼者零远，都必須具備高度的創(chuàng)造和想象能力，而設(shè)計(jì)更是非常講求邏輯的行為厌蔽。
所以設(shè)計(jì)師懂工程實(shí)作原理要做什么牵辣？該懂哪些部分？很簡單奴饮，你不需要學(xué)會怎么寫 code纬向，但你至少需要懂得：
正確稱呼UI組件
以 iOS 為例子，在 Apple 的接口設(shè)計(jì)規(guī)范文件里戴卜，每個畫面構(gòu)成的組件都有正式的名稱逾条，我們看看：
這玩意兒叫做「Segmented Controls」，而不是「那個長得像膠囊的選單」投剥，如果能夠使用正確的術(shù)語來溝通师脂，將能夠省下非常可觀的解釋時間江锨。如果你想了解得更多吃警、更精確，將前述的規(guī)范文件讀熟以后啄育，建議你再繼續(xù)研究 UIKit Catalog酌心。
有些效果就是做不出來 很難做 不該做
最普遍的例子：自從 iOS 7 引入帶有模糊效果的設(shè)計(jì)語言后，大家似乎都染上了高斯模糊的癮挑豌。但這樣的效果非常耗費(fèi)系統(tǒng)資源（原理及時間復(fù)雜度）安券，就連 iOS 也到了來年的 iOS 8 才心不甘情不愿地開放使用 UIBlurEffect API墩崩，免得第三方 App 一堆模糊效果拖累系統(tǒng)效能；而在 Android 上官方更沒有提供像 iOS 如此方便的 API 可用（有錯請不吝指正）完疫。
聽起來像外星語泰鸡？白話來說，許多設(shè)計(jì)師毫無意識到某些視覺效果在工程實(shí)做面的可行性壳鹤、也沒有考慮到各種裝置的運(yùn)算負(fù)荷能力盛龄，而設(shè)計(jì)了大量會讓開發(fā)者面有難色的稿子，好不容易做出來了芳誓，發(fā)現(xiàn)算圖卡頓得要命余舶，又要回頭改稿，得不償失锹淌。
Status Bar
我看過太多設(shè)計(jì)師為了設(shè)計(jì)感而給 Status Bar 著上前景色（Foreground）匿值，讓它變灰甚至變成彩色，又指責(zé)開發(fā)者這么單純的事都辦不到赂摆，其實(shí) Apple 在文件里寫得很清楚挟憔，這個東西你就只有黑或白色可選，像這種就是你不該做的效果烟号。
建議：如果你是就讀設(shè)計(jì)科系的大學(xué)生或研究生绊谭，我會建議你選修計(jì)算器概論、基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)汪拥，這些都會對 UI 設(shè)計(jì)非常有幫助达传。
嚴(yán)謹(jǐn)執(zhí)行設(shè)計(jì)流程
業(yè)界 NG 率：90%
之前和一些公司合作的過程、以及和朋友聊天的時候迫筑，我發(fā)現(xiàn)一個團(tuán)隊(duì)在設(shè)計(jì)流程上草率帶過的情形比想象中還多宪赶。一般來說我會建議中小型項(xiàng)目采取以下流程來執(zhí)行設(shè)計(jì)：
這個流程是容許微調(diào)的，我在 Yahoo 實(shí)習(xí)時掣迹看到非常大型的設(shè)計(jì)流程搂妻，而在其他小型團(tuán)隊(duì)工作時則多會采取上述較簡易的版本。
要如何微調(diào)呢辕棚？基本上不建議省略其中的步驟叽讳，但在上面綠色箭頭處可以減少迭代的次數(shù)來達(dá)到省時的目的，而這部分就會稍微考驗(yàn)到產(chǎn)品設(shè)計(jì)師坟募、PM 的經(jīng)驗(yàn)和 gut feeling 了岛蚤。
有些講得一口好設(shè)計(jì)的人會不食人間煙火、一味地倡導(dǎo)要從使用者調(diào)查研究（User Research）懈糯、Persona 開始做起涤妒，然后實(shí)作 n 多個原型（Prototype）才開始讓開發(fā)者動手，后續(xù)再做數(shù)據(jù)分析??等工作赚哗，好像全世界只有自己知道這件事一樣她紫。
但實(shí)務(wù)上硅堆，小型項(xiàng)目花太多心力去做這些事基本上是缺乏成本觀念的表現(xiàn)，在使用者數(shù)量達(dá)到一定門坎前贿讹，數(shù)據(jù)分析的母體也是小得可憐渐逃，并無統(tǒng)計(jì)的參考價 值。因此民褂，小型項(xiàng)目其實(shí)可以將功能拆分 Release茄菊，先做出來再觀察使用情形并修正細(xì)節(jié)（雖然有一點(diǎn)危險，但比起讓項(xiàng)目永無結(jié)束之日赊堪，總是較適當(dāng)?shù)倪x擇）面殖。
先以原生UI組件表意
業(yè)界 NG 率：80%
在設(shè)計(jì)的 wireframe 階段，主要目標(biāo)是讓大家對于畫面上「有哪些對象」取得共識哭廉，而不是這些對象「該長什么樣子」脊僚，那是 mockup 階段才要注重的，因此將 wireframe 畫得過于精美是一件非常奇怪的事情遵绰，例如這樣：
如果把 wireframe 畫得如此精美辽幌，你將立即面臨三個負(fù)面后果：
浪費(fèi)時間，徹底的浪費(fèi)時間椿访。
有彩色稿的外型構(gòu)造乌企，卻沒彩色稿的色彩系統(tǒng)輔佐，導(dǎo)致大家無法完整理解你「精心設(shè)計(jì)」的 UI 對象赎离。
對設(shè)計(jì)沒概念的客戶、PM 或老板會忘記我們是在 review 畫面上有哪些對象端辱，反而在這時就開始跟你檢討設(shè)計(jì)細(xì)節(jié)梁剔，等你接著做彩色稿時，才突然講說之前有哪個功能忘記擺放上去舞蔽。
其中第二點(diǎn)是本節(jié)的重點(diǎn)荣病，在你的 wireframe 里，應(yīng)該使用系統(tǒng)原生的對象來構(gòu)成畫面渗柿，例如這些東西：
請避免在非必要的狀況下急著在 wireframe 里畫一些從來沒有人看過的「創(chuàng)新 UI」个盆。一個好理解、直覺的設(shè)計(jì)是所有細(xì)節(jié)相輔相成的朵栖，在 wireframe 的階段缺少了顏色和動態(tài)效果的輔助颊亮，更不該冒險呈現(xiàn)特殊的對象外型，也就是說陨溅，你的 wireframe 頂多做到這樣就該收手：
這樣一來终惑，畫面上都是大家平常使用 App 時有看過的形式，看得懂畫面的時候门扇，就能夠?qū)Ｐ奶接戇@些功能是不是產(chǎn)品所需要具備的雹有。
少用代名詞
業(yè)界 NG 率：60%
這個溝通技巧不難做到偿渡，但如果沒有人指出，是很難自己發(fā)現(xiàn)的霸奕。
我們表達(dá)一件事情若要表達(dá)得精確溜宽，就應(yīng)該試著減少話中的「詮釋空間」，而代名詞的使用非常容易造成設(shè)計(jì)討論上的時間浪費(fèi)质帅，例如「這個」适揉、「那個」之 類的詞匯，在專業(yè)討論上應(yīng)該減少使用临梗；取而代之涡扼，你應(yīng)該使用本篇文章第一節(jié)所提到的精確名詞來表達(dá)，或是詳細(xì)描述你所指的外型盟庞。
好了吃沪，如果你是設(shè)計(jì)師，希望這篇文章能夠幫助你在設(shè)計(jì)的溝通討論上更加順暢什猖、省時票彪；如果你是 PM 或開發(fā)者，也可以順便學(xué)習(xí)不狮、或?qū)⑦@篇文章轉(zhuǎn)給你的設(shè)計(jì)師參考降铸。
作者：TAYLOR HU
譯者：IxDC
原文地址：http://www.ui.cn/detail/168343.html
