這次的的WorkShop是商業化實作坊-UI/UX訓練，主要就是來檢視參賽者的視覺設計、產品的使用者經驗好不好，
請到的是台灣Yahoo的子公司-Oath的老師來和我們講述設計準則以及產品的創意發想＆設計等等...
UI (User Interface - 使用者介面)，與UX(User experience - 使用者經驗) 兩個是大不同的東西！
但常有人把他結合在談論，舉例來講：漂亮的網站不代表使用者在操作這個網站上不會迷路在網站裡，用戶體驗差。
這邊要來談論那天在工作坊所做的筆記，因為我不是這一塊的專業人士，就姑且看看吧
一個好的品牌譬如logo、名字，能讓消費者產生一定的連結性，舉例黃色的M字餐飲品牌是不是就會想起麥當勞、Logo為打勾勾的符號猜一個運動品牌，是不是很快就可以連結到Nike，這就是品牌與消費者的連結性！
在創造一個新的服務時，可以想想要如何把品牌內涵的意義與使用者做一個連結，來講講設計的流程：
這邊主要為發想點子，想幾個能夠表達出品牌的意象、品牌的特性與價值等等進而發想出品牌的關鍵字。
必須要開始收斂核心理念、貫徹想法開始設計「設計準則」並遵守制定的準則。
也就是說發想的點子，剃除掉遠離核心服務的設計想法並開始收斂想法，在還沒畫設計稿前先定下設計的準則，並以後都遵守此項規則來設計。
收集素材、凝聚共識、定義品牌顏色、色彩計畫
這個步驟最重要的是團隊溝通，來討論應用服務的風格走向。
UI介面的制定，分為下面的設計流程，如果是團隊開發遵照下面的流程開發，以工程面來說可以降低很多工程開發的時間！
前提是團隊必須要一起參與討論不論是工程師開發端、設計師設計端等等，有哪些困難處提出來，避免彼此不了解彼此的難處，討論出產品設計的共識。
Storyboard(故事版) → Sketch(草圖) → Wireframe(線框稿) → Mockup(視覺模型) → Prototype(原型開發)
簡略概述各個階段的筆記內容
Storyboard
情境故事法則→ 產品開發中的設計情境，畫出六格情境故事，解說怎樣的狀況、情況下，使用者需要我們的應用服務，並使用的過程，解決了什麼等...這六格故事不必畫得很精緻，只需要畫出代表的感覺就好了。
Sketch
也可以說是草稿→ 快速畫出想法來，其功用是幫助溝通的管道，草稿的要點是釐清界面會如何運作。
所以雖然是快速的畫出但記得基本的架構要畫到。
Wireframe
線框稿→ 將草圖擬真化，主要是看流程的階段和視覺的清晰度，故這個階段先不要加入視覺的元素進去，以免擾亂服務流程思考。
Mockup
視覺的層級→ 這個階段才是加入視覺元素的階段，看整體視覺的設計、圖形、排版等視覺的表現。
Prototype
模擬產品的擬真度→ 做到這個階段的產品視覺擬真度應該有百分之90的樣子了，可以套用至工具藉由模擬工具來模擬出使用者介面的互動，此時重要的元素都必須要置入測試。
在以前還沒接觸過設計開發流程時，以為產品設計很簡單，只是設計師一個人的事情。
後來公司開始開發產品，親身經歷了沒有經過設計開發流程的慘痛開發過程，開發時間變了很久很沒有效率....
慢慢的我和認識的朋友設計師們討論研究，以及和設計師同事開始導入設計開發流程，所有人一起參與討論，在新版產品的開發上有卓越的改善！
在設計階段就可以提出問題，模擬使用者的用法，快速的讓老闆或是上司體驗測試並得到回饋，
也在程式的工程面上，也能提前的得知找尋相關的應用，或是開發不了的、有困難的一起討論早期發現問題點。
推薦一位邦友 Wen Chien朋友寫的系列文（也是朋友啦XD 在Amos老師的Line群認識的）
「學什麼就寫什麼，知道什麼就分享什麼 - 與工程師的協作之路」
推薦的理由是從他寫的系列文可以看到設計師和工程師的協作心路歷程，我們工程師可以作為參考，
有時候不只要追技術，在技術爆發之餘，是否也要學習如何與設計師協作、如何減少開發流程等等的，讓我們工作更有效率！
前端工程師自己也要懂一些設計的流程比較好，在還沒開發前就能了解到預期發生等問題存在。
以上，設計準則記得要維持一致性，其實程式開發準則也是如此，共勉之～
今天先寫到這邊了，下一集來講產品的設計策略與驗證。
希望大家有什麼想知道的內容，歡迎在底下留言讓我知道，感激不盡！
今天寫那麼認真是因為前幾天寫太混了(大誤)
還有一件事就是....
我還沒重構我的code就剩下九天了
一定寫不完的啊....
CssCoke - Amos 老師
- 影片教學組- 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎
- Modern Web- 連續 30 天的超實務網頁設計的垂直置中教學
塔塔默
- Modern Web- 使用 Leaflet 及 Folium 開啟網頁地圖大門
iThome鐵人賽
看影片追技術