Archive for the 'Design' category

EZTABLE x Share Shopping

十一月 07 2012 Published by under Design, EZ心情, 經營兩三事

聚餐,是為了與好友家人共享溫馨動人的時光。

訂位,是幫助我們優先保留這一刻,且期待這一刻的到來。

餐券,則是讓我們更經濟實惠的享受這一刻。

EZTABLE  與 Share Shopping 的完美結合剛好滿足上述三項需求。

EZTABLE

EZTABLE 上可以找到各式各樣琳琅滿目的優質餐廳,無論是全國五星級大飯店浪漫氣氛首選餐廳商務聚餐專屬包廂餐廳,在 EZTABLE 上都找的到!

若現在還 no idea 要挑哪一間餐廳,沒關係!可以根據以前訂過位的人留下的評價或是餐廳的三大分數(氣氛,環境,食物)幫助我們找到心目中的優質好餐廳,EZTABLE 每週也會請饕客更新推薦餐廳列表讓我們挑選,絕對不會讓情人朋友對我們挑選的餐廳感到失望的!既能保住面子又能品嘗美食,何樂而不為呢  😮

訂位結束後 EZTABLE 還提供我們各種工具快速的通知朋友,大家都愛用 FACEBOOK? 這裡有 FACEBOOK 通知朋友,朋友沒 FACEBOOK 帳號?沒關係,我們可以用簡訊通知,電信費用 EZTABLE 自行吸收。人在國外收簡訊不方便?那我們還有 email 通知朋友,隨時隨地讓你發美美的邀請函給一起吃飯的朋友 🙂

挑優質餐廳訂位,通知朋友吃飯,都做完了,突然覺得,哎呀!這家餐廳太高檔了,價位有點高 😯 。此時該怎麼辦呢?

Share Shopping

根據精密數學推演的演算法以及業務們積極向餐廳爭取的獨特優惠,我們可以在通知朋友後看到最適合這次聚餐使用的優惠方案,隨手揀一個餐券馬上幫你 keep 住皮包厚度,省下的錢與心愛的另一半看場電影都還嫌多呢!

若對推薦的優惠方案不滿意,或是在好友生日時不知道該送什麼?我們可以到 Share Shopping 上挑選近 80 間優質餐廳的專屬優惠餐券

挑選餐券的途中還可以看看這家餐廳好不好吃,吃過的人都留了什麼評價?有沒有相關食記?

取得優質餐券後除了跟  EZTABLE 一樣可以通知朋友你得到了這些餐券讓他們聞香,還可以直接去 EZTABLE 訂位餐廳,事先預約好下一次的歡樂聚餐時光 😀  (當然你也可以跟我一樣先幫朋友訂好位,再去購買優惠餐券當做生日禮物送給他XD)

這,就是 EZTABLEShare Shopping 的完美結合,希望大家都會喜歡 🙂

想收到 EZTABLE 各式各樣的餐廳消息以及Share Shopping 最新優惠訊息嗎?又或是想知道 EZTABLE 創業的甘苦談?請跟我一起訂閱 EZTABLE idea 🙂

Kai

No responses yet

知道容易,做到很難

十月 08 2012 Published by under Design, Engineering, EZ心情

發產新產品時,趕快做出功能簡單的產品給顧客使用,是網路圈逐漸認同的觀念。簡單的東西容易理解,容易使用,並且容易介紹給朋友用。如果推出後發現,顧客很少使用,還有時間觀察顧客行為,趕快改善功能,或者從顧客身上挖掘新功能。這是發展產品的簡單原則。

發展產品應該遵守簡單原則,實際執行的時候,卻很難做到。以我的經驗來說,我去年跟夥伴創立甲蝦米,在去年五月開始企劃手機訂餐,當時有內用、外帶、外送三種功能,並沒有受到顧客重視。經過半年的時間,才把功能縮減到連鎖速食外送,並且登上App Store排行榜TOP 2,下載量超過十二萬。所以,我在經驗上十分理解簡單原則,非常有立場說,我知道簡單原則。

加入EZTABLE之後,執行長Alex給我一個任務:內容優先的App,結合內容和電子商務。我知道,把一個簡單的工作做到最好,就能帶來價值。於是,我規劃了看封面故事到訂位,或者買餐卷的動線。但是,考慮到目前網站的功能是直接訂位跟買餐卷,我有些猶豫,沒有馬上開始執行。跟夥伴討論之後發現,想直接訂位或買餐卷的人,要從文章內容找餐廳很麻煩。為了方便顧客搜尋餐廳跟買餐卷,我又加了「餐廳排行榜」、「餐卷排行榜」兩條動線如下:

Alex認為,沒有讓他覺得是為了內容設計。聽到他的建議,我立刻發現,我知道簡單原則,我卻忽略簡單原則,還加了兩個新功能進去,為了考慮到更多使用情況。於是,我先放下搜尋餐廳跟找餐卷的功能,重新回到一個問題:為了一個目的找餐廳,最想看到而且最簡單的內容是什麼?選一種,趕快做,給顧客使用,觀察使用狀況,優化使用體驗。

理智知道,不代表在任何情況下都做的到。我上一次花了半年,磨出一個簡單產品。這次企劃內容優先的App,花了一週調整回正確的道路上。唯有不斷做簡單產品,讓自己累積經驗,才有辦法扭轉本能,讓自己本能上就排斥加功能。在沒有明確的反對證據出現前,不要在腦內打轉太久,先做出簡單功能就對了!

歡迎訂閱EZTABLE IDEAS ,每天多一點新鮮貨!

Atwood Liu,
Mobile Development, EZTABLE, Ltd.

Image by Japokskee, CC License

No responses yet

ALL ABOUT EAT – Share Shopping

十月 04 2012 Published by under Design, EZ心情

2012年9月19日對我來說是ㄧ個非常重大的日子,不管是對我自己的人生或是工作都ㄧ樣。

再工作上這ㄧ天到底發生了什麼事呢?當然就是我們EZTABLE團隊辛苦了ㄧ個多月精心打造的Share Shopping 正式上線的日子。

從9月初正式成立FACEBOOK粉絲團開始到正式上線的日子 ,這短短的半個多月已經累積到 2,500多個粉絲,而在開站的第ㄧ天就已經開賣了。(可喜可賀阿!)

我們有個非常好的開始,因為名字是 Share Shopping,名副其實的分享購買,讓使用者可以挑選想去吃的餐廳購買餐券,然後馬上至 EZTABLE易訂網上餐廳訂位分享給好友。而我們的重點也ㄧ直在分享讓使用者瞭解每ㄧ家餐廳的背後的故事和每位去吃過的朋友分享的照片和故事。

整個網站的介面一開始就非常明確簡單,整體說來只有三個重點:選餐券/購買/去訂位去分享

而另ㄧ個重點就是購買/購買流程 簡單方便ㄧ目了然。這一切都是為了確保使用者在購買體驗上方便與快速。

購買完成,馬上可分享好康至您的FACEBOOK塗鴉牆上,點連結也可直接連至EZTALBE訂位。

做網站的目的是給使用者看的,不是只是我們自己設計做開心而沒有人看得懂或是觀感不好,功能再多機制再好沒有人會用那都是失敗的。而設計的目的就是簡潔,簡潔在簡潔。ㄧ些沒有必要的東西都砍掉,注重的只有使用者經驗的感官,這就是我們的目的。希望每ㄧ位進入我們官網挑餐廳的朋友都能有舒服的感覺,就在這感覺中忽然間手抖了ㄧ下多買了幾張餐券多訂了幾餐餐廳準備去吃,這樣大家都會很開心。

而我們MikiQ時尚美味Blog也有介紹很多家不錯的餐廳呦!

歡迎訂閱EZTABLE IDEAS,天天不一樣!

Grace Ku

Web Designer

No responses yet

Facebook App 簡易開發教學

九月 25 2012 Published by under Design, Engineering

有鑒於最近參加了 Facebook Developers World Hack <Taipei>,駭客們的程式馬拉松 party,一個比賽一天八小時內,你或你的團隊能完成什麼作品上台 demo 的活動,我在這場活動裡面學到許多有關 Facebook App 的基本開發應用,特此分享給大家 🙂

要怎麼開始開發 Facebook App 呢?分為以下5步驟。

  1. 註冊成為 Facebook Developer 的一員。
  2. 創立新的 Facebook App。
  3. Setup Facebook App。
  4. 選擇你要開發的 Facebook App 種類。
  5. 去 Canvas URL 查看 Facebook App 吧!

註冊成為 Facebook Developer 的一員

竟然要開發 Facebook App,那當然要先成為超過兩百萬的 Facebook Developer 的一員,我們可以去 Facebook Developers 註冊。註冊時會要求你填入相關資訊,照著表單填就可以了。

創立新的 Facebook App

完成註冊後,右上角應該會出現一個 “Create New App”,點擊它就可以開始創立 Facebook App 囉。

App Name 的長度要介於 3 ~ 32 個字元之間,其中絕對不能出現有關  Facebook 的相關字眼,像下面這張名字就會被判斷 failed。

當你需要使用 Open Graph 的 Action 時,你才需要填入 App Namespace,這邊我們可以先不管他。

Setup Facebook App

創立了新的 Facebook App 後,馬上就會看到一個看似複雜的表單:

Diaplay Name 就是當別人使用這個 App 時,他會看到的名字。Namespace 同上述理由,先不管他。App Domains 就是你自己網站的網址,只有這個 domain 下的網頁 Facebook 才會允許該網頁與 Facebook App 串接,如果是 local 開發可以填 localhost 就好。

Category 就是你這個 App 的類別,填寫正確可以幫助 Facebook 分類你的 App,你總不想做一個親子同樂 App 結果被分類到賭博電玩類別裡面去吧… Hosting URL 與 Sandbox Mode 都使用預設值即可。

選擇你要開發的 Facebook App 種類

填完基本 App 資訊後,下面會有5個類型可供選擇,分別是:

  • 最簡單的使用 Facebook 登入你的網站。
  • 在 Facebook 上的網頁。
  • 手機版網頁。
  • 蘋果的 iOS App。
  • Google Android 的 App。
  • Facebook 粉絲頁。

這邊我們來試試看在 Facebook 上建立起自己的網頁 App 以及讓 user 可以在我們自己的網頁上登入。

Site URL 填寫你自己的 domain, 以後 Facebook 就會允許用戶在這個 domain 上使用你新開的 App 登入了。

Canvas URL 就是你在 Facebook 網站上要呈現的網頁(會以 iFrame 的方式呈現),必須是個資料夾。Secure Canvas URL 我們可以先在 http 的後面加個 s 變成 https 暫時騙過 Facebook 即可。(反正是 local 開發…)

去 Canvas URL 查看 Facebook App 吧

都輸入完成且儲存成功後,回到你的 App 資訊頁面。

 App ID/API Key 以及 App Secret 都是以後你要使用 Facebook API 時重要的密碼,絕對不能洩漏出去。

我們要看的是 Canvas Page:這邊會出現一個 Facebook App 的網址(請原諒後面被我塗掉了),把它複製下來貼到網址列去瀏覽。

 鐺鐺鐺鐺!簡單的 Facebook App 網頁就完成啦!

是不是很簡單呢,快去為自己的網站開一個 Facebook App 吧 🙂

歡迎訂閱 EZTABLE Ideas,讓我們的 idea 與你的 idea 迸發出創意的火花吧!

後記:最近 Facebook App 頻頻改版,導致原本 App domain 上能填的 http://localhost/ 網址都無法用了,已經有許多 developer 向 Facebook 反映這個 Bug, 相信不久就能解決。所以請原諒我中途跑去使用以前開的 App… Orz

Kai

No responses yet

最酷的餐廳頻道頁 幫您挑選最棒的餐廳!

九月 05 2012 Published by under Design, EZ心情, 經營兩三事

index

今天要跟大家介紹一個最酷的餐廳搜尋頁面
EZTABLE 餐廳頻道頁

相信大家常常為了找餐廳而煩惱……
哪間餐廳約會氣氛最浪漫?
哪間飯店談生意一定大成功?
什麼料理爸媽吃了會豎起大拇指?
帶朋友去吃哪家下午茶會讓我有面子?

EZTABLE 幫您解決挑餐廳的問題

EZTABLE頻道頁為您設計了市面上最酷的餐廳分類
讓挑餐廳也是種樂趣!

首先,一進入頻道頁,
瀑布式的頁面讓您輕鬆的瀏覽各間餐廳的簡介及訂位狀況

接著!有趣的來囉~
點選頁面上方 餐廳分類導覽,EZTABLE 瞬間化身為時尚百貨公司

如同大家熟悉的百貨公司,搭配每個樓層獨有的背景,讓挑餐廳也有逛街的感覺!

9F
景觀美饌 – 景觀餐廳:每間百貨公司的頂樓,就是看景觀最優美的地方了!
8F 夜店奢華 – Lounge Bar
:希望用餐氣氛有夜店Fu,就來這一樓啦
7F 新進餐廳 – 哇~又有哪些好餐廳加入EZTABLE呢?來瞧瞧!
6F 優惠推薦 – 生日、信用卡、節日優惠
:所有優惠都整理在這層樓,讓你完全掌握!
5F 傳統經典 – 中式佳餚、台菜海鮮:想吃經典中國菜,就來5F吧
4F 西式浪漫 – 義法料理、美式料理
:wow~這一層好有異國風情喔
3F 東方風情 – 日本料理、南洋料理
:不用出國,道地料理就在這裡!
2F 都會名媛 – 蔬食料理、貴婦下午茶
:姊姊妹妹們最適合來這層樓談天了!
1F 國際精品 – 米其林餐廳、國際餐飲集團:一走進Lobby,全球頂級品牌夾道歡迎!
B1 歡聚同樂 – Buffet、火鍋燒肉
:這層樓最適合一夥人開心聚餐了

你們看!走進B1就有同樂會的歡樂氣氛!

走進8F夜店,連spotlight都有了!是不是很有Fu~~~

除此之外,EZTABLE 還設計了 TOP 10 排行榜 

Top 10 上的所有排行,都是根據訂位筆數,並蒐集每位消費者實際用餐問卷內容統計而成
絕對具有公信力!
不論是哪種用餐目的,利用 Top 10 排行榜,一定可以訂到最適合您的餐廳

還有還有喔~

頻道頁上的每間餐廳,都會提供訂位人次、評論次數、以及用餐滿意度等資訊
而下方顯示為橘色的時段方塊,就是還可以訂位的時間,
輕輕一點,就可以帶您快速完成訂位喔!


除此之外,點擊餐廳照片的部分

就會跳出小視窗,提供您餐廳秘技以及最新活動介紹!

若點選餐廳名稱,則又能直接帶您進入詳盡的餐廳資訊頁面~
是不是太酷!太貼心!太方便啦!!!

以上是針對EZTABLE頻道頁做的簡單入門介紹,
還有很多功能跟驚喜,等著大家探索!
希望你們喜歡!並幫我們

想知道EZTABLE最新的服務‧想分享EZTABLE團隊的創業甘苦談
別忘了訂閱每天出刊的 EZTABLE IDEAS  ( ̄︶ ̄)↗
想馬上訂位的請按
十二廚自助餐廳 - 台北喜來登大飯店 - EZTABLE 24hr 線上訂位

EZTABLE 小特助 – Jolin Hsu

No responses yet

Responsive Web Design

八月 15 2012 Published by under Design, Engineering

responsive layout

自從上次在 WebDev Party閃光洽分享 responsive web design 的一些技巧,我就對 responsive layout 這個主題蠻有興趣的。剛好上禮拜 EZTABLE 讀書會,主題是 responsive layout. 趁著計憶猶新,把幾個重點整理一下。

不同 mobile Strategy 的比較

如果要提供 mobile user 更好的體驗,通常大家會採取的 strategy 包括:

  • responsive web design主要是透過設計師在 CSS 上面下一些功夫,使用包括 fluid grid, media query, flexible image 等工具,讓同一份 HTML 在不同尺寸的 browser 上面,都有適合瀏覽的介面
  • separate mobile site提供不一樣的網址 (e.g. http://www.facebook.com v.s. http://m.facebook.com) 和 HTML
  • native app直接使用 device 原生的語言 (e.g. Object-C for iPhone) 開發原生的應用程式

Responsive web design 的優點:

  • 開發成本較低

    設計師可以針對既有的網頁 & CSS 做一些調整,很快就可以有一個 for mobile 的 version。當然若要調整到有很好的體驗,還是要花一些功夫,不過比起 native app 的開發成本而言,responsive web design 算是一個相對成本較低的 strategy.

  • maintain 成本較低

    雖然看到的介面不同,但在不同 device 上看到的網頁跟一般 PC desktop 上所看到的網頁,其實都是同一份 HTML. 因為只有一份 HTML,所以在 maintain 上會比有二份 HTML 的 seperate mobiel website,或是使用 device 特定語言 (e.g. Object-C, Java) 的 native app 相對容易一些

  • 可同時針對不同尺寸的 device 做處理

    responsive layout 透過使用 CSS3 media query ,可以針對不同尺寸的 device 做一些調整,不管是超寬的螢幕, tablet, smart phone 都可以 support 。

Responsive web design 的缺點:

  • performance

    因為用的是同一份 HTML,所以若是在 mobile 的情境,還是會 download 一些不需要的 resource (HTML, Image, etc) ,這對於原本網路速度就不快的 mobile device 而言是一個多餘的 overhead.

  • 未針對 mobile device 需要的流程做最佳化

    上面有提到 responsive web design 可以同時針對不同尺寸的 device,但 “可以" 不代表是 “最好" 的策略,因為在 mobile device 需要的 content 與流程可能會跟 desktop device 有所不同.

Separate mobile site v.s. Responsive web design

Google 針對 separate mobile site v.s. responsive design 整理了一張很好的比較表

(image via Mobile Websites vs Responsive Design: What’s the right solution for your business? – Google Analytics

整體而言,雖然 responsive layout 的瀏覽經驗可能會比其他 solution 差一些,就投資報酬率來說, responsive layout 其實算是一個相對投入較低,又可以很快有一個初步成果的策略。
所以這邊沒有哪一個一定比哪一個好,若是網站 mobile 的使用人數較多,或對 mobile 體驗的要求較高,可能 native app 或 separate website 會比較適合,但相對的 mobile 使用的人數並不多或要求並不高, responsive web design 就是一個值得考慮的做法。

Responsive web design 所使用的工具

Fluid grid

fluid grid 的概念主要是在 CSS 裡使用 percentage 去做設比較的設定(e.g. width: 60%;),而不使用絕對的像素 (e.g. width: 600px).
像是下面這一小段節自 twitter bootstrap 的 css

[css]
.row-fluid .span6 {
width: 48.93617020799999%; *width: 48.88297871863829%;
}
[/css]

使用 fluid grid, 可以讓頁面在放大或縮小的時候,頁面會做等比例的調整,而不會出現 scroll bar,像是下面這一張 Kayla Knight 在 smash magazine 上的 respponsive layout 教學文章 的示意圖

flexible grid
(image via Responsive Web Design: What It Is and How To Use It)

Flexible image

頁面使用了 fluid grid 之後,頁面的 layout 已經不會有固定的大小,但網頁上使用的圖片若是太大,還是有可能會讓整個 layout 爆掉。
flexible image 的概念是在 image 外面再包一層 div ,這個 div 本身是使用 percentage 去控制大小,並規定 image 的寬度最多不能超過 parent div

[css]
img { max-width: 100%; }
[/css]

不過這個做法基本上還是使用同一張圖,若 size 很大對 mobile 來說還是要 load 很久。所以網路上也有人使用 javascript 的 solution。使用 flexible image 的效果如下圖:

flexible image
(image via Responsive Web Design: What It Is and How To Use It)

Stop auto scaling

通常在 mobile phone 上面的 browser, 為了讓使用者可以看到網頁的全貌,browser 會假裝自己的螢幕寬度比實際上的寬 (e.g. iPhone 會假裝自己的寬度有 980px,), 並且自動幫網頁做 scaling 到螢幕的寬度。但若你的網頁原本就有幫 mobile 做了調整,那你在 meta 加上一個簡單的設定,告訴手機不要不需要自動做這個 auto scaling 的動作. 例如,如果你針對的是 iPhone:

[html]
<meta name="viewport" content="width=device-width; initial-scale=1.0">
[/html]

更多相關的設定可以參考:iPhone 對 viewport 的說明Android 對 webview 的說明

Media query

media query 算是 responsive web design 裡面的重頭戲。在有支援 media query 的瀏覽器中,browser 可以考慮 device 或可視範圍的 size 來 load 不一樣的 CSS. 如下面這一般摘自 twitter bootstrap 的 CSS,只會在寬度 767 px 以下的環境適用:

[css]
@media (max-width: 767px) {
// Show
.visible-phone { display: inherit !important; } // Use inherit to
restore previous behavior
// Hide
.hidden-phone { display: none !important; } // Hide everything else
.hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; }
}
[/css]

media 除了針對寬度,也可以針對高度,color, aspect-ratio, orientation 去做判斷,詳情可以參考mozilla 的文件

對 media query 有興趣的人,也可以在 mediaqueri.es 這個網站 看到更多 media query 實際 run 起來的 sample.

Reference

Summary

Responsive web design 並不見得適用於所有的網站,但考慮其開發的成本較低、maintain 的成本較低、及適用於不同尺寸 device 的優點,對 mobile 體驗的要求並沒有那麼高的網站而言, responsive layout 仍不失為一個投資報酬率蠻划算的策略。事實上,就算是只有針對 desktop 的網站,因為現在螢幕解析度也有很多不同的 size ,responsive web design 仍然是一個值得一學的技能。

(image via Alvaro Rubioc, CC license)
brooky
EZTABLE Co-Founder & CTO
2012年 08月 14 日

No responses yet

最近所看到網路設計的變化

八月 05 2012 Published by under Design

當我敲擊鍵盤左思右想時,看到Peter Atkins所分享的丹佐華盛頓在2011年為賓州大學畢業生演講時引用曼德拉:「如果安於現狀生命就會失去應有的熱情」,是的,『熱情』是讓我轉向網頁UI/UX設計的動力,儘管對曾是廣告設計師來說不是條好走的路,充滿着許多無限阻礙的困難,需要一直不斷學習實驗像爬樓梯般一步步地向上爬,當技術長Brooky Yen這樣說:「妳可以把 EZTABLE 當做妳的實驗場」,感謝神,我有機會加入EZTABLE。『如果安於現狀生命就會失去應有的熱情』,成為我第一篇Ideas的引言,好吧!就來寫寫我最近所看到網路設計的變化,題外話內容如果沈悶!敝人也曾寫到睡著,還請多多見諒。

曾在2010年某一論壇看到當時探討網路設計趨勢,開頭寫道:純粹主義者會說,偉大的設計是永恆的。是的,在一個理想設計中,我們可以忽視趨勢與流行。但是現在已經不是只要我喜歡有什麼不可以的年代,媒介的改變帶動了技術不斷變化,網路像轉輪般不在受美學的驅動,進入只要大家都喜歡有什麼不可以的新紀元。

曾有人統計出網頁設計最普遍的趨勢,現今能有大部份網頁設計以這些為基礎架構:

  • 印刷式設計:許多的靈感來源是來自於印刷式設計,因著印刷可讀性應用於網頁設計也發展出有無襯線字體,在當時一般認為無襯線字體更容易在螢幕上閱讀,但隨著使用者瀏覽解析度提高及字體平滑技術改進,襯線字體可讀性開始大量使用。
  • 大標題:於2009年開始,證明大標題更有吸引力和明晰溝通。
  • 多列佈局:因著網頁是可以動沒有紙張大小限制,使用多列可以在同一空間呈現更多內容。
  • 大幅配圖:因著寬頻的發展進步,一張大圖片能兼具高解析更快吸引使用者注意力,讓使用者一種置身其中的臨場感。
  • 圖表與資訊圖:在印刷設計時圖形一直是用簡化複雜的資訊,以傳達給讀者能迅速明瞭的一種方式,這種簡單而豐富的視覺外觀也受設計師的喜愛。
  • 簡約:克斯定律說,多出的每一個選擇,都需要要增加時間來做決定,簡單的設計更容易使用,資訊也更加明確,到2012多媒介技術精進的今天,確實簡約的設計非常適合在如今多媒介地呈現,因此響應式的網頁設計理論與實驗也更加受到重視。
  • 極簡和網格設計:極簡設計依賴著網格設計,尤其當需要足夠空白時,網格讓極簡有組織和結構,也更能完整控制與維護,響應式的網頁設計理論與實驗也有部分依著這概念繼續發展中。
  • 單頁佈局:顯出最重要的資訊隱藏次要,使用者需要看到點擊就呈現出來,隨着網頁語法的精進,沿用到如今多媒介地呈現,也深受設計師和使用者的愛用,因為方便簡易清晰明瞭。
  • 巨型的留白空間:重要的良好設計,讓眼睛有休息的地方,也更能因著各個欄位的距離,也更容易顯示之間的連續性。
  • 版式佈局:隨著控制和能力進步,印刷樣式的排版成為設計重點。
  • CSS3技術、動畫:簡易網頁設計,但又帶來多元化的呈現。
  • 圓角:2005-2006年因Web2.0而大受歡迎但當時不容易實現,直到css3.0出現解決許多困難。
  • 圖框與文本陰影:一直都是設計失常會使用的設計,早期維護麻煩因著css3.0更增加其它功能,使得設計又帶來另一高峰。
  • RGBa 和半透明、手機相容設計、創新、清新的插畫、紋理背景、縮略圖、水彩效果、手寫、社交媒體、固定元素……等等。

2012現今

隨著網路精進的發展,有越來越多設計師從各種媒體來源來獲取靈感,當人們在Facebook和google花上許多時間,社交媒體整合網站上以更好的用戶,是趨勢也是必然的過程,因此響應式網頁設計也是目前最大最普遍的趨勢發展變化,當然設計仍是不脫離前面所說的基礎架構向上建造。

待續……

參考圖片來源:webdesignerdepot.com  &  topit.me

題外話在2012年的今天社交媒體使用率的爆炸性增長證明,人們對連結和共用東西總是熱情有加,到處瀏覽和分享他人的作品趨勢也日益增多,因著感受到別人的創造力的衝擊,不僅提高了設計品質,還鼓勵共用精神,一種CC創新文化理念因應而生。

No responses yet

EZTABLE 需要願意用寫 codes 來改變世界的實習生

EZTABLE Office

EZTABLE 的實習生計畫從 2011 春季開始以來,每次都受到學生們很大的迴響
今年暑假也不例外,我們到目前為止已經接受來自 NYU Stern(紐約大學史登商學院)、紐約州雪城大學的資訊管理系、以及法國里昂理工大學的法國學生。
但做為一個頗具競爭力的網路公司,我還是感到很可惜。因為沒有熱情的實習工程師和設計師。

在台灣,因為過去30年製造業的思維,所以普遍認為寫程師是 RD,關在實驗室裡聽 PM 指令。設計師就是美工,也是聽 PM 指令,畫畫圖,寫寫 POP。
這也難怪,因為製造業製造出來的東西多半不是自己的,是國外品牌如 APPLE、HP 的,所以台灣工程師和設計師的辛苦結晶,也無法直接聯繫到完成作品、推到市場的成就感。

但是這局面已經改變了。網路業 != 製造業。有在 follow 矽谷網路公司,或看過 Facebook 電影 “社群網戰” 的就會知道,對一個工程師和設計師來說,

寫 Codes 是為了能親自創造一個消費者產品,並且再親自嘗試著把它推銷出去,讓消費者願意使用它,批評它,甚至掏錢買它。

我過去半年常受邀到全台各大專院校去演講,面對眾多資工資管的學生們,最常問的問題會是
“ Alex,我程式其實寫得不好,也沒有什麼興趣。我想做業務或其它,你們有沒有缺?”
我現在聽到這種問題都是一聲長嘆和無奈。
長嘆的是,
如果你不喜歡寫程式,那當初幹麻念資工資管? 如果念了才知道不喜歡,那為什麼不鼓起勇氣轉系,學點別的? 這基本上就告訴我你是一個懼怕改變的人。
無奈的是,
如果你還是想念資工資管,就請把程式寫好。沒有邏輯叫做,我要念資工資管,但我程式寫得不好這種事。寫不好,就訓練自己把它寫好。

為什麼?因為寫程式,在現在的網路業,你可以隻手遮天,做一個產品,有機會改變世界消費者。

如果你想寫程式,又想好好利用實作經驗把程式底子練好,歡迎來申請 EZTABLE 今年實習計畫的最後兩個名額,跟台灣數一數二頂尖的團隊。和來自世界各地的實習生,一起過一個有意義的 2012 年暑假。
請將你的作品 (一定要有作品,管它好不好看好不好用,但至少代表你從頭到尾做過一件事,沒有放棄),跟你想要來 EZTABLE 的原因寄到 career@eztable.com.tw。
只要你想用程式設計改變世界,EZTABLE 全部都歡迎,來10個,我們就做10個人可以做的偉大產品,來100個,我們就做100個人可以做的偉大產品!

Alex Chen
Co-Founder & CEO, EZTABLE Ltd.

關於 EZTABLE,你可以從這得到很多資訊

No responses yet

為404 Not Found穿上新衣吧! (一)

五月 17 2012 Published by under Design, Engineering, EZ心情

customized not found page

你一定有過這種討厭經驗,當網站逛的正high的時候,突然! Oops! 404 not found!  (例如這個連結: EZTABLE 404 not found page)

如果你是尊貴的使用者大人,這時你會怎麼想呢? (我心中只會有一個字…XD) 大部分人應該會選擇:

  1. 按上一頁
  2. email給站長回報bug
  3. 關掉!

選(1)的話還好,起碼這位大人願意繼續使用你的網站;選(2)的話我會跟你下跪,真是灰常感謝你回報這個錯誤給我!(T^T);但我想大多數人會選澤(3),要是你跟我一樣,是一位網站設計師,無形之中,你可能損失了成千上百萬個潛在user你都不知道!

所以今天,就讓我們來聊聊如何設計一個有趣的404 not found Page 吧!

探討出現 404 Not Found Page 的原因
  • 連結設錯
  • DNS設定錯誤
  • 伺服器無法正常提供訊息
  • 伺服器無回應
  • 找無伺服器
  • 不明原因 (沒錯! 有時候真的是不明原因,過一會兒就好了…)

除了最後一個外,上述幾點其實是都可以避免的,只要用謹慎的態度去架構網站以及有良好的QA系統檢查錯誤,所以架構網站真的不能馬虎啊!

設計 404 Not Found Page 的幾個重點

  • 要清楚地告訴使用者他們正處在一個錯誤的頁面
  • 能夠幫助他們回到上一頁或是正確網址的按鈕
  • 提供一個方式讓他們可以與你(網站的建立者)聯絡
  • 不要讓他們感到不愉快

 

有趣的 404 Not Found Page 設計範例
404 not found
可愛的兩隻小鳥在對談,但我個人認為這個設計沒有清楚的讓user知道這是個錯誤頁面。
 
404
稍微裝潢過的 404 page。
 
404 GOOD
404
上面兩張都是正統派作法,設計404 page的重點都有做到,一開始設計404 頁面時可以參考這類型設計 🙂
 
404
超帥的BLIZZARD 404 not found page, 恭喜! 你把網頁弄掛了XDDD (或說是被Diablo大魔王弄掛了…)
 
404
超可愛的小狗,雖然網站發生錯誤,但看到小狗苦苦哀求的眼神說著Sorry,也生不了氣了吧  ˊ_>ˋ
 
404
終於有人發現我做的 404 Not Found Page 了!!! 是有多想我看到錯誤頁面阿XDD
 
404
您要找的頁面被我吃掉了…..淡定
 
404
我們很快就會再見,……誰想見你啊!!
 
404
清楚的告訴你這裡啥都沒有,且有連結讓你回報錯誤,還不錯 🙂
 
在看完這麼多有趣的 404 Not Found Page 設計後,相信你一定很想趕快設計一個頁面且放到你的網站上吧! (然後期待有人去到錯誤頁面)
這可是能大大提升 user experience ,為你的網站加分的喔!

 
 
如何將設計過的 404 Not Found Page 安插在你網站 

這部分比較複雜一點,由於篇幅問題,就讓我們留待下回分曉吧!(被揍飛~)

 

 
以上圖片均來自 Mashable 與我的蒐集,歡迎轉載~
若大家有任何酷炫的 404 Not Found Page idea, 歡迎在此留言或是寄信與我分享唷:  kai@eztable.com.tw
 
 
EZTABLE Software Engineer
 
Kai

No responses yet

為什麼EZTABLE母親節的首頁圖要畫這麼多媽媽?

四月 20 2012 Published by under Design

母親節一向是餐飲界的大事,

這一天為了讓媽媽開心,聚餐挑個讓媽媽滿意開心的餐廳是一定要的。

也因為這樣,這次在設計首頁上也倍感壓力,想說要做怎麼樣的首頁才能夠結合主題,突破框架又吸引目光。

做了一些research後,我不想要做畫可愛的媽媽抱著小朋友,或是畫滿康乃馨,

我覺得為什麼母親節的視覺一定要是這種樣子呢?

找了許多參考圖片尋找靈感。

找好了靈感,於是我決定做一個比較不一樣的事情來打破這個窠臼,

我拍了一張我找到的圖,

在我的facebook上向我的同事朋友們徵求他們媽媽的照片,並附上他們對媽媽的暱稱。

結果沒想到大家都很nice的提供我照片:

接著就是一個一個的,把媽媽的樣子畫下來:

一切的一切,是因為

母親節的重點是媽媽,是每個人都擁有也最獨特的媽媽,所以想要把媽媽的樣子畫下來,

告訴她們:we all love you! 我覺得這樣的感覺比較溫暖,比較真實,

不是一定要像明星母女檔那樣的正妹才能夠傳達完美母女/母子的定義,

那些每個在放學後帶雨傘去接你的母親,手因為下廚而被噴出來的油燙出小水泡的母親,

因為想剁雞肉給你吃而剁到手酸的母親…最平凡,在巷子口就可以遇到的母親,最美麗也最偉大!

我如此設計,希望傳達的就是如此,

每個媽媽在這一天都值得最好的!

(當然,養你這麼多年,他們平常本來就值得很好的XD)

希望當你們看到首頁的這些媽媽,可以想起在你我身邊都會看到的母親們,

這一天,帶媽媽去餐廳好好吃一頓飯,表達你的感謝吧!

最後我要說,親愛的QQ媽,我愛妳!

妳可以上我們的活動頁看有哪些好餐廳,

妳還可以買一顆很棒的蛋糕送給媽媽:)

敬全天下最偉大的媽媽們!(還有願意讓我放上首頁的漂亮媽媽們:))

QQ,EZTABLE首頁設計師

本篇文章同時刊載於設計師個人部落格 – Sketching 365

設計師的粉絲頁 – Sketching 365

No responses yet

« Newer posts Older posts »