對于移動APP或是Webapp設(shè)計師來說,主要是要設(shè)計出精美如何人性化的UI界面,為了在與PC端桌面應(yīng)用程序的競爭中展現(xiàn)其優(yōu)勢,原生態(tài)的移動APP或是webapp設(shè)計,都需要提供最簡潔、直觀、快速響應(yīng)的用戶UI界面,以便于用戶在任務(wù)操作中節(jié)省精力和時間。
今天html5模版網(wǎng)(www.52vt.cn)跟大家繼續(xù)分享移動APP設(shè)計干貨,在移動APP設(shè)計和webAPP設(shè)計中六個小技巧。
1、整個APP必須使用上下文情境導(dǎo)航
情境導(dǎo)航就是在既定的情境下考慮用戶希望看什么、需要什么是非常重要的。
不需要在每一個地方都放置相同的導(dǎo)航控件,因為用戶不是在任何情況下都需要它們。
移動APP或是Webapp都可以從這種上下文情境導(dǎo)航中獲益,僅展示用戶需要的、而不是所有可用的功能,從而保持用戶界面的整潔清爽。
舉個很簡單的例子如下圖,左邊是個人主頁的菜單,非常清晰明了告訴用戶怎么去聯(lián)系。
2、Button狀態(tài)反饋要積極,主動
不管是移動APP還是webapp,他們都擁有自定義樣式的按鈕的權(quán)利。默認的輸入按鈕可能不適合某些情景,文字鏈接有時候看起來又太含蓄。
需要注意的是,把鏈接做成Button樣式的時候,它們就應(yīng)該有button的表現(xiàn)形式。比如,在點擊button的時候它們應(yīng)該會出現(xiàn)被“壓”過的樣子。
這不僅僅是純粹的視覺變化。及時反饋給用戶,可以使web app感覺起來更靈敏,與桌面應(yīng)用程序的用戶體驗更接近。
3、UI界面元素隨需而變,不需要呆板
力求簡潔明了是用戶界面設(shè)計的重要原則。在同一時間給用戶展示的功能越多,用戶需要尋找和思考的時間也就越多。同樣,界面中存在的選項越少,可用功能就越明顯、越容易瀏覽。不過簡化界面并非輕而易舉,尤其是你不想減少應(yīng)用程序功能的情況下。將高級功能隱藏起來是一種有效的簡化方法。搞清楚在界面中用戶最經(jīng)常用的是哪些功能,然后把其他功能隱藏處理。這些可由下拉式菜單和控件完成。例如,搜索欄中的高級過濾器可以做成尾部的特殊下拉菜單樣式。當用戶需要這些過濾器的時候只需要幾次點擊就可以使用。
模態(tài)窗口就是模態(tài)類型對話框,指除非采取有效的關(guān)閉手段,用戶鼠標點或者輸入光標一直停留在當前的界面上。
彈出式菜單和窗口周邊的陰影不僅僅是為了視覺美觀。陰影一方面增大了菜單或窗口的尺寸,有助于將菜單或窗口從背景中區(qū)別開來;另一方面通過灰度化的邊緣陰影可以屏蔽背景內(nèi)容的噪音干擾。
這個APP設(shè)計技巧源于傳統(tǒng)PC電腦桌面程序,幫助用戶將注意力集中在彈出的窗口。由于很多模態(tài)窗口不容易從桌面程序內(nèi)容頁面中凸顯出來,陰影可以使它們看起來具有立體效果、仿佛懸浮于其他內(nèi)容之上,于是拉近了模態(tài)窗口與用戶的距離感。
5、讓賬戶升級或降級的提示簡潔、不擾民
在很多互聯(lián)網(wǎng)產(chǎn)品中都會有不同權(quán)限的用戶賬戶存在,比如郵箱、空間、網(wǎng)盤存儲、SNS產(chǎn)品等。在用戶擁有了一個賬戶后,他們可以對賬戶進行升級或降級。
APP設(shè)計師就認真思考,如何設(shè)計良好的移動界面來提示用戶他們可以升級而不去干擾用戶的工作流程呢?
移動app設(shè)計師肯定不愿意在應(yīng)用程序之外完成這件事情,這樣的提示應(yīng)該是和app是無縫連接的,而且最好是讓用戶感覺方便。因此升級賬戶的提示最好放在app內(nèi)完成。
6、嵌入相關(guān)介紹等視頻營銷
雖然圖片和文字是向用戶介紹應(yīng)用程序功能的很好的方式,但如果資源允許的話,視頻將是一個更優(yōu)方案。
近年來視頻在網(wǎng)絡(luò)上的使用越來越頻繁。特別是今年2014年微視頻的火爆!讓整個移動互聯(lián)網(wǎng)圈子中蔓延著微視風(fēng)!8秒,10秒等等。
但是之前Webapp的截屏視頻經(jīng)常被使用在營銷網(wǎng)站中來展示產(chǎn)品的功能;然而這并不是視頻使用的唯一方式。多想想,就會有新的辦法解決!
小小的總結(jié):老譚認為其實設(shè)計APP或是webAPP,除了平常我們所了解的相關(guān)設(shè)計知識之外,也有在APP設(shè)計項目中去總結(jié)和思考。閱讀優(yōu)秀的APP界面設(shè)計之后,經(jīng)過思考應(yīng)用在我們自己的app上,而且加入你的思想或是小小的改進,會有不一樣的APP味道!