iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0
Modern Web

Daily UI : 開發者版系列 第 2

Vuetify:Preface › ❷ The Important Concepts

今天,就當閒話家常,待我娓娓道來

 
 

UI Framework & Design Spec


Ant Design, Material Design, Human Interface Guidelines, 這幾個名詞或許你都聽過,作為開發者,可能想說這跟設計師比較有關,就忽略了。當然我們不需真的去研讀這些東西的具體內容,但一知半解可能就有機會對開發造成重創,舉例:以實踐 Material Design( 簡稱 MD,下同 ) 的 UI 框架去實作一個非 MD 風格的( 甚至大相徑庭 )UI . . .

我想開工沒多久後,你可能輕則摔得頭破血流,重則天人永隔,若你有這種想法,或做過類似的事,代表你其實並不懂這些 Design Spec 存在意義,至少你沒有 sense。這些 Design Spec 橫空出世幾個最大重點之一為:在抽象層次上定義了可復用、擴充的語言

光這一點,就對設計與開發團隊提供無比巨大的貢獻*:設計與開發討論上有了共通語言( 不論在 Wireframe 還是 Mockup ),而此語言不只能夠被討論,還能被 "實作",例如 Google 就打造了 Material Theme Editor,從開發者的角度來看,它對設計師而言,就如 Vuetify 對我們一樣( 為便於理解,你直接把它當成設計界的 UI 框架也行 )

既然它是種共通的語言,那為何又有其它 Design Spec 的類別呢?就因它是語言,就像「 你好 」實際用中文、日文、英文 . . . 來撰寫,表面格式都不盡相同,但要表達的意思大家都懂:跟某人打招呼;Design Spec 亦存在這種概念,所以說,當你能用這種角度去分析以上的荒謬行為,就知道那就有點像是想辦法用德文拼出中文一樣,這就是為何沒等你開發完,救護車已在外頭等待的原因

此處只是從開發者角度探討這個議題,有時上網補充一些設計知識確實有幫助,但請別走火入魔去鑽研一些對開發者沒太大必要的東西(e.g. 嚴格區分 Spec 和 Guideline 的差異,哪種 Design Spec 比較強 . . . )

*當然這東西不是真理,也不是所有團隊都能善用這個東西,拿著倚天屠龍劍切菜也不少

 
 

Functional Component Composition


以前有經驗的( 並非每個人都這樣 )的前端開發者,拿到 UI 圖,在實際上機刻板前,會先在紙上( 我還看過有人用微軟的 Word 策劃 )構思:「 這東西用 <button>,那邊最外層用 <div>,然後給個 container class,內層用 <main>,這兩個元件看來是得用 Float 才能達到 . . . 」。不懂的人還以為這是在通靈,實際上透過這個方式,效果還真好,尤其筆者好幾年前試過以這種方式跟同事討論後,兩人搞個前端排版 pair programming,開發速度令人驚艷

( 我不清楚上述所說的流程是否有被定義過、有個專有名詞可稱呼 )等到前端漸漸流行組件化後,尤其被現代前端框架的推進,你開始寫起了 Component。依需求,它本身可能包含或沒囊括 html*,依類型,或許可拆成 Container Component 和 Decoration Component**,以下為了簡化,你可暫時把 Decoration Component 等同 Vuetify 的 UI Component( 請點開此連結 )。

現在,想像你拿到了張 UI 圖,這時在紙上構思的方式變成以 UI Component 的語言作定義:「 這是個 v-calendar,滑鼠移至這個圖案上會出現 v-tooltip,按下這個 v-btn 後,會跳出 v-dialog . . . 」,Ok, you got my idea,但這還不是我所謂的 Functional Component Composition,但有了這個基礎之後,在實作 Cinema Application 這個 UI 時,我才比較好解釋它的意義,你才能真正了解它是什麼,並享受它帶來的好處

** 或許你聽過諸如 Decoration Component、Dumb Component、Pure Component . . . 它們不盡相同,但核心概念一致,深入比較已超過本文探討範疇,筆者會於 Blog 另行撰文

*例如 Vue 的 rendless component,在這個檔案裡,你可以不需要寫出任何的標籤,但這有點進階了,非本教學重點


上一篇
Vuetify:Preface › ❶ Read me first
下一篇
Vuetify:Preface › ❸ Why i choose Vuetify
系列文
Daily UI : 開發者版30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言