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

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

    極簡非簡單

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

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

    遵循自然而然

    在H5移動端頁面中，色彩往往都會非常豐富，這就需要考驗設(shè)計師對色彩的掌控能力；不同的色系代表著不同的傳達情感。H5作品中想表達的氣氛，或喜或感或動或靜，都離不開對色彩依賴。人們的認知來自大自然，而我們設(shè)計本質(zhì)是創(chuàng)新，通過設(shè)計創(chuàng)新，讓我們生活的更加美好。我們應(yīng)當遵循大自然，作品色彩搭配更加要能夠符合大自然。

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

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

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

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

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

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

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

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

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

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

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

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

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

    對比突出重點

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

    顏色的區(qū)分

    字體之間的行間距

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

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

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

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

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

贛州網(wǎng)站建設(shè)|贛州網(wǎng)絡(luò)公司|贛州做網(wǎng)站|贛州網(wǎng)站建設(shè)價格|贛州網(wǎng)頁制作|贛州建網(wǎng)站公司|贛州微信二維碼平臺|贛州微信公眾號|贛州百度公|贛州百度推廣|贛州百度優(yōu)化|贛州朝揚網(wǎng)絡(luò)|朝揚網(wǎng)絡(luò)