EZTABLE IDEAS 是 EZTABLE 成員揮灑熱情和大家分享專業及創意的網誌。 EZTABLE 讓消費者 24 小時都可以在網路訂位全台灣最優質的餐廳,同時提供餐廳經營者 e 化的訂位管理系統 (雲端、iPad、智慧型手機)

【Workshop】Head First Gird System

八月 24 2014 Published by under Design, Engineering

 【Workshop@140815】

Topic: Head First Gird System
Speaker: Candy Chen
slideshare: Head First Gird System

 

 

以往,在做一個 Event ,有Designer、負責實做的 Developer、以及提出 Event 的人 (SMMMC, Social Media, Marketing, Monetization & Communications),三方在合作時,總會發生許多溝通上的問題,導致 Event 進行時,諸多的不順。

 

而今,如果有一個「共通的語言」,便能輕鬆知道對方腦袋裡在思考些什麼。

今天邀請 Candy 介紹共通的語言──Gird System,讓各位 “think",Designer 做些什麼,Frontend 在切版時做些什麼,和SMMMC 在提供內容時要如何與兩位溝通。

 1-IMG_7214

投影片20-1

  • 在做一個 Event 時, Designer 會與 Developer 和 others(ex: SMMMC) 溝通。

 

 

 

 

 

 

 What is Grid and Grid system?

投影片3 投影片4

  •  如果 GOOGLE Grid & Grid system 會得到以上的圖,可是到底什麼是 Grid & Grid system 呢?

 

 

 

 

 

 

Is this a Gird system?

投影片5-01投影片6-01投影片7-01投影片8-02

  • 先想一想,以上四張圖,哪張是 Grid system ?

 

 

 

 

 

 

Ans: 3、4是 Grid system !

 

 

 

 

 

 

投影片9

  • Grid 提供一個視覺上非常和諧的畫面,把複雜簡化,同時 Grid 還可以重複複製套用在不同的情況。
  • Grid system 中文稱為格線系統,除了格子和線以外,還必須要可以歸納出小小的單位-Units (如圖:紫色區塊)。

 

 

 

 

 

 

 Designer 與 Developer 間的溝通問題

 3-IMG_7220投影片10

  • 右圖: 今年 EZTABLE 最佳錯誤示範: 草食肉食企劃。首先針對 Designer 與 Developer 間的溝通做解說。

 

 

 投影片11  投影片12

  • 一般的 Designer 心理想的 Grid 樣子(上圖左),把螢幕分成兩塊,左邊半塊是綠色、右邊是橘色,然後再將產品放上去,中間畫一條線,設定產品高度。
  • 在兩個產品上很符合,但若把這個 Grid 套在三個產品上,便會 GG! 前面提到,Grid 是可以重複複製的,理論上複製到整個頁面都要能符合才行。

 

 

投影片13  投影片14 

  • 而在 Frontend 眼裡,只有所謂的 Div ,沒有所謂的顏色和左右半邊,對它來說綠色橘色都只是一大塊的背景,它看到的只是把產品放上去這件事情。所以對 Frontend 來說,它的 Grid 是一個產品一塊;但一樣的情況,套用在三個產品裡就 GG 了。

 

 

投影片15  投影片25

  • Magic! 用真正的格狀系統便能解決以上問題,我們將可以依照格狀系統,把產品排好放在裡面!

 

 

2-IMG_7216

 

 

Grid System 中的四大變數

 投影片17

格狀系統中有四大變數:

  • 1. 總 columns 數
  • 2. 一個 column 的寬度
  • 3. column 和 column 間的間距(空隙)
  • 4. 左有兩邊的寬度

 

 

Grid 帶來的價值 

  • 1. 視覺上的和諧: 不會像上面舉例的,套用在另一種情況時,發生 GG 的情況。
  • 2. 解決多個產品放置的問題: 雖然有時兩個、三個對 Designer、Developer 是件很複雜的事情,但有了格狀系統將能幫你解決兩個、三個、四個、甚至更多個時的問題。
  • 3. 四大變數,套用在 Designer、Developer 的工具上,都是一樣的概念。

 

 

 

Grid 工具

投影片18投影片19

  • For Designer-Photoshop GuideGuide: 提供你調整格狀系統中的四大變數。
  • For Frontend-Susy: 它提供你客製化的 function,讓你產生自己定義的 Grid。
  • 基本上會把總 column 數訂為 12,因為 12 是個 magic number,12= 3*4、2*6,可以符合多個狀況。

小結論: 共通語言是用 Grid 考量時,而不再是用以往的幾 pixel 時,便不會出現往左偏 1pixel、或往右偏 1pixel的問題;也因為共通使用這四大變數,因此 Designer 只要提供 Developer 四個變數,便可以 co-work,解決了 Designer 與 Developer 間的溝通!

 

 

 

 

 

 

Designer 與 SMMMC 思維上鴻溝問題

9-IMG_7250

 接下來解決 Designer 與 SMMMC 思惟上鴻溝的問題

 

 

*Mobile First

Mobile First 是什麼? 

回到一開始,在執行一個手機上的 Event(草食肉食)時,似乎把 Mobile First 當做一個口號,往往最後才被考慮進去,因此發現 user 的瀏覽體驗非常差。

 

 

投影片21-01  投影片22-01

 

舉個誇張的例子:

當身處在 PC 時代時,我們會傾向把使用者的螢幕塞滿各式各樣的食物(資訊),非常的豐富看起來很吸引人(上圖);而當使用手機時,把這些食物放在上面,便會像一團廚餘(上圖右)。

 

mobile 和 PC 的瀏覽體驗非常的不同,Mobile First 策略下,提供內容的人必須換個角度思考: mobile 螢幕如此小,要如何提供使用者豐富的資訊,如何把資訊清楚的排列在上面,而不是想要在一個螢幕下塞滿所有資訊,如下圖。

投影片23

 

 

投影片26

Mobile First 有兩種,一是指我們要做 responsive 的狀況下,依照不同螢幕的大小做調整。
而另一種,是提供額外一個 mobile 專屬的頁面(像 EZTABLE mobile web ),這便是直接客製化成 mobile 可以觀看的頁面只有手機瀏覽時才會出現

 

如果是 Event 的話,會要求手機平板電腦可以看,但要如何解決像草食肉食手機的體驗非常差的狀況呢?

希望大家的思維是由小裝置→大裝置,來提供內容! 你必須先限制框架在小小的螢幕上,而不是天馬行空的將它排在10幾20吋的電腦螢幕,這樣才有辦法提供我們的 mobile user 一個最好的瀏覽體驗!

 

 

投影片27 投影片28

 

投影片29

 

例子: shopping,是我們第一個導入 Grid System,也是第一個做得最好的網頁。第一次做時互相溝通了許久,但花的時間是值得的,最後做出的效果很棒,回應的評價很好!

 

 

 

 

 

 

 

投影片30-01

最後總結,SMMMC 以前可能會覺得說我就提供 content 給你便行,可是在你提供 content 時可能會想說,提供的內容越多越清楚越好,或是越豐富越好,但是還需要把 Portability(攜帶性) 考慮進去,這樣最終才能讓 EZTABLE 成為一個 Mobile First 的公司!

 

 5-IMG_7244

 

 


 

如果您喜歡這篇文章可以點擊「讚」&「分享」
並歡迎訂閱 EZTABLE IDEAS!  😀

如果你是學習力強,而且經驗值高的人才,
歡迎一起加入我們 EZTABLE!! 

104 人力銀行-Visual Designer 視覺設計師

EZTABLE at Linkedin 

 

 


Related Posts Plugin for WordPress, Blogger...

No responses yet

發表迴響