整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          40歲大叔學(xué)習(xí)編程之 JavaScript 相冊特效

          40歲大叔學(xué)習(xí)編程之 JavaScript 相冊特效

          求是:設(shè)置一個展示照片的區(qū)域,下面有上一張,下一張,點擊會切換照片。

          實現(xiàn)思路:設(shè)置最小下標(biāo)(minIndex)為 1 ,最大下標(biāo)(maxIndex)為4,剛開始讓 最小下標(biāo)為1,點擊下一頁,讓下標(biāo)加1,如果加到最大下標(biāo)了,讓他等于最小下標(biāo)1,這樣就能循環(huán)著,展示這4張校花照片了,點擊的時候通過 ApI: setAttribute("src", url) 設(shè)置image標(biāo)簽的 src 屬性,就可以了。簡單吧。

          網(wǎng)上找?guī)讖埫琅掌诺絠mages目錄下。快來實現(xiàn)一下吧。






          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <title>圖片切換</title>
            </head>
            <body>
              <!-- 4    1    4 -->
              <img src="images/image01.jpg" id="flower" width="200" height="200" />
              <br />
              <button id="prev">上一張</button>
              <button id="next">下一張</button>
              <script type="text/javascript">
                // 1.獲取事件源 需要的標(biāo)簽
                var flower=document.getElementById("flower")
                var nextBtn=document.getElementById("next")
                var prevBtn=document.getElementById("prev")
          
                var minIndex=1,
                  maxIndex=4
                currentIndex=minIndex
                // 2.監(jiān)聽按鈕的點擊
                nextBtn.onclick=function () {
                  if (currentIndex===maxIndex) {
                    // 到最后一張了
                    currentIndex=minIndex
                  } else {
                    currentIndex++
                  }
          
                  flower.setAttribute("src", `images/image0${currentIndex}.jpg`)
                }
          
                prevBtn.onclick=function () {
                  if (currentIndex===minIndex) {
                    // 到最后一張了
                    currentIndex=maxIndex
                  } else {
                    currentIndex--
                  }
                  flower.setAttribute("src", `images/image0${currentIndex}.jpg`)
                }
              </script>
            </body>
          </html>
          

          效果如圖:

          網(wǎng)絡(luò)技術(shù)正趨向于發(fā)展為一個巨大的移動APP市場,在Web開發(fā)的革命浪潮中起著指示性作用,自HTML引入以來,創(chuàng)建可轉(zhuǎn)換,有新意的網(wǎng)絡(luò)移動應(yīng)用程序變得So easy,web開發(fā)中運用先進(jìn)技術(shù)也很容易處理各種復(fù)雜Bug。

          作為專業(yè)的軟件開發(fā)工具,最新版的HTML總是更好用一些,它不但可以最大程度降低誤差,而且能快速開發(fā)出強大的網(wǎng)站和手機(jī)應(yīng)用程序。

          如果你在程序開發(fā)中用的是HTML5 版本,估計也沒少被網(wǎng)速語義響應(yīng)特性方面的問題所困擾。

          HTML6特性

          web開發(fā)行業(yè)要求有更好、更可靠的解決方案,HTML5的修改版本,也就是最新版的HTML6開發(fā)出了特殊的標(biāo)記語言,可提供更為順利高效的web開發(fā)平臺。

          這篇文章主要介紹HTML6,即HTML第六版的一些高級功能。

          1、相機(jī)集成

          如今瀏覽器連接著攝像頭和麥克風(fēng),網(wǎng)絡(luò)用戶之間的互動日益頻繁,相機(jī)集成增長迅速,手機(jī)和電腦對相機(jī)驅(qū)動的需求也大大增加,由于HTML6有照片或視頻捕捉功能,方便用戶輕松訪問照片以及設(shè)備存儲,能更好的控制攝像頭,提高檢測率。

          2、增加認(rèn)證

          HTML 6最顯著優(yōu)勢是在開發(fā)復(fù)雜的互動類網(wǎng)站和web應(yīng)用程序時可以優(yōu)化整個開發(fā)過程。訪問新版HTML時,瀏覽器應(yīng)及時提供強大的身份驗證,這一點至關(guān)重要,只有確保軟件的可靠性才能真正增強網(wǎng)站和瀏覽器的功能。

          3、庫

          jQuery是目前世界上最先進(jìn)的JavaScript庫,它給web開發(fā)帶來許多變化,然而,加載jQuery的成本也高,為了加快web應(yīng)用程序開發(fā)過程,大部分網(wǎng)站都選用緩存版本的JS庫,當(dāng)多數(shù)網(wǎng)頁設(shè)計師都喜歡某個特定的庫,就會被用在很多瀏覽器上,為了克服這種情況,web開發(fā)人員應(yīng)及時更新HTML版本,希望HTMl6能夠真正解決這個問題,提供更穩(wěn)定的庫。

          4、增強注釋

          一個功能齊全的HTML結(jié)構(gòu)要求單詞、句子、段落都必須有詳細(xì)的注釋。大多數(shù)web開發(fā)人員需要一個更強大的版本,最好連圖像和視頻都能夠明確注釋。

          5、強化微格式

          HTML標(biāo)簽不同于段落、標(biāo)題和頁腳,為了定義基本的細(xì)節(jié)如地址或電話號碼,就需要創(chuàng)建一個標(biāo)準(zhǔn)的標(biāo)簽。標(biāo)準(zhǔn)的標(biāo)簽不僅會提高搜索引擎排名,還能提高網(wǎng)站質(zhì)量,web開發(fā)人員可以用HTML6來定義地點、日期、產(chǎn)品、時間等等。

          6、可插入Pre-Processers

          為本地設(shè)備或機(jī)器修改代碼時,HTML5雖然支持將pre-processers語言轉(zhuǎn)換成JavaScript,但現(xiàn)有版本的HTML只能處理JavaScript的通用版本,HTML6采用先進(jìn)的功能,可以更好地改善代碼,優(yōu)化開發(fā)過程。

          7、添加命令

          在HTML的下一個版本中,關(guān)于web頁面的視頻結(jié)構(gòu)分布,預(yù)計添加更多命令。現(xiàn)有版本包含一個特定視頻的關(guān)鍵幀,能夠及時給文本添加注釋和字幕,但web開發(fā)人員為了打造一流視頻,需要更新版本,支持回叫信號,同步機(jī)制等功能。

          8、聯(lián)系信息認(rèn)證保護(hù)

          網(wǎng)站界面應(yīng)提供一個適當(dāng)?shù)拿睿瑫r提供自動訪問代碼。

          9、可插拔的語言

          如果HTML6自帶有影響力和可插入的語言,那么web開發(fā)人員可以輕松地創(chuàng)建更有新意的設(shè)計。

          10、瀏覽器兼容影像

          圖像像素的尺寸大小會在移動端和PC端之間不斷變化,增強版的HTML可以準(zhǔn)確提供圖片尺寸,篩選最優(yōu)照片,輕松解決照片問題。

          智能社 撰稿,更多知識請關(guān)注微信號zhi_neng_she ,具體代碼可在公眾號內(nèi)‘技術(shù)圈’獲得!

          年來,網(wǎng)頁設(shè)計已經(jīng)發(fā)生了很大的變化。一開始,網(wǎng)頁設(shè)計的主要目標(biāo)是為桌面用戶創(chuàng)造一個流暢的瀏覽體驗--畢竟這是人們訪問互聯(lián)網(wǎng)的唯一方式。但從那時起,移動革命已經(jīng)極大地改變了我們?yōu)榫W(wǎng)絡(luò)設(shè)計的方式。

          今天,當(dāng)設(shè)計師建立一個新的網(wǎng)站時,他們需要確保它看起來很棒,功能良好,并在各種瀏覽器和設(shè)備上傳達(dá)正確的信息。基本上可以保證,網(wǎng)站設(shè)計的客戶會要求提供他們網(wǎng)站的移動版本。響應(yīng)式設(shè)計原則使之成為可能。

          在這個全面的指南中,我們將涵蓋你需要知道的關(guān)于響應(yīng)式網(wǎng)頁設(shè)計的一切--從圍繞它的歷史,到最佳實踐,以及可供學(xué)習(xí)的強大實例。

          響應(yīng)式網(wǎng)頁設(shè)計的終極指南

          什么是響應(yīng)式網(wǎng)頁設(shè)計?

          響應(yīng)式網(wǎng)頁設(shè)計的歷史

          適應(yīng)不同的視口

          用于設(shè)計響應(yīng)式網(wǎng)站的方法

          調(diào)整圖像大小

          響應(yīng)式排版的使用

          移動優(yōu)先的設(shè)計

          響應(yīng)式網(wǎng)站實例

          什么是響應(yīng)式網(wǎng)站設(shè)計?

          響應(yīng)式網(wǎng)頁設(shè)計是一種設(shè)計網(wǎng)站的方法,它可以在各種屏幕尺寸上呈現(xiàn)網(wǎng)頁。這是用戶界面可塑性的一個例子--一個界面能夠流動,并根據(jù)可用的屏幕空間以理想的排列方式呈現(xiàn)。

          但是,響應(yīng)式設(shè)計不僅僅是一種技術(shù)方法,它是良好用戶體驗的支柱。與其把屏幕尺寸和分辨率看作是設(shè)計上的限制,不如把你的內(nèi)容看作是流動的,讓用戶完全控制他們想怎么看。

          響應(yīng)式設(shè)計需要結(jié)合流體網(wǎng)格、靈活的圖像和媒體查詢。 流暢的網(wǎng)格、靈活的圖像和媒體查詢作為一個整體一起工作,它們根據(jù)用戶的喜好重新格式化網(wǎng)頁,并提供盡可能好的網(wǎng)絡(luò)體驗。

          流暢的網(wǎng)格

          網(wǎng)格是一個由相交的線條組成的二維結(jié)構(gòu),讓你把內(nèi)容安排在列和行中。在流體網(wǎng)格中,網(wǎng)格中的每個元素都是以相對于其容器的比例來表示的,所以它的大小取決于它所處的容器的大小。這意味著網(wǎng)格中確切的列數(shù)可以根據(jù)用戶的視口(用戶設(shè)備上可以看到內(nèi)容的可見區(qū)域)的大小而變化。例如,你可以在桌面上顯示一個三欄式布局,而在移動設(shè)備上顯示一個單欄式布局。

          相對單位

          網(wǎng)頁元素,如內(nèi)容塊或按鈕的大小是以相對單位(如百分比)計算的。相對單位使得根據(jù)視口的大小來確定元素的大小成為可能。

          媒體查詢

          CSS(層疊樣式表)媒體查詢可以根據(jù)視口的特性改變頁面的風(fēng)格,比如視口的顯示分辨率和瀏覽器窗口的實際大小。

          響應(yīng)式設(shè)計的歷史

          上世紀(jì)80年代,智能手機(jī)的普及促使網(wǎng)頁設(shè)計界思考如何在不犧牲可用性或性能的情況下,在不同的顯示尺寸和分辨率上顯示內(nèi)容。

          網(wǎng)頁設(shè)計師Ethan Marcotte在他2010年的文章《響應(yīng)式網(wǎng)頁設(shè)計》中首次提出了 "響應(yīng)式設(shè)計 "這一術(shù)語。Marcotte的靈感來自于響應(yīng)式建筑設(shè)計,即一個空間會根據(jù)其內(nèi)的人數(shù)自動調(diào)整。顧名思義,響應(yīng)式設(shè)計通過調(diào)整布局元素以適應(yīng)可用空間的變化來響應(yīng)瀏覽器的寬度。

          除了響應(yīng)式設(shè)計之外,還出現(xiàn)了第二種更加量身定做的方法:適應(yīng)性設(shè)計。適應(yīng)性設(shè)計是一年前由網(wǎng)頁設(shè)計師Aaron Gustafson在一本書中提出的,設(shè)計師為每個斷點(通常是320px、480px、760px、960px、1200px和1600px)創(chuàng)建一個布局。設(shè)計適應(yīng)不同尺寸的視口,使用媒體查詢來定義小屏幕和大屏幕的屬性將被改變。因此,每個網(wǎng)頁都有多個適合不同屏幕尺寸的固定布局版本。

          當(dāng)我們比較響應(yīng)式和自適應(yīng)設(shè)計時,響應(yīng)式通常是高級設(shè)計師更有效的方法。因為你不需要創(chuàng)建多個版本的布局,所以實施和維護(hù)設(shè)計的工作量更少。通過響應(yīng)式設(shè)計,頁面的內(nèi)容會針對每個瀏覽器窗口進(jìn)行優(yōu)化安排。響應(yīng)式網(wǎng)頁設(shè)計也更有利于搜索引擎優(yōu)化,因為它在Googlebot抓取你的網(wǎng)站時可以節(jié)省資源。一個Googlebot用戶代理只需要抓取你的頁面一次,而不是抓取多次來檢索你的設(shè)計的多個版本。

          適應(yīng)不同的視口

          從巨大的電視屏幕到智能手表的小屏幕,今天人們有多種方式可以訪問網(wǎng)絡(luò)。為了給用戶創(chuàng)造一個舒適的瀏覽體驗,適應(yīng)不同的視口是很重要的。

          響應(yīng)式設(shè)計通過允許設(shè)計師針對特定的設(shè)備類別和各種屏幕尺寸來解決這個問題。為了創(chuàng)建一個響應(yīng)式設(shè)計,網(wǎng)頁設(shè)計師需要做兩件事。

          1. 在他們所有的HTML頁面上添加 "viewport "元標(biāo)簽。

          <meta name="viewport" content="width=device-width, initial-scale=1.0">


          這個標(biāo)簽為瀏覽器提供了如何渲染網(wǎng)頁的指示,定義了網(wǎng)頁的尺寸和比例。

          2. 使用媒體查詢,使其布局符合特定視口的要求。比如說。

          增加功能控件的尺寸,如按鈕,或在移動端上增加它們之間的相對距離。這將有助于在觸摸設(shè)備上遵守菲茨定律,并創(chuàng)造更舒適的用戶互動。

          顯示或隱藏網(wǎng)站布局中的特定元素。

          在特定類型的設(shè)備上改變某些元素的視覺屬性(如字體顏色)。

          如何定義媒體查詢

          下面是CSS文件中媒體查詢的一個例子。

          @media screen and (max-width: 480px) and (orientation: portrait) { .footer { float: none; width: auto; } }
          這個CSS媒體查詢的語法最初可能看起來很復(fù)雜,但只要你熟悉了這個結(jié)構(gòu),解碼信息就變得很容易。在@media之后和第一個開放的{括號之前的部分定義了條件。讓我們回顧一下我們例子中的條件。

          媒體類型。媒體類型是一種我們想要應(yīng)用CSS設(shè)置的設(shè)備類型。我們可以定義四類設(shè)備:屏幕(桌面、手機(jī)和平板電腦)、打印(打印機(jī))、語音(用于為視障用戶大聲讀出頁面的屏幕閱讀器)、所有(用于所有媒體類型)。如果你不指定這個屬性,CSS將默認(rèn)應(yīng)用所有屬性。

          媒體特征。min-width設(shè)置了一個最小的瀏覽器或屏幕寬度,某些樣式將適用于此。如果瀏覽器或屏幕的寬度低于這個限制,這些樣式將被忽略。max-width屬性的作用正好相反,任何超過最大瀏覽器或屏幕寬度的東西都不會適用于相應(yīng)的媒體查詢。

          方向。設(shè)備方向可以是縱向(垂直方向)或橫向(水平方向)。這個屬性主要適用于移動設(shè)備和平板電腦。

          在括號內(nèi),當(dāng)所有條件都滿足時,可以應(yīng)用一個樣式條件。在我們的例子中,我們要檢查三個條件。

          設(shè)備的類型是桌面、移動還是平板電腦?

          我們的設(shè)備是縱向的嗎?

          我們的設(shè)備屏幕分辨率(最大寬度)是否等于或小于480px?

          如果所有條件都滿足,這意味著用戶很可能是在縱向模式的小屏幕移動設(shè)備上觀看我們的作品。在這種情況下,設(shè)備將加載頁腳對象的CSS指令--否則,本節(jié)的指令將被忽略。

          如何構(gòu)造媒體查詢

          有兩種常見的結(jié)構(gòu)化CSS樣式的方法,要么把它們放在一個文件里,要么為不同類型的設(shè)備使用不同的文件。每種方法都有其優(yōu)點和缺點。例如,將媒體查詢與網(wǎng)站的其他CSS樣式一起全部放在一個CSS樣式表中,你將最大限度地減少渲染網(wǎng)頁所需的系統(tǒng)數(shù)量。 此外,通過將媒體查詢分布在不同的文件中(如 desktop.css, mobile.css),將使開發(fā)人員更容易在代碼中導(dǎo)航,因為所有與移動視口相關(guān)的樣式都位于同一個文件中。

          分割點

          我們在上面的媒體查詢例子中定義的分辨率可以作為一個斷點。斷點是響應(yīng)式網(wǎng)頁設(shè)計的基石,因為它們幫助設(shè)計師定義設(shè)備的類別,并為每組設(shè)備調(diào)整設(shè)計。

          "我的網(wǎng)站應(yīng)該使用哪些斷點?"這是網(wǎng)頁設(shè)計師的一個典型問題。沒有一套通用的斷點,因為所有的項目都不同,可能需要不同的分辨率。可以依靠世界范圍內(nèi)的屏幕分辨率統(tǒng)計來定義幾組常見的屏幕分辨率。

          360 x 640px(小型移動設(shè)備屏幕):10.10%。

          1366 x 768px(普通的筆記本電腦屏幕):9.3%。

          1920 x 1080px(大型桌面屏幕):8.35%。

          如果你使用Editor X,你會有3個默認(rèn)的斷點來開始使用。

          移動設(shè)備為350-750px

          平板電腦為751-1000px

          1001px和更大的臺式電腦

          但這些斷點并不是一成不變的。如果你想調(diào)整,你可以很容易地編輯它們或添加自定義斷點,以適應(yīng)你的項目的需要,而無需潛入代碼。

          在為你的項目選擇斷點時,要記住以下兩條基本規(guī)則。

          根據(jù)你所擁有的內(nèi)容來選擇斷點。你用來展示內(nèi)容的布局應(yīng)該決定你要使用哪些斷點。

          盡量使用最少的斷點。請記住,你將需要調(diào)整內(nèi)容以配合每個斷點。三個或四個斷點將使你有足夠的靈活性來框定你的內(nèi)容。

          用于設(shè)計響應(yīng)式網(wǎng)站的方法

          CSS媒體查詢是制作響應(yīng)式網(wǎng)站的基本工具。所有現(xiàn)代的網(wǎng)絡(luò)瀏覽器都能解析CSS媒體查詢,所以你在調(diào)整設(shè)計以適應(yīng)特定平臺時不會遇到麻煩。

          為了讓你的生活更輕松,在創(chuàng)建CSS媒體查詢的時候,你不應(yīng)該從頭開始。你可以使用一個CSS框架,如Bootstrap、Bulma或Foundation CSS。這種方法的好處是,框架帶有一套預(yù)定義的斷點和基本對象的視覺樣式,如正文、按鈕、輸入欄等。

          另一種可用于響應(yīng)式設(shè)計的方法是JavaScript。這種方法可以應(yīng)用于不支持CSS媒體查詢的設(shè)備。可以用JavaScript來檢測瀏覽器窗口的大小,并加載相關(guān)的樣式表。這里有一段代碼,可以用來計算窗口的當(dāng)前大小。

          $(window).height(); $(window).width();

          每當(dāng)用戶改變他們的瀏覽器窗口時,下面的JQuery代碼將被觸發(fā),它將即時加載相關(guān)樣式。

          <script type="text/javascript">
            $(document).ready(function(){
              $(window).bind("resize", resizeWindow);
              function resizeWindow(e){
                // this code will be triggered every time the user will change the browser window
                var newWindowWidth=$(window).width();
          
                if(newWindowWidth < 481){  
                // if the size of the windows is less than 481 it's likely that the person browse on mobile   
                         $("link[rel=stylesheet]").attr({href : "mobile.css"});       
                  }       
              }
            });
          </script>

          CSS媒體查詢和JavaScript并不是競爭性的方法,它們可以很好地一起工作。

          調(diào)整圖像大小


          圖像是現(xiàn)代網(wǎng)絡(luò)的一個重要元素。圖像的質(zhì)量在很大程度上影響著人們對設(shè)計的看法--不相關(guān)的圖像或像素化的資產(chǎn)很可能會給你的訪問者造成不好的印象。不僅要精心挑選相關(guān)的圖像(那些能夠向你的受眾傳達(dá)正確信息的圖像),而且要確保圖像能夠很好地適應(yīng)任何瀏覽器的尺寸。

          有兩種類型的圖像,光柵圖像(JPG、PNG、TIFF)和矢量圖像(SVG)。第一組代表了網(wǎng)絡(luò)上的大多數(shù)圖像,這組圖像的關(guān)鍵問題是它們不是自然流動的。不像矢量圖像可以在不損失質(zhì)量的情況下擴(kuò)大尺寸,光柵圖像必須為不同的分辨率進(jìn)行修改。

          為不同分辨率優(yōu)化光柵圖像的三種方法

          讓我們了解更多關(guān)于圖像優(yōu)化的信息,并獲得關(guān)于如何調(diào)整圖像大小的實用技巧。你可以使用CSS屬性為不同的分辨率優(yōu)化你的圖像。

          1. 用圖像寬度屬性調(diào)整圖像的大小。寬度屬性定義了圖像的固定寬度。下面的CSS規(guī)則將定義寬度為500px。

          這種方法的缺點是,它對你的圖片使用固定寬度,所以它在所有設(shè)備上都會以完全相同的尺寸顯示。這種方法對于響應(yīng)式網(wǎng)站來說不是很好用,因為尺寸不當(dāng)?shù)膱D片很容易破壞布局。

          2. 用CSS寬度屬性設(shè)置為100%來調(diào)整圖像大小。

          img { width:100%; }

          與前一種方法的關(guān)鍵區(qū)別在于,你不在代碼中指定圖片的精確寬度,而是讓瀏覽器根據(jù)需要調(diào)整圖片的大小。有了width: 100%;屬性,圖像就會自動放大和縮小。這種方法的缺點是,圖像在放大時可能會出現(xiàn)像素化。

          3. 用CSS最大寬度屬性接收。

          img { height: auto; max-width: 100%; }

          最大寬度屬性允許圖像保持其長寬比和比例。當(dāng)最大寬度被設(shè)置為100%時,圖像將適合其容器的全部寬度。只要沒有其他基于寬度的圖像CSS樣式覆蓋這一規(guī)則,或者查看區(qū)域比圖像的原始寬度窄,這個圖像就會以其原始尺寸加載。這種方法對響應(yīng)式網(wǎng)頁設(shè)計非常有用。

          顯示尺寸和視覺資產(chǎn)

          考慮不同類型的設(shè)備如何渲染圖像也很重要。雖然有可能在所有類型的設(shè)備上使用相同的文件,但為小屏幕設(shè)備調(diào)整圖像大小的過程需要額外的計算能力,所以以原始分辨率使用大文件可能會導(dǎo)致性能下降。

          同時,高分辨率顯示器,如蘋果 "視網(wǎng)膜 "和安卓 "hDPI",可能需要你以正常分辨率的兩到三倍提供視覺資產(chǎn),以達(dá)到體面的視覺質(zhì)量(@2x,和@3x)。為了解決這兩個問題,建議使用一個特殊的工具,如Responsive Breakpoints,它將允許你為每個斷點準(zhǔn)備單獨的圖像。

          如果你使用Editor X來建立一個響應(yīng)式網(wǎng)站,你不必寫CSS代碼來使你的光柵圖像在不同的視口正確顯示。該平臺允許你設(shè)置一個精確的寬度或高度,設(shè)置一個最大寬度或高度的百分比,以及設(shè)置一個最大寬度或高度的像素。你還可以設(shè)置一個圖像焦點,這樣當(dāng)以不同格式觀看時,視覺就會保持在中心位置。

          響應(yīng)性地使用排版

          人們訪問網(wǎng)站是為了獲取內(nèi)容,而書面文字占了其中的絕大部分。這意味著文本在任何視口尺寸下都是可讀的,這一點至關(guān)重要。因此,當(dāng)涉及到響應(yīng)式排版時,有幾件事情需要記住。


          不要把文字放在圖形中

          將文本放在圖形中,你會立即使其反應(yīng)速度降低。文本不能在不損失質(zhì)量的情況下被放大,因此你必須為每個斷點重新創(chuàng)建視覺資產(chǎn)。

          選擇可以縮放的字體

          為響應(yīng)式網(wǎng)頁設(shè)計優(yōu)化排版的過程從選擇合適的字體開始。

          要做到這一點,網(wǎng)頁設(shè)計師需要確保字體的大小足以讓人一目了然。這一點對于移動設(shè)備尤其重要--用戶不應(yīng)該為了能夠閱讀文字而需要雙擊或捏合變焦。

          選擇能清晰縮放的字體,在電視大屏幕和智能手表的小屏幕上同樣可讀。一般來說,建議使用網(wǎng)絡(luò)安全字體,如Helvetica,因為它們經(jīng)過優(yōu)化,在不同的分辨率下看起來都不錯。

          適當(dāng)調(diào)整文字大小

          在網(wǎng)絡(luò)上,字體的大小可以有兩種不同的方式。

          絕對值(像素、點

          相對值(百分比,em/rem,視口寬度或高度vw/vh)

          讓我們從最流行的選項開始--像素。像素是絕對值。用像素定義的字體大小將基于用戶屏幕的像素大小。當(dāng)你使用像素時,現(xiàn)代瀏覽器能夠使你的設(shè)計在不同的分辨率下看起來相似。

          由于大多數(shù)設(shè)計師都使用像素,這個單位在產(chǎn)品團(tuán)隊中非常流行。然而,像素不能使用戶根據(jù)自己的需要調(diào)整文字,并使你的設(shè)計不那么容易獲得。

          另一個流行的選擇是一個叫做em的相對值。當(dāng)你使用em時,一個元素的em的實際大小是相對于其父元素的字體大小計算的。em相對值提供了兩個重要的好處。

          對設(shè)計師的好處。相對值允許嵌套字體大小。Em從它的父元素中繼承其大小,而rem從根樣式中繼承。

          對用戶的好處。當(dāng)你使用相對值時,你給了用戶一個機(jī)會來改變他們喜歡的默認(rèn)字體大小,網(wǎng)站會自動調(diào)整以適應(yīng)他們的需要。

          如果你用X編輯器建立一個網(wǎng)站,你可以用文本編輯器來縮放一個文本元素。

          現(xiàn)在我們來討論一下百分比。在字體大小為100%的情況下,一個頁面中的所有元素的大小都是相對于瀏覽器的默認(rèn)字體大小而言的。

          body { font: normal 100% Roboto, sans-serif; }

          最后但并非最不重要的是,當(dāng)字體以 "vw "單位定義時,文本大小將跟隨瀏覽器窗口的大小。

          <h1 style="font-size:12vw">Hello World</h1>

          另一件要考慮的事情是,不同設(shè)備的字體大小需要不同。它在桌面上應(yīng)該大一些,在移動設(shè)備上應(yīng)該小一些。同樣,使用相對值的好處是,你不僅可以定義一個特定元素的理想尺寸,還可以定義該尺寸與其他元素尺寸的關(guān)系,在你的布局中保持良好的比例。

          下面的CSS將為h1元素設(shè)置一個默認(rèn)的字體大小,桌面版為3.5 rem,移動版為2 rem。

          h1 { font-size: 3.5rem; } @media only screen and (max-width: 480px) { h1 { font-size: 2rem; } }

          雖然沒有精確的字體大小規(guī)則,但建議應(yīng)用黃金比例來找到精確的字體大小。例如,如果桌面的基本字體是16px,那么標(biāo)題h1的大小將通過基本字體大小乘以1.618來計算(大約是26px)。

          如果你用Editor X建立一個網(wǎng)站,你可以用文本編輯器為一個文本元素設(shè)置最小和最大的字體大小。

          你還可以為不同的斷點設(shè)置文本在不同的最大和最小尺寸范圍之間縮放,以使你的網(wǎng)站排版完全響應(yīng)。這將確保你的文本在你調(diào)整屏幕大小時能順利地縮放。

          行長和行距

          為了達(dá)到良好的可讀性,你需要限制文本行的長度。一個好的經(jīng)驗法則是,桌面上每行使用50至60個字符,移動設(shè)備上每行使用30至40個字符。可以使用內(nèi)容容器的寬度屬性或使用Ch的 "長度值 "來限制每行的字符數(shù)。Ch代表元素字體中的字形 "0"(0,Unicode字符U+0030)的寬度。

          p { overflow: hidden; max-width: 40ch; }

          此外,你不應(yīng)該擠壓線條,因為行距太緊會導(dǎo)致眼睛疲勞。最佳的做法是使用120%-140%的行距,以獲得良好的可讀性。行高(line-height)CSS屬性通常用于設(shè)置文本行之間的距離。我們可以用百分比來設(shè)置這個屬性,使其與元素本身的字體大小相對應(yīng)。

          p {
          line-height: 34%;
          }

          移動優(yōu)先的設(shè)計

          在過去的十年中,移動設(shè)備在我們的日常生活中扮演的角色發(fā)生了巨大的變化。事實上,56%的網(wǎng)站流量來自于智能手機(jī)。移動設(shè)計的優(yōu)化是網(wǎng)頁設(shè)計過程中的一個關(guān)鍵部分--因為一個沒有針對移動設(shè)備進(jìn)行優(yōu)化的網(wǎng)站正在失去其大約一半的流量。

          移動優(yōu)先設(shè)計是一種方法,它建議設(shè)計師先創(chuàng)建一個在最小的斷點上運行良好的布局,然后再針對更大的視口進(jìn)行調(diào)整。

          移動和桌面設(shè)計之間有三個關(guān)鍵區(qū)別。

          顯示器的大小。在手機(jī)上,你有更少的空間來顯示你的內(nèi)容,需要仔細(xì)地確定你想顯示的內(nèi)容的優(yōu)先次序。

          交互方式。由于用戶在移動設(shè)備上使用他們的手指與內(nèi)容互動,像懸停效果這樣的動畫就不能很好地發(fā)揮作用。

          使用情境。人們可以在旅途中與內(nèi)容互動(例如,在等待火車的時候),所以移動網(wǎng)站應(yīng)該為較短的用戶會話和較少的注意力而設(shè)計。

          遵循移動優(yōu)先的用戶體驗設(shè)計方法提供了幾個主要的好處。

          使得響應(yīng)式設(shè)計更容易。它將幫助你確定內(nèi)容和功能的優(yōu)先次序,并刪除一切不是絕對必要的東西。因此,你將有可能減少用戶在移動端和你為之設(shè)計的任何其他平臺的認(rèn)知負(fù)荷。

          有利于搜索引擎優(yōu)化。谷歌評估網(wǎng)站的排名主要是基于其移動版本的內(nèi)容。如果一個頁面需要移動用戶進(jìn)行額外的互動,例如將內(nèi)容放大以使其可讀,那么谷歌可能不會判斷它是移動友好的。你可以參加谷歌的移動友好測試,以檢查你的網(wǎng)站的設(shè)計。

          以下是你在進(jìn)行移動設(shè)計時需要考慮的幾個方面。

          實行內(nèi)容優(yōu)先的策略

          在你設(shè)計的每一個頁面,都要考慮你想傳達(dá)什么信息。圍繞這個信息構(gòu)建頁面,并將基本信息放在折疊上方。例如,當(dāng)你設(shè)計一個 "聯(lián)系我們 "的頁面時,把信息放在頁面的頂部,這樣用戶就不需要通過滾動來找到它。

          創(chuàng)建一個響應(yīng)式網(wǎng)站的過程應(yīng)該總是從規(guī)劃布局開始。將你的內(nèi)容和功能元素組織起來,為訪問者提供盡可能好的體驗。這并不意味著你需要從一開始就創(chuàng)建一個最終的、像素完美的設(shè)計。事實上,我們建議創(chuàng)建一個未來設(shè)計的示意圖,以顯示每一個包含內(nèi)容和功能元素的塊在頁面上的位置。這樣,你就可以與你的團(tuán)隊和利益相關(guān)者一起評估不同的布局變化,并選擇你認(rèn)為對你的用戶最有效的那一個。

          使用條件性加載

          在確定內(nèi)容的優(yōu)先次序時,你可能想在移動設(shè)備上隱藏一些內(nèi)容。CSS屬性display: none; 允許你這樣做。你可以在CSS中對需要隱藏的特定元素應(yīng)用這個屬性。例如,你可能有兩個CSS樣式,desktop.css用于臺式機(jī),mobile.css用于移動設(shè)備。

          Desktop.css

          #content { width: 100%; }

          Mobile.css

          #content { display: none; }

          注意,display:none有時會與visibility: hidden混淆。這是兩個不同的CSS指令。可見性:隱藏只是隱藏了內(nèi)容,所以它變得不可見(沒有被畫出來),不能接受焦點,盡管它仍然在頁面上。另一方面,"顯示:無 "則完全擺脫了內(nèi)容。

          為舒適的互動而設(shè)計

          用戶通過點擊與桌面網(wǎng)站互動,但移動版本則是通過手指的點擊和滑動。人們也只用一只手來使用他們的移動設(shè)備,因此,優(yōu)化網(wǎng)頁布局,使所有的關(guān)鍵功能元素--如行動號召按鈕--都位于對拇指友好的區(qū)域(用戶不應(yīng)該為了夠到一個重要的元素而伸展他們的拇指)是很重要的。


          所有自來水目標(biāo)的尺寸都應(yīng)該適當(dāng)。諸如行動號召按鈕等功能元素的大小至少應(yīng)該是9毫米,這相當(dāng)于用戶拇指的大小。如果你將兩個互動控件并排放置,你需要在這些互動選項之間添加足夠的空白。

          使用清晰的視覺指示器

          觸摸屏沒有顯示懸停效果的能力,因為沒有光標(biāo)。UI的清晰度在移動設(shè)備上起著更重要的作用,重要的是要把每一個元素都設(shè)計成能讓用戶最大限度地理解其功能的方式。通過使用一致的視覺風(fēng)格是可以實現(xiàn)這一目標(biāo)的。例如,你可以對所有的互動元素使用一種特定的藍(lán)色。

          為移動端優(yōu)化導(dǎo)航

          大多數(shù)時候,網(wǎng)頁設(shè)計師在移動端依賴漢堡包菜單。然而,可以利用一個更有利的模式,如prioity+導(dǎo)航模式。這種模式保證最優(yōu)先的選項對用戶來說總是可見的,而其余的選項則隱藏在 "更多 "鏈接后面。

          牢記移動設(shè)備的硬件能力

          加載時間慢是人們放棄網(wǎng)站的一個常見原因。Jakob Nielsen定義了三個響應(yīng)時間限制。0.1秒給人以瞬時反應(yīng)的感覺。理想情況下,你的網(wǎng)站應(yīng)該在0.1秒內(nèi)做出反應(yīng)。1秒保持用戶的思維流暢。10秒大約是保持用戶注意力的極限。但根據(jù)谷歌的研究,當(dāng)頁面加載時間從1秒到3秒,跳出的概率會增加32%。


          <img src="image.png" loading="lazy" alt="…" >

          始終衡量你的網(wǎng)站性能。使用谷歌的速度記分卡和Dexecure等工具來跟蹤你當(dāng)前的性能,例如在移動端加載你的網(wǎng)站所需的時間。查看前端性能檢查表,了解更多關(guān)于性能優(yōu)化的信息。

          如果你用Editor X建立一個網(wǎng)站,你的布局的網(wǎng)格中的設(shè)計元素會自動級聯(lián)以適應(yīng)不同的視口,所以當(dāng)在一個較大的斷點上進(jìn)行修改時,會應(yīng)用到每個較小的斷點。

          盡量減少打字

          響應(yīng)式網(wǎng)頁設(shè)計不僅僅是讓內(nèi)容適合,它也是為了給你的用戶創(chuàng)造更舒適的交互方式。在移動設(shè)備的情況下,打字是用戶旅程中最痛苦的部分之一。

          小屏幕使移動設(shè)備上的打字變得困難和容易出錯。只要有可能,盡量在在線表格中使用預(yù)填數(shù)據(jù)。移動端的好處是,你可以利用它的一些硬件能力。

          這里有一些關(guān)于如何盡量減少在移動設(shè)備上打字的提示。

          使用GEO-location數(shù)據(jù)在運輸和賬單信息中預(yù)先填入用戶城市。你可以使用谷歌的Places API來提供基于用戶位置的準(zhǔn)確建議。

          使用設(shè)備攝像頭,讓用戶拍攝信用卡的照片,并自動填寫信用卡信息。

          使用Touch ID/Face ID,而不是要求用戶輸入他們的憑證。

          在搜索表單中使用語音輸入。

          在真實的設(shè)備和不同的瀏覽器上測試你的設(shè)計

          當(dāng)你完成你的網(wǎng)站工作時,你應(yīng)該投入時間在真實的設(shè)備上測試它。創(chuàng)建一個用戶在你的網(wǎng)站上應(yīng)該完成的常見任務(wù)的清單,并邀請代表你的目標(biāo)受眾的人參加可用性測試會議。

          在測試過程中,你可以看到你的網(wǎng)站在不同平臺(安卓、iOS)上的工作情況,以及它的跨瀏覽器兼容性(Chrome、Safari、Firefox)。如果你懷疑某些CSS樣式指令是否被某個特定的瀏覽器所支持,你可以在Caniuse中檢查。測試將告訴你用戶在哪里面臨摩擦,以及你的網(wǎng)站在哪些方面需要優(yōu)化。

          響應(yīng)式網(wǎng)站實例

          解釋響應(yīng)式網(wǎng)站設(shè)計如何工作是一回事,看到實踐是另一回事。看看下面的響應(yīng)式網(wǎng)站設(shè)計例子,改變你的瀏覽器大小,看看每個設(shè)計是如何響應(yīng)變化的。


          Taupe and Honey是一個為企業(yè)家服務(wù)的女性創(chuàng)意工作室,代表了一個簡單而優(yōu)雅的響應(yīng)式網(wǎng)頁設(shè)計的例子。該網(wǎng)站的布局可以根據(jù)瀏覽器的寬度靈活調(diào)整,并根據(jù)可用的屏幕空間來排列內(nèi)容。當(dāng)你在桌面上瀏覽該網(wǎng)站時,你可以看到一個分屏布局,很好地將視覺效果和文字搭配起來。

          然而,一旦瀏覽器窗口變窄,內(nèi)容就會重新流轉(zhuǎn),使布局更加垂直,因為它轉(zhuǎn)變?yōu)閱螜冢瑸榉奖銤L動進(jìn)行了優(yōu)化。請注意,該網(wǎng)站在桌面上顯示了一個可見的頂層菜單,但在移動端卻將其隱藏在漢堡包圖標(biāo)后面。字體大小也發(fā)生了變化,以便在不同類型的設(shè)備上創(chuàng)造一個舒適的閱讀體驗。

          Swank Studio網(wǎng)站的截圖將圖片放在首位,并將文字降到最低。Swank Studio網(wǎng)站的截圖將圖片放在首位,并將文字降到最低。

          斯萬克工作室的圖像導(dǎo)向型網(wǎng)站在移動設(shè)備上裁剪英雄圖像,以展示主體的臉部,并將文字降到最低。

          Swank Studio是一家豪華創(chuàng)意工作室,是我們名單中的下一個。這個網(wǎng)站遵循一種極簡主義的方法--它使用最少的文字,并在很大程度上依靠圖片來傳達(dá)信息。在大屏幕上,關(guān)鍵信息周圍的留白很寬敞,給網(wǎng)站的訪問者創(chuàng)造了一個積極的印象。

          當(dāng)你切換到移動端時,你會注意到兩件事:圖片被裁剪掉,以顯示一個女人的臉,而文字的比例會根據(jù)需要調(diào)整,變得與屏幕的比例更大。這樣做是為了在每個屏幕尺寸上保持視覺平衡,確保移動用戶不會錯過關(guān)鍵信息。

          Domaine Alepin網(wǎng)站的截圖,該網(wǎng)站在其主頁上使用人字形布局,在移動端使用單欄式布局。

          Domaine Alepin在其主頁上使用人字形布局,在移動端則轉(zhuǎn)換為單欄式布局。這簡化了瀏覽體驗,同時保留了內(nèi)容。

          在Domaine Alepin這個開發(fā)商的網(wǎng)站上,我們看到了一個類似的方法。該網(wǎng)站在主頁上采用了 "之 "字形布局。

          當(dāng)瀏覽器窗口的寬度被最小化時,設(shè)計使用一個新的單欄布局。在較小的尺寸上沒有刪除任何內(nèi)容,它只是重新安排了一個更好的觀看體驗。

          圖像對這個網(wǎng)站起著關(guān)鍵的作用,因此,確保每一個視覺的大小都按比例變化,不至于無法使用是至關(guān)重要的。你也可以注意到字體大小的變化,保持與屏幕的大小成比例。

          最后,桌面和移動用戶都可以使用的視差效果是一個相當(dāng)不尋常的設(shè)計選擇。通常情況下,視差滾動在移動設(shè)備上看起來并不漂亮,但Domaine Alepin能夠在兩個平臺上都創(chuàng)造出漂亮的視差過渡。

          你在創(chuàng)造好的內(nèi)容方面投入越多,你的用戶就越有機(jī)會喜歡你的網(wǎng)站。如果你使用Editor X,創(chuàng)建響應(yīng)式網(wǎng)站的過程完全不涉及編碼定義網(wǎng)格和斷點,所以你可以專注于你希望觀眾看到的內(nèi)容--無論他們在哪個設(shè)備上。


          主站蜘蛛池模板: 亚洲乱色熟女一区二区三区丝袜| 国产熟女一区二区三区五月婷| 日韩人妻无码免费视频一区二区三区| 精品免费久久久久国产一区| 免费无码一区二区三区蜜桃大| 亚洲一区二区在线免费观看| 国产免费一区二区三区免费视频| 亚洲欧美日韩国产精品一区| 精品一区二区三区在线视频| 中文字幕亚洲一区| 日本精品少妇一区二区三区| 国产天堂在线一区二区三区| 天堂成人一区二区三区| 成人精品一区二区不卡视频| 亚洲无码一区二区三区| 国产主播福利一区二区| 精品国产一区二区三区久久久狼 | 久夜色精品国产一区二区三区| 精品国产AV无码一区二区三区| 一本久久精品一区二区| 亚洲日韩AV无码一区二区三区人 | 国产免费一区二区三区在线观看| 亚洲AV无码一区二三区| 亚洲一区二区视频在线观看 | 伊人久久精品一区二区三区| 69福利视频一区二区| 国产吧一区在线视频| 精品国产一区二区三区AV | 国产一区二区视频免费| 国产大秀视频一区二区三区| 亚洲一区二区精品视频| 久久免费国产精品一区二区| 中文字幕一区二区三区久久网站 | 色妞AV永久一区二区国产AV| 中文字幕一区二区人妻性色| 亚洲天堂一区二区| 久久久久人妻精品一区三寸| 精品理论片一区二区三区| 日本一区午夜艳熟免费| 亚洲av成人一区二区三区| 日本一区免费电影|