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

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

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

極簡非簡單

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

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

遵循自然而然

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

圖片來源：design-seeds

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

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

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

排版設計“設”不過三

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

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

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

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

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

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

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

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

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

2. 對比突出重點

3. 嘗試不同的風格

4. 顏色的區(qū)分

5. 字體之間的行間距

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

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

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

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

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

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

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

最后，自己思考

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

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

請關注網(wǎng)站建設公司 www.ww520ww.com