手機移動端界面設(shè)計中的點線面構(gòu)成元素應(yīng)用

【摘要】網(wǎng)絡(luò)的發(fā)展，智能手機的普遍使用，導(dǎo)致人們對手機移動端界面設(shè)計有了新的要求，不僅功能齊全更要追求視覺上的享受。怎樣的界面設(shè)計才能滿足普羅大眾？筆者發(fā)現(xiàn)，界面設(shè)計最終也是回歸到最基礎(chǔ)的點、線、面的組合排列。因此，需要對點、線、面有全面的理解，才能合理排版?zhèn)鬟f正確信息。

【關(guān)鍵字】界面設(shè)計 構(gòu)成元素 版面設(shè)計

引言

隨著全球網(wǎng)絡(luò)時代的進步和發(fā)展，智能手機已經(jīng)成為人們?nèi)粘Ｉ钪胁豢苫蛉钡墓ぞ?。而且人們對于智能手機的要求早已不只是通話功能那么簡單。由于生活方式的改變，人們對手機移動端界面設(shè)計的體驗有了新的要求，不僅在功能上要滿足普羅大眾的需要，更要在界面設(shè)計上面能夠吸引人的眼球。在手機移動端界面設(shè)計，除了功能之外就是視覺上傳遞給用戶信息，因此如何通過合理的排版?zhèn)鬟f正確的信息就是當(dāng)下需要研究的課題。

一.手機移動端界面設(shè)計的概念

手機移動端界面設(shè)計在單純的視覺層面上看，實際上就是手機界面的版式設(shè)計。換句話說，版式設(shè)計是否合理是手機移動端界面設(shè)計視覺展示的關(guān)鍵。所謂手機移動端界面設(shè)計，下文中都簡稱為手機界面設(shè)計，即在有限的手機屏幕空間里將界面設(shè)計的元素根據(jù)構(gòu)成的法則進行組合排布，具體來說就是將界面設(shè)計構(gòu)成要素：文字、圖形、色彩等，根據(jù)特定的內(nèi)容需要進行組合排列，并運用界面版式設(shè)計原理，把構(gòu)思與計劃通過視覺形式的語言表達來。

二.手機移動端界面與點、線、面的關(guān)系

手機界面一般都是連續(xù)的版式編排設(shè)計，要求各個界面之間緊湊的聯(lián)系起來，特別是要處理好頂層界面和一般界面內(nèi)的布局與形式的關(guān)系。為了讓用戶有最佳的瀏覽體驗，要反復(fù)推敲其整體的版式設(shè)計結(jié)構(gòu)的合理性的同時，還要根據(jù)不同的用戶設(shè)計最佳的視覺表現(xiàn)效果。但是在手機界面中，無論怎樣的版面，最終都是可以簡化成點、線、面。點、線、面是平面設(shè)計中的最基本的要素，也是所有構(gòu)成的根本。

三.手機移動端界面中的元素——點的應(yīng)用

點在幾何學(xué)意義上是以圓點為最基礎(chǔ)的形態(tài)，它是具象的點。但是在手機界面設(shè)計中，點是以抽象形式存在的，它的效果取決于與之共存的其他元素相互之間的比例。在界面設(shè)計中，點是點綴、豐富畫面氣氛的元素。點最重要的功能就是表明位置和進行聚集，一個點在平面上，與其他元素相比，最容易吸引人的視線。單獨存在的點總是以一個企業(yè)標(biāo)志或者一個簡單圖形的視覺形象出現(xiàn)，這都給人以點的視覺印象。往往單獨的點都會出現(xiàn)在界面的黃金分割線上，以突出企業(yè)形象或者某個產(chǎn)品等形式出現(xiàn)。這種情況下，作為整個界面的主體，都是以簡單的純色背景來襯托該元素，通過這種形式達到加強用戶視覺印象的目的。當(dāng)然，除了單點的形式外，還有多點的形態(tài)存在，一般多點都是以聚集分散的形式進行組合。聚集的點一般以文字，簡單的圖形，按鈕等視覺形象出現(xiàn)，這些點元素以重復(fù)、密集、特異等構(gòu)成形式法則組合排列。由于整個界面都充滿了點元素，通過視覺沖擊容易給人留下深刻的印象。以分散形式組合排列的界面設(shè)計中的點元素，存在與手機界面的各個位置，使整個界面看來起更飽滿。如圖1是常用的九宮格式排版，以分散的點的形式有秩序的排列，整個界面給用戶一目了然的感覺，操作便捷是這種界面最重要的優(yōu)勢。對于界面而言，這樣的版式可以使界面變得非常的靈活，內(nèi)容簡單，信息清晰明了。再如圖2圓心點放射形的版式設(shè)計，會使界面感覺更為智能化，包容萬象。如果要體現(xiàn)的功能點非常簡單，只有幾個功能按鈕的時候，可嘗試這種大圓的展示設(shè)計，突出最重要的功能，然后羅列并排出其他的功能點。這種方式非常實用，就和畫重點一樣，圈出最重要的數(shù)據(jù)。善于運用點構(gòu)圖，能撐起整個畫面，讓界面圓潤而飽滿。

四.手機移動端界面中的元素——線的應(yīng)用

線是由無數(shù)的點通過運動而形成的軌跡。相對于點而言，線在幾何學(xué)意義上只有位置、長度。線是最富表現(xiàn)力的視覺形態(tài)，有直線、斜線、曲線、折線等等，不同的線帶給人們的心理感受也各有不同。根據(jù)此特點，水平直線就會常出現(xiàn)在企業(yè)類的比較嚴(yán)謹(jǐn)?shù)?，工整的界面中，帶給人平靜、穩(wěn)定、嚴(yán)肅的感覺。斜線本身就帶有方向感、運動感，具有不穩(wěn)定性，加上粗細的變化可以產(chǎn)生帶有強烈視覺沖擊力的效果，因此特別受到設(shè)計師的喜愛。各種需要突出主體物的界面設(shè)計中，經(jīng)常能看到斜線的身影。曲線作為女性的象征，帶給人柔美、輕快、靈動的感受，能使散亂的版面變得集中。

線在手機界面設(shè)計中是不可缺少的元素，是連接頁面、引導(dǎo)視覺、豐富畫面的，在界面上可以有效的組織各元素之間的關(guān)系，除了在版面上有規(guī)劃內(nèi)容、裝飾、界定空間的作用以外，線還可以引導(dǎo)用戶的視線。不同方向的線條和不同的排列方式也對用戶起了不同的引導(dǎo)作用。在進行界面設(shè)計的時候，對用戶的視覺移動方向的預(yù)設(shè)是非常重要的。在界面中加入更為順暢的構(gòu)圖設(shè)計引導(dǎo)用戶視線移動的元素，就能使用戶更多的觀察到產(chǎn)品的核心和產(chǎn)品的賣點。視線移動的軌跡多則是從上至下從左到右移動，如果不能圍繞這樣的視線軌跡進行排版，用戶在閱讀的時候會因找不到重點而產(chǎn)生反感。所以在界面設(shè)計中格外需要注意視線引導(dǎo)這個方面?，F(xiàn)在界面設(shè)計一般是上下滑動的，如果提前做好視線引導(dǎo)，可以大大減小用戶的負擔(dān)和閱讀疲勞。如圖3將文字、圖片通過位置的編排引導(dǎo)排列S型的界面，人們的視線就會根據(jù)圖片文字的提示隨之移動，這種S型的虛線便能起到引導(dǎo)視線的作用。在APP界面設(shè)計的引導(dǎo)頁中也會常常運用到S形的版式設(shè)計。圖文進行穿插布局，這樣的構(gòu)圖層次感分明，動感十足。

五.手機移動端界面中的元素——面的應(yīng)用

面在幾何學(xué)中是線的移動軌跡，面有長度、寬度，沒有厚度。它在一個平面中相對較大的元素，強調(diào)形狀和面積。群化的面能夠產(chǎn)生層次感。面的形態(tài)是多種多樣的，不同的形態(tài)的面，在視覺上表現(xiàn)不同的情感。直線移動形成的面具有直線表現(xiàn)的視覺感受特征，例如矩形、三角形等，具有規(guī)整的外部輪廓和嚴(yán)謹(jǐn)?shù)膬?nèi)部結(jié)構(gòu)，能有效提升版面的專業(yè)感和務(wù)實感。而曲線運動形成的面（如圓和橢圓）就會產(chǎn)生隨意、舒適、柔美的感受，同時能提高版面親和力，拉近用戶與界面的距離。自由曲線形成的面具有個性鮮明、隨意的特點，帶給人優(yōu)雅、溫暖的感受。還有偶然形成的面，用非自然的做法打造出面形態(tài)的隨機性，在結(jié)構(gòu)上具有不可復(fù)制的意外性，給人們留下深刻印象的同時，讓版面看起來具有藝術(shù)性。例如墨跡、水花形成的痕跡。

面是信息的載體，有分割畫面的作用。如圖4的手機界面中用三角形的面來切割畫面，視覺上非常有秩序感且穩(wěn)定。用大的幾何圖形來做設(shè)計能把視覺集中到圖形上，是切割畫面內(nèi)容最好的方式。當(dāng)然，手機界面中面的表達形式很多，可以將圖片或文字放大，突出細節(jié)或局部；也可以通過色彩的變化劃分主次版面結(jié)構(gòu)；合理的留白，也是面的另一種存在方式，可以突出主要信息，增加空間想象力。

六.總結(jié)

在實際的設(shè)計過程中，我們發(fā)現(xiàn)其實點、線、面是相對存在的。它們之間是相互影響、相互協(xié)調(diào)、相互轉(zhuǎn)換的關(guān)系。設(shè)計者在設(shè)計階段，應(yīng)充分了解點、線、面的特點，根據(jù)用戶需求，合理安排點、線、面之間的比例，通過構(gòu)成元素間的巧妙組合與穿插，設(shè)計出具有自己個性的、信息傳遞明確的手機移動端界面設(shè)計。因此，進一步認(rèn)識構(gòu)成元素在手機界面中的應(yīng)用規(guī)律，對于提高設(shè)計師的藝術(shù)修養(yǎng)和設(shè)計水平有著重要的現(xiàn)實意義。

參考文獻：

[1]王志豪.平面視覺元素在網(wǎng)頁設(shè)計中的應(yīng)用分析[J].大眾文藝，2016（16）.

[2]關(guān)于版面設(shè)計的點線面[EB/OL]. http：//www.warting.com/design/201509/97165.html.

[3]梁日升.網(wǎng)頁藝術(shù)設(shè)計點線面的版式設(shè)計[J].課程教育研究：學(xué)法教法研究，2016（3）：225-225.

[4]不可忽視設(shè)計中的點線面[EB/OL]. http：//jingyan.baidu.com/article/36d6ed1f5388f31bce48834e.html.

作者簡介：1、王曉霞，1984年11月，浙江嘉興，講師，研究方向：數(shù)字媒體。