文章彙整

79 篇文章標籤含"網頁設計"

首頁  /  標籤含 "網頁設計"的文章

運用 Axure Repeater Widget 優化 Prototype

網站開發時,有沒有過這樣的經驗...網站提案階段設計師提出美美的設計稿,但在開發完成後,卻怎麼看起來不太一樣? 通常這樣的情形容易發生在動態生成的頁面,實際串接的資料樣貌,會影響最終頁面的長相。 也因此,在規劃網頁結構時,我們會期望能將實際的資料納入考量,盡可能讓 Prototype 更接近實際的使用需求,藉此減少開發後期來回溝通、修調版面的人力成本。 今天讓我們以電商平台的產品列表頁舉例,簡介如何使用 Axure 的 Repeater Widget 製作Prototype,藉以及時確認並優化規劃內容。

活用Axure Dynamic Panel讓Wireframe動起來

在網站規劃過程中,必定會需要與團隊或是客戶溝通製作細節,除了盡可能運用文字詳細描述外,也可使用原型設計工具添加動態,輔助溝通與理解。 在使用 Axure 繪製Wireframe 時,可以選擇以 Dynamic Panel 表現不同使用情境下網站內容的變化,像是切換頁籤 (tab)、顯示彈出視窗 (pop-up)、顯示/隱藏網頁元素等 。 今天,讓我們以切換按鈕舉例,簡介如何活用 Dynamic Panel 讓 Wireframe 動起來。

2019年電子商務網站設計趨勢(下)

除了上篇介紹的電子網站設計十個趨勢外,這一次我們要更進一步介紹一些更實用的分享,讓大家知道要如何在實踐中做出改變的可操作建議。

SVG邊框動畫提升網頁質感(上)

這次要為大家介紹一個好用的 JS plugin - vivus,製作出類似手寫風格的動畫!

在controller裡面建立layout block

正常的情況下 要設定layout 對應的block以及templates,只要在extension裡面的layout的xml檔案設定就可以了;但是偶爾還是會遇到需要在controller裡面做設定的情況,例如下面的例子:    

強大的前端框架工具Bootstrap 3介紹

Astral Web使用Bootstrap 3作為我們的前端框架基礎,以簡化我們的工作且提高開發效率,並在前端和後端開發人員之間進行溝通。 Bootstrap 3

使用GSAP來搞定動畫與特效

GSAP不但本身套件的容量小,且能適用於各種瀏覽器,可以從簡單的效果延伸到各種複雜的特效,方便管理與更動,以下簡單介紹它的使用方法!

如何利用 Z-pattern 模型 做出更好的佈局設計

呈上篇文章;更多內容介紹請參考: 網頁設計的開始,版面設計–把消費者的視線留在你的核心內容 理想情況下,我們希望使用者首先查看最重要的信息,再次查看第二個重要的信息。因此,重要的元素應該沿著掃描路徑放置,訪客應在正確的時間被提供正確的信息。這點無論是使用任何一種模型都是無庸置疑的。   網頁動線是至關重要的 動線也是你希望使用者在您網站上的行為流程,是將視線從一個頁面的一部分引導到另一個你想要移動的方向。

如何針對 F-Pattern 做出更好的佈局設計

呈上篇文章;更多內容介紹請參考: 網頁設計的開始,版面設計–把消費者的視線留在你的核心內容 針對您的網頁排出優先順序 了解您的網頁的目的,將想放置的內容將重要且希望傳達的訊息排在使用者視線經常停留的位置。另外網頁的頂端往往是視覺停留的重點,所以盡量將最核心的內容放置在頁面頂端。這也是為何標題和導航欄總是很重要 針對快速瀏覽而設定 使用者通常不會一個字一個詞地閱讀文章,而是通過掃描關鍵字來獲取內容,所以,你需要將包含可能會引發使用者興趣內容的關鍵字按照F式布局來排布,這樣可以儘可能有效地呈現內容:

網頁設計的開始,版面設計–把消費者的視線留在你的核心內容

每次開始一個新的網頁設計專案的時候,會不會有那麼一個瞬間:「這個專案的網頁要從哪裏着手呢?」隨着這種問題而來的,設計網頁佈局時是不是有一些規則可循? 其實網頁佈局在很多時候都是相似的,甚至可以說,有些佈局模式是歷久不衰的。身處在資訊爆炸和科技日新月異的時代,造成瀏覽網頁行為的改變。如何有效吸引使用者的注意力?讓資訊傳遞、行銷達到事半功倍的效果。   歐瑞斯特別針對標準使用者行為,整理了3 種較為有效地的版面設計,讓專案經理或是網頁開發設計師在作網頁版面配置時利用網頁瀏覽視覺熱點的轉變,做為使用者瀏覽網頁行為的參考,進行分析在網頁設計,網頁配置是否能運用使用者的瀏覽習慣,創造一個符合感知易用性的網站,促進資訊傳遞,進而達到企業建設網站的目標。

Axure RP 8版本-38個免費又實用的Widget Libraries

Axure 的 widget libraries 包括免費及市售兩種,以下是我們最喜歡的38個免費widget程序列表(和幾個模板),由於某些Library已經不正式支持Axure RP 8,部分功能可能無法完全正常運行, 但希望你找到喜歡的東西!

什麼是Wireframe?

今天小編要來與大家分享架設網站初期,一個很重要的元素「Wireframe」。 在開始Wireframe之際,須先了解客戶需求,依不同公司不同業務會由該規劃人員來繪製整理來自客戶端蒐集到的資料,如:網站內容頁,客戶的需求概念等,並將蒐集到的資料與團隊進行內部協調溝通,再進行Wireframe的繪製,根據Wireframe同客戶確認各網頁的功能需求 (屬於專案管理IPEMC的Plan階段)。   首先,先來介紹什麼是Wireframe(線框圖),它是一個低擬真度來呈現產品設計的表示法,主要功能可

使用 NIPPON COLORS 在茫茫色彩中尋求一點靈感

  還在為了按鈕、文字,或是哪個區塊要用什麼顏色而煩惱嗎?顏色總是選了又選,換了又換,搞到最後都想叫保安!!保安!!這篇就要介紹一個不錯的配色工具網站給各位。   NIPPON COLORS-(日本の伝統色)是一個介紹各種日本自古以來,常會使用在不管是於文學上,還是手工藝等等地方的顏色代表(總共收錄250種)。讓你能夠更加的了解與認識如:桔梗、緋紅,琉璃等等這些神秘的顏色,不再需要藉由憑空想像。

原型設計AXURE RP 8 專為企劃提案人員而設計的網頁模擬工具

  一個新的原型標準 紙、筆、圖形編輯器和智慧原型應用程式。 隨著不斷發展的設計標準,客戶對網站和應用程序要求更先進、更複雜的界面設計。 現在有許多工具可以幫助加速設計過程,以滿足這些需求。

Magento 2 結帳流程的優化與設計準則

今天歐斯瑞要來談談Magento 2結帳流程頁面,相較Magento 1.9設計上有哪些優化呢?在設計時需要注意哪些事情? 一起來看看吧!  

使用Google Fonts 向 “新細明體” 說再見

  想讓網站看起來不一樣嗎,其中文字就佔了很大的比例。不想再用預設的字型,但搜尋出來的結果卻多到不知所措。亦或是還在開wold一個一個試嗎?使用Google Fonts簡單的解決這個問題! Google貼心地準備了很多有趣及具特色的字體提供大家使用。透過Google Fonts不但能使網站更加美觀、加速,且簡化網站開發;經過135種以上的語言測試與整理,由Google把關嚴審的設計師們,提供最新的字體,甚至會依照地區、熱門程度、發展趨勢去做排序。

讓你的Bootstrap下拉選單可以支援多層選單

Bootstrap 3.x 的下拉選單只支援到第二層、如果您需要多層選單的話、可以試試加上底下這支 bootstrap-submenu.js

何謂Sitemap?

Sitemap 有兩個意思:一個是一份XML文件,裡面列出網站的網址及相關其他中繼資料,好讓搜索引擎能清楚的知道該網站的內容架構、比重等,另一種是利用網頁格式,方便讀者瀏覽,本文將介紹sitemap該如何繳交和製作。

購物網站設計趨勢(四):輕鬆找到商品,選單就是篩選器!

歐斯瑞今天要與大家談談有關網頁選單結合篩選器,並分享一些案例,看看他們快速找到商品的方式,一起來看看吧! 當商品到達一定數量或商品類型不同時,就會需要將商品作分類,讓使用者可以依照分類來選擇,商品篩選器可以幫使用者繼續過濾當下不想要的商品,也就是透過一層層分類,來選出想要的商品。根據不同的商品數量、類型和客戶群等,所制定的分類方式與所使用的篩選器也就有所不同,要注意讓使用者的操作過程越輕鬆,越能讓你的商品賣出去!我們在前面文章中提過關於選單設計趨勢的多樣性,以設計的角度來看,選單的選擇方式其實就是一種篩選機制,今天先從幾個選單與篩選結合的案例作分享,看看這些品牌利用選單達到篩選的效果。   案例分享 範例一:The

如何使用 Sass 開發專案

今天來談談如何用Sass來開發專案,包含開發前的安裝作業。 開發前我們大概了解一下為什麼要用Sass開發 Sass是一套生成CSS的工具,支援變數、函數、繼承等功能,讓我們更輕鬆地組織及維護CSS樣式表。比起用傳統的CSS慢慢撰寫,用SCSS開發真的可以節省掉很多時間。   Sass開發前要先安裝以下工具

如何設計 Magento佈景主題 (2) – 使用sass開發

上一篇 我們教大家把 Magento佈景 主題的基本環境設定好了,今天來談談如何使用sass來開發 Magento佈景

如何設計 Magento佈景主題 (1) – 開發前的準備動作

歐斯瑞準備了一系列「如何開發 Magento佈景主題 」的文章,這一篇文章首先要帶著大家一起進行正式開發前的第一步 ー 建立一個新的Store

使用SelectBoxIt.js自訂你的下拉選單

CSS無法影響下拉選單展開的選項,如果希望自訂選項的樣式,我們需要使用一些外掛來改變下拉選單的結構,SelectBoxIt.js就是其中的一個選擇。SelectBoxIt.js 的使用非常簡單、請看以下操作步驟。

使用bootply測試您的Bootstrap 網頁

您正在學習 Bootstrap 嗎?或是需要測試某個 Bootstrap javascript

Bootstrap Carousel (Bootstrap廣告輪播器)使用上的小技巧

這篇文章要跟你分享幾個使用Bootstrap的小技巧,包括:取消換頁的箭頭及按鈕、改變幻燈片停留的時間、關閉自動輪播、關閉輪播暫停、關閉自動開始播放等。

Photoshop教學:【CC好好用】響應式設計好幫手Device Preview

在設計響應式設計時,我們會需要放在裝置上來看看實際上的大小是否合適,而Photoshop CC 提供一個在裝置上即時預覽功能,一起來看看吧! 1.  

Photoshop教學【CC 影片編輯】分割影片

今天astralweb要與大家分享使用Photoshop CC 2015來做分割影片,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop

當只有一張圖片的時候、隱藏Bootstrap Carousel 的箭頭和按鈕

現今有許多網站都會使用輪播圖片的方式來傳達訊息,網頁瀏覽者也可自行左右移動圖片,但如果在圖片只有一張的情況下,多餘的箭頭或按鈕只會混淆瀏覽者,這時候我們就可以將他們隱藏起來。 <div id="myCarousel" class="carousel slide">

設計網站時,你是否考量過Ad Blockers的情況?

Smashing Magazine統計指出,有75%使用者都安裝了廣告阻檔軟體(Ad Blockers) 當你網站使用廣告區塊,卻被阻擋掉時,是否考慮過畫面會變成怎麼樣呢? 嚴重的可是會讓整個網頁版面跑掉喔。

在行動裝置上避免點擊輸入框時畫面放大

您有沒有遇過這樣的情況:當使用手機瀏覽網頁時,點擊輸入框準備輸入文字時,畫面放大了。若是不希望畫面放大該怎麼做呢?Astralweb在這邊提供您二個作法。

如何解決網站圖片在iPad和iPhone上方向不正確的問題

您有沒有遇過這樣的情況、上傳到網站的照片明明在各種裝置都能正常顯示、偏偏在iPad和iPhone上就是倒的。 當我們使用數位裝置拍攝照片時、會同時在圖片中存入EXIF資訊、其中包含了相機的製造商及型號、快門光圈、照片的方向等。之所以會有照片只在iPad和iPhone上倒置的情況出現、原因就是因為在判斷照片方向性的這個資訊上,Apple的裝置和其他裝置得到了不一樣的結果。最簡單的解決方法就是先清除掉照片的EXIF資訊再上傳。   您可以下載使用FileOptimizer將照片優化後再上傳。優化的過程中、FileOptimizer會幫您清除照片的EXIF資訊。另外、將照片轉存為png或是gif檔也有同樣的效果。  

SASS: 如何幫產生的css指定編碼為UTF-8

font-family: Arial, '微軟正黑體'; 如果您的css檔案跟上面一樣使用了「中文名稱」字型,為了讓瀏覽器正確辨識字型名稱,我們必須要在css檔案的最前面指定編碼為UTF-8編碼  

購物網站設計趨勢(三)-手機版網頁首頁設計

我們之前談過手機購物網頁設計的趨勢與重要性,今天歐斯瑞要談談手機版的購物網站首頁設計,並分享一些案例,一起來看看吧! 現今設計趨勢   頁首高度縮小,並將頁首或選單保持在畫面上方 由於手機版的空間較狹小,使用者在瀏覽網站時,當下會花較多時間在於網站內容,而不是頁首,我們要盡量空出空間來呈現內容,但頁首確是相當重要基本元素,它是你的招牌、也是引導客戶的工具列,使用者會很需要它,但不能變成影響瀏覽的阻礙,因此設計的高度不宜太高,且保持在畫面上,讓使用者可以隨時操作頁首的選單與功能。

幫你的sass專案加上Autoprefixer功能

  Autoprefixer是一個自動幫CSS加上前輟詞的工具,如果你習慣使用compass 來watch你的sass專案,你可以用底下的方式來幫你的sass專案加上Autoprefixer功能。 Step 1:

購物網站設計趨勢(二)-電腦網頁選單設計

購物網站選單的呈現方式不盡其數,透過之前分享的內容,我們了解手機購物網頁選單設計的趨勢,今天歐斯瑞要談談電腦版的購物網站選單設計,了解一些大品牌是如何呈現的, 一起來看看吧!

快速上手色碼寫法,丟掉你的色碼表吧!

相信大家在寫CSS時,都曾使用過網頁色碼表查詢顏色的代碼,但是否有些時候會遇到某些顏色想調淡或調深,卻不知道該如何下手呢?因此本篇就要教大家該怎麼理解並應用那串英數混雜的代碼囉!

SASS的二種註解方式 /* */ 與 //

SASS的註解方式有二種:多行註解及單行註解   多行註解 使用多行註解時,註解起來的訊息會在一併輸出在CSS上  

掌握開發無障礙網頁的基本原則

無障礙網頁的立意是讓身障者也能瀏覽閱讀網站內容,並與網頁互動,對前端工程師來說,無障礙網頁的開發基本上與SEO原則相似,請看以下說明。

網頁版面快速調整工具:快速移動瀏覽器物件

今天astralweb要與大家分享快速更改網頁上物件的位置,可以省去PS的時間,也很快速,一起來看看如何使用吧!   在某些情況下,我們只需要對網頁上的物件位置做調整時,但我們只是想要看看結果如何時,不仿考慮使用這種方式來節省時間吧。但僅限運用在物件位置移動,而縮放、刪除、裁切等,它是做不到的喔! 對於一般民眾不需要使用影像處理軟體,即可做修改,對於網頁設計師來說,省去捕捉畫面、開啟PS、去背、裁切、存檔等步驟,快速做修改。  

如何設計有效的網頁按鈕

網頁按鈕區可分成一般按鈕、文字連結與圖標,而網頁按鈕是引導使用者連結至其它頁面的重要關鍵,良好視覺、精準的文字說明都相當重要,本文要來探討如何設計良好的按鈕,並提供幾個範例與大家分享。

Sass的註解功能,讓除錯工作變得更簡單

如果Sass生成的CSS檔案、不如你所預期的,你要怎麼知道是哪邊出問題了呢?Sass有一個註解功能、這個註解功能的預設狀態是開啟的。 在註解功能開啟的情況下、生成的CSS檔會長得像這樣: /* line 1,

如何修改Sass的輸出樣式

在網站的開發階段、我們通常會將CSS樣式表展開、方便查找代碼。但是當網站要正式上線的時候、我們又要將CSS檔案最小化、減少檔案大小。在以往單純使用CSS開發時、我們也許會使用一些線上工具幫忙轉檔,現在我們使用SASS開發、只要修改專案的設定、馬上就能變更輸出的樣式。   Sass 共有四種輸出樣式 :nested

如何使用CSS(border-radius)畫出圓角DIV

在使用CSS排版時,div預設的形狀都是方形,因此今天就要教大家如何使用border-radius將div的直角變成圓角。

不是畫圖就好!網站設計人員與客戶之協調流程SOP

在網頁設計專案進行中,設計師屬於在前端與客戶較密切聯繫的角色,而設計階段中免不了修改,因此本文將針對如何減低修改次數以使專案流程順暢,從不同工作角色端切入,給予具體建議!

使用字型製作網頁圖標【SVG匯出篇】

今天Aastralweb與大家分享使用AI儲存SVG向量檔案格式的圖標,將它轉成網頁字型檔,應用於網站之中的ICON,一起看看如何製作吧!

幫Contact Form 7(WordPress外掛)聯絡表單 加上 Google event事件追蹤碼

Contact  Form 7 是一個相當愛歡迎的 Wordpress 的表單外掛,這篇文章要教您如何幫Contact  Form 7 的表單加上 Google event事件追蹤碼。

自訂您的網頁圖示字型(icon font)

如果您需要一個專屬於自己的圖示字型,可以試試Fontastic這個線上圖示字型產生器,請看以下示範!

使用adapt.js快速將您的網站變成響應式網站

響應式網站是目前建站的趨勢,但如果您原本已經有個網站了,又暫時還不打算另外建立新站,您可以考慮使用adapt.js快速將您的網站轉換成響應式的網站。 adapt.js 的作用是依據螢幕的寬度載入不同的CSS檔案,藉此讓網站達到響應式的效果。原理與media queries相同,都是依螢幕寬度判斷使用不同的樣式(CSS),不同的地方在於:adapt.js將不同的設定寫在不同的檔案內,再依螢幕寬度載入不同的CSS檔案;media queries是將CSS寫在同一個檔案內,依螢幕的寬度決定使用某一段特定的CSS設定。

調整系統設定,再進一步增進Magento效能

之前提到的Magento設定優化,是在Magento系統中已整合好的設定功能,因此我們可以簡單的通過後台設定的改變,輕鬆的做到校能的優化。   如果今天網站的規模龐大,那些設定已經不足以負荷時,還有別的方式可以調整設定,只是建議大家在進行此類的設定變更前,務必進行設定檔案的備份,不小心改壞了設定還可以還原。 1.Enhancing the

Centos-PHP環境下設定Mssql連線功能與啟用

  在預設的PHP環境下,是沒有對microsoft sql server支援連線功能的,因此我們需要進行套件的安裝與啟用。  

利用htaccess設定301 redirect

有時網站會有舊站翻新、舊的內容移除,想要讓使用者轉移去瀏覽新的內容。 這時我們可以簡單的透過設定.htaccess檔案,告訴Apache幫你轉移網址到想要的網頁。 程式碼(.htaccess檔案) ... <IfModule

如何設計優良的行動網站 Part 2 – 網站搜尋功能

想要幫助行動網站的使用者快速找到他們想要的內容、網站的搜尋功能就變得非常重要。 將網站的搜尋功能放在明顯的地方 當使用者想要找尋某些特定內容的時候,通常會直接使用搜尋功能,因此我們應該將搜尋功能儘量放在使用者能第一眼看見的地方。 在下圖中,左側的設計使用者無法在第一時間知道搜尋功能的所在,必須在點開功能選單之後才能驚覺:哦!原來在這兒呀! 右側的設計則讓使用者可以直接看見搜尋框,並且使用搜尋功能。

如何設計優良的行動網站 Part 1 – 首頁和網站導覽

行動裝置與一般桌機最大的不同點在於螢幕尺寸的大小、行動裝置因為螢幕尺寸較小,能夠呈現的資訊有限,因此在內容的規劃上必須更為精簡。目前市面上常見的行動裝置最小的螢幕寬度是320px,iPhone 4 及 Sony Ericsson

如何設計響應式的電子郵件

響應式的電子郵件在編碼上比響應式的網頁更加麻煩,因為我們必須同時考慮各種郵件軟體及各家線上郵件平台的呈現,請看以下我們整理出設計響應式的電子郵件一些簡單技巧。

手機版電子郵件廣告(EDM)設計分享

符合手機介面的郵件廣告,能提升使用者點擊意願。今天要與大家分享從設計角度去探討電子郵件廣告介面,如何給予使用者更良好的瀏覽方式。

利用Javascript,自製清理網頁元素工具

相信不少的網頁工作者,都會有類似的經驗,尤其是在需要重新整理網頁內容,或是重構網站時,看到一堆過去的網頁程式碼,元素其中不乏各種css,class,id,甚至是bgcolor,width一類的行內屬性,這時就可以利用這個工具來清理掉這些元素屬性,還原成最乾淨的html網頁程式碼。 不過,先提醒一下,此工具並沒有特別處理例外,例如說img的src屬性也是一併會被清除的。 直接來看程式碼(重點執行清除功能的是藍字的程式部分): <html> <head>

設定Meta tag,管理你的網站可見度

當我們做好一個網站,且讓他上線時,如果我們的網站並不想要被搜尋引擎收集資訊,我們可以透過設定Meta tag的robots,告訴搜尋引擎哪些資料不要蒐集,來管理網站的可見度。 例如說,比較常見到的: <meta name="robots"

歐斯瑞的工具百寶箱大解密

  網頁設計百寶箱 歐斯瑞的有許多夥伴們都是網頁製作高手,一個一個吸引人駐足逗遛的網站就在在他們的巧思跟精湛的技術下誕生出來。 工欲善其事,必先利其器;這些亮眼的網站當然不是設計師跟工程師們變魔術變出來的,而是歐斯瑞的夥伴們依照設計跟製作的流程、使用各種適合的工具製作出來的。我們依照設計跟程式製作的流程把這些好用的工具分類好;接下來,就為各位歐斯瑞的好朋友介紹這些工具。 網頁設計

純CSS的下拉式選單

以往我們要實現下拉式選單大多會使用Javascript或者是Flash,不過現在我們有更簡單的選擇。今天我們要跟大家分享如何單純使用CSS及HTML製作互動式的下拉選單。底下就是我們完成的選單效果截圖。   首先我們先把第一層的按鈕做出來。 HTML <ul

網頁使用者互動設計(interactive design)與視差設計(parallax design)分享

行動裝置發展快速與HTML5技術攀升,也影響網頁設計的形態改變,以往會使用Flash來製作網頁動態效果,但由於支援性、SEO等問題,讓多數企業都走向新形態的設計方式,HTML5越來越成為一種趨勢,現今沒有酷炫的Flash動態效果,網頁總不能死版版的,HTML5難道就不能做出酷炫效果嗎?其實是可以的,今天要與大家分享幾個範例,以及運用這些技術該注意的事。 KFC Kentucky Fried Chicken

CSS 濾鏡特效

CSS 濾鏡是一個讓我們實現各種視覺效果的工具,我們可以利用CSS濾鏡來幫網頁加上一些視覺效果。 本文將為您介紹CSS的濾鏡效果及用法。

如何使用CSS製作逐格動畫

一般我們在應用CSS動畫屬性時最常用到的效果不外乎改變顏色、形狀及移動位置等。但是,你知道嗎?其實CSS也可以做到傳統的逐格動畫,今天我們就要跟大家分享如何用CSS製作一個逐格動畫出來。

如何設計良好的手機網頁

手機提供消費者在零碎時間即時購物的需求,購物網站手機頁面的設計必須以方便嘔務流程為出發點考量,請看以下幾項設計要點。

滿版背景圖的製作方法- CSS & jQuery

今天我們要跟大家分享幾個製作滿版背景圖的方法。 現在先來確定一下我們的需求: 圖片必須剛好填滿瀏覽器不能留有縫細,也不能因為圖片太大而出現捲軸。 圖片可以隨著瀏覽器尺寸自動縮放。 圖片必須保持長寬比,不能變形。

自訂您的網站在搜尋結果中呈現的樣子

Google 提供了幾個方法,讓我們可以自訂網站在搜尋結果中出現的樣子:在搜尋結果中顯示麵包屑導覽、在搜尋結果中顯示Sitelinks搜尋框、在搜尋結果中顯示網站名稱,接下來我們將一一為您做介紹。

8個免費工具幫助簡化前端開發的工作

本文將介紹幾個前端開發的工具:Chrome 開發人員工具、Brackets、Sublime Text 3、Koala、Online CSS prefix tools、CSS Sprite Generator、Picpick、Just Color Picker。

12個結帳頁面的設計技巧

  網路購物是個在現代社會裡絕佳的購物模式,不必離開家裡便能快速比較、瀏覽所有商品,當你要挑選購買的商品時,如果網站設計的並不理想,在商品下單介面你可能不覺得更方便,反而有了一次很糟的購物體驗。 我們來看看普遍在購物網站結帳頁面上設計的詬病: 結帳前要先填寫表單,然後再告知您此商品已缺貨,還要等上數天→回覆→再次下訂,又一次循環…。其實只需要花些時間對你的結帳過程做一點點的調整和研究使用者的體驗,網站就會獲得更多滿意的回饋,並且有效的增加銷售額;小編在這裡提供了12個技巧來幫助購物網站做到這一點: 1.

用Marvel App讓你的數位點子活起來

今天歐斯瑞要位各位介紹Marvel這個網站,Marvelapp提供了簡單完善的功能讓專案人員在簡單的幾個步驟內即可完成一個demo網站。接下來就讓我們用快速簡單的方式完成一個可以展現效果的網站吧!

在您的網頁中新增 Google+ 追蹤按鈕

Google+ 追蹤按鈕可在您的網頁上新增一個簡單小型的條件按鈕,讓訪客可將您的個人資料或專頁快速加到他們的社交圈中。如要在您的網站上顯示 Google+ 追蹤按鈕,只要加入一行 JavaScript

手機網頁設計新取向─台灣五大案例分析!

智慧型手機越來越普及,也成為大多數消費者從事網路相關事物的裝置,也因此網站提供給手機良好操作介面是相當重要的,在介面與系統需要審慎的考量,請看以下分析與建議。

新一代多螢電商解決方案:響應式設計(RWD)

電子商務瞬息萬變,要如何搶攻多螢幕電商市場,掌握桌機、平板電腦和智慧型手機的網購商機呢?根據Google 2014年的調查,台灣有54%的人上次購物是使用智慧型手機,其比率高於韓國38%、美國26%和日本15%等,位居世界第一,可見台灣人的行動商機不容小覷。為了把握這廣大的行動商機,許多電商業者常做的方式是開發行動購物APP(例:MOMO購物網、Yahoo超級商城),或者另外架設行動網站(例:Lativ網站)。 其實,還有一個台灣尚未普及,但在國外相當流行的Responsive Web Design(RWD),稱為響應式設計(或稱互動式、回應式設計),國外使用範例如知名品牌Tommy

網頁設計教學:【工具篇】批次處理的好工具ViewNX 2

在協助客戶處理產品頁面的照片時,通常照片檔案太大或尺寸不一,一張一張修改又相當耗時,有個簡單的方法分享給大家,只要使用免費軟體批次處理照片,就能一次搞定所有照片!我們使用的是Nikon提供的免費照片處理軟體「ViewNX 2」,接下來就跟著下列步驟進行吧! 1. 請先至官網免費下載ViewNX 2軟體。

網頁設計教學:【概念篇】台灣網頁常用的字型

選擇合適的網站字型可以為網站加分,以下為我們針對台灣字型進行分析研究的結果。

網頁設計【認知篇】:網頁美工、設計師如何協助SEO搜尋引擎優化?

設計往往會追求美感,具有美感的東西容易吸引大眾注目,卻不見得會是「合適、友善」的設計。因此,我們通常會把設計美感當作基礎,將強化網頁、提升SEO搜尋引擎優化為首要目標。為了在美感與SEO中間找到平衡點,Astral Web要和大家分享網頁設計的經驗,希望能幫助大家找到方向! 在製作客戶網站時,「導航功能」是最重要的設計項目,最好要有清楚的視覺圖文設計,以加強網站導航,方便使用者瀏覽。美感的設計可以給予使用者較好的視覺形象。 有些網站會藉由發表文章增加瀏覽人次,設計師可協助製作文章圖片吸引使用者,還能將繁雜的文字變成淺顯易懂的資訊圖表(例如:說明圖、流程圖),幫助讀者了解內容。 響應式設計對提升SEO有很大的幫助,已經成為網頁設計的趨勢,因此網頁設計師不再只是單純設計電腦網頁,還多了手機與平板的設計。這些行動裝置和電腦網頁有很大的不同,必須考量每個裝置螢幕的大小,是否能容納大螢幕的所有功能、圖像,讓版面簡潔易懂,又能提供使用者舒適的瀏覽介面。

如何用CSS自訂網站反白文字?

如果來到Astral Web歐斯瑞的網站,按下左鍵選取文字(反白)時,出現的不是預設的背景色,而是鐵灰色,讓使用者可以可以更清楚瀏覽文字。這種手法在網站上很常見,今天我們就來和大家介紹如何設定! 方法很簡單,只要利用css3 的selection選擇器就可以了! ::-moz-selection

如何使用css來隱藏placeholder文字?

設計表單的輸入欄位時、常用placeholder來做提示文字,在預設的狀況下、placeholder的文字只有在輸入資料後才會消失、如果我們希望在點選輸入欄位後,placeholder的文字會立即消失,一般常用的方法就是利用 onfocus 和 onblurl來達成。 <input

使用響應式網頁設計的優點是什麼?

由於行動裝置的發展迅速,越來越多人注意到響應式設計的重要性,尤其是注重轉換率的購物網站。可能會有人想問:為什麼同樣的網站在不同裝置上,要有不同版面大小、編排呢?理由很簡單─為了改善使用者經驗(User Experience)。讓我們想像一下,假設今天你在手機上收到A網站正在特價某產品,正好就是你想要買的東西,於是你進入A網站想要了解產品內容,卻發現網頁跑版、難以瀏覽,必須試著放大、縮小來看清楚內容,想點選購物卻無法正確選到選項,在難以操作的環境下你還會想立即購買嗎? 讓我們再繼續假設,因為A網站的行動使用介面過太難操控,於是你選擇B網站進行比價,發現售價相同,且瀏覽介面順暢,剛好符合手機螢幕大小,不必又拉又放調整介面,檢視完後出現購買選項,在一切都很流暢的環境下,便順理成章的完成訂購。 由上述兩個範例來看,A、B網站販售商品、價格皆相同,其完成轉換的關鍵在於使用者經驗─易於操作、方便客戶使用的介面。而響應式網頁設計就是為了改善使用者經驗,解決不同裝置的版面需求所開發的。那麼,使用響應式設計的好處有什麼呢? 響應式網頁設計可根據裝置螢幕的大小,自動調整版面;不論使用者是用桌機、平板電腦還是手機,都能用最舒適的介面瀏覽網站,包括功能應用、選項,也都能讓使用者選取方便,改善使用者經驗、提升轉換率。

好的商標設計應該包含什麼元素?

商標是給予使用者辨識的圖像,也是企業的形象代表,由商標所衍生的視覺形象,不僅能讓使用者立即聯想到品牌,還兼具美化作用;在塑造公司整體視覺形象時,更是延伸的主軸,本文將介紹好商標的必備要素。

Magento主題樣板,網站設計快速又美觀!

今天要和大家介紹的就是Magento「主題」,商家可依個人喜好選擇想要的版型,再進行更換圖片或客製化修改。有了版型作為架構,網站設計更加有頭緒,輕鬆塑造商家想要的網站!