使用 Sketch 改善網頁前端與設計的標註與合作方式

Standard

前言

身為一名網站前端工程師,關於「工程師與設計師如何進行合作,進而能完成更好的作品」一直是個讓我感興趣的議題。

當然這個議題範圍相當廣泛,從規格規範、工作流程、彼此的換位思考,到各式能提昇效率的工具等等。

去年認識了幾位網頁設計領域相關的朋友,在工作之餘的分享小聚中,得知「Sketch」這個好用的應用程式,它似乎能改善工程師與設計師合作時遇到的許多痛點。

今年才來介紹 Sketch 是有些 Lag,不過還是紀錄一下我的試用過程吧。


合作時遇到的痛點

由於每間公司的工作流程,以及部門配置都不大一樣,因此每個人在這段合作過程中遇到的痛點也各有不同,就簡單列一些我遇過,以及從其他前端、設計朋友那邊聽過的吧。

  • wireframe -> mockup -> prototype 一套標準,各自解讀。
  • 工程師怎麼都不照 mockup 實做,出來的成果總是歪嘴眼斜。
  • 少了設計眼的工程師,實做時對於色碼與間距總感受不到細微差異。
  • 在工作流程中加入「設計師必須提供 mockup 及 design spec」的流程,但標註每個細項(間距、寬高、色碼等)實在是曠日廢時且無趣的工作。
  • 標註出來的規格表密密麻麻,讓人看到脫窗,很可能還會漏標或是漏看。
  • 設計師缺乏元件化的概念,每一個單元的按鈕都有不知道是不是手誤造成的些微差異,無法重複沿用。
  • 想要針對設計稿進行討論再實做,但不知怎麼進行。
  • 有些公司裡設計師不負責製成網頁,但是 PSD 圖層又亂得毫無章法,要切圖與排成網頁很讓工程師頭痛。
  • 要準備 @2x 跟向量 SVG 切圖相當麻煩。
  • 工程師拿到設計稿進行網頁實作時,PM 也沒提供文案,只能開 PSD 複製文字或是自己打。
  • 需求是個 RWD 網站,但設計稿只做了桌面版的大小,其他規格總是被遺忘,只好自己腦補。
  • 各種腦補。

等各式各樣的問題。


Sketch

嗯,不是那個作 3D 模型的 Google SketchUp,在 Google 搜尋常會誤搜到 SketchUp 的教學,哈哈。

那麼 Sketch 能幫助我們什麼呢?當然,必須先說的是,它並無法解決所有的痛點,有些問題其實不在工具。

Sketch 是一套 Mac Only(Windows 的朋友們抱歉了 :P)的向量 UI mockup 設計工具,比起最常被使用的 Adobe Photoshop 跟 Adobe Illustrator,Sketch 它:

Continue reading

網站前端調校之「禁止轉譯的 CSS」

Standard

網站前端載入校能優化上,可透過 Google PageSpeed Insights 來評估與抓出問題,還會根據待改進項目的多寡及嚴重性給予優化上的分數。

最近在製作公司網站的專案,雖然沒什麼內容,但趁上線前就試著用 PageSpeed Insights 掃了一下。下圖是一開始的情況:

啊,雖然我不是分數控,但顯示紅色驚嘆號好像不大酷。

Continue reading

Fire.app 安裝 extensions 的方法 – 以 compass-rgbapng 為例 (Windows & Mac)

Standard

前陣子購買了 Fire.app 這套加速前端 prototyping 的好工具,也透過它將個人作品集網站的 CSS 改寫成 SCSS 作為練習。

期間因為需要用到 compass-rgbapng 這套 Fire.app/Compass 的 exntension,它可以將 CSS 中 rgba 改為 transparent PNG 來處理,這都是為了 Internet Explorer 啊….

這邊便簡單紀錄一下 Fire.app 安裝 extensions 的方法。

Continue reading

[JavaScript] ASP.NET 的 ImageButton 搭配 jQuery validate submitHandler 事件 submit 時在 IE 無法引發伺服器端事件的問題與解法

Standard

前陣子案子遇到的問題,是一個簡單的表單需求,使用 ASP.NET 作為伺服器端語言,而前端要使用 jQuery validate 做驗證再送出。
在送出前需要再做一些事件,所以使用 jQuery validate submitHandler 事件處理,最後再以 form.submit(); 送出。

code 簡單重現如下:
Continue reading

[Android] 好用的 Chrome 瀏覽器之開發人員工具 – USB 網頁偵錯功能 (Chrome for Android Remote Debugging)

Standard

最近在 Android 上終於推出繁體中文的 Chrome 測試版瀏覽器,除了不支援 Flash 外,其他部分個人認為都比內建或其他 Android 網頁瀏覽器來的好用。不過只支援 Android 4.0 。

其中更包含「開發人員工具」,讓開發手機版網頁的人可以方便地在電腦上用 Developer Tools 來針對手機上的網頁進行除錯。本篇文章就來簡單介紹一下使用方法。

Continue reading

在 IE9 / IE8 中 Flash 的區塊高度未 100% 顯示的問題

Standard

在處理 Flash Event Site 時遇過一個問題,特此紀錄。
於 Chrome 時瀏覽 100% 寬高的 Flash Site 時都很正常,但到了 IE9 / IE8 中測試卻變成下圖這樣,僅有不到一半的區塊大小:

這是一頁 ASP.NET Webform 的頁面,裡面包了 <form id=”form1″ runat=”server”> 標籤,就是這個 form 標籤在 IE9/8 中的高度解釋造成 Flash 區塊高度無法到達 100% 瀏覽器高度。
解決方法如下:

Continue reading

在 IE9 中 ExternalInterface.call 無法作用的解決方法

Standard

由於要在網頁中呼叫 Flash 裡面用 ExternalInterface.addCallback 加入的事件,
除了 HTML 中Flash 物件加入時要設定 id & name,還有 allowScriptAccess params 使其允許、AS 中也要加入 flash.system.Security.allowDomain(sourceDomain) 外,
在不同瀏覽器上也會因為 js 抓取 flash 物件的方式不同而要個別判斷。

Calling a custom FLASH method from IE7 & IE8 – stackOverflow 提供了一個方法,可通用於 IE, Chrome, Firefox:

 function thisMovie(movieName) {
     return document[movieName] || window[movieName];
 }

然後如果要 call Flash 中的 function 的話可以這樣寫:

function callExtFunction(g){
    var flash = thisMovie('flash物件的id&name');
    if (flash) { flash.flashFunction名稱(g); }
}

就醬子。

[Flash][JavaScript] 蓋在 Flash 上面的 DIV 與中文輸入的問題

Standard

好久沒發文了,最近公司的案子都好多又好趕。
這陣子除了在規劃案子、趕案子外,另一方面在自學 ASP.NET MVC 3 並應用在案子上,有什麼心得會再發文的。

 

扯遠了,來記錄一下最近案子遇到要將 Facebook 粉絲專頁按讚的按鈕蓋在 Flash 內容上面的問題與解法。

 

相信很多人都遇過這個問題,我們會將 DIV 設 z-index,然後在 Chrome 中 DIV 會正常地蓋在 Flash 上面,但到 IE8 上面就被蓋住了。
改 wmode=”transparent” 是常見的解法,但在舊版(如 13.0.782)的 Chrome 中便無法切換輸入法為中文(註:測試在 Chrome 版本 17 中無此問題)。
最後我是寫一段 JavaScript 來判斷,瀏覽器是 IE 就多帶 wmode 為 transparent,反之就不帶。

 

以下是實際的 code。
Continue reading

[JavaScript] 在 IE 中隱藏/顯示 DIV 中的 Flash 不會重新播放的解法

Standard

在某個案件中,需求是點擊 HTML 頁面上的 button 便會以 BlockUI 方式顯示一個包含 SWF 動畫的 DIV 出來,點擊 SWF 上的叉叉可隱藏此 DIV,若使用者再次點擊 HTML button,該 DIV 又會顯示出來並且從頭再播放 SWF 動畫。

在 Chrome 以及 Firefox 上都可以達到上述需求,但到了 IE 上,隱藏 DIV 後再顯示,其中的 SWF 似乎並不會被重新載入,因此會停留在上次播放的最後一格,尚不知這是 IE 對於 Flash 的 Bug 或這才是正常的,經過一番討論跟摸索後試出了解決方法。

※當然也可以採用 JavaScript 呼叫 SWF 中的重新播放事件來解決,但此次並不是採用此方法解決。

Continue reading

[HTML5] 瀏覽器取得定位筆記

Standard

某個案子要用手機取得使用者所在經緯度的功能,使用 HTML5 可以很快地達成這個需求,但在較舊的 Android 版本瀏覽器上(例如 HTC Magic 的內建瀏覽器,自行刷機就另當別論了XD)會無法透過 HTML5 的 navigator.geolocation 取得定位。找過資料後,發現在這種情況需要透過 Gears 功能來達成(HTC Magic 的瀏覽器支援 Gears)。

下面就是整合這兩種方法的 Code:

Continue reading