我的 UI/UX 設計入門方式

自從開了這個 BLOG 後,好多人都問我這些關於 UI/UX 設計的技術是從哪裡學到的。就台灣來講這個領域太新了,剛入行的時候只能夠自學,缺少很多資源,通通靠自己摸索,所以我希望能整理出一套系統性的 UI/UX 教育方式,但這需要花費大量的時間,靠下班後的空檔根本不夠,頂多寫寫 BLOG 讓大家加減看。目前我不想把 UI/UX 硬拆成兩塊,雖說這本來就是兩個不同的領域,但世界上所有的事物都是有關聯的,不能說我只想做這個其他連碰都不碰,很快就會陷入窠臼遇到瓶頸。大概是因為我喜歡規劃分析、但又不想放棄能做漂亮炫圖的機會吧。

初學者的 UI Flow

UI Flow 和 Functional Map 算是最多人容易搞混的兩種圖表吧,Functional Map 主要目的在「將抽象的需求轉變成能被實現的功能」;而 UI Flow 則是「 妥善安排功能與資訊在頁面之間的操作動線 」。兩者很明顯目的不同,所以沒有什麼重工或是很麻煩之類的藉口可以逃避不做。

初學者的 Functional Map

功能規格書、產品規格書、系統分析、需求分析等等,是 PM 或 SA 或其他同事的工作,反正不是 UI 的工作,很多 UI 不願意去接觸這類文件,(就說了字太多圖太少設計人看不下去、有沒有懶人包?)但看不懂這些文件的 UI 絕不能被稱為好 UI…連這個軟體要做什麼都不熟悉、一知半解,要怎麼說服別人設計的介面是適合這套軟體(或網站)的好介面?

Copycat 你好,Copycat 再見
Copycat 你好,Copycat 再見


(圖片取自 http://goo.gl/uyLPR2
本來假日我會把腦漿抽乾、或是很專心做些需要大量時間一氣呵成的工作,BLOG 會懶得寫。不過遇到一隻 Copycat,還是公司創辦人,讓我像吃到玉璽一樣無雙技能連發脾氣暴躁…

我的選色技巧
我的選色技巧


Pochade 我愛用的截色 App

最近在工作上遇到關於配色的大難題…公司 LOGO 是深藍+亮橘,但要做的專案和股市看盤有關,所以要加入紅色和綠色,要求官網、網頁版系統、Desktop App、Mobile App 都要一致性、能讓人一眼就看出來這是該公司的產品,要有企業形象,一定要用上企業色。偏偏扯到「股市看盤」就不會只有兩條線在畫面上跑這麼簡單…

使用者經驗藏寶圖:創建人物
使用者經驗藏寶圖:創建人物


相信各位應該看過前一篇「使用者經驗藏寶圖:敘述故事、找出中心思想 」了,也相信一定有人用鼻孔噴氣:什麼鬼話連篇,拿灰姑娘出來當例子,小孩子玩家家酒。這個階段我就認真寫好了…在「創建人物」這個階段,其實就是研究方法 Persona (人物誌),都把研究方法拿出來講了,夠認真了吧!

Responsive Web 抱怨篇

老實說、自從我一頭栽進 Responsive Web 的世界,又接觸 Bootstrap 後,很久沒去思考「在 Responsive 上我還能玩些什麼花樣」。有人跟我提過 Bootstrap 雖然好用、但也限制許多可能性,所以他們不喜歡。我倒認為它只是項工具、要在網頁上套用它就必須遵循它的規則。

使用者經驗藏寶圖:敘述故事、找出中心思想

1TIugvrwRsKamCovfHyb_uxtreasuremap-2.png
雖說很對不起邀我來參加聚會的主辦單位,但 UI 和 RD 擅長的領域差不多就是聖母峰和馬里亞納海溝的差別。為了不浪費這段人人都在補充新知我卻蹲在旁邊玩保衛蘿蔔2的時間,還是來寫點文章表示我也有努力好了…根據這張藏寶圖的順序,就來談談「敘述故事」、「找出中心思想」。

互動設計概論

什麼是互動設計?

互動設計這個詞這幾年很常見,包山包海感覺上只要是各種媒體上看到會動都可以叫互動設計。有一種說法是「設計出互動產品,提供人類在日常生活或工作中使用」,更詳細的解釋則是「互動設計是人類互動及溝通上的空間」。它是一種以使用者的需求與經驗為出發點,創造出人類與科技的完美連結。 IDEO 創始人在 1984 年的一次設計會議上提出,他剛開始將互動設計命名為「軟面」(Soft Face),但這名字很容易讓人想起當時流行的玩具「椰菜娃娃」,後來將名字改為「Interaction Design」。從 Soft Face 這個最早期的命名方式可以看的互動設計的特性:沒有規則可讓人任意塑造扭曲、是在最表層如臉孔一般的存在。

製作過程:Anna Sui Wallet
製作過程:Anna Sui Wallet


Icon Design:My Wallet 真的讓我拿到 Dribbble 帳號了,為了感謝大家的支持(喂)我把創作過程和思路放出來。簡單來說呢就是硬上、沒什麼華麗麗的技巧,不停加圖層加高光加陰影…畢竟這是我第一顆刻這麼細的擬物風 icon,之前都在接案公司工作、哪來 30hr 的時間慢工出細活。(大概是做習慣 iPhone 和 Android 的 App UI,凡是製圖我都優先考慮向量格式,即使這 icon 不可能上架,我還是做成向量格式,至少邊緣乾淨銳利漂亮。)Dribbble:ANNA SUI wallet

在開發之前:先潑冷水!

這點子太棒了!之前肯定沒人做過,將來一定大賣啊!

你確定嗎?在 App Store 已上架有 n 個各式各樣的應用程式,所想得到的功能應有盡有,為什麼會覺得自己想到的這個點子空前絕後呢?有的 App 後台硬得很,不只有財力雄厚的財團支持,更能在各大媒體上廣告宣傳,擁有專門團隊負責開發改版。同樣的 App 在公司裡的組員合作下絕對比個人單打獨鬥能擁有更多資源,就算賣不好也不是後果自負,薪水一樣領得到。

反應與提示

8.jpg
在易用性原則裡,系統狀態的能見度、辨識而非記憶這兩點與「反應」有關。在操作 App 時,「反應」扮演著重要角色,它有著引導使用者至下一步的功能,幫助使用者理解目前狀況、繼續操作。在 iOS 上,常見的反應有數種:視覺、聽覺、觸覺。點擊某個按鈕,按鈕會變成被擊中凹下去的樣子,輸入正確會聽到叮叮的成功提示音,操作錯誤或失敗手機會震動並聽到嘟嘟的錯誤提示音等等。如果對於 App 的「反應」置之不理,使用者就無法知道自己操作的結果,對於自己的操作產生疑慮、逐漸失去對這個 App 的信賴度。