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

譚恒松

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

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

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

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

移動(dòng)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è)移動(dòng)UI 設(shè)計(jì)電子教程，如制作APP 圖標(biāo)的電子教程，讓學(xué)生從空白畫布開始一步一步來完成一個(gè)APP圖標(biāo)的設(shè)計(jì)。教程中需要給出每一個(gè)參數(shù)的設(shè)置，這樣便于學(xué)生訓(xùn)練。

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

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

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

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

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

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

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

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

（四）考核

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

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

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

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

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

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

三、結(jié)束語(yǔ)

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