Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

如果想知道某個網站配色方式,除了打開開發人員工具或是檢視原始碼,也有第三方服務可以使用,即使無法完整複製別人的配色,也能快速得知網站使用的顏色代碼或配色模式,取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢?若你有類似的需求,接下來要介紹的服務或許可以滿足,這項服務會擷取特定網頁使用的顏色,讓顏色相關資訊更一目瞭然。

Screenshot Rocks 線上製作帶有瀏覽器或手機外觀的網頁擷圖

Screenshot Rocks 線上製作帶有瀏覽器或手機外觀的網頁擷圖

如何製作出上圖帶有瀏覽器外框的網頁擷圖畫面呢?可能很多人會選擇打開網頁,將視窗調整到適當大小後擷圖即可,這個答案好像也沒有錯,只是相較於使用 Mockup 工具來說會更費時費力,其實只要透過像是 BrowserFrameMobile Mockup 就能在輸入網址後快速製作出模型圖,看起來會比自己擷取還要更有質感。如果是 Mockup PhotosSmartmockups 還能直接套用免費圖庫提供的高品質相片,免費資源網路社群有一部分的文章首圖都是以類似工具處理,看起來很自然而且能提昇質感。

Shade 為新創公司提供免費 Landing Page 網頁模板下載

Shade 為新創公司提供免費 Landing Page 網頁模板下載

對於新創公司來說,為產品建立一個好看的 Landing Page 非常重要,但很多時候這個想法不被重視,或是沒有預算在第一時間設計出合適的頁面,可能就會錯失許多機會。雖然網路上搜尋一下就有無數的網站模板網站可供下載,但很多顯得過時或沒有幫助,可能得花許多時間編輯修改才能使用,因此有開發者考慮到新創團隊需求推出 Landing Page 素材資源,例如 LandingStock 收錄設計到達頁會用到的相片素材,還有 Cruip 專為新創團隊提供的免費網站模版。

BrowserFrame 為網頁擷圖加上瀏覽器外框,支援各種瀏覽器和作業系統

BrowserFrame 為網頁擷圖加上瀏覽器外框,支援各種瀏覽器和作業系統

身為一個文字工作者,我對於文章排版和圖片相當堅持,特別是每篇教學都會用到的螢幕畫面擷圖,要怎麼設定抓取範圍、呈現都經過相當長時間的不斷研究摸索,才能盡力維持甚至改善文章品質。或許你無法花太多時間擷取螢幕畫面,但又希望擷圖能有不錯的效果,考慮為圖片加上好看的視窗外觀也會讓質感更為提升,之前介紹過 FrramesBrowser Frame 都是類似服務,或是利用 Screely 將圖片轉為帶有 Mac 視窗陰影效果。

Checklist Design 網頁開發者必備參考手冊,助於學習更好的設計方式

Checklist Design

身為網頁開發者總會不斷重複一些類似的情境,例如協助其他公司製作網站的價目表、購物車、新手上路、網誌、招聘、聯繫頁面等等功能,可能不同公司對於內容的細節要求略有差異,但整體來說主軸不會相差太遠。舉例來說,部落格頁面需要有文章標題、縮圖、作者、內容和分享按鈕,非必要項目則有相關文章、訂閱、發佈日期和留言功能,那麼有沒有檢查清單可以讓開發者參照呢?

One Click Test 測試介面設計可否讓使用者快速找到需要的功能或資訊

One Click Test 測試介面設計可否讓使用者快速找到需要的功能或資訊

設計網頁或開發使用者介面有很多「眉角」,可能在文字大小、顏色或按鈕形狀稍作調整就會有完全不同的效果,對於追求完美的設計師來說會找一群人進行 AB 測試(A/B Testing),比較兩種或多種設計中最好的表現結果,而這通常能在最短時間達到最佳的正確性,例如,在購物流程可以準確點選要加入購物車的商品,或是在查詢、註冊或加入訂閱時按下正確選項,可別小看這些設計細節,有時候一點點微小差異就足以造成相當大的影響。

LandingStock 圖庫收錄設計 Landing Page 會用到的免費相片素材

LandingStock 圖庫收錄設計 Landing Page 會用到的免費相片素材

在網路行銷中有一個很常聽到的名詞叫做 Landing Page,中文稱為著陸頁面或到達頁面,簡單來說,就是使用者進入網站後最先看到的第一個頁面,產品通常會以各種不同方式進行宣傳,例如電子報、社群貼文、廣告或搜尋,Landing Page 的功能就是設計內容以引導瀏覽者完成某些動作,像是訂購商品、註冊會員或留下聯絡方式等等,這一連串的過程也被稱為轉換。

Cruip 為新創團隊提供免費 Landing Page 網站模版下載

Cruip 為新創團隊提供免費 Landing Page 網站模版下載

對於新創公司來說,除了要有很好的點子,一群可實際理想的伙伴,更重要的是如何適當包裝產品,讓它更容易被市場接納,當然一方面也會吸引更多潛在顧客加入,提升大家購買意願。不過新創團隊或早期創業公司可能沒有多餘預算或技術能力設計出好的產品頁面,尤其在最關鍵的「Landing Page」(到達頁或登錄頁)成功抓住使用者目光並不容易,如果你需要一些設計好的免費模版,接下來要推薦的網站可收藏至書籤。

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

Site Palette 從網站獲取配色,快速產生完整調色盤資訊(Chrome 擴充功能)

最近介紹過一些令人印象深刻的色彩工具,多半都是 Google Chrome 外掛,例如我個人很喜愛的「CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表」,能以更簡單、有組織性的方式呈現網站樣式和各元件,對開發者來說是非常實用的工具。當然瀏覽器可以做的事情也很多,包括一行程式碼將瀏覽器變成網頁編輯器,直接從網頁中修改內容,在開發網站測試時會省時省事很多。

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

CSSPeeper 為設計師量身打造,更聰明視覺化檢視網站 CSS 樣式表(Chrome 擴充功能)

對於網頁設計或開發者來說,想要改善使用者網頁瀏覽體驗通常會從參考其他網站設計著手,我在發現不錯的網站都會去看一下原始碼或樣式表,雖然 Google Chrome 本身就有強大的開發人員工具可以使用,但如果遇到要查詢某個網頁使用的字型或色彩時還是習慣以 Fontface NinjaType Sample 這類工具快速找到我要的資訊。