前言

該文章內(nèi)容非?；A(chǔ)，偏向設(shè)計(jì)小白。

網(wǎng)頁(yè)的設(shè)計(jì)可以從三個(gè)方面進(jìn)行，第一是界面設(shè)計(jì)，第二是界面動(dòng)畫設(shè)計(jì)，第三是界面交互流暢性設(shè)計(jì)。其中第三點(diǎn)的重要性主要體現(xiàn)在移動(dòng)端設(shè)備上

界面設(shè)計(jì)丨

優(yōu)化丨

1.顏色

無論是頁(yè)面的黑暗模式還是亮色模式，都非常不建議使用#000純黑底和#FFF純白字或相反。略微降低黑白的對(duì)比度，能起到不小減少視覺疲勞、提高閱讀性的效果。建議使用#121212替代黑，#FAFAFA替代白。

2.表單

瀏覽器自帶的表單樣式真的很丑。

在Apple設(shè)備上與edge上的表單有著不同的默認(rèn)樣式，建議自定義CSS取代默認(rèn)樣式，不同瀏覽器的同一個(gè)表單或許會(huì)有不同的顯示效果。

Safari的表單默認(rèn)樣式最多，按鈕有大圓角，黑灰邊框，藍(lán)色字體等屬性，edge上相對(duì)來說更少，所以只需要適配Safari后其他各平臺(tái)的顯示效果就會(huì)一致了。

針對(duì)解決表單的問題，我制作了一個(gè)4kb的微型CSS表單框架，有需要的同學(xué)可以在文章底部鏈接下載。

3.留白

不會(huì)留白的頁(yè)面看起來緊湊、絮亂、甚至無法閱讀，學(xué)會(huì)留白使頁(yè)面看起來更加整潔，學(xué)會(huì)適當(dāng)給他的內(nèi)部空間加一些內(nèi)邊距。

4.字體

免費(fèi)商用字體建議使用思源黑體、鴻蒙sans、釘釘進(jìn)步體。

其他丨

對(duì)沒有學(xué)習(xí)CSS3的同學(xué)說

CSS不推薦使用Float浮動(dòng)，更推薦使用flex取代，float會(huì)使元素脫離文檔流，造成元素塌陷，且分辨率更高后極易造成頁(yè)面崩壞，一個(gè)元素遮擋另一個(gè)元素，或者元素直接消失。而flex完全可以取代float，flex更易于適配所有設(shè)備的分辨率，能夠很好的避免頁(yè)面崩壞，更不會(huì)出現(xiàn)遮擋元素的現(xiàn)象。

界面動(dòng)畫

給頁(yè)面設(shè)計(jì)一個(gè)好的界面之后，就要在動(dòng)畫上做功夫了，可以從鼠標(biāo)懸浮時(shí)、頁(yè)面滾動(dòng)時(shí)、頁(yè)面進(jìn)入時(shí)加入動(dòng)畫。

Tips：CSS3中，給元素的CSS添加transition:(動(dòng)畫類型:建議all) (持續(xù)時(shí)間:建議0.1～1s) (動(dòng)畫速度曲線:建議linear/ease) (動(dòng)畫播放延遲);屬性。

即可在CSS屬性發(fā)生變化時(shí)有一個(gè)過渡的效果。

例：transition:all 0.5s ease 0;

鼠標(biāo)懸浮丨

通常情況下可以設(shè)計(jì)元素放大、出現(xiàn)陰影、出現(xiàn)描邊、改變顏色等效果

頁(yè)面滾動(dòng)丨

通常使用位置變化+透明度變化等效果

進(jìn)階動(dòng)畫丨

僅僅使用改變CSS屬性實(shí)現(xiàn)的動(dòng)畫是有局限性的，若想實(shí)現(xiàn)類微軟官網(wǎng)的頁(yè)面的MG動(dòng)畫，建議深入了解一下前端的lottie插件與AE的bodymovin插件。實(shí)現(xiàn)AE溝通開發(fā)。

頁(yè)面交互流暢性

主要體現(xiàn)在動(dòng)畫的跟手與凝練，過多的動(dòng)畫會(huì)導(dǎo)致動(dòng)畫冗余。

動(dòng)畫要盡量避免影響到頁(yè)面的交互，造成“我想點(diǎn)擊這個(gè)按鈕，但是我要等你播完才能點(diǎn)”。

例如我在微信點(diǎn)擊了一個(gè)好友的聊天界面，但是我反悔了，這時(shí)候我會(huì)瘋狂點(diǎn)擊左上角的返回，但我還是必須要等到進(jìn)入動(dòng)畫播完才能返回。

如果能實(shí)現(xiàn)動(dòng)畫未播放完畢就能直接返回的話，網(wǎng)頁(yè)流暢性會(huì)大大提高。

希望該文章能幫助到你

THINICE薄冰CSS表單框架Github鏈接：

https://github.com/iDea-iCE-CUBE/ThiniceOpenSource