UI設計中的版式設計分析

摘要：由于超鏈接技術的應用，人類的信息處理和交流正從文本向超文本轉化。基于網絡數字媒介的UI版式設計已經完全不同于紙質平面媒介的版式，文本信息的架構方式從平面二維展開變成了立體網狀層級信息架構，媒介也以手機屏幕和PC顯示器為界面，信息的傳遞也從單向傳遞變成了雙向交互。因此，我們必須重新認識和建構適應網絡數字媒介的UI設計的版式方法和理念。本文主要論述了UI設計中的版式設計的相關概述并進行相關的分析，提出針對網絡信息媒介相應的信息架構方式和版式布局與設計原理與注意事項。

關鍵詞：UI設計 版式設計 網絡媒介

當前，正處于數字式信息時代，由于時代在改變，傳統的紙質媒介的版式設計方法已經完全不適用于數字媒介，版式設計也因此需要進行相應的創新。網頁界面與手機界面作為信息時代的主流媒體，與傳統的紙媒相比，采用了完全不同的信息架構方式，并增加了信息雙向交互，更加重視用戶體驗，而且平面視覺版式設計也發生了很大的改變，但是作為信息傳播的本質是一脈相承的。

一、UI設計中的版式設計的相關概述

版式設計主要是進行圖片與文字的編排，一般而言主要指的是根據相應的規律，對視覺元素以及構成元素進行合理的編排，從而使得信息能夠美觀、有序地進行傳達。充分將主題突現出來是版式設計最基本的前提，因此，在進行企業官方網站、手機 APP 軟件UI界面設計的時候，必須要對諸如圖標、按鈕、符號、圖片、文字、色彩、線條等頁面的所有元素，按照形式美的法則加以組織，進行整體布局，才能形成美觀實用的界面。版式設計中點、線、面這三方面是構成視覺元素的關鍵。其中，“點”在UI界面中出現，說明是可以將所出現的信息點擊鏈接的，它的作用是能夠將版面進行分割，點綴畫面以及強調秩序，尤其是其功能在UI設計中具有無法替代的細節要素。而“線”在網頁界面以及手機界面中通常是以分割線或縫隙的形式來進行展現的，倘若不存在線，界面的條理性就不會顯得那么清晰，將會給人非常凌亂的感覺，人們在進行閱讀時就難以進行下去，使得UI設計的傳達功能無法得到實現。“面”在視覺中主要分為圖片與色塊這兩類，一名合格的UI設計師應該要能夠在滿足界面功能需要期間，充分利用能與主題進行合理搭配的圖片或者色塊來將畫面進行改進，從而使得畫面能夠更加美觀，更加豐富。另外，美國人Richard Saul Wurman提出的“LATCH”模式，即Location（位置）、 Alphabet（字母）、Time（時間）、Category（類別）和Hierarchy（視覺層級），仍然精煉地揭示了信息組織與架構的原則，UI界面設計仍然要遵循信息架構的這些原則進行版式設計。今天已經跨入移動互聯網的信息時代，由于超鏈接交互式信息處理技術出現，UI設計師的版面布局必須從二維平面展開的方式向立體網狀層級跳轉鏈接的思維轉化，才能真正拓展全新的數媒版式設計的新方向。

二、如何建立針對數字界面的柵格化的版式設計

對于網頁或者是手機應用的UI設計來說，柵格化如同紙質媒體排版的網格系統一樣重要。對于UI設計而言，像素px作為數字媒體的最基本單位，貫穿于版面布局的始終。電腦屏幕中最常見的1024×768像素單位和1920×1080像素單位，以一種“優雅”的、接近黃金分割1：1.618的比例關系被大眾廣泛接受，這種比例也大量運用在蘋果、安卓系統的各類手機屏幕，以及筆記本電腦、電視屏幕等諸多電子產品中。在此基礎上，包括圖片文字視頻等所有的設計元素，以及它們之間的留白和空間關系，都是以像素為單位建立起以整套柵格體系構建其各自的平面版式關系。有趣的是，傳統紙質媒介的視覺比例關系是建立在根號2，即1：1.414這個數學模型基礎上的，無論是A1還是A2、A3或A4，所有國際標準紙張的尺寸的寬長比都是這個數值。對于網頁的設計而言，柵格化瀑布流模型是處理大信息容量的版式一種主要的設計方式，諸如新聞信息類門戶網站、行業和資源類型的網站、交易類型的網站，都大量采用這種版式模型，而公司和機構的官方網站、搜索引擎網站因為信息容量和用戶體驗的不同，要個性化和簡潔很多。而針對手機屏幕而言，大部分智能手機的屏幕尺寸都在5～6吋左右，和手掌大小差不多，平板電腦尺寸則在8～10吋左右。由于受版面尺寸的限制，在單個界面上不能容納太多信息，必須運用跳轉鏈接和分層邏輯來架構復雜信息，而且手控觸摸的操作方式也有很高的交互性要求，這就要求UI設計師要同時具備很強的信息處理和版面布局能力，需要UI設計師在進行排版設計之前，全面按照主題來建立一個網格體系。然而，建立網格體系需要注意以下幾點：（1）UI設計師在進行版式排列的過程中應當根據主題對相關內容進行分類，并且將同類的信息排列在相同位置中，防止出現凌亂感，還要注意內容的遺漏；（2）倘若版面中文字與圖片過多時，UI設計師需要建立一個相對而言比較清晰的網格體系，還要將圖片與文字進行整理，從而使得版面能夠給人一種賞心悅目的感覺；（3）應當充分按照受眾的閱讀習慣來進行編排，所以，需要將比較重要的信息或者相關內容編排在網頁最顯眼的位置中，使得受眾能夠準確地看到，使得版面美觀且有序，信息也能夠準確得到傳達；（4）針對不同的信息處理，采用多種交互方式，創造出直觀的用戶體驗。

三、UI設計中的版式設計分析

通常而言，UI設計的版式設計主要有六種類型。（1）滿版型版式設計。滿版型版式設計的設計元素主要是以滿版圖片作為主要的依據，能夠充分將視覺進行傳達，且沖擊力較強。此外，滿版型版式一般比較適用于相對而言比較大氣、直白的企業品牌形象，它的布局非常便利，能夠給受眾帶來深厚的印象，并且得到廣泛的應用。（2）分割型版式設計。分割型版式設計的相關內容主要是在進行設計構思的過程中進行區分的，而在版面進行分割時需要用到線、面來分割。（3）傾斜型版式設計。傾斜型版式設計通常而言指的是在進行相關設計的過程中，版面視覺感出現傾斜的情況時，會導致傳達出現動感或者不穩定的現象。其主要的作用是以表達運動的形式來呈現的。（4）三角形版式設計。穩定、扎實是三角形版式設計的主要特征，在UI設計中的作用是將版面的大小與形狀進行有效的限制，然而這種版面的應用是不常出現的。（5）曲線形版式設計。曲線形版式設計的作用是能夠在UI界面中把曲線元素在圖片中放大，并且充分運用文字排列的方式使得UI界面能夠充分展現出曲線感。（6）自由型版式設計。自由版式主要是在主體界面中采用相對而言比較隨意的、不需要遵循規律的編排形成的，使得畫面能夠呈現出靈活感。在UI設計的版式組織原則中，均衡、對比、對齊、重復、疏密、節奏、層級、流線、網格等紙媒時代的形式法則，仍然具有經典的美學指導價值，這些原則加上交互設計，在以上六種基本版式設計的基礎上，會演變出千變萬化的版面樣式。

四、結語

總而言之，UI設計師背負著時代的重任。信息技術在不斷發展，從硬件到軟件每年都在更新換代，作為人機信息交互的UI設計也變得越來越重要，UI設計師的思維觀念也要不斷更新發展。從“媒介即信息”到“媒介即設計”，媒介的改變意味著設計必須改變，探索如何適應UI界面的版式設計方法，對今天的UI設計師來說，這是無法回避的問題和職責，我們必須要去面對并找到解決之道。

參考文獻：

[1]劉偉，郝俊勤.信息組織與信息構建[J].情報資料工作，2009（01）.

[2]魏云柯.版式設計法則在UI設計中的體現[J].赤子（上中旬），2016（02）.

[3]徐曉靜，陳景景.文字編排在版式設計中的應用分析[J].傳播與版權，2016（10）.

[4]鄭小利.形式美在版式設計活動中的應用價值分析[J].出版廣角，2016（06）.

（作者簡介：吳敬忠，男，碩士，西南民族大學藝術學院設計系，講師，研究方向：視覺傳達設計、建筑設計和繪畫創作）