張修竹

摘要：如今隨著移動(dòng)互聯(lián)網(wǎng)的到來，智能手機(jī)的普及使用，移動(dòng)應(yīng)用程序也隨之豐富;用戶對(duì)界面的審美要求也有較大的提高。對(duì)于剛?cè)胄械慕缑嬖O(shè)計(jì)師（UI設(shè)計(jì)師）如何快速地、更好地設(shè)計(jì)出符合用戶審美要求的界面;在界面設(shè)計(jì)時(shí)，如何找對(duì)設(shè)計(jì)方向，對(duì)板塊布局、文字大小、色彩搭配，能做出一個(gè)正確的結(jié)果？該文對(duì)常見的設(shè)計(jì)問題如界面設(shè)計(jì)規(guī)范、像素網(wǎng)格的設(shè)置、布局大小分析以及字體規(guī)范、字行間距，色彩搭配和元素運(yùn)用提出了一些解決方案。

關(guān)鍵詞：移動(dòng)手機(jī);用戶界面;界面設(shè)計(jì)

中圖分類號(hào)：TP311? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）18-0071-03

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

對(duì)于新的用戶界面設(shè)計(jì)師來說，在進(jìn)行用戶界面設(shè)計(jì)時(shí)，常常會(huì)為界面布局而困惑，怎樣才能使某些文本塊大小設(shè)置更合理，或如何增加（或減少）元素周圍的空白量更加合理。對(duì)于色彩設(shè)置而言：應(yīng)該更暗，還是更亮？在整個(gè)移動(dòng)手機(jī)用戶界面設(shè)計(jì)過程中如何遵循限制和規(guī)則？可以通過多種設(shè)計(jì)方式在用戶界面中組合元素，來到達(dá)一定的效果，因此需要設(shè)置一些規(guī)范和限制，沒有規(guī)則和限制可能會(huì)讓設(shè)計(jì)師失去方向，試圖在許多“正確”選項(xiàng)中選擇最佳選項(xiàng)。通過設(shè)置一些基本規(guī)則，可以使用戶界面的看起來更加一致。

1 設(shè)計(jì)規(guī)范的重要性

在界面設(shè)計(jì)前期需要先整理出一套完整的設(shè)計(jì)規(guī)范，在整個(gè)設(shè)計(jì)流程中必須按照設(shè)計(jì)規(guī)范來執(zhí)行，這可以避免在設(shè)計(jì)中設(shè)計(jì)師出現(xiàn)思維混亂，元素使用不統(tǒng)一等情況。以下為設(shè)計(jì)規(guī)范的內(nèi)容。

圖標(biāo)規(guī)范：菜單欄圖標(biāo)、金剛區(qū)圖標(biāo)、常用圖標(biāo)（編輯、刪除、點(diǎn)贊等）。

按鈕規(guī)范：可點(diǎn)擊按鈕、不可點(diǎn)擊按鈕。

字體規(guī)范：標(biāo)題、副標(biāo)題、正文、標(biāo)簽、圖標(biāo)字體。

間距規(guī)范：版塊間距、字體間距、圖標(biāo)間距。

文檔規(guī)范：設(shè)計(jì)稿文件、切圖文件、標(biāo)注圖文件。

設(shè)計(jì)規(guī)范可以幫助設(shè)計(jì)師在進(jìn)行界面設(shè)計(jì)的時(shí)，在規(guī)范內(nèi)進(jìn)行有效的設(shè)計(jì)與思考從而提高工作效率，對(duì)于開發(fā)人員而言，一個(gè)嚴(yán)謹(jǐn)性強(qiáng)的設(shè)計(jì)規(guī)范可以大大提高他們的工作效率。

2 移動(dòng)手機(jī)用戶界面設(shè)計(jì)的技巧

2.1 8像素網(wǎng)格

如何讓整個(gè)界面看上去整潔干凈？需要將每個(gè)版塊及元素的距離設(shè)置測(cè)量值，然后確定所有尺寸。但通常情況下，最好的選擇是遵守一些經(jīng)過驗(yàn)證的規(guī)則。這些規(guī)則之一是將元素調(diào)整大小和間距使用八個(gè)像素，該規(guī)則可以簡(jiǎn)化設(shè)計(jì)。

注意px與dp：除了像素（px），dp是屏幕設(shè)計(jì)和原型設(shè)計(jì)中使用的術(shù)語。dp是dip：device independent pixels（設(shè)備獨(dú)立像素）[1]。dp是一種與密度無關(guān)的像素單位，在每英寸160點(diǎn)的屏幕上，1dp = 1px。該單位相對(duì)于160-dpi屏幕，因此1dp在160-dpi屏幕上等于1個(gè)像素，在320-dpi屏幕上等于2個(gè)像素，以此類推。數(shù)值公式為. px = dp* （dpi/160）[2]。

所以在使用較小的元素或?qū)ο髸r(shí)，可以使用4像素增量而不是8像素。8是一個(gè)很大的數(shù)字，它可以被四和二整除。如果使用8，則可以輕松調(diào)整任何元素的大小而不會(huì)以半像素結(jié)束，例如 8/ 2 = 4、4/ 2 = 2和2 / 2 = 1[1]。另一方面，如果從10開始，最終會(huì)得到5個(gè)像素，然后是2.5個(gè)像素，然后是1.25個(gè)像素。在設(shè)計(jì)界面時(shí)，盡可能避免半像素。通過使用整個(gè)像素，設(shè)計(jì)中的元素才能精確地對(duì)齊像素邊界，讓界面看起來更清晰。

8的倍數(shù)（8、16、24、32、40、48、56、64、72、80 等）與二進(jìn)制值（1、2、4、8、16、32、64、128、256 ， 512 等）[3]。

作為界面設(shè)計(jì)師，8像素網(wǎng)格可以提高設(shè)計(jì)效率，使設(shè)計(jì)工作更快、更高效。對(duì)于整個(gè)開發(fā)團(tuán)隊(duì)而言，可以創(chuàng)建一個(gè)8像素網(wǎng)格系統(tǒng)。可以使開發(fā)人員在需要對(duì)界面調(diào)整的情況下進(jìn)行快速更改，開發(fā)人員可以以8像素為增量調(diào)整參數(shù)的值，就可以確保一致性和規(guī)范性。

同時(shí)用戶在使用時(shí)體驗(yàn)感和視覺上也會(huì)更加舒適，對(duì)整個(gè)產(chǎn)品也更加信任，如圖1所示。

2.2 使用網(wǎng)格來布置所有元素

在界面設(shè)計(jì)中如何讓版塊布局更加合理？設(shè)計(jì)界面時(shí)可用網(wǎng)格來幫助設(shè)計(jì)師準(zhǔn)確地將所有元素放置在數(shù)字畫布上。網(wǎng)格構(gòu)成了界面的骨架，并確定了可以放置元素的位置。它定義了清晰的邊界，以便設(shè)計(jì)更加一致。有了網(wǎng)格的參考，就可以輕松地解決元素放置的問題。隨著設(shè)計(jì)經(jīng)驗(yàn)的提高，也可以根據(jù)需要更新邊界，如圖2所示。

水平網(wǎng)格布局：

列的數(shù)量和大小可能是隨機(jī)的，取決于個(gè)人的需要。設(shè)計(jì)越詳細(xì)，網(wǎng)格所需的列就越多。

垂直網(wǎng)格布局：

與保持水平和諧類似，在設(shè)計(jì)中保持垂直距離一致也很重要。就像電子表格中的行一樣，它們可以幫助以均勻的間隔保持文本的間距。這些行應(yīng)該有多大？取決于設(shè)計(jì)內(nèi)容和設(shè)計(jì)師個(gè)人。但可以使8像素或8的倍數(shù)（例如16），來定義要對(duì)齊元素或文本的邊界。

2.3 布局中的空間元素

在界面設(shè)計(jì)的布局中，可以用平面設(shè)計(jì)的思維方法去理解UI界面中的空間元素結(jié)構(gòu)分布和對(duì)應(yīng)關(guān)系，為了使閱讀更有效，使用不同的標(biāo)題大小、不同的版面比例或不同的顏色背景進(jìn)行層次劃分，線分割和空間分割的區(qū)別在于，分割線給人一種壓力感，而空間分割給人一種更放松的閱讀體驗(yàn)。

2.4 確認(rèn)字體大小

規(guī)范性較好的界面設(shè)計(jì)其字體大小都是一致性的。除了必需的系統(tǒng)字體以外，在banner設(shè)計(jì)上、一些入口圖標(biāo)上，可以用到2至3種字體。

系統(tǒng)字體：

Android系統(tǒng)中文字體為“思源黑體”， iOS系統(tǒng)中文字體為“蘋方”。

字體大?。?/p>

首先定義整個(gè)項(xiàng)目中使用的關(guān)鍵字體大小。不要使用23px、25px、27px、29px、31px等奇數(shù)的字體，相反應(yīng)使用偶數(shù)字體。標(biāo)準(zhǔn)的字體大小能使界面更加一致和美觀，也可以加快設(shè)計(jì)過程并提高效率。當(dāng)定義字體大小時(shí)，請(qǐng)確保不要以相同的增量增加大小，當(dāng)放大文本時(shí)，應(yīng)該是非線性的。

這意味著創(chuàng)建的文本越大，增量應(yīng)該越大。假設(shè)一段內(nèi)容字體大小為24 px的文本，如果要將其放大一點(diǎn)，那就應(yīng)該是26px。如果是一個(gè)大標(biāo)題像素為40px，并且想把它變大。并不是直接增加2px，從 40px到42px。從視覺上看，標(biāo)題文本需要更大的變化。就需要將其增加24px，所以應(yīng)是64px的標(biāo)題。

簡(jiǎn)而言之，這意味著希望文本越大，需要使用的增量就越大。這個(gè)非常簡(jiǎn)單的原則不僅適用于文本，也適用于按鈕的大小、空白區(qū)域和其他所有內(nèi)容。

它通常基于幾何級(jí)數(shù)。這是一個(gè)非常有用的圖表，展示了字體比例，如圖3所示。

對(duì)于常用的字體比例為 12px、14px、16px、18px、20px、24px、30px、36px、48px、60px 和72px[4]。

文本行高：

定義了所有字體大小，就需要注意行距。對(duì)于行高，再次使用4px的增量。例如，對(duì)于16px的文本，將行高設(shè)置為24px。如果想讓文本空間更多，那么將行高增4px，為28px。這個(gè)就是所謂的“+4法則”。

2.5 定義顏色

由于顏色有著較為煩瑣的組合方式，需提前制定出界面中的涉及的顏色，便于在設(shè)計(jì)時(shí)有一個(gè)清晰的方向。

首先，在整個(gè)項(xiàng)目中不要定義單一顏色為設(shè)計(jì)色。通常是以一個(gè)主色和多個(gè)輔助色，來定義整個(gè)界面顏色。

比較實(shí)用的方法為：同一顏色，設(shè)置多個(gè)色調(diào)，這樣色調(diào)在整個(gè)設(shè)計(jì)項(xiàng)目中都是一致的。每種顏色的目標(biāo)是5到10種色調(diào)。推薦使用每種顏色定義9種色調(diào)。

優(yōu)點(diǎn)是顏色命名。無論使用的是圖形編輯器還是CSS代碼。每個(gè)陰影都將被分配一個(gè)數(shù)字，例如 100、200、300、400、500、600、700、800 和 900[5]。

其次，9是定義顏色的方便數(shù)字。準(zhǔn)備色調(diào)的最佳方法是準(zhǔn)備一排9個(gè)正方形并用顏色填充這些正方形。中間為基色。然后，定義最亮的陰影（最左側(cè)）和最暗的陰影（最右側(cè)）。下一步是選擇介于兩者之間的色調(diào)，如圖4所示。

2.6 準(zhǔn)備不同大小、類型和狀態(tài)的元素

在進(jìn)行設(shè)計(jì)時(shí)，通常會(huì)使用無數(shù)的圖標(biāo)、按鈕和其他組件。需要提前為該元素設(shè)置多種大小不同的尺寸，但尺寸大小不能設(shè)置過多，一般設(shè)置1至4種尺寸便可。在設(shè)計(jì)過程中，不要添加其他尺寸，也不要試圖調(diào)整組件的尺寸。相反，只需使用已經(jīng)定義的組件，整個(gè)設(shè)計(jì)會(huì)更加一致和干凈。

以按鈕為例。開始時(shí)，需要定義它們的層次結(jié)構(gòu)。因此，制作一個(gè)具有主要操作的按鈕和一個(gè)具有次要操作的按鈕，也許還需要另一個(gè)具有不太重要的操作的按鈕。對(duì)于每個(gè)按鈕，指定其狀態(tài)（可點(diǎn)擊、無法點(diǎn)擊）和顏色變化。始終嘗試將元素的數(shù)量減少到最重要的元素。

2.7 如何設(shè)置陰影

用戶界面設(shè)計(jì)師經(jīng)常在設(shè)計(jì)工作中使用陰影。然而，對(duì)于經(jīng)驗(yàn)不足的設(shè)計(jì)師來說，陰影有時(shí)會(huì)很困難。創(chuàng)建陰影時(shí)，必須設(shè)置陰影沿 x 軸和 y 軸的距離，以及模糊半徑、顏色和透明度。陰影可能需要大量時(shí)間來微調(diào)，這就是為什么需要在深入設(shè)計(jì)之前準(zhǔn)備好。準(zhǔn)備一組陰影（使用與顏色相同的方法）很有幫助，然后在整個(gè)設(shè)計(jì)過程中應(yīng)用它們。

此外，請(qǐng)注意將使用的元素的所有其他屬性，例如角半徑、透明度和顏色漸變。

2.8 留白

適當(dāng)?shù)捻撁媪舭缀苤匾?。無論是從外部（邊距）還是從內(nèi)部（填充）偏移元素，都應(yīng)該再次依賴8像素。將偏移量增加8個(gè)像素（小元素為4個(gè)）。與字體大小一樣，想要的間隙越大，增量就必須越大（同樣，需要提前定義這些增量）[3]。

3 結(jié)束語

想要使用戶界面保持干凈且一致，需要在設(shè)計(jì)前定義一些邊界和清晰的流程路徑。在處理設(shè)計(jì)的每個(gè)元素時(shí)，請(qǐng)記住以下幾點(diǎn)：

是否已經(jīng)在設(shè)計(jì)中的某個(gè)地方使用過它。如果是這樣，可以簡(jiǎn)單地復(fù)制該元素。

遵循水平和垂直節(jié)奏，并使用開始時(shí)定義的步驟調(diào)整元素的大小。

避免復(fù)雜的決策和無休止的像素調(diào)整。

不要多次創(chuàng)建相同的元素。如果在界面設(shè)計(jì)前期，設(shè)定了標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范，那么在界面設(shè)計(jì)工作時(shí)就會(huì)更好更有效率，能更快地迭代，設(shè)計(jì)師能更輕松地與開發(fā)人員溝通。開發(fā)人員也將設(shè)遵循設(shè)計(jì)師設(shè)計(jì)樣式的變量，因此請(qǐng)明確定義設(shè)計(jì)規(guī)范。將獲得簡(jiǎn)潔的設(shè)計(jì)，開發(fā)人員將能夠創(chuàng)建更好、可持續(xù)的代碼。

參考文獻(xiàn)：

[1] 劉春驊.應(yīng)用中國(guó)元素創(chuàng)新UI界面設(shè)計(jì)的對(duì)策探討[J].藝術(shù)科技，2017，30（12）：108，186.

[2] 嚴(yán)晨，柴純鋼，徐娜.多媒體界面設(shè)計(jì)[M].北京：電子工業(yè)出版社，2011.

[3] 汪蘭川，劉春雷.UI圖標(biāo)設(shè)計(jì)從入門到精通[M].北京：人民郵電出版社，2016.

[4] 張星月.基于情感化理念的手機(jī)UI界面設(shè)計(jì)與用戶心理分析——以安卓與iPhone手機(jī)UI界面對(duì)比分析為例[D].西安：西安建筑科技大學(xué)，2017.

[5] 吳豐.移動(dòng)端App UI設(shè)計(jì)與交互基礎(chǔ)教程：微課版[M].北京：人民郵電出版社，2019.

【通聯(lián)編輯：謝媛媛】