Quantcast
Channel: 嫁給 RD 的 UI Designer
Viewing all 448 articles
Browse latest View live

設計師的公平作業規範

$
0
0

我查了幾個網站,設計師真的不看字只看圖的,幾個較流通的合約範本內容漏洞百出,真出事很容易就被咬到。只好靠自己了。 Burn Your Portfolio一書第 89 章提到「公平作業規範」,繁中版的詞不達意像 Google 翻譯,簡中版的文句修改太大,只好對照原文三方參考比對自己上了...

公平作業規範原文:The Code of Fair Practice for the Graphic Communications Industry

感謝好友 布布協力翻譯,並感謝友人 Edwin檢查校稿,不然這麼拗口的條款我看得一個頭兩個大,憑我的破英文連看帶猜實在沒能力寫得出好翻譯。

翻譯盡力維持和原文相近,但原文包含設計師和藝術家,性質有些不同,因此在譯文用詞上微調為設計師取向。

歡迎設計師們參考取用,可以當成合約附件保障自身權益。

設計師之公平作業規範

第1條:設計師或其代理人與客戶之間的協商,應僅透過實際被授權的買方進行。

第2條:設計師或其代理人與買方之間的訂單或協議,應以書面形式締結,並包含轉移的具體權利、議定的具體費用、交付日期,以及作品的總體描述。

第3條:所有非基於設計師或其代理人過錯造成的變更或新增,應以加收或單獨費用向買方請款。

第4條:設計師或其代理人一方出錯而產生的修改或重製,不應該向買方收費。

第5條:由於買方原因造成的延期或取消,買方應根據作者所花的時間、精力與成本,支付合約終止費。設計師此段時間因而錯失的其他工作也應被列入考量之內。

第6條:工作完成時,買方應即時全額付清。美術品應適時返還給設計師;應付給設計師的款項不得牽涉第三方的許可或付款。

第7條:不得在未諮詢設計師的情況下進行變更。若變更或重製是必要的,則應先將修改工作權給予原設計師。

第8條:設計師預見延期,應提前告知買方;若設計師因不合理之延誤或不符議定的規格而無法遵守協議,將被視為違約。由買方原因造成的延期,設計師在不影響其他專案為前提下,需盡力維持與原協議接近的時間。

第9條:在可行的情況下,買方應為設計師提供成品的複製品,以供設計師作自我行銷。

第10條:買方及設計師或其代理人雙方皆不得索取或給予未公開的回扣、折扣、饋贈或獎勵。

第11條:除非書面同意,否則作品及著作權皆歸設計師所有。若未經設計師預先授權,買方不得複製、保存或掃描其作品。

第12條:除非另專門購買,作品原稿或以任何形式儲存之原始檔案皆為設計師財產。購買原稿或原始檔案不等同於購買任何複製權。所有交易應採書面形式約定。

第13條:在著作權轉讓時,只有明定的著作權轉移;所有未明定的權利,一概屬於設計師。所有交易需採書面形式約定。

第14條:委託設計作品不得視為「雇傭作品」,除非在動工前另以書面協議。

第15條:當作品費用基於限定使用,但之後卻更廣泛使用,則設計師應收到額外款項。

第16條:未取得設計師授權前,藝術或攝影不得被複製用於包含客戶展示或獎項等任何用途。若工作的試作品、初稿、初步圖片之後被選擇作為再次創作,則需取得設計師授權並應向其支付額外費用。

第17條:若買方打算或意圖將試作品、初稿、初步圖片交給其他人接手完成,需在下訂時以書面提出聲明。

第18條:電子著作權應與傳統媒介著作權分離,需另外協商。除著作權為整體轉移或為僱傭協議外,在目前仍未知媒介上之複製權皆需另外協商。

第19條:所有出版之插畫或攝影作品應註明設計師署名,除非以書面方式另行約定。

第20條:設計師保有在作品及所有複製品上署名的權利。

第21條:藝術品不得剽竊或抄襲。

第22條:若設計師需在不合理工時中完成作品,應支付合理額外費用。

第23條:所有交付給買方的藝術品或攝影樣本,應具原作者署名。設計師不能將他人作品據為己有。

第24條:所有收到設計師作品集、範本、檔案等的單位皆有責任對其妥善保管並以原始狀況歸還。

第25條:當設計師同意經由特定獨家代理人所經紀時,不得由其他代理人處接受工作或同意其他代理人展示其作品;非獨家協議情形下,協議仍應闡述雙方所同意之具體限制。

第26條:設計師與代理人解除合約關係需具書面聲明。該聲明需考慮當事雙方合作時間長度及代理人對所有正進行中之廣告及促銷所做出之財務貢獻。合約關係解除後,任何代理人不得繼續展示設計師的樣稿。

第27條:設計師提供給代理人或提交給潛在客戶的作品樣品仍屬設計師所有,不得在未經設計師授權下複製,並應以原貌即時返還設計師。

第28條:此法規於仲裁釋疑時,應經由指定之調解機構負責,並可受其上級機構指定之委員會代表提出修正與補充。指定之仲裁機構應對雙方具有約束力,且其所做之決定可作為判決與執行之依據。

第29條:競稿。參與競稿(無論是通過客戶或自行參加)的藝術家和設計師,需承受可能失去報名費用、支出,以及追求其他潛在機會或工作的風險。設計師應自行決定是否參與競賽、提供免費服務、參與比稿或依事後獲益決定酬勞等工作。

翻譯:Akane Lee布布Edwin

轉載請註明出處,反正就算我不講這句也會被亂轉得到處都是...看個人良心了。


溫哥華:UI、展板、看板設計

$
0
0

回到家發現 5 天拍了快 8G 的照片,臉都青了不知道怎麼整理(很想乾脆不整理),先挑幾張我覺得最有意思、拍攝當下就覺得該拿出來跟大家分享的照片好了。

(圖多慎入)

靜態看板


科學世界裡的樓層導覽。我覺得繪製這類導覽式看版需要大量資訊圖象化的能力,如何在一堆房間中讓參觀者找到目標物,其動線規劃、圖表設計很吃邏輯呢。


Capilano Suspension Bridge,非常值得一大早去散步的森林遊樂園(喂)。不管是科學世界、海生館、還是 Capilano Suspension Bridge,展板大多設計得十分活潑,還包含可觸摸的立體元素。


比起呆板的全平面圖片編排,放點立體的展品加上拼貼收集冊的展示設計,非常吸引人停下腳步看看它在講些什麼故事。我等了好一會兒才拍到這張沒人擋住的照片。

可操作式導覽看板


Pacific Centre 的看板,據說是溫哥華市中心最大的購物商場,不過比吉隆坡 Pavilion 或曼谷 Central World 小非常多,大概只有它們的一層樓吧。操作起來還算順手,沒什麼特效中規中舉,細節部份沒有 Siam Paragon Shopping Center 那塊讓人驚豔。

(順帶一提,目前最喜歡的百貨公司是曼谷 Central World,有我最喜歡的餐廳 Nara、和目前感受最良好的 Spa Montra。)(沒有人問妳這個)


海生館的看板,不確定可互動還是燈箱而已,我沒有去戳它。不過目前逛過 N 間博物館,在視覺文宣面做的最精緻高雅氣派的是溫哥華海生館喔!狠甩台灣博物館百八條街不眨眼的。

UI 設計


海生館專為海怪特展而製的大型互動裝置,很有中世紀 RPG 風格,讓我想起大航海時代這塊 GAME。是我目前對於所有展覽裡的可觸控螢幕中評價最高的一個,雖然它放在 B1 樓梯底下不是很顯眼的位置。


敘述世界各地的海怪傳說,畫風精細,航海圖的質感抓的很好。


不只有單一層點擊,點開的視窗還可以展開圖片看更多內容。


除了昂貴的門票之外,老公還額外掏錢贊助海生館的另一個原因是,它真的負起「海洋教育」的責任。各個展區都有說明人類對海洋造成破壞和污染。你可以真真切切感受到館方的用心想讓參觀者建立保育的概念,不是把圖文資訊扔出來就了事。

路邊的設計


溫哥華到處都可以刷卡,看這台機器...就算不懂英文看數字和圖都行,操作方式就是由上往下,和台灣(如高鐵票販賣機)一下左邊、一下右邊讓人交錯難理解的操作方式相比,這台機器雖然看起來復古,但對使用者體驗進行過優化呢。


變電箱...我路過這台好幾次,旁邊就是好吃的早午餐店 Twisted Fork 。金魚的眼睛+很有種密集恐懼症的感覺太有趣了,忍不住就拍照紀念。


我是不是忘記講,這次去溫哥華是為了參加朋友婚禮?她跟我說,溫哥華的變電箱是找當地年輕設計師或藝術家畫的,所以到處都長不一樣。密集恐懼金魚我就只看過這一個。


The Burrard。滿推薦住這間飯店的,房間不大但很乾淨,在 Downtown 算物美價廉的一間。設計感很重,不管是路邊看板、樓梯間、或是招牌,都很傳達出「這是年青設計師會住的飯店」的感覺。

從他們的官方網站就能感受到這點了。 http://www.theburrard.com


飯店 1F 的咖啡店,看板上的文字讓我笑了,有笑有推...

宅宅的炫耀


老公喜歡看 Marvel ,於是朋友開車帶我們去了這裡朝聖...(明明整車人都是宅宅!)

X 教授的學校!

據說是電影第 2 部和第 3 部取景的地方,年代有點久我沒那麼迷 X 戰警忘記在哪一幕出現過。

現實裡是間大學,吉祥物是孔雀。在找車位的時候一轉彎就看到隻大綠孔雀拖著長尾巴在車道旁邊啄啄啄...還以為牠會變身咧...

必買書單推薦

$
0
0

這份書單大半不適合初學者。

內容是中階向了,可能要有3年以上工作經驗會比較理解書裡面的含義、為什麼會這樣寫、實戰上要怎麼活用。之前把書櫃大清一輪,只留下 4 星以上的書,其中這幾本我都會給 4.5 星以上的評價。有幾本我推薦過很多次了。

以下順序純粹隨手抓的,不是推薦順序,請參考評分。(書名越長的越文不對題,看書本內容吧,不要被書名騙了。)

UX设计之道——以用户体验为中心的Web设计

藍色的是新出的第 2 版,黃色封面是第一版。書名說是 Web,實際內容通用大多數專案,而且英文書名完全沒提到 Web。第 1 版我沒看過,對第 2 版評價很高,有種「幫大忙」了的心情。只是簡中翻譯和台灣用語落差極大,要有心理準備。

難度 ●●●
理論 ●●●
實戰 ●●●●

設計的法則:125個影響認知、增加美感,讓設計更好的關鍵法則【全新增訂版】


之前介紹過很多次這本書,念廣告設計科時就會學到「美的形式原理」,這本內容就是把各種形式原理全部集結的目錄。拿來翻翻當百科全書查很有用,但若以為靠這本就可以懂很多瞬間脫胎換骨作品超威根本不可能。它就是本遇到不懂的單字拿出來查的字典。

難度 ●●●
理論 ●●●●
實戰 ●

設計的方法:100個分析難題,跟成功商品取經,讓設計更棒、更好的有效方法


同上那本,請當 UX 研究方法的百科全書用。這本書也只負起「目錄」功能,真要學會什麼研究方法請手動 Google 自我搜集更多資料。

難度 ●●●●
理論 ●●●●●
實戰 ●●

互動設計概論


如果你會問「UX 和 UI 有什麼不同」「UX 和服務體驗有什麼關係」「UI 和互動和 UX 怎麼分」這幾個問題,就表示你根本沒搞懂什麼是UI、UX、互動,請買這本,不解釋。

難度 ●●
理論 ●●●
實戰 ●

設計思考改造世界


這本書我會給難度和理論都高、卻實戰性很低的評價,是因為我遇到有「資深設計師」看了這本,然後在公司說要導入 IDEO 的設計流程...請先學會怎麼畫 Wireframe 再來跟人說導入設計思考流程好嗎。這本書很容易造成「大師級演講,台上講得很威台下狂拍手,回去想照抄卻完全不懂公司營運和開發流程還硬湊亂搞」的慘況。

因為這本書完整描述一個太美好的設計師中心世界了,不懂專案開發流程設計師會很爽得跳下去以為自己是救世主。

難度 ●●●●
理論 ●●●●
實戰 ●

設計的心理學:人性化的產品設計如何改變世界


從工業設計的角度,舉出負面實例,敘事手法像是在講故事,條理式列表分析比較少,所以讀起來比較累比較硬。知道是知道,但要轉化到實作上需要點經驗和時間。

難度 ●●●●
理論 ●●●●
實戰 ●

為什麼他接的案子比我多?:設計業界潛規則,讓你接案上班都無往不利


看一次罵一次這本書的書名,取得有夠爛。不過這本書可以當成設計師必備的聖經看,我很喜歡這本。之前寫設計師的公平作業規範這文時發現繁中版的條款是 Google 翻譯等級,導致對其他章節的翻譯都有種不信任感。對照簡中後發現簡中雖然比較貼近內文,但修改幅度有點大。可以的話不管什麼書都還是看原文吧唉...

讀後感:Burn Your Portfolio 第一話 1~3
讀後感:Burn Your Portfolio 第一話 4~10

難度 ●
理論 ●
實戰 ●●●●

頓悟時刻:設計大師訪談錄


雖然書裡訪談的大多是有點年紀的平面設計師,某些看法套在資訊業上不實用,但他們的人生體悟、職涯心得、給後輩的建議都挺犀利,不愧是大師。難度會給這麼高是因為,簡中字、翻譯、排版我看得有點痛苦...

難度 ●●●●
理論 ●
實戰 ●

當代設計演化論:關鍵運動與經典風格的承先啟後


這本其實是考研究所時買的,念工設的人應該挺熟悉這本。當然考試念書當下很討厭它,畢業多年後再翻會覺得這是本好書。圖大字大、文筆易懂。雖然不知道死背一堆設計史藝術史除了考試外對自己有什麼幫助,現在回過頭來看,會認為這本書開起「多種風格思考」的可能性。

打個比方...當大家都在流行擬物風的時候,扁平風為什麼會出現?之後為什麼又會產生 Material Design?對藝術史或設計史有點認知的話,就覺得風格演變也不是什麼意外的事,歷史都發生過。

難度 ●
理論 ●●●●
實戰 ●

行動介面設計模式


行動介面設計模式和「微互動」2 書內容重複性有點高,不過因為行動介面設計模式比較厚、內容比較多就不在這次書單裡加上微互動了。

歐萊禮出了不少和 UI/UX 相關的書,落差很大,有些都是實例,講得很淺,像「Multi-Device 體驗設計:處理跨裝置使用者體驗的生態系統方法」、「行動支付體驗設計」,也有硬的要命的「創新科技設計:基因組學、機器人學與物聯網的UX設計」、「行為改變科學的實務設計:活用心理學與行為經濟學」。

初學者在這份書單裡我只推薦買這本。實例多、實戰性強,條列式說明哪些事不能做、哪些事一定要做。跟著書跑就是了。

難度 ●●
理論 ●●
實戰 ●●●●

.
.
.

說真的市面上的 UI/UX 書看多了都大同小異,講的內容就是那些。我幾乎不看台灣人寫的 UI/UX 書,至少落後 3 年以上。UI/UX 是很新的技術,發展也跟著科技演進和資訊業動向在跑。等台灣人學習到、寫成書、出版,不知道是多久之後的事了,新技術都變成古董。看網路文章、最好是英文的,比較容易學習到「新知識」。

UI/UX 的書如果真買,就買不會退流行的理論類吧。軟體操作之類的書會因為版本和現有風格快速淘汰。想想擬物風不過是多久前的事,現在都在走扁平風了。(扁平風感覺上也快被洗出去,Material Design 強勢中。)

意識不清下,如何操作手機撥出求救電話?

$
0
0

這是我的慘痛經驗,徹底感受到當意識不清時,想操作 iPhone 撥出求救電話是件非常困難的事。如果家裡有老人、或是獨居者,請熟悉 iPhone SIRI的操作方式,務必要養成習慣。

試想:當你眼睛沒辦法看東西、或看得到東西但無法理解那是什麼的時候,要怎麼打電話求救?

前情提要

昨天晚上 7 點左右後腦勺就開始緩慢抽痛鈍痛,以前也常發生這類壓力型頭痛,習慣了只覺得煩,起來跳跳鄭多燕、去洗個熱水澡,疼痛感消失 80%。剩下 20% 左右就當輕微感冒不以為意。

做了點家事,想說早點休息,9 點上床睡覺,雖然很疲倦但完全睡不著,突然頭就開始越來越痛。這時候還有辦法忍,過了 20 分鐘後痛到受不了放聲大哭,打 Facetime 給在日本出差的老公求救。

老公人在日本當然也不能幹嘛,我只能打電話給老媽。

意識不清

問題來了,這時候頭已經痛到視線模糊看不清文字、無法辨識和理解 icon 和文字的含義。要怎麼打電話?

之前看過一部演講短片,女性講者(好像是腦科醫師)講述她中風當下是怎麼撥打求救電話。當時她沒辦法理解數字的含意,數字已經變成看不懂的未知圖案,且因為中風的關係,物體遠近感無法掌握。只能比對通訊錄,按鍵盤撥號一個字、遮住通訊錄一個字慢慢操作。

當下我也和那位講者一樣,完全看不懂手機裡的 icon 是什麼意思。即使盯著那顆綠色 icon 幾秒,仍無法肯定它是電話 App。只能憑操作習慣,點第一頁的第一顆按鈕,還因為手抖按不太精準開到別的 App。

「常用聯絡資訊」裡只存有老公的電話,要從整排通訊錄中找到老媽的電話根本不可能,視線模糊而且也無法辨識文字。雖然記得老媽的手機號碼,但什麼都想不起來,甚至連數字鍵盤都看不懂。

最後我靠 Siri才成功打出求救電話。

反思

iPhone 這類型的手機螢幕,沒有實體按鈕可以操作,在意識模糊、無法辨識 icon 和文字的時候,撥打求救電話變得非常困難。

滑動解鎖

不要想了,當下我完全不知道手機怎麼解鎖。完全想不起來密碼、也看不懂鍵盤,還好有設指紋,大姆指放在一個平面凹凹的地方就好了。

緊急電話

這個也不要想,誰會記得解鎖頁左下角有個緊急撥號的功能?平時絕對不可能去用它,緊急時刻根本不會想到這邊可以點。在意識不清的時候倚賴的就是平時的操作習慣

Siri

這次能把電話打出去靠的是 Siri ,平時上下班我都戴著耳機聽音樂,會用線控 Siri 打電話給老公,所以習慣對著 iPhone 講「打電話給老公」或是「打電話給老媽」。

操作習慣

這次超出預期的誇張頭痛讓我發現 iPhone 不是個落單人士在緊急時刻能拿來撥打求救電話的好工具,沒有實體觸覺輔助。在喪失視覺或是無法辨識螢幕顯示的圖文時,iPhone 沒辦法發揮「手機」的功能。

滑動解鎖頁的緊急電話在這種狀況下一點用都沒有,沒有養成習慣、出事時完全不會想到有這功能可用。

到最後只能倚賴不用思考的反射動作,雖然現在可以開玩笑的說「難怪運動漫畫都在強調不停揮劍或踢球,要讓身體養成習慣」。事情發生當下真的也只能靠操作「習慣」在求救。

課程:平面設計師轉職 UI 入門班

$
0
0

開始報名囉!請到 KKTIX 活動報名頁

自從我遇到掛著「資深」、結果連圖層命名都沒概念的某群 UI 設計師後發現,從平面轉 UI 的設計師很多抱持著「拼版面」的美工心態在做 UI,這和年資無關,不把 UI/UX 當一回事的心態和技術只會給專案成員帶來災難。

事實上 UI 這門學問在台灣很新,學校很少有足夠的師資教育這部份。職場上的起薪 UI 設計師比平面高出很大一截,所以平面設計師紛紛轉跑道開始設計 UI...技術和理論知識的不足造成 RD 加班加到爆青筋、設計師自己也不知道為什麼老是改來改去。

嗯,所以我開了平面設計師轉職 UI 入門班,直接說明 UI 設計包含哪些工作、要怎麼做,不要再拿平面美工那一套用在 UI/UX 上了,會害 RD 不能準時回家吃飯的!

課程主題

  1. 了解 UI 和平面設計的差異。
  2. 熟悉 UI 設計師的工作產出。
  3. 如何和專案成員配合。
  4. 看懂設計規範,做出可行的設計。

適合參加的對象

  1. 平面設計師想轉職當 UI 設計師。
  2. 想成為專案裡的戰力而不只是美工的設計師。
  3. 剛開始設計 UI,不知該如何下手的初學者。
  4. 想補強基礎理論並能實際活用所學的人。

課程目標

在這個入門班中,你可以學習到

  • UI 設計師該具備的基本技能與知識。
  • 一般專案開發各個階段 UI 設計師的工作。
  • 各種 UI 設計師該會寫的基本文件。
  • 如何以設計師的思維發現問題、解決問題。

若完整上完此課程,你會發現自己能降低專案成員的工作壓力,尤其是 RD,且能減少來回修改和出錯的機率。在一般外包公司、新創團隊或自行接案,都不太會遇到專案跑到一半不知道自己要幹嘛的卡關情況了。

課程大綱

UI和平面設計的差異

什是 UI/UX
互動設計概論
使用者經驗元素

UI 設計師的工作產出

Functional Map
Flow Chat
UI Flow
Wireframe
Mockup
Prototype(User Test)

如何和專案成員配合

切圖
標示文件
專案開發流程

看懂設計規範,做出可行的設計

iOS Guideline
Android Guideline
Web Design (RWD)

時間

7/18 (六)、8/1 (六)、8/8 (六)
上午9:00~下午4:30,共三天 18 小時。(注意7/25沒課喔)

地點

新北市板橋區文化路一段268號12樓 (台北富邦銀行樓上)
板南線新埔站 2 號出口,步行 3 分鐘。

費用

均一價 $11000。
費用包含 教材、發票。

(教材走童年懷舊路線喔!你會拿到一本像自然習作的講義,一半內容上課填寫、另外一半是回家作業。)

講師簡介

Akane Lee
有個專門嘴砲的 Blog:嫁給 RD 的 UI Designer。
擅長 UI/UX/Web 設計。
Madders創辦人<< 現在是不是很流行寫 XX創辦人啊?不寫就弱掉的感覺?

(其實我也不知道寫什麼簡介,寫多了好像都在自我吹捧...反正這個 Blog 文翻一翻大概就知道我的水平在哪了吧?)

備註

我很討厭一些高來高去的演講,遇到太多次聽眾坐在台下和海豹一樣興奮鼓掌,結果回家想跟著做,卻完全不知道要怎麼動手。因此我開的課絕對走實技路線,課堂上實際操作一遍,回家才知道自主練習要朝什麼方向努力。所以有回家作業喔!

課堂不會教軟體操作、也不需要帶電腦,自備鉛筆、橡皮擦就好。

20150629補充:
這次的課我會講的非常非常淺,所以初學者也可以報名參加。如果對 Photoshop 有一點認識的話,在 Mockup、Prototype、切圖等內容學習上會比較輕鬆。

進化吧!Mockup 展示圖

$
0
0


最終效果圖。(裝了 Photoshop CC 2015 後一堆外掛都 GG 了,幸好最重要的幾個都活著。)

設計師 ALEX BENDER

在講步驟前先來介紹這位設計師 ALEX BENDER,相信他的作品很多人都看過。單張 iPhone Mockup 效果圖的前景深效果做得很精緻。

這篇文就是我分解他的效果圖學習筆記。(不要問我說怎麼人家成品這麼漂亮我就只做成這樣,我的程度就只有這樣啊...)

展示用 Mockup 神器:Perspective Mockups

忍了很久,還是買了...超愛這個 PS 外掛跑出來的成果。雖然有很多免費的 PSD 樣版或動作一樣可以辦到這種 3D 傾斜裝酷效果,但沒有一個有 Perspective Mockups 的精緻程度。一分錢一分貨,花錢省時間。

官網:Perspective Mockups

所以這篇文講怎麼用 Perspective Mockups做出「進化版」的效果。

製作步驟

1. 先做好要跑外掛用的 Mockup

我先做一頁 Mockup 出來,隨手抓張照片當底圖,拉幾個形狀圖層做 Logo、打打字,套 iOS8 UI KIT 的 StatusBar。

底圖:Gratisography
狀態列:iOS 8 UI Design Kit for Free

2.使用 Perspective Mockups

有很多種展示方式,挑個喜歡順眼的,點一下就自動跑完,隨便弄隨便漂亮,大概 10~15 秒(依電腦效能)就解決了。


Dribbble 常見基本款,幾位大咖都有貼過這種角度的作品圖。


頁面有文字的話這種效果有點花...


這感覺倒不錯...

3. 基本款加工

為了學習 ALEX BENDER的效果圖作法,選用最基本的單張款來練習。

4. 裁切

Perspective Mockups 跑出來的圖其實很大張,先裁切小一點。

5. 底圖上色

預設的底色是深灰,上點和 Mockup 相關的顏色讓畫面有一體感。(數值參考用)

6. 加光源

拉個圓,光的顏色從 Mockup 抓,飽和度調低、明度調高。羽化、高斯模糊。(數值參考用)

7. 光源位置

光在陰影層下面喔!。圖層樣式改「柔光」,數值自己試,不要對比太強烈。光也可以直接加在最上層,視覺效果更精緻,不過 Mockup 顏色會被光源色改變,龜毛點的客戶可能會 OOXX。( ALEX BENDER的效果圖 Mockup 上也有壓光源。)

8. 畫面暗角

有光就有影,使用漸層工具+色彩增值。暗角能讓背景更有層次,突顯 Mockup。

9. 圖層混合模式

感覺用柔光似乎有點濁濁的,調整下圖層混合模式。沒有固定的標準答案,數值、模式可以自己玩看看。

10. 複製、壓成像素

複製全部圖層,然後平面化。一定要複製新的出來喔!不要把原始圖層拿來壓平,萬一要修改會哭的。

11. 決定主要內容顯示範圍

在最新壓平的圖層上拉個圓,正圓或橢圓都可以,這是畫面「清楚」的部份,最好把 Mockup 主要內容都圈到,其於的都要模糊掉,讓使用者視線集中到內容上。記得圓框的邊緣要羽化。

12. 反轉選取

反轉選取,注意現在圈住的地方就是畫面不重要、要模糊化的部份。

13. 製作前景深

高斯模糊。數值自己試,我自己覺得 4~7 px 之間都還可以,要配合前一步圓的羽化程度。

完成

最終效果圖,一定有更聰明的作法來處理「前景深」,不過我最熟的就是高斯模糊,就用這招來製作了。

ALEX BENDER不是用高斯模糊,比較像動態模糊一類,看邊角的晃動感就知道了。還要再研究看看怎麼做。目前的步驟是我覺得能在 5 min 內迅速處理完的操作方式,但離他的成品圖仍有不少落差...(希望他不會覺得我臨摹得太慘。)

細節放大

有羽化和高斯模糊處理失焦的感覺,畫面精緻很多。感覺很像什麼 3D 軟體跑出來的展示圖一樣,很威 XDD

光如果在最上層

補一張「光在最上層」的效果。可以自行比較看看。

板橋早午餐:艾格 yeggi_Brunch

$
0
0

目前板橋吃到最好吃的帕尼尼,價格又便宜,大推!

粉絲團:艾格yeggi_Brunch::早。午餐

板橋是早午餐的戰區相信大家都知道,因為假日出門不管去哪裡都人山人海,我們夫妻倆週末不喜歡出門,外出活動只剩下「早午餐踩雷」。板橋早午餐至少吃過 20 間了,一直有新的店開幕(和倒閉)。

吃過那麼多間,有 80% 以上的店面只會得到我們夫妻倆中庸普普的評價(卻還是一堆人排隊),菜色也就差不多是那樣。目前吃到最好吃的第一名還是好初,不過它離家遠、排隊久、份量又比較少,只能外帶,很偶爾才會去吃一下。所以 艾格 yeggi Brunch 是目前綜合評價最高的一間

是對很年輕的小夫妻一起經營的店面喔!所以食材準備什麼的都靠他們 2 位在拼。外場是老闆娘在接待,老闆幾乎都在廚房裡,兩人忙得不可開交,尤其是假日客人超多的時候會等滿久的。


老公點的黑麥雞腿堡,他超愛的!給了5星評價。

因為太常去了,我趁平日人比較少的時候主動搭訕老闆娘(喂),跟她說我覺得最好吃的是帕尼尼,大概是整個板橋早午餐店最好吃的一間,以食材的新鮮度和美味程度,我覺得可以把單價拉高 10 ~ 20 元都合理。


(反正我就照菜單上的順序一個個往下點,忘記是哪項了...紅醬嫩雞嗎?159元,大推!)

「妳知道當初我們挑土司的時候試吃到快吐了嗎?吃過好多間才選到這個牛奶土司!還有那個鄉村的雞腿肉,我們親自去菜市場進貨的才不是什冷凍庫存,薯條也是,我們試吃一大堆,吃到我都怕了...」

老闆娘很可愛,我誇了幾句帕尼尼超好吃後她霹靂啪啦跟我說當初開店前找食材的試吃辛酸。


(這個才 149 元啊!超撐的,還好我餓扁了不然哪吃的完。)

艾格的帕尼尼土司非常酥脆,和很多間說是帕尼尼根本只是軟軟的美而美烤土司天差地遠,建議第一次來艾格可以點帕尼尼或黑麥漢堡。份量非常非常多,女生肯定吃撐,薯條我從來沒有吃完過,和老闆娘混個臉熟後就拜託她換成生菜了。

艾格yeggi_Brunch::早。午餐

新北市板橋區光武街2巷10號
02-2250-8160
08:00~17:00

新埔捷運站 5 號出口 3 分鐘,光武街 7-11 那條巷子裡。

(店裡座位少,建議外帶或避開用餐時段。假日是一定要排隊的,盡量選平日吧。)

讀者回信:如何轉職做 UI?

$
0
0

這 3 個問題我超常被問到,同時也是我對現行台灣教育大翻白眼的原因:學生在學校待了多少年,結果還是不知道怎麼找出解決問題的方法。

先承認自己有問題,才能找出問題,才有可能解決問題。

結果台灣的學生被訓練成教科書以外的東西通通不會,不會獨立思考,尤其是邏輯推理能力根本還在新手村,大腦跟全新的一樣...

1.若要轉職做 UI 設計是否要先從網頁設計的工作開始著手呢?

這要分 2 個方向來講,A.你是想從事 UI 有關的工作;B.還是做我心中真正是 UI 的工作。

如果你只是想從事畫介面的工作而已,那只要死刻 PS 視覺設計功力,其他技能放牛吃草都能找到份工作。反正台灣有能力區分 UI 設計師功力的公司沒幾間,隨便盜圖都有工作。

如果你想做的工作是我心中真正「UI 設計師」在幹的事,台灣 90% 以上的公司都 GG 了。

至於先從網頁設計還是什麼設計開始著手都不重要,不管是什麼裝置、只要透過螢幕體驗的原理觀念都一樣。只是叫設計師去學 html+css 比寫 Swift 容易多了,所以大家會推薦 UI 設計師先學手寫網頁碼。

必需包含那些要素才能被稱為 UI?相信 Google 大神能回答得比我更完美具體。

2.我想找 UI 的工作但沒有 UI 相關的作品集怎麼辦?

最常被問到的問題排行榜第一名。你們是認真想知道這問題的答案,還是在跟我開玩笑?

我想考駕照但不會分油門和煞車怎麼辦?
我想當鋼琴師但不會彈小星星怎麼辦?
我想當廚師但不會煎荷包蛋怎麼辦?
我想當海賊王但不會打架怎麼辦?

涼拌。

3. 面試時會被要求什麼樣的作品集和能力

有經驗的主管會找「對專案開發有概念、能團隊合作」的設計師,即使他視覺表現不那麼好;也不會找個只蒙頭專注視覺表現完全不管專案死活的人。

會錄取不管專案死活的設計師進公司,通常也沒有專案管理的概念,這樣子的公司流動率很高,工作效率和氣氛很慘烈啊。

社會新鮮人只要作品集不太差,態度好一點就夠了。

放心,不會有人對初學者抱什麼期待,看著在學學生做新一代展老把自己當成霸王色主角威能的救世主,出了社會就知道連根草都不是。在學時期就強到爆炸的神人萬中選一,不是人人都天生神力看本破書就能學會如來神掌。

公司找新鮮人往往看上新鮮的肝、低廉的薪資、好騙的思維。只要具備這三點,加上有到平均值的基本製圖能力,不用怕沒工作。設計這職業的流動率非常高,就是 A 做膩了生氣跳去接 B 忍不下去待不住的位子。總是需要大量人力去填坑,但好的工作早被卡位完了輪不到新鮮人啦~

可以參考舊文 面試會問的問題,不過這是我的個人觀點,大部份的面試官都不會這樣問。


演講邀約和創業聊天

$
0
0

我出來創業了,一人公司。一人公司的好處就是一人飽、全公司員工都飽,真的不行還可以找老公喊「親愛的零用錢」。雖然主力是開課,不過案子也會接...看心情。台灣接案有 90% 在找美工代工而已,根本不需要設計師。(真的需要人解決 UI/UX 問題再來找我談案子吧,找代工的就算了...)

個人自認在 Blog 的文筆絕對能讓各位看得出我很任性,出乎意料的是,這兩個月來竟然接到不少演講邀約、合作提案之類的訊息,不好意思對於這部份我一樣很任性。

演講邀約

歡迎學校、非營利組織

我設計本科念 9 年,畢業後幾乎歸 0 重來,深刻體認到現在的設計教育和業界幾乎脫勾兼穿越,教出一大票「美工」,離「設計師」還遠得咧!(不過業界需要的也只是代工用美工,以這角度來說好像也沒脫勾...)

發現問題解決問題、如何跨領域和其他人合作、了解專案裡各角色的工作職務與專案開發流程...等等,比起軟體操作這種可以自己看 Youtube 學的、作品好不好可扔社群取得眾人意見,培養獨立思考的能力才是教育最重要的部份吧?

設計學生一畢業根本就像丟去天空競技場 200 樓讓念洗禮一樣,活下來的人成為美工、更少的一部份人成為設計師。

教育的目的不該是培育大量人力去洗出最後的人才,就算是精英制的遠月茶寮也是完整課程在栽培磨練。不過,學習這件事我覺得還是得靠自己,不想學就放生啊,Google 這麼好用,還要人整盤切好端到眼前才知道怎麼學喔?

不打算和任何補習班、培訓班合作,沒理由我被抽成了還要用自己名譽幫忙抬轎背書。尤其是官網盜圖或拿免費圖庫照片說是學員作品的地方,當我眼瞎啊?而且要是有多的時間心力開自己的課就好了,幹嘛要被多抽這一手?

創業聊天

不要打著聊天的旗幟行解謎之實好嗎?我就靠授業傳道解惑過生活,再來我要扔請款單了啊!

說要提合作的...請問合作對我有什麼好處?每個都說希望我先了解看看計劃...了解了之後要我幹嘛?免費出力?想找專業人士解決問題,就不要迴避任何需要「付費」的可能性

好幾封 Mail 都這樣的內容,把自己的「點子」誇了又誇卻又說不清楚,然後找我去「幫忙」,幫忙算是有薪還是無酬要先講清楚啊,別到後來跟我說「這次先免費試作看看,以後都給妳長期接案」之類的話吧?當我第一天出來工作嗎?

不認識的人第一次見面會談我就要收諮詢費了,如果有這樣的覺悟再來找我「幫忙」吧。我的專業是專業,我的時間也是時間。

題外話(以下發牢騷)

我有很長一段時間不知道自己要幹什麼,對「活著」失去熱情,找不到自己在社會上的定位。這次亂改課綱的事件就某個角度而言讓我找到自己可以做的事,也許走教育路線是個選擇。

我對「設計師」有非常強大的偏見,覺得設計師的種族天賦就是「文人相輕、玻璃心、情緒化,還特愛搞小圈圈、我跟你好你不可以跟他好」,尤其是業界八卦聽多之後,人多就是對的、先哭先贏的招術也太常見吧,好可怕。雖然 RD 多少也是會這樣,有人的地方就是江湖嘛...但 RD 可以用道理說服、設計師不行啊!

(所以我會跑 RD 的社群,不敢去設計師為主的,八卦聽太多被嚇到了,躲遠點安全。)

設計教育 9 年,除了研究所外什麼時候在教「講理」了?都把創意當成是種「FU」,方法論是什麼聽都沒聽過,就別提邏輯推理出來讓人傷心...這樣要怎麼溝通?

也很奇怪為什麼好多設計師開口閉口都是台灣,對,愛台灣我知道,但台灣沒有牆你知道嗎?Google TW 可以搜到世界各地的資訊,為什麼不看看國外在做什麼呢?我的英文只有國中程度,靠 Google 整頁翻譯一樣能看各國網頁,機器翻譯詞不達意可以猜啊!看圖也行嘛~

我覺得造成設計師不講理、眼光又不夠遠的主要原因是不會獨立思考,不懂如何發現問題、解決問題。這不能完全怪設計師,問題出在教育上,從小學開始,學校就完全沒教獨立思考和邏輯推理啊!(數學不算、我指方法論)

我能做的、我想做的,就是訓練設計師擁有獨立思考的能力,遇到問題能自己找到方法解決,而不是兩手一攤等天上掉答案。這比軟體操作重要太多了,關係到一個人他未來的人生會是什麼樣的。我想做的其實是這個,提到人生可能太嚴重,但最起碼可以讓設計師少走點冤枉路吧。

演講筆記:Growth Hack 入門心法班

$
0
0

老實說,我連 Growth Hack 是啥都還沒研究過,Xdite 扔了報名網址給我叫我快報,我就付錢了= =(喂)這大概是我這輩子第一次沒仔細看過講者要講啥我就掏錢的演講。

Growth Hack 入門心法班 (八月) by xdite

一樣,現場聽打,只記錄個人覺得對我自己有用的部份。

(Xdite 妳講話速度和簡報節奏太快太緊湊了啦,不到 30 秒就換一張簡報,要給人反應和思考、喘口氣的時間啊!!!)

第一次遇到我跟不上講者速度的,通常都是講者鬼扯聊天我得靠打字才不會無聊...

聽完前半場,我會推薦各位來報名上課,這和 UX 有很大的關係,尤其是創業人士。

產品的問題

「我的產品很好,到底哪裡需要改進?」
沒打到使用者需求,就等於未完成。

(各種名詞介紹)
(各種數學公式)

為什麼要用 Growth Hack

(實例)

找出有問題的地方

大改版不能解決問題,為什麼?
為什麼改版?哪裡出問題?靠改版可以解決?

找出「真正有問題的地方」才能改進

關心關鍵行為(監測流程)
觀測流失率

監測工具+AB TEST

達成率、營收少,為什麼?被什麼因素影響?

監測工具=店監視器

https://mixpanel.com/

如何改善?

網路會上找到太多關鍵字,找不到自己適合哪個。

降低疑慮、增強信心

Leading Page

Leading page =店裝潢
(實例)
店頭太醜,人家就不來啊~

結構

6 招取得使用者信任!

一句話形容自己
使用此服務的三大好處
敘述運作原理 or 示意圖
使用者見證 or 媒體報導
Call to Action
免費註冊或退款保證

(實例)

寫完一堆(唬人)的宣傳後,最後一定要叫使用者去做!!!

(實例)

FAQ 寫的比本文長都可以。

(中場休息)

A/B Testing

(各種手法)
(追蹤點擊率)

Onboarding

店頭 UX 太差客人會跑光。

什麼情況你到一間公司就馬上離職?
什麼情況你開一頁網頁不到 30 秒就關掉?

  1. 消除疑慮和挫折
  2. 馬上帶來好處
  3. 完成指定行為後給予好處

(實例)
(反例)

開發產品迷思

PM 都不知道在幹嘛,覺得要有資訊才有辦法做市場行銷,還讓使用者填了一堆資料。

要、貼、心

https://www.intercom.io/

Customer Support

大家討厭客服的原因,很容易遇到負面,所以不想做客服這塊。
就變成客服=工讀生

(我也不想上街搞使用者訪談+1)

客戶需求,客服最直接知道。
客戶會透過客服說「我要你賣我這個!」

Email-List

要放對地點啊!要突出啊!
「紅~色~的~字~才~有~用~啊~」

不要讓使用者覺得這是騙 mail 的,降低疑慮。註明「一次行行銷不會寄垃圾信」。

養潛在客戶

Referral

朋友親測說服力比較高啊~

(ex:Airbnb、Dropbox、Uber)

人都會相信朋友嘛!

與其叫他推薦 1 次,為什麼不叫他推薦 10 次?

個人心得

這是 UX + 行銷的系統性整理,用科學的手段活用方法論,照做就是了,不需要什麼都用「感覺」帶過。

動態效果的通靈之路

$
0
0

課堂上我出了一項練習,在講完 Wireframe 怎麼畫、包含哪些元素、說明文字怎麼寫後,拿了 Dribbble 上漂亮的 Mockup 當範例,請學員畫出 Wireframe。在台上看得出學員們滿不在乎以為小菜一碟的表情,但當我要求下拉選單、特效之類所有「輸入、運作、輸出」等邏輯條件都要寫成說明文字後,台下表情從傻眼變成惶恐,一副大難臨頭死了要怎麼寫的臉。(從台上看大家的表情變化超有趣。)

現在很流行「動態效果」啊,好多教學教你用 AE 做動畫。是啦動效好炫好漂亮,弄個 Demo 影片交給 RD,完全沒想過「輸入、運作、輸出」等條件,是要 RD 看著影片照抄練滿通靈 Lv.99 嗎?

UI 入門班的 30 位學員應該徹底感受到什麼叫「通靈」了,相信他們不會再讓 RD 腦補操作,起碼會思考觸發條件。(這就是平面設計師和 UI 設計師在思考模式上最大的差別。)

如果依照現在大多數的動效教學,用 AE 產了個影片叫 RD 一模一樣照做,那和去 App Store 上下載 App 叫 RD 照抄一個有什麼不同?

「這個要啪一下翻轉,然後這個要咻~地跑到這邊,之後這個要啵~原地放大...」你真的知道自己在講什麼嗎?(我好想拍下聽到設計師講這段話,負責寫 Code 的 RD 表情照片。)

動態效果明明有非常多種和 RD 合作的方式,最常見的卻是最後一項。

  1. 內建過場動畫、特效。
  2. 逐格動畫。
  3. Gif 或影片檔。
  4. 套用現成動態效果程式庫。
  5. 自己寫程式。
  6. 使用有開發者模式的動畫工具。
  7. 產出展示影片叫 RD 通靈。

如果連 Wireframe 「說明文字」要寫什麼內容都不知道,請各 PM 和 RD 勸退自家設計師不要跳下去搞動態特效。動態效果要通靈的部份比起普通的操作要多太多了啊!一個 App 沒有動態效果不會怎麼樣的。
.
.
.

對了,我很常聽到 PM 說他想透過動態效果讓使用者體驗更好。

你想用動態效果解決什麼問題?

想用動態效果解決使用者體驗設計不佳的問題?

可是使用者體驗不佳的問題根本不是出在動態效果啊!

產品在一開始規劃的策略面部分就有問題了,才會導致使用者體驗不佳,那為什麼預期加上動態效果就能導正錯誤規劃?

.
.
.

有人問什麼是通靈...大概就像是「我不知道產品是什麼、也沒有文字,但我需要海報和 DM,你先出幾版讓我看看」這樣子。

怎麼和 RD 配合製作 UI Animation

$
0
0

昨天貼的動態效果通靈文在粉絲團釣出幾位 RD 分享經驗。在講怎麼和 RD 配合製作 UI Animation 前,先來看 Rplus Chen 推薦的這篇勸世文 Stop Gratuitous UI Animation,這篇文在呼籲大家不要為了炫而炫,少用莫名奇妙的動態特效

(本文為個人筆記,我都用 Hype3 直接產出 Prototype 和 JS,避開和一堆數值的大混戰,但該知道「為什麼要這樣做」的部份還是要懂。)

如果設計師要產出動態特效給 RD ,他們需要幾種資訊。感謝邱政憲、Cateyes Lin 、謝孟哲的分享,綜合三位說法整理出下列 6 點:

  1. 起始狀態、結束狀態
  2. 變化屬性(寬度、高度、XY 座標、XYZ 軸旋轉角度、透明度、顏色…)
  3. 時間腳本(多少 ms 到多少 ms 做哪個屬性變化)
  4. 漸變函式(Ex. ease-in)
  5. 操作行為(停止並改為根據使用者操作、忽略、其他)
  6. 參考範例

1. 起始狀態、結束狀態

動態效果開始和結束時的狀態。也就是動畫開始前、跑完動畫後,畫面會長什麼樣子。

2. 變化屬性

有寫過標示文件的設計師都知道,一個元件需標出它的尺寸、距離、色碼、透明度等,如果是文字還要加上字體字級行高之類。在動畫的領域除了 X 軸和 Y 軸外,在 3D 空間裡要再加上 Z 軸。

所有需要製作動態效果的元件通通要標出這些數值,注意是數值,不是一個「感覺」,RD 寫程式不能靠感覺。

百度搜索用户体验中心的 H5 实现酷炫水滴效果文中對於「水滴」有非常可怕 + 兇惡的數學示範(抖)(這完全是專業的數學領域了,我投降!)

天马行空般的设计甩到面前,含着泪也要做出来——百度前端工程师的内心独白

設計師很爽地把想像中的動態效果扔給 RD ,RD 要經過這麼複雜的計算才有辦法實現。如果有專門處理動畫的職務就算了,這是他的工作,但往往沒有這麼美夢,RD 光是解 Bug 都沒時間了,哪有這麼多心力處理錦上添花的部份呢?

3. 時間腳本

在什麼時間點、某個元件的屬性變化。同樣是關鍵影格的概念,配合「變化屬性」,從 A 時間點到 B 時間點之間,某元件的數值有什麼變化。

若各元件變化時間不同,就會有很多不同的「時間經過」搭配「屬性變化」要處理。

4. 漸變函式

可以用「動作的加減速」來理解。根據迪士尼 12 項動畫原則,第 6 條是漸快與漸慢(Slow in and slow out)Material Design有一整個章節在說明曲線的必要性,並附上許多動畫範例說明。當然這對設計師來講很有難度。

Easing 函數速查表可以參考這個網址,和 RD 共同討論元件動作的變化。

5. 操作行為

「觸發條件」,使用者的操作是否會影響動畫或元件?遊戲類特別會注意到這個部分。

6. 參考範例

展示動畫、模擬影片、Prototype 之類,對設計師來說不算太大的困難,難的絕對是上方提的這 5 項數值怎麼標。這些屬性狀態數值沒寫清楚就要靠 RD 通靈了。

RD 現身說法

感謝 謝孟哲 在 FB 公開分享他的實作經驗,已徵得同意轉錄。看完這篇文後,就會知道為什麼 RD 會練滿通靈 Lv.99了。

全文如下:

其實動畫會有分兩種:

  1. 一般的2D動畫(平移、旋轉、透明⋯)
  2. 特殊或3D動畫(翻頁、mac的丟到垃圾桶⋯)

後者大概都只能用口頭或是影片溝通,而且開發成本很高。我遇過的情況是:有一個專業的設計 team,一個專業的特效函式庫 team,再加上完成一切作業的軟體研發 team。

前者就比較有一定的規則可循,因為 engineer(說 RD 居然會被砲?真令人驚訝)在開發時,系統已經提供了相關的操作方式,只要給些相關的參數即可:

  1. 動畫物件的參數變化(如座標、透明度、旋轉角度)
  2. 動畫持續的時間
  3. 動畫加減速的曲線,f(x)=y 表示在時間點 x 的時候物件參數為 y。

這就是上面其他人所提到的。

前兩點是很簡單能量化的,但是光是動畫持續時間就能看出這個 team 在 ux 上的 sense:使用者覺得幾秒的動畫能被接受?動畫播放時是否能被中斷或者改變狀態(左滑到一半可以停止,或變成右滑)?或者,這個動畫是否是需要的?

我遇過新手 designer 或是 engineer 最常做的事情就是把動畫時間定義為 0.6 到 1sec,如果沒有特別的設計我通常會說「太長」而要求改為 0.3 到 0.5sec...這邊扯比較遠,點到為止就好了。

第三點那個方程式就好玩了。這個部分 designer 根本不知道該怎麼描述,即使是 engineer,在這個素質落差那麼大的年代,也不是人人都能寫出那個 f(x)=y 的方程式。不過現在還是有些好用的工具可以用,如這種網頁:

http://matthewlein.com/ceaser/

你可以拉動方塊改變那個曲線,然後按那些按鈕看到即時的效果。

當然,如同上面其他人所言,這個方程式是有現成的可以套用,比如說漸減( web engineer 喜歡說 ease-out,android 上會說 DecelerateInterpolator,由於各平台用詞不同,除非是只跟特定某個平台的 engineer 溝通,否則溝通上我覺得還是用通俗的語言「漸減」來描述比較好。至少 PM 看得懂)。一般而言能有這樣的描述就不錯了,不過若要求更高的品質,就會需要更精確的描述。漸減這種詞就跟黃色一樣,是種很不精確的概念,黃色再精確一點可能會說鵝黃或香蕉黃,但是要十分精確一定是用色碼來描述,否則你的香蕉黃跟我的香蕉黃可能會不同。漸減也是一樣,ease-out 跟 DecelerateInterpolator 是否相同呢?有興趣的可以研究一下,最精確的描述則一定是數學方程式。

在開發某個要求很高的手機 app 專案時,我是直接仿造上面網頁的概念,在手機上面做了一個長得很像的 app 來跟 designer 溝通。他們手指拉ㄧ拉,方程式會用到的參數就出來了,也能直接在手機上看到效果。(但是這只是方程式的其中一種型態,我也遇過要拆成兩段函數來描述的動畫。歡迎有同好一起來交流一下啦~)

當然一般案子是不會用這種成本感覺無上限的方式來開發,比較常見的幾種情況是:

  1. 我說隨我喜好加動畫,業主就很開心了。
  2. 說要參考別人的某某動畫,我就照做,細節大部分的人其實看不出來。
  3. 特別要求的動畫,比如「水位上升到定點還要晃兩下」,這句話就是所有的規格了,也不好找到適合的參考對象。我乾脆就直接把 code都寫好直接看效果(然後這案子就虧本了 XD)
  4. 能有影片讓我臨摹,我就已經感動涕零了。但是也不保證能完全相同,這種方式就是看感覺啦。
  5. 像上面你說的 Hype3,或是我找到的那個網頁,或是我自己寫的 app,這種才是 designer 跟 engineer 能做精細溝通的工具。

就像 UI designer 的 1px 世界一樣,歡迎來到 0.1 秒的動畫世界。就我的經驗,能對 0.3 秒的動畫做出要求的 designer 其實道行很高啊!

(至於怎麼驗證這些動畫的最終成果呢?答案是高速攝影機。其實 iPhone 已經能錄 240fps了,所以也不用花大錢啦。這就是 0.1 秒的世界。)

最後一點是,做動畫還必須要考慮到系統效能。如何用最有效率的方式做到最接近的效果,請 designer 務必要跟 engineer 以完成目標為前提來好好討論。比如說 yahoo 天氣 app 那個背景動態霧化的毛玻璃效果,designer 可能會直覺的調整背景圖片霧化的層度,可是比較有效率的做法其實是用兩個圖層,一個霧化一個清晰,藉由改變圖層的透明度來做到類似的效果,原因是半透明其實比毛玻璃的運算還快很多。(其實效果還是有差喔!只是這樣是為了流暢度所做出的取捨。)

因為效能問題而產生 drop frame 現象,就是大部分的人說卡卡的,是 designer 專業以外的「瑣事」,也往往是 engineer 要花大量時間處理的——或者他會說辦不到,這是系統限制,已超出他的能力所及。這邊就只能視專案的預算跟 engineer 的能力,去分析效能瓶頸,評估可行的替代方案,再一一實作出來評估(這樣的 engineer 很厲害喔,通常已經在求道的路上了,或者已悟道)。這時候 designer 就只能被迫配合了。這部分是很難有文件的,因為這是創新,通常都是在不斷的試誤之下才能做出成品,文件只能事後補上。(好在 engineer 的要求大多很好懂)

或者說,遇到這種情況時,說服客戶改設計是比較好的方式。畢竟通常客戶給的預算只會少不會多,尤其是創新這種難以評估成本的事,懂?

最後一段只是說明,要做出動態效果,也不見得是有一個制式的流程就能產出,過程中可能會來來回回的合作,有時是 designer 主導有時是 engineer 主導...

試用:Flinto for Mac

$
0
0


Prototype 工具滿山滿谷一直生,昨天 App Store 新上架一款叫做「Flinto」的 Prototype 工具。抱持著 你花錢買這工具是想解決什麼問題?沒有?你買它幹嘛?的心情,本來想裝死,但應台灣設計師 Teresa 要求,我試玩了下寫心得分享,要不要掏 NT2,990 元出來見人見智了。

官網 www.flinto.com/mac
APP STORE itunes.apple.com/tw/app/flinto/id1021880828?l=zh&mt=12

官網提供試用版 14 天可以玩很久,先去下載玩看看吧~

特點

官網內容我不多提,首頁影片就大大的字寫著「沒有時間軸」,和我喜歡的 Hype3 不同。很好奇在沒有時間軸的情況下怎麼做動態效果。

主打 Sketch 可直接輸入...雖說我還是 PSD 派的,剛去網路抓了免費的 UI KIT sketch 檔打不開,可能我弄錯什麼,不過丟了 PNG 進去就沒問題了。

試用

隨手抓了之前自己做的 RainFont字級表 ScreenShot 當測試。

Prototype 最重要的就是串 Flow,這點在 Flinto 上可以讓使用者非常快速,大概是我測過 10 種以上 prototype 工具裡最快最直覺的一款,前提是版面要夠整齊。

拉個方塊, Flinto 會自動從方塊中心延伸一條線,再點一下要前網的頁面就好了,不用 3 秒鐘。

預覽也很簡單,右上角 Preview 點下去就可以實際操作看看了。

做這個影片不需要 5 分鐘,大概有 4 分鐘我在找圖檔放哪...操作真的很簡單,串 Flow 靠 Crate Link 和 Draw Link 就解決。

Screen Transitions

Flinto 最大的賣點,也是「為什麼可以不用時間軸做動畫」的設計,使用起始最終的概念。可是沒有關鍵影格= =

起始

4 條參考線集中的就是起點,注意畫面中央上方的藍色「Start」,代表動態效果的起始畫面。

最終

紅色「End」是動態效果結束後的最終畫面。

數值

為了測試效果明顯一點,我調了「曲線」,也把起始的頁面壓扁,營造彈跳感。

實際效果

最後測試效果可以看這段影片。有 ㄉㄨㄞ ㄉㄨㄞ 的感覺。

結論

我直接講結論...不值這個價

我爬了半天介面、也翻爛官網,找不到「輸出」,介面右上角的 Share 傳送的是「原始檔」,沒辦法輸出成影片或 !@#$%^& 任一格式,就只有原始檔。這就代表 RD 要看用 Flinto 做出來的特效長什麼樣子,他也得裝 Flinto ,不然就是要全螢幕錄影或跟我一樣拿 iphone 拍,這哪裡怪怪的。

而且影片檔=RD 要通靈,要花快 3000 台幣得到個要讓 RD 通靈的工具?同樣價錢都可以買 Pro 版的 Hype3 了,還能輸出 JS 檔給 RD 看曲線數值。一般使用者用普版的 Hype3 也夠用,還只要 1,490 元。

不需要寫 Code 做動畫的宣傳詞感覺很炫,但現在多的是這類型 Prototype 工具。沒有時間軸、沒辦法微調,我覺得有點像 威力導演 和 After Effects 的差別。Flinto 是給入門的人簡單輕鬆快速上手做個什麼出來展示的工具。但真的要深入微調做得更精緻就不行了,而且對 RD 寫 Code 非常不友善...

這版本看起來就是先推出來試水溫的,不用時間軸的概念很有趣,但就以需要複雜動效的設計師和 RD 的配合度來講絕對不夠用。期待下一個版本會更好。

老話一句:你花錢買這工具是想解決什麼問題?沒有?你買它幹嘛?

課程:9月份 UI 設計師入門基礎班

$
0
0

第一場課因為蘇迪勒颱風的關係,硬是拖了一個月才把 3 堂課上完。結束後的當天我和醬糊一樣爛在家裡有點虛脫,花了非常大心力和精神在安排課程和教材內容。還好努力有回報,許多學員都給予好評。

9月份 UI 設計師入門基礎班

應前一梯沒報到名的學員要求,加開課程。
本次基礎班課程內容更新改版,而且還附了板橋好吃的早餐。

報名請至 http://madders.kktix.cc/events/ui-designer-2

學員好評

很高興收到學員的好評,這是活生生的「使用者體驗」+使用者見證,也是對我的鼓勵。

(依收到的順序排列)

UI 入門班講課心得

$
0
0

這篇是我為什麼開這門課、為什麼這樣教學、和結束一場後的個人心得紀錄。

起源

開這堂課的原因...我是個非常會記恨的人!曾和一群平面設計師合作 UI ...(遮眼)...只能慶幸還好老公現在的工作不需要和設計師合作。

老是發生「憑我的智商很難跟你解釋」的情況,常給我近似於「你說你是 F2E 卻不知道 CSS 是什麼」的驚奇感。一堆我以為是 UI/UX 必備的知識和技能被當成學識派...是我標準太高,還是你對覺得設計師水平只要去巨匠補習就好?

我認識的 RD 當然不可能只有老公 1 位,常常聽到 RD 朋友抱怨 UI 搞不清楚狀況,從群裡的設計師發言也看得出來 UI/UX 這門學問太新,設計師一切「靠感覺」。坊間不少標榜 UI 設計的補習班卻找了 F2E 來上課,想找個地方有系統的學習卻沒有方向。

那,我來試試看吧。

好漢不提當年勇

我異常厭惡自我介紹把自己講的像人中赤兔馬中呂布(喂)一樣,尤其是 2 小時演講可以自我介紹 40 分鐘的那種。這次開課我連自我介紹都沒有,時間一到就直接進入教學,想說大家錢都付了一定知道我是誰不然來這裡幹嘛,結果學員連我的名字都不知道要怎麼念...= =

好吧,我知道自我介紹是必要的了。

到 2013 年為止,我的作品至少有 50 個 App 上架過,幾年前參與的作品得過 金手指網路獎 手機應用程式 商業服務類金獎、Yahoo! 4A創意獎 手機應用程式 佳作、時報華文廣告金像獎銅牌、BlackBerry企業 APP 開發大賽 特等獎。(年代久遠,真的是當年勇。)

之後因為不在接案公司,APP 作品數量大概就停在這,轉去練 RWD 技能和研究 UX,加上進了大公司好像被雷劈到一樣完全進入另一個次元,在專案開發流程和部門合作、公司營運方面學習到不少。

相信這些「當年勇」會讓我累積夠多的 實戰經驗可以和大家分享。

教材規劃

公家機關標案公司、新創公司、接案公司、傳統產業,到較大的資訊公司我都待過,但其實工作內容幾乎都是「全端設計師」。也就是從提案一路到最後的測試都要參與出力的設計師,什麼都要會、都要懂、都沾一點水。

我不覺得全端設計師有什麼不好,會讓人跨領域學習見識到很多,比較容易換位思考,未來職涯規劃的彈性也比較大。在台灣也是全端設計師找工作容易,所以我在課程上以全端設計師所需技能著手,就是領進門、講點我自己的實戰經驗和技巧,灌輸學員「承認問題、發現問題、解決問題」的思考方式,並用「邏輯」的角度去說明為什麼會這樣做。

要講、想講的內容實在太多太雜了,表面上是 UI 設計師入門班,其實是「全端設計師沾水班」,但好多人都阻止我叫我不要這麼取名...

設計思維

課堂開始沒多久我就強調,請所有學員質疑我的話,不要我講什麼都傻傻的信,要學著去思考、提問。整個活動中我會一直設陷阱給大家踩,就是要讓學員習慣問「為什麼」。了解那個「為什麼」,才能知道背後的原因,進而找出真正的問題點,再想辦法解決問題。連為什麼都不問,那真正的問題永遠就埋在那邊不會被解決。

我也在課堂上強調,比起專有名詞、軟體操作,最重要的是「思考邏輯」。比如「畫 Flow Chart 是為了了解使用者的操作行為」,為什麼會這樣做、做這個是為了什麼。設計是解決問題的方法,但也要解決對問題啊!

最後...

編寫教材花了我非常非常多心力,三天下來簡報檔近 550 頁,另外還有紙本作業。紙本作業的出題我也下了很大苦心,題目修改很多次,若乖乖對照課堂筆記,邊查 Google 邊加入自己的想法做完它,不只吸收課堂上提到的理論,還能內化且靈活運用,也懂了在沒人帶的情況下如何自我學習。

台灣的設計教育沒有教到的部份,不能就這樣放水流吧?這件事總是要有人去做,一般學校家大業大規矩多又硬一時很難變通,那就我來吧。一班 30 人,最少有 25 間公司的設計師成了火種,長久累積是不是業界的設計師們都能清楚專案流程,知道自己在幹嘛、也知道別人在幹嘛了呢?能不能大量減少戰損,加快設計師成長的速度呢?

希望自己的棉薄力量能稍稍推動下台灣的 UI/UX 設計,不管往哪個方向發展,總是個刺激。

課程結束後我很疲倦,同時也很不安自己的觀點和分享出來的部份是否真能幫上大家的忙。學員陸續傳給我的心得就是最大的鼓勵,看到那些好評很高興自己當時有勇氣跳出來開課,對大家真的有幫助太好了。


國泰世華企業行動密碼 APP

$
0
0

國泰世華銀行-企業行動密碼就「功能」面和出發點是個挺不錯的點子,以往企業轉帳很麻煩都要跑銀行,現在透過手機 App 做雙重確認就可以省去跑銀行的時間,在網頁輸入資料、App 確認下就好了。

不過 因為 APP 更新所以要使用者跑銀行換密碼單,超有梗的,這完全修正我以為「App 更新對使用者帶來什麼影響」的視野。

這件事順便引爆我對銀行業的 App UI 不滿...之前就看 國泰世華 ATM 提款機的 UI 很不順眼,對銀行 App 本來也就沒抱太大期待,能用、不常崩潰就好,標準都降到這種程度,沒料到還有親自跑銀行這招。

(以下是個人推論,猜錯很正常。)

Android 和 iOS 長一樣

可參考 GooglePlay 和 App Store 的頁面。

Android
iOS

這款 App 肯定沒有請 UI 設計,所以只有 2 種可能:

1.icon 之類的都 RD 自幹,網路上抓現成改個尺寸。
2.有配合的美工,但也只跟他說「我要一顆齒輪icon、一顆鎖頭 icon...」這種程度,連要多大顆的 icon都沒跟人家說。

那個字距、字級、排版...沒有設計師是肯定的,PM 大概也只扔了規格書出來,沒有 Wireframe 和 Mockup,都是 RD 自幹。

而且是先出了 iOS 版才做 Android 版本,左上角那個 Back 鍵是怎麼回事?

圖形鎖

猜 PM(或某上級) 拿的是 Android,然後某位 RD 用 iOS。在 iPhone 裡塞圖形鎖是件奇怪的事。我能腦補 RD 無奈地說「iPhone 沒人用圖形鎖啦!指紋鎖這功能我幫你加上去...」,所以硬在圖形鎖上蓋了指紋鎖功能。

會議上不聽勸的藉口說詞我都想好了:「iPhone 使用者不用圖形鎖?沒關係啦圖形鎖密碼強度比較高啊!使用者要訓練嘛,就直接這樣做吧。」

我用 iPhone!痛恨圖形鎖,是要畫鍊成陣嗎?

結論

這肯定是 Server 端出了什麼狀況才會搞到使用者親自跑銀行領密碼單重新設定。猜 API 或某 Bug 當時沒想到,導致 APP 要整個砍掉重裝。

我很有種這個專案是硬擠人出來做的感覺,因為功能不多、所以人力少、時程短,測試人員大概就是實作的那幾位。iOS 和 Android 是不同 RD 寫的,看元件對齊方式就會知道。「返回」BTN 是切圖...

這個服務剛上線沒幾個月,出包很正常,但銀行業出包問題都很大條,搞出使用者跑銀行一趟的包...應該被釘得很慘了。文章打完氣也消得差不多,算了...再怎麼不爽這 App 還是得用啊,又不能說不爽不要用。

2015 Mopcon 我想講的題目正好是「使用者要的不是功能」,不過銀行有「在這開戶就是一定要照我們的規則走」的霸王色加持,只能說...有辦法就把自己的服務擴大到像銀行這樣有霸氣吧,當使用者沒得選的時候,搞不搞使用者體驗根本不重要。

(不要跟我說從國泰世華跳去玉山銀行之類的,這不算有得挑好嗎?)

第 4 次香港行

$
0
0

前幾天去了香港,3 天 2 夜的旅行。和前幾次去香港的印象相比,感覺相差非常多。現在的香港給我一種「壓力鍋」的印象。

因為停留時間短,這三天我的活動範圍在尖沙咀到旺角之間,避開港島。2 年前去銅鑼灣剛好遇到週末,整條軒尼詩道塞滿人,SOGO 那邊和台灣 101 跨年人潮一樣擠,嚇得我只能用落荒而逃來形容。這次就不想再靠近人山人海的地方。

假日的彌敦道人潮沒有軒尼詩道可怕,但和幾年前相比整個都變調了。6 年前搭雙層巴士在彌敦道上隨處可見各式各樣的大型招牌,現在只剩下周生生和周大福、及各種賣藥、賣特產、怎麼看都像是中資的紀念品店。

香港其實是很傳統的城市,只要離開彌敦道,往左右兩邊走幾個街區就會感受到完全不同的氛圍,硬要形容的話,有點像是信義區誠品旁小巷鑽進去 1 分鐘,就會變成萬華廣州街,落差極大。但當地居民的生活形態要往巷子裡鑽才感受得到,主要幹道銅臭味越來越嚴重,許多老店一間間死亡,我從旺角沿著彌敦道走到佐敦,大道上的店家只剩連鎖店,害我以為「這條路是姓周的私家路吧」,周生生和周大福是 20 公尺開一間嗎?

該說什麼好...赤化?

香港是個對弱勢族群毫不關心的城市,或者說和中國一樣,做表面。(比較像是心有餘而力不足,泥菩薩。)

無障礙設施?根本障礙超大的。台灣路不平已經夠讓人狂罵了,走過香港人行道地磚後,會覺得台灣路其實鋪得不錯啊~即使下雨天踩到鬆動的會噴髒水。彌敦道算是九龍最主要的幹道之一,兩旁人行道狹窄、地磚凹凸不平,還加上各種鷹架擋道...在台灣低頭族隨處可見,在香港倒沒見過幾次,部份原因是文化習慣不同,但我怎麼覺得主因是低著頭看手機不看路前進的話,會摔死...

最神奇的是,這樣子崎嶇的人行道上有鋪導盲磚喔!商場的樓梯扶手有點字。

混在人群裡等紅燈過馬路時我都會想,香港人走路這麼快(連車都開很快,轉彎很猛),路又這麼爛,誰敢信任導盲磚啊,加上鷹架、路邊攤販、看板、護欄、垃圾桶...到處都是障礙好嗎!連明眼人都覺得不太好走了,要行動不便的人怎麼獨自上街?

(話說,香港的行人大多無視紅綠燈,沒車就闖。馬來西亞是因為道路規劃太差根本沒行人可走的路只能用闖的,香港行人根本把紅綠燈當參考用...超威!)

這次去香港當然見識到中國人的「不文明」與囂張跋扈的一面,但也很意外遇到家教良好的一家中國人。小孩子穿著鞋爬上百貨公司的椅子,媽媽把小孩抱起說:「你穿著鞋踩上來,其他人怎麼坐呢?」並掏出紙擦拭踩過的地方。收入高和教養不是正比,有錢不代表有家教。在機場也看到中國小霸王兇惡大吼:「不準碰!這是我的,說是我的就是我的。」隔了 4 條報到櫃台仍聽得一清二楚。

我不是很確定菲律賓和香港之間的關係,在地鐵上看到幾次像是媽媽+菲傭+小孩的組合。小孩哭鬧耍脾氣當小霸王,媽媽視若無睹像「小孩不是我生的」一樣,全拋給菲傭處理。我想這也是香港會面臨的教育問題,台灣有類似的情況,但大多數是媽媽+爸爸+小孩。小孩一哭鬧就是媽媽的責任,站旁邊的爸爸裝得一副小孩不是我生的樣子。

香港服務生對中國人和台灣人的服務態度落差非常大,他們分得出口音,光看態度也知道旅客打哪來的。在茶餐廳裡、或是商場,我常常偷偷觀察他們接待客人的方式,對於中國人和台灣人根本兩種樣子。

所以我養成一個習慣:踏進店裡,對主動迎上來的服務生微笑。加上點餐或購物時說話客氣點,說「請」、「謝謝」也不是什麼多困難的事,就會看到他們態度大轉變。

有些旅客會抱怨香港服務態度沒有台灣好,除了當地文化外,我會想...是不是旅客對他們的態度冷漠呢?我跑過的店面和餐廳不敢說非常多,但每一次在主動對服務生微笑後,還沒有遇過仍臭著臉靠過來的,就算是繃緊臉的大媽都能感覺得到她們稍微放軟和些了。

香港食物非常好吃,我超喜歡添好運阿鴻小吃,只是點餐時青菜類稀少。(我不承認海鮮上面放的蔥絲叫做有吃菜)日本也是個不容易吃到青菜的國家,所以我老是懷疑這兩邊的人為什麼都不會便秘...日本的便秘藥可是會上女高中生雜誌、寫得好像人人書包裡常備一樣,香港嘛...直到親眼目睹為什麼餐具要自己再洗過一遍,可能拉肚子就夠了不用吃菜了= =

原本我對香港的印象是「好吃、好買、好逛、有幹勁又不失熱情」,但這次去有種「一點一點死掉」的心情。很像是個還沒爆炸的壓力鍋,即使繁華,但看不到未來。尤其站在街口望向天空,只看到兩旁高樓夾縫中一條線的灰藍色(香港空氣比台灣差),會有種被掐住脖子的窒息感。

香港是座我很喜歡的城市,但完全不適合居住,看著香港在短短 6 年間的改變...只能用「今日香港、明日台灣」當作本文的結尾了。

不要用平面設計的思維做 UI

$
0
0

UI 是「使用者介面」,UI 設計指的是「設計使用者介面這回事」。設計介面不是只有出張美美的圖就結束,這樣和平面設計沒有差別,也正是為什麼 RD 會說「你用平面設計的思維在做 UI」。

平面設計和 UI 設計最簡單易懂的差別就是一個會動、另一個不會動。

淡入淡出、往左邊飛、往右邊翻頁之類的動態效果。這就是「會動」了?動態效果不過是平面設計師眼裡的「會動」,和 UI 設計師、RD 眼裡的「會動」完全是兩回事,UI 設計的「會動」特指「行為」,包含使用者的行為、介面的行為、系統的行為

舉例

同樣的一項產品,目標族群不同,產品外觀也會不同;拿給不同的人使用,也會得到不同的結果。甚至連任務目標(使用者想透過產品完成什麼事)都會不一樣。

比如這款給嬰幼兒訓練抓握力、色彩、形狀、推理能力用的積木。


(圖片出處

到了這部電影裡,積木變成「證明喪屍有基本推理思考能力的手段」,而不是訓練他的道具。


(取自電影 惡靈古堡3:大滅絕)

即使行為相同,使用情境完全不同,操作的目的或動機也完全不一樣。

別忘了下一秒積木就被嘗試錯誤的喪屍給拆了,所以設計給喪屍用和給嬰兒用的是不是應該要不太一樣?起碼要堅固一點吧...

(以上來亂的請不要認真,我一直覺得這幕非常有喜感...)

使用者的行為

使用者是誰?會怎麼操作?在什麼情境下操作?操作的任務與目的?

不同使用者有不同的操作習慣、不同的情境、基於不同的動機下進行相似的產品操作步驟,所以在設計一款產品前,UI 設計師會先搞懂目標族群。這一點在許多平面設計師上也能看到他們會進行類似的詢問...宣傳嬰幼兒產品的海報總不能和賣運動用品的 DM 用同樣顏色吧。

但平面設計師不太會去考慮「使用者怎麼操作」這個問題,他們的平面成品在大部份情況下也不太會被操作,所以在成品上只看得到「視覺設計」。

「為什麼 App 上要放 6pt 的中文字?」
「因為畫面這樣看起來比較精緻啊~」

若使用者是老年人呢?使用者在什麼情況下會使用這款 App ?如果是公車或捷運上會晃動的地點呢?平面設計師不會考慮到使用者怎麼操作,他們理解需配合目標族群不同改變設計,但不太理解情境、操作的任務指的是什麼。(或者是他們理解,但覺得美美的畫面比使用者好不好用更重要。)

同樣都是計算機,一般人買賣東西算價錢、和工程型,兩者會相同嗎?就算是望遠鏡,也分成看星星、打鳥、偷窺之類很多方向啊。

介面的行為

引導使用者操作並完成任務的手段

介面常常和互動相提併論,使用者會透過操作介面、依據介面的引導完成任務。滑鼠移上去要變色、動態效果、進度條、Alert 等等,都屬於介面的行為。

平面設計不會有滑鼠移上去跳選單出來,或是操作錯誤冒出提示訊息,更不會有下載檔案的情況。所以他們很習慣無視「提示使用者」、「引導操作」這兩大介面設計的重點。

介面除了互動之外,還包含「資訊架構」,也就是分類、標籤、導覽、搜尋。這 4 項在視覺設計上佔的比例不大,吃的是使用者的思考邏輯:使用者要透過什麼方式找到他想要的資訊?資訊架構在整理內容(圖文影音),用使用者能理解的思考邏輯把內容組織化。

不管是 App 或是 Web,表皮上構成的元素就是影音、圖片、文字等內容,視覺設計往往只考慮這些元素的排版、呈現樣式。所以就變成公家機關網站...該有的都有,但永遠找不到目標物。假如「那層皮」經過設計長的美美的,但內容沒有整理過,使用者還是大海撈針,猜不透啊猜不透。

要如何在短時間內引導使用者取得他想要的內容是介面設計思考的重點,絕對不是那層皮畫得美不美。

許多設計師抱持舊有習慣,無視資訊架構的存在,認為這是 RD 或 PM 的工作範圍與自己無關,設計師只要產出美美的圖、顧好視覺設計就好,其他如專案流程或 RD 辦不辦得到能不能實現這個設計的可行性管它去死。

系統的行為

程式與資料的運作邏輯

區分平面設計師和 UI 設計師最簡單的方法就是問「資料怎麼來?

我超愛問這個問題,呆在現場的不知道怎麼回答的還有意識到自己在做 UI,會翻白眼的都是半途轉行跑去做 UI 又不太想學的資深設計師(或是狀況外的菜鳥),他們不覺得「資料」在自己要考量的工作範圍內,非常大氣地無視「資訊架構」的存在。(這裡的資深指的不是能力,只是在這行「坐」得比較久。)

以目前台灣的介面設計非常狹隘地限定在 App 和 Web 上,這兩者常常需要和工程師合作,就得考慮資料來源的問題。平面設計不需要接觸資訊架構,如果保留這種思維到 UI 設計上,被問到「資料怎麼來?」就翻白眼心裡 OS 關我屁事也是很正常的心態。

為什麼 UI 設計師需要知道資料來源?舉個簡單的例子...

使用者行為:逛網拍打發時間。
介面行為:顯示商品列表。
系統行為:抓取商品資料。

使用者做了某項操作但 App 沒有任何反應,會不會覺得 App 壞了?假如資料非內建需要從網路下載,從網路抓取資料的同時需不需要提示使用者「系統現在正在執行某事」?提示使用者 App 正常運作中,只是動作比較慢。

那 UI 設計師是不是需要知道圖片是內建還是從網路抓取?假如 icon 是內建的、商品圖片要透過網路下載,商品圖片讀取中的狀態是不是要跟使用者講一聲免得他以為壞了?

舉個更簡單的例子...

在 iPhone App 使用「華康少女體」。

UI 設計師第一個要考慮的問題:為什麼要用華康少女體?
第二個該思考的就是系統行為:iOS 內建華康少女體嗎?

當設計師(或 PM、Planner)不管資料來源系統行為功能可行性什麼的,「我覺得這樣比較好看啊」、「這樣畫面比較美」就變成 RD 爆青筋的那根稻草。

不要用平面設計的思維在做 UI 好嗎?

設計是解決問題的方法

$
0
0

至少 10 個人轉了這篇文 設計一定要解決問題嗎?給我,問我的看法如何。該文傳達 2 個概念:「設計一定要解決問題嗎?」、「設計的目的」。

就我自己的角度,設計是解決問題的方法這點始終不變。但要看解決的是什麼問題,也就是「為什麼你會這樣做」。

設計是解決問題的方法,不代表設計只能解決一個問題,或是只考量一個問題。就是挖地瓜和拔蘿蔔的差異。

Donald Arthur Norman 在設計的心理學 P.44 中舉過例子:要把手放進髒水裡才能排水的洗手臺。設計有可能解決一個問題,但產生另一個問題。(ex 卡式台胞證,比起紙本可以快速通關,但產生個人隱私權的問題等等。)

設計一定要解決什麼問題嗎?我認為這句話背後的含意是「你這樣做是為了什麼?」「你考慮了哪些因素?」「基於什麼原因影響你做出這樣子的設計?」

解決問題並不是我要 A 所以你做了 A 給我,我要 B 所以你給我 B,而是要挖掘他為什麼需要 A。和挖地瓜一樣,挖出一個,但底下還有一串;不是一個蘿蔔一個坑,拔完一個就結案。

要 A 給 A、要 B 給 B,就會變成公家機關的網頁:對啊什麼資訊功能都有,但難用死了。

A 我需要一個網站放資料。
(做了網站)
B 這個不是我想要的。
(改了版面)
C 這也不是我想要的啊!
(版面又改)
.
.
.

相信很多人對上述對話非常眼熟,只針對表面問題沒去探討為什麼會有這樣的需求,就會變成改不完的輪迴。設計是解決問題的方法,也要先找對問題啊!

為什麼需要一個網站放資料?展示給客戶看的官網?內部用的倉儲系統?

放什麼資料?目的是什麼?使用者是誰?什麼情況下會用到這些資料?比起「我需要一個網站放資料」,這句話背後的問題才是真正的問題。

「你想要解決什麼問題呢?」這句話真正的含意不是問「解決放資料用的網站了沒」,而是詢問你對這個題目進行多少研究、考慮哪些方向、特化什麼目標而引導出目前的成品。

有些設計像是照著用戶研究結果、設計規範一板一眼刻劃出來的,這種設計的特徵就是充斥著大量的「因為…所以…」

只有一個「因為」而產出的「所以」,我會當成是拔蘿蔔。個人認為理想的挖地瓜情況是「因為 A、B 的關係,加上C、D 的限制,基於 E、F 的考量,所以我們這樣做」。做產品不只有使用者單一因素,還得考慮商業(市場)、技術(實作)、公司(資源)等等非常複雜。

每多考量一個因素,就會發現這個因素背後隱藏著非常多的問題和原因,不可能有完美的作法解決所有需求,只能盡可能滿足。

只針對人們現狀的需求來設計是有其風險的,就像是用科技、用設計把人類給豢養起來,餓了就餵食、累了就給睡,所產生的結果或許以下看見端倪:

人們喜歡腥羶色的資訊,那我們就給他聳動、淺薄不需要思考的新聞。
人們喜歡吃味道鮮明、口味刺激的食物,那我們就給他很多調味料的餐點。
人們喜歡炫耀展現自己,那我們就給他很多很多的分享功能。

看到這樣子的需求第一句個浮現的字眼應該是「為什麼」。

為什麼人們喜歡腥羶色的資訊?為什麼人們喜歡吃味道鮮明、口味刺激的食物?為什麼人們喜歡炫耀展現自己?

之後還要問:

  • 給他聳動、淺薄不需要思考的新聞就能滿足人們的需求了嗎?為什麼做出這種選擇?有什麼考量或限制嗎?

  • 人們喜歡吃味道鮮明、口味刺激的食物的原因是不是外食口味太重味覺損壞?所以加重口味比較好還是反過來走健康路線?

  • 炫耀展現自己的原因有沒有可能是希望自己被注意被認同?分享功能可以讓人們獲得認同感嗎?

為什麼是 A?為什麼是 B?為什麼是 C?為什麼是 D?設計就是從一堆的「為什麼」之間慢慢建構起雛型。即使想到一個問題的解答,還要反套回其他問題去想適不適合。每當考慮了一個「為什麼」,就多一個限制,範圍和方向會因為思考的問題越多越明確。

而這次 Open HCI 中,我所害怕的是學員們會受到問題導向的思維影響,認為設計就是要從了解使用者、了解場域脈絡以後,找到一個值得解決的問題,給出一個優雅的解決方案,而忽略了其他可能性。

我不完全認同這句話,問題永遠不會只有一個,像是挖不完的地瓜一樣,值得解決的「一個問題」背後可能要考慮成千上百個因素或限制才有辦法得出一個優雅的解決方案。這個解決方案也不可能是完美的,肯定也有其他可能性,但其他可能性是否為更好的解決之道也很難說。

但就以當下在思考解決之道的人而言,這可能已經是他能想到最完美作法了。當他好好地思考後,被問起「你想要解決什麼問題呢?」就會用各種角度去闡述「為什麼他會這樣做」、「這樣做的原因是什麼」。

設計是解決問題的方法,不是「解決一個問題」的方法。

PS. 當考量越多問題和可能性,最後得出來的答案就越難被推翻,都已經花時間心力深入了解了不是嗎?在對方沒有時間經過完整且邏輯順暢的嚴謹思考時,被推翻的可能性只剩 2 個:

  1. 對方段數太高,自己真的有考慮不週的地方。
  2. 「因為我喜歡。」

Daily UI,100天的挑戰

$
0
0

應該是從這位設計師開始的,他很努力地做了 100 Days UI的網站。挑戰連續 100 天的 UI 設計,圖面水準品質都很高。於是有了 Daily UI的網站。

How It Works:

  1. Every day we'll send you an element to design (except the weekends since you should go enjoy the outdoors)

  2. Some prompts are intentionally high-level, so it's up to you to interpret how to design it (i.e. mobile vs web, full page vs one component, etc)

  3. Post your work to Dribbble (if you're a member) or Twitter with #dailyui and your prompt number (ex. "Just finished my first design for #dailyui #001")

  4. Provide feedback to others who are doing the challenge

  5. Become a better designer over the course of only 100 days

參加說明

簡單來說,就是打開 Daily UI,輸入自己的 email,和訂電子報很像。之後就會一天收到一個題目,跟著題目做 UI 設計並發佈在網路上。

如果你有 Dribbble帳號,記得加上 #dailyui 。不然就 PO 在 Twitter上,記得也要加 #dailyui 。

連續畫個100天的UI,想不成長都很難吧。不用太在意自己的作品醜不醜,重要的是自己努力了 100 天,成長幅度肯定驚人啊~

PS.他們的「一天」不是台灣時間,所以收到題目的時候都不是半夜 00:00。

題目

你會收到長這樣的 mail,一天一封,照題目做就是了。

開始挑戰了...要持續不斷 100 天很辛苦啊@@

Viewing all 448 articles
Browse latest View live