Image for post
Image for post

相信每位設計師都知道,當我們在進行創作時,在設計稿中放入資料是很重要的一件事情。當畫面被資料豐富後,我們才能清楚自己的設計看起來到底是怎麼樣。

有時候,要寫的文字還沒決定、要放的圖片也還沒準備好的時候,就也只能自己東拼西湊出一些內容,來塞進設計稿裡了。

比起在設計稿中留下一堆沒有幾個字的文字欄位,以及拿著各種顏色的方塊來佔位,人們都比較傾向去放上幾段文字、塞幾張圖片,來看看自己的排版和佈局呈現出的效果如何。

像是在設計師以拉丁字母來創作時時,會使用俗稱「Lorem Ipsum」的假文來塞進自己的設計稿,藉此來預覽自己設計稿呈現的樣貌;而用中文創作的設計師,則是會使用「假文產生器」這類的工具。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

遇到需要展示圖片的時候,很多人也常常會從電腦裡隨便抓幾張圖,放到設計稿裡來看看效果。

畢竟在這種內容還未決定,卻又不能把欄位就這麼空著的時候,塞這些假資料就變成我們唯一的選擇了。如此一來才能夠去清楚理解視覺是否平衡,避免「原本好看的東西,怎麼放了內容卻走樣」的情形發生。

而科技始於人性,當設計師們有著加入假資料的需求時,就自然會有人來為這個需求服務。

Sketch Data

Sketch 在兩年前的 52 版中加入了名為「Data」的功能,它用來在設計稿中,依照不同需求來加入各類的隨機內容,包括圖片和文字兩種。從該版本開始,Sketch 內建就提供了可以產生肖像、姓名等資料的「Sketch Data」來供設計師使用。

也不乏有第三方的服務,例如圖庫 Pexels、Unsplash,都推出了能夠透過原生 Data 來從網站上取得圖片的套件,造福不少用戶。

Image for post
Image for post

也有開發者從「Faker.js」這個網頁專用套件來加以改造,打造了「Sketch Data Faker」套件,提供姓名、地址、公司名稱、電話、假文...等數十種假資料的產生。

有了這些套件,設計師們都能在規劃排版的同時,直接在 Sketch 中產生圖片或假資料來協助設計進行,更能展現出設計的最終效果。

然後不知道台灣人是天賦異稟不需要放資料,還是耐力過人可以自己慢慢想出假資料,兩年過去了,在台灣還是沒有半個這種套件(至少我沒有看過啦),所以我就自己做了一個。

台灣資料

Image for post
Image for post

我所設計的《台灣資料》是 Sketch 的原生 Data 套件,就和上述的內建、第三方套件一樣運作。目前提供了地址、姓名和電話號碼的隨機產生功能。所有套件所呈現出的資料,都是透過隨機搭配組合,來產生出的純虛構結果。(當然縣市和行政區是真的)

Image for post
Image for post

其中,市內電話和地址,更可以讓使用者自行指定地區,之後再交給套件來產生完整結果,使其能取得符合自身需求的隨機資料。

姓名則是收集了 21 世紀常見的姓氏和名字,來加以互相組合搭配。呈現出我們這年代確切的風貌。

而在它主打隨機的背後,卻是一點也不馬虎。為了使呈現的資料可以自然又具可信度,也是下了不少功夫在裡面。例如地址和市內電話會依照人口,來大致決定哪些縣市較常產生、市內電話的產生結果,也都符合各地的編碼規則。

其它像是地址是否會產生「巷」、「弄」,會不會有「北路」、「十街」等命名,也都是靠著機率隨機決定的。

我希望可以透過這簡單的套件作品,來協助設計師們在創作時更有效率,更加得心應手,進而做出更好的設計。

《台灣資料》可以在 https://sketch.chel.in 取得,現在正在進行 Beta 測試。歡迎大家共襄盛舉,也希望大家會喜歡。

使用說明可以在此查看,有任何問題也歡迎與我聯絡

Image for post
Image for post

Image for post
Image for post
今天在這篇文章裡,我想要和大家聊聊台灣的設計水準原地踏步的問題。這篇文章的用意,是想要讓每一位讀者,隨著文字去進行與問題相關的思考,理解問題點。文章裡沒有提出問題的解法,也不是特別針對妳我她。只是在記錄這個,這年代真真實實存在的問題。

打開 Dribbble,映入眼簾的,是來自世界各地的優良設計。

設計師們自豪地展示自己最新的創作:有些是看起來不錯,但是可能不能實行的概念作品;也不乏有設計公司來分享新案子的設計規範、圖標、成品,甚至還丟了網址在說明欄裡,所有讀者都能自由地去造訪,欣賞它們精心繪製出的每一個像素,感受它們設計出的每一段使用體驗...

Image for post
Image for post
Dribbble

這些作品每天都在進步,互相學習與改進,創造出越來越好的介面與體驗,更加精緻與吸睛的視覺表現。

與此同時,越來越多意想不到的新穎設計手法被實現。哪家矽谷大公司可能明天就把所有產品換上了全新設計規範、哪個作業系統正準備引進時下最新的設計潮流,搞不好還有某一個概念設計的潛力被看中,正一步步走向實際、或將成為人們的下一個關注焦點...

...回頭看看台灣。看看身邊,妳看到了什麼?

剛才在 Dribbble 上看到的作品,在台灣是否有人做過類似的?一樣清爽、一樣有張力、一樣平衡...

我想妳很可能會得到跟我一樣的答案:沒有。

現代的介面到底是什麼樣?

讓我們一起來看看,這個年代國際上正在走什麼設計風格。為了讓我們可以更加客觀的來比較,我們選擇有公信力的、國際上最知名,最多人使用的服務來做參考。這些服務可能我們都有使用過:

Image for post
Image for post
Airbnb、Uber、Facebook、Twitter

這是來自四個服務的,四個不同類型的頁面。光看著這四個圖,我們多少能得出一些感想來。像是它們都一樣有白色的介面,只把自己品牌的色彩作為輔助——這是近年流行的去差異化,降低學習成本的做法。

粗體字的大標題也開始在各家作品中流通,這也是 iOS 在前幾個版本裡推出的規範之一,很快就成為了現代設計的一部分。

Airbnb 的這頁「旅程」,是很標準的現代設計風格的頁面。以插畫作為空白狀態的背景,並由相關文字輔佐說明,給了使用者良好的指引。

Uber 將選單以相當單純的列表來做呈現,這在各大應用程式中也相當常見。列表逐漸被運用在各類選單的場合上,為的一樣是降低學習成本。

Facebook 最近則在「功能表」頁面裡換上了前所未見的全新佈局。這也似乎很好的解決了日漸增多的服務,造成選單冗長的問題。

而 Twitter 不說廢話,它用字重與配色優秀的點出了頁面裡的重點和次要資訊。「轉推」、「留言」和「喜歡」按鈕在淡色下不搶走其他元件的風采,讓頁面保持了徹底的簡潔,完美地呈現出重點。

這四套應用程式,作為國際上超大企業的產品,它們固然不能亂七八糟的隨便搞出鬼東西來,它們都是經過一大堆的測試,一大堆的使用者調查、一大堆的用戶訪談,最後才綜合出大眾都能接受的,最新穎的設計風格。

如果說 Dribbble 上的概念作品,可能有不切實際的成份在,那要定義現代的介面設計該有的水準,拿這些公司的產品來衡量,肯定再客觀不過了。

就以上面四張圖,這四個應用程式,和它們所反應出的現代設計風格來作比較。在台灣,我們是否見過呈現出類似視覺效果的作品?

跟不上時代的台灣介面

Image for post
Image for post
台灣高鐵、Foodomo、台灣大車隊、台灣鐵路

問題來了。全世界都流行這種風格的同時,明明台灣設計師那麼多,那為什麼我們會看不見類似的作品,在我們日常周遭的國產作品中出現?

明明這是全世界的潮流。台灣既然有公司在做設計,那不是應該通通都要做到現代化嗎?到底為什麼台灣的現代設計可以匱乏成這種境界?

「不現代」不意味著它是差的設計,它可能在某個時代、某個環境下曾經可行,但是在這個年代卻不是那麼妥當。

或許,有一套UX、一組元件,它真的可以起作用、可以解決問題;它真的可以讓人輕鬆上手,它可以妥善管理資訊。

但是,如果它跟不上時代,那繼續使用它,是否妥當?

東西要好用、用戶要喜歡,理所當然非常重要。但是,一但它在視覺和體驗上,跟不上世界上其他地方所有正在進步的作品,那它是否能說是成功?

有多久沒有看到台灣的作品跟得上時代了?

好比這些年一直以奪得設計獎為傲的銀行 Richart,和歐洲的 N26 數位銀行相比,Richart 和「現代」的邊完全勾不著。

Image for post
Image for post

從 App Store 的宣傳截圖來看,兩者的行銷方式明顯不一樣。N26 以現代極簡的現代設計風格來呈現,展現著自己沈穩與專業的一面。而 Richart 展示的不是它的專業,而是以我國刻板印象裡的那種「親民路線」來和使用者見面。

在應用程式本身,N26 在首頁就抓住它自身作為銀行應用程式的重點,顯示了使用者的消費記錄,以及帳戶中的餘額。在元件上,選用的是這年代的現代風格,包括大標題和列表元件這類,在現代講求去差異化時常見的元件。

而 Richart 則是走了自己特別的路線。比起介面設計,這看起來更像是在做平面設計,和現代介面設計潮流差異之大不在話下。Richart 的首頁除了底部分頁列以與頂部導覽列外,幾乎沒有任何一個是常見的元件模式。

這正凸顯出了台灣介面設計的問題:玩自己的。

脫節了全世界

Image for post
Image for post
Ramotion 是世界知名的設計公司。

我們身為設計師,肯定都經常關注產業動向。試著回想,我們平常是否曾見過台灣業界有過像 RamotionClayHalo-LabTubik 這種水準的設計公司存在?又或者是,像這種水準的作品,在台灣存在的有多少?

在時代進步的時候,台灣設計師的思維是否有一起進步?大環境走向去差異化,求著極簡的時候,台灣環境又在做什麼?為什麼台灣的產品依舊複雜、缺乏引導,呈現手法老舊、不合時宜?

跟隨設計潮流難道不是設計師的第一要務嗎?

Image for post
Image for post
這種概念性質濃厚的設計作品,曾在台灣見過嗎?(來自 Halo Lab

如果是做招牌的,做海報的,或許能說「街上路人又不會天天出國,跟國外手法不一樣沒人會知道啦!」,而且搞不好還真的可以給它就這樣矇混過去,甚至還演變成一種值得品味的「台灣味」。

但是談到介面設計,在螢幕背面的,設計師創造的每一個像素,無時無刻都是在和全世界比較。

介面是一種國際性的東西,它建構在一個全世界共用的網路、平台上,它是和全世界的設計師一起,共同不斷進步的一個領域。正因為它的這種特性,就使得它在全世界的範圍內,都共享著同一個設計潮流。

沒有跟上這個潮流,就是脫節了全世界。

Image for post
Image for post
Neomorphism 始祖 Alexander Plyuto 制訂的設計規範

看看上圖這一份設計規範,再回想你曾看過的(或者去搜尋一下)台灣 Neomorphism 設計作品。有幾個可以達到上面規範的質感?

始終沒有人給我一個真正可以解釋一切的答案,來告訴我到底為什麼台灣的作品不願意跟上時代。

但我推測,可能是整個業界不願意把追求現代擺在優先事項。畢竟請旗下設計師花時間鑽研,可能就浪費了為公司創造收入的時間。

再來也可能是把「能用就好」的心態放錯地方,覺得做出來的東西管用就夠了。又有可能是害怕創新的東西客戶不接受,寧願走中規中矩的路線。

甚至問題可能也來自我們成長的環境,我們的教育、社會不鼓勵我們去思考問題,讓我們在創新和學習的路上屬於弱勢。

但是,「不現代」背後的影響卻不容小覷。

惡性循環

作為介面設計師,是否曾想過一個問題:

「我的設計作品,

可以和全世界的作品相提並論嗎?」

明明與世界接軌,是做介面與體驗設計,那麼重要的一件事情。

如果我們作為設計師,卻不做好最基本的義務-「設計」,不去推進自己的創作實力、不去追逐整個大環境,不讓自己的作品與全世界能並駕齊驅,那我們到底是在做設計,還是只是在兒戲?

如果只是一味的追隨前人的腳步,不分好壞全部吸收、全部仿造,最後會發現就像台灣當下的情況一樣:原地踏步。大量不合時宜的設計手法、與世界脫節的視覺表現,在台灣天天被創造,就好比台灣的時鐘十年沒有走過一樣。

Image for post
Image for post
魔境歌詞網與 Musixmatch

一樣是歌詞資料庫網站。試著想像,當一個人從小接觸左邊的網站,和從小接觸右邊的網站,會對「網站」這個概念有多不一樣的印象?

設計師拿了一個不現代,但能用的東西塞給使用者,使用者在使用的同時,也無形間把這不現代的印象吸收進腦海裡了。這個作品就影響了使用者對「介面」這東西的印象。被影響的個人,就會加以認可或創造出類似的東西,因為在對方的印象裡,「介面」就是長成這個樣。

當大眾的印象被影響,把過時的設計被當成理所當然的時候,就代表整個國家的美學水準已經被拉低了。日子一久,這般印象就烙印在人們腦海裡,下一代也會被這樣教育。

新接觸設計的未來的設計師們,也會在這種過時的環境裡成長,然後出去做著這種過時的設計,繼續影響著更多人。還很可能不自覺有這個問題。

這正是一個惡性循環。

Image for post
Image for post
巴哈姆特電玩資訊站。2010 對比 2020。

介面作為一門專業在台灣發展,已經快要十年了。看看這十年裡我們到底活在什麼環境裡?全世界都拋棄的設計手法,重複出現在新的作品裡。到處都是過時的、視覺與體驗不理想的國產應用程式。

隨著時間流逝,台灣的介面落後只會越來越明顯。不求設計與體驗的進步,帶來的後果是災難性的。資訊界根本都成了「十年如一日」的完美演繹。

是否曾經見過台灣的資訊界注重設計,在發展服務的同時,有如同 Airbnb DesignUber DesignSpotify Design 這樣的單位存在?

有多少服務,因為沒有跟著時代而改變,因而黯然退場,又或者,因為自己的形象、服務總是輸人一截,與外來服務相比完全沒有進爭力?

台灣的外送平台在外商的擴展下倒了幾家?多元計程車贏得過 Uber 嗎?串流平台好用過 Netflix 嗎?

Image for post
Image for post
KKBOX-新舊風格混用。功能複雜、嚴重缺乏統一視覺規範。

結語

請停止創造過時設計。我們應該確保自己隨時都在把設計水準,朝著國際上同業的標準推進;隨時審視自己的作品是否合乎當下時代變遷。不要讓自己水準的停滯,影響到大環境的審美。以為自己在做設計,卻只是抓著舊時代的東西,在培養這年代的「新中華民國美學」。

是,我知道,有時候客戶會阻礙設計師創新。但是,這種客戶不就是被這個大環境養出來的嗎?客戶本身對設計抱持的舊思維,也不正是環境不進步下,給對方造成的印象嗎?

跟著時代走是每一個設計師的義務。每一個身處惡性循環裡的設計師,都是造成台灣與世界脫軌的罪魁禍首之一。如果不試著推進自己的作品,讓它跟得上時代,那就是在危害整個行業、整個社會,乃至整個國家。

不妨我們每個人都先停下腳步,審視自己的設計與心態,評估自己是否真的有做好設計的本分,思考自己是否也無形之中陷入了循環的一部分、是不是也給大環境帶來了一樣的不良影響。

最後,再來繼續去創作出更多,符合時下最新潮流的,真的對得起這個社會的作品。繼續走在我們服務大眾的設計師之路,讓我們國內的大環境,可以擁有它真正值得的好設計。

About

Che-Lin Chan 詹喆麟

來自台南市的設計師。擅長動手創作各種使用者介面,而不是用嘴巴做。chelinchan.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store