張修竹

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

關(guān)鍵詞：移動手機;用戶界面;界面設(shè)計

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2022）18-0071-03

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

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

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

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

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

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

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

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

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

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

2 移動手機用戶界面設(shè)計的技巧

2.1 8像素網(wǎng)格

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

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

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

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

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

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

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

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

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

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

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

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

2.3 布局中的空間元素

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

2.4 確認字體大小

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

系統(tǒng)字體：

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

字體大?。?/p>

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

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

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

它通?；趲缀渭墧?shù)。這是一個非常有用的圖表，展示了字體比例，如圖3所示。

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

文本行高：

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

2.5 定義顏色

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

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

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

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

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

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

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

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

2.7 如何設(shè)置陰影

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

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

2.8 留白

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

3 結(jié)束語

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

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

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

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

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

參考文獻：

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

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

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

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

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

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