文、Seal Tseng | 紀錄長達2個月的參賽過程與那些「該」與「不該」 身為UI/UX Designer,我們往往花較多時間在了解用戶需求、使用情境、及測試驗證等偏向理性的設計層面。但轉個彎兒,移動裝置是否能再注入更多個性或藝術元素呢? 今年三星舉辦的「全面屏主題競賽」是個不錯的嘗試。 「全面屏設計」是什麼? 持有三星手機的朋友對Theme Store應該不陌生。例如配合聖誕節,用戶可以下載相關主題至手機,除了桌布外連同內建App Icon也會跟著換上聖誕新裝! 所以「全面屏設計」就是為 SAMSUNG手機介面量身設計的主題風格。 Image from SAMSUNG ThemeStore. 「全面屏設計」是不是 UIDesign? 畢竟是應用在手機上,所以應該是吧? 雖然「用戶體驗」也是評選標準之一,但UI及操作都無須再重新設計,因此整體而言較偏向產品的藝術設計,「主題是否符合市場口味」及「美感創意的運用」才是重點。 競賽時程 比賽時程長達5個月(711月),若不像我很晚才加入,參賽者其實有大把時間可以發揮。繳件分為兩階段: 第一階段提交「主題風格」與40%的實作元件並選出入圍者;第二階段入圍者提交剩餘60%實作元件,動畫(加分題)可自選,並由三星協助切版上架至Theme Store供市場評選。細節可見官網。 藝術設計有SOP嗎? UI/UX Design 有SOP,但藝術設計也有嗎? 回首這兩個月的創作過程,看似若有似無卻仍有跡可循。因此,我嘗試將這些想法的發散與迭代紀錄下來,希望可以提供一些「有用」的 Tips! 研究 第一次參加此類比賽,我先從Theme Store研究架上的設計風格,並拆解元素配置方式,再依據背景 VS 前方元素(App Icon)粗分為以下3種: 1. 真實圖像or幾何抽象背景 + 純色平面化 AppIcon 此類背景圖片多半單純,App Icon則依據背景精簡化,較少多餘細節。 Image from SAMSUNG ThemeStore. 2. 暗色背景 + 霓虹or金屬光暈的高科技感 AppIcon 霓虹光暈的設計風格是移動裝置的好夥伴,因為迷幻神秘的光暈漸層能凸顯高科技產品氛圍。金屬風格主題也被我歸類於此,你可以發現有的主題背景會做成擬真設計,例如金屬滑蓋的樣貌(如右圖)。 Image from SAMSUNG ThemeStore. 3. 主題式/時事風格背景 + AppIcon 此種主題常帶有強烈的個人風格或時事概念(如聖誕節、世界盃足球賽等)。背景與App Icon的前後搭配需注意畫面空間配置: 較為複雜的元素會被放在中上方,下方可能放 Icon的區域會較為簡潔。Icon 則依主題另外客製化。 Image from SAMSUNG ThemeStore. 工具選擇與主題發想 創作工具我選擇熟悉的 Illustrator 為主,Photoshop為輔,並決定以「滑動解鎖動態」做出區隔。因此主題發想優先從「動態行為」為出發點,並受「UI/UX常需要思考使用情境」影響, 展出所謂的故事流~ 發想之1: 關於假髮 (這是一個悲傷的故事) (X) 鎖屏畫面是一個戴著假髮的人,用戶上滑解鎖後他的假髮會被一陣風掀掉(解鎖),但主要畫面就有點想不出比較正面的發展(誤): 得到更多假髮? 追假髮? 買假髮? 瞬間移動到整面牆都是假髮的房間? 本線宣告放棄... 發想之2: 關於貓 (最近跟貓很有緣) (V) 觀察貓,會發現他們真是謎樣的生物: 外表傲驕,但對於毛類線狀物有種莫名的狂熱。因此鎖屏畫面設計為一隻熟睡的貓,用戶向上滑動解鎖時帶出拋毛線球的概念(搭配貓咪從熟睡中醒來的動態),解鎖後切換成貓咪追逐毛線球的畫面。定案! 主題訂好了,然後直接開工嗎? 原以為做個美麗的背景圖,前面再放上App Icon就差不多了嗎? 但仔細想想好像也沒那麼簡單耶~由於是要給「人」使用,我還會思考: 1.前後景的辨識度(前景指的是App Icon,後景就是背景): 先確認背景主題,再設計 Icon ;若你是以 Icon 本身的精緻細節為賣點,那就得反過來思考。Icon 要做成平面化還是3D型態? 有陰影? 有底色? 要不要外框線條? 要不要透明度? 前後景可說相互影響,各種選擇障礙.。 不變的目標是:盡可能讓前後景清楚區隔。 舉例來說,下圖的美術設計很精彩,然到桌面背景時會發現 Icon跟背景混在一起,難以辨識。想像一下用戶要在小螢幕上找App Icon,識別度不好也會影響到使用經驗的。 https://www.pintaram.com/u/sanbam_yel/1819679806629866551_7234827877 2. 使用者認知誤差,App Icon再創? 為符合主題而衍伸的圖標風格,是否符合一般大眾的認知呢? 舉個例子,某位入圍者以「火鍋」作為設計主軸,為配合主題,相機用荷包蛋表示、電話則取形狀相似的蝦子表示。其實我認真覺得蠻有創意的,但是設計成非用戶慣性認知的圖示倒是頗微妙。雖然認知可以透過學習,但設計師仍需取捨! http://shijue.me/community/photo-details/e9cf72044325461eaddc01e203b37fa6_d 成品-「毛線星球喵星人」 雖然我一直極力避免作品太娘(私心想要男女通吃),但在可愛+奇幻+療癒的關鍵字下成品如下(還是好娘喔 = =),可連至Behance看大圖。 https://www.behance.net/gallery/73391289/2018-SAMSUNG-Theme-Style-Design 參賽作品 / 毛線星球喵星人 The Yarn Ball Cat繪圖過程 「毛線星球喵星人」已通過第一階段,目前正進行第二階段複審及上架。前幾周除了補件外,熬夜的時間都花在做動畫上了。所以,接下來要由老司機帶路,直接告訴你那些能預先準備的「該」與「不該」: 1.動畫 (1) Photoshop(之後簡稱Ps) 做出的失真動態 第一個關卡是用Ps做gif檔動畫。做過的朋友一定有產出的動畫色彩不是那麼漂亮(失真)的經驗,原因在於gif僅支援256色且為逐格動畫,色彩過於複雜、漸層色、時間過長的動態都會導致顏色失真。檔案好像也蠻大的。 可明顯發現 gif (左) 相較於 jpg(右)檔色彩失真,漸層不那麼漂亮。失真的狀況在動態會更明顯。 因此建議只做必要的動態元素,時間影格長度也要把關好。且要注意Ps無法做旋轉和縮放,所以別傻傻計畫做出這類動態才發現Ps不支援。簡言之:做最重點的動態,然後精簡流程。(補充: AE也能轉gif,但我這次沒研究)。 (2) 電腦設備升級 如果可以的話 大家都知道要升級電腦,但往往不! 動畫轉檔輸出很花時間,其中還需穿插無數次的動態校正,所以升級電腦可以減少等待時間,在預覽時也較為精確,舊規格的電腦怎麼看都會有明顯的鋸齒狀... 2. 兩岸簡繁體字切換與亂碼 大陸與台灣有字型簡繁體差異,而若Windows不能正確識別原文檔也會造成亂碼。在下載模版時我就發現檔名都是奇怪的亂碼(但我那時沒理),同理,該檔再寄回去也還是亂碼,我就在截止前兩天被要求重製。所以: (1)若需下載模版,務必先將電腦語言設為「中國,簡體」。這樣可以避免下載檔案呈現亂碼的問題 (2)所有檔名及說明文字請繁體轉成簡體,順應對方習慣。(3)部分用詞可能因兩岸翻譯差異而造成誤解。例如Ps「智慧型物件」對岸是翻成「智能對象」,要想一下。 更改語言設定 (左圖) Windows 系統 / (右圖) MacIOS系統 3. 文件超過25MB怎麼辦? 當你嘔心瀝血的作品,就在最後點下送出按鈕時Gmail 顯示: 你的文件超過25MB 寄不出去寄不出去寄不出去啊。 沒錯,超級崩潰的。目前 Gmail 跟 Yahoo 信箱只要超過25MB就寄不出去,但你可以事先申請 QQ信箱(騰訊信箱),基本規格50MB以內可寄,若超過可利用「超大附件功能」寄出。 結語:從這次比賽我獲得什麼? 比賽看似單純,但本紀錄卻涵蓋了事前研究、主題發想、設計思考到規格設備等等。整個過程實際上是藝術創意、視覺設計、與用戶體驗間的拉扯。且入圍作品將在 Theme Store 上架,也就代表設計者最初設定題目時,就得有一定程度的市場考量。 或許,在主題創作上還需靠個人磨練,但這邊先提供具體可供參考的建議: 1. 若有前例可循,先拆解他人作品並從中淬鍊個人風格,也可歸納市場喜好。畢竟是要實際上架,可以先了解大眾喜好。 2. 設計師須盡量理解用戶可能應用的行為與裝置,除了更貼近實際的使用情境外,也可優先將設計概念融入其中。 3. 工欲善其事,必先利其器。好的設備能讓人愉悅地沉浸在設計中。雖然這有點廢話,但真的很重要! 4. 清楚了解需求規格文件,並事先解決亂碼問題、繁簡體轉換及寄件規格, 都能有效溝通節省時間,讓脆弱疲憊的心不再一直受到打擊(誤)!!! 藝術創作的過程需要收與放。天馬行空的確能刺激靈感,而理性的前備作業能幫設計師順利完成專案,減少不必要的時間浪費。 從純平面轉UIUX又回到藝術創作,不難發現某些設計思考已被潛移默化並落實於設計行為中,也是頗有趣的發現。雖然目前還不知道最後決賽結果,但對我而言已經是個很有趣的 Practice! 文章轉載自「Medium」,已取得作者授權同意,原文為:不只是設計 2018 三星全面屏主題設計大賽 痞客邦Blog:http://lccnetvip.pixnet.net/blog FB粉絲團:https://www.facebook.com/lccnetzone 菜鳥救星:https://www.facebook.com/greensn0w
文、Seal Tseng -- 說服客戶與老闆、跟工程師溝通、強化設計概念的有感心理學 -- | 情況 1: 為何要留那麼多空白? 害我還要滾動滑鼠(掀桌) |情況 2: 為什麼不能直接用一頁展現? 把客戶的需求塞滿不就完工啦! (無言) |情況 3: 這種設計好像不錯,但是為什麼要這樣做? (直覺大神告訴我這樣設計,但我說不出來為什麼..) 雖然世界上有許多GUI已經走得又長又遠又厲害,但別以為這種古代人對話不會出現,一直以來我們只是習慣這些GUI被如此呈現,但為何要這樣設計我們卻不一定知道。 由於完形心理學歸納出人類大腦認知之普遍性的規則,因此無論是不是UI/UX設計師都很適合閱讀本篇文章。但還是想特別強調,若任職於傳統科技公司,需要對上說服老闆,需要平行說服(資深)工程師,那請把它收進最愛;而習慣套用設計好的UI套件,但不知道為何這樣設計的IT工程師,也可以透過本文來強化自己的產品說服力。 那就開始吧~(擊掌) ► 推薦課程:工業產品設計師、APP開發設計師、創意視覺設計師 完形心理學,又稱作格式塔(Gestalt)心理學,於二十世紀初由德國心理學家提出 用以說明人類大腦如何解釋肉眼所觀察到的事物,並轉化為我們所認知的物件。它可說是現代認知心理學的基礎,其貫徹的概念就是「整體大於個體的總合 The whole is other than the sum of the parts. Kurt Koffka」。 若深究完整的理論將會使本文變得非常的艱澀,因此筆者直接抽取個人認為與UI設計較為相關的7個原則(如下),並搭配實際案例做說明。有興趣了解全部理論的話可以另外Google。 1.相似性 (Similarity) 我們的大腦會把相似的事物看成一體 如果數個元素具有類似的尺寸、體積、顏色,使用者會自動為它們建立起關聯。這是因為我們的眼睛和大腦較容易將相似的事物組織在一起。如下圖所示,當一連串方塊和一連串的圓形並排時,我們會看成(a)一列方塊和兩列圓形 (b)一排圓形和兩排三角形。 對應用到介面設計上,FB每則文章下方的按鈕圖標(按讚Like / 留言Comment / 分享Share)雖然功能各不相同,但由於它們在視覺上顏色、大小、排列上的相似性,用戶會將它們視認為同一級別的按鈕。設計師如果能善用相似法則,也可藉由外觀的一致性來達到更有效地傳達信息、暗示類似功能和節約頁面空間,從而為用戶提供更好的使用體驗。 在股市分析APP上也很常看見相似色彩的應用:以綠色標示股價上揚,以紅色代表股價下跌。無須多餘的使用說明,僅利用色彩群化讓使用者能迅速進行分類並判讀股市趨勢。 股票先鋒-股市交易軟件 2. 接近性 (Proximity) 我們的大腦會把把靠近的事物看成一體 讓我們先來觀察(a),它是由6條直線均等分布,也因此我們的大腦很容易將六條直線視為一組。但很神奇地,若我們將(1)(2)靠近,(3)(4)靠近,(5)(6)靠近,是不是覺得直線們從一組變為三組呢? 再回過頭對照之前的例子,只因為我們把(c)上下排的距離拉近, (d)左右排的距離拉近,我們會因接近性的影響,而認為(c)圓圈+方塊+圓圈 是一組、(d)三角形+圓圈+三角形是一組。由此可知,當畫面上的物件同時出現相似性接近性時,接近性的影響往往大過於相似性。 在介面設計上,我們不難發現接近性與相似性這個兩種法則常同時出現:以Gmail來說(圖e),大腦應該會因為相似性而將圓形的頭像視為一個群組,將其後的文字描述視為一個群組(圖f),但因為使用了近接概念並隔以適當空白,使得原先不同類型的元素,因為距離接近而讓使用者更易於聯想兩者間的關係,將頭像與後面的文件標題及內容視為一個信件群組(圖g)。 左圖:眼睛看到的 / 中圖:根據相似性我們以為會看到的 / 右圖:經過轉換後大腦看到的 這種作法也常見於線上表格的填寫,我們會把相關的標題、功能、按鈕等排列在一起,或是表單的選項放在鄰近處。這不僅僅是方便使用者操作,更可以明確的告訴使用者:hey~這些功能or選項是互相有關聯性的。 左圖:眼睛看到的 / 右圖:大腦看到的 。圖片來源:https://cssauthor.com/beautiful-free-web-form-psd-templates/ 3.連續性 (Continuity)-我們的大腦會把事物看成連續的形體 如下圖示,我們不會將(a)圖看成兩個相碰的尖角,而是交叉的兩個直線。不會將(b)圖看成兩個相碰的尖角,而是交叉的直線與曲線。同樣地在(c)圖與(d)圖,並不會因為中間有橫切一條直線而阻礙我們辨識它為一條連續的波浪型。 我們以當紅修圖APP「美圖秀秀」來說明連續性在UI設計上的應用。進入美圖秀秀後可見許多不同產品被排列為跳板式(宮格式)導航聚集在中心頁面,若將產品以一頁四個整整齊齊地放置於正中央又無左右滑動提示,使用者很有可能不知道還有其他產品。 於是美圖秀秀將其他頁的產品宮格微露一角,由於連續性的影響,大腦並不會因為宮格被裁切或是只露一部分而阻礙我們辨識它,藉由這樣的設計來觸發使用者往左滑以察看後面產品的動作。 左圖:眼睛看到的 /右圖:大腦看到的 連續性概念的應用也常見於瀑布式網站佈局。即便區塊式的卡片內容因頁面高度被截斷,我們的大腦還是會自動連續其型體並判斷為內容未完而往下瀏覽。 左圖:眼睛看到的 / 右圖:大腦看到的。圖片來源:https://colorlib.com/wp/best-pinterest-style-wordpress-themes/ 4.封閉性 (Closure) 我們的大腦在觀察事物的時候,會將許多個獨立的元素視認為一個完整封閉的圖形。 如下圖所示,我們的眼睛先觀察到一連串的圓點(1),此時大腦開始填補圓點與圓點間的空白(2),最後把它辨識為一個完整的圓(3)。 我們的大腦會自動填補元素和元素間的空白部分,將複雜的元素簡化,儘管中間沒有接續的關係,我們仍然會傾向於看成一個完整的圖形,以節省我們的記憶空並快速辨識物件。而這種視覺特性稱為封閉性。 封閉性其實就是「具體化」的體現。設計師可以利用這個概念去創作貌似殘缺不全的圖形,例如中華電信 IBM的LOGO設計。 介面設計上,雖然Abduzeedo首頁內容之間並沒有明確的界線,但藉由圖片的排列方式和說明文字靠邊線所帶來的穩定感,讓觀看者在大腦中自動形成了某種「網格」- 將頁面內容看成是有規則的區塊,而不是一個混亂的整體。 左圖:眼睛看到的 / 右圖:大腦看到的。圖片來源:http://abduzeedo.com/ 5.圖地原理 (Figure-Ground) 我們的大腦會把圖案視認為圖(前景)與地(後景)的結合 圖形對我們來說有著前景跟背景之分,因為人的知覺具有組織性,會想辦法將視覺對象由背景中獨立出來,這個獨立出來的部分即為「圖」,周圍的部分則是「地」。 據研究發現,通常面積小、水平或垂直、位於下方、單純的形、反覆的、被包圍的、有動感的、對稱的、密度高或有質感者易被視認為圖,且往上突出比往下垂直容易被視認為圖。但很多時後前後景會依照我們所關注的對象不同而有不同的效果。 (a)Martin Newcombe Property Maintenance logo 房屋修繕公司,若以黑色為圖,白色為地,可以清楚辨識為一個修繕的板手。若反之,也可辨識出房屋圖案,這是一個成功結合房屋與修繕得Logo設計。 (b)FedEx 國際知名快遞公司,除了可以看見清楚的FedEx字樣,在Logo中的EX可以看到有個箭頭。 (c)FreemanWhite logo 室內設計公司,Logo就是「F」跟「W」的組合。 而在介面設計上最常使用圖地原理的就是Dialog Box,如(d)圖,我們將背景暗化或是模糊化以突顯前方的「圖」,讓使用者可以專注在對話框的內容上;(e)圖因未淡化背景便可能擾亂使用者的閱讀。而APP中的彈出式廣告也是同樣的道理。 6. 共同命運(Common Fate) 我們的大腦會把動態相近的事物看成一體 共同命運法則與相似性有點類似,只是更強調當某些元素有同速、同方向或是同行為的模式出現時,這些元素較易於被視為一個整體。這個原則常用在動態的呈現上。 Material Design常使用的漂浮按鈕(Floating Action Button)便是共同命運原則的良好示範。Floating Action Button的設計便是為了節省移動裝置的可使用空間,而將多種功能或選項藏在其中,因為類似的動態與設計,且幾乎在同時間點出現,我們的大腦就會判斷這些功能是一個整體。 7. 對稱性(Symmetry) 我們的大腦會把對稱的物體,視為一個整體。 對稱,通常能帶給觀者一種穩定、和諧的感覺。你有發現嗎? 若以接近性來說我們應該會判斷(2)(3)為一組、(4)(5)為一組,但事實上因為對稱性,大腦的判讀卻是(1)(2)為一組、(3)(4)為一組、(5)(6)為一組。 讓我們再以「美圖秀秀」來舉例,早期的版本(左圖)因為子產品並沒有那麼多,因此整齊地排列在畫面中央給人穩定和諧的感覺;然當子產品變多(右圖),便利用畫面的不對稱性給人右邊內容還沒結束的感覺,而刺激向左滑動的行為。 左圖:美圖秀秀較早版本 / 右圖:美圖秀秀目前版本。 很多時候我們運用畫面的對稱性來引導視覺開始與結束的位置。即便是現在很流行的長捲動式網頁也會運用顯著標示或無明顯區塊的header (網站LOGO 或 橫向Navigation)與 Footer(聯絡我們等相關資訊)來告知使用者網頁已經結束。 圖片來源:https://www.capitalnumbers.com/blog/why-you-need-to-switch-to-long-scrolling-site/ 最後 完形心理學概念普遍的存在與應用於各種設計中,大家也不難發現同個設計裡綜合了多種不同的完型概念。本文並不是要教大家如何科學化的分析設計,而是在於理解我們的大腦是如何思考,以及「為什麼」要使用這樣的設計樣式(Design Pattern)。也因為這樣的認知模式存在於每個人的腦中,因此,此理論也很適合設計師優化產品,用來解釋直觀設計或依稀感受卻無法言喻的感性抽象,並以與他人共通並能理解的角度具體地闡述出來,來幫助人們更正確地接收你要傳遞的訊息。 留白不該只是設計的附屬品或毫無根據,可能是利用接近性或對稱性來幫助大腦分群;而填充式的滿版內容無法幫助閱讀,只會加重使用者的認知負荷。希望大家在掌握這些原則後可以有所依據,言之有物,設計有理,讓產品更有感,成為與工程師溝通的橋樑,說服老闆客戶的利器。 文章轉載自「Medium」,已取得作者授權同意,原文為:用「完形心理學」,增加介面設計有感度! 痞客邦Blog:http://lccnetvip.pixnet.net/blog FB粉絲團:https://www.facebook.com/lccnetzone 菜鳥救星:https://www.facebook.com/greensn0w
文、Seal Tseng 從魯班、WIX、到Tailors Brands,淺談人工智慧對設計師的影響 圖片來源:https://kknews.cc/tech/o8yeelq.html 【 我是古Seal,今天要講一位設計師只因為「設計師要失業了?、美工终结者、顫抖吧,人類! 」等文章就把自己嚇得半死的故事!】 (喂) 說真的,去年我常被這種網路標題嚇到然後不爭氣地點進去,而他們講的都是: 阿里巴巴的 AI 設計師「魯班」。 導言 設計導入 AI 已經不是新聞,然究竟 AI 如何協作?而未來它是否將會取代人類設計師? 本文將從「魯班」講起,並搭配兩款AI 設計平台WIX ADI 與 Tailor Brands 的使用心得帶出個人看法。(小提醒: 若已經知道「魯班」的朋友可直接從Wix ADI 看起喔! ) 1. 「魯班」 阿里巴巴近幾年一直不斷嘗試利用 AI 創造出更高的營收,並首先嘗試在 Banner(商品橫圖)上導入 AI 技術,以幫助淘寶店家更精準的定義商品特性以吸引目標消費者。其名為「魯班」的AI 設計師於 2016 雙11期間初試啼聲,創造了1.7億個不同種類的 Banner;又於2017年雙11,每秒做了8000張海報。 而阿里的「消費者事業群資深總監-楊光」提到: 其運作原理是透過「大量數據」 千人千面「算法技術」 機器「深度學習」,最後「輸出設計能力」。 實作流程則為分析大量風格 分類元素 組合元素 美學評估。看完還是一頭霧水對嗎? 給文組生的資訊視覺化流程就是: 圖像截自http://www.eisland.com.tw/Main.php?stat=a_zmRrFtF,文字說明:Seal 有興趣的話,可以連到下面看「魯班」是怎麼做的: https://unwire.hk/2017/11/17/aidesigner/life-tech/ 嗯,對於一個久聞AI大名卻不得其門而入的設計界小魯來說,能抓住的重點就是「輸入」「輸出」「海量數據」「公式」「反饋」「機器學習」QQ。暫且不論質感,光是那誇張的「每秒做8000張海報」就夠吃驚了!!(眼神死) 另一方面,我也會開始想,既然「魯班」還是一般人如我還碰不到的傳奇設計神器,那麼現實生活中是否已有 AI 協作設計的案例呢? 這就來!! 相信部分人可能已經使用過WIX 與 Tailors Brands,這是兩款佛心來著的 SaaS(Software as a Service)設計平台。 2.WixADI WiX 是一家成立於2006的以色列公司,讓用戶免費透過其平台建立網站(以此為主)與APP。使用方式非常簡單,(1)依據產業 (2)挑選並套用相對應的網站Template (3)編輯網站內容 (4)發布網站。 套件( Template ) 質感精美、結合RWD、同步提供PC與移動裝置預覽外,還能依據個人需求深入客製化編輯,或自行加入額外功能如社群網路按鈕、電子商務功能、聯絡表格、電子報及社群論壇等。而且後台操作介面也非常順暢而且好看(?),另有追蹤流量、GA等功能,因此我 個人對其評價很高。 費用:用戶可免費發布網站但會有空間限制,但頁面底部會出現Proudly created withWix.com等字樣,不過別擔心,付費就可以拿掉AD囉! www.wix.com 去年,正巧為了進行個人網站的重建,我又發現多了一個 Wix ADI 選項!! 意即Artificial Design Intelligence/ 人工設計智慧,號稱可在2分鐘內建置一個新網站。 試用 | 需求:製作具有專業感的個人攝影網站,並期望照片能以櫥窗排版呈現 |網站名稱:double exposure G days /重曝好時光 首先,搜尋並登入Wix,登入後會先請用戶選擇網站類型;下一頁則填上該網站的簡單描述,讓ADI篩選適合的樣板。 選擇網站類型 簡短描述你的網站 接著,讓用戶選擇要用哪個方式創建網站。WIX提供兩種方式: 左邊-使用Wix ADI 或 右邊-套用設計樣板(Template),這次我選擇左邊。 Adopt ADI(左) vs Adopt Template(右) 選好後,ADI 詢問我是否需要加入訂閱、預約或是 Blog 功能,隨個人需求勾選即可。最後填上網站名稱:double exposure G days,點擊下一步,Wix ADI 就會根據剛才填入的資料開始設計網站囉!! 訂閱、預約或是Blog功能選擇 為網站取個名吧! 開始生成網站 登愣!! ADI 幫我設計出的網站如下: 首頁調整頁面,可從左列選擇 Main theme (影響整個網站設計) 其他頁的調整頁面,可從左列選擇不同的元件設計模式 (個別頁面設計) 除了文字內容與照片是自己上傳的,其他排版都是ADI設計的! 若不喜歡ADI 幫你組合的樣板,也可以從左列勾選其他喜歡的設計模式。然首頁的Main Theme只是大略的底色+字形組合,要做到更個人化的設計還是得進入個別Section / Page的頁面進行編輯。 下面,則是我套用Template,編輯後做成的個人攝影網站(連結)。 http://tsengseal.wixsite.com/doublexposuregdays 對照 ADI (左圖)與 Template(右圖),你喜歡哪個呢? 其實再看一次ADI的設計也很不錯啊! Adopt ADI(左) vs Adopt Template(右) 心得 | 若不包含自己手動調整的時間,約6個步驟,3分鐘內ADI幫我完成一個網站! |1. 以設計流程來說,ADI 與 Template 最大不同在於它是透過幾個步驟的「條件的篩選」直接幫用戶設計網站,的確縮短許多時間,但得多嘗試幾次不同的條件,才能做出符合預期的網站。 |2. 以成果來說,我比較喜歡套用Template的成果,雖然需要自己花時間挑選可能想要的樣版,但精準度較高。而 Template 給予創意者更多修改彈性,更多設計細節,更能深入地進行客製化。 |此外像我是個容易辭窮的人,因此理想中是做一個「以圖像為主文字不多」的攝影網站。但是ADI 提供給我的比較像是新聞報導式的設計樣版(不符合需求),要填入一堆文字實在苦手,而且不小心刪掉元件又得再重來一次 QQ。 若有興趣可以看其他人的 ADI 試用報告,文中充滿了,呃,抱怨 接下來試用 Logo 設計平台 - Tailor Brands! 3.TailorBrands Tailor Brand 是於 2014 成立於 NY 的 Logo 設計新創。其理念是讓任何人或讓小型企業都能夠以實惠價格,輕鬆獲得屬於自己的品牌 Logo,並且同步完成廣告版面設計、社群媒體行銷設計等等。Tailor Brands 利用機器學習與圖形辨識技術,宣稱可以在短時間創作出成品,讓人怎能不心動? (報導) 費用:用戶完成設計後可免費「下載」,但為一張 220px*220px 的jpg檔;若確定要這款設計,點「Finish」 則會顯示付費方案,細節隨付費價格而不同,但都包含高畫質的原始檔。 www.tailorbrands.com 試用 | 需求:製作一個手作甜點店Logo,傳遞溫暖、歡迎回家的感覺 |名稱:Home*2 Sweets/ 烘烘甜點工作室 首先,搜尋 Tailor Brands進入首頁後,第一步先填上 Logo 名稱,下一頁則簡單描述該 Business。 填上LOGO名稱 簡單描述該Business。 下一步,選擇想要使用的 Logo 設計類型,這邊提供三類:(1)Icon Based / 圖標 (2)Name Based / 只含名稱 (3) 只含首字母縮寫/ Initial Based。因為我的客戶期待Home*2 Sweets 能以手感字體設計,以呼應「吃了他們家的手做甜點,就有種回家的感覺」,所以我選擇以字體做變化的 Name Based。 接下來,畫面會兩兩字體並排,讓用戶篩選想要的字型風格。若喜歡就點選,不喜歡的話下面也有「返回」或「Dislike」選項。 選擇LOGO類型 選擇字體N次,直至下方進度條到100% 最後,當進度條變成100% 時,Tailor Brands 會生成好幾個 Logo 供用戶選擇。此外很酷的是,他們還將 Logo套用在實體掛牌、書本或瓶身等產品圖以供對照,讓用戶看看是否選擇這款 Logo。 Tailor Brands 生成數個 Logo供用戶選擇 我選擇了最喜歡的版本,並進入編輯頁面來更改品牌顏色、字體等等。可能第一次用也還不是很順手,最後我完成了一個離自己理想很遙遠,醜醜的,而且長得很像 Hotel.com 的圖標 XDDD。 選好的 Logo 可以再被編輯、調整 而為了不偏頗,我另外也試用了其他類型的設計方式,產出如下: Icon Based(左圖) ,Name Based (中圖),Initial Based(右圖) 最後,對照使用 Tailor Brands - Name Based 生成的 Logo ,與我自己用 Illustrator 設計的名片,你喜歡哪個呢? Tailor Brands (左圖) VS Illustrator Design(右圖) 心得 | 若不包含調整的時間,從輸入條件、選擇並下載 Logo大約花了4分鐘,然產品遠不如預期。 |目前的 Tailor Brands 提供的設計多為「純粹字體」與「幾何圖形」的組合,用戶還是得多試幾次不同的條件,較有可能產出預期的成果。若想要類似繪圖的手感風格,我認為 Tailor Brand 在這方面的資料庫還稍顯薄弱。 與 Wix ADI相較下,我猜測 Tailor Brands 還在訓練階段,設計數據量也還在擴大中。透過旗下眾多使用者所創造出來的設計成品,Tailor Brands 正同步取得用戶喜好,將「喜歡」或「不喜歡」、「被採用」或「被放棄」等資料反饋,讓他們進一步分析設計與品牌策略領域的現有趨勢。 後來我也請工程師同事試用,在他無痛秒建一個網站後說:「這種設計平台目前做出的產品雖然還不夠完美,但卻很方便呢!」。(驚) 然後我開始腦補,若所有設計都能被標準化、數據化並由AI完成時會是什麼情況呢? 現階段不難發現設計「套路」的確有跡可循: 各種設計的標準化、攝影的三分法與井字構圖、排版的黃金比例、及裝置的功能布局(e.g. 結帳畫面 or 登入畫面等) 在未來都有可能變得非常相像。 我猜測一旦設計能被標準化數據化,那麼也都能進一步被 AI 掌握並加以學習 : 它通過處理數百萬資料(圖片or數據),做快速分析來強化訓練,並從統計學角度為用戶總結哪些樣式的設計更討人喜歡。(所以未來,AI也將會收編UIUX?) 然後我又想到,若AI設計師能提供快速無時差無限次的服務時,還需要人類設計師嗎? 以往我們總覺得機器缺少了點人性,甚至懷疑那「專屬於人類的感性」是否能被機器學習。當然也有人提到人類的「溝通、創意能力」無法被 AI 取代。 我想目前人類設計師必然還佔有一席之地,因為AI要達到完全模仿人類感性的極致目標尚需要一段時間。但我們必須認知,無論在學習或執行上AI的速度根本讓「人」望塵莫及,且當該產業的量化數據累積到一定的成熟度,它的進化速度也勢必超出人的想像! 現在各種設計產業已迅速地導入AI。圖片來源:http://www.eisland.com.tw/Main.php?stat=a_zmRrFtF 科技幫助我們解決問題,卻也開始改變產業結構。 若我們無法抵擋AI ,那該如何因應? 可能是我太過悲觀(?) 人類雖擅長創意與溝通,但我對AI未來能做到的程度卻相對樂觀 (蓋章表示肯定! )。是以這種不安,反倒讓我更積極想去理解這個產業,與一些朋友聊過後有些想法產生: 1.俗話說,知己知彼百戰百勝! 曾聽過有人呼籲設計師「應該學習如何訓練 AI,同時在美學方面做把關」,但該如何訓練?怎麼做?因此還不如直接投身發展 AI 產業的公司吧! (若有機會我也很想,是之後的目標!) 2.以設計展產業論,各領域或多或少皆已受到影響。就平面設計來說,「製作大量 Banner 」需求的出現,是為因應「電商產業」求快速產出與精準上架。然而我相信,在企業形象與氛圍營造的需求下,部分特殊品牌「依然會要求設計的『獨特性』,而不僅是套版的一致效果」。因為我實在難以想像 NIKE 這樣的國際品牌會一直出現類似的設計。 另就UIUX 設計來說,Wix ADI 的出現是否代表 UIUX 導入AI的前奏? 雖然ADI 目前還缺乏「有效溝通」這塊,流程優化與情感面的微互動也還需由人類設計師操刀,但於「初階設計」它已預先為一般用戶解決約75%以上的問題。 因此,設計師還是可以多著墨於美感美學上個人風格之養成與UX Insight。畢竟能讓人印象深刻的設計還是需要觸動人類感性層面的? ( 雖然最終目的應該是要觸動消費者的非理性/購物慾層面? XD)。好吧,期望我不會在不久的將來自打嘴巴!! 目前魯班的 Banner 設計有點扎眼,但我相信它之後會越來越厲害!! ( 這些排版方式有被證實可大幅提升點擊率。) 最後,AI 與人類設計師是何種關係? 我很喜歡某位長輩對於這兩個角色的巧妙解釋:「由於AI 對於一般大眾來說仍難以理解,但我們又必須向大眾獲取資訊以做為機器學習之用。為此,一個好的中介產品(介面)將會是AI與一般大眾重要的溝通橋梁。而能夠設計好介面的,不就是 UIUX 設計師嗎? 」他說。 UIUX Designer 深負重任XDD 面試官的說法稍稍改變我以為的對立問題。無論是哪種設計領域,將AI 視為幫助人類「快速」解決費心耗時的雜事,能讓人專注於解決「真正」問題的助力。理想中,好的產品還是需要由「人」與「機器」攜手並進,才能擴大其價值啊!! 但我依然畏懼這可敬的對手(不能鬆懈 ==+)。 備註與參考資料 相信會有人想試用Wix ADI,但目前在Wix網站有可能找不到入口,不知道Wix 是否因為某些政策將其關閉。文章截圖皆是來自半年前試用ADI留存的網站截圖喔! 文章連結: (1) 2017.4 /【設計師要失業了?】雙 11 期間的 1.7 億個 BANNER,都出自阿里的設計人工智慧「魯班」 (2) 2017.5 /美工终结者「鲁班智能设计平台」是如何工作的? (3) 2017.11 /顫抖吧,人類!人工智慧設計獅已經上崗 再多需求也改不怕 (4)教AI做設計http://www.eisland.com.tw/Main.php?stat=a_zmRrFtF 文章轉載自「Medium」,已取得作者授權同意,原文為:[ 觀點 ] 設計師的焦慮時代: 我們也將被AI 取代了嗎? 痞客邦Blog:http://lccnetvip.pixnet.net/blog FB粉絲團:https://www.facebook.com/lccnetzone 菜鳥救星:https://www.facebook.com/greensn0w
如何利用AI🤖輔助人類發散收斂?
最近看到一則網路迷因:「人類期待AI洗衣掃地,我們就能寫詩畫畫,而現在卻是AI在寫詩畫畫,人類在洗衣掃地」。令人莞爾又諷刺,但這是誤解人類與AI應有的相處模式...
本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策。