UI培訓里的APP設計心得
來源:
奇酷教育 發(fā)表于:
奇酷教育-UI培訓_UI培訓班_UI設計_UI設計培訓班
前段時間項目組接到公司一個緊急項目,做一個景區(qū)檢票的APP,項目周期很短,設計、開發(fā)、測試到上線僅僅只有兩個星期的時間。最后經(jīng)過項目組成員的辛勤付出,項目如期上線。這個APP雖然功能簡單,但要在這么緊迫的時間內(nèi)把它做出來,并且把用戶體驗做到最好還是有很多地方需要去思考的。下面我會一一列舉我在做這個項目的一些心得體會。
一、考慮產(chǎn)品媒介
該APP是Pad端的,相比于手機端,屏幕要更大,可展示的內(nèi)容會更多。最初,產(chǎn)品給的原型是這樣的(如下圖,哈哈哈,有沒有被驚到……),產(chǎn)品僅僅把該APP的幾個主要功能擺放在頁面上,沒有考慮到對大屏幕的有效利用,有些功能其實可以展開出來的,而不是讓用戶跳到下級頁面去看,比如“檢票記錄”。

二、了解使用場景優(yōu)化交互體驗
1.使用場景
景區(qū)檢票員在檢票的時候心情是焦慮、煩躁的,特別是排隊人數(shù)很多的時候。這就要求該APP能夠做到非常容易學習,容易使用,以最少的操作步驟、最快的速度準確地完成任務。
2.更少的操作次數(shù)
對初稿原型進行優(yōu)化,在第二版中將檢票記錄列了出來,而不需要進入二級頁面才出現(xiàn),如下圖:

但是現(xiàn)在用戶要完成一個檢票動作需要這幾步動作(檢票分為掃碼槍掃碼檢票和輸入編碼檢票):
掃碼檢票的情況下:用戶掃碼 → 點擊“檢票按鈕” → 彈出檢票結果 → 關閉彈窗
輸入編碼檢票的情況下:用戶點擊輸入框后彈出鍵盤 → 點擊“檢票按鈕” → 彈出檢票結果 → 關閉彈窗
此等操作太過于繁瑣,估計檢票員會提著菜刀來砍人。于是再優(yōu)化,給出了下一版,優(yōu)化點有:
將數(shù)字鍵盤直接置于畫面中不動,只需點擊鍵盤即可輸入;
另外將檢票狀態(tài)置于頁面右上角,不需要彈窗;
檢票記錄只顯示當天的檢票記錄,想查看以前的可以點擊“歷史記錄”;
另外最重要的一點是,將“檢票按鈕”去掉,掃碼槍掃碼后直接出檢票結果,輸入編碼到達數(shù)字位數(shù)后直接出檢票結果。

現(xiàn)在用戶要完成一個檢票動作只需要兩步動作(檢票分為掃碼槍掃碼檢票和輸入編碼檢票):
掃碼檢票的情況下:用戶掃碼 → 查看檢票結果
輸入編碼檢票的情況下:用戶輸入編碼 → 查看檢票結果
視覺稿如下:

3.狀態(tài)的完備性
狀態(tài)的是否完備最能體現(xiàn)設計是否嚴密,也是最容易被人忽略的環(huán)節(jié)。狀態(tài)可分為:空白狀態(tài)、初始狀態(tài)、加載中、一般狀態(tài)、極限狀態(tài)、成功狀態(tài)、錯誤狀態(tài)、完成狀態(tài)。當然不同的應用也存在著一些比較特殊的狀態(tài),比如該產(chǎn)品中,我們要考慮到掃碼槍的電量問題,所以需給出剩余的電量狀態(tài)。

4.狀態(tài)變化的易見性
當內(nèi)容狀態(tài)變化的時候需要讓用戶清晰明確地感知到,消除用戶焦慮感,讓用戶對設備的有可控感。在該APP中,當檢票的時候,如果前后兩次的檢票結果一樣,那變化的可能就只剩下“入園時間”了,這樣很難讓用戶感知到。于是在檢票結果變化的時候,加入了動效,如圖:

為了營造更好的體驗,讓用戶更快地知道檢票結果,我們對檢票的幾個狀態(tài)分別錄了聲音:“檢票成功”、“門票已使用”、“門票已過期”及“門票不存在”;另外當掃碼槍電量低于20%時也會有相應的聲音提示。
三、總結
本文主要總結的是采用面向場景的設計方法,面向場景是針對該產(chǎn)品使用場所等模擬,模擬用戶在多種情況下產(chǎn)品使用的模擬。好的設計是建立在對用戶深刻了解之上的,因此用戶使用場景分析就很重要,了解產(chǎn)品的現(xiàn)有交互以及用戶使用產(chǎn)品習慣等能夠做出一個另用戶滿意、使用舒服的產(chǎn)品。

以上就是
奇酷為大家分享的“UI培訓里的APP設計心得”謝謝大家觀看,如果對UI設計感興趣的話,想學
UI設計培訓的,也可以在線咨詢,我們將竭誠為你解答。