四個幫你提高UI設計效率的工作技巧

四個幫你提高UI設計效率的工作技巧

許多人認為創造力和邏輯是左右半腦分開管轄的、設計師和工程師使用的是不同部分的能力所以大家各安其份做好自己的工作就好,但事實上這種刻板印象除了阻礙你進步以外可說是一點用都沒有。

瞭解工程實作的基本原理

業界 NG 率:接近 100%
許多人認為創造力和邏輯是左右半腦分開管轄的、設計師和工程師使用的是不同部分的能力
所以大家各安其份做好自己的工作就好——我負責光鮮亮麗地畫圖,工程師就負責用超大聲的同刻鍵盤在黑色的螢幕上編寫外星文。
但事實上這種刻板印象除了阻礙你進步以外可說是一點用都沒有(而且不見得是正確的)。
巴別塔的故事大家幾乎都聽過,會造成溝通問題的原因很簡單,就是講的「語言」不同
而非思考方式不一樣——無論是什麼領域,要成為佼佼者,都必須具備高度的創造和想像能力,而設計更是非常講求邏輯的行為。
所以設計師懂工程實作原理要做什麼?該懂哪些部分?很簡單,你不需要學會怎麼寫 code,但你至少需要懂得:

1. 正確稱呼 UI 組件

以 iOS 為例子,在 Apple 的介面設計規範文件裡,每個畫面構成的組件都有正式的名稱,我們看看:
 

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

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

最普遍的例子:自從 iOS 7 引入帶有模糊效果的設計語言後,大家似乎都染上了高斯模糊的癮。
但這樣的效果非常耗費系統資源(原理及時間複雜度),就連 iOS 也到了來年的 iOS 8 才心不甘情不願地開放使用 UIBlurEffect API,免得第三方 App 一堆模糊效果拖累系統效能
而在 Android 上官方更沒有提供像 iOS 如此方便的 API 可用(有錯請不吝指正)。
聽起來像外星語?
白話來說,許多設計師毫無意識到某些視覺效果在工程實做面的可行性、也沒有考慮到各種裝置的運算負荷能力,而設計了大量會讓開發者面有難色的稿子,好不容易做出來了,發現算圖卡頓得要命,又要回頭改稿,得不償失。
又例如 Status Bar:
 

我看過太多設計師為了設計感而給 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圖
如果把 wireframe 畫得如此精美,你將立即面臨三個負面後果:
浪費時間,徹底的浪費時間。
有彩色稿的外型構造,卻沒彩色稿的色彩系統輔佐,導致大家無法完整理解你「精心設計」的 UI 對象。
對設計沒概念的客戶、PM 或老闆會忘記我們是在 review 畫面上有哪些對象,反而在這時就開始跟你檢討設計細節,等你接著做彩色稿時,才突然講說之前有哪個功能忘記擺放上去。
其中第二點是本節的重點,在你的 wireframe 裡,應該使用系統原生的對象來構成畫面,例如這些東西:
Sketch UI 套件圖
Sketch UI 套件/圖
請避免在非必要的狀況下急著在 wireframe 裡畫一些從來沒有人看過的「創新 UI」。
一個好理解、直覺的設計是所有細節相輔相成的,在 wireframe 的階段缺少了顏色和動態效果的輔助,更不該冒險呈現特殊的對象外型
也就是說,你的 wireframe 頂多做到這樣就該收手:
App介面圖
App介面/圖
這樣一來,畫面上都是大家平常使用 App 時有看過的形式,看得懂畫面的時候,就能夠專心探討這些功能是不是產品所需要具備的。
想知道線框圖、原型和視覺稿的區別

少用代名詞

業界 NG 率:60%
這個溝通技巧不難做到,但如果沒有人指出,是很難自己發現的。
我們表達一件事情若要表達得精確,就應該試著減少話中的「詮釋空間」,而代名詞的使用非常容易造成設計討論上的時間浪費
例如「這個」、「那個」之類的詞彙,在專業討論上應該減少使用
取而代之,你應該使用本篇文章第一節所提到的精確名詞來表達,或是詳細描述你所指的外型。
好了,如果你是設計師,希望這篇文章能夠幫助你在設計的溝通討論上更加順暢、省時
如果你是 PM 或開發者,也可以順便學習、或將這篇文章轉給你的設計師參考。
原文地址:medium

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。