UI 與平面的不同(上)


小小工作了半年多,大學學的是多媒體相關,設計以平面居多,畢業後深思熟慮,也看上這個感覺質感度、產值都高的UI一途。

第一份工作,在只有自己以為介面就是把畫布大小改成手機螢幕尺寸之下,有幸到一間可愛的接案公司,從沒用過mac、不會Sketch、不懂RWD、沒看過guideline,甚至有著喜歡Apps卻厭倦Webs的小偏見,到現在也有了一點微心得,慶幸自己初生之犢的勇氣、也感謝公司的接納,一路矇懞懂懂、也想紀錄些平面與介面間值得深思的差異。

~此篇紀錄自己看見的UI世界,或對或錯、都是感想,還寄望往後能為自己應證或糾錯,也期待有更多的交流來往。~

並沒有真正的踏入平面的地盤,深信各領域都有各自專門,正如平面印刷亦是複雜高深,設計的領域煩請努力禁止美工一詞出沒。

若單單把設計這整個宇宙都看作是關於色彩、字型、編排比例的創作,那也許平面和UI是大同小異,只是需要適應新軟體、新工具,更注重團隊合作,但僅僅這樣認知和解讀,小覷了設計領域、也小看了UI的世界,卻是業界發展間最容易產生的誤解。

— — — 以下紀錄我對 UI 目前的體會及認知 — — —

對於「像海報一樣的網頁不能用的啊!」這句傳說工程師遇到平面轉職UI的沈痛怒吼,深思了許久、想方設法去揣摩,是因為太流線太藝術而無法完整以程式實現?切圖不好切?字體問題?還是有著設計難以想像的背後原因?

我的工程師人太好,從來不曾跟我說過什麼,可能等著我哪天鼓起勇氣去面對自己雷了多少人,但先說說我的感覺吧。

#設計思維:感受到最大差異的,是平面與UI設計間需要的思維不同。

平面的設計很視覺,但UI設計必須思考更多變化和互動,僅僅是一個按鈕、一行輸入欄位,都要思索如何讓使用者明白它的功能、提示動線及該給予什麼樣的回饋等。一個失誤,海報大家不看、UI卻會讓使用者離開這項產品。

UI設計師的自我風格比起平面設計師需要更為收斂,必須懂得以使用者或團隊(或者客戶)作為優先考量,介面的世界有更明確的客群、為使用者著想是圭臬,目標在於解決問題,而非僅止於美的畫面。

#視覺元素:光是印刷的CMYK和UI的RGB就有著極大的差異。

  1. 色彩

平面的色彩重視視覺能帶來的衝擊及視覺流的導引,此點倒是與UI常有的banner相似(或是banner本身也被視為平面的一環),但整體UI不論網頁或App,更強調的是資訊結構的整理、致力於將資訊有條理且清楚易懂的呈現,當色彩運用的過多或過強,容易引起視覺疲勞,因此UI的配色必須有一定的對比,例如底色與上層文字可以柔和、但必須清晰。

2. 字體

平面設計的字體較為自由,不必擔心程式實現的問題,而UI設計則需要考慮更多,在字體的選用範圍上,為了讓設計結果不對後端造成壓力,字體幾乎根據系統內建字體顯示,不過近期隨著技術和視覺追求,也能有更多方法去實現不同字體而保持一定效能且避免太多工程。

3. 圖形

先說單位問題,平面印刷的尺寸單位多是用物理尺寸, 比如厘米、毫米,而UI使用的是px,更多細節暫不討論。

在圖形的使用上,平面設計比UI設計豐富的多,表現方式也更多樣。產品類的UI設計,區塊化的設計思路更為明顯,為的同樣是資訊的淺白、結構的梳理。

以小圖示而言也有著思維上的差異,平面的圖示強調創意、需要在同一意境上盡可能找出更有趣、更有記憶點的樣式表現,但UI的圖示(icon)注重引導。

就像馬路上的路標,我們當然渴望路標好看,但絕不會想看見一個路名標示不清但極其美麗的路牌藝術品,UI設計的圖示亦然,目前使用者大都已被教育,能夠接受的icon圖示大致皆有共識,例如齒輪是設定、問號是幫助,當設計想要創造不同圖示,必須先考慮使用者的接受度,此圖示是否足夠容易聯想、足夠有明白的引導效果,否則不如選用雖然枯燥卻清楚明白的既有icon。

4. 瀏覽方式

平面設計屬於靜態的瀏覽,較少對整個瀏覽的過程進行串聯,UI則擁有滾動、按鈕跳轉等連續性的資訊瀏覽方式,相較之下信息的串聯性更為豐富完整,使用者挑選資訊時也顯得更自由、更開闊。

也因此UI設計師比須把握整體風格,例如定義按鈕樣式、不同狀態下的顏色規範等,為的是讓使用者在瀏覽網頁或App時,能有一貫性且能被引導,避免使用者在頁面與頁面之間感到唐突、陌生,甚至迷路。

#資料來源(下集待續)

#團隊合作(下集待續)

其實設計的領域都是一樣的,理念對於設計人固然重要,但解決問題、找到平衡點才是關鍵,否則更適合稱為藝術,這點無論平面或UI都該銘記。

尚有兩項差異,下集待續 …

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.