每次開始一個新的網頁設計專案的時候，會不會有那麼一個瞬間：「這個專案的網頁要從哪裏着手呢？」隨着這種問題而來的，設計網頁佈局時是不是有一些規則可循? 其實網頁佈局在很多時候都是相似的，甚至可以說，有些佈局模式是歷久不衰的。身處在資訊爆炸和科技日新月異的時代，造成瀏覽網頁行為的改變。如何有效吸引使用者的注意力?讓資訊傳遞、行銷達到事半功倍的效果。 歐瑞斯特別針對標準使用者行為，整理了3 種較為有效地的版面設計，讓專案經理或是網頁開發設計師在作網頁版面配置時利用網頁瀏覽視覺熱點的轉變，做為使用者瀏覽網頁行為的參考，進行分析在網頁設計，網頁配置是否能運用使用者的瀏覽習慣，創造一個符合感知易用性的網站，促進資訊傳遞，進而達到企業建設網站的目標。
歐斯瑞今天要與大家談談有關網頁選單結合篩選器，並分享一些案例，看看他們快速找到商品的方式，一起來看看吧！ 當商品到達一定數量或商品類型不同時，就會需要將商品作分類，讓使用者可以依照分類來選擇，商品篩選器可以幫使用者繼續過濾當下不想要的商品，也就是透過一層層分類，來選出想要的商品。根據不同的商品數量、類型和客戶群等，所制定的分類方式與所使用的篩選器也就有所不同，要注意讓使用者的操作過程越輕鬆，越能讓你的商品賣出去！我們在前面文章中提過關於選單設計趨勢的多樣性，以設計的角度來看，選單的選擇方式其實就是一種篩選機制，今天先從幾個選單與篩選結合的案例作分享，看看這些品牌利用選單達到篩選的效果。 案例分享 範例一：The
您有沒有遇過這樣的情況、上傳到網站的照片明明在各種裝置都能正常顯示、偏偏在iPad和iPhone上就是倒的。 當我們使用數位裝置拍攝照片時、會同時在圖片中存入EXIF資訊、其中包含了相機的製造商及型號、快門光圈、照片的方向等。之所以會有照片只在iPad和iPhone上倒置的情況出現、原因就是因為在判斷照片方向性的這個資訊上，Apple的裝置和其他裝置得到了不一樣的結果。最簡單的解決方法就是先清除掉照片的EXIF資訊再上傳。 您可以下載使用FileOptimizer將照片優化後再上傳。優化的過程中、FileOptimizer會幫您清除照片的EXIF資訊。另外、將照片轉存為png或是gif檔也有同樣的效果。
設計往往會追求美感，具有美感的東西容易吸引大眾注目，卻不見得會是「合適、友善」的設計。因此，我們通常會把設計美感當作基礎，將強化網頁、提升SEO搜尋引擎優化為首要目標。為了在美感與SEO中間找到平衡點，Astral Web要和大家分享網頁設計的經驗，希望能幫助大家找到方向！ 在製作客戶網站時，「導航功能」是最重要的設計項目，最好要有清楚的視覺圖文設計，以加強網站導航，方便使用者瀏覽。美感的設計可以給予使用者較好的視覺形象。 有些網站會藉由發表文章增加瀏覽人次，設計師可協助製作文章圖片吸引使用者，還能將繁雜的文字變成淺顯易懂的資訊圖表(例如：說明圖、流程圖)，幫助讀者了解內容。 響應式設計對提升SEO有很大的幫助，已經成為網頁設計的趨勢，因此網頁設計師不再只是單純設計電腦網頁，還多了手機與平板的設計。這些行動裝置和電腦網頁有很大的不同，必須考量每個裝置螢幕的大小，是否能容納大螢幕的所有功能、圖像，讓版面簡潔易懂，又能提供使用者舒適的瀏覽介面。
由於行動裝置的發展迅速，越來越多人注意到響應式設計的重要性，尤其是注重轉換率的購物網站。可能會有人想問：為什麼同樣的網站在不同裝置上，要有不同版面大小、編排呢？理由很簡單─為了改善使用者經驗(User Experience)。讓我們想像一下，假設今天你在手機上收到A網站正在特價某產品，正好就是你想要買的東西，於是你進入A網站想要了解產品內容，卻發現網頁跑版、難以瀏覽，必須試著放大、縮小來看清楚內容，想點選購物卻無法正確選到選項，在難以操作的環境下你還會想立即購買嗎？ 讓我們再繼續假設，因為A網站的行動使用介面過太難操控，於是你選擇B網站進行比價，發現售價相同，且瀏覽介面順暢，剛好符合手機螢幕大小，不必又拉又放調整介面，檢視完後出現購買選項，在一切都很流暢的環境下，便順理成章的完成訂購。 由上述兩個範例來看，A、B網站販售商品、價格皆相同，其完成轉換的關鍵在於使用者經驗─易於操作、方便客戶使用的介面。而響應式網頁設計就是為了改善使用者經驗，解決不同裝置的版面需求所開發的。那麼，使用響應式設計的好處有什麼呢？ 響應式網頁設計可根據裝置螢幕的大小，自動調整版面；不論使用者是用桌機、平板電腦還是手機，都能用最舒適的介面瀏覽網站，包括功能應用、選項，也都能讓使用者選取方便，改善使用者經驗、提升轉換率。
