整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
輯導(dǎo)語：利用響應(yīng)式網(wǎng)頁設(shè)計創(chuàng)建網(wǎng)頁布局，設(shè)計將能夠更好地適配不同的屏幕和尺寸。那么，隨著設(shè)計行業(yè)的不斷更迭，未來響應(yīng)式網(wǎng)頁設(shè)計又可能會怎么發(fā)展？本篇文章里，作者就“響應(yīng)式網(wǎng)頁設(shè)計”的發(fā)展問題做了解答，一起來看一下。
如果你和我一樣一直在網(wǎng)頁設(shè)計行業(yè)，你知道一件事即將發(fā)生，唯一不變的就是變化。大約每10年，我們做事的方式就會發(fā)生根本性的轉(zhuǎn)變，這對于超越我們之前所做的事情至關(guān)重要……我們即將再次跨入下一個階段。
在千禧年來臨之前，我們首先開始在單一視圖屏幕中進(jìn)行UI設(shè)計，這類屏幕在當(dāng)時最流行的尺寸是640×480。大多數(shù)時候，我們甚至沒有考慮讓屏幕滾動，而是在特定區(qū)域或文本局部區(qū)塊中設(shè)置了內(nèi)部滾動條。
毋庸置疑，當(dāng)時的大部分網(wǎng)頁也是用Flash或HTML創(chuàng)建的，并帶有用于布局的表格。那是在智能手機(jī)出現(xiàn)之前，隨著事物的發(fā)展，我們經(jīng)歷了第一個向“響應(yīng)式”設(shè)計的根本轉(zhuǎn)變。我們已經(jīng)走了很長一段路，CSS已得到長足的發(fā)展，“響應(yīng)式”網(wǎng)頁設(shè)計從2010年開始才真正獲得了專有工具。
隨著CSS3的發(fā)布，我們獲得了對“媒體查詢”（Media Queries）的訪問權(quán)限（譯者注：隨著移動互聯(lián)網(wǎng)的興起，我們需要適配多種移動端設(shè)備，這就需要用到Media Queries，即“媒體查詢”），此后不久，Ethan Marcotte在2009年底創(chuàng)造了“響應(yīng)式設(shè)計”一詞。
十多年來，我們一直使用“響應(yīng)式網(wǎng)頁設(shè)計”（RWD）創(chuàng)建網(wǎng)頁布局，作為一種網(wǎng)頁設(shè)計方法，僅需基于一種屏幕尺寸進(jìn)行設(shè)計，“響應(yīng)式”使我們的設(shè)計能夠適配各種設(shè)備和屏幕尺寸。
在早期，當(dāng)移動電話還不兼容媒體查詢或JavaScript時，“移動優(yōu)先”和”漸進(jìn)式增強(qiáng)”的概念就成為了非常流行的方法，當(dāng)時有很多CSS完全不受支持。
用我們今天的話來說響應(yīng)式設(shè)計，我們認(rèn)為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當(dāng)需要設(shè)計從桌面端調(diào)整為移動設(shè)備屏幕所需的尺寸時，我們使用“媒體查詢”來更改整個頁面布局。
很快，使用這種“響應(yīng)式”設(shè)計方法可能會被認(rèn)為與使用表格進(jìn)行頁面布局一樣過時——就像我們在90年代所做的那樣。
我們通過基于viewport（視口）的“媒體查詢”獲得了許多強(qiáng)大的工具，但我們也缺乏很多適配的可能性，因為“媒體查詢”是一個適用于整個頁面的通用解決方案，并且對每個用戶來說都一樣。我們?nèi)狈憫?yīng)“用戶需求”的能力，也缺乏將“響應(yīng)式”樣式注入“組件”本身的能力。
當(dāng)我們談到組件時，這里指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。
例如卡片、橫劃卡或推薦模塊之類的UI內(nèi)容，每個“塊”都由各種更小的“構(gòu)建塊”組成。這些組件拼湊在一起構(gòu)成我們的網(wǎng)頁。我們可以使用 global viewport information（全局視口信息）來設(shè)置這些組件，但它們?nèi)匀粺o法擁有自己的風(fēng)格。當(dāng)我們的設(shè)計系統(tǒng)是基于“組件”的而不是基于“頁面”的時，這使得它變得更加困難。
好消息是這個生態(tài)系統(tǒng)正在發(fā)生變化，而且它正在迅速變化，這需要我們進(jìn)行一些思維轉(zhuǎn)變：考慮如何設(shè)計和定義組件樣式以及它們?nèi)绾芜m應(yīng)周圍環(huán)境。
CSS正在不斷發(fā)展，“響應(yīng)式”網(wǎng)頁設(shè)計的新時代即將到來。從目前的情況來看，自從我們第一次引入 “響應(yīng)式網(wǎng)頁設(shè)計”（RWD）以來，僅僅10多年的時間，這個生態(tài)系統(tǒng)已經(jīng)準(zhǔn)備好迎接CSS發(fā)生一些相當(dāng)大的改變。
讓我們深入研究一下可以期待哪些類型的變化，這會如何改變我們的設(shè)計方法，以及我們?nèi)绾慰紤]界面設(shè)計。
簡單來說，我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應(yīng)”用戶。它們將使我們能夠根據(jù)用戶自己的特定偏好或需求來設(shè)定網(wǎng)頁樣式。這將使我們能夠根據(jù)用戶的體驗偏好來調(diào)整用戶體驗。
這絕不是一個完整的列表，但能給你一些想法，這些基于偏好的“媒體查詢”可能包括：
這些將幫助我們構(gòu)建更具活力和個性化的網(wǎng)頁體驗，專門滿足我們用戶的專屬需求，尤其是那些希望網(wǎng)站易于訪問的用戶。
更進(jìn)一步說，這些基于偏好的“媒體查詢“尊重任何用戶已經(jīng)在操作系統(tǒng)設(shè)置的偏好。
舉個例子，當(dāng)用戶的操作系統(tǒng)偏好設(shè)定為“減少動效”時，他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應(yīng)先尊重他們的偏好，并為其他人提供“動效增強(qiáng)”的體驗。
另一個流行的媒體查詢是@prefers-color-scheme（配色偏好設(shè)定），它允許我們根據(jù)用戶的偏好和操作系統(tǒng)中的設(shè)置將我們的設(shè)計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”，它會自動發(fā)生。
CSS 中最令人興奮的新興領(lǐng)域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基于“頁面”的“響應(yīng)式”設(shè)計到基于“容器”的“響應(yīng)式”設(shè)計的轉(zhuǎn)變對發(fā)展“設(shè)計系統(tǒng)”的作用價值不容低估，盡管今天使用它并不安全，但重要的是要了解其發(fā)展方向。
簡而言之，“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設(shè)置規(guī)則。這意味著任何組件都更加獨立，與現(xiàn)代設(shè)計系統(tǒng)保持一致，真正成為“即插即用”模塊，可以轉(zhuǎn)移到任何頁面或布局，而且無需根據(jù)新環(huán)境重新考慮所有內(nèi)容。
“容器查詢”為我們?nèi)绾我?guī)劃、設(shè)計和構(gòu)建特定組件提供了一種更加動態(tài)的方法，因為組件本身擁有它的響應(yīng)信息。
甚至Ethan Marcotte自己也表達(dá)了為什么“容器查詢”如此重要，我們應(yīng)該研究一下。
由于各種“形態(tài)因素”（form factors）的變化和擴(kuò)展，例如新的屏幕類型，可折疊屏，我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內(nèi)容中，請記住，這是最具實驗性的，并且只是一項正在進(jìn)行的工作，仍在嘗試解決我們可能遇到的任何復(fù)雜問題，同時考慮未來“形體因素”可能會如何發(fā)展。
在可折疊屏場景中，原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們?nèi)绾巫寖?nèi)容根據(jù)新環(huán)境進(jìn)行適配。例如，你可以在一個屏幕上放置一個收起的側(cè)邊欄（或菜單），并允許內(nèi)容在另一個屏幕上展開并隨頁面滾動。
我知道你在想什么，我們已經(jīng)從事網(wǎng)頁設(shè)計并使用“響應(yīng)式”來進(jìn)行網(wǎng)頁設(shè)計10余年了。我們對其相當(dāng)滿意，那么為什么要改變呢？
如果我們真的以終局視角來看響應(yīng)式設(shè)計，那么它就是關(guān)于個人用戶的用戶體驗設(shè)計。我們正朝著一個與每一位個體用戶高度相關(guān)的時代邁進(jìn)。我們的網(wǎng)頁體驗應(yīng)該去適應(yīng)用戶的需求偏好。隨著設(shè)計系統(tǒng)的發(fā)展以及我們?nèi)绾蝿?chuàng)建更便攜的網(wǎng)頁，諸如“容器查詢”之類的工具將變得非常有意義。
配圖：CSS 將基于各個層級來確定用戶的最佳體驗
考慮到這一點，這意味著我們現(xiàn)在可以使用基于頁面的媒體查（包括跨越屏幕的細(xì)微差別）來設(shè)計宏觀布局；使用容器查詢的組件設(shè)計微觀布局；使用基于用戶偏好的媒體查詢，根據(jù)用戶獨特的偏好和需求定制用戶體驗。
對于新的響應(yīng)式設(shè)計，有許多新概念正在被原型化和概念化——請看下面的延伸閱讀。
所有這些協(xié)同工作的方式需要我們從根本上轉(zhuǎn)變我們對設(shè)計和用戶獨特體驗的看法。我們需要更加適應(yīng)這樣一個事實：即我們的設(shè)計不是靜態(tài)的，不僅在布局上，還有在用戶可獲得的體驗中，我們需要學(xué)會在這種模糊性中做出計劃。網(wǎng)頁和設(shè)計的未來變得越來越復(fù)雜，我們需要適應(yīng)和挑戰(zhàn)自己，理解“新響應(yīng)式”體驗的意義。
進(jìn)一步了解
本文原作者：FrancoisBrill
作者：百度MEUX，百度移動生態(tài)用戶體驗設(shè)計中心，負(fù)責(zé)百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設(shè)計
本文由 @百度MEUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
在現(xiàn)代Web開發(fā)中，JavaScript已成為不可或缺的一部分，它不僅用于構(gòu)建動態(tài)的用戶界面，還支持?jǐn)?shù)據(jù)處理、異步操作等眾多功能。隨著應(yīng)用程序變得越來越復(fù)雜，開發(fā)者們開始尋找更高效的方式來管理這些復(fù)雜性。這就是函數(shù)式編程庫如RxJS登場的地方。本文旨在探索RxJS如何幫助我們更好地利用JavaScript來編寫健壯且易于維護(hù)的代碼。
RxJS是一個開源的JavaScript庫，它提供了處理異步數(shù)據(jù)流的方法，尤其擅長于處理事件、定時器、HTTP請求等場景中的數(shù)據(jù)流。通過觀察者模式和可觀察對象（Observables），RxJS讓我們能夠以聲明式的方式編寫程序。
假設(shè)我們有一個按鈕，每次點擊時都會發(fā)出一個事件，我們可以使用RxJS來處理這個事件流：
import { fromEvent } from 'rxjs';
import { map, filter } from 'rxjs/operators';
const button=document.getElementById('myButton');
const clicks$=fromEvent(button, 'click');
const filteredClicks$=clicks$.pipe(
filter(event=> event.shiftKey),
map(event=> `Clicked at ${new Date().toISOString()}`)
);
filteredClicks$.subscribe(console.log);
RxJS的核心是可觀察對象（Observable），它是一個異步數(shù)據(jù)源，可以發(fā)射多個值，并且可以被訂閱。除了基本的Observable外，RxJS還提供了一系列操作符（Operators），這些操作符可以用來組合、轉(zhuǎn)換和過濾數(shù)據(jù)流。
RxJS非常適合處理實時數(shù)據(jù)流的應(yīng)用場景，例如：
下面是一個簡單的示例，展示了如何使用RxJS來監(jiān)聽輸入框的變化，并實時顯示字符數(shù)：
import { fromEvent } from 'rxjs';
import { map, debounceTime } from 'rxjs/operators';
const input=document.getElementById('textInput');
const inputChanges$=fromEvent(input, 'input').pipe(
map(event=> (event.target as HTMLInputElement).value),
debounceTime(200)
);
inputChanges$.subscribe(value=> {
console.log(`Current value length: ${value.length}`);
});
為了防止內(nèi)存泄漏，我們需要在不再需要訂閱時取消訂閱：
import { fromEvent } from 'rxjs';
const subscription=fromEvent(document, 'scroll').subscribe(console.log);
// 當(dāng)頁面卸載或組件銷毀時取消訂閱
window.addEventListener('beforeunload', ()=> {
subscription.unsubscribe();
});
使用catchError來處理錯誤：
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
const errorHandling$=throwError('Oops! Something went wrong.');
errorHandling$.pipe(
catchError(error=> {
console.error(error);
return throwError(()=> error); // 重新拋出錯誤
})
).subscribe(console.log);
RxJS為JavaScript帶來了強(qiáng)大的響應(yīng)式編程能力，使得我們能夠更加優(yōu)雅地處理異步數(shù)據(jù)流。盡管學(xué)習(xí)曲線較陡峭，但掌握RxJS后，我們能夠構(gòu)建更加高效、可維護(hù)的Web應(yīng)用程序。隨著更多開發(fā)者接受函數(shù)式編程的理念，RxJS有望在未來繼續(xù)發(fā)展壯大，成為異步編程領(lǐng)域的一個重要工具。
應(yīng)式布局就是讓網(wǎng)站自動適應(yīng)用戶終端設(shè)備如：PC、手機(jī)、平板等，首先我們應(yīng)該遵循移動端優(yōu)先，交互和設(shè)計以移動端為主，pc則作為移動端的擴(kuò)展，我這里使用媒體查詢的方法取得客戶端屏幕尺寸，你也可以自己再擴(kuò)展。
響應(yīng)式布局
響應(yīng)式布局CSS代碼:
/*響應(yīng)式布局*/
.tpt-wp{margin:0 auto;width:100%}
.tpt-cm{font-size: 18px;color: #333;text-align: center;background: #f2f2f2;height: 200px;line-height: 200px;padding: 10px;margin: 10px;}
.tpt-md-4{float:left}
.tpt-md-3{float:left}
.tpt-md-2{float:left}
/*瀏覽器寬度小于767px*/
@media only screen and (max-width:767px){
.tpt-md-4{width:50%}
.tpt-md-3{width:100%}
.tpt-md-2{width:100%}
.tpt-ml-3{display:none}
.tpt-mr-3{display:none}
.tpt-ml-7{width:100%}
.tpt-mr-7{width:100%}
}
/*瀏覽器寬度大于768px,小于1023px*/
@media only screen and (min-width:768px) and (max-width:1023px){
.tpt-md-4{width:50%}
.tpt-md-3{width:50%}
.tpt-md-2{width:50%}
.tpt-ml-3{display:none}
.tpt-mr-3{display:none}
.tpt-ml-7{width:100%}
.tpt-mr-7{width:100%}
}
/*瀏覽器寬度大于1024px,小于1199px*/
@media only screen and (min-width:1024px) and (max-width:1199px){
.tpt-md-4{width:33.33333333%}
.tpt-md-3{width:33.33333333%}
.tpt-md-2{width:50%}
.tpt-ml-3{float:left;width:30%}
.tpt-mr-3{float:right;width:30%}
.tpt-ml-7{float:left;width:70%}
.tpt-mr-7{float:right;width:70%}
}
/*瀏覽器寬度大于1200px*/
@media only screen and (min-width:1200px){
.tpt-md-4{width:25%}
.tpt-md-3{width:33.33333333%}
.tpt-md-2{width:50%}
.tpt-ml-3{float:left;width:30%}
.tpt-mr-3{float:right;width:30%}
.tpt-ml-7{float:left;width:70%}
.tpt-mr-7{float:right;width:70%}
.tpt-wp{width:1200px;margin:0 auto}
}
/*NET*/
四等分布局：
<div class="tpt-wp"> <div class="tpt-md-4"><div class="tpt-cm">4</div></div> <div class="tpt-md-4"><div class="tpt-cm">4</div></div> <div class="tpt-md-4"><div class="tpt-cm">4</div></div> <div class="tpt-md-4"><div class="tpt-cm">4</div></div> </div>
三等分布局：
<div class="tpt-wp"> <div class="tpt-md-3"><div class="tpt-cm">3</div></div> <div class="tpt-md-3"><div class="tpt-cm">3</div></div> <div class="tpt-md-3"><div class="tpt-cm">3</div></div> </div>
二等分布局：
<div class="tpt-wp"> <div class="tpt-md-2"><div class="tpt-cm">2</div></div> <div class="tpt-md-2"><div class="tpt-cm">2</div></div> </div>
左七右三布局：
<div class="tpt-wp"> <div class="tpt-ml-7"><div class="tpt-cm">7</div></div> <div class="tpt-mr-3"><div class="tpt-cm">3</div></div> </div>
左三右七布局：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
