- May 20 Mon 2019 10:26
Python連皮卡丘都畫出來給你!!
- May 17 Fri 2019 01:35
第一個人工智慧機器人研發者逝世!
- May 16 Thu 2019 21:41
2019十大熱門程式語言-給剛接觸程式語言的你
2019十大熱門程式語言在這! 初學者該怎麼選擇?
- May 16 Thu 2019 21:26
行動設備優先的設計考量? 前端工程師必修課(下)
前端工程師都該懂RWD概念-行動設備優先的設計考量?
行動載具特性
- May 16 Thu 2019 01:09
2019熱門程式語言介紹!! 讓你目不轉睛!!
- May 15 Wed 2019 20:43
網頁設計的"優雅降級"與"漸進增強"? 前端工程師必修課(中)
前端工程師都該懂RWD概念-網頁設計的"優雅降級"與"漸進增強"
- May 15 Wed 2019 00:13
前端工程師須知的RWD秘訣(下):優先裝置是什麼?方便嗎?
前端工程師要替非常多客戶端著想,現在連優先裝置都出來了?
行動載具特性
行動裝置優先 (Mobile First) 概念
行動裝置優先 (Mobile First) 是由知名的設計師與 UI規劃師 Luke Wroblewski 提出的,他曾當過美國 yahoo 架構設計負責人,他在2010年的時候進行了一次簡報,標題就是 Mobile First(原始簡報與影片),是指設計網站時,應該以行動裝置的介面、互動、顯示等為主要考量,其他的裝置次之,有別於過去設計網站時「以桌上型電腦為主,再將電腦網站上的內容移植到行動裝置上」的模式。 現在越來越多的人使用行動裝置上網,根據美國最大電信業者 AT&T 的數據,手機流量在 3 年內成長了 50 倍,目前行動裝置上網的使用率仍在激增當中,而且還有更多的功能陸續被開發出來。 相較於傳統的電腦,行動裝置的使用比較不受到時間空間限制,無論是在捷運、廁所等都可使用,人們也花了不少零碎時間使用手機上網,因此瀏覽網頁的頻率跟電腦比起來有過之無不及,所以 Google、Facebook、Adobe 等大公司都開始以「行動優先」的概念來設計自己的產品。 那「行動優先」要如何套用到網頁設計上?一開始先針對行動裝置的小畫面來設計版面、填入最重要的內容,然後再以這些基本內容都存在的狀況下,針對較大的螢幕裝置 (如平板、進而電腦、電視螢幕等) 漸進式的擴展其佈局。這樣一來,網頁在行動裝置呈現的介面會非常好瀏覽且美觀,該有的功能、內容都有,並且由小畫面擴大至大畫面,內容更大、可擺放的元素就越多、限制也越少 (參見「漸進增強(Progressive Enhancement)」)。但是如果是從大畫面開始設計,當要轉換成小畫面時,其內容的擺放就會越來越困難,常常需要透過刪減內容,才能「塞」入較小的版面當中。這樣一來,有可能行動裝置上出現的是精簡過「簡陋卻可用 (poor but passable)」的內容,而無法給使用者完整的內容 (參見「優雅降級(Graceful Degradation)」)。 若要建立良好的行動裝置使用者體驗 (UX),應考慮以下幾點:- 使用者使用行動載具的習慣、方式及思考模式
- 提供明確精要的內容,比完整的導覽功能更重要
- 提供清楚且好觸控的導覽選單
- 簡潔明確的頁面內容
- 符合行動載具操作特性
Youtube網站
Airbnb網站
(目錄) |
- May 14 Tue 2019 22:47
前端工程師須知的RWD秘訣(中):使用者為上,擁有最棒的體驗!
1.根據時下的主流設備來佈局斷點 (設備優先)
透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點,而設計多套樣式,再分別對應到各種設備上,如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便,又能精準對應到時下最普及的設備,但是隨著設備不斷汰舊換新,未來總會有無法合適對應到的設備。2.根據網頁內容作為佈局斷點的標準 (內容優先)
這種方式不是以設備為主;而是依據網頁設計內容的布局、段落等來下斷點,是真正符合 RWD 響應式網站 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易,但是斷點會依據設備的不同而落在不同的地方,這樣就沒有標準、精準的設計模式。「優雅降級」還是「漸進增強」?
1. 優雅降級(Graceful Degradation)
一開始就針對「功能最完整」的平台來設計、開發網站,完成所有的功能和體驗後,再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案,以確保網站能在最新、最完整的平台上完美呈現,擁有UI「最好的使用者體驗」;而在較舊的或是功能限制較多的的平台上,仍然可使用最重要的功能,整體介面「簡陋卻可用 (poor but passable)」,而不是無法使用。2. 漸進增強(Progressive Enhancement)
這個方式與「優雅降級(Graceful Degradation)」的方式相反,是先針對最不完整或是限制最多的平台上創建最重要的基本內容,用最精簡的方式呈現;然後以這些基本內容都存在的狀況下,開始慢慢擴展其佈局,隨著平台的限制越來越少,內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。我們在下一篇會提到什麼是「行動裝置優先 (Mobile First) 」。 本篇為「前端工程師必懂RWD概念」三部曲第二篇,全系列目錄如下:(目錄) |
- May 14 Tue 2019 17:20
RWD網頁與傳統網頁設計有什麼差異? 前端工程師必修課(上)
前端工程師都該懂RWD概念-RWD網頁與傳統網頁設計的差異
- May 13 Mon 2019 22:18
前端工程師須知的RWD秘訣(上):現代化網頁開發的優劣?