知識分享

極簡主義在網站建設中的運用!

發表日期:2015-10-23 12:32:54 文章編輯: 瀏覽次數:540

       在如今移動互聯網高速發展的環境下,人們的生活質量越來越高,人們的手機也越來越高大上,對移動端的表現能力也有了更強烈的需求品味,因此我們需要更加優雅的展現H5頁面,覺唯設計今天想和大家分享的是在H5移動端頁面的極簡主義設計。

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

極簡設計網站-花

圖片來源:日本網站MIKIYA KOBAYASHI

極簡非簡單

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

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

極簡設計

遵循自然而然

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

自然的配色

大自然的配色2

圖片來源:design-seeds

      正因為大自然的色彩太過豐富,將大自然中的色彩運用到我們的H5頁面作品中,則需要做一些提取處理,有一個原則是:少即是多,以最少最恰當的顏色傳達完美!現今,越來越多的設計師更加傾向用最簡潔、用更少的顏色去保持界面的干凈。

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

極簡設計色彩

      最后,最好的一種設計狀態是:讓用戶感受不到設計的存在,自然而然,隨心所欲。

排版設計“設”不過三

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

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

極簡設計排版

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

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

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

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

      通過以上的三級方法來劃分我們的側重點,可以很好的向用戶傳達我們的信息。那么我們應該在實踐中怎么做呢?其實做法很簡單,把握一個準則:平衡、對比、統一!最后就是把握細節,細節決定成敗!

我們可以大致從以下方面來做調整:

  1. 統一規范字體大小

  2. 對比突出重點

  3. 嘗試不同的風格

  4. 顏色的區分

  5. 字體之間的行間距

瑩晨設計

      從上圖可以看到UBER的網站非常優雅,這是一個非常優秀的一個極簡設計作品。

細微入至的動態交互

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

細微入至的動態交互

圖片來源:精美酷炫的APP動態UI交互設計效果圖

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

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

       在一個非常小的H5移動端屏幕空間,我們能做的除了專業,還有用心!

最后,自己思考

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

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

請關注網站建設公司 www.ufykud.live

將文章分享到..
相關新聞
全新新聞
隨機新聞
最新網站設計案例
快乐12遗漏