響應(yīng)式的適配對象

響應(yīng)式是一種網(wǎng)頁前端技術(shù)，讓網(wǎng)頁可以根據(jù)分辨率、設(shè)備的變更，自動(dòng)調(diào)整樣式和布局。

它的誕生起源于移動(dòng)互聯(lián)網(wǎng)興起的熱潮，彼時(shí)智能手機(jī)訪問網(wǎng)站的需求激增，但多數(shù)網(wǎng)站的適配都是面向電腦端的大屏幕，僅有少數(shù)網(wǎng)站會(huì)額外開發(fā)符合移動(dòng)端顯示需求的版本（自適應(yīng)）。

響應(yīng)式的提出，就是為了解決這種問題，通過建立一套約定好的設(shè)計(jì)、開發(fā)方法，用一套代碼自動(dòng)適配臺(tái)式電腦、筆記本、平板、移動(dòng)端等各種設(shè)備，提高網(wǎng)站的兼容性和開發(fā)效率。

而學(xué)習(xí)響應(yīng)式，首先就要從瀏覽器開始說起。

瀏覽器是一個(gè)非常特殊的軟件，比如大家熟知的 Chrome、Safari、Eage 等，我們?nèi)粘ＴL問的所有網(wǎng)頁，都需要通過瀏覽器加載并渲染出最終的樣式。

可以把網(wǎng)頁 HTML 文件理解成是一個(gè)程序，而瀏覽器就是運(yùn)行這個(gè)程序的系統(tǒng)（環(huán)境），也就是說解析網(wǎng)頁依靠的是瀏覽器而不是 Windows、Mac、iOS、Android、Linux 等客戶端系統(tǒng)。

瀏覽器即系統(tǒng)中的系統(tǒng)（類似虛擬機(jī))，不管在任何系統(tǒng)或設(shè)備上，只要安裝了瀏覽器，就可以用大體相同的規(guī)則、邏輯去加載、渲染出網(wǎng)頁。

但不同設(shè)備的屏幕有很大差異，網(wǎng)頁如何識(shí)別并匹配這些設(shè)備呢？

方法主要有兩種，第一種是瀏覽器會(huì)識(shí)別當(dāng)前系統(tǒng)和設(shè)備，并提供接口讓網(wǎng)頁讀取。而部分網(wǎng)站會(huì)準(zhǔn)備多種規(guī)格的網(wǎng)頁，根據(jù)獲取的設(shè)備類型推送對應(yīng)的規(guī)格，這種做法叫做自適應(yīng)模式。

通常自適應(yīng)只區(qū)分桌面端和移動(dòng)端兩種，較大的門戶、購物、工具類網(wǎng)站，普遍使用自適應(yīng)模式。因?yàn)橐苿?dòng)端訪問網(wǎng)頁的需求并不高，所以會(huì)對移動(dòng)端版本做大量的精簡，降低開發(fā)、維護(hù)成本。

另一種方法，則是讀取瀏覽器視圖區(qū)域的分辨率。任何瀏覽器的界面，都包含功能區(qū)域和視圖區(qū)域兩個(gè)部分，功能區(qū)域提供相關(guān)的軟件菜單、操作按鈕，視圖區(qū)域則是顯示網(wǎng)頁界面的區(qū)域。隨著設(shè)備和屏幕分辨率的變化，瀏覽器的大小也會(huì)不同，網(wǎng)頁視圖區(qū)域也會(huì)跟著縮放。

網(wǎng)頁視圖注定小于整個(gè)瀏覽器的軟件窗口，而瀏覽器作為軟件，在系統(tǒng)中的尺寸不等于系統(tǒng)分辨率（或設(shè)備分辨率），一方面有系統(tǒng)的全局組件影響，另一方面窗口并不是非得全屏，用戶可以任意調(diào)整。

所以響應(yīng)式網(wǎng)頁就是根據(jù)瀏覽器的視圖區(qū)域做適配，不管你是在電腦上縮放軟件窗口，還是在不同的設(shè)備、系統(tǒng)中打開，本質(zhì)上都只是顯示區(qū)域大小的變更。而在瀏覽器的檢查選項(xiàng)中，模擬不同的設(shè)備其實(shí)就是縮放出一個(gè)指定的視圖窗口出來。

這種依賴關(guān)系延伸出一個(gè)新的知識(shí)點(diǎn)，即網(wǎng)頁顯示的分辨率，和顯示設(shè)備的屏幕分辨率，是兩套不同的體系。

這是因?yàn)橛布直媛屎拖到y(tǒng)渲染的分辨率是兩個(gè)概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系統(tǒng)的屏幕分辨率選擇中，默認(rèn)的卻是 1512*982（即原來的 1/2）。

這是因?yàn)橛布直媛侍吡耍?:1 渲染的話，那么大多數(shù)圖標(biāo)、文字是無法被看清的，所以默認(rèn)使用了 2x 的規(guī)格渲染。但這只是其中一個(gè)選項(xiàng)，在 HIDPI 技術(shù)的加持下，用戶還可以選擇別的分辨率，比如我會(huì)進(jìn)一步調(diào)高到 1800*1169。

在 Windows 系統(tǒng)中同理，雖然有很多高分辨率的屏幕，但是用戶為了看清內(nèi)容，會(huì)在系統(tǒng)中設(shè)置 120%、150% 的放大效果，等于為系統(tǒng)分辨率做出變更。

說到底，系統(tǒng)顯示分辨率的規(guī)格也是無窮無盡的。但是不管外部的轉(zhuǎn)換邏輯有多復(fù)雜，規(guī)格有多少，都和響應(yīng)式網(wǎng)頁無關(guān)，它只需要認(rèn)準(zhǔn)瀏覽器的視圖區(qū)域分辨率即可。

所以了解線上案例的響應(yīng)式布局規(guī)則，或者檢查已經(jīng)開發(fā)好的響應(yīng)式頁面，并不需要切換不同設(shè)備查看，只要拖拽縮放瀏覽器的大小（主要是寬度）即可獲得完整的響應(yīng)效果。

最后總結(jié)起來，響應(yīng)式網(wǎng)頁是面向?yàn)g覽器視圖區(qū)域做適配的布局方法，而不是面向系統(tǒng)、屏幕分辨率的適配，這和自適應(yīng)布局有本質(zhì)的差異。

在 B 端領(lǐng)域，絕大多數(shù)項(xiàng)目都只部分兼容響應(yīng)式，放棄移動(dòng)端的適配，即使支持移動(dòng)端也是使用自適應(yīng)的混合模式。要面對這些復(fù)雜的場景，就月需要理解上面這些基礎(chǔ)的概念，否則設(shè)計(jì)師就無法真正滿足響應(yīng)式項(xiàng)目的前期創(chuàng)建和后期交付需要。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

蘭亭妙微UI設(shè)計(jì)公司：你會(huì)發(fā)現(xiàn)現(xiàn)在的移動(dòng)端UI界面中極簡風(fēng)的設(shè)計(jì)越來越多了。極簡主義設(shè)計(jì)風(fēng)之所以能夠如此的受歡迎，很大程度是源自于它對于設(shè)計(jì)、開發(fā)的友好，它不僅讓APP的加載速度更快，讓APP對于不同屏幕的兼容性更加優(yōu)異。與此同時(shí)，越來越多的用戶也開始青睞極簡風(fēng)的設(shè)計(jì)，極簡風(fēng)的UI界面不僅漂亮，而且在可用性上也非常的突出：它易于導(dǎo)航，并且具備強(qiáng)大的視覺表現(xiàn)力。

1、一屏一個(gè)任務(wù)

降低用戶完成任務(wù)之時(shí)所需耗費(fèi)的精力。

你為APP的每一屏都應(yīng)當(dāng)承載一個(gè)對用戶有用、有價(jià)值的交互或者任務(wù)，一次完成一個(gè)任務(wù)，且只能有一個(gè)任務(wù)，其中應(yīng)該不包含超過1次的行為召喚（CTA）。這樣的設(shè)計(jì)能讓用戶更輕松地學(xué)習(xí)，更便捷地使用，在設(shè)計(jì)上也更容易添加刪減以及構(gòu)建。

以Uber為例，Uber 清楚地知道用戶的目的是乘坐出租車，所以，應(yīng)用程序不會(huì)一次給用戶太多的信息，會(huì)根據(jù)地理信息自動(dòng)檢測用戶的位置，而Uber 提供給用戶的每一個(gè)界面的交互都是單個(gè)的，用戶只需要選取位置，下單即可。

2、隱形的UI

內(nèi)容即是界面。

專注于內(nèi)容，并且盡量刪除不必要的元素，這樣可以縮短用戶集中注意力的時(shí)間，用戶將會(huì)更快地被引導(dǎo)到他們正在搜尋的內(nèi)容，而內(nèi)容本身正是一個(gè)隱形的界面。最典型的就是Google 地圖。在重新設(shè)計(jì)的時(shí)候，Google 地圖刪除了所有不必要的面板和按鈕，地圖本身就是最好的界面。

3、呼吸的空間

使用負(fù)空間讓重要的內(nèi)容吸引用戶的注意力。

留白，或者負(fù)空間，指的是頁面設(shè)計(jì)布局中的空白部分，或者空白元素，它們常常被忽略和忽視，雖然許多設(shè)計(jì)師認(rèn)為這樣的設(shè)計(jì)會(huì)浪費(fèi)屏幕的空間，但是留白本身就是設(shè)計(jì)的基本元素之一。

留白可以提升可讀性和內(nèi)容的優(yōu)先級，在頁面布局中也發(fā)揮著重要的作用。因此，它可以合理地簡化UI并提升用戶體驗(yàn)。

4、直觀的導(dǎo)航

導(dǎo)航應(yīng)該是每個(gè)APP當(dāng)中優(yōu)先級最高的組成部分。移動(dòng)端APP中導(dǎo)航應(yīng)當(dāng)容易被發(fā)現(xiàn)，可訪問的，且盡可能少的占用屏幕空間。由于小屏幕的限制以及內(nèi)容優(yōu)先級的需要，移動(dòng)端導(dǎo)航的可訪問性設(shè)計(jì)一直是一個(gè)挑戰(zhàn)。

標(biāo)簽欄和導(dǎo)航欄是非常適合用來展現(xiàn)較少的導(dǎo)航選項(xiàng)的，它們非常適合用來展示主要的導(dǎo)航選項(xiàng)，一個(gè)簡單的點(diǎn)擊就能流暢地切換到不同的頁面。

5、單手操作

讓你的設(shè)計(jì)兼容更大的屏幕。

關(guān)于用戶如何握持手機(jī)，下面的圖為你展現(xiàn)了最常見的三種模式：

通過觀察可以發(fā)現(xiàn)，85%的用戶使用單手握持他們的手機(jī)，下面的熱圖展示了從2007年一來，各種不同尺寸的iPhone 的拇指操作區(qū)域。毫無疑問，隨著屏幕尺寸的增加，拇指能夠觸及的區(qū)域的比例正在逐步降低。所以，移動(dòng)端界面的用戶體驗(yàn)設(shè)計(jì)應(yīng)當(dāng)進(jìn)行調(diào)整，嘗試讓你的APP 能夠在手機(jī)上面能夠單手操作，將導(dǎo)航置于用戶的拇指可以觸及的區(qū)域之內(nèi)。

6、讓APP運(yùn)行快速

不要讓用戶等待內(nèi)容呈現(xiàn)

試圖讓程序的響應(yīng)速度提升起來。許多任務(wù)盡量在后臺(tái)跑起來，讓前臺(tái)的展現(xiàn)速度顯得很快。將一部分操作打包到后臺(tái)運(yùn)行有兩個(gè)好處：讓一些等待和加載過程不再展現(xiàn)在用戶面前，并且可以讓許多操作在用戶請求之前就發(fā)生。一個(gè)很好的例子就是 Instagram 中上傳圖片，當(dāng)用戶選擇要共享的圖片之時(shí)，上傳就已經(jīng)開始。

7、善用推送通知

在推送信息之前請三思。

每天用戶都會(huì)被無數(shù)無用的推送通知所轟炸，被分散注意力，這也使得通知常常會(huì)顯得頗為惱人。根據(jù)調(diào)研，超過70%的受訪者表示，令人煩躁的推送信息是促使他們卸載應(yīng)用的主要原因。

所以，要做好移動(dòng)端設(shè)計(jì)，需要用好每一次的信息推送。不要為了吸引用戶而推送消息，這往往會(huì)適得其反。你需要將對于用戶有價(jià)值的信息推送出去，這樣才合適。

有效的移動(dòng)端APP信息推送策略是采用多種類型的信息推送機(jī)制，推送通知，電子郵件，應(yīng)用內(nèi)通知，新聞Feed等。多樣化的信息推送通過合理的協(xié)調(diào)，創(chuàng)造良好的用戶體驗(yàn)。

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

設(shè)計(jì)組件庫是提升設(shè)計(jì)效率和一致性的重要工具，但如何在頻繁迭代和動(dòng)態(tài)調(diào)整中高效賦能業(yè)務(wù)設(shè)計(jì)交付，一直是行業(yè)面臨的挑戰(zhàn)。蘭亭妙微UI設(shè)計(jì)公司，分享了他們在設(shè)計(jì)組件庫建設(shè)中的新思考和實(shí)踐，供大家參考學(xué)習(xí)。

本文將分享我們對于“什么是好的設(shè)計(jì)組件”的看法，并給出一種搭建復(fù)雜組件的實(shí)用思路。我們還會(huì)從資產(chǎn)消費(fèi)的角度，提供一些優(yōu)化建議。雖然過程中會(huì)涉及不少基于Figma軟件的操作細(xì)節(jié)，但核心思路就像一把“萬能鑰匙”，無論在哪個(gè)設(shè)計(jì)平臺(tái)都行之有效，希望這些內(nèi)容能給廣大設(shè)計(jì)師們帶來一些新的啟發(fā)。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。