如何提高UI設計的速度？其實都是有技巧的！

文、hhhtfxzgjy

如何提高UI設計的速度?在這裡分享一些U就業觀察到的常見問題和改善方式。當然，需要注意的地方何其多。

身為設計師的你，應該要了解工程實作的基本原理：

業界 NG率：接近 100%

許多人認為創造力和邏輯是左右半腦分開管轄的、設計師和工程師使用的是不同部分的能力，所以大家各安其份做好自己的工作就好——我負責光鮮亮麗地畫圖，工程師就負責用超大聲的同刻鍵盤在黑色的屏幕上編寫外星文。

但事實上這種刻板印象除了阻礙你進步以外可說是一點用都沒有(而且不見得是正確的)。

巴別塔的故事大家幾乎都聽過，可以參考一下www.ujiuye.com/neimeng/2017/14647.html會造成溝通問題的原因很簡單，就是講的「語言」不同，而非思考方式不一樣——無論是什麼領域，要成為佼佼者，都必須具備高度的創造和想象能力，而設計更是非常講求邏輯的行為。

所以設計師懂工程實作原理要做什麼?該懂哪些部分?很簡單，你不需要學會怎麼寫 code，但你至少需要懂得：

1.正確稱呼 UI組件

以 iOS為例子，在 Apple的介面設計規範文件里，每個畫面構成的組件都有正式的名稱。

這個玩意兒叫做「Segmented Controls」，而不是「那個長得像膠囊的選單」，如果能夠使用正確的術語來溝通，將能夠省下非常可觀的解釋時間。如果你想了解得更多、更精確，將前述的規範文件讀熟以後，呼和浩特中公教育U就業建議你再繼續研究 UIKit Catalog。

2.有些效果就是做不出來、很難做、不該做

最普遍的例子：自從 iOS 7引入帶有模糊效果的設計語言后，大家似乎都染上了高斯模糊的癮。但這樣的效果非常耗費系統資源(原理及時間複雜度)，就連 iOS也到了來年的 iOS 8才心不甘情不願地開放使用 UIBlurEffect API，免得第三方 App一堆模糊效果拖累系統效能;而在 Android上官方更沒有提供像 iOS如此方便的 API可用。

我看過太多設計師為了設計感而給 Status Bar著上前景色(Foreground)，讓它變灰甚至變成彩色，又指責開發者這麼單純的事都辦不到，其實 Apple在文件里寫得很清楚，這個東西你就只有黑或白色可選，像這種就是你不該做的效果。

建議：如果你是就讀設計科系的大學生或研究所，我會建議你選修計算器概論、基礎數據結構，這些都會對 UI設計非常有幫助。

嚴謹執行設計流程

業界 NG率：90%

之前和一些公司合作的過程、以及和朋友聊天的時候，我發現一個團隊在設計流程上草率帶過的情形比想象中還多。

流程是容許微調的，我在 Yahoo實習時常看到非常大型的設計流程，而在其他小型團隊工作時則多會採取上述較簡易的版本。

要如何微調呢?基本上不建議省略其中的步驟，但在上面綠色箭頭處可以減少迭代(Iterate)的次數來達到省時的目的，而這部分就會稍微考驗到產品設計師、PM的經驗和 gut feeling了。

有些講得一口好設計的人會不食人間煙火、一味地倡導要從使用者調查研究(User Research)、Persona開始做起，然後實作 n多個原型(Prototype)才開始讓開發者動手，後續再做數據分析……等工作，好像全世界只有自己知道這件事一樣。

但實務上，小型項目花太多心力去做這些事基本上是缺乏成本觀念的表現，在使用者數量達到一定門坎前，數據分析的母體也是小得可憐，並無統計的參考價值。因此，小型項目其實可以將功能拆分 Release，先做出來再觀察使用情形並修正細節(雖然有一點危險，但比起讓項目永無結束之日，總是較適當的選擇)。

先以原生 UI組件表意

業界 NG率：80%

在設計的 wireframe階段，主要目標是讓大家對於畫面上「有哪些對象」取得共識，而不是這些對象「該長什麼樣子」，那是 mockup階段才要注重的，因此將 wireframe畫得過於精美是一件非常奇怪的事情。

如果把 wireframe畫得如此精美，你將立即面臨三個負面後果：

浪費時間，徹底的浪費時間。

有彩色稿的外型構造，卻沒彩色稿的色彩系統輔佐，導致大家無法完整理解你「精心設計」的 UI對象。

對設計沒概念的客戶、PM或老闆會忘記我們是在 review畫面上有哪些對象，反而在這時就開始跟你檢討設計細節，等你接著做彩色稿時，才突然講說之前有哪個功能忘記擺放上去。

其中第二點是本節的重點，在你的 wireframe里，應該使用系統原生的對象來構成畫面。

請避免在非必要的狀況下急著在 wireframe里畫一些從來沒有人看過的「創新 UI」。一個好理解、直覺的設計是所有細節相輔相成的，在 wireframe的階段缺少了顏色和動態效果的輔助，更不該冒險呈現特殊的對象外型，也就是說，你的 wireframe頂多做到這樣就該收手。

這樣一來，畫面上都是大家平常使用 App時有看過的形式，看得懂畫面的時候，就能夠專心探討這些功能是不是產品所需要具備的。

圖片來源：hhhtfxzgjy

少用代名詞

業界 NG率：60%

這個溝通技巧不難做到，但如果沒有人指出，是很難自己發現的。

我們表達一件事情若要表達得精確，就應該試著減少話中的「詮釋空間」，而代名詞的使用非常容易造成設計討論上的時間浪費，例如「這個」、「那個」之類的辭彙，在專業討論上應該減少使用;取而代之，你應該使用本篇文章第一節所提到的精確名詞來表達，或是詳細描述你所指的外型。

好了，如果你是UI設計師，希望這篇文章能夠幫助你在設計的溝通討論上更加順暢、省時;如果你是 PM或開發者，也可以順便學習、或將這篇文章轉給你的設計師參考。