《軟件UI 設(shè)計(jì)》課程中關(guān)于移動UI 設(shè)計(jì)的教學(xué)探討

譚恒松

（浙江工商職業(yè)技術(shù)學(xué)院，浙江 寧波 315012）

隨著智能手機(jī)的普及，大家越來越離不開手機(jī)了，各種手機(jī)APP 已經(jīng)融入到我們的生活的各方各面。一款有著優(yōu)秀的移動UI 界面設(shè)計(jì)，對于提升用戶體驗(yàn)滿意度，提高客戶對應(yīng)用程序的粘度有著重要的作用。在《軟件UI 設(shè)計(jì)》這門課中，移動UI 設(shè)計(jì)主要是指手機(jī)的APP 的UI 設(shè)計(jì)。本文將探討移動UI 設(shè)計(jì)的教學(xué)。

一、移動UI 設(shè)計(jì)的教學(xué)設(shè)計(jì)

（一）整體設(shè)計(jì)

移動UI 設(shè)計(jì)主要是APP 圖標(biāo)設(shè)計(jì)、過度界面設(shè)計(jì)、APP 主界面設(shè)計(jì)。基本上是使用Photoshop 來完成整個(gè)UI 設(shè)計(jì)。一般都是教師給出一個(gè)參考的電子教程，學(xué)生根據(jù)教程來完成。

（二）教學(xué)準(zhǔn)備

因?yàn)橛泻芏鄬W(xué)生高中就沒有使用過Photoshop，因此，在開展教學(xué)之前需要準(zhǔn)備一些Photoshop 的教學(xué)視頻提早發(fā)給學(xué)生，讓學(xué)生利用課外時(shí)間進(jìn)行學(xué)習(xí)Photoshop 相關(guān)操作技巧。另外，還需要準(zhǔn)備幾個(gè)移動UI 設(shè)計(jì)電子教程，如制作APP 圖標(biāo)的電子教程，讓學(xué)生從空白畫布開始一步一步來完成一個(gè)APP圖標(biāo)的設(shè)計(jì)。教程中需要給出每一個(gè)參數(shù)的設(shè)置，這樣便于學(xué)生訓(xùn)練。

（三）課堂教學(xué)設(shè)計(jì)

移動UI 設(shè)計(jì)的課程教學(xué)至少需要16 個(gè)課時(shí)，也可以根據(jù)學(xué)生的完成情況來適當(dāng)增加課外課時(shí)。具體安排如下表所示：

在課堂教學(xué)時(shí)，要掌握以下幾個(gè)移動UI 設(shè)計(jì)的技巧：

1.不要將網(wǎng)頁端的設(shè)計(jì)模式替換到移動端。在《軟件UI 設(shè)計(jì)》這門課程的前半部分學(xué)生都是做的網(wǎng)頁端的設(shè)計(jì)，現(xiàn)在學(xué)習(xí)到移動端設(shè)計(jì)，學(xué)生容易將網(wǎng)頁端的設(shè)計(jì)模式直接替換到移動端，如頁面有些頁面文字還帶有超鏈接的下劃線，或者一個(gè)頁面將所有的內(nèi)容都布局出來。這樣用戶打開的移動端僅僅是網(wǎng)頁端的尺寸縮小版，達(dá)不到用戶對移動應(yīng)用的交互模式和界面元素的特殊期待。

2.對移動端的導(dǎo)航要精簡。在網(wǎng)頁端，可以通過各種超鏈接將導(dǎo)航做的比較復(fù)雜，一個(gè)導(dǎo)航可以承載多個(gè)層級，但是在移動端，由于屏幕大小的限制，用戶可能不愿意瀏覽多個(gè)類目，用戶打開APP 頁面時(shí)，有自己特定的操作，需要訪問特定的頁面，這樣我們的移動端導(dǎo)航就需要精簡，不能沿用PC 端的導(dǎo)航模式，應(yīng)需要采用側(cè)邊欄或者地步導(dǎo)航等更適合移動端的方式。同時(shí)，我們需要對導(dǎo)航進(jìn)行優(yōu)化，找到適合用戶的導(dǎo)航模式。

3.對排版布局的尺寸和形式進(jìn)行優(yōu)化。如果在你的APP 中有大量的大尺寸圖片，則你不得不對圖片進(jìn)行優(yōu)化，圖片最好備切割為方形或者和手機(jī)屏幕比例相近的形狀。盡量放棄不匹配移動端需求的JS 動態(tài)效果等。所有的按鈕或者可點(diǎn)擊的元素都按照用戶的手持方式，放到手指最易于觸發(fā)的位置。

4.每個(gè)頁面完成一個(gè)任務(wù)。現(xiàn)在的手機(jī)屏幕越來越大，分辨率越遠(yuǎn)越高，但總是沒有電腦屏幕大，我們在一個(gè)手機(jī)屏幕上展現(xiàn)的內(nèi)容畢竟是有限的，這樣就需要我們盡量做到每一個(gè)頁面完成一個(gè)任務(wù)。設(shè)計(jì)每個(gè)頁面UI 時(shí)，保證界面的簡潔直觀，讓你使用的所有UI 設(shè)計(jì)元素都用來幫助用戶作出執(zhí)行操作的決定就可以了。

5.保持頁面的視覺一致性。我們在設(shè)計(jì)時(shí)，需要為用戶提供一個(gè)風(fēng)格統(tǒng)一的界面，這將使得用戶可以花更少的時(shí)間在操作學(xué)習(xí)上，因?yàn)樗麄兛梢詫⒆约簭牟僮饕粋€(gè)界面中的經(jīng)驗(yàn)直接移植到另外一個(gè)界面上，使得整個(gè)UI 體驗(yàn)更加流暢。

（四）考核

移動UI 設(shè)計(jì)教學(xué)內(nèi)容的考核應(yīng)該是融入課程教學(xué)的，采用的是過程化考核方式。簡單圖標(biāo)設(shè)計(jì)和復(fù)雜圖標(biāo)設(shè)計(jì)都有固定的主題，學(xué)生完成即獲得相應(yīng)成績。APP主界面不指定主題，學(xué)生根據(jù)自己的想法找一個(gè)主題來設(shè)計(jì)，最后通過小組評價(jià)和教師評價(jià)相結(jié)合的方式對學(xué)生的作品給出成績。

二、移動UI 設(shè)計(jì)教學(xué)的思考

現(xiàn)在智能手機(jī)種類繁多，對APP 的UI 設(shè)計(jì)有很大的限制，導(dǎo)致給我們移動UI 設(shè)計(jì)的教學(xué)帶來很大的困擾，有很多問題需要去解決。針對存在的問題，我們也提出一部分改進(jìn)對策，主要有：

（一）增加優(yōu)秀的APP 教學(xué)案例、從國外優(yōu)秀APP 案例來獲取靈感。國外很多優(yōu)秀的APP 的界面做得非常好，學(xué)生可以多去學(xué)習(xí)一下，從他們的配色以及圖片的處理等進(jìn)行模仿學(xué)習(xí)。

（二）增加課外教學(xué)時(shí)間，讓學(xué)生在課外多花時(shí)間來完成作業(yè)。學(xué)生第一次接觸到移動端UI 設(shè)計(jì)，需要課外再花時(shí)間去學(xué)習(xí)移動UI 設(shè)計(jì)的一些規(guī)則，熟悉一些移動UI 設(shè)計(jì)的流程。

（三）邀請相關(guān)公司的人員來給學(xué)生講座，讓學(xué)生熟悉公司的工作流程。學(xué)生根據(jù)公司的實(shí)際要求來分解我們的學(xué)習(xí)內(nèi)容，更有利于學(xué)生的學(xué)習(xí)。

三、結(jié)束語

移動UI 設(shè)計(jì)有別于網(wǎng)頁UI 設(shè)計(jì)，它需要適配各種各樣的智能手機(jī)，難度比較大。學(xué)生能做到的是不停模仿國內(nèi)外優(yōu)秀的APP，從優(yōu)秀案例中獲得靈感。教學(xué)內(nèi)容也需要不停進(jìn)行改進(jìn)，不斷摸索適合學(xué)生的教學(xué)設(shè)計(jì)，逐步提高教學(xué)效果。