第二周的工作還是圍繞著產(chǎn)品首頁(yè)的優(yōu)化，并對(duì)現(xiàn)有產(chǎn)品進(jìn)行了更進(jìn)一步的認(rèn)識(shí)杀狡，此周所獲總結(jié)如下：

1.響應(yīng)式和自適應(yīng)

2.404蒙畴、502等錯(cuò)誤頁(yè)面設(shè)計(jì)要?jiǎng)t

響應(yīng)式和自適應(yīng)

? ? ? ? 很早之前就接觸到了響應(yīng)式和自適應(yīng)的定義，但是也只是限于理論的認(rèn)識(shí)呜象，真正在設(shè)計(jì)實(shí)踐中卻從未考慮到膳凝，也不知該如何應(yīng)用，這次在進(jìn)行官網(wǎng)用戶(hù)反饋?lái)?yè)面設(shè)計(jì)稿交接的過(guò)程中便遇到了這個(gè)問(wèn)題恭陡，即設(shè)計(jì)稿的標(biāo)注如何考慮到終端的不同尺寸蹬音，從而進(jìn)行最優(yōu)的顯示。

官網(wǎng)原圖：反饋顯示需要點(diǎn)擊箭頭控件才能翻頁(yè)顯示更多子姜，現(xiàn)在問(wèn)題即為信息傳達(dá)不直觀祟绊。修改后直接以card形式進(jìn)行表現(xiàn)楼入。但card的長(zhǎng)寬則需要考慮到不同的設(shè)計(jì)尺寸作出比例的調(diào)整哥捕。

首先來(lái)直觀感受一波國(guó)內(nèi)外響應(yīng)式網(wǎng)站和自適應(yīng)網(wǎng)站的區(qū)別：響應(yīng)式網(wǎng)站（https://thenextweb.com/ ?https://www.apple.com/cn/watch/）&自適應(yīng)網(wǎng)站（https://www.tmall.com）。

從定義上來(lái)看嘉熊，響應(yīng)式設(shè)計(jì)是Ethan Marcotte在2010年5月份提出的一個(gè)概念遥赚，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端—而不是為每個(gè)終端做一個(gè)特定的版本阐肤。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的凫佛。

自適應(yīng)設(shè)計(jì)指能使網(wǎng)頁(yè)自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁(yè)設(shè)計(jì)方式及技術(shù)。 ? ? ??

? ? ? ? 自適應(yīng)設(shè)計(jì)實(shí)現(xiàn)原理其實(shí)就是為不同類(lèi)別的設(shè)備建立不同的網(wǎng)頁(yè)孕惜，檢測(cè)到設(shè)備的分辨率后調(diào)用對(duì)應(yīng)的網(wǎng)頁(yè)愧薛，而響應(yīng)式則可以實(shí)現(xiàn)支持當(dāng)下不同終端主流視口的信息適配展示，但是為了開(kāi)發(fā)成本也會(huì)規(guī)定最大值視口和最小值視口衫画。兩者的特點(diǎn)可總結(jié)如下：

? ? ? ? 響應(yīng)式網(wǎng)站標(biāo)志：

? ? ? ? 1.同時(shí)適配web+手機(jī)

? ? ? ? 2.標(biāo)簽導(dǎo)航在視口接近最大手持終端設(shè)備視口時(shí)改變?yōu)榻?jīng)典的抽屜式導(dǎo)航

? ? ? ? 3.網(wǎng)站框架布局會(huì)根據(jù)視口來(lái)調(diào)整位置

? ? ? ? 優(yōu)點(diǎn)：

? ? ? ? 面對(duì)不同分辨率設(shè)備靈活性強(qiáng)

? ? ? ? 能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題

? ? ? ? 缺點(diǎn)：

? ? ? ? 僅適用布局毫炉、信息、框架并不復(fù)雜的部門(mén)類(lèi)型網(wǎng)站

? ? ? ? 兼容各種設(shè)備工作量大削罩，效率低下

? ? ? ? 代碼累贅瞄勾，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長(zhǎng)

? ? ? ? 其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案弥激，多方面因素影響而達(dá)不到最佳效果

? ? ? ? 一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)进陡，會(huì)出現(xiàn)用戶(hù)混淆的情況

? ? ? ? 自適應(yīng)網(wǎng)站標(biāo)志

? ? ? ? 1.大多只是適配單個(gè)終端的主流N個(gè)主流視口（2-3個(gè)）

? ? ? ? 2.當(dāng)視口大小低于設(shè)置的最小視口時(shí)，界面會(huì)出現(xiàn)顯示不全微服，溢出趾疚，并出現(xiàn)橫向滑動(dòng)指示器

? ? ? ? 3.總體框架不變，橫線(xiàn)布局的板塊大多會(huì)有所減少

? ? ? ? 優(yōu)點(diǎn)：

? ? ? ? 對(duì)網(wǎng)站的復(fù)雜程度兼容性更大

? ? ? ? 實(shí)施起來(lái)代價(jià)更低，

? ? ? ? 代碼更高效

? ? ? ? 測(cè)試更容易糙麦，運(yùn)營(yíng)相對(duì)更精準(zhǔn)（圖片可控性更高）

? ? ? ? 缺點(diǎn)：

? ? ? ? 在移動(dòng)端設(shè)計(jì)大行其道之下戈二，同一個(gè)網(wǎng)站，往往需要為不同的設(shè)備開(kāi)發(fā)不同的頁(yè)面喳资，增加開(kāi)發(fā)成本

? ? ? ? 其實(shí)這是復(fù)雜類(lèi)型網(wǎng)站設(shè)計(jì)的一種最優(yōu)方案觉吭，雖然增加了開(kāi)發(fā)運(yùn)營(yíng)成本，但是換回了更精準(zhǔn)的運(yùn)營(yíng)仆邓、框架擴(kuò)展度更高鲜滩，用戶(hù)加載更迅速，是極其劃算的一件事情节值，這也是自適應(yīng)設(shè)計(jì)成為當(dāng)下主流網(wǎng)站采用的布局方式的重要原因之一徙硅。

? ? ? ? 那么這樣看來(lái)，我們公司現(xiàn)有的產(chǎn)品是自適應(yīng)設(shè)計(jì)搞疗，但是還沒(méi)有協(xié)調(diào)的很好嗓蘑，在最小值視口的顯示上信息出現(xiàn)了錯(cuò)位，混亂匿乃，后期應(yīng)該會(huì)進(jìn)行調(diào)整桩皿。

404 502頁(yè)面設(shè)計(jì)要?jiǎng)t

? ? ? ? 這一周還接觸到了一些報(bào)錯(cuò)頁(yè)面的設(shè)計(jì)，404頁(yè)面為“無(wú)法找到頁(yè)面”幢炸，它的出現(xiàn)意味著該網(wǎng)站是可以打開(kāi)的泄隔，只是頁(yè)面已經(jīng)不存在，那么人來(lái)都來(lái)了宛徊，總不能讓人家就這樣走吧佛嬉，所以該頁(yè)面需要提供適當(dāng)?shù)膶?dǎo)航讓用戶(hù)去探索我們的產(chǎn)品，而不是以為進(jìn)了死胡同闸天。502頁(yè)面的為“網(wǎng)管錯(cuò)誤”暖呕，解決方法就是刷新，但不是簡(jiǎn)單的F5刷新苞氮，因?yàn)檫@種基本刷新不會(huì)觸發(fā)到服務(wù)器湾揽，所以無(wú)效，而正確的方法是清空瀏覽器緩存葱淳，Ctrl+F5钝腺。

所以該類(lèi)頁(yè)面的設(shè)計(jì)，首先是需要搞清楚錯(cuò)誤類(lèi)型赞厕，找到解決方法艳狐，其次才是設(shè)計(jì)方法的指導(dǎo)，而關(guān)于設(shè)計(jì)方法皿桑，網(wǎng)上資源很多毫目，但初衷其實(shí)都是為了排除用戶(hù)的消極感蔬啡，并以適當(dāng)幽默的方式來(lái)為用戶(hù)提供建議，或者為我們自己的后續(xù)產(chǎn)品改進(jìn)收集錯(cuò)誤信息镀虐。具體方法不加贅述箱蟆，附此次錯(cuò)誤頁(yè)面設(shè)計(jì)稿。