首頁 部落格 響應式網站架設需要把握的九點
Jericho
Aug 02, 2021
網路、科技、滿滿的新知在浩瀚的網路上,想要得到他嗎?沒問題,永遠抱持著謙卑的態度,自然會找到方案!

響應式網站架設需要把握的九點

隨著網站製作科技的迅速發展,行動裝置和PC個人電腦設備成為訪問網站的最常見的設備。iWare響應式網站架設在進行網站規劃時,會根據客戶不同需求來分析PC電腦桌面版網站,和行動上網端的響應式網站製作風格。

iWare響應式網站架設公司以W3C所建議的響應式網頁設計為基礎、在不同大小的螢幕解析度上,皆能正確的顯示出網頁,這種佈局設計模式,不是為每個裝置做出特定的版本,而是為不同的裝置之用戶提供一統介面,且具有良好的用戶體驗,簡化網頁設計的複雜問題同時帶來未來裝置使用彈性。這種概念就式“響應式網頁設計”的精神。

 
1.響應式設計vs自適應網頁設計

概括的說,自適應(Adaptive)網頁設計也是響應式網頁設計,響應式(Responsive)網頁設計也是自適應網頁設計。但是真正的細分起來,自適應是響應式的一個應用情境,如今已經不會分得如此多重派系,而是以響應式設計為主流。

 

2.內容瀑布流

隨著手機尺寸越來越小,內容所占的垂直空間也越來越多,也就是說,內容會向下方延伸,這就叫做內容瀑布流。如果你習慣了使用像素和點進行設計,可能會覺得這個有點難掌握。但這個設計有時也容易造成效能上的負擔,通常都會搭配Lazy Loading的技術使用之。


3.相對單位

你的設計對象可能是桌上型電腦,也可能是行動式裝置,或者介於兩者之間的小型可攜式螢幕,像素解析度等條件也會彼此不同,所以我們需要使用靈活可變,並且能夠適應各種情況。在這種情況下,百分比等相對單位就派上用場了。使用百分比時,我們說寬度50%就是表示寬度占畫面的大小(或者叫視區,也就是指所打開瀏覽器視窗的大小)的一半。

 

4.斷點

斷點可以讓頁面布局在預設的點進行變形,也就是說,在臺式桌面上顯示3欄,在移動設備上僅顯示1欄。大多數CSS屬性都可以實現斷點之間的變形。斷點放置的位置通常取決於內容。舉例來說,一段文字要換行,你可能就需要加上斷點。但斷點使用時需要謹慎——如果搞不清內容之間的邏輯關系,排版會容易一團亂。

 

5.最大和最小值

有時候內容占滿整個螢幕寬度(例如在移動設備上)是好事,但相同的內容在電視螢幕上也會十分壅擠,貌似就不太合理了。這就是為什麽要有最大/最小值。例如,如果寬度為100%,最大寬度1000px,那麽內容就會以不超過1000px的寬度填充螢幕。

 

6.崁入對象

還記得相對位置與絕對位置的差異嗎?如果一大堆要素彼此都緊密聯繫,那麽必將難以控制。因此,將要素放置到容器中就會讓它們變得更加好理解。這種情況就需要用到像素之類的靜態單位了。靜態單位對於logo和按鈕等不需要擴展的內容來說非常有用。

 

7.行動優先還是桌上型介面優先

從小屏幕入手過渡到大屏幕(行動優先),還是從大屏幕入手過渡到小屏幕(桌上型優先)區別不大。但是,從行動介面著手可以給你帶來一些額外的優勢,幫助你進行決策。通常情況下大家會從兩方面同時著手,所以你還是要看哪種方式最適合你。

 

8.web字體vs系統字體

想讓自己的網站擁有炫酷的Futura或Didot效果嗎?那就是用web字體吧。盡管web字體看起來很炫酷,但你要記住,這些字體都需要用戶下載,字越多,用戶下載頁面的時間也就越長。另一方面,系統字體加載速度則快得多(前提是用戶本機就有),但視覺效果就顯得很普通。

 

9.點陣圖vs向量圖

你的圖像是否有很多細節,並且應用了很多華麗的效果?如果是,那就用點陣圖。如果不是,考慮使用向量圖這種新的網路圖片標準。如果是點陣圖,使用jpg、png或gif,未來來有webp或jpeg xl的標準會誕生。

 

向量圖則以SVG或icon font圖示字體。其各有利弊。但你要時刻謹記尺寸——未經過優化的圖片不能傳到網上。另一方面,向量圖通常比較小,不過部分比較老的瀏覽器可能不支持向量圖片的技術。還有,如果圖片內有很多曲線,那有可能會比點陣圖還大,靈活搭配使用才是王道。

手機端網頁設計與PC電腦端的差別與設計要點
手機端網頁設計與PC電腦端的差別與設計要點
Jericho
Jericho
Mar 23, 2021
手機網站設計應該注意什麽問題
手機網站設計應該注意什麽問題
Jericho
Jericho
Mar 15, 2021
【街頭攝影】如何拍出有故事性的「劇照」?
【街頭攝影】如何拍出有故事性的「劇照」?
Ringo
Ringo
Nov 02, 2017