淺析移動APP設(shè)計教學(xué)中的界面設(shè)計要點(diǎn)

王婧然

北京信息職業(yè)技術(shù)學(xué)院

在移動APP設(shè)計的課程教學(xué)中，涉及的知識點(diǎn)包含用戶研究、用戶體驗、原型設(shè)計、界面設(shè)計等。對于一個APP產(chǎn)品的成型，每一部分各司其職，但根據(jù)實(shí)際教學(xué)經(jīng)驗，學(xué)生設(shè)計的APP作品，成敗的關(guān)鍵因素就是最終界面的呈現(xiàn)。對于一個APP，所有的前期設(shè)計構(gòu)思后期都要落地到界面上，半數(shù)以上的學(xué)生，雖能把前期調(diào)研工作和原型創(chuàng)意階段做得很好，但完成的作品總是差強(qiáng)人意，恰恰就是在界面設(shè)計的細(xì)節(jié)上有所欠缺。本文將基于實(shí)際教學(xué)中的經(jīng)驗，根據(jù)學(xué)生在界面細(xì)節(jié)的設(shè)計上經(jīng)常出現(xiàn)的問題，進(jìn)行界面設(shè)計要點(diǎn)的分析。

一、 界面控件

在學(xué)生設(shè)計的界面中，時常會看到某些按鈕太小的情況。原則上講，可觸控的控件在設(shè)計時，尺寸不得小于44*44像素，而如今大部分智能手機(jī)已是高清屏，是兩倍率，所以也就是88*88像素。只有這樣才能確保觸摸的精度和命中率。學(xué)生在設(shè)計時，很容易使每個控件之間離得過近并且很小，沒有充分考慮手指的觸摸范圍，導(dǎo)致實(shí)際應(yīng)用時容易誤操作。針對這個問題，除了以上講到的原則外，還建議讓學(xué)生下載一個叫Ps Play的應(yīng)用，利用它，在PS上做的界面可以隨時映射在手機(jī)屏幕上，各控件的大小是否合適也就一目了然。

二、界面文本

（一）文本尺寸

一般來說，正文字號大小是24～28像素，小標(biāo)題字號則是32～36像素，這樣才能確保在常規(guī)距離下無需縮放就可以清晰地閱讀文本。試想如果文字很小，同時也會導(dǎo)致一個頁面承載過多的文字，使人不想閱讀。

（二）文本對比度

盡量確保文字和背景色彩對比更明顯，調(diào)整好文字與背景的對比會提高文本的可讀性。

設(shè)想兩種情況，一種是白色背景和高純度的黑色文字，配以高純度綠色的標(biāo)題，而另一種同樣是白色背景，但文字是灰色，標(biāo)題是低純度的綠色，可想而知，后者的整體對比度較低，可讀性差，容易造成文本和背景或背景圖片混為一體的情況。

（三）文本間距

適當(dāng)?shù)卦黾有虚g距，會提高文字的易讀性。學(xué)生在界面文本的設(shè)計中，最常出現(xiàn)的就是行間距過小的問題，在這里必須提示學(xué)生，除了要考慮字號本身的大小，行間距也同等重要。可以讓學(xué)生做一個實(shí)驗，設(shè)置兩組文本，兩組用完全相同的字號，但是設(shè)置成兩種不同的行間距，讓學(xué)生感受相同字號下不同行間距帶來的易讀性差異。

三、界面圖片

（一）高分辨率

為所有圖片資源提供高分辨率的版本。低于手機(jī)屏幕尺寸的圖像在高清屏幕上會出現(xiàn)模糊或馬賽克的狀況。指導(dǎo)學(xué)生在具體操作時，找的圖片尺寸不要低于在PS上建的屏幕尺寸。例如學(xué)生按照iphone6屏幕尺寸去做界面，即750*1334像素，那么找的全屏圖片就不能小于這個尺寸。

（二）防止拉伸

學(xué)生在設(shè)計界面圖片時有個屢見不鮮的問題，就是圖片經(jīng)常被縱向拉高或橫向壓扁。為了防止圖片的拉伸，學(xué)生在實(shí)際操作時，始終要提醒學(xué)生控制好圖片的高寬比。原始圖片往往不能保證是理想尺寸，應(yīng)用時可以進(jìn)行大小縮放，但是一定要避免拉伸導(dǎo)致的失真問題。具體操作也就是在用Photoshop做縮放時，不能忘記按住Shift鍵，這樣即可保證圖片按照原有比例縮放，不會出現(xiàn)拉伸的問題。

四、界面排版

讓控件、文本、圖片在界面上保持對齊，相似和相關(guān)的內(nèi)容合理地靠近，可以讓用戶更容易理解界面信息。移動APP的界面，除了涉及排版的問題，同時也必須按照用戶習(xí)慣去設(shè)計各元素的位置。例如掛斷電話的按鈕，最合適的位置就是放在中間靠下，因為從用戶習(xí)慣的角度來說，是容易觸摸，而從排版的角度來說，既然放在下面中間的位置，就一定要和頁面居中對齊。學(xué)生設(shè)計的界面中，不對齊的情況比比皆是，有的是本該居中的元素沒和界面居中對齊，有的是同等的元素之間沒有對齊，還有的是每個元素位置排得比較亂，缺乏規(guī)律。在這里必須要求學(xué)生嚴(yán)格遵循排版的規(guī)律，隨時關(guān)注左對齊、右對齊、居中對齊以及同等元素之間的對齊。

五、結(jié)語

在移動APP的界面設(shè)計部分的教學(xué)中，歸根結(jié)底要讓學(xué)生明確一個問題，UI界面設(shè)計和平面設(shè)計本質(zhì)的區(qū)別是什么？答案是，除了美觀還要考慮是否好用。其實(shí)以上分析到的界面設(shè)計要點(diǎn)，都是最基本的界面設(shè)計要求，是原則也是底線，沒有任何高超的設(shè)計技巧，但這些問題仍時有發(fā)生。所以在指導(dǎo)學(xué)生時，只要能讓學(xué)生理解了上面說的要考慮是否好用這個問題的基礎(chǔ)上，同時保證做到本文分析到的所有要點(diǎn)，相信學(xué)生的界面設(shè)計不會差。