王婧然

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

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

一、 界面控件

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

二、界面文本

（一）文本尺寸

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

（二）文本對(duì)比度

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

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

（三）文本間距

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

三、界面圖片

（一）高分辨率

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

（二）防止拉伸

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

四、界面排版

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

五、結(jié)語(yǔ)

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