在如今移動互聯(lián)網(wǎng)高速發(fā)展的環(huán)境下，人們的生活質(zhì)量越來越高，人們的手機(jī)也越來越高大上，對移動端的表現(xiàn)能力也有了更強(qiáng)烈的需求品味，因此我們需要更加優(yōu)雅的展現(xiàn)H5頁面，覺唯設(shè)計(jì)今天想和大家分享的是在H5移動端頁面的極簡主義設(shè)計(jì)。

       極簡主義以簡單到極致為追求，是一種設(shè)計(jì)風(fēng)格，感官上簡約整潔，更加注重品味和思想上的優(yōu)雅。這樣子看起來是不是非常不錯(cuò)呢？那么我們應(yīng)當(dāng)如何去理解極簡主義設(shè)計(jì)和如何在H5頁面當(dāng)中去實(shí)踐呢？下面簡單的提出幾個(gè)點(diǎn)，希望能夠起到拋磚引玉的作用，將極簡設(shè)計(jì)更加完美的運(yùn)用到我們的H5頁面設(shè)計(jì)當(dāng)中，讓H5頁面更加優(yōu)秀并更有價(jià)值！

圖片來源：日本網(wǎng)站MIKIYA KOBAYASHI

極簡非簡單

      網(wǎng)站設(shè)計(jì)中的極簡秉承了極簡主義的思想，對各種文字、圖形、色彩、構(gòu)成等元素進(jìn)行重組，然后用一種更直接傳達(dá)的方式來表現(xiàn)。往往有人認(rèn)為極簡就是簡約設(shè)計(jì)，但個(gè)人不以為然，兩者有本質(zhì)上的區(qū)別，思想思維也是大有不同。極簡設(shè)計(jì)是一種反對過度設(shè)計(jì)、裝飾而產(chǎn)生的，我們需要耗費(fèi)的時(shí)間與精力可能會是更多。一個(gè)成功的極簡設(shè)計(jì)往往能以最少的元素、最直接的打動人心。相信在未來，極簡設(shè)計(jì)會是一個(gè)更大的趨勢，會有更多人加入到其中。

       在H5頁面中，我們可以通過極簡設(shè)計(jì)理念，將頁面設(shè)計(jì)的更加輕量化。如之前甚至如今在APP中一直很火爆的扁平化設(shè)計(jì)風(fēng)格，就是一種極簡設(shè)計(jì)的體現(xiàn)。在扁平化設(shè)計(jì)中，會把按鈕的投影、寫實(shí)部分去掉，而采用更加直觀的輕量化的設(shè)計(jì)元素（色彩、塊、組合），讓用戶在第一時(shí)間就獲取到真正的核心內(nèi)容，而不受花花草草裝飾的干擾。然而做扁平化設(shè)計(jì)也是非常不簡單，需要有很強(qiáng)的歸納提取再組合、色彩搭配、圖形概括等等非常專業(yè)知識。

遵循自然而然

      在H5移動端頁面設(shè)計(jì)中，色彩往往都會非常豐富，這就需要考驗(yàn)設(shè)計(jì)師對色彩的掌控能力；不同的色系代表著不同的傳達(dá)情感。H5作品中想表達(dá)的氣氛，或喜或感或動或靜，都離不開對色彩依賴。人們的認(rèn)知來自大自然，而我們設(shè)計(jì)本質(zhì)是創(chuàng)新，通過設(shè)計(jì)創(chuàng)新，讓我們生活的更加美好。我們應(yīng)當(dāng)遵循大自然，我們的作品色彩搭配更加要能夠符合大自然，大家可以查閱覺唯設(shè)計(jì)的《配色設(shè)計(jì)：來源于生活與大自然》一文中的一些案例，來自大自然的色彩是非常柔美、舒適的。

圖片來源：design-seeds

      正因?yàn)榇笞匀坏纳侍^豐富，將大自然中的色彩運(yùn)用到我們的H5頁面作品中，則需要做一些提取處理，有一個(gè)原則是：少即是多，以最少最恰當(dāng)?shù)念伾珎鬟_(dá)完美！現(xiàn)今，越來越多的設(shè)計(jì)師更加傾向用最簡潔、用更少的顏色去保持界面的干凈。

      說到干凈，在這里還想跟大家提一下色彩中的：“白”，“白”是最能激發(fā)想象力的顏色，同時(shí)也是“無色”狀態(tài)，它的質(zhì)地能強(qiáng)有力地喚起任何物體的物質(zhì)性，也讓人能夠越過諸色紛呈的干擾直接關(guān)注設(shè)計(jì)本身，引導(dǎo)用戶關(guān)注重要的內(nèi)容。我們常常說設(shè)計(jì)需要留白，其實(shí)也正因如此，讓頁面能更加有生機(jī)和呼吸感！還記得當(dāng)初學(xué)校里設(shè)計(jì)構(gòu)成課程中的點(diǎn)線面嗎？一個(gè)教授說過：如果點(diǎn)能解決的就不要用到線，如果線能解決的就不要用到面?。ó?dāng)然這不是一成不變的法則，我們設(shè)計(jì)就是創(chuàng)新。）

      最后，最好的一種設(shè)計(jì)狀態(tài)是：讓用戶感受不到設(shè)計(jì)的存在，自然而然，隨心所欲。

排版設(shè)計(jì)“設(shè)”不過三

      無論在何種視覺媒體中，文字和圖片都是其兩大構(gòu)成要素；文字圖片排版的好壞，直接影響了移動端頁面的視覺效果，也就直接影響了用戶進(jìn)入頁面后的第一印象。在一個(gè)有限的小空間里（手機(jī)屏幕），想要第一印象就能打動或者滿足用戶的心，這是一個(gè)非常值得我們設(shè)計(jì)人員去研究和反復(fù)考量的一點(diǎn)。在排版設(shè)計(jì)方面，覺唯設(shè)計(jì)建議應(yīng)當(dāng)遵循一個(gè)高效方法原則：設(shè)不過三！何為“設(shè)不過三”呢？

      在生活中，我們經(jīng)常會寫一個(gè)文檔，一般文檔里面都會有一個(gè)正標(biāo)題、副標(biāo)題然后正文，其實(shí)這就是“設(shè)不過三”的一個(gè)典型體現(xiàn)。大家平時(shí)其實(shí)可以多看看報(bào)紙，很多大型報(bào)刊出報(bào)紙排版是經(jīng)典中的經(jīng)典，可以將很多密密麻麻的文字和一些簡單的配圖，就能夠很清晰的向閱讀者傳達(dá)報(bào)紙的重點(diǎn)，讓人們即使是一眼掃過報(bào)紙都能掌握其中的一些重要信息。

      在我們設(shè)計(jì)移動端頁面的時(shí)候，一個(gè)頁面里面的元素層級關(guān)系最好不要超過三級：

1. 第一級：是最重要（最顯眼），可以通過大小、顏色、位置等方式來強(qiáng)化，向用戶傳達(dá)我們的中心思想。

2. 第二級：輔助、擴(kuò)展第一級，不可與第一級爭奪眼球，指引引導(dǎo)用戶理解，并且可以更加舒適的閱讀上下級。

3. 第三級：屬于正文，是我們頁面中最詳細(xì)最通俗易懂的部分。這里的文字就不需要特殊處理，只要能符合人們閱讀習(xí)慣即可。

      通過以上的三級方法來劃分我們的側(cè)重點(diǎn)，可以很好的向用戶傳達(dá)我們的信息。那么我們應(yīng)該在實(shí)踐中怎么做呢？其實(shí)做法很簡單，把握一個(gè)準(zhǔn)則：平衡、對比、統(tǒng)一！最后就是把握細(xì)節(jié)，細(xì)節(jié)決定成??！

我們可以大致從以下方面來做調(diào)整：

1. 統(tǒng)一規(guī)范字體大小

2. 對比突出重點(diǎn)

3. 嘗試不同的風(fēng)格

4. 顏色的區(qū)分

5. 字體之間的行間距

      從上圖可以看到UBER的網(wǎng)站非常優(yōu)雅，這是一個(gè)非常優(yōu)秀的一個(gè)極簡設(shè)計(jì)作品。

細(xì)微入至的動態(tài)交互

      文章一開頭就提到，隨著科技的告訴發(fā)展，如今的手機(jī)軟件、硬件設(shè)備都在極速發(fā)展，現(xiàn)在設(shè)計(jì)師們可以很大膽的天馬行空，用各種奇思妙想去實(shí)現(xiàn)一個(gè)又一個(gè)震撼人心動態(tài)效果，例如：過渡、跳動、2D變換、3D動畫、粒子效果甚至模擬現(xiàn)實(shí)生活中的各種現(xiàn)象（如閃電、破碎）等等。在H5設(shè)計(jì)中，適當(dāng)?shù)氖褂脛有Ы换ィ梢宰層脩舾佑袇⑴c感，并且還能很友好的強(qiáng)調(diào)我們的重點(diǎn)內(nèi)容。

圖片來源：精美酷炫的APP動態(tài)UI交互設(shè)計(jì)效果圖

       除了非常友好的動效，在H5頁面中，我們還可以做的更多，比如：按鈕的按壓態(tài)（:active），即用戶手機(jī)觸摸某個(gè)按鈕的時(shí)候，我們必須給用戶一些反饋（可以是改變按鈕樣式、透明度等等方式），讓用戶知道 Ta 已經(jīng)確實(shí)是點(diǎn)擊到了，而不會導(dǎo)致用戶一直在狂點(diǎn)，還罵聲連連！

       還有一個(gè)非常常見的現(xiàn)象，在一個(gè)H5頁面，塞滿了各種動畫（左右飛入、上下滾動、無效翻轉(zhuǎn)），像是雜技一樣，不知道是為了炫技還是滿足虛榮心，這一種霸占浪費(fèi)用戶的生命時(shí)間的行為，非常不可取的！在移動端的任何一個(gè)動效都是有它的存在緣由的，只要在最恰當(dāng)?shù)臅r(shí)間展示最用心的動效才能虜獲用戶的心。

       在一個(gè)非常小的H5移動端屏幕空間，我們能做的除了專業(yè)，還有用心！

最后，自己思考

也許，我上訴所說的可能是“錯(cuò)”的。歡迎各位來覺唯設(shè)計(jì)吐槽，一起交流一起玩SA。

當(dāng)你閱讀完這篇文章后，或許你可能又去忙了，又去畫圖了，但希望大家能有一個(gè)自己的思考。在此，感謝各位設(shè)計(jì)師們的用心，為了讓我們的設(shè)計(jì)更加美好，設(shè)計(jì)師們辛苦了。

請關(guān)注網(wǎng)站建設(shè)公司 m.luyingji.cn