欧美中文字幕第一页-欧美中文字幕一区-欧美中文字幕一区二区三区-欧美中文字幕在线-欧美中文字幕在线播放-欧美中文字幕在线视频

譯文:開啟新時代的響應式網(wǎng)頁設計

我是創(chuàng)始人李巖:很抱歉!給自己產(chǎn)品做個廣告,點擊進來看看。  

編輯導語:利用響應式網(wǎng)頁設計創(chuàng)建網(wǎng)頁布局,設計將能夠更好地適配不同的屏幕和尺寸。那么,隨著設計行業(yè)的不斷更迭,未來響應式網(wǎng)頁設計又可能會怎么發(fā)展?本篇文章里,作者就“響應式網(wǎng)頁設計”的發(fā)展問題做了解答,一起來看一下。

譯文:開啟新時代的響應式網(wǎng)頁設計

如果你和我一樣一直在網(wǎng)頁設計行業(yè),你知道一件事即將發(fā)生,唯一不變的就是變化。大約每10年,我們做事的方式就會發(fā)生根本性的轉(zhuǎn)變,這對于超越我們之前所做的事情至關重要……我們即將再次跨入下一個階段。

一、它是如何開始的——固定屏幕

在千禧年來臨之前,我們首先開始在單一視圖屏幕中進行UI設計,這類屏幕在當時最流行的尺寸是640×480。大多數(shù)時候,我們甚至沒有考慮讓屏幕滾動,而是在特定區(qū)域或文本局部區(qū)塊中設置了內(nèi)部滾動條。

毋庸置疑,當時的大部分網(wǎng)頁也是用Flash或HTML創(chuàng)建的,并帶有用于布局的表格。那是在智能手機出現(xiàn)之前,隨著事物的發(fā)展,我們經(jīng)歷了第一個向“響應式”設計的根本轉(zhuǎn)變。我們已經(jīng)走了很長一段路,CSS已得到長足的發(fā)展,“響應式”網(wǎng)頁設計從2010年開始才真正獲得了專有工具。

譯文:開啟新時代的響應式網(wǎng)頁設計

二、它現(xiàn)在怎么樣——響應式設計

隨著CSS3的發(fā)布,我們獲得了對“媒體查詢”(Media Queries)的訪問權限(譯者注:隨著移動互聯(lián)網(wǎng)的興起,我們需要適配多種移動端設備,這就需要用到Media Queries,即“媒體查詢”),此后不久,Ethan Marcotte在2009年底創(chuàng)造了“響應式設計”一詞。

十多年來,我們一直使用“響應式網(wǎng)頁設計”(RWD)創(chuàng)建網(wǎng)頁布局,作為一種網(wǎng)頁設計方法,僅需基于一種屏幕尺寸進行設計,“響應式”使我們的設計能夠適配各種設備和屏幕尺寸。

在早期,當移動電話還不兼容媒體查詢或JavaScript時,“移動優(yōu)先”和”漸進式增強”的概念就成為了非常流行的方法,當時有很多CSS完全不受支持。

用我們今天的話來說響應式設計,我們認為頁面的布局要適配整個瀏覽器、屏幕大小和那些需要投射到整個布局上的限制。當需要設計從桌面端調(diào)整為移動設備屏幕所需的尺寸時,我們使用“媒體查詢”來更改整個頁面布局。

三、它的未來是什么——組件驅(qū)動

很快,使用這種“響應式”設計方法可能會被認為與使用表格進行頁面布局一樣過時——就像我們在90年代所做的那樣。

我們通過基于viewport(視口)的“媒體查詢”獲得了許多強大的工具,但我們也缺乏很多適配的可能性,因為“媒體查詢”是一個適用于整個頁面的通用解決方案,并且對每個用戶來說都一樣。我們?nèi)狈憫坝脩粜枨蟆钡哪芰Γ踩狈ⅰ绊憫健睒邮阶⑷搿敖M件”本身的能力。

當我們談到組件時,這里指的是頁面上的“元素”,這些元素可以由其它“元素”的集合組成。

例如卡片、橫劃卡或推薦模塊之類的UI內(nèi)容,每個“塊”都由各種更小的“構(gòu)建塊”組成。這些組件拼湊在一起構(gòu)成我們的網(wǎng)頁。我們可以使用 global viewport information(全局視口信息)來設置這些組件,但它們?nèi)匀粺o法擁有自己的風格。當我們的設計系統(tǒng)是基于“組件”的而不是基于“頁面”的時,這使得它變得更加困難。

好消息是這個生態(tài)系統(tǒng)正在發(fā)生變化,而且它正在迅速變化,這需要我們進行一些思維轉(zhuǎn)變:考慮如何設計和定義組件樣式以及它們?nèi)绾芜m應周圍環(huán)境。

CSS正在不斷發(fā)展,“響應式”網(wǎng)頁設計的新時代即將到來。從目前的情況來看,自從我們第一次引入 “響應式網(wǎng)頁設計”(RWD)以來,僅僅10多年的時間,這個生態(tài)系統(tǒng)已經(jīng)準備好迎接CSS發(fā)生一些相當大的改變。

讓我們深入研究一下可以期待哪些類型的變化,這會如何改變我們的設計方法,以及我們?nèi)绾慰紤]界面設計。

四、用戶能夠設置基于個人偏好的“媒體查詢”

簡單來說,我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應”用戶。它們將使我們能夠根據(jù)用戶自己的特定偏好或需求來設定網(wǎng)頁樣式。這將使我們能夠根據(jù)用戶的體驗偏好來調(diào)整用戶體驗。

這絕不是一個完整的列表,但能給你一些想法,這些基于偏好的“媒體查詢”可能包括:

譯文:開啟新時代的響應式網(wǎng)頁設計

這些將幫助我們構(gòu)建更具活力和個性化的網(wǎng)頁體驗,專門滿足我們用戶的專屬需求,尤其是那些希望網(wǎng)站易于訪問的用戶。

更進一步說,這些基于偏好的“媒體查詢“尊重任何用戶已經(jīng)在操作系統(tǒng)設置的偏好。

舉個例子,當用戶的操作系統(tǒng)偏好設定為“減少動效”時,他們很可能不喜歡你頁面上的超級華麗的介紹、加載或飛入的動畫動效。我們應先尊重他們的偏好,并為其他人提供“動效增強”的體驗。

另一個流行的媒體查詢是@prefers-color-scheme(配色偏好設定),它允許我們根據(jù)用戶的偏好和操作系統(tǒng)中的設置將我們的設計更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動來更改“暗色模式”,它會自動發(fā)生。

譯文:開啟新時代的響應式網(wǎng)頁設計

五、“容器查詢”為你的設計系統(tǒng)注入新的生命力

CSS 中最令人興奮的新興領域之一是“容器查詢”(container queries),通常也稱為“元素查詢”。從基于“頁面”的“響應式”設計到基于“容器”的“響應式”設計的轉(zhuǎn)變對發(fā)展“設計系統(tǒng)”的作用價值不容低估,盡管今天使用它并不安全,但重要的是要了解其發(fā)展方向。

簡而言之,“容器查詢”將允許我們基于“父級容器”而不是整個頁面來設置規(guī)則。這意味著任何組件都更加獨立,與現(xiàn)代設計系統(tǒng)保持一致,真正成為“即插即用”模塊,可以轉(zhuǎn)移到任何頁面或布局,而且無需根據(jù)新環(huán)境重新考慮所有內(nèi)容。

“容器查詢”為我們?nèi)绾我?guī)劃、設計和構(gòu)建特定組件提供了一種更加動態(tài)的方法,因為組件本身擁有它的響應信息。

甚至Ethan Marcotte自己也表達了為什么“容器查詢”如此重要,我們應該研究一下。

六、考慮各種形態(tài)因素

由于各種“形態(tài)因素”(form factors)的變化和擴展,例如新的屏幕類型,可折疊屏,我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內(nèi)容中,請記住,這是最具實驗性的,并且只是一項正在進行的工作,仍在嘗試解決我們可能遇到的任何復雜問題,同時考慮未來“形體因素”可能會如何發(fā)展。

在可折疊屏場景中,原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們?nèi)绾巫寖?nèi)容根據(jù)新環(huán)境進行適配。例如,你可以在一個屏幕上放置一個收起的側(cè)邊欄(或菜單),并允許內(nèi)容在另一個屏幕上展開并隨頁面滾動。

七、為什么我們需要它?

我知道你在想什么,我們已經(jīng)從事網(wǎng)頁設計并使用“響應式”來進行網(wǎng)頁設計10余年了。我們對其相當滿意,那么為什么要改變呢?

如果我們真的以終局視角來看響應式設計,那么它就是關于個人用戶的用戶體驗設計。我們正朝著一個與每一位個體用戶高度相關的時代邁進。我們的網(wǎng)頁體驗應該去適應用戶的需求偏好。隨著設計系統(tǒng)的發(fā)展以及我們?nèi)绾蝿?chuàng)建更便攜的網(wǎng)頁,諸如“容器查詢”之類的工具將變得非常有意義。

譯文:開啟新時代的響應式網(wǎng)頁設計

配圖:CSS 將基于各個層級來確定用戶的最佳體驗

考慮到這一點,這意味著我們現(xiàn)在可以使用基于頁面的媒體查(包括跨越屏幕的細微差別)來設計宏觀布局;使用容器查詢的組件設計微觀布局;使用基于用戶偏好的媒體查詢,根據(jù)用戶獨特的偏好和需求定制用戶體驗。

對于新的響應式設計,有許多新概念正在被原型化和概念化——請看下面的延伸閱讀。

所有這些協(xié)同工作的方式需要我們從根本上轉(zhuǎn)變我們對設計和用戶獨特體驗的看法。我們需要更加適應這樣一個事實:即我們的設計不是靜態(tài)的,不僅在布局上,還有在用戶可獲得的體驗中,我們需要學會在這種模糊性中做出計劃。網(wǎng)頁和設計的未來變得越來越復雜,我們需要適應和挑戰(zhàn)自己,理解“新響應式”體驗的意義。

進一步了解

  • New media queries you need to know(LogRocket)
  • Container Units should be pretty handy(CSS-Tricks)
  • It’s time we say goodbye to pixel units
  • Say Hello To CSS Container Queries
  • Container Queries: a Quick Start Guide

?

本文原作者:FrancoisBrill

作者:百度MEUX,百度移動生態(tài)用戶體驗設計中心,負責百度移動生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗設計

本文由 @百度MEUX 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

給作者打賞,鼓勵TA抓緊創(chuàng)作!

隨意打賞

提交建議
微信掃一掃,分享給好友吧。
主站蜘蛛池模板: 97久久精品视频 | 色综合视频一区二区观看 | 欧美区国产区 | 国产精品福利自产拍网站 | 99亚洲精品高清一二区 | 日本欧美黄色 | 高清国产天干天干天干不卡顿 | 欧美精品中文 | 日本免费不卡在线一区二区三区 | 欧美性理论片在线观看片免费 | 国产成人禁片免费观看视频 | 精品无人区乱码一区二区三区手机 | 亚洲欧美专区精品久久 | 欧美色视频日本片高清在线观看 | 天天添天天干 | 日韩欧美国产精品第一页不卡 | 亚洲美女性视频 | 国产高h| 嫩草社区 | 乱在线伦视频免费 | 日韩欧美精品一区二区三区 | 香蕉视频网站免费观视频 | 精品乱人伦一区二区三区 | 天天操夜夜摸 | a级毛片视频 | 五月天婷婷免费观看视频在线 | 欧美一级a俄罗斯毛片 | 久久黄色精品视频 | 亚洲视频精选 | 久久免费视频在线 | 91伊人久久| 久久综合视频网站 | 欧美做爰xxxⅹ性欧 欧美做爰xxxⅹ在线视频hd | 日本一级大黄毛片一级 | 色视频在线免费观看 | 久久国产这里只精品免费 | 国产精品久久久久久免费播放 | 伊人骚| 国产一区二区影院 | 日日干日日爽 | 国产精品视频久久 |