優良響應式設計必備的9大點!你的網站有幾個?

現今的網站設計,不再只是單純考慮內容版面在電腦裝置上的呈現方式,更應該著重於思考其他行動裝置的呈現畫面。在專業術語中,我們稱之為「響應式網頁設計Responsive Web Design」,英文可簡稱為RWD。現代人的生活離不開手機已是大趨勢,所以在各種行動裝置中,又以手機板畫面最重要,甚至老闆們透過手機處理事情的時間遠超過用電腦。

 

有沒有響應式設計,對我有什麼影響嗎?

「這個網頁跑版了耶…」、「這個按鈕好難按!」、「圖片和文字也太小了吧…怎麼看啊?」如果您用手機瀏覽網頁,曾經有過以上的心理OS,那就代表該網站在響應式設計上,是不及格的!下次可能還會不想點進去看…,因為太不方便了!與其說設計網頁的美觀與否,響應式網頁設計其實更是在比各位設計師的細心程度,因為響應式網頁設計最重要的觀念就是:「提供給使用者最佳的體驗效果」。

今天允騰要透過9大重點,針對手機板的介面使用,為各位點出響應式網頁設計都該具備的重要條件:

interface-phone

響應式網頁設計需面面俱到,才能讓使用者體驗到最佳的瀏覽效果,以上9點是響應式設計的必備9大重點。

 

(一)容易操作

如同我們在上一段強調「最佳的體驗效果」,容易操作肯定是最重要的一點了!再者,如果一個響應式網頁式設計連「容易操作」這最基本要求都沒有的話,怎麼還能說自己是「響應式設計」呢…
容易操作的定義其實因人而異,且範圍廣大,而我將容易操作的定義解釋為「不須思考就能了解如何使用」。包含各種面向的操作像是:上下左右滑動的方式、點擊位置、按鈕會前往哪裡等等所有細節。

(二)表現重點

因為我們在手機上的空間有限,「講重點」就成了響應式網頁設計呈現的首要條件,過濾不需要的內容,讓使用者更快抓到現在的重點是什麼,或是用隱藏、收合、下面的方式來決定內容顯示與否。

RWD-表現重點

以「瑋特台中貓旅館」為例,此頁面僅顯示[房間介紹]這個主題內容,其他相關的住宿內容接收進頁籤裡面。不僅表現重點,也讓使用者清楚了解還有哪些內容可以瀏覽,並輕鬆點選。

 (三)版面位置

為了讓手機板畫面能有最佳的版面呈現,我們同時需要去思考每個區塊的大小,像是頁首頁尾的高度、廣告BANNER的大小等等,而此觀念在首頁設計又尤其重要。

RWD-版面位置

以「愛甲玩美-台中美甲美睫」為例,主題BANNER約占整體版面3分之1,為視覺呈現最佳的黃金比例,也讓使用者在進入首頁時,即可先被具有專業感的形象照鎖定目光。

 (四)風格一致

這裡的風格一致,指的是網站的整體風格設計。總不能在電腦版上呈現的視覺色為藍色,來到手機板卻立刻成了綠色吧!這種分開思考的錯誤,實在很容易讓使用者混淆!除了風格之外,必備功能也必須一致,我們都知道與手機板相比,網頁版的功能一定是最齊全的,但因市面上仍有許多網頁板與手機板為分開製作的網站,導致在同步更新功能時,容易有兩方功能不一的錯誤發生。

RWD-風格一致

以「瑋特台中狗旅館」為例,品牌風格以深藍紫色為基底,搭配金銀色點綴,表現出奢華而不高調的俐落質感,手機版與網頁版皆完整表現此風格。

 (五)簡化選單

選單絕對是最常被使用者拿來了解網站內容的指標功能!而為了節省空間,現今的響應式設計幾乎都將選單收進一個icon內(如果您網站的響應式設計連這點都沒有做到…那麼您可能要認真考慮是否還要合作下去了…)。對於部分功能較複雜的網站,手機板可能會選擇性捨棄一些功能選項來顯示,進行簡化之餘再次提醒您,別忘了站在使用者的角度思考什麼是他們真正需要的!

RWD-簡化選單

以「裕成台中防水工程」為例,適量的選單數量7個,以視覺色為基底,用鮮明易讀的顏色表現文字,同時也呈現英文說明,讓使用者清楚操作,也讓非中文系使用者清楚意思。

 (六)善用圖標

人類處理影像元素的速度,是文字的6萬倍!所以在網頁上使用適量圖標的元素,不僅讓介面的豐富度提升,讓使用者在體驗上可以得到有趣的經驗之外,更能達到意想不到的快速理解體驗效率!

RWD-善用圖標

以「愛甲玩美-台中美甲美睫」為例,在選單上加上符合網站風格且豐富視覺的icon,讓使用者即便只是點選選單,也能增加只花幾秒鐘就能看完icon的小樂趣。

(七)方便點擊

如果您不是用手機板瀏覽此篇文章,請您先拿起的手機,必且回答我兩個問題:「您用單手操作還是雙手?手機在您哪隻手上?」

我想大部分的人都是「單手操作」、「右手拿手機」吧!就因如此,像是:將選單按鈕放置在右上方、點擊按鈕置中且拉長,提升單手操作的點擊便利性,都是我們提供給您的建議方針。

RWD-方便點擊

以「瑋特台中貓旅館」為例,大部分的使用者為右撇子,所以貼心的將選單按鈕設計在右上方。我們都知道,點進網站瀏覽的使用者都可能是需要「訂房」的顧客,所以首頁首要呈現立即訂房按鈕,而且大小讓使用者無論是左手或右手都能點擊到。

 (八)容易閱讀

「還在放大檢視文字大小嗎?」這個問題其實還是很常發生在現今的網頁上…現在的人透過手機閱讀大量文字,「易讀性」是使用者願不願意閱讀下去的決勝點!手機板的文字大小我們建議至少16px以上,另外,適當的調整字距也是使用者體驗加分的小訣竅。

RWD-容易閱讀

以「愛甲玩美-台中美甲美睫」為例,內文字體為16px,文章標題為26px,選單主題為24px,適當的字體大小,讓使用者在手機上也能擁有良好的瀏覽體驗。

 (九)合適影像

合適影像並沒有一定的標準,根據網站類型的不同,會有不同的最佳呈現方式,若以作品導向的網站來說,讓使用者「看清楚」是您首要考慮的條件,所以千萬別讓您的客戶還要透過「放大」,才勉強搞懂那些作品。

RWD-合適影像

以「全盛台中鋁門窗」為例,商品即為「鋁門窗」,適中的大小讓使用者不論使用哪種尺寸的裝置,都能一覽無遺!把握每次展現產品的機會,因為每次都是創造生意的可能!(全盛台中鋁門窗,YAHOO搜尋【台中鋁門窗】排名第一,GOOGLE搜尋【台中鋁門窗】排名第七)

怎麼樣才符合最佳的響應式網頁設計?其實這個問題沒有標準答案,因為根據產業或網站屬性不同,呈現的最佳條件也會有所差異。那又要怎麼調整到最佳的體驗效果呢?最快檢視的方式就是,現在拿起您的手機,把自己當作使用者來瀏覽您的網站,抓出任何您覺得不方便的所有地方!

覺得文章不錯?幫我們分享一下吧

分享到Facebook或是Line動態按鈕,電腦版在左側←,手機版在下方↓,好的文章值得讓更多人看見,感謝您的閱讀與支持。

分享看完文章的感想...

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Scroll Up