淺析移動APP設計教學中的界面設計要點

王婧然

北京信息職業技術學院

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

一、 界面控件

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

二、界面文本

（一）文本尺寸

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

（二）文本對比度

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

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

（三）文本間距

適當地增加行間距，會提高文字的易讀性。學生在界面文本的設計中，最常出現的就是行間距過小的問題，在這里必須提示學生，除了要考慮字號本身的大小，行間距也同等重要。可以讓學生做一個實驗，設置兩組文本，兩組用完全相同的字號，但是設置成兩種不同的行間距，讓學生感受相同字號下不同行間距帶來的易讀性差異。

三、界面圖片

（一）高分辨率

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

（二）防止拉伸

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

四、界面排版

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

五、結語

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